sanity-plugin-media 4.1.1 → 4.2.0

package/dist/index.js

@@ -542,7 +542,7 @@ const useKeyPress = (hotkey, onPress) => {
   if (context === void 0)
     throw new Error("useAssetSourceActions must be used within an AssetSourceDispatchProvider");
   return context;
-}, useVersionedClient = () => sanity.useClient({ apiVersion: "2022-10-01" }), ORDER_DICTIONARY = {
+}, useVersionedClient = () => sanity.useClient({ apiVersion: "2025-10-02" }), ORDER_DICTIONARY = {
   _createdAt: {
     asc: "Last created: Oldest first",
     desc: "Last created: Newest first"
@@ -2365,14 +2365,16 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
         enabled: options?.creditLine?.enabled || !1,
         excludeSources: creditLineExcludeSources
       },
-      directUploads: options?.directUploads ?? !0
+      directUploads: options?.directUploads ?? !0,
+      locales: options?.locales
     };
   }, [
     options?.creditLine?.enabled,
     options?.components,
     options?.creditLine?.excludeSources,
     options?.maximumUploadSize,
-    options?.directUploads
+    options?.directUploads,
+    options?.locales
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(ToolOptionsContext.Provider, { value, children });
 }, useToolOptions = () => {
@@ -2651,21 +2653,35 @@ const DebugControls = () => {
       ] })
     }
   ) : null;
-}, tagOptionSchema = z__namespace.object({
+};
+function localizedStringSchema(locales) {
+  if (!locales || locales.length === 0)
+    return z__namespace.string().trim().optional();
+  const shape = {};
+  for (const locale of locales)
+    shape[locale.id] = z__namespace.string().trim().optional();
+  return z__namespace.object(shape).passthrough();
+}
+const tagOptionSchema = z__namespace.object({
   label: z__namespace.string().trim().min(1, { message: "Label cannot be empty" }),
   value: z__namespace.string().trim().min(1, { message: "Value cannot be empty" })
-}), assetFormSchema = z__namespace.object({
-  altText: z__namespace.string().trim().optional(),
-  creditLine: z__namespace.string().trim().optional(),
-  description: z__namespace.string().trim().optional(),
-  opt: z__namespace.object({
-    media: z__namespace.object({
-      tags: z__namespace.array(tagOptionSchema).nullable()
-    })
-  }),
-  originalFilename: z__namespace.string().trim().min(1, { message: "Filename cannot be empty" }),
-  title: z__namespace.string().trim().optional()
-}), tagFormSchema = z__namespace.object({
+});
+function getAssetFormSchema(locales) {
+  return z__namespace.object({
+    altText: localizedStringSchema(locales),
+    creditLine: localizedStringSchema(locales),
+    description: localizedStringSchema(locales),
+    opt: z__namespace.object({
+      media: z__namespace.object({
+        tags: z__namespace.array(tagOptionSchema).nullable()
+      })
+    }),
+    originalFilename: z__namespace.string().trim().min(1, { message: "Filename cannot be empty" }),
+    title: localizedStringSchema(locales)
+  });
+}
+getAssetFormSchema();
+const tagFormSchema = z__namespace.object({
   name: z__namespace.string().min(1, { message: "Name cannot be empty" })
 });
 function getUniqueDocuments(documents) {
@@ -3100,6 +3116,11 @@ const imageDprUrl = (asset, options) => {
     )
   ] });
 });
+function toStringField(value) {
+  if (typeof value == "string") return value;
+  if (typeof value == "object" && value !== null)
+    return Object.values(value).find((v) => v) || void 0;
+}
 function Details({
   formUpdating,
   handleCreateTag,
@@ -3109,8 +3130,10 @@ function Details({
   allTagOptions,
   assetTagOptions,
   currentAsset,
-  creditLine
+  creditLine,
+  locales
 }) {
+  const hasLocales = locales && locales.length > 0, [activeLocaleTab, setActiveLocaleTab] = react.useState(0);
   return /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       FormFieldInputTags,
@@ -3137,51 +3160,117 @@ function Details({
         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)
-      }
-    )
+    hasLocales ? /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { marginTop: 2, shadow: 1, padding: 3, radius: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.TabList, { space: 2, children: locales.map((locale, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Tab,
+        {
+          id: `locale-tab-${locale.id}`,
+          "aria-controls": `locale-panel-${locale.id}`,
+          selected: activeLocaleTab === idx,
+          onClick: () => setActiveLocaleTab(idx),
+          label: locale.title
+        },
+        locale.id
+      )) }),
+      locales.map((locale, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+        ui.TabPanel,
+        {
+          id: `locale-panel-${locale.id}`,
+          "aria-labelledby": `locale-tab-${locale.id}`,
+          hidden: activeLocaleTab !== idx,
+          children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              FormFieldInputText,
+              {
+                ...register(`title.${locale.id}`),
+                disabled: formUpdating,
+                error: errors?.title?.[locale.id]?.message,
+                label: "Title",
+                name: `title.${locale.id}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              FormFieldInputText,
+              {
+                ...register(`altText.${locale.id}`),
+                disabled: formUpdating,
+                error: errors?.altText?.[locale.id]?.message,
+                label: "Alt Text",
+                name: `altText.${locale.id}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              FormFieldInputTextarea,
+              {
+                ...register(`description.${locale.id}`),
+                disabled: formUpdating,
+                error: errors?.description?.[locale.id]?.message,
+                label: "Description",
+                name: `description.${locale.id}`,
+                rows: 5
+              }
+            ),
+            creditLine?.enabled && /* @__PURE__ */ jsxRuntime.jsx(
+              FormFieldInputText,
+              {
+                ...register(`creditLine.${locale.id}`),
+                error: errors?.creditLine?.[locale.id]?.message,
+                label: "Credit",
+                name: `creditLine.${locale.id}`,
+                disabled: formUpdating || creditLine?.excludeSources?.includes(currentAsset?.source?.name)
+              }
+            )
+          ] })
+        },
+        locale.id
+      ))
+    ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormFieldInputText,
+        {
+          ...register("title"),
+          disabled: formUpdating,
+          error: errors?.title?.message,
+          label: "Title",
+          name: "title",
+          value: toStringField(currentAsset?.title)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormFieldInputText,
+        {
+          ...register("altText"),
+          disabled: formUpdating,
+          error: errors?.altText?.message,
+          label: "Alt Text",
+          name: "altText",
+          value: toStringField(currentAsset?.altText)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormFieldInputTextarea,
+        {
+          ...register("description"),
+          disabled: formUpdating,
+          error: errors?.description?.message,
+          label: "Description",
+          name: "description",
+          rows: 5,
+          value: toStringField(currentAsset?.description)
+        }
+      ),
+      creditLine?.enabled && /* @__PURE__ */ jsxRuntime.jsx(
+        FormFieldInputText,
+        {
+          ...register("creditLine"),
+          error: errors?.creditLine?.message,
+          label: "Credit",
+          name: "creditLine",
+          value: toStringField(currentAsset?.creditLine),
+          disabled: formUpdating || creditLine?.excludeSources?.includes(currentAsset?.source?.name)
+        }
+      )
+    ] })
   ] });
 }
 function renderDefaultDetails(props) {
@@ -3191,16 +3280,37 @@ 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, components: { details: CustomDetails } = {} } = useToolOptions(), generateDefaultValues = react.useCallback(
-    (asset) => ({
-      altText: asset?.altText || "",
-      creditLine: asset?.creditLine || "",
-      description: asset?.description || "",
-      originalFilename: asset?.originalFilename || "",
-      opt: { media: { tags: assetTagOptions } },
-      title: asset?.title || ""
-    }),
-    [assetTagOptions]
+  } = 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 } = {}, locales } = useToolOptions(), generateDefaultValues = react.useCallback(
+    (asset) => {
+      if (locales && locales.length > 0) {
+        const makeLocaleObj = (field) => {
+          const obj = {};
+          for (let i = 0; i < locales.length; i++) {
+            const locale = locales[i];
+            typeof field == "object" && field && field[locale.id] ? obj[locale.id] = field[locale.id] : typeof field == "string" ? obj[locale.id] = i === 0 ? field : "" : obj[locale.id] = "";
+          }
+          return obj;
+        };
+        return {
+          altText: makeLocaleObj(asset?.altText),
+          creditLine: makeLocaleObj(asset?.creditLine),
+          description: makeLocaleObj(asset?.description),
+          originalFilename: asset?.originalFilename || "",
+          opt: { media: { tags: assetTagOptions } },
+          title: makeLocaleObj(asset?.title)
+        };
+      }
+      const flattenField = (field) => typeof field == "string" ? field : typeof field == "object" && field !== null && Object.values(field).find((v) => v) || "";
+      return {
+        altText: flattenField(asset?.altText),
+        creditLine: flattenField(asset?.creditLine),
+        description: flattenField(asset?.description),
+        originalFilename: asset?.originalFilename || "",
+        opt: { media: { tags: assetTagOptions } },
+        title: flattenField(asset?.title)
+      };
+    },
+    [assetTagOptions, locales]
   ), {
     control,
     // Read the formState before render to subscribe the form state through Proxy
@@ -3213,7 +3323,7 @@ const DialogAssetEdit = (props) => {
   } = reactHookForm.useForm({
     defaultValues: generateDefaultValues(assetItem?.asset),
     mode: "onChange",
-    resolver: zod.zodResolver(assetFormSchema)
+    resolver: zod.zodResolver(getAssetFormSchema(locales))
   }), formUpdating = !assetItem || assetItem?.updating, handleClose = react.useCallback(() => {
     dispatch(dialogActions.remove({ id }));
   }, [dispatch, id]), handleDelete = react.useCallback(() => {
@@ -3236,7 +3346,39 @@ const DialogAssetEdit = (props) => {
       );
     },
     [currentAsset?._id, dispatch]
-  ), onSubmit = react.useCallback(
+  ), hasOrphanedLocales = react.useMemo(() => {
+    if (!currentAsset) return !1;
+    const isLocaleObj = (v) => typeof v == "object" && v !== null && !Array.isArray(v), fields = [
+      currentAsset.title,
+      currentAsset.altText,
+      currentAsset.description,
+      ...currentAsset._type === "sanity.imageAsset" ? [currentAsset.creditLine] : []
+    ];
+    if (!fields.some((f) => isLocaleObj(f))) return !1;
+    if (!locales || locales.length === 0) return !0;
+    const configuredIds = new Set(locales.map((l) => l.id));
+    return fields.some((f) => isLocaleObj(f) ? Object.keys(f).some((k) => !configuredIds.has(k)) : !1);
+  }, [currentAsset, locales]), handleCleanupLocales = react.useCallback(async () => {
+    if (!currentAsset) return;
+    const cleanField = (field) => {
+      if (typeof field != "object" || field === null || Array.isArray(field)) return field;
+      const obj = field;
+      if (!locales || locales.length === 0)
+        return Object.keys(obj).sort().map((k) => obj[k]).find((v) => v) || "";
+      const configuredIds = new Set(locales.map((l) => l.id)), cleaned = {};
+      for (const [key, val] of Object.entries(obj))
+        configuredIds.has(key) && (cleaned[key] = val);
+      return cleaned;
+    };
+    await client.patch(currentAsset._id).set({
+      title: cleanField(currentAsset.title),
+      altText: cleanField(currentAsset.altText),
+      description: cleanField(currentAsset.description),
+      ...currentAsset._type === "sanity.imageAsset" && {
+        creditLine: cleanField(currentAsset.creditLine)
+      }
+    }).commit();
+  }, [client, currentAsset, locales]), onSubmit = react.useCallback(
     (formData) => {
       if (!assetItem?.asset)
         return;
@@ -3284,27 +3426,42 @@ const DialogAssetEdit = (props) => {
   }, [getValues, lastRemovedTagIds, setValue]), react.useEffect(() => {
     assetUpdatedPrev.current !== assetItem?.asset._updatedAt && reset(generateDefaultValues(assetItem?.asset)), assetUpdatedPrev.current = assetItem?.asset._updatedAt;
   }, [assetItem?.asset, generateDefaultValues, reset]);
-  const Footer = () => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "space-between", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Button,
-      {
-        disabled: formUpdating,
-        fontSize: 1,
-        mode: "bleed",
-        onClick: handleDelete,
-        text: "Delete",
-        tone: "critical"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      FormSubmitButton,
-      {
-        disabled: formUpdating || !isDirty || !isValid,
-        isValid,
-        lastUpdated: currentAsset?._updatedAt,
-        onClick: handleSubmit(onSubmit)
-      }
-    )
+  const Footer = () => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
+    hasOrphanedLocales && /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: 3, radius: 2, shadow: 1, tone: "caution", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", justify: "space-between", gap: 3, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: "This asset has localized fields that are no longer configured. Clean them up to avoid validation errors." }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          fontSize: 1,
+          mode: "ghost",
+          onClick: handleCleanupLocales,
+          text: "Cleanup localized fields",
+          tone: "caution"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "space-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          disabled: formUpdating,
+          fontSize: 1,
+          mode: "bleed",
+          onClick: handleDelete,
+          text: "Delete",
+          tone: "critical"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormSubmitButton,
+        {
+          disabled: formUpdating || !isDirty || !isValid || hasOrphanedLocales,
+          isValid,
+          lastUpdated: currentAsset?._updatedAt,
+          onClick: handleSubmit(onSubmit)
+        }
+      )
+    ] })
   ] }) });
   if (!currentAsset)
     return null;
@@ -3318,7 +3475,8 @@ const DialogAssetEdit = (props) => {
     allTagOptions,
     handleCreateTag,
     currentAsset,
-    creditLine
+    creditLine,
+    locales
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Dialog,
@@ -5104,6 +5262,9 @@ const TableRowUpload = (props) => {
   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 = {
   items: []
 }, notificationsSlice = toolkit.createSlice({
@@ -5190,11 +5351,11 @@ const initialState = {
     uploadsActions.uploadError.type
   ),
   operators$1.mergeMap((action) => {
-    const error = action.payload?.error;
+    const title = `An error occurred: ${messageFromGenericErrorPayload(action.payload)}`;
     return rxjs.of(
       notificationsSlice.actions.add({
         status: "error",
-        title: `An error occured: ${error.message}`
+        title
       })
     );
   })