Skip to content

Commit 25e4ed3

Browse files
stipsanstipsan
committedMar 7, 2025··
fix: handle styled-components attribute warnings
·
v3.0.2v3.0.1
1 parent 8c6a67d commit 25e4ed3

File tree

37 files changed

+150
-155
lines changed

37 files changed

+150
-155
lines changed
 

‎package-lock.json

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,9 @@
7474
"react-hook-form": "^7.54.2",
7575
"react-redux": "^9.2.0",
7676
"react-select": "^5.3.2",
77-
"react-virtuoso": "^4.3.11",
77+
"react-virtuoso": "^4.12.5",
7878
"redux": "^5.0.1",
79-
"redux-observable": "^3.0.0-rc.2",
79+
"redux-observable": "3.0.0-rc.2",
8080
"rxjs": "^7.8.1",
8181
"zod": "^3.21.4"
8282
},

‎src/components/AssetGridVirtualized/index.tsx

+13-2
Original file line numberDiff line numberDiff line change
@@ -28,18 +28,29 @@ const VirtualCell = memo(
2828
}
2929
)
3030

31-
const ItemContainer = styled.div`
31+
const StyledItemContainer = styled.div`
3232
height: ${CARD_HEIGHT}px;
3333
width: ${CARD_WIDTH}px;
3434
`
3535

36-
const ListContainer = styled.div`
36+
function ItemContainer(props: any) {
37+
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- we're doing this to avoid sc warnings about `context` passed as an attribute
38+
const {context, ...rest} = props
39+
return <StyledItemContainer {...rest} />
40+
}
41+
42+
const StyledListContainer = styled.div`
3743
display: grid;
3844
grid-template-columns: repeat(auto-fill, ${CARD_WIDTH}px);
3945
grid-template-rows: repeat(auto-fill, ${CARD_HEIGHT}px);
4046
justify-content: center;
4147
margin: 0 auto;
4248
`
49+
function ListContainer(props: any) {
50+
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- we're doing this to avoid sc warnings about `context` passed as an attribute
51+
const {context, ...rest} = props
52+
return <StyledListContainer {...rest} />
53+
}
4354

4455
const AssetGridVirtualized = (props: Props) => {
4556
const {items, onLoadMore} = props

‎src/components/Browser/index.tsx

+30-41
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import type {MutationEvent} from '@sanity/client'
2-
import {Card, Flex, PortalProvider, studioTheme, ThemeProvider, ToastProvider} from '@sanity/ui'
2+
import {Card, Flex, PortalProvider} from '@sanity/ui'
33
import type {Asset, Tag} from '../../types'
44
import groq from 'groq'
55
import {useEffect, useState} from 'react'
66
import {useDispatch} from 'react-redux'
7-
import {useColorSchemeValue, type AssetSourceComponentProps, type SanityDocument} from 'sanity'
7+
import {type AssetSourceComponentProps, type SanityDocument} from 'sanity'
88
import {TAG_DOCUMENT_NAME} from '../../constants'
99
import {AssetBrowserDispatchProvider} from '../../contexts/AssetSourceDispatchContext'
1010
import useVersionedClient from '../../hooks/useVersionedClient'
@@ -32,47 +32,42 @@ type Props = {
3232

3333
const BrowserContent = ({onClose}: {onClose?: AssetSourceComponentProps['onClose']}) => {
3434
const client = useVersionedClient()
35-
3635
const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
37-
38-
// Redux
3936
const dispatch = useDispatch()
4037

41-
// Callbacks
42-
const handleAssetUpdate = (update: MutationEvent) => {
43-
const {documentId, result, transition} = update
38+
useEffect(() => {
39+
const handleAssetUpdate = (update: MutationEvent) => {
40+
const {documentId, result, transition} = update
4441

45-
if (transition === 'appear') {
46-
dispatch(assetsActions.listenerCreateQueue({asset: result as Asset}))
47-
}
42+
if (transition === 'appear') {
43+
dispatch(assetsActions.listenerCreateQueue({asset: result as Asset}))
44+
}
4845

49-
if (transition === 'disappear') {
50-
dispatch(assetsActions.listenerDeleteQueue({assetId: documentId}))
51-
}
46+
if (transition === 'disappear') {
47+
dispatch(assetsActions.listenerDeleteQueue({assetId: documentId}))
48+
}
5249

53-
if (transition === 'update') {
54-
dispatch(assetsActions.listenerUpdateQueue({asset: result as Asset}))
50+
if (transition === 'update') {
51+
dispatch(assetsActions.listenerUpdateQueue({asset: result as Asset}))
52+
}
5553
}
56-
}
5754

58-
const handleTagUpdate = (update: MutationEvent) => {
59-
const {documentId, result, transition} = update
55+
const handleTagUpdate = (update: MutationEvent) => {
56+
const {documentId, result, transition} = update
6057

61-
if (transition === 'appear') {
62-
dispatch(tagsActions.listenerCreateQueue({tag: result as Tag}))
63-
}
58+
if (transition === 'appear') {
59+
dispatch(tagsActions.listenerCreateQueue({tag: result as Tag}))
60+
}
6461

65-
if (transition === 'disappear') {
66-
dispatch(tagsActions.listenerDeleteQueue({tagId: documentId}))
67-
}
62+
if (transition === 'disappear') {
63+
dispatch(tagsActions.listenerDeleteQueue({tagId: documentId}))
64+
}
6865

69-
if (transition === 'update') {
70-
dispatch(tagsActions.listenerUpdateQueue({tag: result as Tag}))
66+
if (transition === 'update') {
67+
dispatch(tagsActions.listenerUpdateQueue({tag: result as Tag}))
68+
}
7169
}
72-
}
7370

74-
// Effects
75-
useEffect(() => {
7671
// Fetch assets: first page
7772
dispatch(assetsActions.loadPageIndex({pageIndex: 0}))
7873

@@ -97,7 +92,7 @@ const BrowserContent = ({onClose}: {onClose?: AssetSourceComponentProps['onClose
9792
subscriptionAsset?.unsubscribe()
9893
subscriptionTag?.unsubscribe()
9994
}
100-
}, [])
95+
}, [client, dispatch])
10196

10297
return (
10398
<PortalProvider element={portalElement}>
@@ -132,7 +127,6 @@ const BrowserContent = ({onClose}: {onClose?: AssetSourceComponentProps['onClose
132127

133128
const Browser = (props: Props) => {
134129
const client = useVersionedClient()
135-
const scheme = useColorSchemeValue()
136130

137131
return (
138132
<ReduxProvider
@@ -141,15 +135,10 @@ const Browser = (props: Props) => {
141135
document={props?.document}
142136
selectedAssets={props?.selectedAssets}
143137
>
144-
<ThemeProvider scheme={scheme} theme={studioTheme}>
145-
<ToastProvider>
146-
<AssetBrowserDispatchProvider onSelect={props?.onSelect}>
147-
<GlobalStyle />
148-
149-
<BrowserContent onClose={props?.onClose} />
150-
</AssetBrowserDispatchProvider>
151-
</ToastProvider>
152-
</ThemeProvider>
138+
<AssetBrowserDispatchProvider onSelect={props?.onSelect}>
139+
<GlobalStyle />
140+
<BrowserContent onClose={props?.onClose} />
141+
</AssetBrowserDispatchProvider>
153142
</ReduxProvider>
154143
)
155144
}

‎src/components/ButtonViewGroup/index.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import {ThLargeIcon, ThListIcon} from '@sanity/icons'
22
import {Button, Inline} from '@sanity/ui'
3-
import React from 'react'
43
import {useDispatch} from 'react-redux'
54
import useTypedSelector from '../../hooks/useTypedSelector'
65
import {assetsActions} from '../../modules/assets'

‎src/components/CardAsset/index.tsx

+12-14
Original file line numberDiff line numberDiff line change
@@ -39,22 +39,22 @@ const CardWrapper = styled(Flex)`
3939
width: 100%;
4040
`
4141

42-
const CardContainer = styled(Flex)<{picked?: boolean; theme: Theme; updating?: boolean}>(
43-
({picked, theme, updating}) => {
42+
const CardContainer = styled(Flex)<{$picked?: boolean; theme: Theme; $updating?: boolean}>(
43+
({$picked, theme, $updating}) => {
4444
return css`
4545
border: 1px solid transparent;
4646
height: 100%;
47-
pointer-events: ${updating ? 'none' : 'auto'};
47+
pointer-events: ${$updating ? 'none' : 'auto'};
4848
position: relative;
4949
transition: all 300ms;
5050
user-select: none;
5151
width: 100%;
5252
53-
border: ${picked
53+
border: ${$picked
5454
? `1px solid ${theme.sanity.color.spot.orange} !important`
5555
: '1px solid inherit'};
5656
57-
${!updating &&
57+
${!$updating &&
5858
css`
5959
@media (hover: hover) and (pointer: fine) {
6060
&:hover {
@@ -66,16 +66,15 @@ const CardContainer = styled(Flex)<{picked?: boolean; theme: Theme; updating?: b
6666
}
6767
)
6868

69-
const ContextActionContainer = styled(Flex)(
70-
// @ts-expect-error - fix typings later
71-
({scheme}: {scheme: ThemeColorSchemeKey}) => {
69+
const ContextActionContainer = styled<typeof Flex, {$scheme: ThemeColorSchemeKey}>(Flex)(
70+
({$scheme}) => {
7271
return css`
7372
cursor: pointer;
7473
height: ${PANEL_HEIGHT}px;
7574
transition: all 300ms;
7675
@media (hover: hover) and (pointer: fine) {
7776
&:hover {
78-
background: ${getSchemeColor(scheme, 'bg')};
77+
background: ${getSchemeColor($scheme, 'bg')};
7978
}
8079
}
8180
`
@@ -153,7 +152,7 @@ const CardAsset = (props: Props) => {
153152

154153
return (
155154
<CardWrapper padding={1}>
156-
<CardContainer direction="column" picked={picked} updating={item.updating}>
155+
<CardContainer direction="column" $picked={picked} $updating={item.updating}>
157156
{/* Image */}
158157
<Box
159158
flex={1}
@@ -170,8 +169,8 @@ const CardAsset = (props: Props) => {
170169
{isImageAsset(asset) && (
171170
<Image
172171
draggable={false}
173-
scheme={scheme}
174-
showCheckerboard={!isOpaque}
172+
$scheme={scheme}
173+
$showCheckerboard={!isOpaque}
175174
src={imageDprUrl(asset, {height: 250, width: 250})}
176175
style={{
177176
draggable: false,
@@ -224,8 +223,7 @@ const CardAsset = (props: Props) => {
224223
align="center"
225224
onClick={handleContextActionClick}
226225
paddingX={1}
227-
// @ts-expect-error - fix typings later
228-
scheme={scheme}
226+
$scheme={scheme}
229227
style={{opacity: opacityContainer}}
230228
>
231229
{onSelect ? (

‎src/components/CardUpload/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ const CardUpload = (props: Props) => {
9090
{item.assetType === 'image' && item?.objectUrl && (
9191
<Image
9292
draggable={false}
93-
scheme={scheme}
93+
$scheme={scheme}
9494
src={item.objectUrl}
9595
style={{
9696
opacity: 0.4

‎src/components/Controls/index.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import {Box, Button, Flex, Inline, useMediaIndex} from '@sanity/ui'
2-
import React from 'react'
32
import {useDispatch} from 'react-redux'
43
import useTypedSelector from '../../hooks/useTypedSelector'
54
import {dialogActions} from '../../modules/dialog'

‎src/components/DialogAssetEdit/index.tsx

+10-3
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,14 @@ const DialogAssetEdit = (props: Props) => {
240240
}
241241

242242
return (
243-
<Dialog footer={<Footer />} header="Asset details" id={id} onClose={handleClose} width={3}>
243+
<Dialog
244+
animate
245+
footer={<Footer />}
246+
header="Asset details"
247+
id={id}
248+
onClose={handleClose}
249+
width={3}
250+
>
244251
{/*
245252
We reverse direction to ensure the download button doesn't appear (in the DOM) before other tabbable items.
246253
This ensures that the dialog doesn't scroll down to the download button (which on smaller screens, can sometimes
@@ -395,8 +402,8 @@ const DialogAssetEdit = (props: Props) => {
395402
{isImageAsset(currentAsset) && (
396403
<Image
397404
draggable={false}
398-
scheme={scheme}
399-
showCheckerboard={!currentAsset?.metadata?.isOpaque}
405+
$scheme={scheme}
406+
$showCheckerboard={!currentAsset?.metadata?.isOpaque}
400407
src={imageDprUrl(currentAsset, {height: 600, width: 600})}
401408
/>
402409
)}

‎src/components/DialogConfirm/index.tsx

+8-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,14 @@ const DialogConfirm = (props: Props) => {
6060
)
6161

6262
return (
63-
<Dialog footer={<Footer />} header={<Header />} id="confirm" onClose={handleClose} width={1}>
63+
<Dialog
64+
animate
65+
footer={<Footer />}
66+
header={<Header />}
67+
id="confirm"
68+
onClose={handleClose}
69+
width={1}
70+
>
6471
<Box paddingX={4} paddingY={4}>
6572
<Stack space={3}>
6673
{dialog?.title && <Text size={1}>{dialog.title}</Text>}

‎src/components/DialogSearchFacets/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const DialogSearchFacets = (props: Props) => {
2727
}, [])
2828

2929
return (
30-
<Dialog header="Filters" id={id} onClose={handleClose} width={1}>
30+
<Dialog animate header="Filters" id={id} onClose={handleClose} width={1}>
3131
<Box padding={3}>
3232
<SearchFacets layout="stack" />
3333
<SearchFacetsControl />

‎src/components/DialogTagCreate/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ const DialogTagCreate = (props: Props) => {
7878
)
7979

8080
return (
81-
<Dialog footer={<Footer />} header="Create Tag" id={id} onClose={handleClose} width={1}>
81+
<Dialog animate footer={<Footer />} header="Create Tag" id={id} onClose={handleClose} width={1}>
8282
{/* Form fields */}
8383
<Box as="form" padding={4} onSubmit={handleSubmit(onSubmit)}>
8484
{/* Hidden button to enable enter key submissions */}

‎src/components/DialogTagEdit/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ const DialogTagEdit = (props: Props) => {
158158
}
159159

160160
return (
161-
<Dialog footer={<Footer />} header="Edit Tag" id={id} onClose={handleClose} width={1}>
161+
<Dialog animate footer={<Footer />} header="Edit Tag" id={id} onClose={handleClose} width={1}>
162162
{/* Form fields */}
163163
<Box as="form" padding={4} onSubmit={handleSubmit(onSubmit)}>
164164
{/* Deleted notification */}

‎src/components/DialogTags/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const DialogTags = (props: Props) => {
2626
}, [])
2727

2828
return (
29-
<Dialog header="All Tags" id={id} onClose={handleClose} width={1}>
29+
<Dialog animate header="All Tags" id={id} onClose={handleClose} width={1}>
3030
<Box
3131
style={{
3232
height: '100%',

‎src/components/Dialogs/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type {Dialog} from '../../types'
2-
import React from 'react'
2+
33
import useTypedSelector from '../../hooks/useTypedSelector'
44
import DialogAssetEdit from '../DialogAssetEdit'
55
import DialogConfirm from '../DialogConfirm'

‎src/components/DocumentList/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type {SanityDocument} from '@sanity/client'
22
import {Box, Button, Card, Stack, Text} from '@sanity/ui'
3-
import React from 'react'
3+
44
import {Preview, type SchemaType, useSchema} from 'sanity'
55
import {useIntentLink} from 'sanity/router'
66

‎src/components/FileAssetPreview/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {Flex} from '@sanity/ui'
22
import type {Asset} from '../../types'
3-
import React from 'react'
3+
44
import FileIcon from '../FileIcon'
55

66
type Props = {

‎src/components/FormFieldInputLabel/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {ErrorOutlineIcon} from '@sanity/icons'
22
import {Box, Inline, Text, Tooltip} from '@sanity/ui'
3-
import React from 'react'
3+
44
import {styled} from 'styled-components'
55

66
type Props = {

‎src/components/Header/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {CloseIcon, Icon, UploadIcon} from '@sanity/icons'
22
import {Box, Button, Flex, Inline, Text} from '@sanity/ui'
33
import pluralize from 'pluralize'
4-
import React from 'react'
4+
55
import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext'
66
import {useDropzoneActions} from '../../contexts/DropzoneDispatchContext'
77
import useTypedSelector from '../../hooks/useTypedSelector'

‎src/components/Image/index.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,23 @@ import {getSchemeColor} from '../../utils/getSchemeColor'
55

66
type Props = {
77
onClick?: (e: MouseEvent) => void
8-
showCheckerboard?: boolean
9-
scheme?: ThemeColorSchemeKey
8+
$showCheckerboard?: boolean
9+
$scheme?: ThemeColorSchemeKey
1010
src: string
1111
style?: any
1212
}
1313

1414
const Image = styled.img<Props>`
1515
--checkerboard-color: ${props =>
16-
props.scheme ? getSchemeColor(props.scheme, 'bg2') : 'inherit'};
16+
props.$scheme ? getSchemeColor(props.$scheme, 'bg2') : 'inherit'};
1717
1818
display: block;
1919
width: 100%;
2020
height: 100%;
2121
object-fit: contain;
2222
2323
${props =>
24-
props.showCheckerboard &&
24+
props.$showCheckerboard &&
2525
css`
2626
background-image: linear-gradient(45deg, var(--checkerboard-color) 25%, transparent 25%),
2727
linear-gradient(-45deg, var(--checkerboard-color) 25%, transparent 25%),

‎src/components/OrderSelect/index.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import {SortIcon} from '@sanity/icons'
22
import {Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
3-
import React from 'react'
43
import {useDispatch} from 'react-redux'
54
import {getOrderTitle} from '../../config/orders'
65
import {ORDER_OPTIONS} from '../../constants'

‎src/components/ReduxProvider/index.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,6 @@ class ReduxProvider extends Component<Props> {
8585
}
8686

8787
override render() {
88-
// @ts-ignore
8988
return <Provider store={this.store}>{this.props.children}</Provider>
9089
}
9190
}

‎src/components/SearchFacet/index.tsx

+4-9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {CloseIcon} from '@sanity/icons'
2-
import {Box, Flex, Label, rem, Text, type Theme, type ThemeColorSchemeKey} from '@sanity/ui'
2+
import {Box, Flex, Label, rem, Text, type ThemeColorSchemeKey} from '@sanity/ui'
33
import type {SearchFacetInputProps, WithId} from '../../types'
44
import {type ReactNode} from 'react'
55
import {useDispatch} from 'react-redux'
@@ -13,10 +13,9 @@ type Props = {
1313
facet: WithId<SearchFacetInputProps>
1414
}
1515

16-
// @ts-expect-error - fix typings later
17-
const Container = styled(Box)(({scheme, theme}: {scheme: ThemeColorSchemeKey; theme: Theme}) => {
16+
const Container = styled<typeof Box, {$scheme: ThemeColorSchemeKey}>(Box)(({$scheme, theme}) => {
1817
return css`
19-
background: ${getSchemeColor(scheme, 'bg')};
18+
background: ${getSchemeColor($scheme, 'bg')};
2019
border-radius: ${rem(theme.sanity.radius[2])};
2120
`
2221
})
@@ -34,11 +33,7 @@ const SearchFacet = (props: Props) => {
3433
}
3534

3635
return (
37-
<Container
38-
padding={[2, 2, 1]}
39-
// @ts-expect-error - fix typings later
40-
scheme={scheme}
41-
>
36+
<Container padding={[2, 2, 1]} $scheme={scheme}>
4237
<Flex align={['flex-start', 'flex-start', 'center']} direction={['column', 'column', 'row']}>
4338
{/* Title */}
4439
<Box paddingBottom={[3, 3, 0]} paddingLeft={1} paddingRight={2} paddingTop={[1, 1, 0]}>

‎src/components/SearchFacetNumber/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import type {
66
SearchFacetOperatorType,
77
WithId
88
} from '../../types'
9-
import React from 'react'
9+
1010
import {useDispatch} from 'react-redux'
1111
import {operators} from '../../config/searchFacets'
1212
import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'

‎src/components/SearchFacetSelect/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import type {
66
SearchFacetOperatorType,
77
WithId
88
} from '../../types'
9-
import React from 'react'
9+
1010
import {useDispatch} from 'react-redux'
1111

1212
import {operators} from '../../config/searchFacets'

‎src/components/SearchFacets/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Box, Flex, Inline, rem, type Theme} from '@sanity/ui'
2-
import React from 'react'
2+
33
import {styled, css} from 'styled-components'
44

55
import useTypedSelector from '../../hooks/useTypedSelector'

‎src/components/SearchFacetsControl/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {AddIcon} from '@sanity/icons'
22
import {Button, Flex, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem} from '@sanity/ui'
33
import type {SearchFacetDivider, SearchFacetGroup, SearchFacetInputProps} from '../../types'
4-
import React from 'react'
4+
55
import {useDispatch} from 'react-redux'
66
import {FACETS} from '../../constants'
77
import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'

‎src/components/TableHeader/index.tsx

+4-6
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,13 @@ import {useColorSchemeValue} from 'sanity'
1111
import {getSchemeColor} from '../../utils/getSchemeColor'
1212

1313
// TODO: DRY
14-
const ContextActionContainer = styled(Flex)(
15-
// @ts-expect-error - fix typings later
16-
({scheme}: {scheme: ThemeColorSchemeKey}) => {
14+
const ContextActionContainer = styled<typeof Flex, {$scheme: ThemeColorSchemeKey}>(Flex)(
15+
({$scheme}) => {
1716
return css`
1817
cursor: pointer;
1918
@media (hover: hover) and (pointer: fine) {
2019
&:hover {
21-
background: ${getSchemeColor(scheme, 'bg')};
20+
background: ${getSchemeColor($scheme, 'bg')};
2221
}
2322
}
2423
`
@@ -78,8 +77,7 @@ const TableHeader = () => {
7877
align="center"
7978
justify="center"
8079
onClick={handleContextActionClick}
81-
// @ts-expect-error - fix typings later
82-
scheme={scheme}
80+
$scheme={scheme}
8381
style={{
8482
height: '100%',
8583
position: 'relative'

‎src/components/TableHeaderItem/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {ChevronDownIcon, ChevronUpIcon} from '@sanity/icons'
22
import {Box, Label} from '@sanity/ui'
3-
import React from 'react'
3+
44
import {useDispatch} from 'react-redux'
55
import useTypedSelector from '../../hooks/useTypedSelector'
66
import {assetsActions} from '../../modules/assets'

‎src/components/TableRowAsset/index.tsx

+36-45
Original file line numberDiff line numberDiff line change
@@ -47,49 +47,42 @@ type Props = {
4747
selected: boolean
4848
}
4949

50-
const ContainerGrid = styled(Grid)(
51-
// @ts-expect-error - fix typings later
52-
({
53-
scheme,
54-
selected,
55-
updating
56-
}: {
57-
selected?: boolean
58-
scheme: ThemeColorSchemeKey
59-
updating?: boolean
60-
}) => {
50+
const ContainerGrid = styled<
51+
typeof Grid,
52+
{$selected?: boolean; $scheme: ThemeColorSchemeKey; $updating?: boolean}
53+
>(Grid)(({$scheme, $selected, $updating}) => {
54+
return css`
55+
align-items: center;
56+
cursor: ${$selected ? 'default' : 'pointer'};
57+
height: 100%;
58+
pointer-events: ${$updating ? 'none' : 'auto'};
59+
user-select: none;
60+
white-space: nowrap;
61+
62+
${!$updating &&
63+
css`
64+
@media (hover: hover) and (pointer: fine) {
65+
&:hover {
66+
background: ${getSchemeColor($scheme, 'bg')};
67+
}
68+
}
69+
`}
70+
`
71+
})
72+
73+
const ContextActionContainer = styled<typeof Flex, {$scheme: ThemeColorSchemeKey}>(Flex)(
74+
({$scheme}) => {
6175
return css`
62-
align-items: center;
63-
cursor: ${selected ? 'default' : 'pointer'};
64-
height: 100%;
65-
pointer-events: ${updating ? 'none' : 'auto'};
66-
user-select: none;
67-
white-space: nowrap;
68-
69-
${!updating &&
70-
css`
71-
@media (hover: hover) and (pointer: fine) {
72-
&:hover {
73-
background: ${getSchemeColor(scheme, 'bg')};
74-
}
76+
cursor: pointer;
77+
@media (hover: hover) and (pointer: fine) {
78+
&:hover {
79+
background: ${getSchemeColor($scheme, 'bg2')};
7580
}
76-
`}
81+
}
7782
`
7883
}
7984
)
8085

81-
// @ts-expect-error - fix typings later
82-
const ContextActionContainer = styled(Flex)(({scheme}: {scheme: ThemeColorSchemeKey}) => {
83-
return css`
84-
cursor: pointer;
85-
@media (hover: hover) and (pointer: fine) {
86-
&:hover {
87-
background: ${getSchemeColor(scheme, 'bg2')};
88-
}
89-
}
90-
`
91-
})
92-
9386
const StyledWarningIcon = styled(WarningFilledIcon)(({theme}) => {
9487
return {
9588
color: theme.sanity.color.spot.red
@@ -181,23 +174,21 @@ const TableRowAsset = (props: Props) => {
181174
return (
182175
<ContainerGrid
183176
onClick={selected ? undefined : handleClick}
184-
// @ts-expect-error - fix typings later
185-
scheme={scheme}
186-
selected={selected}
177+
$scheme={scheme}
178+
$selected={selected}
187179
style={{
188180
gridColumnGap: mediaIndex < 3 ? 0 : '16px',
189181
gridRowGap: 0,
190182
gridTemplateColumns:
191183
mediaIndex < 3 ? GRID_TEMPLATE_COLUMNS.SMALL : GRID_TEMPLATE_COLUMNS.LARGE,
192184
gridTemplateRows: mediaIndex < 3 ? 'auto' : '1fr'
193185
}}
194-
updating={item.updating}
186+
$updating={item.updating}
195187
>
196188
{/* Picked checkbox */}
197189
<ContextActionContainer
198190
onClick={handleContextActionClick}
199-
// @ts-expect-error - fix typings later
200-
scheme={scheme}
191+
$scheme={scheme}
201192
style={{
202193
alignItems: 'center',
203194
gridColumn: 1,
@@ -247,8 +238,8 @@ const TableRowAsset = (props: Props) => {
247238
{isImageAsset(asset) && (
248239
<Image
249240
draggable={false}
250-
scheme={scheme}
251-
showCheckerboard={!isOpaque}
241+
$scheme={scheme}
242+
$showCheckerboard={!isOpaque}
252243
src={imageDprUrl(asset, {height: 100, width: 100})}
253244
/>
254245
)}

‎src/components/TableRowUpload/index.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,12 @@ const TableRowUpload = (props: Props) => {
9393
>
9494
<Box style={{height: '100%', position: 'relative'}}>
9595
{item.assetType === 'image' && item?.objectUrl && (
96-
<Image draggable={false} scheme={scheme} src={item.objectUrl} style={{opacity: 0.25}} />
96+
<Image
97+
draggable={false}
98+
$scheme={scheme}
99+
src={item.objectUrl}
100+
style={{opacity: 0.25}}
101+
/>
97102
)}
98103

99104
{item.assetType === 'file' && (

‎src/components/TagIcon/index.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import React from 'react'
2-
31
const TagIcon = () => (
42
<svg
53
data-sanity-icon="media__tag" // For icon usage with @sanity/ui <Button />

‎src/components/TagView/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Box, Flex, Text} from '@sanity/ui'
2-
import React from 'react'
2+
33
import useTypedSelector from '../../hooks/useTypedSelector'
44
import {selectAssetsPickedLength} from '../../modules/assets'
55
import {selectTags} from '../../modules/tags'

‎src/components/TagsPanel/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Box} from '@sanity/ui'
2-
import React from 'react'
2+
33
import {TAGS_PANEL_WIDTH} from '../../constants'
44
import useTypedSelector from '../../hooks/useTypedSelector'
55
import TagView from '../TagView'

‎src/components/Tool/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Flex} from '@sanity/ui'
2-
import React from 'react'
2+
33
import Browser from '../Browser'
44

55
const Tool = () => {

‎src/hooks/usePortalPopoverProps.ts

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export function usePortalPopoverProps(): PopoverProps {
44
const portal = usePortal()
55

66
return {
7+
animate: true,
78
constrainSize: true,
89
floatingBoundary: portal.element,
910
portal: true,

‎src/plugin.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from 'react'
21
import {type AssetSource, type Tool as SanityTool, definePlugin} from 'sanity'
32
import {ImageIcon} from '@sanity/icons'
43
import FormBuilderTool from './components/FormBuilderTool'

0 commit comments

Comments
 (0)
Please sign in to comment.