sanity-plugin-media 4.3.0 → 4.3.2

package/src/components/ReduxProvider/index.tsx

@@ -1,9 +1,10 @@
 import {type AnyAction, configureStore, type Store} from '@reduxjs/toolkit'
 import type {SanityClient} from '@sanity/client'
-import type {AssetSourceComponentProps, SanityDocument} from 'sanity'
 import {Component, type ReactNode} from 'react'
 import {Provider} from 'react-redux'
 import {createEpicMiddleware} from 'redux-observable'
+import type {AssetSourceComponentProps, SanityDocument} from 'sanity'
+
 import {rootEpic, rootReducer} from '../../modules'
 import {initialState as assetsInitialState} from '../../modules/assets'
 // import {assetsActions} from '../../modules/assets'
@@ -30,12 +31,12 @@ class ReduxProvider extends Component<Props> {
     // Initialize redux store + middleware
     const epicMiddleware = createEpicMiddleware<AnyAction, AnyAction, RootReducerState>({
       dependencies: {
-        client: props.client // inject sanity client as a dependency to all epics
-      }
+        client: props.client, // inject sanity client as a dependency to all epics
+      },
     })
     this.store = configureStore({
       reducer: rootReducer,
-      middleware: getDefaultMiddleware =>
+      middleware: (getDefaultMiddleware) =>
         getDefaultMiddleware({
           /*
           serializableCheck: {
@@ -48,17 +49,19 @@ class ReduxProvider extends Component<Props> {
           */
           // TODO: remove once we're no longer storing non-serializable data in the store
           serializableCheck: false,
-          thunk: false
+          thunk: false,
         }).prepend(epicMiddleware),
       devTools: true,
       preloadedState: {
         assets: {
           ...assetsInitialState,
-          assetTypes: isSupportedAssetType(props?.assetType) ? [props.assetType] : ['file', 'image']
+          assetTypes: isSupportedAssetType(props?.assetType)
+            ? [props.assetType]
+            : ['file', 'image'],
         },
         debug: {
           badConnection: false,
-          enabled: false
+          enabled: false,
         },
         dialog: {items: []},
         notifications: {items: []},
@@ -66,7 +69,7 @@ class ReduxProvider extends Component<Props> {
         selected: {
           assets: props.selectedAssets || [],
           document: props.document,
-          documentAssetIds: props.document ? getDocumentAssetIds(props.document) : []
+          documentAssetIds: props.document ? getDocumentAssetIds(props.document) : [],
         },
         tags: {
           allIds: [],
@@ -74,13 +77,13 @@ class ReduxProvider extends Component<Props> {
           creating: false,
           fetchCount: -1,
           fetching: false,
-          panelVisible: true
+          panelVisible: true,
         },
         uploads: {
           allIds: [],
-          byIds: {}
-        }
-      }
+          byIds: {},
+        },
+      },
     })
     epicMiddleware.run(rootEpic)
   }

package/src/components/SearchFacet/index.tsx

@@ -1,11 +1,12 @@
 import {CloseIcon} from '@sanity/icons'
 import {Box, Flex, Label, rem, Text, type ThemeColorSchemeKey} from '@sanity/ui'
-import type {SearchFacetInputProps, WithId} from '../../types'
 import {type ReactNode} from 'react'
 import {useDispatch} from 'react-redux'
 import {useColorSchemeValue} from 'sanity'
 import {styled, css} from 'styled-components'
+
 import {searchActions} from '../../modules/search'
+import type {SearchFacetInputProps, WithId} from '../../types'
 import {getSchemeColor} from '../../utils/getSchemeColor'
 
 type Props = {
@@ -40,7 +41,7 @@ const SearchFacet = (props: Props) => {
           <Label
             size={0}
             style={{
-              whiteSpace: 'nowrap'
+              whiteSpace: 'nowrap',
             }}
           >
             {facet.title}

package/src/components/SearchFacetNumber/index.tsx

@@ -1,16 +1,16 @@
 import {SelectIcon} from '@sanity/icons'
 import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
+import {useDispatch} from 'react-redux'
+
+import {operators} from '../../config/searchFacets'
+import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
+import {searchActions} from '../../modules/search'
 import type {
   SearchFacetInputNumberModifier,
   SearchFacetInputNumberProps,
   SearchFacetOperatorType,
-  WithId
+  WithId,
 } from '../../types'
-
-import {useDispatch} from 'react-redux'
-import {operators} from '../../config/searchFacets'
-import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
-import {searchActions} from '../../modules/search'
 import SearchFacet from '../SearchFacet'
 import TextInputNumber from '../TextInputNumber'
 
@@ -26,7 +26,7 @@ const SearchFacetNumber = ({facet}: Props) => {
 
   const modifiers = facet?.modifiers
   const selectedModifier = facet?.modifier
-    ? modifiers?.find(modifier => modifier.name === facet?.modifier)
+    ? modifiers?.find((modifier) => modifier.name === facet?.modifier)
     : modifiers?.[0]
 
   const handleOperatorItemClick = (operatorType: SearchFacetOperatorType) => {
@@ -108,7 +108,7 @@ const SearchFacetNumber = ({facet}: Props) => {
           id="modifier"
           menu={
             <Menu>
-              {modifiers.map(modifier => {
+              {modifiers.map((modifier) => {
                 const selected = modifier.name === facet.modifier
                 return (
                   <MenuItem

package/src/components/SearchFacetSelect/index.tsx

@@ -1,18 +1,17 @@
 import {SelectIcon} from '@sanity/icons'
 import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
+import {useDispatch} from 'react-redux'
+
+import {operators} from '../../config/searchFacets'
+import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
+import {searchActions} from '../../modules/search'
 import type {
   SearchFacetInputSelectListItemProps,
   SearchFacetInputSelectProps,
   SearchFacetOperatorType,
-  WithId
+  WithId,
 } from '../../types'
-
-import {useDispatch} from 'react-redux'
-
-import {operators} from '../../config/searchFacets'
-import {searchActions} from '../../modules/search'
 import SearchFacet from '../SearchFacet'
-import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
 
 type Props = {
   facet: WithId<SearchFacetInputSelectProps>
@@ -26,7 +25,7 @@ const SearchFacetSelect = ({facet}: Props) => {
 
   const options = facet?.options
 
-  const selectedItem = options?.find(v => v.name === facet?.value)
+  const selectedItem = options?.find((v) => v.name === facet?.value)
 
   const handleListItemClick = (option: SearchFacetInputSelectListItemProps) => {
     dispatch(searchActions.facetsUpdate({name: facet.name, value: option.name}))

package/src/components/SearchFacetString/index.tsx

@@ -1,12 +1,12 @@
 import {SelectIcon} from '@sanity/icons'
 import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem, TextInput} from '@sanity/ui'
-import type {SearchFacetInputStringProps, SearchFacetOperatorType, WithId} from '../../types'
 import {type ChangeEvent} from 'react'
 import {useDispatch} from 'react-redux'
 
 import {operators} from '../../config/searchFacets'
 import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
 import {searchActions} from '../../modules/search'
+import type {SearchFacetInputStringProps, SearchFacetOperatorType, WithId} from '../../types'
 import SearchFacet from '../SearchFacet'
 
 type Props = {

package/src/components/SearchFacetTags/index.tsx

@@ -1,20 +1,21 @@
 import {SelectIcon} from '@sanity/icons'
 import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
-import type {
-  TagSelectOption,
-  SearchFacetInputSearchableProps,
-  SearchFacetOperatorType,
-  WithId
-} from '../../types'
 import {useDispatch} from 'react-redux'
 import Select from 'react-select'
 import {useColorSchemeValue} from 'sanity'
+
 import {operators} from '../../config/searchFacets'
 import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {searchActions} from '../../modules/search'
 import {selectTags} from '../../modules/tags'
 import {reactSelectComponents, reactSelectStyles} from '../../styled/react-select/single'
+import type {
+  TagSelectOption,
+  SearchFacetInputSearchableProps,
+  SearchFacetOperatorType,
+  WithId,
+} from '../../types'
 import getTagSelectOptions from '../../utils/getTagSelectOptions'
 import SearchFacet from '../SearchFacet'
 
@@ -27,8 +28,8 @@ const SearchFacetTags = ({facet}: Props) => {
 
   // Redux
   const dispatch = useDispatch()
-  const tags = useTypedSelector(state => selectTags(state))
-  const tagsFetching = useTypedSelector(state => state.tags.fetching)
+  const tags = useTypedSelector((state) => selectTags(state))
+  const tagsFetching = useTypedSelector((state) => state.tags.fetching)
   const allTagOptions = getTagSelectOptions(tags)
 
   const popoverProps = usePortalPopoverProps()
@@ -37,8 +38,8 @@ const SearchFacetTags = ({facet}: Props) => {
     dispatch(
       searchActions.facetsUpdateById({
         id: facet.id,
-        value: option
-      })
+        value: option,
+      }),
     )
   }
 
@@ -46,8 +47,8 @@ const SearchFacetTags = ({facet}: Props) => {
     dispatch(
       searchActions.facetsUpdateById({
         id: facet.id,
-        operatorType
-      })
+        operatorType,
+      }),
     )
   }
 

package/src/components/SearchFacets/index.tsx

@@ -1,5 +1,4 @@
 import {Box, Flex, Inline, rem, type Theme} from '@sanity/ui'
-
 import {styled, css} from 'styled-components'
 
 import useTypedSelector from '../../hooks/useTypedSelector'
@@ -24,9 +23,9 @@ const SearchFacets = (props: Props) => {
   const {layout = 'inline'} = props
 
   // Redux
-  const searchFacets = useTypedSelector(state => state.search.facets)
+  const searchFacets = useTypedSelector((state) => state.search.facets)
 
-  const Items = searchFacets.map(facet => {
+  const Items = searchFacets.map((facet) => {
     const key = facet.id
     if (facet.type === 'number') {
       return <SearchFacetNumber facet={facet} key={key} />

package/src/components/SearchFacetsControl/index.tsx

@@ -1,20 +1,20 @@
 import {AddIcon} from '@sanity/icons'
 import {Button, Flex, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem} from '@sanity/ui'
-import type {SearchFacetDivider, SearchFacetGroup, SearchFacetInputProps} from '../../types'
-
 import {useDispatch} from 'react-redux'
+
 import {FACETS} from '../../constants'
+import {useToolOptions} from '../../contexts/ToolOptionsContext'
 import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {searchActions} from '../../modules/search'
-import {useToolOptions} from '../../contexts/ToolOptionsContext'
+import type {SearchFacetDivider, SearchFacetGroup, SearchFacetInputProps} from '../../types'
 
 const SearchFacetsControl = () => {
   // Redux
   const dispatch = useDispatch()
-  const assetTypes = useTypedSelector(state => state.assets.assetTypes)
-  const searchFacets = useTypedSelector(state => state.search.facets)
-  const selectedDocument = useTypedSelector(state => state.selected.document)
+  const assetTypes = useTypedSelector((state) => state.assets.assetTypes)
+  const searchFacets = useTypedSelector((state) => state.search.facets)
+  const selectedDocument = useTypedSelector((state) => state.selected.document)
 
   const popoverProps = usePortalPopoverProps()
 
@@ -24,7 +24,7 @@ const SearchFacetsControl = () => {
 
   const filteredFacets = FACETS
     // Filter facets based on current context, whether it's invoked as a tool, or via selection through via custom asset source.
-    .filter(facet => {
+    .filter((facet) => {
       // Remove credit line filter if it's not enabled
       if (!creditLine?.enabled && facet?.type === 'string' && facet?.name === 'creditLine') {
         return false
@@ -38,8 +38,8 @@ const SearchFacetsControl = () => {
         return !facet?.selectOnly
       }
 
-      const matchingAssetTypes = facet.assetTypes.filter(assetType =>
-        assetTypes.includes(assetType)
+      const matchingAssetTypes = facet.assetTypes.filter((assetType) =>
+        assetTypes.includes(assetType),
       )
       return matchingAssetTypes.length > 0
     })
@@ -61,7 +61,7 @@ const SearchFacetsControl = () => {
 
   const renderMenuFacets = (
     facets: (SearchFacetDivider | SearchFacetGroup | SearchFacetInputProps)[],
-    level: number = 0
+    level: number = 0,
   ) => {
     return (
       <>
@@ -80,7 +80,8 @@ const SearchFacetsControl = () => {
           }
 
           if (facet) {
-            const disabled = !facet.operatorTypes && !!searchFacets.find(v => v.name === facet.name)
+            const disabled =
+              !facet.operatorTypes && !!searchFacets.find((v) => v.name === facet.name)
 
             return (
               <MenuItem
@@ -119,7 +120,7 @@ const SearchFacetsControl = () => {
         menu={<Menu>{renderMenuFacets(filteredFacets)}</Menu>}
         popover={{
           ...popoverProps,
-          placement: 'right-start'
+          placement: 'right-start',
         }}
       />
 

package/src/components/TableHeader/index.tsx

@@ -1,35 +1,36 @@
 import {Checkbox, Flex, Grid, type ThemeColorSchemeKey, useMediaIndex} from '@sanity/ui'
 import {type MouseEvent} from 'react'
 import {useDispatch} from 'react-redux'
+import {useColorSchemeValue} from 'sanity'
 import {styled, css} from 'styled-components'
+
 import {GRID_TEMPLATE_COLUMNS, PANEL_HEIGHT} from '../../constants'
 import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {assetsActions, selectAssetsLength, selectAssetsPickedLength} from '../../modules/assets'
-import TableHeaderItem from '../TableHeaderItem'
-import {useColorSchemeValue} from 'sanity'
 import {getSchemeColor} from '../../utils/getSchemeColor'
+import TableHeaderItem from '../TableHeaderItem'
 
 // TODO: DRY
-const ContextActionContainer = styled<typeof Flex, {$scheme: ThemeColorSchemeKey}>(Flex)(
-  ({$scheme}) => {
-    return css`
-      cursor: pointer;
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          background: ${getSchemeColor($scheme, 'bg')};
-        }
+const ContextActionContainer = styled<typeof Flex, {$scheme: ThemeColorSchemeKey}>(Flex)(({
+  $scheme,
+}) => {
+  return css`
+    cursor: pointer;
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background: ${getSchemeColor($scheme, 'bg')};
       }
-    `
-  }
-)
+    }
+  `
+})
 
 const TableHeader = () => {
   const scheme = useColorSchemeValue()
 
   // Redux
   const dispatch = useDispatch()
-  const fetching = useTypedSelector(state => state.assets.fetching)
+  const fetching = useTypedSelector((state) => state.assets.fetching)
   const itemsLength = useTypedSelector(selectAssetsLength)
   const numPickedAssets = useTypedSelector(selectAssetsPickedLength)
 
@@ -67,7 +68,7 @@ const TableHeader = () => {
         top: 0,
         visibility: mediaIndex < 3 ? 'hidden' : 'visible',
         width: '100%',
-        zIndex: 1 // force stacking context
+        zIndex: 1, // force stacking context
       }}
     >
       {onSelect ? (
@@ -80,7 +81,7 @@ const TableHeader = () => {
           $scheme={scheme}
           style={{
             height: '100%',
-            position: 'relative'
+            position: 'relative',
           }}
         >
           <Checkbox
@@ -88,7 +89,7 @@ const TableHeader = () => {
             readOnly
             style={{
               pointerEvents: 'none', // TODO: consider alternative for usability
-              transform: 'scale(0.8)'
+              transform: 'scale(0.8)',
             }}
           />
         </ContextActionContainer>

package/src/components/TableHeaderItem/index.tsx

@@ -1,7 +1,7 @@
 import {ChevronDownIcon, ChevronUpIcon} from '@sanity/icons'
 import {Box, Label} from '@sanity/ui'
-
 import {useDispatch} from 'react-redux'
+
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {assetsActions} from '../../modules/assets'
 
@@ -15,7 +15,7 @@ const TableHeaderItem = (props: Props) => {
 
   // Redux
   const dispatch = useDispatch()
-  const order = useTypedSelector(state => state.assets.order)
+  const order = useTypedSelector((state) => state.assets.order)
 
   const isActive = order.field === field
 
@@ -40,12 +40,12 @@ const TableHeaderItem = (props: Props) => {
         style={{
           cursor: field ? 'pointer' : 'default',
           display: 'inline',
-          whiteSpace: 'nowrap'
+          whiteSpace: 'nowrap',
         }}
       >
         <span
           style={{
-            marginRight: '0.4em'
+            marginRight: '0.4em',
           }}
         >
           {title}