sanity-plugin-media 4.0.0 → 4.1.0

package/dist/index.mjs

@@ -20,13 +20,12 @@ 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 format from "date-fns/format";
+import { format, formatRelative } from "date-fns";
 import filesize from "filesize";
 import copy from "copy-to-clipboard";
 import { useIntentLink } from "sanity/router";
 import { FileIcon as FileIcon$1, defaultStyles } from "react-file-icon";
 import CreatableSelect from "react-select/creatable";
-import formatRelative from "date-fns/formatRelative";
 import { useDropzone } from "react-dropzone";
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
@@ -1258,7 +1257,9 @@ const UPLOADS_ACTIONS = {
               originalFilename,
               size,
               source {
-                name
+                name,
+                id,
+                url,
               },
               title,
               url
@@ -2361,15 +2362,21 @@ const Container$1 = styled(Box)(({ $scheme, theme }) => css`
     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__ */ jsx(ToolOptionsContext.Provider, { value, children });
 }, useToolOptions = () => {
@@ -2828,7 +2835,51 @@ const imageDprUrl = (asset, options) => {
       }
     }
   ) : /* @__PURE__ */ jsx(FileIcon, { extension: asset.extension, width: "50%" });
-}, { radius: themeRadius, space: themeSpace } = studioTheme, reactSelectStyles = (scheme) => ({
+}, FormSubmitButton = (props) => {
+  const { disabled, isValid, lastUpdated, onClick } = props;
+  let content;
+  return isValid ? lastUpdated ? content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    "Last updated",
+    /* @__PURE__ */ jsx("br", {}),
+    " ",
+    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__ */ jsx(
+    Tooltip,
+    {
+      animate: !0,
+      content: /* @__PURE__ */ jsx(Box, { padding: 3, style: { maxWidth: "185px" }, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: content }) }),
+      disabled: "ontouchstart" in window,
+      placement: "top",
+      portal: !0,
+      children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled,
+          fontSize: 1,
+          onClick,
+          text: "Save and close",
+          tone: "primary"
+        }
+      ) })
+    }
+  );
+}, Image$1 = styled.img`
+  --checkerboard-color: ${(props) => props.$scheme ? getSchemeColor(props.$scheme, "bg2") : "inherit"};
+
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+
+  ${(props) => props.$showCheckerboard && 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 } = 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")},
@@ -3052,55 +3103,99 @@ const imageDprUrl = (asset, options) => {
       }
     )
   ] });
-}), FormSubmitButton = (props) => {
-  const { disabled, isValid, lastUpdated, onClick } = props;
-  let content;
-  return isValid ? lastUpdated ? content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    "Last updated",
-    /* @__PURE__ */ jsx("br", {}),
-    " ",
-    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__ */ jsx(
-    Tooltip,
-    {
-      animate: !0,
-      content: /* @__PURE__ */ jsx(Box, { padding: 3, style: { maxWidth: "185px" }, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: content }) }),
-      disabled: "ontouchstart" in window,
-      placement: "top",
-      portal: !0,
-      children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          disabled,
-          fontSize: 1,
-          onClick,
-          text: "Save and close",
-          tone: "primary"
-        }
-      ) })
-    }
-  );
-}, Image$1 = styled.img`
-  --checkerboard-color: ${(props) => props.$scheme ? getSchemeColor(props.$scheme, "bg2") : "inherit"};
-
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-
-  ${(props) => props.$showCheckerboard && 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__ */ jsxs(Stack, { space: 3, children: [
+    /* @__PURE__ */ 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__ */ jsx(
+      FormFieldInputText,
+      {
+        ...register("originalFilename"),
+        disabled: formUpdating,
+        error: errors?.originalFilename?.message,
+        label: "Filename",
+        name: "originalFilename",
+        value: currentAsset?.originalFilename
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FormFieldInputText,
+      {
+        ...register("title"),
+        disabled: formUpdating,
+        error: errors?.title?.message,
+        label: "Title",
+        name: "title",
+        value: currentAsset?.title
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FormFieldInputText,
+      {
+        ...register("altText"),
+        disabled: formUpdating,
+        error: errors?.altText?.message,
+        label: "Alt Text",
+        name: "altText",
+        value: currentAsset?.altText
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FormFieldInputTextarea,
+      {
+        ...register("description"),
+        disabled: formUpdating,
+        error: errors?.description?.message,
+        label: "Description",
+        name: "description",
+        rows: 5,
+        value: currentAsset?.description
+      }
+    ),
+    creditLine?.enabled && /* @__PURE__ */ 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__ */ jsx(Details, { ...props });
+}
+const DialogAssetEdit = (props) => {
   const {
     children,
     dialog: { assetId, id, lastCreatedTag, lastRemovedTagIds }
-  } = props, client = useVersionedClient(), scheme = useColorSchemeValue(), documentStore = useDocumentStore(), dispatch = useDispatch(), assetItem = useTypedSelector((state) => selectAssetById(state, String(assetId))), tags = useTypedSelector(selectTags), assetUpdatedPrev = useRef(void 0), [assetSnapshot, setAssetSnapshot] = useState(assetItem?.asset), [tabSection, setTabSection] = useState("details"), currentAsset = assetItem ? assetItem?.asset : assetSnapshot, allTagOptions = getTagSelectOptions(tags), assetTagOptions = useTypedSelector(selectTagSelectOptions(currentAsset)), { creditLine } = useToolOptions(), generateDefaultValues = useCallback(
+  } = props, client = useVersionedClient(), scheme = useColorSchemeValue(), documentStore = useDocumentStore(), dispatch = useDispatch(), assetItem = useTypedSelector((state) => selectAssetById(state, String(assetId))), tags = useTypedSelector(selectTags), assetUpdatedPrev = useRef(void 0), [assetSnapshot, setAssetSnapshot] = useState(assetItem?.asset), [tabSection, setTabSection] = useState("details"), currentAsset = assetItem ? assetItem?.asset : assetSnapshot, allTagOptions = getTagSelectOptions(tags), assetTagOptions = useTypedSelector(selectTagSelectOptions(currentAsset)), { creditLine, components: { details: CustomDetails } = {} } = useToolOptions(), generateDefaultValues = useCallback(
     (asset) => ({
       altText: asset?.altText || "",
       creditLine: asset?.creditLine || "",
@@ -3173,7 +3268,7 @@ const imageDprUrl = (asset, options) => {
     },
     [assetItem?.asset, dispatch]
   );
-  return useEffect(() => {
+  useEffect(() => {
     if (!assetItem?.asset)
       return;
     const subscriptionAsset = client.listen(groq`*[_id == $id]`, { id: assetItem?.asset._id }).subscribe(handleAssetUpdate);
@@ -3192,32 +3287,48 @@ const imageDprUrl = (asset, options) => {
     }
   }, [getValues, lastRemovedTagIds, setValue]), useEffect(() => {
     assetUpdatedPrev.current !== assetItem?.asset._updatedAt && reset(generateDefaultValues(assetItem?.asset)), assetUpdatedPrev.current = assetItem?.asset._updatedAt;
-  }, [assetItem?.asset, generateDefaultValues, reset]), currentAsset ? /* @__PURE__ */ jsxs(
+  }, [assetItem?.asset, generateDefaultValues, reset]);
+  const Footer = () => /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        disabled: formUpdating,
+        fontSize: 1,
+        mode: "bleed",
+        onClick: handleDelete,
+        text: "Delete",
+        tone: "critical"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FormSubmitButton,
+      {
+        disabled: formUpdating || !isDirty || !isValid,
+        isValid,
+        lastUpdated: currentAsset?._updatedAt,
+        onClick: handleSubmit(onSubmit)
+      }
+    )
+  ] }) });
+  if (!currentAsset)
+    return null;
+  const detailsProps = {
+    control,
+    errors,
+    formUpdating,
+    register,
+    setValue,
+    assetTagOptions,
+    allTagOptions,
+    handleCreateTag,
+    currentAsset,
+    creditLine
+  };
+  return /* @__PURE__ */ jsxs(
     Dialog,
     {
       animate: !0,
-      footer: /* @__PURE__ */ jsx(() => /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            disabled: formUpdating,
-            fontSize: 1,
-            mode: "bleed",
-            onClick: handleDelete,
-            text: "Delete",
-            tone: "critical"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          FormSubmitButton,
-          {
-            disabled: formUpdating || !isDirty || !isValid,
-            isValid,
-            lastUpdated: currentAsset?._updatedAt,
-            onClick: handleSubmit(onSubmit)
-          }
-        )
-      ] }) }), {}),
+      footer: /* @__PURE__ */ jsx(Footer, {}),
       header: "Asset details",
       id,
       onClose: handleClose,
@@ -3262,78 +3373,13 @@ const imageDprUrl = (asset, options) => {
                     "aria-labelledby": "details",
                     hidden: tabSection !== "details",
                     id: "details-panel",
-                    children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
-                      /* @__PURE__ */ 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__ */ jsx(
-                        FormFieldInputText,
-                        {
-                          ...register("originalFilename"),
-                          disabled: formUpdating,
-                          error: errors?.originalFilename?.message,
-                          label: "Filename",
-                          name: "originalFilename",
-                          value: currentAsset?.originalFilename
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        FormFieldInputText,
-                        {
-                          ...register("title"),
-                          disabled: formUpdating,
-                          error: errors?.title?.message,
-                          label: "Title",
-                          name: "title",
-                          value: currentAsset?.title
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        FormFieldInputText,
-                        {
-                          ...register("altText"),
-                          disabled: formUpdating,
-                          error: errors?.altText?.message,
-                          label: "Alt Text",
-                          name: "altText",
-                          value: currentAsset?.altText
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        FormFieldInputTextarea,
-                        {
-                          ...register("description"),
-                          disabled: formUpdating,
-                          error: errors?.description?.message,
-                          label: "Description",
-                          name: "description",
-                          rows: 5,
-                          value: currentAsset?.description
-                        }
-                      ),
-                      creditLine?.enabled && /* @__PURE__ */ 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__ */ jsx(
+                      CustomDetails,
+                      {
+                        ...detailsProps,
+                        renderDefaultDetails
+                      }
+                    ) : /* @__PURE__ */ jsx(Details, { ...detailsProps })
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -3373,7 +3419,7 @@ const imageDprUrl = (asset, options) => {
         children
       ]
     }
-  ) : null;
+  );
 }, DialogConfirm = (props) => {
   const { children, dialog } = props, dispatch = useDispatch(), handleClose = () => {
     dispatch(dialogActions.remove({ id: dialog?.id }));
@@ -3860,7 +3906,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__ */ jsx(Box, { paddingY: 2, children: /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "space-between", children: [
     /* @__PURE__ */ jsx(Box, { flex: 1, marginX: 3, children: /* @__PURE__ */ jsxs(Inline, { style: { whiteSpace: "nowrap" }, children: [
       /* @__PURE__ */ jsx(Text, { textOverflow: "ellipsis", weight: "semibold", children: /* @__PURE__ */ jsx("span", { children: onSelect ? `Insert ${assetTypes.join(" or ")}` : "Browse Assets" }) }),
@@ -3870,15 +3916,14 @@ const imageDprUrl = (asset, options) => {
       ] }) })
     ] }) }),
     /* @__PURE__ */ jsxs(Flex, { marginX: 2, children: [
-      /* @__PURE__ */ jsx(
+      directUploads && /* @__PURE__ */ jsx(
         Button,
         {
           fontSize: 1,
           icon: UploadIcon,
           mode: "bleed",
           onClick: open,
-          text: `Upload ${assetTypes.length === 1 ? pluralize(assetTypes[0]) : "assets"}`,
-          tone: "primary"
+          text: `Upload ${assetTypes.length === 1 ? pluralize(assetTypes[0]) : "assets"}`
         }
       ),
       onClose && /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
@@ -5346,7 +5391,8 @@ async function filterFiles(fileList) {
 }
 const UploadDropzone = (props) => {
   const { children } = props, {
-    dropzone: { maxSize }
+    dropzone: { maxSize },
+    directUploads
   } = useToolOptions(), { onSelect } = useAssetSourceActions(), dispatch = useDispatch(), assetTypes = useTypedSelector((state) => state.assets.assetTypes), isImageAssetType = assetTypes.length === 1 && assetTypes[0] === "image", handleDrop = async (acceptedFiles) => {
     acceptedFiles.forEach(
       (file) => dispatch(
@@ -5387,7 +5433,8 @@ const UploadDropzone = (props) => {
     noDrag: !!onSelect,
     onDrop: handleDrop,
     maxSize,
-    onDropRejected: handleDropRejected
+    onDropRejected: handleDropRejected,
+    disabled: !directUploads
   });
   return /* @__PURE__ */ jsx(DropzoneDispatchProvider, { open, children: /* @__PURE__ */ jsxs(UploadContainer, { ...getRootProps(), children: [
     /* @__PURE__ */ jsx("input", { ...getInputProps() }),