sanity-plugin-media 2.0.5 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-media",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "description": "This version of `sanity-plugin-media` is for Sanity Studio V3.",
   "keywords": [
     "sanity",
@@ -54,10 +54,11 @@
     "watch": "pkg-utils watch"
   },
   "dependencies": {
-    "@hookform/resolvers": "2.0.0-beta.3",
+    "@hookform/resolvers": "2.9.11",
     "@reduxjs/toolkit": "^1.9.0",
     "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/ui": "^1.0.0",
+    "@sanity/ui": "^1.7.0",
+    "@sanity/uuid": "^3.0.1",
     "@tanem/react-nprogress": "^5.0.0",
     "copy-to-clipboard": "^3.3.1",
     "date-fns": "^2.27.0",
@@ -71,7 +72,7 @@
     "react-hook-form": "^6.15.1",
     "react-redux": "^7.2.2",
     "react-select": "^5.3.2",
-    "react-virtuoso": "^2.11.0",
+    "react-virtuoso": "^4.3.11",
     "redux": "^4.2.0",
     "redux-observable": "^2.0.0",
     "rxjs": "^7.0.0",
@@ -83,7 +84,7 @@
     "@sanity/client": "^4.0.1",
     "@sanity/color": "^2.1.20",
     "@sanity/icons": "^2.0.0",
-    "@sanity/pkg-utils": "^1.17.2",
+    "@sanity/pkg-utils": "^2.0.0",
     "@sanity/plugin-kit": "^2.1.16",
     "@sanity/semantic-release-preset": "^2.0.2",
     "@types/is-hotkey": "^0.1.7",
@@ -116,8 +117,6 @@
     "typescript": "^4.8.4"
   },
   "peerDependencies": {
-    "@sanity/color": "^2.1.20",
-    "@sanity/icons": "^2.0.0",
     "react": "^18",
     "react-dom": "^18",
     "sanity": "^3.0.0",

package/src/components/AssetGridVirtualized/index.tsx

@@ -36,6 +36,7 @@ const ItemContainer = styled.div`
 const ListContainer = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fill, ${CARD_WIDTH}px);
+  grid-template-rows: repeat(auto-fill, ${CARD_HEIGHT}px);
   justify-content: center;
   margin: 0 auto;
 `
@@ -71,7 +72,7 @@ const AssetGridVirtualized = (props: Props) => {
         return <VirtualCell item={item} selected={selected} />
       }}
       overscan={48}
-      style={{overflowX: 'hidden'}}
+      style={{overflowX: 'hidden', overflowY: 'scroll'}}
       totalCount={totalCount}
     />
   )

package/src/components/Browser/index.tsx

@@ -1,8 +1,8 @@
 import type {MutationEvent} from '@sanity/client'
-import {Card, Flex, studioTheme, ThemeProvider, ToastProvider} from '@sanity/ui'
+import {Card, Flex, PortalProvider, studioTheme, ThemeProvider, ToastProvider} from '@sanity/ui'
 import {Asset, Tag} from '@types'
 import groq from 'groq'
-import React, {useEffect} from 'react'
+import React, {useEffect, useState} from 'react'
 import {useDispatch} from 'react-redux'
 import type {AssetSourceComponentProps, SanityDocument} from 'sanity'
 import {TAG_DOCUMENT_NAME} from '../../constants'
@@ -33,6 +33,8 @@ type Props = {
 const BrowserContent = ({onClose}: {onClose?: AssetSourceComponentProps['onClose']}) => {
   const client = useVersionedClient()
 
+  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
+
   // Redux
   const dispatch = useDispatch()
 
@@ -98,31 +100,33 @@ const BrowserContent = ({onClose}: {onClose?: AssetSourceComponentProps['onClose
   }, [])
 
   return (
-    <UploadDropzone>
-      <Dialogs />
-      <Notifications />
-
-      <Card display="flex" height="fill">
-        <Flex direction="column" flex={1}>
-          {/* Header */}
-          <Header onClose={onClose} />
-
-          {/* Browser Controls */}
-          <Controls />
-
-          <Flex flex={1}>
-            <Flex align="flex-end" direction="column" flex={1} style={{position: 'relative'}}>
-              <PickedBar />
-              <Items />
+    <PortalProvider element={portalElement}>
+      <UploadDropzone>
+        <Dialogs />
+        <Notifications />
+
+        <Card display="flex" height="fill" ref={setPortalElement}>
+          <Flex direction="column" flex={1}>
+            {/* Header */}
+            <Header onClose={onClose} />
+
+            {/* Browser Controls */}
+            <Controls />
+
+            <Flex flex={1}>
+              <Flex align="flex-end" direction="column" flex={1} style={{position: 'relative'}}>
+                <PickedBar />
+                <Items />
+              </Flex>
+              <TagsPanel />
             </Flex>
-            <TagsPanel />
-          </Flex>
 
-          {/* Debug */}
-          <DebugControls />
-        </Flex>
-      </Card>
-    </UploadDropzone>
+            {/* Debug */}
+            <DebugControls />
+          </Flex>
+        </Card>
+      </UploadDropzone>
+    </PortalProvider>
   )
 }
 

package/src/components/ButtonAssetCopy/index.tsx

@@ -2,22 +2,18 @@ import {ClipboardIcon} from '@sanity/icons'
 import {Button, Popover, Text} from '@sanity/ui'
 import copy from 'copy-to-clipboard'
 import React, {useEffect, useRef, useState} from 'react'
+import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
 
 type Props = {
   disabled?: boolean
   url: string
 }
 
-const ButtonAssetCopy = (props: Props) => {
-  const {disabled, url} = props
-
-  // Refs
+const ButtonAssetCopy = ({disabled, url}: Props) => {
+  const popoverProps = usePortalPopoverProps()
   const refPopoverTimeout = useRef<ReturnType<typeof window.setTimeout>>()
-
-  // State
   const [popoverVisible, setPopoverVisible] = useState(false)
 
-  // Callbacks
   const handleClick = () => {
     if (refPopoverTimeout.current) {
       clearTimeout(refPopoverTimeout.current)
@@ -51,6 +47,7 @@ const ButtonAssetCopy = (props: Props) => {
       padding={2}
       placement="top"
       radius={1}
+      {...popoverProps}
     >
       <Button
         disabled={disabled}

package/src/components/CardUpload/index.tsx

@@ -1,6 +1,6 @@
 import {hues} from '@sanity/color'
 import {CloseIcon} from '@sanity/icons'
-import {Box, Button, Flex, Text, Tooltip} from '@sanity/ui'
+import {Box, Button, Flex, Text} from '@sanity/ui'
 import filesize from 'filesize'
 import React from 'react'
 import {useDispatch} from 'react-redux'
@@ -102,10 +102,10 @@ const CardUpload = (props: Props) => {
             </div>
           )}
 
-          {/* 
+          {/*
           Cancel upload button.
           Assets will only have a `complete` status _after_ it has been created on your dataset.
-          As such, we also hide the cancel button when `percentLoaded === 100`, as cancelling when the asset 
+          As such, we also hide the cancel button when `percentLoaded === 100`, as cancelling when the asset
           has been fully uploaded (even with a status of `progress`) won't stop the asset from being created.
         */}
           {!isComplete && percentLoaded !== 100 && (
@@ -121,27 +121,15 @@ const CardUpload = (props: Props) => {
                 width: '100%'
               }}
             >
-              <Tooltip
-                content={
-                  <Box padding={2}>
-                    <Text muted size={1}>
-                      Cancel
-                    </Text>
-                  </Box>
-                }
-                disabled={'ontouchstart' in window}
-                placement="top"
-              >
-                <Button
-                  fontSize={4}
-                  icon={CloseIcon}
-                  mode="bleed"
-                  onClick={handleCancelUpload}
-                  padding={2}
-                  style={{background: 'none', boxShadow: 'none'}}
-                  tone="critical"
-                />
-              </Tooltip>
+              <Button
+                fontSize={4}
+                icon={CloseIcon}
+                mode="bleed"
+                onClick={handleCancelUpload}
+                padding={2}
+                style={{background: 'none', boxShadow: 'none'}}
+                tone="critical"
+              />
             </Flex>
           )}
         </Box>

package/src/components/DebugControls/index.tsx

@@ -60,6 +60,7 @@ const DebugControls = () => {
           }
           fallbackPlacements={['right', 'left']}
           placement="bottom"
+          portal
         >
           <Switch
             checked={badConnection}

package/src/components/FormBuilderTool/index.tsx

@@ -62,7 +62,7 @@ const useRootPortalElement = () => {
     return () => {
       document.body.removeChild(container)
     }
-  }, [])
+  }, [container])
 
   return container
 }

package/src/components/FormSubmitButton/index.tsx

@@ -40,6 +40,7 @@ const FormSubmitButton = (props: Props) => {
       }
       disabled={'ontouchstart' in window}
       placement="top"
+      portal
     >
       <Box>
         <Button

package/src/components/OrderSelect/index.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import {useDispatch} from 'react-redux'
 import {getOrderTitle} from '../../config/orders'
 import {ORDER_OPTIONS} from '../../constants'
+import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {assetsActions} from '../../modules/assets'
 
@@ -12,6 +13,8 @@ const OrderSelect = () => {
   const dispatch = useDispatch()
   const order = useTypedSelector(state => state.assets.order)
 
+  const popoverProps = usePortalPopoverProps()
+
   return (
     <MenuButton
       button={
@@ -51,6 +54,7 @@ const OrderSelect = () => {
           })}
         </Menu>
       }
+      popover={popoverProps}
     />
   )
 }

package/src/components/SearchFacet/index.tsx

@@ -1,6 +1,6 @@
 import {CloseIcon} from '@sanity/icons'
 import {Box, Flex, Label, Text} from '@sanity/ui'
-import {SearchFacetInputProps} from '@types'
+import {SearchFacetInputProps, WithId} from '@types'
 import React, {ReactNode} from 'react'
 import {useDispatch} from 'react-redux'
 import styled from 'styled-components'
@@ -8,7 +8,7 @@ import {searchActions} from '../../modules/search'
 
 type Props = {
   children: ReactNode
-  facet: SearchFacetInputProps
+  facet: WithId<SearchFacetInputProps>
 }
 
 const Container = styled(Box)`
@@ -23,7 +23,7 @@ const SearchFacet = (props: Props) => {
   const dispatch = useDispatch()
 
   const handleClose = () => {
-    dispatch(searchActions.facetsRemove({facetName: facet.name}))
+    dispatch(searchActions.facetsRemoveById({facetId: facet.id}))
   }
 
   return (

package/src/components/SearchFacetNumber/index.tsx

@@ -3,40 +3,42 @@ import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
 import {
   SearchFacetInputNumberModifier,
   SearchFacetInputNumberProps,
-  SearchFacetOperatorType
+  SearchFacetOperatorType,
+  WithId
 } from '@types'
 import React from 'react'
 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'
 
 type Props = {
-  facet: SearchFacetInputNumberProps
+  facet: WithId<SearchFacetInputNumberProps>
 }
 
-const SearchFacetNumber = (props: Props) => {
-  const {facet} = props
-
+const SearchFacetNumber = ({facet}: Props) => {
   // Redux
   const dispatch = useDispatch()
 
+  const popoverProps = usePortalPopoverProps()
+
   const modifiers = facet?.modifiers
   const selectedModifier = facet?.modifier
     ? modifiers?.find(modifier => modifier.name === facet?.modifier)
     : modifiers?.[0]
 
   const handleOperatorItemClick = (operatorType: SearchFacetOperatorType) => {
-    dispatch(searchActions.facetsUpdate({name: facet.name, operatorType}))
+    dispatch(searchActions.facetsUpdateById({id: facet.id, operatorType}))
   }
 
   const handleModifierClick = (modifier: SearchFacetInputNumberModifier) => {
-    dispatch(searchActions.facetsUpdate({name: facet.name, modifier: modifier.name}))
+    dispatch(searchActions.facetsUpdateById({id: facet.id, modifier: modifier.name}))
   }
 
   const handleValueChange = (value: number) => {
-    dispatch(searchActions.facetsUpdate({name: facet.name, value}))
+    dispatch(searchActions.facetsUpdateById({id: facet.id, value}))
   }
 
   const selectedOperatorType: SearchFacetOperatorType = facet.operatorType ?? 'greaterThan'
@@ -75,6 +77,7 @@ const SearchFacetNumber = (props: Props) => {
               })}
             </Menu>
           }
+          popover={popoverProps}
         />
       )}
 
@@ -116,6 +119,7 @@ const SearchFacetNumber = (props: Props) => {
               ))}
             </Menu>
           }
+          popover={popoverProps}
         />
       )}
     </SearchFacet>

package/src/components/SearchFacetSelect/index.tsx

@@ -3,7 +3,8 @@ import {Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
 import {
   SearchFacetInputSelectListItemProps,
   SearchFacetInputSelectProps,
-  SearchFacetOperatorType
+  SearchFacetOperatorType,
+  WithId
 } from '@types'
 import React from 'react'
 import {useDispatch} from 'react-redux'
@@ -11,17 +12,18 @@ 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: SearchFacetInputSelectProps
+  facet: WithId<SearchFacetInputSelectProps>
 }
 
-const SearchFacetSelect = (props: Props) => {
-  const {facet} = props
-
+const SearchFacetSelect = ({facet}: Props) => {
   // Redux
   const dispatch = useDispatch()
 
+  const popoverProps = usePortalPopoverProps()
+
   const options = facet?.options
 
   const selectedItem = options?.find(v => v.name === facet?.value)
@@ -73,6 +75,7 @@ const SearchFacetSelect = (props: Props) => {
               })}
             </Menu>
           }
+          popover={popoverProps}
         />
       )}
 
@@ -101,6 +104,7 @@ const SearchFacetSelect = (props: Props) => {
             ))}
           </Menu>
         }
+        popover={popoverProps}
       />
     </SearchFacet>
   )

package/src/components/SearchFacetString/index.tsx

@@ -1,29 +1,30 @@
 import {SelectIcon} from '@sanity/icons'
 import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem, TextInput} from '@sanity/ui'
-import {SearchFacetInputStringProps, SearchFacetOperatorType} from '@types'
+import {SearchFacetInputStringProps, SearchFacetOperatorType, WithId} from '@types'
 import React, {ChangeEvent} from 'react'
 import {useDispatch} from 'react-redux'
 
 import {operators} from '../../config/searchFacets'
+import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
 import {searchActions} from '../../modules/search'
 import SearchFacet from '../SearchFacet'
 
 type Props = {
-  facet: SearchFacetInputStringProps
+  facet: WithId<SearchFacetInputStringProps>
 }
 
-const SearchFacetString = (props: Props) => {
-  const {facet} = props
-
+const SearchFacetString = ({facet}: Props) => {
   // Redux
   const dispatch = useDispatch()
 
+  const popoverProps = usePortalPopoverProps()
+
   const handleOperatorItemClick = (operatorType: SearchFacetOperatorType) => {
-    dispatch(searchActions.facetsUpdate({name: facet.name, operatorType}))
+    dispatch(searchActions.facetsUpdateById({id: facet.id, operatorType}))
   }
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    dispatch(searchActions.facetsUpdate({name: facet.name, value: e.target.value}))
+    dispatch(searchActions.facetsUpdateById({id: facet.id, value: e.target.value}))
   }
 
   const selectedOperatorType: SearchFacetOperatorType = facet.operatorType
@@ -62,6 +63,7 @@ const SearchFacetString = (props: Props) => {
               })}
             </Menu>
           }
+          popover={popoverProps}
         />
       )}
 

package/src/components/SearchFacetTags/index.tsx

@@ -1,10 +1,16 @@
 import {SelectIcon} from '@sanity/icons'
 import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
-import {ReactSelectOption, SearchFacetInputSearchableProps, SearchFacetOperatorType} from '@types'
+import {
+  ReactSelectOption,
+  SearchFacetInputSearchableProps,
+  SearchFacetOperatorType,
+  WithId
+} from '@types'
 import React from 'react'
 import {useDispatch} from 'react-redux'
 import Select from 'react-select'
 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'
@@ -13,22 +19,22 @@ import getTagSelectOptions from '../../utils/getTagSelectOptions'
 import SearchFacet from '../SearchFacet'
 
 type Props = {
-  facet: SearchFacetInputSearchableProps
+  facet: WithId<SearchFacetInputSearchableProps>
 }
 
-const SearchFacetTags = (props: Props) => {
-  const {facet} = props
-
+const SearchFacetTags = ({facet}: Props) => {
   // 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: ReactSelectOption) => {
     dispatch(
-      searchActions.facetsUpdate({
-        name: facet.name,
+      searchActions.facetsUpdateById({
+        id: facet.id,
         value: option
       })
     )
@@ -36,8 +42,8 @@ const SearchFacetTags = (props: Props) => {
 
   const handleOperatorItemClick = (operatorType: SearchFacetOperatorType) => {
     dispatch(
-      searchActions.facetsUpdate({
-        name: facet.name,
+      searchActions.facetsUpdateById({
+        id: facet.id,
         operatorType
       })
     )
@@ -79,6 +85,7 @@ const SearchFacetTags = (props: Props) => {
               })}
             </Menu>
           }
+          popover={popoverProps}
         />
       )}
 

package/src/components/SearchFacets/index.tsx

@@ -25,20 +25,21 @@ const SearchFacets = (props: Props) => {
   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={facet.name} />
+      return <SearchFacetNumber facet={facet} key={key} />
     }
 
     if (facet.type === 'searchable') {
-      return <SearchFacetTags facet={facet} key={facet.name} />
+      return <SearchFacetTags facet={facet} key={key} />
     }
 
     if (facet.type === 'select') {
-      return <SearchFacetSelect facet={facet} key={facet.name} />
+      return <SearchFacetSelect facet={facet} key={key} />
     }
 
     if (facet.type === 'string') {
-      return <SearchFacetString facet={facet} key={facet.name} />
+      return <SearchFacetString facet={facet} key={key} />
     }
 
     return null

package/src/components/SearchFacetsControl/index.tsx

@@ -4,6 +4,7 @@ import {SearchFacetDivider, SearchFacetGroup, SearchFacetInputProps} from '@type
 import React from 'react'
 import {useDispatch} from 'react-redux'
 import {FACETS} from '../../constants'
+import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {searchActions} from '../../modules/search'
 
@@ -14,6 +15,8 @@ const SearchFacetsControl = () => {
   const searchFacets = useTypedSelector(state => state.search.facets)
   const selectedDocument = useTypedSelector(state => state.selected.document)
 
+  const popoverProps = usePortalPopoverProps()
+
   const isTool = !selectedDocument
 
   const filteredFacets = FACETS
@@ -46,10 +49,7 @@ const SearchFacetsControl = () => {
       return true
     })
 
-  // Determine if there are any remaining un-selected facets
-  // (This operates under the assumption that only one of each facet can be active at any given time)
-  const hasRemainingSearchFacets =
-    filteredFacets.filter(facet => facet).length - searchFacets.length > 0
+  const hasSearchFacets = filteredFacets.length > 0
 
   const renderMenuFacets = (
     facets: (SearchFacetDivider | SearchFacetGroup | SearchFacetInputProps)[],
@@ -72,11 +72,11 @@ const SearchFacetsControl = () => {
           }
 
           if (facet) {
-            const isPresent = !!searchFacets.find(v => v.name === facet.name)
+            const disabled = !facet.operatorTypes && !!searchFacets.find(v => v.name === facet.name)
 
             return (
               <MenuItem
-                disabled={isPresent}
+                disabled={disabled}
                 fontSize={1}
                 key={facet.name}
                 onClick={() => dispatch(searchActions.facetsAdd({facet}))}
@@ -98,7 +98,7 @@ const SearchFacetsControl = () => {
       <MenuButton
         button={
           <Button
-            disabled={!hasRemainingSearchFacets}
+            disabled={!hasSearchFacets}
             fontSize={1}
             icon={AddCircleIcon}
             mode="bleed"
@@ -108,8 +108,10 @@ const SearchFacetsControl = () => {
         }
         id="facets"
         menu={<Menu>{renderMenuFacets(filteredFacets)}</Menu>}
-        placement="right-start"
-        portal
+        popover={{
+          ...popoverProps,
+          placement: 'right-start'
+        }}
       />
 
       {/* Clear facets button */}