sanity-plugin-media 2.4.1 → 2.4.2-canary.0

package/dist/index.js

@@ -1808,7 +1808,7 @@ const Container$1 = styledComponents.styled(ui.Box)(({ scheme, theme }) => style
     background: ${getSchemeColor(scheme, "bg")};
     border-radius: ${ui.rem(theme.sanity.radius[2])};
   `), SearchFacet = (props) => {
-  const { children, facet } = props, { scheme } = sanity.useColorScheme(), dispatch = reactRedux.useDispatch(), handleClose = () => {
+  const { children, facet } = props, scheme = sanity.useColorSchemeValue(), dispatch = reactRedux.useDispatch(), handleClose = () => {
     dispatch(searchActions.facetsRemoveById({ facetId: facet.id }));
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2113,16 +2113,22 @@ const Container$1 = styledComponents.styled(ui.Box)(({ scheme, theme }) => style
     margin: 0,
     padding: 0
   })
-}), ClearIndicator = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.ClearIndicator, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
-  ui.Box,
-  {
-    paddingRight: 1,
-    style: {
-      transform: "scale(0.85)"
-    },
-    children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 0, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {}) })
-  }
-) }), Menu$1 = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.Menu, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { radius: 1, shadow: 2, children: props.children }) }), MenuList$1 = (props) => {
+}), ClearIndicator = (props) => (
+  // @ts-expect-error - fix typings later
+  /* @__PURE__ */ jsxRuntime.jsx(Select.components.ClearIndicator, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Box,
+    {
+      paddingRight: 1,
+      style: {
+        transform: "scale(0.85)"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 0, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {}) })
+    }
+  ) })
+), Menu$1 = (props) => (
+  // @ts-expect-error - fix typings later
+  /* @__PURE__ */ jsxRuntime.jsx(Select.components.Menu, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { radius: 1, shadow: 2, children: props.children }) })
+), MenuList$1 = (props) => {
   const { children } = props, MAX_ROWS = 5, OPTION_HEIGHT = 33;
   if (Array.isArray(children)) {
     const height = children.length > MAX_ROWS ? OPTION_HEIGHT * MAX_ROWS : children.length * OPTION_HEIGHT;
@@ -2140,7 +2146,10 @@ const Container$1 = styledComponents.styled(ui.Box)(({ scheme, theme }) => style
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Select.components.MenuList, { ...props, children });
-}, NoOptionsMessage = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.NoOptionsMessage, { ...props, children: props.children }), Option$1 = (props) => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Select.components.Option, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingY: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, style: { color: "inherit" }, textOverflow: "ellipsis", children: props.children }) }) }) }), SingleValue = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.SingleValue, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, textOverflow: "ellipsis", children: props.children }) }), reactSelectComponents$1 = {
+}, NoOptionsMessage = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.NoOptionsMessage, { ...props, children: props.children }), Option$1 = (props) => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Select.components.Option, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingY: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, style: { color: "inherit" }, textOverflow: "ellipsis", children: props.children }) }) }) }), SingleValue = (props) => (
+  // @ts-expect-error - fix typings later
+  /* @__PURE__ */ jsxRuntime.jsx(Select.components.SingleValue, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, textOverflow: "ellipsis", children: props.children }) })
+), reactSelectComponents$1 = {
   ClearIndicator,
   DropdownIndicator: null,
   IndicatorSeparator: null,
@@ -2150,7 +2159,7 @@ const Container$1 = styledComponents.styled(ui.Box)(({ scheme, theme }) => style
   Option: Option$1,
   SingleValue
 }, SearchFacetTags = ({ facet }) => {
-  const { scheme } = sanity.useColorScheme(), dispatch = reactRedux.useDispatch(), tags = useTypedSelector((state) => selectTags(state)), tagsFetching = useTypedSelector((state) => state.tags.fetching), allTagOptions = getTagSelectOptions(tags), popoverProps = usePortalPopoverProps(), handleChange = (option) => {
+  const scheme = sanity.useColorSchemeValue(), dispatch = reactRedux.useDispatch(), tags = useTypedSelector((state) => selectTags(state)), tagsFetching = useTypedSelector((state) => state.tags.fetching), allTagOptions = getTagSelectOptions(tags), popoverProps = usePortalPopoverProps(), handleChange = (option) => {
     dispatch(
       searchActions.facetsUpdateById({
         id: facet.id,
@@ -2551,7 +2560,7 @@ const imageDprUrl = (asset, options) => {
   const val = formData[key];
   return typeof val == "object" && val !== null && val.constructor !== Array ? acc[key] = sanitizeFormData(val) : val === "" || typeof val > "u" || val?.length === 0 ? acc[key] = null : typeof val == "string" && val ? acc[key] = formData[key].trim() : acc[key] = formData[key], acc;
 }, {}), isFileAsset = (asset) => asset._type === "sanity.fileAsset", isImageAsset = (asset) => asset._type === "sanity.imageAsset", getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asset.metadata.dimensions.height}px`, ButtonAssetCopy = ({ disabled, url }) => {
-  const popoverProps = usePortalPopoverProps(), refPopoverTimeout = react.useRef(), [popoverVisible, setPopoverVisible] = react.useState(!1), handleClick = () => {
+  const popoverProps = usePortalPopoverProps(), refPopoverTimeout = react.useRef(null), [popoverVisible, setPopoverVisible] = react.useState(!1), handleClick = () => {
     refPopoverTimeout.current && clearTimeout(refPopoverTimeout.current), setPopoverVisible(!0), copy__default.default(url), refPopoverTimeout.current = setTimeout(() => {
       setPopoverVisible(!1);
     }, 1250);
@@ -2787,7 +2796,13 @@ const imageDprUrl = (asset, options) => {
     margin: 0,
     padding: 0
   })
-}), DropdownIndicator = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.DropdownIndicator, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingX: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {}) }) }) }), Menu = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.Menu, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { radius: 1, shadow: 2, children: props.children }) }), MenuList = (props) => {
+}), DropdownIndicator = (props) => (
+  // @ts-expect-error - fix typings later
+  /* @__PURE__ */ jsxRuntime.jsx(Select.components.DropdownIndicator, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingX: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {}) }) }) })
+), Menu = (props) => (
+  // @ts-expect-error - fix typings later
+  /* @__PURE__ */ jsxRuntime.jsx(Select.components.Menu, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { radius: 1, shadow: 2, children: props.children }) })
+), MenuList = (props) => {
   const { children } = props, MAX_ROWS = 5, OPTION_HEIGHT = 37;
   if (Array.isArray(children)) {
     const height = children.length > MAX_ROWS ? OPTION_HEIGHT * MAX_ROWS : children.length * OPTION_HEIGHT;
@@ -2805,7 +2820,10 @@ const imageDprUrl = (asset, options) => {
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Select.components.MenuList, { ...props, children });
-}, MultiValueLabel = (props) => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 2, paddingRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, weight: "medium", children: /* @__PURE__ */ jsxRuntime.jsx(Select.components.MultiValueLabel, { ...props }) }) }), MultiValueRemove = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.MultiValueRemove, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, { color: "#1f2123" }) }), Option = (props) => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingX: 1, paddingY: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Select.components.Option, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", children: [
+}, MultiValueLabel = (props) => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 2, paddingRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, weight: "medium", children: /* @__PURE__ */ jsxRuntime.jsx(Select.components.MultiValueLabel, { ...props }) }) }), MultiValueRemove = (props) => (
+  // @ts-expect-error - fix typings later
+  /* @__PURE__ */ jsxRuntime.jsx(Select.components.MultiValueRemove, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, { color: "#1f2123" }) })
+), Option = (props) => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingX: 1, paddingY: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Select.components.Option, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", children: [
   props.data.__isNew__ && /* @__PURE__ */ jsxRuntime.jsx(icons.AddIcon, { style: { marginRight: "3px" } }),
   props.children
 ] }) }) }), reactSelectComponents = {
@@ -2851,7 +2869,7 @@ const imageDprUrl = (asset, options) => {
     options,
     placeholder,
     value
-  } = props, { scheme } = sanity.useColorScheme(), creating = useTypedSelector((state) => state.tags.creating), tagsFetching = useTypedSelector((state) => state.tags.fetching);
+  } = props, scheme = sanity.useColorSchemeValue(), creating = useTypedSelector((state) => state.tags.creating), tagsFetching = useTypedSelector((state) => state.tags.fetching);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ui.Box,
     {
@@ -2977,7 +2995,7 @@ const imageDprUrl = (asset, options) => {
   const {
     children,
     dialog: { assetId, id, lastCreatedTag, lastRemovedTagIds }
-  } = props, client = useVersionedClient(), { scheme } = sanity.useColorScheme(), documentStore = sanity.useDocumentStore(), dispatch = reactRedux.useDispatch(), assetItem = useTypedSelector((state) => selectAssetById(state, String(assetId))), tags = useTypedSelector(selectTags), assetUpdatedPrev = react.useRef(void 0), [assetSnapshot, setAssetSnapshot] = react.useState(assetItem?.asset), [tabSection, setTabSection] = react.useState("details"), currentAsset = assetItem ? assetItem?.asset : assetSnapshot, allTagOptions = getTagSelectOptions(tags), assetTagOptions = useTypedSelector(selectTagSelectOptions(currentAsset)), { creditLine } = useToolOptions(), generateDefaultValues = react.useCallback(
+  } = props, client = useVersionedClient(), scheme = sanity.useColorSchemeValue(), documentStore = sanity.useDocumentStore(), dispatch = reactRedux.useDispatch(), assetItem = useTypedSelector((state) => selectAssetById(state, String(assetId))), tags = useTypedSelector(selectTags), assetUpdatedPrev = react.useRef(void 0), [assetSnapshot, setAssetSnapshot] = react.useState(assetItem?.asset), [tabSection, setTabSection] = react.useState("details"), currentAsset = assetItem ? assetItem?.asset : assetSnapshot, allTagOptions = getTagSelectOptions(tags), assetTagOptions = useTypedSelector(selectTagSelectOptions(currentAsset)), { creditLine } = useToolOptions(), generateDefaultValues = react.useCallback(
     (asset) => ({
       altText: asset?.altText || "",
       creditLine: asset?.creditLine || "",
@@ -3629,7 +3647,7 @@ const imageDprUrl = (asset, options) => {
     }
   );
 }, TagViewHeader = ({ allowCreate, light, title }) => {
-  const { scheme } = sanity.useColorScheme(), dispatch = reactRedux.useDispatch(), tagsCreating = useTypedSelector((state) => state.tags.creating), tagsFetching = useTypedSelector((state) => state.tags.fetching), handleTagCreate = () => {
+  const scheme = sanity.useColorSchemeValue(), dispatch = reactRedux.useDispatch(), tagsCreating = useTypedSelector((state) => state.tags.creating), tagsFetching = useTypedSelector((state) => state.tags.fetching), handleTagCreate = () => {
     dispatch(DIALOG_ACTIONS.showTagCreate());
   };
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3829,7 +3847,7 @@ const imageDprUrl = (asset, options) => {
 ), StyledWarningOutlineIcon = styledComponents.styled(icons.WarningFilledIcon)(({ theme }) => ({
   color: theme.sanity.color.spot.red
 })), CardAsset = (props) => {
-  const { id, selected } = props, { scheme } = sanity.useColorScheme(), shiftPressed = useKeyPress("shift"), dispatch = reactRedux.useDispatch(), lastPicked = useTypedSelector((state) => state.assets.lastPicked), item = useTypedSelector((state) => selectAssetById(state, id)), asset = item?.asset, error = item?.error, isOpaque = item?.asset?.metadata?.isOpaque, picked = item?.picked, updating = item?.updating, { onSelect } = useAssetSourceActions();
+  const { id, selected } = props, scheme = sanity.useColorSchemeValue(), shiftPressed = useKeyPress("shift"), dispatch = reactRedux.useDispatch(), lastPicked = useTypedSelector((state) => state.assets.lastPicked), item = useTypedSelector((state) => selectAssetById(state, id)), asset = item?.asset, error = item?.error, isOpaque = item?.asset?.metadata?.isOpaque, picked = item?.picked, updating = item?.updating, { onSelect } = useAssetSourceActions();
   if (!asset)
     return null;
   const handleAssetClick = (e) => {
@@ -4214,7 +4232,7 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
   position: relative;
   width: 100%;
 `, CardUpload = (props) => {
-  const { id } = props, { scheme } = sanity.useColorScheme(), dispatch = reactRedux.useDispatch(), item = useTypedSelector((state) => selectUploadById(state, id));
+  const { id } = props, scheme = sanity.useColorSchemeValue(), dispatch = reactRedux.useDispatch(), item = useTypedSelector((state) => selectUploadById(state, id));
   if (!item)
     return null;
   const fileSize = filesize__default.default(item.size, { base: 10, round: 0 }), percentLoaded = Math.round(item.percent || 0), isComplete = item.status === "complete", isUploading = item.status === "uploading", isQueued = item.status === "queued";
@@ -4333,7 +4351,6 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
       computeItemKey: (index) => items[index]?.id,
       components: {
         Item: ItemContainer,
-        // @ts-expect-error - fix typings later
         List: ListContainer
       },
       endReached: onLoadMore,
@@ -4390,7 +4407,7 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
       }
     `
 ), TableHeader = () => {
-  const { scheme } = sanity.useColorScheme(), dispatch = reactRedux.useDispatch(), fetching = useTypedSelector((state) => state.assets.fetching), itemsLength = useTypedSelector(selectAssetsLength), numPickedAssets = useTypedSelector(selectAssetsPickedLength), mediaIndex = ui.useMediaIndex(), { onSelect } = useAssetSourceActions(), allSelected = numPickedAssets === itemsLength, handleContextActionClick = (e) => {
+  const scheme = sanity.useColorSchemeValue(), dispatch = reactRedux.useDispatch(), fetching = useTypedSelector((state) => state.assets.fetching), itemsLength = useTypedSelector(selectAssetsLength), numPickedAssets = useTypedSelector(selectAssetsPickedLength), mediaIndex = ui.useMediaIndex(), { onSelect } = useAssetSourceActions(), allSelected = numPickedAssets === itemsLength, handleContextActionClick = (e) => {
     e.stopPropagation(), dispatch(allSelected ? assetsActions.pickClear() : assetsActions.pickAll());
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4481,7 +4498,7 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
   `), StyledWarningIcon = styledComponents.styled(icons.WarningFilledIcon)(({ theme }) => ({
   color: theme.sanity.color.spot.red
 })), TableRowAsset = (props) => {
-  const { id, selected } = props, { scheme } = sanity.useColorScheme(), shiftPressed = useKeyPress("shift"), [referenceCountVisible, setReferenceCountVisible] = react.useState(!1), refCountVisibleTimeout = react.useRef(), dispatch = reactRedux.useDispatch(), lastPicked = useTypedSelector((state) => state.assets.lastPicked), item = useTypedSelector((state) => selectAssetById(state, id)), mediaIndex = ui.useMediaIndex(), asset = item?.asset, error = item?.error, isOpaque = item?.asset?.metadata?.isOpaque, picked = item?.picked, updating = item?.updating, { onSelect } = useAssetSourceActions(), handleContextActionClick = react.useCallback(
+  const { id, selected } = props, scheme = sanity.useColorSchemeValue(), shiftPressed = useKeyPress("shift"), [referenceCountVisible, setReferenceCountVisible] = react.useState(!1), refCountVisibleTimeout = react.useRef(null), dispatch = reactRedux.useDispatch(), lastPicked = useTypedSelector((state) => state.assets.lastPicked), item = useTypedSelector((state) => selectAssetById(state, id)), mediaIndex = ui.useMediaIndex(), asset = item?.asset, error = item?.error, isOpaque = item?.asset?.metadata?.isOpaque, picked = item?.picked, updating = item?.updating, { onSelect } = useAssetSourceActions(), handleContextActionClick = react.useCallback(
     (e) => {
       e.stopPropagation(), asset && (onSelect ? dispatch(dialogActions.showAssetEdit({ assetId: asset._id })) : shiftPressed.current && !picked ? dispatch(assetsActions.pickRange({ startId: lastPicked || asset._id, endId: asset._id })) : dispatch(assetsActions.pick({ assetId: asset._id, picked: !picked })));
     },
@@ -4707,7 +4724,7 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
 };
 var TableRowAsset$1 = react.memo(TableRowAsset);
 const TableRowUpload = (props) => {
-  const { id } = props, { scheme } = sanity.useColorScheme(), dispatch = reactRedux.useDispatch(), item = useTypedSelector((state) => selectUploadById(state, id)), mediaIndex = ui.useMediaIndex();
+  const { id } = props, scheme = sanity.useColorSchemeValue(), dispatch = reactRedux.useDispatch(), item = useTypedSelector((state) => selectUploadById(state, id)), mediaIndex = ui.useMediaIndex();
   if (!item)
     return null;
   const fileSize = filesize__default.default(item.size, { base: 10, round: 0 }), percentLoaded = Math.round(item.percent || 0), isComplete = item.status === "complete", isUploading = item.status === "uploading", isQueued = item.status === "queued";
@@ -4852,7 +4869,7 @@ const TableRowUpload = (props) => {
     }
   }, [items.length]), null;
 }, PickedBar = () => {
-  const { scheme } = sanity.useColorScheme(), dispatch = reactRedux.useDispatch(), assetsPicked = useTypedSelector(selectAssetsPicked), handlePickClear = () => {
+  const scheme = sanity.useColorSchemeValue(), dispatch = reactRedux.useDispatch(), assetsPicked = useTypedSelector(selectAssetsPicked), handlePickClear = () => {
     dispatch(assetsActions.pickClear());
   }, handleDeletePicked = () => {
     dispatch(dialogActions.showConfirmDeleteAssets({ assets: assetsPicked }));
@@ -5258,7 +5275,7 @@ const UploadDropzone = (props) => {
     ] }) })
   ] }) });
 }, Browser = (props) => {
-  const client = useVersionedClient(), { scheme } = sanity.useColorScheme();
+  const client = useVersionedClient(), scheme = sanity.useColorSchemeValue();
   return /* @__PURE__ */ jsxRuntime.jsx(
     ReduxProvider,
     {