sanity-plugin-media 2.0.5 → 2.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-media",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "This version of `sanity-plugin-media` is for Sanity Studio V3.",
   "keywords": [
     "sanity",
@@ -54,10 +54,10 @@
     "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",
     "@tanem/react-nprogress": "^5.0.0",
     "copy-to-clipboard": "^3.3.1",
     "date-fns": "^2.27.0",
@@ -71,7 +71,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 +83,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 +116,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/SearchFacetNumber/index.tsx

@@ -8,6 +8,7 @@ import {
 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'
@@ -16,12 +17,12 @@ type Props = {
   facet: 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)
@@ -75,6 +76,7 @@ const SearchFacetNumber = (props: Props) => {
               })}
             </Menu>
           }
+          popover={popoverProps}
         />
       )}
 
@@ -116,6 +118,7 @@ const SearchFacetNumber = (props: Props) => {
               ))}
             </Menu>
           }
+          popover={popoverProps}
         />
       )}
     </SearchFacet>

package/src/components/SearchFacetSelect/index.tsx

@@ -11,17 +11,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
 }
 
-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 +74,7 @@ const SearchFacetSelect = (props: Props) => {
               })}
             </Menu>
           }
+          popover={popoverProps}
         />
       )}
 
@@ -101,6 +103,7 @@ const SearchFacetSelect = (props: Props) => {
             ))}
           </Menu>
         }
+        popover={popoverProps}
       />
     </SearchFacet>
   )

package/src/components/SearchFacetString/index.tsx

@@ -5,6 +5,7 @@ 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'
 
@@ -12,12 +13,12 @@ type Props = {
   facet: 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}))
   }
@@ -62,6 +63,7 @@ const SearchFacetString = (props: Props) => {
               })}
             </Menu>
           }
+          popover={popoverProps}
         />
       )}
 

package/src/components/SearchFacetTags/index.tsx

@@ -5,6 +5,7 @@ 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'
@@ -16,15 +17,15 @@ type Props = {
   facet: 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({
@@ -79,6 +80,7 @@ const SearchFacetTags = (props: Props) => {
               })}
             </Menu>
           }
+          popover={popoverProps}
         />
       )}
 

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
@@ -108,8 +111,10 @@ const SearchFacetsControl = () => {
         }
         id="facets"
         menu={<Menu>{renderMenuFacets(filteredFacets)}</Menu>}
-        placement="right-start"
-        portal
+        popover={{
+          ...popoverProps,
+          placement: 'right-start'
+        }}
       />
 
       {/* Clear facets button */}

package/src/components/TableRowUpload/index.tsx

@@ -1,6 +1,6 @@
 import {hues} from '@sanity/color'
 import {CloseIcon} from '@sanity/icons'
-import {Box, Button, Flex, Grid, Stack, Text, Tooltip, useMediaIndex} from '@sanity/ui'
+import {Box, Button, Flex, Grid, Stack, Text, useMediaIndex} from '@sanity/ui'
 import filesize from 'filesize'
 import React from 'react'
 import {useDispatch} from 'react-redux'
@@ -100,10 +100,10 @@ const TableRowUpload = (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 && (
@@ -118,27 +118,15 @@ const TableRowUpload = (props: Props) => {
                 width: '100%'
               }}
             >
-              <Tooltip
-                content={
-                  <Box padding={2}>
-                    <Text muted size={1}>
-                      Cancel
-                    </Text>
-                  </Box>
-                }
-                disabled={'ontouchstart' in window}
-                placement="top"
-              >
-                <Button
-                  fontSize={3}
-                  icon={CloseIcon}
-                  mode="bleed"
-                  onClick={handleCancelUpload}
-                  padding={2}
-                  style={{background: 'none', boxShadow: 'none'}}
-                  tone="critical"
-                />
-              </Tooltip>
+              <Button
+                fontSize={3}
+                icon={CloseIcon}
+                mode="bleed"
+                onClick={handleCancelUpload}
+                padding={2}
+                style={{background: 'none', boxShadow: 'none'}}
+                tone="critical"
+              />
             </Flex>
           )}
         </Box>

package/src/components/Tag/index.tsx

@@ -44,6 +44,7 @@ type TagButtonProps = {
 
 const TagButton = (props: TagButtonProps) => {
   const {disabled, icon, onClick, tone, tooltip} = props
+
   return (
     <Tooltip
       content={
@@ -55,6 +56,7 @@ const TagButton = (props: TagButtonProps) => {
       }
       disabled={'ontouchstart' in window}
       placement="top"
+      portal
     >
       <Button
         disabled={disabled}

package/src/components/TagViewHeader/index.tsx

@@ -13,15 +13,11 @@ type Props = {
   title: string
 }
 
-const TagViewHeader = (props: Props) => {
-  const {allowCreate, light, title} = props
-
-  // Redux
+const TagViewHeader = ({allowCreate, light, title}: Props) => {
   const dispatch = useDispatch()
   const tagsCreating = useTypedSelector(state => state.tags.creating)
   const tagsFetching = useTypedSelector(state => state.tags.fetching)
 
-  // Callbacks
   const handleTagCreate = () => {
     dispatch(DIALOG_ACTIONS.showTagCreate())
   }
@@ -35,6 +31,7 @@ const TagViewHeader = (props: Props) => {
         style={{
           background: light ? hues.gray?.[900].hex : black.hex,
           borderBottom: `1px solid ${hues.gray?.[900].hex}`,
+          flexShrink: 0,
           height: `${PANEL_HEIGHT}px`
         }}
       >

package/src/hooks/useKeyPress.ts

@@ -1,24 +1,26 @@
 import isHotkey from 'is-hotkey'
-import {RefObject, useEffect, useRef} from 'react'
+import {RefObject, useCallback, useEffect, useRef} from 'react'
 
 const useKeyPress = (hotkey: string, onPress?: () => void): RefObject<boolean> => {
   const keyPressed = useRef(false)
 
   // If pressed key is our target key then set to true
-  function downHandler(e: KeyboardEvent) {
-    if (isHotkey(hotkey, e)) {
-      keyPressed.current = true
-
-      if (onPress) {
-        onPress()
+  const downHandler = useCallback(
+    (e: KeyboardEvent) => {
+      if (isHotkey(hotkey, e)) {
+        keyPressed.current = true
+        if (onPress) {
+          onPress()
+        }
       }
-    }
-  }
+    },
+    [hotkey, onPress]
+  )
 
   // If released key is our target key then set to false
-  const upHandler = () => {
+  const upHandler = useCallback(() => {
     keyPressed.current = false
-  }
+  }, [])
 
   // Add event listeners
   useEffect(() => {
@@ -29,7 +31,7 @@ const useKeyPress = (hotkey: string, onPress?: () => void): RefObject<boolean> =
       window.removeEventListener('keydown', downHandler)
       window.removeEventListener('keyup', upHandler)
     }
-  }, []) // Empty array ensures that effect is only run on mount and unmount
+  }, [downHandler, upHandler])
 
   return keyPressed
 }

package/src/hooks/usePortalPopoverProps.ts

@@ -0,0 +1,12 @@
+import {PopoverProps, usePortal} from '@sanity/ui'
+
+export function usePortalPopoverProps(): PopoverProps {
+  const portal = usePortal()
+
+  return {
+    constrainSize: true,
+    floatingBoundary: portal.element,
+    portal: true,
+    referenceBoundary: portal.element
+  }
+}

package/src/modules/index.ts

@@ -1,4 +1,9 @@
-import {combineReducers} from '@reduxjs/toolkit'
+import {
+  ActionFromReducersMapObject,
+  Reducer,
+  StateFromReducersMapObject,
+  combineReducers
+} from '@reduxjs/toolkit'
 import {combineEpics} from 'redux-observable'
 
 import assetsReducer, {
@@ -97,7 +102,7 @@ export const rootEpic = combineEpics(
   uploadsCompleteQueueEpic
 )
 
-const reducers = combineReducers({
+const reducers = {
   assets: assetsReducer,
   debug: debugReducer,
   dialog: dialogReducer,
@@ -106,5 +111,14 @@ const reducers = combineReducers({
   selected: selectedReducer,
   tags: tagsReducer,
   uploads: uploadsReducer
-})
-export const rootReducer = reducers
+}
+
+type ReducersMapObject = typeof reducers
+
+// Workaround to avoid `$CombinedState` ts errors
+// source: https://github.com/reduxjs/redux-toolkit/issues/2068#issuecomment-1130796500
+// TODO: remove once we use `redux-toolkit` v2
+export const rootReducer: Reducer<
+  StateFromReducersMapObject<ReducersMapObject>,
+  ActionFromReducersMapObject<ReducersMapObject>
+> = combineReducers(reducers)