sanity-plugin-media 4.3.5 → 5.0.0

package/src/components/SearchFacetSelect/index.tsx

@@ -1,110 +0,0 @@
-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,
-} from '../../types'
-import SearchFacet from '../SearchFacet'
-
-type Props = {
-  facet: WithId<SearchFacetInputSelectProps>
-}
-
-const SearchFacetSelect = ({facet}: Props) => {
-  // Redux
-  const dispatch = useDispatch()
-
-  const popoverProps = usePortalPopoverProps()
-
-  const options = facet?.options
-
-  const selectedItem = options?.find((v) => v.name === facet?.value)
-
-  const handleListItemClick = (option: SearchFacetInputSelectListItemProps) => {
-    dispatch(searchActions.facetsUpdate({name: facet.name, value: option.name}))
-  }
-
-  const handleOperatorItemClick = (operatorType: SearchFacetOperatorType) => {
-    dispatch(searchActions.facetsUpdate({name: facet.name, operatorType}))
-  }
-
-  const selectedOperatorType: SearchFacetOperatorType = facet?.operatorType ?? 'is'
-
-  return (
-    <SearchFacet facet={facet}>
-      {/* Optional operators */}
-      {facet?.operatorTypes && (
-        <MenuButton
-          button={
-            <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={selected}
-                      fontSize={1}
-                      key={operatorType}
-                      onClick={() => handleOperatorItemClick(operatorType)}
-                      padding={2}
-                      text={operators[operatorType].label}
-                    />
-                  )
-                }
-
-                return <MenuDivider key={index} />
-              })}
-            </Menu>
-          }
-          popover={popoverProps}
-        />
-      )}
-
-      {/* List */}
-      <MenuButton
-        button={
-          <Button fontSize={1} iconRight={SelectIcon} padding={2} text={selectedItem?.title} />
-        }
-        id="list"
-        menu={
-          <Menu>
-            {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}
-      />
-    </SearchFacet>
-  )
-}
-
-export default SearchFacetSelect

package/src/components/SearchFacetString/index.tsx

@@ -1,88 +0,0 @@
-import {SelectIcon} from '@sanity/icons'
-import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem, TextInput} from '@sanity/ui'
-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 = {
-  facet: WithId<SearchFacetInputStringProps>
-}
-
-const SearchFacetString = ({facet}: Props) => {
-  // Redux
-  const dispatch = useDispatch()
-
-  const popoverProps = usePortalPopoverProps()
-
-  const handleOperatorItemClick = (operatorType: SearchFacetOperatorType) => {
-    dispatch(searchActions.facetsUpdateById({id: facet.id, operatorType}))
-  }
-
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    dispatch(searchActions.facetsUpdateById({id: facet.id, value: e.target.value}))
-  }
-
-  const selectedOperatorType: SearchFacetOperatorType = facet.operatorType
-
-  return (
-    <SearchFacet facet={facet}>
-      {/* Optional operators */}
-      {facet?.operatorTypes && (
-        <MenuButton
-          button={
-            <Button
-              fontSize={1}
-              iconRight={SelectIcon}
-              padding={2}
-              text={operators[selectedOperatorType].label}
-            />
-          }
-          id="operators"
-          menu={
-            <Menu>
-              {facet.operatorTypes.map((operatorType, index) => {
-                if (operatorType) {
-                  const selected = operatorType === selectedOperatorType
-                  return (
-                    <MenuItem
-                      disabled={selected}
-                      fontSize={1}
-                      key={operatorType}
-                      onClick={() => handleOperatorItemClick(operatorType)}
-                      padding={2}
-                      text={operators[operatorType].label}
-                    />
-                  )
-                }
-
-                return <MenuDivider key={index} />
-              })}
-            </Menu>
-          }
-          popover={popoverProps}
-        />
-      )}
-
-      {/* Value */}
-      {!operators[selectedOperatorType].hideInput && (
-        <Box marginLeft={1} style={{maxWidth: '125px'}}>
-          <TextInput
-            fontSize={1}
-            onChange={handleChange}
-            padding={2}
-            radius={2}
-            width={2}
-            value={facet?.value}
-          />
-        </Box>
-      )}
-    </SearchFacet>
-  )
-}
-
-export default SearchFacetString

package/src/components/SearchFacetTags/index.tsx

@@ -1,121 +0,0 @@
-import {SelectIcon} from '@sanity/icons'
-import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
-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'
-
-type Props = {
-  facet: WithId<SearchFacetInputSearchableProps>
-}
-
-const SearchFacetTags = ({facet}: Props) => {
-  const scheme = useColorSchemeValue()
-
-  // Redux
-  const dispatch = useDispatch()
-  const tags = useTypedSelector((state) => selectTags(state))
-  const tagsFetching = useTypedSelector((state) => state.tags.fetching)
-  const allTagOptions = getTagSelectOptions(tags)
-
-  const popoverProps = usePortalPopoverProps()
-
-  const handleChange = (option: TagSelectOption) => {
-    dispatch(
-      searchActions.facetsUpdateById({
-        id: facet.id,
-        value: option,
-      }),
-    )
-  }
-
-  const handleOperatorItemClick = (operatorType: SearchFacetOperatorType) => {
-    dispatch(
-      searchActions.facetsUpdateById({
-        id: facet.id,
-        operatorType,
-      }),
-    )
-  }
-
-  const selectedOperatorType: SearchFacetOperatorType = facet.operatorType
-
-  return (
-    <SearchFacet facet={facet}>
-      {/* Optional operators */}
-      {facet?.operatorTypes && (
-        <MenuButton
-          button={
-            <Button
-              fontSize={1}
-              iconRight={SelectIcon}
-              padding={2}
-              text={operators[selectedOperatorType].label}
-            />
-          }
-          id="operators"
-          menu={
-            <Menu>
-              {facet.operatorTypes.map((operatorType, index) => {
-                if (operatorType) {
-                  const selected = operatorType === selectedOperatorType
-                  return (
-                    <MenuItem
-                      disabled={selected}
-                      fontSize={1}
-                      key={operatorType}
-                      onClick={() => handleOperatorItemClick(operatorType)}
-                      padding={2}
-                      space={4}
-                      style={{minWidth: '150px'}}
-                      text={operators[operatorType].label}
-                    />
-                  )
-                }
-
-                return <MenuDivider key={index} />
-              })}
-            </Menu>
-          }
-          popover={popoverProps}
-        />
-      )}
-
-      {/* Value */}
-      {!operators[selectedOperatorType].hideInput && (
-        <Box marginX={1} style={{width: '160px'}}>
-          <Select
-            components={reactSelectComponents}
-            instanceId="facet-searchable"
-            isClearable
-            isDisabled={tagsFetching}
-            isSearchable
-            name="tags"
-            noOptionsMessage={() => 'No tags'}
-            onChange={(value: any) => handleChange(value as TagSelectOption)}
-            options={allTagOptions}
-            placeholder={tagsFetching ? 'Loading...' : 'Select...'}
-            styles={reactSelectStyles(scheme)}
-            value={facet?.value}
-          />
-        </Box>
-      )}
-    </SearchFacet>
-  )
-}
-
-export default SearchFacetTags

package/src/components/SearchFacets/index.tsx

@@ -1,72 +0,0 @@
-import {Box, Flex, Inline, rem, type Theme} from '@sanity/ui'
-import {styled, css} from 'styled-components'
-
-import useTypedSelector from '../../hooks/useTypedSelector'
-import SearchFacetNumber from '../SearchFacetNumber'
-import SearchFacetSelect from '../SearchFacetSelect'
-import SearchFacetString from '../SearchFacetString'
-import SearchFacetTags from '../SearchFacetTags'
-
-type Props = {
-  layout?: 'inline' | 'stack'
-}
-
-const StackContainer = styled(Flex)(({theme}: {theme: Theme}) => {
-  return css`
-    > * {
-      margin-bottom: ${rem(theme.sanity.space[2])};
-    }
-  `
-})
-
-const SearchFacets = (props: Props) => {
-  const {layout = 'inline'} = props
-
-  // Redux
-  const searchFacets = useTypedSelector((state) => state.search.facets)
-
-  const Items = searchFacets.map((facet) => {
-    const key = facet.id
-    if (facet.type === 'number') {
-      return <SearchFacetNumber facet={facet} key={key} />
-    }
-
-    if (facet.type === 'searchable') {
-      return <SearchFacetTags facet={facet} key={key} />
-    }
-
-    if (facet.type === 'select') {
-      return <SearchFacetSelect facet={facet} key={key} />
-    }
-
-    if (facet.type === 'string') {
-      return <SearchFacetString facet={facet} key={key} />
-    }
-
-    return null
-  })
-
-  if (layout === 'inline') {
-    if (searchFacets.length === 0) {
-      return null
-    }
-
-    return (
-      <Box marginBottom={2}>
-        <Inline space={2}>{Items}</Inline>
-      </Box>
-    )
-  }
-
-  if (layout === 'stack') {
-    return (
-      <StackContainer align="flex-start" direction="column">
-        {Items}
-      </StackContainer>
-    )
-  }
-
-  throw Error('Invalid layout')
-}
-
-export default SearchFacets

package/src/components/SearchFacetsControl/index.tsx

@@ -1,140 +0,0 @@
-import {AddIcon} from '@sanity/icons'
-import {Button, Flex, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem} from '@sanity/ui'
-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 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 popoverProps = usePortalPopoverProps()
-
-  const {creditLine} = useToolOptions()
-
-  const isTool = !selectedDocument
-
-  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) => {
-      // Remove credit line filter if it's not enabled
-      if (!creditLine?.enabled && facet?.type === 'string' && facet?.name === 'creditLine') {
-        return false
-      }
-
-      if (facet.type === 'group' || facet.type === 'divider') {
-        return true
-      }
-
-      if (isTool) {
-        return !facet?.selectOnly
-      }
-
-      const matchingAssetTypes = facet.assetTypes.filter((assetType) =>
-        assetTypes.includes(assetType),
-      )
-      return matchingAssetTypes.length > 0
-    })
-    // Remove adjacent and leading / trailing dividers
-    .filter((facet, index, facets) => {
-      const previousFacet = facets[index - 1]
-      // Ignore leading + trailing dividers
-      if (facet.type === 'divider' && (index === 0 || index === facets.length - 1)) {
-        return false
-      }
-      // Ignore adjacent dividers
-      if (facet.type === 'divider' && previousFacet?.type === 'divider') {
-        return false
-      }
-      return true
-    })
-
-  const hasSearchFacets = filteredFacets.length > 0
-
-  const renderMenuFacets = (
-    facets: (SearchFacetDivider | SearchFacetGroup | SearchFacetInputProps)[],
-    level: number = 0,
-  ) => {
-    return (
-      <>
-        {facets?.map((facet, index) => {
-          if (facet.type === 'divider') {
-            return <MenuDivider key={index} />
-          }
-
-          // Recursively render menu facets
-          if (facet.type === 'group') {
-            return (
-              <MenuGroup key={`group-${level}-${index}`} text={facet.title} title={facet.title}>
-                {renderMenuFacets(facet.facets, level + 1)}
-              </MenuGroup>
-            )
-          }
-
-          if (facet) {
-            const disabled =
-              !facet.operatorTypes && !!searchFacets.find((v) => v.name === facet.name)
-
-            return (
-              <MenuItem
-                disabled={disabled}
-                fontSize={1}
-                key={facet.name}
-                onClick={() => dispatch(searchActions.facetsAdd({facet}))}
-                padding={2}
-                text={facet.title}
-              />
-            )
-          }
-
-          return null
-        })}
-      </>
-    )
-  }
-
-  return (
-    <Flex>
-      {/* Add filter button */}
-      <MenuButton
-        button={
-          <Button
-            disabled={!hasSearchFacets}
-            fontSize={1}
-            icon={AddIcon}
-            mode="bleed"
-            space={2}
-            text="Add filter"
-            tone="primary"
-          />
-        }
-        id="facets"
-        menu={<Menu>{renderMenuFacets(filteredFacets)}</Menu>}
-        popover={{
-          ...popoverProps,
-          placement: 'right-start',
-        }}
-      />
-
-      {/* Clear facets button */}
-      {searchFacets.length > 0 && (
-        <Button
-          fontSize={1}
-          mode="bleed"
-          onClick={() => dispatch(searchActions.facetsClear())}
-          text="Clear"
-        />
-      )}
-    </Flex>
-  )
-}
-
-export default SearchFacetsControl

package/src/components/TableHeader/index.tsx

@@ -1,110 +0,0 @@
-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 {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 TableHeader = () => {
-  const scheme = useColorSchemeValue()
-
-  // Redux
-  const dispatch = useDispatch()
-  const fetching = useTypedSelector((state) => state.assets.fetching)
-  const itemsLength = useTypedSelector(selectAssetsLength)
-  const numPickedAssets = useTypedSelector(selectAssetsPickedLength)
-
-  const mediaIndex = useMediaIndex()
-  const {onSelect} = useAssetSourceActions()
-
-  const allSelected = numPickedAssets === itemsLength
-
-  // Callbacks
-  const handleContextActionClick = (e: MouseEvent) => {
-    e.stopPropagation()
-
-    if (allSelected) {
-      dispatch(assetsActions.pickClear())
-    } else {
-      dispatch(assetsActions.pickAll())
-    }
-  }
-
-  // Note that even though we hide the table header on smaller breakpoints, we never set it to
-  // `display: none`, as doing so causes issues with react-virtuoso.
-  // Instead, we give it 0 height and hide it with `visibility: hidden`.
-  return (
-    <Grid
-      style={{
-        alignItems: 'center',
-        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`,
-        letterSpacing: '0.025em',
-        position: 'sticky',
-        textTransform: 'uppercase',
-        top: 0,
-        visibility: mediaIndex < 3 ? 'hidden' : 'visible',
-        width: '100%',
-        zIndex: 1, // force stacking context
-      }}
-    >
-      {onSelect ? (
-        <TableHeaderItem />
-      ) : (
-        <ContextActionContainer
-          align="center"
-          justify="center"
-          onClick={handleContextActionClick}
-          $scheme={scheme}
-          style={{
-            height: '100%',
-            position: 'relative',
-          }}
-        >
-          <Checkbox
-            checked={!fetching && allSelected}
-            readOnly
-            style={{
-              pointerEvents: 'none', // TODO: consider alternative for usability
-              transform: 'scale(0.8)',
-            }}
-          />
-        </ContextActionContainer>
-      )}
-
-      <TableHeaderItem />
-      <TableHeaderItem field="originalFilename" title="Filename" />
-      <TableHeaderItem title="Resolution" />
-      <TableHeaderItem field="mimeType" title="MIME type" />
-      <TableHeaderItem field="size" title="Size" />
-      <TableHeaderItem field="_updatedAt" title="Last updated" />
-      <TableHeaderItem title="References" />
-      <TableHeaderItem />
-    </Grid>
-  )
-}
-
-export default TableHeader

package/src/components/TableHeaderItem/index.tsx

@@ -1,61 +0,0 @@
-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'
-
-type Props = {
-  field?: string
-  title?: string
-}
-
-const TableHeaderItem = (props: Props) => {
-  const {field, title} = props
-
-  // Redux
-  const dispatch = useDispatch()
-  const order = useTypedSelector((state) => state.assets.order)
-
-  const isActive = order.field === field
-
-  // Callbacks
-  const handleClick = () => {
-    if (!field || !title) {
-      return
-    }
-
-    if (isActive) {
-      const direction = order.direction === 'asc' ? 'desc' : 'asc'
-      dispatch(assetsActions.orderSet({order: {field, direction}}))
-    } else {
-      dispatch(assetsActions.orderSet({order: {field, direction: 'asc'}}))
-    }
-  }
-
-  return (
-    <Label muted={!field} size={0}>
-      <Box
-        onClick={field ? handleClick : undefined}
-        style={{
-          cursor: field ? 'pointer' : 'default',
-          display: 'inline',
-          whiteSpace: 'nowrap',
-        }}
-      >
-        <span
-          style={{
-            marginRight: '0.4em',
-          }}
-        >
-          {title}
-        </span>
-
-        {isActive && order?.direction === 'asc' && <ChevronUpIcon />}
-        {isActive && order?.direction === 'desc' && <ChevronDownIcon />}
-      </Box>
-    </Label>
-  )
-}
-
-export default TableHeaderItem