sanity-plugin-internationalized-array 2.1.0 → 3.0.0-canary.0

package/lib/index.mjs

@@ -1,15 +1,15 @@
 import * as suspend from "suspend-react";
 import { suspend as suspend$1 } from "suspend-react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { isSanityDocument, setIfMissing, insert, PatchEvent, useClient, useWorkspace, useFormBuilder, defineDocumentFieldAction, useFormValue, set, ArrayOfObjectsItem, MemberItemError, defineField, unset, isDocumentSchemaType, definePlugin, isObjectInputProps } from "sanity";
+import { isSanityDocument, setIfMissing, insert, PatchEvent, useClient, useWorkspace, defineDocumentFieldAction, useFormValue, set, ArrayOfObjectsItem, MemberItemError, defineField, unset, isDocumentSchemaType, definePlugin, isObjectInputProps } from "sanity";
 import { useLanguageFilterStudioContext } from "@sanity/language-filter";
 import { Grid, Button, useToast, Stack, Box, Text, Card, Code, Label, MenuButton, Menu, MenuItem, Flex, Spinner } from "@sanity/ui";
 import equal from "fast-deep-equal";
-import { useCallback, createContext, useContext, useDeferredValue, useMemo, memo, useRef, useEffect, createElement } from "react";
+import { memo, useCallback, createContext, useContext, useDeferredValue, useMemo, useRef, useEffect, createElement } from "react";
 import { useDocumentPane } from "sanity/structure";
 import { AddIcon, TranslateIcon, RemoveCircleIcon } from "@sanity/icons";
 import get from "lodash/get.js";
-const namespace = "sanity-plugin-internationalized-array", version = "v0", preload = (fn) => suspend.preload(() => fn(), [version, namespace]), clear = () => suspend.clear([version, namespace]), peek = (selectedValue) => suspend.peek([version, namespace, selectedValue]), MAX_COLUMNS = 7, CONFIG_DEFAULT = {
+const namespace = "sanity-plugin-internationalized-array", version = "v1", preload = (fn) => suspend.preload(() => fn(), [version, namespace]), clear = () => suspend.clear([version, namespace]), peek = (selectedValue) => suspend.peek([version, namespace, selectedValue]), MAX_COLUMNS = 7, CONFIG_DEFAULT = {
   languages: [],
   select: {},
   defaultLanguages: [],
@@ -20,11 +20,10 @@ const namespace = "sanity-plugin-internationalized-array", version = "v0", prelo
 }, getDocumentsToTranslate = (value, rootPath = []) => {
   if (Array.isArray(value)) {
     const arrayRootPath = [...rootPath], internationalizedValues = value.filter((item) => {
-      if (Array.isArray(item))
-        return !1;
+      if (Array.isArray(item)) return !1;
       if (typeof item == "object") {
-        const type = item == null ? void 0 : item._type;
-        return (type == null ? void 0 : type.startsWith("internationalizedArray")) && (type == null ? void 0 : type.endsWith("Value"));
+        const type = item?._type;
+        return type?.startsWith("internationalizedArray") && type?.endsWith("Value");
       }
       return !1;
     });
@@ -55,7 +54,7 @@ function AddButtons(props) {
       tone: "primary",
       mode: "ghost",
       fontSize: 1,
-      disabled: readOnly || !!(value != null && value.find((item) => item._key === language.id)),
+      disabled: readOnly || !!value?.find((item) => item._key === language.id),
       text: language.id.toUpperCase(),
       icon: languages.length > MAX_COLUMNS ? void 0 : AddIcon,
       value: language.id,
@@ -64,6 +63,7 @@ function AddButtons(props) {
     language.id
   )) }) : null;
 }
+var AddButtons$1 = memo(AddButtons);
 function DocumentAddButtons(props) {
   const { filteredLanguages } = useInternationalizedArrayContext(), value = isSanityDocument(props.value) ? props.value : void 0, toast = useToast(), { onChange } = useDocumentPane(), documentsToTranslation = getDocumentsToTranslate(value, []), handleDocumentButtonClick = useCallback(
     async (event) => {
@@ -76,7 +76,7 @@ function DocumentAddButtons(props) {
         return;
       }
       const alreadyTranslated = documentsToTranslation.filter(
-        (translation) => (translation == null ? void 0 : translation._key) === languageId
+        (translation) => translation?._key === languageId
       ), removeDuplicates = documentsToTranslation.reduce((filteredTranslations, translation) => alreadyTranslated.filter(
         (alreadyTranslation) => alreadyTranslation.pathString === translation.pathString
       ).length > 0 || filteredTranslations.filter(
@@ -111,7 +111,7 @@ function DocumentAddButtons(props) {
   return /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
     /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "Add translation to internationalized fields" }) }),
     /* @__PURE__ */ jsx(
-      AddButtons,
+      AddButtons$1,
       {
         languages: filteredLanguages,
         readOnly: !1,
@@ -128,7 +128,7 @@ const getSelectedValue = (select, document) => {
   for (const [key, path] of Object.entries(selection)) {
     let value = get(document, path);
     Array.isArray(value) && (value = value.filter(
-      (item) => typeof item == "object" ? (item == null ? void 0 : item._type) === "reference" && "_ref" in item : !0
+      (item) => typeof item == "object" ? item?._type === "reference" && "_ref" in item : !0
     )), selectedValue[key] = value;
   }
   return selectedValue;
@@ -141,7 +141,7 @@ function useInternationalizedArrayContext() {
   return useContext(InternationalizedArrayContext);
 }
 function InternationalizedArrayProvider(props) {
-  const { internationalizedArray: internationalizedArray2 } = props, client = useClient({ apiVersion: internationalizedArray2.apiVersion }), workspace = useWorkspace(), { value: document } = useFormBuilder(), deferredDocument = useDeferredValue(document), selectedValue = useMemo(
+  const { internationalizedArray: internationalizedArray2 } = props, client = useClient({ apiVersion: internationalizedArray2.apiVersion }), workspace = useWorkspace(), { formState } = useDocumentPane(), deferredDocument = useDeferredValue(formState?.value), selectedValue = useMemo(
     () => getSelectedValue(internationalizedArray2.select, deferredDocument),
     [internationalizedArray2.select, deferredDocument]
   ), languages = Array.isArray(internationalizedArray2.languages) ? internationalizedArray2.languages : suspend$1(
@@ -154,21 +154,14 @@ function InternationalizedArrayProvider(props) {
     return typeof documentType == "string" && languageFilterOptions.documentTypes.includes(documentType) ? languages.filter(
       (language) => selectedLanguageIds.includes(language.id)
     ) : languages;
-  }, [deferredDocument, languageFilterOptions, languages, selectedLanguageIds]), showDocumentButtons = internationalizedArray2.buttonLocations.includes("document");
-  return /* @__PURE__ */ jsx(
-    InternationalizedArrayContext.Provider,
-    {
-      value: {
-        ...internationalizedArray2,
-        languages,
-        filteredLanguages
-      },
-      children: showDocumentButtons ? /* @__PURE__ */ jsxs(Stack, { space: 5, children: [
-        /* @__PURE__ */ jsx(DocumentAddButtons, { value: props.value }),
-        props.renderDefault(props)
-      ] }) : props.renderDefault(props)
-    }
+  }, [deferredDocument, languageFilterOptions, languages, selectedLanguageIds]), showDocumentButtons = internationalizedArray2.buttonLocations.includes("document"), context = useMemo(
+    () => ({ ...internationalizedArray2, languages, filteredLanguages }),
+    [filteredLanguages, internationalizedArray2, languages]
   );
+  return /* @__PURE__ */ jsx(InternationalizedArrayContext.Provider, { value: context, children: showDocumentButtons ? /* @__PURE__ */ jsxs(Stack, { space: 5, children: [
+    /* @__PURE__ */ jsx(DocumentAddButtons, { value: props.value }),
+    props.renderDefault(props)
+  ] }) : props.renderDefault(props) });
 }
 var Preload = memo(function(props) {
   const client = useClient({ apiVersion: props.apiVersion });
@@ -181,7 +174,7 @@ function checkAllLanguagesArePresent(languages, value) {
   return languagesInUseIds.length === filteredLanguageIds.length && languagesInUseIds.every((l) => filteredLanguageIds.includes(l));
 }
 function createAddAllTitle(value, languages) {
-  return value != null && value.length ? `Add missing ${languages.length - value.length === 1 ? "language" : "languages"}` : languages.length === 1 ? `Add ${languages[0].title} Field` : "Add all languages";
+  return value?.length ? `Add missing ${languages.length - value.length === 1 ? "language" : "languages"}` : languages.length === 1 ? `Add ${languages[0].title} Field` : "Add all languages";
 }
 function createValueSchemaTypeName(schemaType) {
   return `${schemaType.name}Value`;
@@ -198,11 +191,11 @@ function createAddLanguagePatches(config) {
     ...itemBase,
     _key: id
   })) : filteredLanguages.filter(
-    (language) => value != null && value.length ? !value.find((v) => v._key === language.id) : !0
+    (language) => value?.length ? !value.find((v) => v._key === language.id) : !0
   ).map((language) => ({
     ...itemBase,
     _key: language.id
-  })), languagesInUse = value != null && value.length ? value.map((v) => v) : [];
+  })), languagesInUse = value?.length ? value.map((v) => v) : [];
   return newItems.map((item) => {
     const languageIndex = languages.findIndex((l) => item._key === l.id), remainingLanguages = languages.slice(languageIndex + 1), nextLanguageIndex = languagesInUse.findIndex(
       (l) => (
@@ -220,7 +213,7 @@ function createAddLanguagePatches(config) {
   });
 }
 const createTranslateFieldActions = (fieldActionProps, { languages, filteredLanguages }) => languages.map((language) => {
-  const value = useFormValue(fieldActionProps.path), disabled = value && Array.isArray(value) ? !!(value != null && value.find((item) => item._key === language.id)) : !1, hidden = !filteredLanguages.some((f) => f.id === language.id), { onChange } = useDocumentPane(), onAction = useCallback(() => {
+  const value = useFormValue(fieldActionProps.path), disabled = value && Array.isArray(value) ? !!value?.find((item) => item._key === language.id) : !1, hidden = !filteredLanguages.some((f) => f.id === language.id), { onChange } = useDocumentPane(), onAction = useCallback(() => {
     const { schemaType, path } = fieldActionProps, addLanguageKeys = [language.id], patches = createAddLanguagePatches({
       addLanguageKeys,
       schemaType,
@@ -262,8 +255,7 @@ const createTranslateFieldActions = (fieldActionProps, { languages, filteredLang
 }, internationalizedArrayFieldAction = defineDocumentFieldAction({
   name: "internationalizedArray",
   useAction(fieldActionProps) {
-    var _a, _b;
-    const isInternationalizedArrayField = (_b = (_a = fieldActionProps == null ? void 0 : fieldActionProps.schemaType) == null ? void 0 : _a.type) == null ? void 0 : _b.name.startsWith(
+    const isInternationalizedArrayField = fieldActionProps?.schemaType?.type?.name.startsWith(
       "internationalizedArray"
     ), { languages, filteredLanguages } = useInternationalizedArrayContext(), translateFieldActions = createTranslateFieldActions(
       fieldActionProps,
@@ -340,10 +332,9 @@ function InternationalizedArray(props) {
     [languageFilterEnabled, members, languageFilterOptions, selectedLanguageIds]
   ), handleAddLanguage = useCallback(
     async (param) => {
-      var _a;
-      if (!(filteredLanguages != null && filteredLanguages.length))
+      if (!filteredLanguages?.length)
         return;
-      const addLanguageKeys = Array.isArray(param) ? param : [(_a = param == null ? void 0 : param.currentTarget) == null ? void 0 : _a.value].filter(Boolean), patches = createAddLanguagePatches({
+      const addLanguageKeys = Array.isArray(param) ? param : [param?.currentTarget?.value].filter(Boolean), patches = createAddLanguagePatches({
         addLanguageKeys,
         schemaType,
         languages,
@@ -361,23 +352,23 @@ function InternationalizedArray(props) {
     };
   }, [defaultLanguages, documentCreatedAt, handleAddLanguage, value]);
   const handleRestoreOrder = useCallback(() => {
-    if (!(value != null && value.length) || !(languages != null && languages.length))
+    if (!value?.length || !languages?.length)
       return;
     const updatedValue = value.reduce((acc, v) => {
-      const newIndex = languages.findIndex((l) => l.id === (v == null ? void 0 : v._key));
+      const newIndex = languages.findIndex((l) => l.id === v?._key);
       return newIndex > -1 && (acc[newIndex] = v), acc;
     }, []).filter(Boolean);
-    (value == null ? void 0 : value.length) !== updatedValue.length && toast.push({
+    value?.length !== updatedValue.length && toast.push({
       title: "There was an error reordering languages",
       status: "warning"
     }), onChange(set(updatedValue));
-  }, [toast, languages, onChange, value]), allKeysAreLanguages = useMemo(() => !(value != null && value.length) || !(languages != null && languages.length) ? !0 : value == null ? void 0 : value.every((v) => languages.find((l) => (l == null ? void 0 : l.id) === (v == null ? void 0 : v._key))), [value, languages]), languagesInUse = useMemo(
-    () => languages && languages.length > 1 ? languages.filter((l) => value == null ? void 0 : value.find((v) => v._key === l.id)) : [],
+  }, [toast, languages, onChange, value]), allKeysAreLanguages = useMemo(() => !value?.length || !languages?.length ? !0 : value?.every((v) => languages.find((l) => l?.id === v?._key)), [value, languages]), languagesInUse = useMemo(
+    () => languages && languages.length > 1 ? languages.filter((l) => value?.find((v) => v._key === l.id)) : [],
     [languages, value]
-  ), languagesOutOfOrder = useMemo(() => !(value != null && value.length) || !languagesInUse.length ? [] : value.map(
+  ), languagesOutOfOrder = useMemo(() => !value?.length || !languagesInUse.length ? [] : value.map(
     (v, vIndex) => vIndex === languagesInUse.findIndex((l) => l.id === v._key) ? null : v
   ).filter(Boolean), [value, languagesInUse]), languagesAreValid = useMemo(
-    () => !(languages != null && languages.length) || (languages == null ? void 0 : languages.length) && languages.every((item) => item.id && item.title),
+    () => !languages?.length || languages?.length && languages.every((item) => item.id && item.title),
     [languages]
   );
   useEffect(() => {
@@ -392,9 +383,9 @@ function InternationalizedArray(props) {
   const addButtonsAreVisible = (
     // Plugin was configured to display buttons here (default!)
     buttonLocations.includes("field") && // There's at least one language visible
-    (filteredLanguages == null ? void 0 : filteredLanguages.length) > 0 && // Not every language has a value yet
+    filteredLanguages?.length > 0 && // Not every language has a value yet
     !allLanguagesArePresent
-  ), fieldHasMembers = (members == null ? void 0 : members.length) > 0;
+  ), fieldHasMembers = members?.length > 0;
   return /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
     fieldHasMembers ? /* @__PURE__ */ jsx(Fragment, { children: filteredMembers.map((member) => member.kind === "item" ? /* @__PURE__ */ createElement(
       ArrayOfObjectsItem,
@@ -407,7 +398,7 @@ function InternationalizedArray(props) {
     !addButtonsAreVisible && !fieldHasMembers ? /* @__PURE__ */ jsx(Card, { border: !0, tone: "transparent", padding: 3, radius: 2, children: /* @__PURE__ */ jsx(Text, { size: 1, children: "This internationalized field currently has no translations." }) }) : null,
     addButtonsAreVisible ? /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
       /* @__PURE__ */ jsx(
-        AddButtons,
+        AddButtons$1,
         {
           languages: filteredLanguages,
           value,
@@ -430,8 +421,7 @@ function InternationalizedArray(props) {
   ] });
 }
 function getLanguagesFieldOption(schemaType) {
-  var _a;
-  return schemaType ? ((_a = schemaType.options) == null ? void 0 : _a.languages) || getLanguagesFieldOption(schemaType.type) : void 0;
+  return schemaType ? schemaType.options?.languages || getLanguagesFieldOption(schemaType.type) : void 0;
 }
 var array = (config) => {
   const { apiVersion, select, languages, type } = config, typeName = typeof type == "string" ? type : type.name, arrayName = createFieldName(typeName), objectName = createFieldName(typeName, !0);
@@ -442,8 +432,12 @@ var array = (config) => {
     components: {
       input: InternationalizedArray
     },
-    // These options are required for validation rules – not the custom input component
-    options: { apiVersion, select, languages },
+    options: {
+      // @ts-expect-error - these options are required for validation rules – not the custom input component
+      apiVersion,
+      select,
+      languages
+    },
     of: [
       defineField({
         ...typeof type == "string" ? {} : type,
@@ -451,15 +445,16 @@ var array = (config) => {
         type: objectName
       })
     ],
+    // @ts-expect-error - fix typings
     validation: (rule) => rule.custom(async (value, context) => {
       if (!value)
         return !0;
       const selectedValue = getSelectedValue(select, context.document), client = context.getClient({ apiVersion });
       let contextLanguages = [];
-      const languagesFieldOption = getLanguagesFieldOption(context == null ? void 0 : context.type);
+      const languagesFieldOption = getLanguagesFieldOption(context?.type);
       if (Array.isArray(languagesFieldOption) ? contextLanguages = languagesFieldOption : Array.isArray(peek(selectedValue)) ? contextLanguages = peek(selectedValue) || [] : typeof languagesFieldOption == "function" && (contextLanguages = await languagesFieldOption(client, selectedValue)), value && value.length > contextLanguages.length)
         return `Cannot be more than ${contextLanguages.length === 1 ? "1 item" : `${contextLanguages.length} items`}`;
-      const nonLanguageKeys = value != null && value.length ? value.filter(
+      const nonLanguageKeys = value?.length ? value.filter(
         (item) => !contextLanguages.find((language) => item._key === language.id)
       ) : [];
       if (nonLanguageKeys.length)
@@ -467,10 +462,10 @@ var array = (config) => {
           message: "Array item keys must be valid languages registered to the field type",
           paths: nonLanguageKeys.map((item) => [{ _key: item._key }])
         };
-      const valuesByLanguage = value != null && value.length ? value.filter((item) => !!(item != null && item._key)).reduce((acc, cur) => acc[cur._key] ? { ...acc, [cur._key]: [...acc[cur._key], cur] } : {
+      const valuesByLanguage = value?.length ? value.filter((item) => !!item?._key).reduce((acc, cur) => acc[cur._key] ? { ...acc, [cur._key]: [...acc[cur._key], cur] } : {
         ...acc,
         [cur._key]: [cur]
-      }, {}) : {}, duplicateValues = Object.values(valuesByLanguage).filter((item) => (item == null ? void 0 : item.length) > 1).flat();
+      }, {}) : {}, duplicateValues = Object.values(valuesByLanguage).filter((item) => item?.length > 1).flat();
       return duplicateValues.length ? {
         message: "There can only be one field per language",
         paths: duplicateValues.map((item) => [{ _key: item._key }])
@@ -486,7 +481,7 @@ function InternationalizedField(props) {
   }) : props.children;
 }
 function getToneFromValidation(validations) {
-  if (!(validations != null && validations.length))
+  if (!validations?.length)
     return;
   const validationLevels = validations.map((v) => v.level);
   if (validationLevels.includes("error"))
@@ -507,16 +502,12 @@ function InternationalizedInput(props) {
     // TODO: Remove this as it shouldn't be necessary?
     value: props.value
   }, { validation, value, onChange, readOnly } = inlineProps, { languages } = useInternationalizedArrayContext(), languageKeysInUse = useMemo(
-    () => {
-      var _a;
-      return (_a = parentValue == null ? void 0 : parentValue.map((v) => v._key)) != null ? _a : [];
-    },
+    () => parentValue?.map((v) => v._key) ?? [],
     [parentValue]
-  ), keyIsValid = languages != null && languages.length ? languages.find((l) => l.id === value._key) : !1, handleKeyChange = useCallback(
+  ), keyIsValid = languages?.length ? languages.find((l) => l.id === value._key) : !1, handleKeyChange = useCallback(
     (event) => {
-      var _a;
-      const languageId = (_a = event == null ? void 0 : event.currentTarget) == null ? void 0 : _a.value;
-      !value || !(languages != null && languages.length) || !languages.find((l) => l.id === languageId) || onChange([set(languageId, ["_key"])]);
+      const languageId = event?.currentTarget?.value;
+      !value || !languages?.length || !languages.find((l) => l.id === languageId) || onChange([set(languageId, ["_key"])]);
     },
     [onChange, value, languages]
   ), handleUnset = useCallback(() => {
@@ -564,9 +555,9 @@ var object = (config) => {
     title: `Internationalized array ${type}`,
     type: "object",
     components: {
+      // @ts-expect-error - fix typings
       item: InternationalizedInput
     },
-    // @ts-expect-error - Address this typing issue with the inner object
     fields: [
       typeof type == "string" ? (
         // Define a simple field if all we have is the name as a string
@@ -652,10 +643,13 @@ const internationalizedArray = definePlugin((config) => {
           (field) => field.type.name
         ).some(
           (name) => name.startsWith("internationalizedArray")
-        ) ? props.renderDefault(props) : InternationalizedArrayProvider({
-          ...props,
-          internationalizedArray: pluginConfig
-        })
+        ) ? props.renderDefault(props) : /* @__PURE__ */ jsx(
+          InternationalizedArrayProvider,
+          {
+            ...props,
+            internationalizedArray: pluginConfig
+          }
+        )
       }
     },
     // Register custom schema types for the outer array and the inner object