sanity-plugin-internationalized-array 3.0.2 → 3.1.0

package/README.md

@@ -135,6 +135,12 @@ The "Add translation" buttons can be positioned in one or multiple locations by
 - `unstable__fieldAction` Inside a Field Action (currently unstable)
 - `document` Above the document fields, these buttons will add a new language item to every internationalized array field that can be found at the **root of the document**. Nested internationalized arrays are not yet supported.
 
+To control the "Add translation" button titles, configure `languageDisplay`. This also affects language field labels.
+
+- `codeOnly` (default) Shows only the language codes (id)
+- `titleOnly` Shows the language title
+- `titleAndCode` Shows the language title with the code in parentheses
+
 The "Add all languages" button can be hidden with `buttonAddAll`.
 
 ```ts
@@ -147,7 +153,8 @@ import {internationalizedArray} from 'sanity-plugin-internationalized-array'
     internationalizedArray({
       // ...other config
       buttonLocations: ['field', 'unstable__fieldAction', 'document'], // default ['field']
-      buttonAddAll: false // default true
+      buttonAddAll: false, // default true
+      languageDisplay: 'codeOnly' // codeOnly (default) | titleOnly | titleAndCode
     })
   ]
 })

package/lib/index.d.mts

@@ -42,6 +42,8 @@ export declare type LanguageCallback = (
   selectedValue: Record<string, unknown>
 ) => Promise<Language[]>
 
+export declare type LanguageDisplay = 'titleOnly' | 'codeOnly' | 'titleAndCode'
+
 export declare type PluginConfig = {
   /**
    * https://www.sanity.io/docs/api-versioning
@@ -132,6 +134,11 @@ export declare type PluginConfig = {
    * @defaultValue true
    * */
   buttonAddAll?: boolean
+  /**
+   * How to display the languages on buttons and fields
+   * @defaultValue 'code'
+   * */
+  languageDisplay?: LanguageDisplay
 }
 
 export declare type Value = {

package/lib/index.d.ts

@@ -42,6 +42,8 @@ export declare type LanguageCallback = (
   selectedValue: Record<string, unknown>
 ) => Promise<Language[]>
 
+export declare type LanguageDisplay = 'titleOnly' | 'codeOnly' | 'titleAndCode'
+
 export declare type PluginConfig = {
   /**
    * https://www.sanity.io/docs/api-versioning
@@ -132,6 +134,11 @@ export declare type PluginConfig = {
    * @defaultValue true
    * */
   buttonAddAll?: boolean
+  /**
+   * How to display the languages on buttons and fields
+   * @defaultValue 'code'
+   * */
+  languageDisplay?: LanguageDisplay
 }
 
 export declare type Value = {

package/lib/index.esm.js

@@ -3,32 +3,45 @@ import { suspend as suspend$1 } from "suspend-react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 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 { Grid, Button, useToast, Stack, Box, Text, Card, Code, Spinner, Label, MenuButton, Menu, MenuItem, Flex } from "@sanity/ui";
 import equal from "fast-deep-equal";
 import { memo, useCallback, createContext, useContext, useDeferredValue, useMemo, 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 = "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 = {
+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 = {
+  codeOnly: 5,
+  titleOnly: 4,
+  titleAndCode: 3
+}, CONFIG_DEFAULT = {
   languages: [],
   select: {},
   defaultLanguages: [],
   fieldTypes: [],
   apiVersion: "2022-11-27",
   buttonLocations: ["field"],
-  buttonAddAll: !0
-}, getDocumentsToTranslate = (value, rootPath = []) => {
+  buttonAddAll: !0,
+  languageDisplay: "codeOnly"
+};
+var __defProp$9 = Object.defineProperty, __defProps$8 = Object.defineProperties, __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$9 = Object.getOwnPropertySymbols, __hasOwnProp$9 = Object.prototype.hasOwnProperty, __propIsEnum$9 = Object.prototype.propertyIsEnumerable, __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$9 = (a, b) => {
+  for (var prop in b || (b = {}))
+    __hasOwnProp$9.call(b, prop) && __defNormalProp$9(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b))
+      __propIsEnum$9.call(b, prop) && __defNormalProp$9(a, prop, b[prop]);
+  return a;
+}, __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+const getDocumentsToTranslate = (value, rootPath = []) => {
   if (Array.isArray(value)) {
     const arrayRootPath = [...rootPath], internationalizedValues = value.filter((item) => {
       if (Array.isArray(item)) return !1;
       if (typeof item == "object") {
-        const type = item?._type;
-        return type?.startsWith("internationalizedArray") && type?.endsWith("Value");
+        const type = item == null ? void 0 : item._type;
+        return (type == null ? void 0 : type.startsWith("internationalizedArray")) && (type == null ? void 0 : type.endsWith("Value"));
       }
       return !1;
     });
-    return internationalizedValues.length > 0 ? internationalizedValues.map((internationalizedValue) => ({
-      ...internationalizedValue,
+    return internationalizedValues.length > 0 ? internationalizedValues.map((internationalizedValue) => __spreadProps$8(__spreadValues$9({}, internationalizedValue), {
       path: arrayRootPath,
       pathString: arrayRootPath.join(".")
     })) : value.length > 0 ? value.map(
@@ -46,22 +59,39 @@ const namespace = "sanity-plugin-internationalized-array", version = "v1", prelo
   }
   return [];
 };
+function getLanguageDisplay(languageDisplay, title, code) {
+  return languageDisplay === "codeOnly" ? code.toUpperCase() : languageDisplay === "titleOnly" ? title : languageDisplay === "titleAndCode" ? `${title} (${code.toUpperCase()})` : title;
+}
 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,
+  const { languages, readOnly, value, onClick } = props, { languageDisplay } = useInternationalizedArrayContext();
+  return languages.length > 0 ? /* @__PURE__ */ jsx(
+    Grid,
     {
-      tone: "primary",
-      mode: "ghost",
-      fontSize: 1,
-      disabled: readOnly || !!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;
+      columns: Math.min(languages.length, MAX_COLUMNS[languageDisplay]),
+      gap: 2,
+      children: languages.map((language) => {
+        const languageTitle = getLanguageDisplay(
+          languageDisplay,
+          language.title,
+          language.id
+        );
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            tone: "primary",
+            mode: "ghost",
+            fontSize: 1,
+            disabled: readOnly || !!(value != null && value.find((item) => item._key === language.id)),
+            text: languageTitle,
+            icon: languages.length > MAX_COLUMNS[languageDisplay] && languageDisplay === "codeOnly" ? void 0 : AddIcon,
+            value: language.id,
+            onClick
+          },
+          language.id
+        );
+      })
+    }
+  ) : null;
 }
 var AddButtons$1 = memo(AddButtons);
 function DocumentAddButtons(props) {
@@ -76,7 +106,7 @@ function DocumentAddButtons(props) {
         return;
       }
       const alreadyTranslated = documentsToTranslation.filter(
-        (translation) => translation?._key === languageId
+        (translation) => (translation == null ? void 0 : translation._key) === languageId
       ), removeDuplicates = documentsToTranslation.reduce((filteredTranslations, translation) => alreadyTranslated.filter(
         (alreadyTranslation) => alreadyTranslation.pathString === translation.pathString
       ).length > 0 || filteredTranslations.filter(
@@ -128,20 +158,28 @@ 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?._type === "reference" && "_ref" in item : !0
+      (item) => typeof item == "object" ? (item == null ? void 0 : item._type) === "reference" && "_ref" in item : !0
     )), selectedValue[key] = value;
   }
   return selectedValue;
-}, InternationalizedArrayContext = createContext({
-  ...CONFIG_DEFAULT,
+};
+var __defProp$8 = Object.defineProperty, __defProps$7 = Object.defineProperties, __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$8 = Object.getOwnPropertySymbols, __hasOwnProp$8 = Object.prototype.hasOwnProperty, __propIsEnum$8 = Object.prototype.propertyIsEnumerable, __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$8 = (a, b) => {
+  for (var prop in b || (b = {}))
+    __hasOwnProp$8.call(b, prop) && __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b))
+      __propIsEnum$8.call(b, prop) && __defNormalProp$8(a, prop, b[prop]);
+  return a;
+}, __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+const InternationalizedArrayContext = createContext(__spreadProps$7(__spreadValues$8({}, CONFIG_DEFAULT), {
   languages: [],
   filteredLanguages: []
-});
+}));
 function useInternationalizedArrayContext() {
   return useContext(InternationalizedArrayContext);
 }
 function InternationalizedArrayProvider(props) {
-  const { internationalizedArray: internationalizedArray2 } = props, client = useClient({ apiVersion: internationalizedArray2.apiVersion }), workspace = useWorkspace(), { formState } = useDocumentPane(), deferredDocument = useDeferredValue(formState?.value), selectedValue = useMemo(
+  const { internationalizedArray: internationalizedArray2 } = props, client = useClient({ apiVersion: internationalizedArray2.apiVersion }), workspace = useWorkspace(), { formState } = useDocumentPane(), deferredDocument = useDeferredValue(formState == null ? void 0 : formState.value), selectedValue = useMemo(
     () => getSelectedValue(internationalizedArray2.select, deferredDocument),
     [internationalizedArray2.select, deferredDocument]
   ), languages = Array.isArray(internationalizedArray2.languages) ? internationalizedArray2.languages : suspend$1(
@@ -155,7 +193,7 @@ function InternationalizedArrayProvider(props) {
       (language) => selectedLanguageIds.includes(language.id)
     ) : languages;
   }, [deferredDocument, languageFilterOptions, languages, selectedLanguageIds]), showDocumentButtons = internationalizedArray2.buttonLocations.includes("document"), context = useMemo(
-    () => ({ ...internationalizedArray2, languages, filteredLanguages }),
+    () => __spreadProps$7(__spreadValues$8({}, internationalizedArray2), { languages, filteredLanguages }),
     [filteredLanguages, internationalizedArray2, languages]
   );
   return /* @__PURE__ */ jsx(InternationalizedArrayContext.Provider, { value: context, children: showDocumentButtons ? /* @__PURE__ */ jsxs(Stack, { space: 5, children: [
@@ -174,11 +212,19 @@ function checkAllLanguagesArePresent(languages, value) {
   return languagesInUseIds.length === filteredLanguageIds.length && languagesInUseIds.every((l) => filteredLanguageIds.includes(l));
 }
 function createAddAllTitle(value, languages) {
-  return value?.length ? `Add missing ${languages.length - value.length === 1 ? "language" : "languages"}` : languages.length === 1 ? `Add ${languages[0].title} Field` : "Add all 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 createValueSchemaTypeName(schemaType) {
   return `${schemaType.name}Value`;
 }
+var __defProp$7 = Object.defineProperty, __defProps$6 = Object.defineProperties, __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$7 = Object.getOwnPropertySymbols, __hasOwnProp$7 = Object.prototype.hasOwnProperty, __propIsEnum$7 = Object.prototype.propertyIsEnumerable, __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$7 = (a, b) => {
+  for (var prop in b || (b = {}))
+    __hasOwnProp$7.call(b, prop) && __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b))
+      __propIsEnum$7.call(b, prop) && __defNormalProp$7(a, prop, b[prop]);
+  return a;
+}, __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
 function createAddLanguagePatches(config) {
   const {
     addLanguageKeys,
@@ -187,15 +233,13 @@ function createAddLanguagePatches(config) {
     filteredLanguages,
     value,
     path = []
-  } = config, itemBase = { _type: createValueSchemaTypeName(schemaType) }, newItems = Array.isArray(addLanguageKeys) && addLanguageKeys.length > 0 ? addLanguageKeys.map((id) => ({
-    ...itemBase,
+  } = config, itemBase = { _type: createValueSchemaTypeName(schemaType) }, newItems = Array.isArray(addLanguageKeys) && addLanguageKeys.length > 0 ? addLanguageKeys.map((id) => __spreadProps$6(__spreadValues$7({}, itemBase), {
     _key: id
   })) : filteredLanguages.filter(
-    (language) => value?.length ? !value.find((v) => v._key === language.id) : !0
-  ).map((language) => ({
-    ...itemBase,
+    (language) => value != null && value.length ? !value.find((v) => v._key === language.id) : !0
+  ).map((language) => __spreadProps$6(__spreadValues$7({}, itemBase), {
     _key: language.id
-  })), languagesInUse = value?.length ? value.map((v) => v) : [];
+  })), 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) => (
@@ -213,7 +257,7 @@ function createAddLanguagePatches(config) {
   });
 }
 const createTranslateFieldActions = (fieldActionProps, { languages, filteredLanguages }) => languages.map((language) => {
-  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 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,
@@ -255,7 +299,8 @@ const createTranslateFieldActions = (fieldActionProps, { languages, filteredLang
 }, internationalizedArrayFieldAction = defineDocumentFieldAction({
   name: "internationalizedArray",
   useAction(fieldActionProps) {
-    const isInternationalizedArrayField = fieldActionProps?.schemaType?.type?.name.startsWith(
+    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,
@@ -311,6 +356,14 @@ function Feedback() {
     /* @__PURE__ */ jsx(Card, { padding: 2, border: !0, radius: 2, children: /* @__PURE__ */ jsx(Code, { size: 1, language: "javascript", children: JSON.stringify(schemaExample, null, 2) }) })
   ] }) });
 }
+var __defProp$6 = Object.defineProperty, __defProps$5 = Object.defineProperties, __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$6 = Object.getOwnPropertySymbols, __hasOwnProp$6 = Object.prototype.hasOwnProperty, __propIsEnum$6 = Object.prototype.propertyIsEnumerable, __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$6 = (a, b) => {
+  for (var prop in b || (b = {}))
+    __hasOwnProp$6.call(b, prop) && __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b))
+      __propIsEnum$6.call(b, prop) && __defNormalProp$6(a, prop, b[prop]);
+  return a;
+}, __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 function InternationalizedArray(props) {
   const { members, value, schemaType, onChange } = props, readOnly = typeof schemaType.readOnly == "boolean" ? schemaType.readOnly : !1, toast = useToast(), {
     languages,
@@ -332,9 +385,10 @@ function InternationalizedArray(props) {
     [languageFilterEnabled, members, languageFilterOptions, selectedLanguageIds]
   ), handleAddLanguage = useCallback(
     async (param) => {
-      if (!filteredLanguages?.length)
+      var _a;
+      if (!(filteredLanguages != null && filteredLanguages.length))
         return;
-      const addLanguageKeys = Array.isArray(param) ? param : [param?.currentTarget?.value].filter(Boolean), patches = createAddLanguagePatches({
+      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,
@@ -356,23 +410,23 @@ function InternationalizedArray(props) {
     defaultLanguages
   ]);
   const handleRestoreOrder = useCallback(() => {
-    if (!value?.length || !languages?.length)
+    if (!(value != null && value.length) || !(languages != null && languages.length))
       return;
     const updatedValue = value.reduce((acc, v) => {
-      const newIndex = languages.findIndex((l) => l.id === v?._key);
+      const newIndex = languages.findIndex((l) => l.id === (v == null ? void 0 : v._key));
       return newIndex > -1 && (acc[newIndex] = v), acc;
     }, []).filter(Boolean);
-    value?.length !== updatedValue.length && toast.push({
+    (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?.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)) : [],
+  }, [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?.length || !languagesInUse.length ? [] : value.map(
+  ), 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?.length || languages?.length && languages.every((item) => item.id && item.title),
+    () => !(languages != null && languages.length) || (languages == null ? void 0 : languages.length) && languages.every((item) => item.id && item.title),
     [languages]
   );
   useEffect(() => {
@@ -387,17 +441,16 @@ function InternationalizedArray(props) {
   const addButtonsAreVisible = (
     // Plugin was configured to display buttons here (default!)
     buttonLocations.includes("field") && // There's at least one language visible
-    filteredLanguages?.length > 0 && // Not every language has a value yet
+    (filteredLanguages == null ? void 0 : filteredLanguages.length) > 0 && // Not every language has a value yet
     !allLanguagesArePresent
-  ), fieldHasMembers = members?.length > 0;
+  ), 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,
+      __spreadProps$5(__spreadValues$6({}, 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: [
@@ -425,9 +478,17 @@ function InternationalizedArray(props) {
   ] });
 }
 function getLanguagesFieldOption(schemaType) {
-  return schemaType ? schemaType.options?.languages || getLanguagesFieldOption(schemaType.type) : void 0;
+  var _a;
+  return schemaType ? ((_a = schemaType.options) == null ? void 0 : _a.languages) || getLanguagesFieldOption(schemaType.type) : void 0;
 }
-var array = (config) => {
+var __defProp$5 = Object.defineProperty, __defProps$4 = Object.defineProperties, __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$5 = Object.getOwnPropertySymbols, __hasOwnProp$5 = Object.prototype.hasOwnProperty, __propIsEnum$5 = Object.prototype.propertyIsEnumerable, __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$5 = (a, b) => {
+  for (var prop in b || (b = {}))
+    __hasOwnProp$5.call(b, prop) && __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b))
+      __propIsEnum$5.call(b, prop) && __defNormalProp$5(a, prop, b[prop]);
+  return a;
+}, __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b)), 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,
@@ -443,11 +504,10 @@ var array = (config) => {
       languages
     },
     of: [
-      defineField({
-        ...typeof type == "string" ? {} : type,
+      defineField(__spreadProps$4(__spreadValues$5({}, typeof type == "string" ? {} : type), {
         name: objectName,
         type: objectName
-      })
+      }))
     ],
     // @ts-expect-error - fix typings
     validation: (rule) => rule.custom(async (value, context) => {
@@ -455,10 +515,10 @@ var array = (config) => {
         return !0;
       const selectedValue = getSelectedValue(select, context.document), client = context.getClient({ apiVersion });
       let contextLanguages = [];
-      const languagesFieldOption = getLanguagesFieldOption(context?.type);
+      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?.length ? value.filter(
+      const nonLanguageKeys = value != null && value.length ? value.filter(
         (item) => !contextLanguages.find((language) => item._key === language.id)
       ) : [];
       if (nonLanguageKeys.length)
@@ -466,26 +526,31 @@ 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?.length ? value.filter((item) => !!item?._key).reduce((acc, cur) => acc[cur._key] ? { ...acc, [cur._key]: [...acc[cur._key], cur] } : {
-        ...acc,
+      const valuesByLanguage = value != null && value.length ? value.filter((item) => !!(item != null && item._key)).reduce((acc, cur) => acc[cur._key] ? __spreadProps$4(__spreadValues$5({}, acc), { [cur._key]: [...acc[cur._key], cur] }) : __spreadProps$4(__spreadValues$5({}, acc), {
         [cur._key]: [cur]
-      }, {}) : {}, duplicateValues = Object.values(valuesByLanguage).filter((item) => item?.length > 1).flat();
+      }), {}) : {}, 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;
     })
   });
-};
+}, __defProp$4 = Object.defineProperty, __defProps$3 = Object.defineProperties, __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$4 = Object.getOwnPropertySymbols, __hasOwnProp$4 = Object.prototype.hasOwnProperty, __propIsEnum$4 = Object.prototype.propertyIsEnumerable, __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$4 = (a, b) => {
+  for (var prop in b || (b = {}))
+    __hasOwnProp$4.call(b, prop) && __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b))
+      __propIsEnum$4.call(b, prop) && __defNormalProp$4(a, prop, b[prop]);
+  return a;
+}, __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
 function InternationalizedField(props) {
-  return props.schemaType.name === "reference" && props.value ? props.renderDefault({
-    ...props,
+  return props.schemaType.name === "reference" && props.value ? props.renderDefault(__spreadProps$3(__spreadValues$4({}, props), {
     title: "",
     level: 0
-  }) : props.children;
+  })) : props.children;
 }
 function getToneFromValidation(validations) {
-  if (!validations?.length)
+  if (!(validations != null && validations.length))
     return;
   const validationLevels = validations.map((v) => v.level);
   if (validationLevels.includes("error"))
@@ -493,11 +558,18 @@ function getToneFromValidation(validations) {
   if (validationLevels.includes("warning"))
     return "caution";
 }
+var __defProp$3 = Object.defineProperty, __defProps$2 = Object.defineProperties, __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$3 = Object.getOwnPropertySymbols, __hasOwnProp$3 = Object.prototype.hasOwnProperty, __propIsEnum$3 = Object.prototype.propertyIsEnumerable, __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$3 = (a, b) => {
+  for (var prop in b || (b = {}))
+    __hasOwnProp$3.call(b, prop) && __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b))
+      __propIsEnum$3.call(b, prop) && __defNormalProp$3(a, prop, b[prop]);
+  return a;
+}, __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
 function InternationalizedInput(props) {
   const parentValue = useFormValue(
     props.path.slice(0, -1)
-  ), inlineProps = {
-    ...props.inputProps,
+  ), inlineProps = __spreadProps$2(__spreadValues$3({}, props.inputProps), {
     // This is the magic that makes inline editing work?
     members: props.inputProps.members.filter(
       (m) => m.kind === "field" && m.name === "value"
@@ -505,34 +577,41 @@ function InternationalizedInput(props) {
     // 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(
-    () => parentValue?.map((v) => v._key) ?? [],
+  }), { validation, value, onChange, readOnly } = inlineProps, { languages, languageDisplay } = useInternationalizedArrayContext(), languageKeysInUse = useMemo(
+    () => {
+      var _a;
+      return (_a = parentValue == null ? void 0 : parentValue.map((v) => v._key)) != null ? _a : [];
+    },
     [parentValue]
-  ), keyIsValid = languages?.length ? languages.find((l) => l.id === value._key) : !1, handleKeyChange = useCallback(
+  ), keyIsValid = languages != null && languages.length ? languages.find((l) => l.id === value._key) : !1, handleKeyChange = useCallback(
     (event) => {
-      const languageId = event?.currentTarget?.value;
-      !value || !languages?.length || !languages.find((l) => l.id === languageId) || onChange([set(languageId, ["_key"])]);
+      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(
+  if (!languages)
+    return /* @__PURE__ */ jsx(Spinner, {});
+  const language = languages.find((l) => l.id === value._key), languageTitle = keyIsValid && language ? getLanguageDisplay(languageDisplay, language.title, language.id) : "";
+  return /* @__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: languageTitle }) : /* @__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(
+        menu: /* @__PURE__ */ jsx(Menu, { children: languages.map((lang) => /* @__PURE__ */ jsx(
           MenuItem,
           {
-            disabled: languageKeysInUse.includes(language.id),
+            disabled: languageKeysInUse.includes(lang.id),
             fontSize: 1,
-            text: language.id.toLocaleUpperCase(),
-            value: language.id,
+            text: lang.id.toLocaleUpperCase(),
+            value: lang.id,
             onClick: handleKeyChange
           },
-          language.id
+          lang.id
         )) }),
         popover: { portal: !0 }
       }
@@ -550,9 +629,16 @@ function InternationalizedInput(props) {
         }
       ) })
     ] })
-  ] }) }) : /* @__PURE__ */ jsx(Spinner, {});
+  ] }) });
 }
-var object = (config) => {
+var __defProp$2 = Object.defineProperty, __defProps$1 = Object.defineProperties, __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$2 = Object.getOwnPropertySymbols, __hasOwnProp$2 = Object.prototype.hasOwnProperty, __propIsEnum$2 = Object.prototype.propertyIsEnumerable, __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    __hasOwnProp$2.call(b, prop) && __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b))
+      __propIsEnum$2.call(b, prop) && __defNormalProp$2(a, prop, b[prop]);
+  return a;
+}, __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b)), object = (config) => {
   const { type } = config, typeName = typeof type == "string" ? type : type.name, objectName = createFieldName(typeName, !0);
   return defineField({
     name: objectName,
@@ -574,13 +660,12 @@ var object = (config) => {
         })
       ) : (
         // Pass in the configured options, but overwrite the name
-        {
-          ...type,
+        __spreadProps$1(__spreadValues$2({}, type), {
           name: "value",
           components: {
             field: InternationalizedField
           }
-        }
+        })
       )
     ],
     preview: {
@@ -590,13 +675,20 @@ var object = (config) => {
       }
     }
   });
+}, __defProp$1 = Object.defineProperty, __getOwnPropSymbols$1 = Object.getOwnPropertySymbols, __hasOwnProp$1 = Object.prototype.hasOwnProperty, __propIsEnum$1 = Object.prototype.propertyIsEnumerable, __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    __hasOwnProp$1.call(b, prop) && __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b))
+      __propIsEnum$1.call(b, prop) && __defNormalProp$1(a, prop, b[prop]);
+  return a;
 };
 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 };
+    const thisFieldWithPath = __spreadValues$1({ path: [...path, field.name] }, field);
     if (field.type.jsonType === "object") {
       const innerFields = extractInnerFields(
         field.type.fields,
@@ -618,8 +710,16 @@ function extractInnerFields(fields, path, maxDepth) {
     return [...acc, thisFieldWithPath];
   }, []);
 }
+var __defProp = Object.defineProperty, __defProps = Object.defineProperties, __getOwnPropDescs = Object.getOwnPropertyDescriptors, __getOwnPropSymbols = Object.getOwnPropertySymbols, __hasOwnProp = Object.prototype.hasOwnProperty, __propIsEnum = Object.prototype.propertyIsEnumerable, __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    __hasOwnProp.call(b, prop) && __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b))
+      __propIsEnum.call(b, prop) && __defNormalProp(a, prop, b[prop]);
+  return a;
+}, __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const internationalizedArray = definePlugin((config) => {
-  const pluginConfig = { ...CONFIG_DEFAULT, ...config }, {
+  const pluginConfig = __spreadValues(__spreadValues({}, CONFIG_DEFAULT), config), {
     apiVersion = "2022-11-27",
     select,
     languages,
@@ -651,10 +751,9 @@ const internationalizedArray = definePlugin((config) => {
           (name) => name.startsWith("internationalizedArray")
         ) ? props.renderDefault(props) : /* @__PURE__ */ jsx(
           InternationalizedArrayProvider,
-          {
-            ...props,
+          __spreadProps(__spreadValues({}, props), {
             internationalizedArray: pluginConfig
-          }
+          })
         )
       }
     },