sanity-plugin-media 2.2.1 → 2.2.3

package/src/components/SearchFacetNumber/index.tsx

@@ -52,7 +52,7 @@ const SearchFacetNumber = ({facet}: Props) => {
             <Button
               fontSize={1}
               iconRight={SelectIcon}
-              padding={2} //
+              padding={2}
               text={operators[selectedOperatorType].label}
             />
           }
@@ -61,9 +61,10 @@ const SearchFacetNumber = ({facet}: Props) => {
             <Menu>
               {facet.operatorTypes.map((operatorType, index) => {
                 if (operatorType) {
+                  const selected = operatorType === selectedOperatorType
                   return (
                     <MenuItem
-                      disabled={operatorType === selectedOperatorType}
+                      disabled={selected}
                       fontSize={1}
                       key={operatorType}
                       onClick={() => handleOperatorItemClick(operatorType)}
@@ -100,23 +101,26 @@ const SearchFacetNumber = ({facet}: Props) => {
             <Button
               fontSize={1}
               iconRight={SelectIcon}
-              padding={2} //
+              padding={2}
               text={selectedModifier?.title}
             />
           }
           id="modifier"
           menu={
             <Menu>
-              {modifiers.map(modifier => (
-                <MenuItem
-                  disabled={modifier.name === facet.modifier}
-                  fontSize={1}
-                  key={modifier.name}
-                  onClick={() => handleModifierClick(modifier)}
-                  padding={2}
-                  text={modifier.title}
-                />
-              ))}
+              {modifiers.map(modifier => {
+                const selected = modifier.name === facet.modifier
+                return (
+                  <MenuItem
+                    disabled={selected}
+                    fontSize={1}
+                    key={modifier.name}
+                    onClick={() => handleModifierClick(modifier)}
+                    padding={2}
+                    text={modifier.title}
+                  />
+                )
+              })}
             </Menu>
           }
           popover={popoverProps}

package/src/components/SearchFacetSelect/index.tsx

@@ -1,5 +1,5 @@
 import {SelectIcon} from '@sanity/icons'
-import {Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
+import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
 import {
   SearchFacetInputSelectListItemProps,
   SearchFacetInputSelectProps,
@@ -44,24 +44,24 @@ const SearchFacetSelect = ({facet}: Props) => {
       {facet?.operatorTypes && (
         <MenuButton
           button={
-            <Button
-              fontSize={1}
-              iconRight={SelectIcon}
-              padding={2} //
-              style={{
-                marginRight: '4px'
-              }}
-              text={operators[selectedOperatorType].label}
-            />
+            <Box marginRight={1}>
+              <Button
+                fontSize={1}
+                iconRight={SelectIcon}
+                padding={2}
+                text={operators[selectedOperatorType].label}
+              />
+            </Box>
           }
           id="operators"
           menu={
             <Menu>
               {facet.operatorTypes.map((operatorType, index) => {
                 if (operatorType) {
+                  const selected = operatorType === selectedOperatorType
                   return (
                     <MenuItem
-                      disabled={operatorType === selectedOperatorType}
+                      disabled={selected}
                       fontSize={1}
                       key={operatorType}
                       onClick={() => handleOperatorItemClick(operatorType)}
@@ -82,26 +82,24 @@ const SearchFacetSelect = ({facet}: Props) => {
       {/* List */}
       <MenuButton
         button={
-          <Button
-            fontSize={1}
-            iconRight={SelectIcon}
-            padding={2} //
-            text={selectedItem?.title}
-          />
+          <Button fontSize={1} iconRight={SelectIcon} padding={2} text={selectedItem?.title} />
         }
         id="list"
         menu={
           <Menu>
-            {options?.map((item, index) => (
-              <MenuItem
-                disabled={item.name === selectedItem?.name}
-                fontSize={1}
-                key={item.name}
-                onClick={() => handleListItemClick(options[index])}
-                padding={2}
-                text={item.title}
-              />
-            ))}
+            {options?.map((item, index) => {
+              const selected = item.name === selectedItem?.name
+              return (
+                <MenuItem
+                  disabled={selected}
+                  fontSize={1}
+                  key={item.name}
+                  onClick={() => handleListItemClick(options[index])}
+                  padding={2}
+                  text={item.title}
+                />
+              )
+            })}
           </Menu>
         }
         popover={popoverProps}

package/src/components/SearchFacetString/index.tsx

@@ -38,7 +38,7 @@ const SearchFacetString = ({facet}: Props) => {
             <Button
               fontSize={1}
               iconRight={SelectIcon}
-              padding={2} //
+              padding={2}
               text={operators[selectedOperatorType].label}
             />
           }
@@ -47,9 +47,10 @@ const SearchFacetString = ({facet}: Props) => {
             <Menu>
               {facet.operatorTypes.map((operatorType, index) => {
                 if (operatorType) {
+                  const selected = operatorType === selectedOperatorType
                   return (
                     <MenuItem
-                      disabled={operatorType === selectedOperatorType}
+                      disabled={selected}
                       fontSize={1}
                       key={operatorType}
                       onClick={() => handleOperatorItemClick(operatorType)}

package/src/components/SearchFacetTags/index.tsx

@@ -9,6 +9,7 @@ import {
 import React from 'react'
 import {useDispatch} from 'react-redux'
 import Select from 'react-select'
+import {useColorScheme} from 'sanity'
 import {operators} from '../../config/searchFacets'
 import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
 import useTypedSelector from '../../hooks/useTypedSelector'
@@ -23,6 +24,8 @@ type Props = {
 }
 
 const SearchFacetTags = ({facet}: Props) => {
+  const {scheme} = useColorScheme()
+
   // Redux
   const dispatch = useDispatch()
   const tags = useTypedSelector(state => selectTags(state))
@@ -60,7 +63,7 @@ const SearchFacetTags = ({facet}: Props) => {
             <Button
               fontSize={1}
               iconRight={SelectIcon}
-              padding={2} //
+              padding={2}
               text={operators[selectedOperatorType].label}
             />
           }
@@ -69,13 +72,16 @@ const SearchFacetTags = ({facet}: Props) => {
             <Menu>
               {facet.operatorTypes.map((operatorType, index) => {
                 if (operatorType) {
+                  const selected = operatorType === selectedOperatorType
                   return (
                     <MenuItem
-                      disabled={operatorType === selectedOperatorType}
+                      disabled={selected}
                       fontSize={1}
                       key={operatorType}
                       onClick={() => handleOperatorItemClick(operatorType)}
                       padding={2}
+                      space={4}
+                      style={{minWidth: '150px'}}
                       text={operators[operatorType].label}
                     />
                   )
@@ -103,7 +109,7 @@ const SearchFacetTags = ({facet}: Props) => {
             onChange={value => handleChange(value as TagSelectOption)}
             options={allTagOptions}
             placeholder={tagsFetching ? 'Loading...' : 'Select...'}
-            styles={reactSelectStyles}
+            styles={reactSelectStyles(scheme)}
             value={facet?.value}
           />
         </Box>

package/src/components/SearchFacets/index.tsx

@@ -1,6 +1,6 @@
-import {Box, Flex, Inline} from '@sanity/ui'
+import {Box, Flex, Inline, rem, Theme} from '@sanity/ui'
 import React from 'react'
-import styled from 'styled-components'
+import styled, {css} from 'styled-components'
 
 import useTypedSelector from '../../hooks/useTypedSelector'
 import SearchFacetNumber from '../SearchFacetNumber'
@@ -12,11 +12,13 @@ type Props = {
   layout?: 'inline' | 'stack'
 }
 
-const StackContainer = styled(Flex)`
-  > * {
-    margin-bottom: ${props => props.theme.sanity.space[2]}px;
-  }
-`
+const StackContainer = styled(Flex)(({theme}: {theme: Theme}) => {
+  return css`
+    > * {
+      margin-bottom: ${rem(theme.sanity.space[2])};
+    }
+  `
+})
 
 const SearchFacets = (props: Props) => {
   const {layout = 'inline'} = props

package/src/components/SearchFacetsControl/index.tsx

@@ -1,4 +1,4 @@
-import {AddCircleIcon} from '@sanity/icons'
+import {AddIcon} from '@sanity/icons'
 import {Button, Flex, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem} from '@sanity/ui'
 import {SearchFacetDivider, SearchFacetGroup, SearchFacetInputProps} from '@types'
 import React from 'react'
@@ -100,8 +100,9 @@ const SearchFacetsControl = () => {
           <Button
             disabled={!hasSearchFacets}
             fontSize={1}
-            icon={AddCircleIcon}
+            icon={AddIcon}
             mode="bleed"
+            space={2}
             text="Add filter"
             tone="primary"
           />

package/src/components/TableHeader/index.tsx

@@ -1,26 +1,30 @@
-import {black, hues} from '@sanity/color'
-import {Checkbox, Flex, Grid, useMediaIndex} from '@sanity/ui'
+import {Checkbox, Flex, Grid, ThemeColorSchemeKey, useMediaIndex} from '@sanity/ui'
 import React, {MouseEvent} from 'react'
 import {useDispatch} from 'react-redux'
-import styled from 'styled-components'
+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 {useColorScheme} from 'sanity'
+import {getSchemeColor} from '../../utils/getSchemeColor'
 
 // TODO: DRY
-const ContextActionContainer = styled(Flex)`
-  cursor: pointer;
-
-  @media (hover: hover) and (pointer: fine) {
-    &:hover {
-      background: ${hues.gray?.[900].hex};
+const ContextActionContainer = styled(Flex)(({scheme}: {scheme: ThemeColorSchemeKey}) => {
+  return css`
+    cursor: pointer;
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background: ${getSchemeColor(scheme, 'bg')};
+      }
     }
-  }
-`
+  `
+})
 
 const TableHeader = () => {
+  const {scheme} = useColorScheme()
+
   // Redux
   const dispatch = useDispatch()
   const fetching = useTypedSelector(state => state.assets.fetching)
@@ -50,8 +54,8 @@ const TableHeader = () => {
     <Grid
       style={{
         alignItems: 'center',
-        background: black.hex,
-        borderBottom: `1px solid ${hues.gray?.[900].hex}`,
+        background: 'var(--card-bg-color)',
+        borderBottom: '1px solid var(--card-border-color)',
         gridColumnGap: mediaIndex < 3 ? 0 : '16px',
         gridTemplateColumns: GRID_TEMPLATE_COLUMNS.LARGE,
         height: mediaIndex < 3 ? 0 : `${PANEL_HEIGHT}px`,
@@ -71,6 +75,7 @@ const TableHeader = () => {
           align="center"
           justify="center"
           onClick={handleContextActionClick}
+          scheme={scheme}
           style={{
             height: '100%',
             position: 'relative'

package/src/components/TableRowAsset/index.tsx

@@ -1,4 +1,3 @@
-import {hues} from '@sanity/color'
 import {CheckmarkCircleIcon, EditIcon, WarningFilledIcon} from '@sanity/icons'
 import {
   Box,
@@ -8,6 +7,7 @@ import {
   Grid,
   Spinner,
   Text,
+  ThemeColorSchemeKey,
   Tooltip,
   useMediaIndex
 } from '@sanity/ui'
@@ -15,7 +15,7 @@ import formatRelative from 'date-fns/formatRelative'
 import filesize from 'filesize'
 import React, {memo, MouseEvent, RefObject, useCallback, useEffect, useRef, useState} from 'react'
 import {useDispatch} from 'react-redux'
-import {WithReferringDocuments} from 'sanity'
+import {WithReferringDocuments, useColorScheme} from 'sanity'
 import styled, {css} from 'styled-components'
 import {GRID_TEMPLATE_COLUMNS} from '../../constants'
 import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext'
@@ -29,6 +29,7 @@ import {isFileAsset, isImageAsset} from '../../utils/typeGuards'
 import FileIcon from '../FileIcon'
 import Image from '../Image'
 import {getUniqueDocuments} from '../../utils/getUniqueDocuments'
+import {getSchemeColor} from '../../utils/getSchemeColor'
 
 // Duration (ms) to wait before reference counts (and associated listeners) are rendered
 const REFERENCE_COUNT_VISIBILITY_DELAY = 750
@@ -38,34 +39,46 @@ type Props = {
   selected: boolean
 }
 
-const ContainerGrid = styled(Grid)<{selected?: boolean; updating?: boolean}>`
-  align-items: center;
-  cursor: ${props => (props.selected ? 'default' : 'pointer')};
-  height: 100%;
-  pointer-events: ${props => (props.updating ? 'none' : 'auto')};
-  user-select: none;
-  white-space: nowrap;
-
-  ${props =>
-    !props.updating &&
-    css`
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          background: ${hues.gray?.[950].hex};
+const ContainerGrid = styled(Grid)(
+  ({
+    scheme,
+    selected,
+    updating
+  }: {
+    selected?: boolean
+    scheme: ThemeColorSchemeKey
+    updating?: boolean
+  }) => {
+    return css`
+      align-items: center;
+      cursor: ${selected ? 'default' : 'pointer'};
+      height: 100%;
+      pointer-events: ${updating ? 'none' : 'auto'};
+      user-select: none;
+      white-space: nowrap;
+
+      ${!updating &&
+      css`
+        @media (hover: hover) and (pointer: fine) {
+          &:hover {
+            background: ${getSchemeColor(scheme, 'bg')};
+          }
         }
+      `}
+    `
+  }
+)
+
+const ContextActionContainer = styled(Flex)(({scheme}: {scheme: ThemeColorSchemeKey}) => {
+  return css`
+    cursor: pointer;
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background: ${getSchemeColor(scheme, 'bg2')};
       }
-    `}
-`
-
-const ContextActionContainer = styled(Flex)`
-  cursor: pointer;
-
-  @media (hover: hover) and (pointer: fine) {
-    &:hover {
-      background: ${hues.gray?.[900].hex};
     }
-  }
-`
+  `
+})
 
 const StyledWarningIcon = styled(WarningFilledIcon)(({theme}) => {
   return {
@@ -77,6 +90,8 @@ const StyledWarningIcon = styled(WarningFilledIcon)(({theme}) => {
 const TableRowAsset = (props: Props) => {
   const {id, selected} = props
 
+  const {scheme} = useColorScheme()
+
   const shiftPressed: RefObject<boolean> = useKeyPress('shift')
 
   const [referenceCountVisible, setReferenceCountVisible] = useState(false)
@@ -100,6 +115,7 @@ const TableRowAsset = (props: Props) => {
     (e: MouseEvent<HTMLDivElement>) => {
       e.stopPropagation()
 
+      if (!asset) return
       if (onSelect) {
         dispatch(dialogActions.showAssetEdit({assetId: asset._id}))
       } else if (shiftPressed.current && !picked) {
@@ -108,13 +124,14 @@ const TableRowAsset = (props: Props) => {
         dispatch(assetsActions.pick({assetId: asset._id, picked: !picked}))
       }
     },
-    [asset._id, dispatch, lastPicked, onSelect, picked, shiftPressed]
+    [asset, dispatch, lastPicked, onSelect, picked, shiftPressed]
   )
 
   const handleClick = useCallback(
     (e: MouseEvent<HTMLDivElement>) => {
       e.stopPropagation()
 
+      if (!asset) return
       if (onSelect) {
         onSelect([{kind: 'assetDocumentId', value: asset._id}])
       } else if (shiftPressed.current) {
@@ -127,7 +144,7 @@ const TableRowAsset = (props: Props) => {
         dispatch(dialogActions.showAssetEdit({assetId: asset._id}))
       }
     },
-    [asset._id, dispatch, lastPicked, onSelect, picked, shiftPressed]
+    [asset, dispatch, lastPicked, onSelect, picked, shiftPressed]
   )
 
   const opacityCell = updating ? 0.5 : 1
@@ -154,6 +171,7 @@ const TableRowAsset = (props: Props) => {
   return (
     <ContainerGrid
       onClick={selected ? undefined : handleClick}
+      scheme={scheme}
       selected={selected}
       style={{
         gridColumnGap: mediaIndex < 3 ? 0 : '16px',
@@ -167,6 +185,7 @@ const TableRowAsset = (props: Props) => {
       {/* Picked checkbox */}
       <ContextActionContainer
         onClick={handleContextActionClick}
+        scheme={scheme}
         style={{
           alignItems: 'center',
           gridColumn: 1,
@@ -216,6 +235,7 @@ const TableRowAsset = (props: Props) => {
             {isImageAsset(asset) && (
               <Image
                 draggable={false}
+                scheme={scheme}
                 showCheckerboard={!isOpaque}
                 src={imageDprUrl(asset, {height: 100, width: 100})}
               />

package/src/components/TableRowUpload/index.tsx

@@ -1,12 +1,13 @@
-import {hues} from '@sanity/color'
 import {CloseIcon} from '@sanity/icons'
 import {Box, Button, Flex, Grid, Stack, Text, useMediaIndex} from '@sanity/ui'
 import filesize from 'filesize'
 import React from 'react'
 import {useDispatch} from 'react-redux'
+import {useColorScheme} from 'sanity'
 import {GRID_TEMPLATE_COLUMNS} from '../../constants'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {selectUploadById, uploadsActions} from '../../modules/uploads'
+import {getSchemeColor} from '../../utils/getSchemeColor'
 import FileIcon from '../FileIcon'
 import Image from '../Image'
 
@@ -17,6 +18,8 @@ type Props = {
 const TableRowUpload = (props: Props) => {
   const {id} = props
 
+  const {scheme} = useColorScheme()
+
   // Redux
   const dispatch = useDispatch()
   const item = useTypedSelector(state => selectUploadById(state, id))
@@ -54,7 +57,7 @@ const TableRowUpload = (props: Props) => {
     <Grid
       style={{
         alignItems: 'center',
-        background: hues.gray[950].hex,
+        background: getSchemeColor(scheme, 'bg'),
         gridColumnGap: mediaIndex < 3 ? 0 : '16px',
         gridRowGap: 0,
         gridTemplateColumns:
@@ -67,7 +70,7 @@ const TableRowUpload = (props: Props) => {
       {/* Progress bar */}
       <div
         style={{
-          background: hues.gray[600].hex,
+          background: 'var(--card-fg-color)',
           bottom: 0,
           height: '1px',
           left: 0,
@@ -91,7 +94,7 @@ const TableRowUpload = (props: Props) => {
       >
         <Box style={{height: '100%', position: 'relative'}}>
           {item.assetType === 'image' && item?.objectUrl && (
-            <Image draggable={false} src={item.objectUrl} style={{opacity: 0.25}} />
+            <Image draggable={false} scheme={scheme} src={item.objectUrl} style={{opacity: 0.25}} />
           )}
 
           {item.assetType === 'file' && (

package/src/components/Tag/index.tsx

@@ -1,4 +1,3 @@
-import {hues} from '@sanity/color'
 import {ArrowDownIcon, ArrowUpIcon, CloseIcon, EditIcon, SearchIcon, TrashIcon} from '@sanity/icons'
 import {Box, Button, Container, Flex, Text, Tooltip} from '@sanity/ui'
 import {SearchFacetInputSearchableProps, TagActions, TagItem} from '@types'
@@ -126,9 +125,10 @@ const Tag = (props: Props) => {
     <TagContainer align="center" flex={1} justify="space-between" paddingLeft={3}>
       <Box flex={1}>
         <Text
+          muted
           size={1}
           style={{
-            color: tag?.updating ? hues.gray[800].hex : hues.gray[500].hex,
+            opacity: tag?.updating ? 0.5 : 1.0,
             userSelect: 'none'
           }}
           textOverflow="ellipsis"

package/src/components/TagView/index.tsx

@@ -1,4 +1,3 @@
-import {black, hues} from '@sanity/color'
 import {Box, Flex, Text} from '@sanity/ui'
 import React from 'react'
 import useTypedSelector from '../../hooks/useTypedSelector'
@@ -17,24 +16,16 @@ const TagView = () => {
   const hasPicked = !!(numPickedAssets > 0)
 
   return (
-    <Flex
-      direction="column"
-      flex={1}
-      style={{
-        // background: hues.gray[950].hex,
-        background: black.hex,
-        height: '100%'
-      }}
-    >
+    <Flex direction="column" flex={1} height="fill">
       <TagViewHeader
-        allowCreate //
+        allowCreate
         light={hasPicked}
         title={hasPicked ? 'Tags (in selection)' : 'Tags'}
       />
 
       {fetchComplete && !hasTags && (
         <Box padding={3}>
-          <Text size={1} style={{color: hues.gray[700].hex}}>
+          <Text muted size={1}>
             <em>No tags</em>
           </Text>
         </Box>

package/src/components/TagViewHeader/index.tsx

@@ -1,11 +1,12 @@
-import {black, hues} from '@sanity/color'
 import {ComposeIcon} from '@sanity/icons'
 import {Box, Button, Flex, Inline, Label} from '@sanity/ui'
 import React from 'react'
 import {useDispatch} from 'react-redux'
+import {useColorScheme} from 'sanity'
 import {PANEL_HEIGHT} from '../../constants'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {DIALOG_ACTIONS} from '../../modules/dialog/actions'
+import {getSchemeColor} from '../../utils/getSchemeColor'
 
 type Props = {
   allowCreate?: boolean
@@ -14,6 +15,8 @@ type Props = {
 }
 
 const TagViewHeader = ({allowCreate, light, title}: Props) => {
+  const {scheme} = useColorScheme()
+
   const dispatch = useDispatch()
   const tagsCreating = useTypedSelector(state => state.tags.creating)
   const tagsFetching = useTypedSelector(state => state.tags.fetching)
@@ -29,15 +32,14 @@ const TagViewHeader = ({allowCreate, light, title}: Props) => {
         justify="space-between"
         paddingLeft={3}
         style={{
-          background: light ? hues.gray?.[900].hex : black.hex,
-          borderBottom: `1px solid ${hues.gray?.[900].hex}`,
+          background: light ? getSchemeColor(scheme, 'bg') : 'inherit',
+          borderBottom: '1px solid var(--card-border-color)',
           flexShrink: 0,
           height: `${PANEL_HEIGHT}px`
         }}
       >
         <Inline space={2}>
           <Label size={0}>{title}</Label>
-
           {tagsFetching && (
             <Label size={0} style={{opacity: 0.3}}>
               Loading...

package/src/components/TagsPanel/index.tsx

@@ -1,4 +1,3 @@
-import {hues} from '@sanity/color'
 import {Box} from '@sanity/ui'
 import React from 'react'
 import {TAGS_PANEL_WIDTH} from '../../constants'
@@ -22,7 +21,7 @@ const TagsPanel = () => {
       <Box
         className="media__custom-scrollbar"
         style={{
-          borderLeft: `1px solid ${hues.gray?.[900].hex}`,
+          borderLeft: '1px solid var(--card-border-color)',
           height: '100%',
           overflowX: 'hidden',
           overflowY: 'auto',

package/src/modules/assets/index.ts

@@ -86,7 +86,7 @@ export const initialState = {
     title: getOrderTitle(defaultOrder.field, defaultOrder.direction)
   },
   pageIndex: 0,
-  pageSize: 50,
+  pageSize: 100,
   // totalCount: -1,
   view: 'grid'
 } as AssetsReducerState
@@ -791,7 +791,10 @@ export const selectAssetById = createSelector(
     (state: RootReducerState) => state.assets.byIds,
     (_state: RootReducerState, assetId: string) => assetId
   ],
-  (byIds, assetId) => byIds[assetId]
+  (byIds, assetId) => {
+    const asset = byIds[assetId]
+    return asset ? asset : undefined
+  }
 )
 
 export const selectAssets: Selector<RootReducerState, AssetItem[]> = createSelector(