sanity-plugin-internationalized-array 1.10.9 → 2.0.0

package/lib/index.mjs

@@ -0,0 +1,657 @@
+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 { 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 { useMemo, useCallback, createContext, useContext, useDeferredValue, memo, 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 = {
+  languages: [],
+  select: {},
+  defaultLanguages: [],
+  fieldTypes: [],
+  apiVersion: "2022-11-27",
+  buttonLocations: ["field"],
+  buttonAddAll: !0
+};
+function createValueSchemaTypeName(schemaType) {
+  return `${schemaType.name}Value`;
+}
+function AddButtons(props) {
+  const { languages, readOnly, value, onClick } = props;
+  return languages.length > 0 ? /* @__PURE__ */ jsx(Grid, { columns: Math.min(languages.length, MAX_COLUMNS), gap: 2, children: languages.map((language) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      tone: "primary",
+      mode: "ghost",
+      fontSize: 1,
+      disabled: readOnly || !!(value != null && value.find((item) => item._key === language.id)),
+      text: language.id.toUpperCase(),
+      icon: languages.length > MAX_COLUMNS ? void 0 : AddIcon,
+      value: language.id,
+      onClick
+    },
+    language.id
+  )) }) : null;
+}
+function DocumentAddButtons(props) {
+  const { filteredLanguages } = useInternationalizedArrayContext(), { fields } = props.schemaType, value = isSanityDocument(props.value) ? props.value : void 0, toast = useToast(), { onChange } = useDocumentPane(), internationalizedArrayFields = useMemo(
+    () => fields.filter(
+      (field) => field.type.name.startsWith("internationalizedArray")
+    ),
+    [fields]
+  ), handleDocumentButtonClick = useCallback(
+    (event) => {
+      const languageId = event.currentTarget.value;
+      if (!languageId) {
+        toast.push({
+          status: "error",
+          title: "No language selected"
+        });
+        return;
+      }
+      if (internationalizedArrayFields.length === 0) {
+        toast.push({
+          status: "error",
+          title: "No internationalizedArray fields found in document root"
+        });
+        return;
+      }
+      const patches = internationalizedArrayFields.filter(
+        (field) => {
+          const fieldValue = value == null ? void 0 : value[field.name];
+          return !(fieldValue && Array.isArray(fieldValue) && fieldValue.find((v) => v._key === languageId));
+        }
+      ).map((field) => {
+        const fieldKey = field.name;
+        return [
+          setIfMissing([], [fieldKey]),
+          insert(
+            [
+              {
+                _key: languageId,
+                _type: createValueSchemaTypeName(field.type)
+              }
+            ],
+            "after",
+            [fieldKey, -1]
+          )
+        ];
+      }).flat();
+      onChange(PatchEvent.from(patches));
+    },
+    [internationalizedArrayFields, onChange, toast, value]
+  );
+  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,
+      {
+        languages: filteredLanguages,
+        readOnly: !1,
+        value: void 0,
+        onClick: handleDocumentButtonClick
+      }
+    )
+  ] });
+}
+const getSelectedValue = (select, document) => {
+  if (!select || !document)
+    return {};
+  const selection = select || {}, selectedValue = {};
+  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
+    )), selectedValue[key] = value;
+  }
+  return selectedValue;
+}, InternationalizedArrayContext = createContext({
+  ...CONFIG_DEFAULT,
+  languages: [],
+  filteredLanguages: []
+});
+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(
+    () => getSelectedValue(internationalizedArray2.select, deferredDocument),
+    [internationalizedArray2.select, deferredDocument]
+  ), languages = Array.isArray(internationalizedArray2.languages) ? internationalizedArray2.languages : suspend$1(
+    // eslint-disable-next-line require-await
+    async () => typeof internationalizedArray2.languages == "function" ? internationalizedArray2.languages(client, selectedValue) : internationalizedArray2.languages,
+    [version, namespace, selectedValue, workspace],
+    { equal }
+  ), { selectedLanguageIds, options: languageFilterOptions } = useLanguageFilterStudioContext(), filteredLanguages = useMemo(() => {
+    const documentType = deferredDocument ? deferredDocument._type : void 0;
+    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,
+          {
+            schemaType: props.schemaType,
+            value: props.value
+          }
+        ),
+        props.renderDefault(props)
+      ] }) : props.renderDefault(props)
+    }
+  );
+}
+var Preload = memo(function(props) {
+  const client = useClient({ apiVersion: props.apiVersion });
+  return Array.isArray(peek({})) || preload(
+    async () => Array.isArray(props.languages) ? props.languages : props.languages(client, {})
+  ), null;
+});
+function checkAllLanguagesArePresent(languages, value) {
+  const filteredLanguageIds = languages.map((l) => l.id), languagesInUseIds = value ? value.map((v) => v._key) : [];
+  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";
+}
+function createAddLanguagePatches(config) {
+  const {
+    addLanguageKeys,
+    schemaType,
+    languages,
+    filteredLanguages,
+    value,
+    path = []
+  } = config, itemBase = { _type: createValueSchemaTypeName(schemaType) }, newItems = Array.isArray(addLanguageKeys) && addLanguageKeys.length > 0 ? (
+    // Just one for this language
+    addLanguageKeys.map((id) => ({ ...itemBase, _key: id }))
+  ) : (
+    // Or one for every missing language
+    filteredLanguages.filter(
+      (language) => value != null && 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) : [];
+  return newItems.map((item) => {
+    const languageIndex = languages.findIndex((l) => item._key === l.id), remainingLanguages = languages.slice(languageIndex + 1), nextLanguageIndex = languagesInUse.findIndex(
+      (l) => (
+        // eslint-disable-next-line max-nested-callbacks
+        remainingLanguages.find((r) => r.id === l._key)
+      )
+    );
+    return nextLanguageIndex < 0 ? languagesInUse.push(item) : languagesInUse.splice(nextLanguageIndex, 0, item), nextLanguageIndex < 0 ? (
+      // No next language (-1), add to end of array
+      insert([item], "after", [...path, nextLanguageIndex])
+    ) : (
+      // Next language found, insert before that
+      insert([item], "before", [...path, nextLanguageIndex])
+    );
+  });
+}
+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 { schemaType, path } = fieldActionProps, addLanguageKeys = [language.id], patches = createAddLanguagePatches({
+      addLanguageKeys,
+      schemaType,
+      languages,
+      filteredLanguages,
+      value,
+      path
+    });
+    onChange(PatchEvent.from([setIfMissing([], path), ...patches]));
+  }, [language.id, value, onChange]);
+  return {
+    type: "action",
+    icon: AddIcon,
+    onAction,
+    title: language.title,
+    hidden,
+    disabled
+  };
+}), AddMissingTranslationsFieldAction = (fieldActionProps, { languages, filteredLanguages }) => {
+  const value = useFormValue(fieldActionProps.path), disabled = value && value.length === filteredLanguages.length, hidden = checkAllLanguagesArePresent(filteredLanguages, value), { onChange } = useDocumentPane(), onAction = useCallback(() => {
+    const { schemaType, path } = fieldActionProps, patches = createAddLanguagePatches({
+      addLanguageKeys: [],
+      schemaType,
+      languages,
+      filteredLanguages,
+      value,
+      path
+    });
+    onChange(PatchEvent.from([setIfMissing([], path), ...patches]));
+  }, [fieldActionProps, filteredLanguages, languages, onChange, value]);
+  return {
+    type: "action",
+    icon: AddIcon,
+    onAction,
+    title: createAddAllTitle(value, filteredLanguages),
+    disabled,
+    hidden
+  };
+}, 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(
+      "internationalizedArray"
+    ), { languages, filteredLanguages } = useInternationalizedArrayContext(), translateFieldActions = createTranslateFieldActions(
+      fieldActionProps,
+      { languages, filteredLanguages }
+    );
+    return {
+      type: "group",
+      icon: TranslateIcon,
+      title: "Add Translation",
+      renderAsButton: !0,
+      children: isInternationalizedArrayField ? [
+        ...translateFieldActions,
+        AddMissingTranslationsFieldAction(fieldActionProps, {
+          languages,
+          filteredLanguages
+        })
+      ] : [],
+      hidden: !isInternationalizedArrayField
+    };
+  }
+});
+function camelCase(string) {
+  return string.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+}
+function titleCase(string) {
+  return string.split(" ").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+}
+function pascalCase(string) {
+  return titleCase(camelCase(string));
+}
+function createFieldName(name, addValue = !1) {
+  return addValue ? ["internationalizedArray", pascalCase(name), "Value"].join("") : ["internationalizedArray", pascalCase(name)].join("");
+}
+const schemaExample = {
+  languages: [
+    { id: "en", title: "English" },
+    { id: "no", title: "Norsk" }
+  ]
+};
+function Feedback() {
+  return /* @__PURE__ */ jsx(Card, { tone: "caution", border: !0, radius: 2, padding: 3, children: /* @__PURE__ */ jsxs(Stack, { space: 4, children: [
+    /* @__PURE__ */ jsxs(Text, { children: [
+      "An array of language objects must be passed into the",
+      " ",
+      /* @__PURE__ */ jsx("code", { children: "internationalizedArray" }),
+      " helper function, each with an",
+      " ",
+      /* @__PURE__ */ jsx("code", { children: "id" }),
+      " and ",
+      /* @__PURE__ */ jsx("code", { children: "title" }),
+      " field. Example:"
+    ] }),
+    /* @__PURE__ */ jsx(Card, { padding: 2, border: !0, radius: 2, children: /* @__PURE__ */ jsx(Code, { size: 1, language: "javascript", children: JSON.stringify(schemaExample, null, 2) }) })
+  ] }) });
+}
+function InternationalizedArray(props) {
+  const { members, value, schemaType, onChange } = props, readOnly = typeof schemaType.readOnly == "boolean" ? schemaType.readOnly : !1, toast = useToast(), {
+    languages,
+    filteredLanguages,
+    defaultLanguages,
+    buttonAddAll,
+    buttonLocations
+  } = useInternationalizedArrayContext(), { selectedLanguageIds, options: languageFilterOptions } = useLanguageFilterStudioContext(), documentType = useFormValue(["_type"]), languageFilterEnabled = typeof documentType == "string" && languageFilterOptions.documentTypes.includes(documentType), filteredMembers = useMemo(
+    () => languageFilterEnabled ? members.filter((member) => {
+      if (member.kind !== "item")
+        return !1;
+      const valueMember = member.item.members[0];
+      return valueMember.kind !== "field" ? !1 : languageFilterOptions.filterField(
+        member.item.schemaType,
+        valueMember,
+        selectedLanguageIds
+      );
+    }) : members,
+    [languageFilterEnabled, members, languageFilterOptions, selectedLanguageIds]
+  ), handleAddLanguage = useCallback(
+    (param) => {
+      var _a;
+      if (!(filteredLanguages != null && 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({
+        addLanguageKeys,
+        schemaType,
+        languages,
+        filteredLanguages,
+        value
+      });
+      onChange([setIfMissing([]), ...patches]);
+    },
+    [filteredLanguages, languages, onChange, schemaType, value]
+  ), documentCreatedAt = useFormValue(["_createdAt"]), hasAddedDefaultLanguages = useRef(!!documentCreatedAt);
+  useEffect(() => {
+    const shouldAddDefaultLanguages = !hasAddedDefaultLanguages.current && !value && !documentCreatedAt && Array.isArray(defaultLanguages) && defaultLanguages.length > 0;
+    return shouldAddDefaultLanguages && handleAddLanguage(defaultLanguages), () => {
+      shouldAddDefaultLanguages && (hasAddedDefaultLanguages.current = !0);
+    };
+  }, [defaultLanguages, documentCreatedAt, handleAddLanguage, value]);
+  const handleRestoreOrder = useCallback(() => {
+    if (!(value != null && value.length) || !(languages != null && languages.length))
+      return;
+    const updatedValue = value.reduce((acc, v) => {
+      const newIndex = languages.findIndex((l) => l.id === (v == null ? void 0 : v._key));
+      return newIndex > -1 && (acc[newIndex] = v), acc;
+    }, []).filter(Boolean);
+    (value == null ? void 0 : 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)) : [],
+    [languages, value]
+  ), languagesOutOfOrder = useMemo(() => !(value != null && 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]
+  );
+  useEffect(() => {
+    languagesOutOfOrder.length > 0 && allKeysAreLanguages && handleRestoreOrder();
+  }, [languagesOutOfOrder, allKeysAreLanguages, handleRestoreOrder]);
+  const allLanguagesArePresent = useMemo(
+    () => checkAllLanguagesArePresent(filteredLanguages, value),
+    [filteredLanguages, value]
+  );
+  if (!languagesAreValid)
+    return /* @__PURE__ */ jsx(Feedback, {});
+  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
+    !allLanguagesArePresent
+  ), fieldHasMembers = (members == null ? void 0 : members.length) > 0;
+  return /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+    fieldHasMembers ? /* @__PURE__ */ jsx(Fragment, { children: filteredMembers.map((member) => member.kind === "item" ? /* @__PURE__ */ createElement(
+      ArrayOfObjectsItem,
+      {
+        ...props,
+        key: member.key,
+        member
+      }
+    ) : /* @__PURE__ */ jsx(MemberItemError, { member }, member.key)) }) : null,
+    !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,
+        {
+          languages: filteredLanguages,
+          value,
+          readOnly,
+          onClick: handleAddLanguage
+        }
+      ),
+      buttonAddAll ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          tone: "primary",
+          mode: "ghost",
+          disabled: readOnly || allLanguagesArePresent,
+          icon: AddIcon,
+          text: createAddAllTitle(value, filteredLanguages),
+          onClick: handleAddLanguage
+        }
+      ) : null
+    ] }) : null
+  ] });
+}
+function getLanguagesFieldOption(schemaType) {
+  var _a;
+  return schemaType ? ((_a = schemaType.options) == null ? void 0 : _a.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);
+  return defineField({
+    name: arrayName,
+    title: "Internationalized array",
+    type: "array",
+    components: {
+      input: InternationalizedArray
+    },
+    // These options are required for validation rules – not the custom input component
+    options: { apiVersion, select, languages },
+    of: [
+      defineField({
+        ...typeof type == "string" ? {} : type,
+        name: objectName,
+        type: objectName
+      })
+    ],
+    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);
+      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(
+        (item) => !contextLanguages.find((language) => item._key === language.id)
+      ) : [];
+      if (nonLanguageKeys.length)
+        return {
+          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] } : {
+        ...acc,
+        [cur._key]: [cur]
+      }, {}) : {}, duplicateValues = Object.values(valuesByLanguage).filter((item) => (item == null ? void 0 : item.length) > 1).flat();
+      return duplicateValues.length ? {
+        message: "There can only be one field per language",
+        paths: duplicateValues.map((item) => [{ _key: item._key }])
+      } : !0;
+    })
+  });
+};
+function InternationalizedField(props) {
+  return props.schemaType.name === "reference" && props.value ? props.renderDefault({
+    ...props,
+    title: "",
+    level: 0
+  }) : props.children;
+}
+function getToneFromValidation(validations) {
+  if (!(validations != null && validations.length))
+    return;
+  const validationLevels = validations.map((v) => v.level);
+  if (validationLevels.includes("error"))
+    return "critical";
+  if (validationLevels.includes("warning"))
+    return "caution";
+}
+function InternationalizedInput(props) {
+  const parentValue = useFormValue(
+    props.path.slice(0, -1)
+  ), inlineProps = {
+    ...props.inputProps,
+    // This is the magic that makes inline editing work?
+    members: props.inputProps.members.filter(
+      (m) => m.kind === "field" && m.name === "value"
+    ),
+    // This just overrides the type
+    // 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]
+  ), keyIsValid = languages != null && 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"])]);
+    },
+    [onChange, value, languages]
+  ), handleUnset = useCallback(() => {
+    onChange(unset());
+  }, [onChange]);
+  return languages ? /* @__PURE__ */ jsx(Card, { paddingTop: 2, tone: getToneFromValidation(validation), children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+    /* @__PURE__ */ jsx(Card, { tone: "inherit", children: keyIsValid ? /* @__PURE__ */ jsx(Label, { muted: !0, size: 1, children: value._key }) : /* @__PURE__ */ jsx(
+      MenuButton,
+      {
+        button: /* @__PURE__ */ jsx(Button, { fontSize: 1, text: `Change "${value._key}"` }),
+        id: `${value._key}-change-key`,
+        menu: /* @__PURE__ */ jsx(Menu, { children: languages.map((language) => /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            disabled: languageKeysInUse.includes(language.id),
+            fontSize: 1,
+            text: language.id.toLocaleUpperCase(),
+            value: language.id,
+            onClick: handleKeyChange
+          },
+          language.id
+        )) }),
+        popover: { portal: !0 }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+      /* @__PURE__ */ jsx(Card, { flex: 1, tone: "inherit", children: props.inputProps.renderInput(props.inputProps) }),
+      /* @__PURE__ */ jsx(Card, { tone: "inherit", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          mode: "bleed",
+          icon: RemoveCircleIcon,
+          tone: "critical",
+          disabled: readOnly,
+          onClick: handleUnset
+        }
+      ) })
+    ] })
+  ] }) }) : /* @__PURE__ */ jsx(Spinner, {});
+}
+var object = (config) => {
+  const { type } = config, typeName = typeof type == "string" ? type : type.name, objectName = createFieldName(typeName, !0);
+  return defineField({
+    name: objectName,
+    title: `Internationalized array ${type}`,
+    type: "object",
+    components: {
+      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
+        defineField({
+          name: "value",
+          type,
+          components: {
+            field: InternationalizedField
+          }
+        })
+      ) : (
+        // Pass in the configured options, but overwrite the name
+        {
+          ...type,
+          name: "value",
+          components: {
+            field: InternationalizedField
+          }
+        }
+      )
+    ],
+    preview: {
+      select: {
+        title: "value",
+        subtitle: "_key"
+      }
+    }
+  });
+};
+function flattenSchemaType(schemaType) {
+  return isDocumentSchemaType(schemaType) ? extractInnerFields(schemaType.fields, [], 3) : (console.error("Schema type is not a document"), []);
+}
+function extractInnerFields(fields, path, maxDepth) {
+  return path.length >= maxDepth ? [] : fields.reduce((acc, field) => {
+    const thisFieldWithPath = { path: [...path, field.name], ...field };
+    if (field.type.jsonType === "object") {
+      const innerFields = extractInnerFields(
+        field.type.fields,
+        [...path, field.name],
+        maxDepth
+      );
+      return [...acc, thisFieldWithPath, ...innerFields];
+    } else if (field.type.jsonType === "array" && field.type.of.length && field.type.of.some((item) => "fields" in item)) {
+      const innerFields = extractInnerFields(
+        // @ts-expect-error - Fix TS assertion for array fields
+        field.type.of[0].fields,
+        [...path, field.name],
+        maxDepth
+      );
+      return [...acc, thisFieldWithPath, ...innerFields];
+    }
+    return [...acc, thisFieldWithPath];
+  }, []);
+}
+const internationalizedArray = definePlugin((config) => {
+  const pluginConfig = { ...CONFIG_DEFAULT, ...config }, {
+    apiVersion = "2022-11-27",
+    select,
+    languages,
+    fieldTypes,
+    defaultLanguages,
+    buttonLocations
+  } = pluginConfig;
+  return {
+    name: "sanity-plugin-internationalized-array",
+    // Preload languages for use throughout the Studio
+    studio: Array.isArray(languages) ? void 0 : {
+      components: {
+        layout: (props) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Preload, { apiVersion, languages }),
+          props.renderDefault(props)
+        ] })
+      }
+    },
+    // Optional: render "add language" buttons as field actions
+    document: {
+      unstable_fieldActions: buttonLocations.includes("unstable__fieldAction") ? (prev) => [...prev, internationalizedArrayFieldAction] : void 0
+    },
+    // Wrap document editor with a language provider
+    form: {
+      components: {
+        input: (props) => !(props.id === "root" && isObjectInputProps(props)) || !flattenSchemaType(props.schemaType).map(
+          (field) => field.type.name
+        ).some(
+          (name) => name.startsWith("internationalizedArray")
+        ) ? props.renderDefault(props) : InternationalizedArrayProvider({
+          ...props,
+          internationalizedArray: pluginConfig
+        })
+      }
+    },
+    // Register custom schema types for the outer array and the inner object
+    schema: {
+      types: [
+        ...fieldTypes.map(
+          (type) => array({ type, apiVersion, select, languages, defaultLanguages })
+        ),
+        ...fieldTypes.map((type) => object({ type }))
+      ]
+    }
+  };
+});
+export {
+  clear,
+  internationalizedArray
+};
+//# sourceMappingURL=index.mjs.map