sanity-plugin-media 4.3.0 → 4.3.2

package/dist/index.mjs

@@ -1,8 +1,9 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useClient, useColorSchemeValue, useSchema, Preview, useDocumentStore, WithReferringDocuments, useFormValue, definePlugin } from "sanity";
 import { ThLargeIcon, ThListIcon, SortIcon, CloseIcon, SelectIcon, AddIcon, SearchIcon, PlugIcon, ClipboardIcon, DownloadIcon, ChevronDownIcon, ErrorOutlineIcon, WarningOutlineIcon, EditIcon, ArrowUpIcon, ArrowDownIcon, TrashIcon, ComposeIcon, Icon, UploadIcon, WarningFilledIcon, CheckmarkCircleIcon, ChevronUpIcon, ImageIcon } from "@sanity/icons";
+import { useClient, useColorSchemeValue, useSchema, Preview, useDocumentStore, WithReferringDocuments, useFormValue, definePlugin } from "sanity";
 import { Inline, Button, usePortal, MenuButton, Menu as Menu$2, MenuItem, MenuDivider, Box, studioTheme, rem, Flex, Label, Text, TextInput, Card, MenuGroup, useMediaIndex, Tooltip, Switch, Popover, Stack, Dialog as Dialog$1, TextArea, TabList, Tab, TabPanel, Container as Container$2, Spinner, Checkbox, Grid, useToast, PortalProvider, useLayer, Portal } from "@sanity/ui";
 import { useRef, useCallback, useEffect, createContext, useContext, useMemo, useState, forwardRef, memo, Component } from "react";
+import { isHotkey } from "is-hotkey-esm";
 import { css, createGlobalStyle, styled } from "styled-components";
 import { useSelector, useDispatch, Provider } from "react-redux";
 import { createAction, createSlice, isAnyOf, createSelector, combineReducers, configureStore } from "@reduxjs/toolkit";
@@ -17,9 +18,9 @@ import { useNProgress } from "@tanem/react-nprogress";
 import { hues, white } from "@sanity/color";
 import Select, { components } from "react-select";
 import { Virtuoso, VirtuosoGrid, GroupedVirtuoso } from "react-virtuoso";
-import { zodResolver } from "@hookform/resolvers/zod";
 import { Controller, useForm } from "react-hook-form";
 import * as z from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { format, formatRelative } from "date-fns";
 import filesize from "filesize";
 import copy from "copy-to-clipboard";
@@ -27,143 +28,6 @@ import { useIntentLink } from "sanity/router";
 import { FileIcon as FileIcon$1, defaultStyles } from "react-file-icon";
 import CreatableSelect from "react-select/creatable";
 import { useDropzone } from "react-dropzone";
-function getDefaultExportFromCjs(x) {
-  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
-}
-var lib = {}, hasRequiredLib;
-function requireLib() {
-  if (hasRequiredLib) return lib;
-  hasRequiredLib = 1, Object.defineProperty(lib, "__esModule", {
-    value: !0
-  });
-  for (var IS_MAC = typeof window < "u" && /Mac|iPod|iPhone|iPad/.test(window.navigator.platform), MODIFIERS = {
-    alt: "altKey",
-    control: "ctrlKey",
-    meta: "metaKey",
-    shift: "shiftKey"
-  }, ALIASES = {
-    add: "+",
-    break: "pause",
-    cmd: "meta",
-    command: "meta",
-    ctl: "control",
-    ctrl: "control",
-    del: "delete",
-    down: "arrowdown",
-    esc: "escape",
-    ins: "insert",
-    left: "arrowleft",
-    mod: IS_MAC ? "meta" : "control",
-    opt: "alt",
-    option: "alt",
-    return: "enter",
-    right: "arrowright",
-    space: " ",
-    spacebar: " ",
-    up: "arrowup",
-    win: "meta",
-    windows: "meta"
-  }, CODES = {
-    backspace: 8,
-    tab: 9,
-    enter: 13,
-    shift: 16,
-    control: 17,
-    alt: 18,
-    pause: 19,
-    capslock: 20,
-    escape: 27,
-    " ": 32,
-    pageup: 33,
-    pagedown: 34,
-    end: 35,
-    home: 36,
-    arrowleft: 37,
-    arrowup: 38,
-    arrowright: 39,
-    arrowdown: 40,
-    insert: 45,
-    delete: 46,
-    meta: 91,
-    numlock: 144,
-    scrolllock: 145,
-    ";": 186,
-    "=": 187,
-    ",": 188,
-    "-": 189,
-    ".": 190,
-    "/": 191,
-    "`": 192,
-    "[": 219,
-    "\\": 220,
-    "]": 221,
-    "'": 222
-  }, f = 1; f < 20; f++)
-    CODES["f" + f] = 111 + f;
-  function isHotkey2(hotkey, options, event) {
-    options && !("byKey" in options) && (event = options, options = null), Array.isArray(hotkey) || (hotkey = [hotkey]);
-    var array = hotkey.map(function(string) {
-      return parseHotkey(string, options);
-    }), check = function(e) {
-      return array.some(function(object) {
-        return compareHotkey(object, e);
-      });
-    }, ret = event == null ? check : check(event);
-    return ret;
-  }
-  function isCodeHotkey(hotkey, event) {
-    return isHotkey2(hotkey, event);
-  }
-  function isKeyHotkey(hotkey, event) {
-    return isHotkey2(hotkey, { byKey: !0 }, event);
-  }
-  function parseHotkey(hotkey, options) {
-    var byKey = options && options.byKey, ret = {};
-    hotkey = hotkey.replace("++", "+add");
-    var values = hotkey.split("+"), length = values.length;
-    for (var k in MODIFIERS)
-      ret[MODIFIERS[k]] = !1;
-    var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
-    try {
-      for (var _iterator = values[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
-        var value = _step.value, optional = value.endsWith("?") && value.length > 1;
-        optional && (value = value.slice(0, -1));
-        var name = toKeyName(value), modifier = MODIFIERS[name];
-        if (value.length > 1 && !modifier && !ALIASES[value] && !CODES[name])
-          throw new TypeError('Unknown modifier: "' + value + '"');
-        (length === 1 || !modifier) && (byKey ? ret.key = name : ret.which = toKeyCode(value)), modifier && (ret[modifier] = optional ? null : !0);
-      }
-    } catch (err) {
-      _didIteratorError = !0, _iteratorError = err;
-    } finally {
-      try {
-        !_iteratorNormalCompletion && _iterator.return && _iterator.return();
-      } finally {
-        if (_didIteratorError)
-          throw _iteratorError;
-      }
-    }
-    return ret;
-  }
-  function compareHotkey(object, event) {
-    for (var key in object) {
-      var expected = object[key], actual = void 0;
-      if (expected != null && (key === "key" && event.key != null ? actual = event.key.toLowerCase() : key === "which" ? actual = expected === 91 && event.which === 93 ? 91 : event.which : actual = event[key], !(actual == null && expected === !1) && actual !== expected))
-        return !1;
-    }
-    return !0;
-  }
-  function toKeyCode(name) {
-    name = toKeyName(name);
-    var code = CODES[name] || name.toUpperCase().charCodeAt(0);
-    return code;
-  }
-  function toKeyName(name) {
-    return name = name.toLowerCase(), name = ALIASES[name] || name, name;
-  }
-  return lib.default = isHotkey2, lib.isHotkey = isHotkey2, lib.isCodeHotkey = isCodeHotkey, lib.isKeyHotkey = isKeyHotkey, lib.parseHotkey = parseHotkey, lib.compareHotkey = compareHotkey, lib.toKeyCode = toKeyCode, lib.toKeyName = toKeyName, lib;
-}
-var libExports = requireLib(), isHotkey = /* @__PURE__ */ getDefaultExportFromCjs(libExports);
 const useKeyPress = (hotkey, onPress) => {
   const keyPressed = useRef(!1), downHandler = useCallback(
     (e) => {
@@ -2708,7 +2572,13 @@ const imageDprUrl = (asset, options) => {
 }, sanitizeFormData = (formData) => Object.keys(formData).reduce((acc, key) => {
   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 }) => {
+}, {}), isFileAsset = (asset) => asset._type === "sanity.fileAsset", isImageAsset = (asset) => asset._type === "sanity.imageAsset";
+function zodFormResolver(schema) {
+  return zodResolver(
+    schema
+  );
+}
+const getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asset.metadata.dimensions.height}px`, ButtonAssetCopy = ({ disabled, url }) => {
   const popoverProps = usePortalPopoverProps(), refPopoverTimeout = useRef(null), [popoverVisible, setPopoverVisible] = useState(!1), handleClick = () => {
     refPopoverTimeout.current && clearTimeout(refPopoverTimeout.current), setPopoverVisible(!0), copy(url), refPopoverTimeout.current = setTimeout(() => {
       setPopoverVisible(!1);
@@ -2893,12 +2763,17 @@ const imageDprUrl = (asset, options) => {
   object-fit: contain;
 
   ${(props) => props.$showCheckerboard && css`
-      background-image: linear-gradient(45deg, var(--checkerboard-color) 25%, transparent 25%),
+      background-image:
+        linear-gradient(45deg, var(--checkerboard-color) 25%, transparent 25%),
         linear-gradient(-45deg, var(--checkerboard-color) 25%, transparent 25%),
         linear-gradient(45deg, transparent 75%, var(--checkerboard-color) 75%),
         linear-gradient(-45deg, transparent 75%, var(--checkerboard-color) 75%);
       background-size: 20px 20px;
-      background-position: 0 0, 0 10px, 10px -10px, -10px 0;
+      background-position:
+        0 0,
+        0 10px,
+        10px -10px,
+        -10px 0;
     `}
 `, { radius: themeRadius, space: themeSpace } = studioTheme, reactSelectStyles = (scheme) => ({
   control: (styles, { isFocused }) => {
@@ -3332,7 +3207,7 @@ const DialogAssetEdit = (props) => {
   } = useForm({
     defaultValues: generateDefaultValues(assetItem?.asset),
     mode: "onChange",
-    resolver: zodResolver(getAssetFormSchema(locales))
+    resolver: zodFormResolver(getAssetFormSchema(locales))
   }), formUpdating = !assetItem || assetItem?.updating, handleClose = useCallback(() => {
     dispatch(dialogActions.remove({ id }));
   }, [dispatch, id]), handleDelete = useCallback(() => {
@@ -3650,7 +3525,7 @@ const DialogAssetEdit = (props) => {
       name: ""
     },
     mode: "onChange",
-    resolver: zodResolver(tagFormSchema)
+    resolver: zodFormResolver(tagFormSchema)
   }), formUpdating = creating, handleClose = () => {
     dispatch(dialogActions.clear());
   }, onSubmit = (formData) => {
@@ -3700,7 +3575,7 @@ const DialogAssetEdit = (props) => {
   } = useForm({
     defaultValues: generateDefaultValues(tagItem?.tag),
     mode: "onChange",
-    resolver: zodResolver(tagFormSchema)
+    resolver: zodFormResolver(tagFormSchema)
   }), formUpdating = !tagItem || tagItem?.updating, handleClose = () => {
     dispatch(dialogActions.remove({ id }));
   }, onSubmit = (formData) => {
@@ -4144,38 +4019,40 @@ const DialogAssetEdit = (props) => {
   overflow: hidden;
   position: relative;
   width: 100%;
-`, CardContainer = styled(Flex)(
-  ({ $picked, theme, $updating }) => css`
-      border: 1px solid transparent;
-      height: 100%;
-      pointer-events: ${$updating ? "none" : "auto"};
-      position: relative;
-      transition: all 300ms;
-      user-select: none;
-      width: 100%;
+`, CardContainer = styled(Flex)(({
+  $picked,
+  theme,
+  $updating
+}) => css`
+    border: 1px solid transparent;
+    height: 100%;
+    pointer-events: ${$updating ? "none" : "auto"};
+    position: relative;
+    transition: all 300ms;
+    user-select: none;
+    width: 100%;
 
-      border: ${$picked ? `1px solid ${theme.sanity.color.spot.orange} !important` : "1px solid inherit"};
+    border: ${$picked ? `1px solid ${theme.sanity.color.spot.orange} !important` : "1px solid inherit"};
 
-      ${!$updating && css`
-        @media (hover: hover) and (pointer: fine) {
-          &:hover {
-            border: 1px solid var(--card-border-color);
-          }
-        }
-      `}
-    `
-), ContextActionContainer$2 = styled(Flex)(
-  ({ $scheme }) => css`
-      cursor: pointer;
-      height: ${PANEL_HEIGHT}px;
-      transition: all 300ms;
+    ${!$updating && css`
       @media (hover: hover) and (pointer: fine) {
         &:hover {
-          background: ${getSchemeColor($scheme, "bg")};
+          border: 1px solid var(--card-border-color);
         }
       }
-    `
-), StyledWarningOutlineIcon = styled(WarningFilledIcon)(({ theme }) => ({
+    `}
+  `), ContextActionContainer$2 = styled(Flex)(({
+  $scheme
+}) => css`
+    cursor: pointer;
+    height: ${PANEL_HEIGHT}px;
+    transition: all 300ms;
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background: ${getSchemeColor($scheme, "bg")};
+      }
+    }
+  `), StyledWarningOutlineIcon = styled(WarningFilledIcon)(({ theme }) => ({
   color: theme.sanity.color.spot.red
 })), CardAsset$1 = (props) => {
   const { id, selected } = props, scheme = useColorSchemeValue(), shiftPressed = useKeyPress("shift"), dispatch = 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();
@@ -4734,16 +4611,16 @@ const CardWrapper = styled(Flex)`
       ]
     }
   ) });
-}, ContextActionContainer$1 = styled(Flex)(
-  ({ $scheme }) => css`
-      cursor: pointer;
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          background: ${getSchemeColor($scheme, "bg")};
-        }
+}, ContextActionContainer$1 = styled(Flex)(({
+  $scheme
+}) => css`
+    cursor: pointer;
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background: ${getSchemeColor($scheme, "bg")};
       }
-    `
-), TableHeader = () => {
+    }
+  `), TableHeader = () => {
   const scheme = useColorSchemeValue(), dispatch = useDispatch(), fetching = useTypedSelector((state) => state.assets.fetching), itemsLength = useTypedSelector(selectAssetsLength), numPickedAssets = useTypedSelector(selectAssetsPickedLength), mediaIndex = useMediaIndex(), { onSelect } = useAssetSourceActions(), allSelected = numPickedAssets === itemsLength, handleContextActionClick = (e) => {
     e.stopPropagation(), dispatch(allSelected ? assetsActions.pickClear() : assetsActions.pickAll());
   };
@@ -4818,16 +4695,16 @@ const CardWrapper = styled(Flex)`
         }
       }
     `}
-  `), ContextActionContainer = styled(Flex)(
-  ({ $scheme }) => css`
-      cursor: pointer;
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          background: ${getSchemeColor($scheme, "bg2")};
-        }
+  `), ContextActionContainer = styled(Flex)(({
+  $scheme
+}) => css`
+    cursor: pointer;
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background: ${getSchemeColor($scheme, "bg2")};
       }
-    `
-), StyledWarningIcon = styled(WarningFilledIcon)(({ theme }) => ({
+    }
+  `), StyledWarningIcon = styled(WarningFilledIcon)(({ theme }) => ({
   color: theme.sanity.color.spot.red
 })), TableRowAsset$1 = (props) => {
   const { id, selected } = props, scheme = useColorSchemeValue(), shiftPressed = useKeyPress("shift"), [referenceCountVisible, setReferenceCountVisible] = useState(!1), refCountVisibleTimeout = useRef(null), dispatch = useDispatch(), lastPicked = useTypedSelector((state) => state.assets.lastPicked), item = useTypedSelector((state) => selectAssetById(state, id)), mediaIndex = useMediaIndex(), asset = item?.asset, error = item?.error, isOpaque = item?.asset?.metadata?.isOpaque, picked = item?.picked, updating = item?.updating, { onSelect } = useAssetSourceActions(), handleContextActionClick = useCallback(
@@ -5259,24 +5136,15 @@ const TableRowUpload = (props) => {
       ] })
     }
   );
-}, initialState$1 = {
-  assets: [],
-  document: void 0,
-  documentAssetIds: []
-}, selectedSlice = createSlice({
-  name: "selected",
-  initialState: initialState$1,
-  reducers: {}
-});
-var selectedReducer = selectedSlice.reducer;
+};
 function messageFromGenericErrorPayload(payload) {
   return !payload || typeof payload != "object" ? "Unknown error" : "error" in payload && payload.error && typeof payload.error == "object" && payload.error !== null && "message" in payload.error ? String(payload.error.message) : "message" in payload && typeof payload.message == "string" ? String(payload.message) : "Unknown error";
 }
-const initialState = {
+const initialState$1 = {
   items: []
 }, notificationsSlice = createSlice({
   name: "notifications",
-  initialState,
+  initialState: initialState$1,
   reducers: {
     add(state, action) {
       const { asset, status, title } = action.payload;
@@ -5377,6 +5245,16 @@ const initialState = {
   mergeMap(() => of(notificationsSlice.actions.add({ status: "info", title: "Tag updated" })))
 ), notificationsActions = { ...notificationsSlice.actions };
 var notificationsReducer = notificationsSlice.reducer;
+const initialState = {
+  assets: [],
+  document: void 0,
+  documentAssetIds: []
+}, selectedSlice = createSlice({
+  name: "selected",
+  initialState,
+  reducers: {}
+});
+var selectedReducer = selectedSlice.reducer;
 const rootEpic = combineEpics(
   assetsDeleteEpic,
   assetsFetchEpic,
@@ -5782,7 +5660,6 @@ const plugin = {
 }, tool = {
   ...plugin,
   component: Tool,
-  // @ts-expect-error TS doesn't know about this internal field see https://github.com/sanity-io/sanity/pull/7980
   __internalApplicationType: "sanity/media"
 }, media = definePlugin((options) => ({
   name: "media",
@@ -5859,7 +5736,11 @@ function AutoTagInput(props) {
     }).catch((err) => {
       console.error("[sanity-plugin-media] Failed to apply auto-tags:", err);
       const label = mediaTags.length === 1 ? "tag" : "tags";
-      toast.push({ closable: !0, status: "error", title: `Failed to apply the media ${label} ${mediaTags.join(", ")}` });
+      toast.push({
+        closable: !0,
+        status: "error",
+        title: `Failed to apply the media ${label} ${mediaTags.join(", ")}`
+      });
     });
   }, [currentAssetRef, mediaTags, client, createTagsOnUpload]), renderDefault(props);
 }