sanity-plugin-media 4.0.0 → 4.1.0

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"), groq = require("groq"), reactRedux = require("react-redux"), toolkit = require("@reduxjs/toolkit"), nanoid = require("nanoid"), reduxObservable = require("redux-observable"), rxjs = require("rxjs"), operators$1 = require("rxjs/operators"), uuid = require("@sanity/uuid"), styledComponents = require("styled-components"), pluralize = require("pluralize"), 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"), format = require("date-fns/format"), filesize = require("filesize"), copy = require("copy-to-clipboard"), router = require("sanity/router"), reactFileIcon = require("react-file-icon"), CreatableSelect = require("react-select/creatable"), formatRelative = require("date-fns/formatRelative"), reactDropzone = require("react-dropzone");
+var jsxRuntime = require("react/jsx-runtime"), sanity = require("sanity"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), react = require("react"), groq = require("groq"), reactRedux = require("react-redux"), toolkit = require("@reduxjs/toolkit"), nanoid = require("nanoid"), reduxObservable = require("redux-observable"), rxjs = require("rxjs"), operators$1 = require("rxjs/operators"), uuid = require("@sanity/uuid"), styledComponents = require("styled-components"), pluralize = require("pluralize"), 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");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
@@ -19,7 +19,7 @@ function _interopNamespaceCompat(e) {
     }
   }), n.default = e, Object.freeze(n);
 }
-var groq__default = /* @__PURE__ */ _interopDefaultCompat(groq), pluralize__default = /* @__PURE__ */ _interopDefaultCompat(pluralize), Select__default = /* @__PURE__ */ _interopDefaultCompat(Select), z__namespace = /* @__PURE__ */ _interopNamespaceCompat(z), format__default = /* @__PURE__ */ _interopDefaultCompat(format), filesize__default = /* @__PURE__ */ _interopDefaultCompat(filesize), copy__default = /* @__PURE__ */ _interopDefaultCompat(copy), CreatableSelect__default = /* @__PURE__ */ _interopDefaultCompat(CreatableSelect), formatRelative__default = /* @__PURE__ */ _interopDefaultCompat(formatRelative);
+var groq__default = /* @__PURE__ */ _interopDefaultCompat(groq), pluralize__default = /* @__PURE__ */ _interopDefaultCompat(pluralize), 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;
 }
@@ -1250,7 +1250,9 @@ const UPLOADS_ACTIONS = {
               originalFilename,
               size,
               source {
-                name
+                name,
+                id,
+                url,
               },
               title,
               url
@@ -2353,15 +2355,21 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
     let creditLineExcludeSources;
     return options?.creditLine?.excludeSources && (creditLineExcludeSources = Array.isArray(options?.creditLine?.excludeSources) ? options.creditLine.excludeSources : [options?.creditLine?.excludeSources]), {
       dropzone: { maxSize: options?.maximumUploadSize },
+      components: {
+        details: options?.components?.details
+      },
       creditLine: {
         enabled: options?.creditLine?.enabled || !1,
         excludeSources: creditLineExcludeSources
-      }
+      },
+      directUploads: options?.directUploads ?? !0
     };
   }, [
     options?.creditLine?.enabled,
+    options?.components,
     options?.creditLine?.excludeSources,
-    options?.maximumUploadSize
+    options?.maximumUploadSize,
+    options?.directUploads
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(ToolOptionsContext.Provider, { value, children });
 }, useToolOptions = () => {
@@ -2760,7 +2768,7 @@ const imageDprUrl = (asset, options) => {
           Row,
           {
             label: "Original date",
-            value: format__default.default(new Date(exif.DateTimeOriginal), "PPp")
+            value: dateFns.format(new Date(exif.DateTimeOriginal), "PPp")
           }
         )
       ] }) })
@@ -2820,7 +2828,51 @@ const imageDprUrl = (asset, options) => {
       }
     }
   ) : /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { extension: asset.extension, width: "50%" });
-}, { radius: themeRadius, space: themeSpace } = ui.studioTheme, reactSelectStyles = (scheme) => ({
+}, FormSubmitButton = (props) => {
+  const { disabled, isValid, lastUpdated, onClick } = props;
+  let content;
+  return isValid ? lastUpdated ? content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    "Last updated",
+    /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+    " ",
+    dateFns.format(new Date(lastUpdated), "PPp")
+  ] }) : content = "No unpublished changes" : content = "There are validation errors that need to be fixed before this document can be published", /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Tooltip,
+    {
+      animate: !0,
+      content: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 3, style: { maxWidth: "185px" }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, children: content }) }),
+      disabled: "ontouchstart" in window,
+      placement: "top",
+      portal: !0,
+      children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          disabled,
+          fontSize: 1,
+          onClick,
+          text: "Save and close",
+          tone: "primary"
+        }
+      ) })
+    }
+  );
+}, Image$1 = styledComponents.styled.img`
+  --checkerboard-color: ${(props) => props.$scheme ? getSchemeColor(props.$scheme, "bg2") : "inherit"};
+
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+
+  ${(props) => props.$showCheckerboard && styledComponents.css`
+      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;
+    `}
+`, { radius: themeRadius, space: themeSpace } = ui.studioTheme, reactSelectStyles = (scheme) => ({
   control: (styles, { isFocused }) => {
     let boxShadow = "inset 0 0 0 1px var(--card-border-color)";
     return isFocused && (boxShadow = `inset 0 0 0 1px ${getSchemeColor(scheme, "inputEnabledBorder")},
@@ -3044,55 +3096,99 @@ const imageDprUrl = (asset, options) => {
       }
     )
   ] });
-}), FormSubmitButton = (props) => {
-  const { disabled, isValid, lastUpdated, onClick } = props;
-  let content;
-  return isValid ? lastUpdated ? content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    "Last updated",
-    /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-    " ",
-    format__default.default(new Date(lastUpdated), "PPp")
-  ] }) : content = "No unpublished changes" : content = "There are validation errors that need to be fixed before this document can be published", /* @__PURE__ */ jsxRuntime.jsx(
-    ui.Tooltip,
-    {
-      animate: !0,
-      content: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 3, style: { maxWidth: "185px" }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, children: content }) }),
-      disabled: "ontouchstart" in window,
-      placement: "top",
-      portal: !0,
-      children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Button,
-        {
-          disabled,
-          fontSize: 1,
-          onClick,
-          text: "Save and close",
-          tone: "primary"
-        }
-      ) })
-    }
-  );
-}, Image$1 = styledComponents.styled.img`
-  --checkerboard-color: ${(props) => props.$scheme ? getSchemeColor(props.$scheme, "bg2") : "inherit"};
-
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-
-  ${(props) => props.$showCheckerboard && styledComponents.css`
-      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;
-    `}
-`, DialogAssetEdit = (props) => {
+});
+function Details({
+  formUpdating,
+  handleCreateTag,
+  control,
+  errors,
+  register,
+  allTagOptions,
+  assetTagOptions,
+  currentAsset,
+  creditLine
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FormFieldInputTags,
+      {
+        control,
+        disabled: formUpdating,
+        error: errors?.opt?.media?.tags?.message,
+        label: "Tags",
+        name: "opt.media.tags",
+        onCreateTag: handleCreateTag,
+        options: allTagOptions,
+        placeholder: "Select or create...",
+        value: assetTagOptions
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FormFieldInputText,
+      {
+        ...register("originalFilename"),
+        disabled: formUpdating,
+        error: errors?.originalFilename?.message,
+        label: "Filename",
+        name: "originalFilename",
+        value: currentAsset?.originalFilename
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FormFieldInputText,
+      {
+        ...register("title"),
+        disabled: formUpdating,
+        error: errors?.title?.message,
+        label: "Title",
+        name: "title",
+        value: currentAsset?.title
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FormFieldInputText,
+      {
+        ...register("altText"),
+        disabled: formUpdating,
+        error: errors?.altText?.message,
+        label: "Alt Text",
+        name: "altText",
+        value: currentAsset?.altText
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FormFieldInputTextarea,
+      {
+        ...register("description"),
+        disabled: formUpdating,
+        error: errors?.description?.message,
+        label: "Description",
+        name: "description",
+        rows: 5,
+        value: currentAsset?.description
+      }
+    ),
+    creditLine?.enabled && /* @__PURE__ */ jsxRuntime.jsx(
+      FormFieldInputText,
+      {
+        ...register("creditLine"),
+        error: errors?.creditLine?.message,
+        label: "Credit",
+        name: "creditLine",
+        value: currentAsset?.creditLine,
+        disabled: formUpdating || creditLine?.excludeSources?.includes(currentAsset?.source?.name)
+      }
+    )
+  ] });
+}
+function renderDefaultDetails(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Details, { ...props });
+}
+const DialogAssetEdit = (props) => {
   const {
     children,
     dialog: { assetId, id, lastCreatedTag, lastRemovedTagIds }
-  } = 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(
+  } = 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, components: { details: CustomDetails } = {} } = useToolOptions(), generateDefaultValues = react.useCallback(
     (asset) => ({
       altText: asset?.altText || "",
       creditLine: asset?.creditLine || "",
@@ -3207,7 +3303,21 @@ const imageDprUrl = (asset, options) => {
       }
     )
   ] }) });
-  return currentAsset ? /* @__PURE__ */ jsxRuntime.jsxs(
+  if (!currentAsset)
+    return null;
+  const detailsProps = {
+    control,
+    errors,
+    formUpdating,
+    register,
+    setValue,
+    assetTagOptions,
+    allTagOptions,
+    handleCreateTag,
+    currentAsset,
+    creditLine
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Dialog,
     {
       animate: !0,
@@ -3256,78 +3366,13 @@ const imageDprUrl = (asset, options) => {
                     "aria-labelledby": "details",
                     hidden: tabSection !== "details",
                     id: "details-panel",
-                    children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        FormFieldInputTags,
-                        {
-                          control,
-                          disabled: formUpdating,
-                          error: errors?.opt?.media?.tags?.message,
-                          label: "Tags",
-                          name: "opt.media.tags",
-                          onCreateTag: handleCreateTag,
-                          options: allTagOptions,
-                          placeholder: "Select or create...",
-                          value: assetTagOptions
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        FormFieldInputText,
-                        {
-                          ...register("originalFilename"),
-                          disabled: formUpdating,
-                          error: errors?.originalFilename?.message,
-                          label: "Filename",
-                          name: "originalFilename",
-                          value: currentAsset?.originalFilename
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        FormFieldInputText,
-                        {
-                          ...register("title"),
-                          disabled: formUpdating,
-                          error: errors?.title?.message,
-                          label: "Title",
-                          name: "title",
-                          value: currentAsset?.title
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        FormFieldInputText,
-                        {
-                          ...register("altText"),
-                          disabled: formUpdating,
-                          error: errors?.altText?.message,
-                          label: "Alt Text",
-                          name: "altText",
-                          value: currentAsset?.altText
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        FormFieldInputTextarea,
-                        {
-                          ...register("description"),
-                          disabled: formUpdating,
-                          error: errors?.description?.message,
-                          label: "Description",
-                          name: "description",
-                          rows: 5,
-                          value: currentAsset?.description
-                        }
-                      ),
-                      creditLine?.enabled && /* @__PURE__ */ jsxRuntime.jsx(
-                        FormFieldInputText,
-                        {
-                          ...register("creditLine"),
-                          error: errors?.creditLine?.message,
-                          label: "Credit",
-                          name: "creditLine",
-                          value: currentAsset?.creditLine,
-                          disabled: formUpdating || creditLine?.excludeSources?.includes(currentAsset?.source?.name)
-                        }
-                      )
-                    ] })
+                    children: CustomDetails ? /* @__PURE__ */ jsxRuntime.jsx(
+                      CustomDetails,
+                      {
+                        ...detailsProps,
+                        renderDefaultDetails
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(Details, { ...detailsProps })
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -3367,7 +3412,7 @@ const imageDprUrl = (asset, options) => {
         children
       ]
     }
-  ) : null;
+  );
 }, DialogConfirm = (props) => {
   const { children, dialog } = props, dispatch = reactRedux.useDispatch(), handleClose = () => {
     dispatch(dialogActions.remove({ id: dialog?.id }));
@@ -3856,7 +3901,7 @@ const imageDprUrl = (asset, options) => {
     throw new Error("useDropzoneActions must be used within an DropzoneDispatchProvider");
   return context;
 }, Header = (props) => {
-  const { onClose } = props, { open } = useDropzoneActions(), { onSelect } = useAssetSourceActions(), assetTypes = useTypedSelector((state) => state.assets.assetTypes), selectedDocument = useTypedSelector((state) => state.selected.document);
+  const { onClose } = props, { open } = useDropzoneActions(), { onSelect } = useAssetSourceActions(), assetTypes = useTypedSelector((state) => state.assets.assetTypes), selectedDocument = useTypedSelector((state) => state.selected.document), { directUploads } = useToolOptions();
   return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingY: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", justify: "space-between", children: [
     /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, marginX: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Inline, { style: { whiteSpace: "nowrap" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { textOverflow: "ellipsis", weight: "semibold", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: onSelect ? `Insert ${assetTypes.join(" or ")}` : "Browse Assets" }) }),
@@ -3866,15 +3911,14 @@ const imageDprUrl = (asset, options) => {
       ] }) })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { marginX: 2, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+      directUploads && /* @__PURE__ */ jsxRuntime.jsx(
         ui.Button,
         {
           fontSize: 1,
           icon: icons.UploadIcon,
           mode: "bleed",
           onClick: open,
-          text: `Upload ${assetTypes.length === 1 ? pluralize__default.default(assetTypes[0]) : "assets"}`,
-          tone: "primary"
+          text: `Upload ${assetTypes.length === 1 ? pluralize__default.default(assetTypes[0]) : "assets"}`
         }
       ),
       onClose && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -4798,7 +4842,7 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
               gridRow: mediaIndex < 3 ? 4 : "auto",
               opacity: opacityCell
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, style: { lineHeight: "2em" }, textOverflow: "ellipsis", children: formatRelative__default.default(new Date(asset._updatedAt), /* @__PURE__ */ new Date()) })
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, style: { lineHeight: "2em" }, textOverflow: "ellipsis", children: dateFns.formatRelative(new Date(asset._updatedAt), /* @__PURE__ */ new Date()) })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -5342,7 +5386,8 @@ async function filterFiles(fileList) {
 }
 const UploadDropzone = (props) => {
   const { children } = props, {
-    dropzone: { maxSize }
+    dropzone: { maxSize },
+    directUploads
   } = useToolOptions(), { onSelect } = useAssetSourceActions(), dispatch = reactRedux.useDispatch(), assetTypes = useTypedSelector((state) => state.assets.assetTypes), isImageAssetType = assetTypes.length === 1 && assetTypes[0] === "image", handleDrop = async (acceptedFiles) => {
     acceptedFiles.forEach(
       (file) => dispatch(
@@ -5383,7 +5428,8 @@ const UploadDropzone = (props) => {
     noDrag: !!onSelect,
     onDrop: handleDrop,
     maxSize,
-    onDropRejected: handleDropRejected
+    onDropRejected: handleDropRejected,
+    disabled: !directUploads
   });
   return /* @__PURE__ */ jsxRuntime.jsx(DropzoneDispatchProvider, { open, children: /* @__PURE__ */ jsxRuntime.jsxs(UploadContainer, { ...getRootProps(), children: [
     /* @__PURE__ */ jsxRuntime.jsx("input", { ...getInputProps() }),