sanity-plugin-media 2.0.5 → 2.1.0

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

@@ -11,7 +11,7 @@ import useTypedSelector from '../../hooks/useTypedSelector'
 import {selectAssetsPicked} from '../../modules/assets'
 import {dialogActions} from '../../modules/dialog'
 import {DIALOG_ACTIONS} from '../../modules/dialog/actions'
-import {searchActions, selectHasSearchFacetTag, selectIsSearchFacetTag} from '../../modules/search'
+import {searchActions, selectIsSearchFacetTag} from '../../modules/search'
 
 type Props = {
   actions?: TagActions[]
@@ -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}
@@ -75,12 +77,11 @@ const Tag = (props: Props) => {
   // Redux
   const dispatch = useDispatch()
   const assetsPicked = useTypedSelector(selectAssetsPicked)
-  const hasSearchFacetTag = useTypedSelector(selectHasSearchFacetTag)
   const isSearchFacetTag = useTypedSelector(state => selectIsSearchFacetTag(state, tag?.tag?._id))
 
   // Callbacks
   const handleSearchFacetTagRemove = () => {
-    dispatch(searchActions.facetsRemove({facetName: 'tag'}))
+    dispatch(searchActions.facetsRemoveByTag({tagId: tag.tag._id}))
   }
 
   const handleShowAddTagToAssetsDialog = () => {
@@ -108,7 +109,7 @@ const Tag = (props: Props) => {
       }
     } as SearchFacetInputSearchableProps
 
-    if (hasSearchFacetTag) {
+    if (isSearchFacetTag) {
       dispatch(
         searchActions.facetsUpdate({
           name: 'tag',

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/assets/index.ts

@@ -575,8 +575,11 @@ export const assetsSearchEpic: MyEpic = action$ =>
     ofType(
       searchActions.facetsAdd.type,
       searchActions.facetsClear.type,
-      searchActions.facetsRemove.type,
+      searchActions.facetsRemoveById.type,
+      searchActions.facetsRemoveByName.type,
+      searchActions.facetsRemoveByTag.type,
       searchActions.facetsUpdate.type,
+      searchActions.facetsUpdateById.type,
       searchActions.querySet.type
     ),
     debounceTime(400),
@@ -723,8 +726,11 @@ export const assetsUnpickEpic: MyEpic = action$ =>
       assetsActions.viewSet.type,
       searchActions.facetsAdd.type,
       searchActions.facetsClear.type,
-      searchActions.facetsRemove.type,
+      searchActions.facetsRemoveById.type,
+      searchActions.facetsRemoveByName.type,
+      searchActions.facetsRemoveByTag.type,
       searchActions.facetsUpdate.type,
+      searchActions.facetsUpdateById.type,
       searchActions.querySet.type
     ),
     mergeMap(() => {

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)

package/src/modules/search/index.ts

@@ -1,8 +1,9 @@
-import {createSelector, createSlice, PayloadAction} from '@reduxjs/toolkit'
-import type {MyEpic, SearchFacetInputProps, SearchFacetOperatorType} from '@types'
-import {Selector} from 'react-redux'
+import {PayloadAction, createSelector, createSlice} from '@reduxjs/toolkit'
+import type {MyEpic, SearchFacetInputProps, SearchFacetOperatorType, WithId} from '@types'
 import {empty, of} from 'rxjs'
 import {filter, mergeMap, withLatestFrom} from 'rxjs/operators'
+import {uuid} from '@sanity/uuid'
+
 import {tagsActions} from '../tags'
 import type {RootReducerState} from '../types'
 
@@ -10,7 +11,7 @@ import type {RootReducerState} from '../types'
 // (The main offender is `fieldModifier` which is currently a function)
 
 type SearchState = {
-  facets: SearchFacetInputProps[]
+  facets: WithId<SearchFacetInputProps>[]
   query: string
 }
 
@@ -25,16 +26,32 @@ const searchSlice = createSlice({
   reducers: {
     // Add search facet
     facetsAdd(state, action: PayloadAction<{facet: SearchFacetInputProps}>) {
-      state.facets.push(action.payload.facet)
+      state.facets.push({...action.payload.facet, id: uuid()})
     },
     // Clear all search facets
     facetsClear(state) {
       state.facets = []
     },
     // Remove search facet by name
-    facetsRemove(state, action: PayloadAction<{facetName: string}>) {
+    facetsRemoveByName(state, action: PayloadAction<{facetName: string}>) {
       state.facets = state.facets.filter(facet => facet.name !== action.payload.facetName)
     },
+    // Remove search facet by name
+    facetsRemoveByTag(state, action: PayloadAction<{tagId: string}>) {
+      state.facets = state.facets.filter(
+        facet =>
+          !(
+            facet.name === 'tag' &&
+            facet.type === 'searchable' &&
+            (facet.operatorType === 'references' || facet.operatorType === 'doesNotReference') &&
+            facet.value?.value === action.payload.tagId
+          )
+      )
+    },
+    // Remove search facet by name
+    facetsRemoveById(state, action: PayloadAction<{facetId: string}>) {
+      state.facets = state.facets.filter(facet => facet.id !== action.payload.facetId)
+    },
     // Update an existing search facet
     facetsUpdate(
       state,
@@ -47,8 +64,38 @@ const searchSlice = createSlice({
     ) {
       const {modifier, name, operatorType, value} = action.payload
 
+      const facet = state.facets.find(f => f.name === name)
+
+      if (!facet) {
+        return
+      }
+
+      if (facet.type === 'number' && modifier) {
+        facet.modifier = modifier
+      }
+      if (operatorType) {
+        facet.operatorType = operatorType
+      }
+      if (typeof value !== 'undefined') {
+        facet.value = value
+      }
+
+      state.facets = state.facets.filter(f => f.name !== facet.name || f.id === facet.id)
+    },
+    // Update an existing search facet
+    facetsUpdateById(
+      state,
+      action: PayloadAction<{
+        modifier?: string
+        id: string
+        operatorType?: SearchFacetOperatorType
+        value?: any // TODO: type correctly
+      }>
+    ) {
+      const {modifier, id, operatorType, value} = action.payload
+
       state.facets.forEach((facet, index) => {
-        if (facet.name === name) {
+        if (facet.id === id) {
           if (facet.type === 'number' && modifier) {
             facet.modifier = modifier
           }
@@ -100,33 +147,19 @@ export const searchFacetTagUpdateEpic: MyEpic = (action$, state$) =>
   )
 
 // Selectors
-
-export const selectHasSearchFacetTag: Selector<RootReducerState, boolean> = createSelector(
-  (state: RootReducerState) => state.search.facets,
-  searchFacets => !!searchFacets?.find(facet => facet.name === 'tag')
-)
-
 export const selectIsSearchFacetTag = createSelector(
   [
-    (state: RootReducerState) => state.tags.byIds,
     (state: RootReducerState) => state.search.facets,
     (_state: RootReducerState, tagId: string) => tagId
   ],
-  (tagsByIds, searchFacets, tagId) => {
-    const searchFacet = searchFacets?.find(facet => facet.name === 'tag')
-
-    if (searchFacet?.type === 'searchable') {
-      const searchFacetTagId = searchFacet.value?.value
-      if (searchFacetTagId) {
-        return (
-          tagsByIds[searchFacetTagId]?.tag?._id === tagId &&
-          searchFacet?.operatorType === 'references'
-        )
-      }
-    }
-
-    return false
-  }
+  (searchFacets, tagId) =>
+    searchFacets.some(
+      facet =>
+        facet.name === 'tag' &&
+        facet.type === 'searchable' &&
+        (facet.operatorType === 'references' || facet.operatorType === 'doesNotReference') &&
+        facet.value?.value === tagId
+    )
 )
 
 export const searchActions = searchSlice.actions

package/src/types/index.ts

@@ -330,3 +330,7 @@ export type UploadItem = {
   size: number
   status: 'complete' | 'queued' | 'uploading'
 }
+
+export type WithId<T extends SearchFacetInputProps> = T & {
+  id: string
+}