sanity-plugin-media 4.3.0 → 4.3.2

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var jsxRuntime = require("react/jsx-runtime"), sanity = require("sanity"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), react = require("react"), styledComponents = require("styled-components"), reactRedux = require("react-redux"), toolkit = require("@reduxjs/toolkit"), pluralize = require("pluralize"), reduxObservable = require("redux-observable"), rxjs = require("rxjs"), operators$1 = require("rxjs/operators"), groq = require("groq"), nanoid = require("nanoid"), uuid = require("@sanity/uuid"), reactNprogress = require("@tanem/react-nprogress"), color = require("@sanity/color"), Select = require("react-select"), reactVirtuoso = require("react-virtuoso"), zod = require("@hookform/resolvers/zod"), reactHookForm = require("react-hook-form"), z = require("zod"), dateFns = require("date-fns"), filesize = require("filesize"), copy = require("copy-to-clipboard"), router = require("sanity/router"), reactFileIcon = require("react-file-icon"), CreatableSelect = require("react-select/creatable"), reactDropzone = require("react-dropzone");
+var jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), sanity = require("sanity"), ui = require("@sanity/ui"), react = require("react"), isHotkeyEsm = require("is-hotkey-esm"), styledComponents = require("styled-components"), reactRedux = require("react-redux"), toolkit = require("@reduxjs/toolkit"), pluralize = require("pluralize"), reduxObservable = require("redux-observable"), rxjs = require("rxjs"), operators$1 = require("rxjs/operators"), groq = require("groq"), nanoid = require("nanoid"), uuid = require("@sanity/uuid"), reactNprogress = require("@tanem/react-nprogress"), color = require("@sanity/color"), Select = require("react-select"), reactVirtuoso = require("react-virtuoso"), reactHookForm = require("react-hook-form"), z = require("zod"), zod = require("@hookform/resolvers/zod"), dateFns = require("date-fns"), filesize = require("filesize"), copy = require("copy-to-clipboard"), router = require("sanity/router"), reactFileIcon = require("react-file-icon"), CreatableSelect = require("react-select/creatable"), reactDropzone = require("react-dropzone");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
@@ -20,147 +20,10 @@ function _interopNamespaceCompat(e) {
   }), n.default = e, Object.freeze(n);
 }
 var pluralize__default = /* @__PURE__ */ _interopDefaultCompat(pluralize), groq__default = /* @__PURE__ */ _interopDefaultCompat(groq), Select__default = /* @__PURE__ */ _interopDefaultCompat(Select), z__namespace = /* @__PURE__ */ _interopNamespaceCompat(z), filesize__default = /* @__PURE__ */ _interopDefaultCompat(filesize), copy__default = /* @__PURE__ */ _interopDefaultCompat(copy), CreatableSelect__default = /* @__PURE__ */ _interopDefaultCompat(CreatableSelect);
-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 = react.useRef(!1), downHandler = react.useCallback(
     (e) => {
-      isHotkey(hotkey, e) && (keyPressed.current = !0, onPress && onPress());
+      isHotkeyEsm.isHotkey(hotkey, e) && (keyPressed.current = !0, onPress && onPress());
     },
     [hotkey, onPress]
   ), upHandler = react.useCallback(() => {
@@ -2701,7 +2564,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 zod.zodResolver(
+    schema
+  );
+}
+const getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asset.metadata.dimensions.height}px`, ButtonAssetCopy = ({ disabled, url }) => {
   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);
@@ -2886,12 +2755,17 @@ const imageDprUrl = (asset, options) => {
   object-fit: contain;
 
   ${(props) => props.$showCheckerboard && styledComponents.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 } = ui.studioTheme, reactSelectStyles = (scheme) => ({
   control: (styles, { isFocused }) => {
@@ -3325,7 +3199,7 @@ const DialogAssetEdit = (props) => {
   } = reactHookForm.useForm({
     defaultValues: generateDefaultValues(assetItem?.asset),
     mode: "onChange",
-    resolver: zod.zodResolver(getAssetFormSchema(locales))
+    resolver: zodFormResolver(getAssetFormSchema(locales))
   }), formUpdating = !assetItem || assetItem?.updating, handleClose = react.useCallback(() => {
     dispatch(dialogActions.remove({ id }));
   }, [dispatch, id]), handleDelete = react.useCallback(() => {
@@ -3643,7 +3517,7 @@ const DialogAssetEdit = (props) => {
       name: ""
     },
     mode: "onChange",
-    resolver: zod.zodResolver(tagFormSchema)
+    resolver: zodFormResolver(tagFormSchema)
   }), formUpdating = creating, handleClose = () => {
     dispatch(dialogActions.clear());
   }, onSubmit = (formData) => {
@@ -3693,7 +3567,7 @@ const DialogAssetEdit = (props) => {
   } = reactHookForm.useForm({
     defaultValues: generateDefaultValues(tagItem?.tag),
     mode: "onChange",
-    resolver: zod.zodResolver(tagFormSchema)
+    resolver: zodFormResolver(tagFormSchema)
   }), formUpdating = !tagItem || tagItem?.updating, handleClose = () => {
     dispatch(dialogActions.remove({ id }));
   }, onSubmit = (formData) => {
@@ -4139,38 +4013,40 @@ const DialogAssetEdit = (props) => {
   overflow: hidden;
   position: relative;
   width: 100%;
-`, CardContainer = styledComponents.styled(ui.Flex)(
-  ({ $picked, theme, $updating }) => styledComponents.css`
-      border: 1px solid transparent;
-      height: 100%;
-      pointer-events: ${$updating ? "none" : "auto"};
-      position: relative;
-      transition: all 300ms;
-      user-select: none;
-      width: 100%;
+`, CardContainer = styledComponents.styled(ui.Flex)(({
+  $picked,
+  theme,
+  $updating
+}) => styledComponents.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 && styledComponents.css`
-        @media (hover: hover) and (pointer: fine) {
-          &:hover {
-            border: 1px solid var(--card-border-color);
-          }
-        }
-      `}
-    `
-), ContextActionContainer$2 = styledComponents.styled(ui.Flex)(
-  ({ $scheme }) => styledComponents.css`
-      cursor: pointer;
-      height: ${PANEL_HEIGHT}px;
-      transition: all 300ms;
+    ${!$updating && styledComponents.css`
       @media (hover: hover) and (pointer: fine) {
         &:hover {
-          background: ${getSchemeColor($scheme, "bg")};
+          border: 1px solid var(--card-border-color);
         }
       }
-    `
-), StyledWarningOutlineIcon = styledComponents.styled(icons.WarningFilledIcon)(({ theme }) => ({
+    `}
+  `), ContextActionContainer$2 = styledComponents.styled(ui.Flex)(({
+  $scheme
+}) => styledComponents.css`
+    cursor: pointer;
+    height: ${PANEL_HEIGHT}px;
+    transition: all 300ms;
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background: ${getSchemeColor($scheme, "bg")};
+      }
+    }
+  `), StyledWarningOutlineIcon = styledComponents.styled(icons.WarningFilledIcon)(({ theme }) => ({
   color: theme.sanity.color.spot.red
 })), CardAsset$1 = (props) => {
   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();
@@ -4729,16 +4605,16 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
       ]
     }
   ) });
-}, ContextActionContainer$1 = styledComponents.styled(ui.Flex)(
-  ({ $scheme }) => styledComponents.css`
-      cursor: pointer;
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          background: ${getSchemeColor($scheme, "bg")};
-        }
+}, ContextActionContainer$1 = styledComponents.styled(ui.Flex)(({
+  $scheme
+}) => styledComponents.css`
+    cursor: pointer;
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background: ${getSchemeColor($scheme, "bg")};
       }
-    `
-), TableHeader = () => {
+    }
+  `), TableHeader = () => {
   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());
   };
@@ -4813,16 +4689,16 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
         }
       }
     `}
-  `), ContextActionContainer = styledComponents.styled(ui.Flex)(
-  ({ $scheme }) => styledComponents.css`
-      cursor: pointer;
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          background: ${getSchemeColor($scheme, "bg2")};
-        }
+  `), ContextActionContainer = styledComponents.styled(ui.Flex)(({
+  $scheme
+}) => styledComponents.css`
+    cursor: pointer;
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background: ${getSchemeColor($scheme, "bg2")};
       }
-    `
-), StyledWarningIcon = styledComponents.styled(icons.WarningFilledIcon)(({ theme }) => ({
+    }
+  `), StyledWarningIcon = styledComponents.styled(icons.WarningFilledIcon)(({ theme }) => ({
   color: theme.sanity.color.spot.red
 })), TableRowAsset$1 = (props) => {
   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(
@@ -5254,24 +5130,15 @@ const TableRowUpload = (props) => {
       ] })
     }
   );
-}, initialState$1 = {
-  assets: [],
-  document: void 0,
-  documentAssetIds: []
-}, selectedSlice = toolkit.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 = toolkit.createSlice({
   name: "notifications",
-  initialState,
+  initialState: initialState$1,
   reducers: {
     add(state, action) {
       const { asset, status, title } = action.payload;
@@ -5372,6 +5239,16 @@ const initialState = {
   operators$1.mergeMap(() => rxjs.of(notificationsSlice.actions.add({ status: "info", title: "Tag updated" })))
 ), notificationsActions = { ...notificationsSlice.actions };
 var notificationsReducer = notificationsSlice.reducer;
+const initialState = {
+  assets: [],
+  document: void 0,
+  documentAssetIds: []
+}, selectedSlice = toolkit.createSlice({
+  name: "selected",
+  initialState,
+  reducers: {}
+});
+var selectedReducer = selectedSlice.reducer;
 const rootEpic = reduxObservable.combineEpics(
   assetsDeleteEpic,
   assetsFetchEpic,
@@ -5777,7 +5654,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 = sanity.definePlugin((options) => ({
   name: "media",
@@ -5854,7 +5730,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);
 }