sanity-plugin-internationalized-array 4.0.3 → 5.0.0-canary.1

package/dist/index.js

@@ -1,11 +1,12 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useLanguageFilterStudioContext, languageFilter } from "@sanity/language-filter";
 import { isSanityDocument, useSchema, setIfMissing, insert, PatchEvent, useClient, useWorkspace, useFormValue, defineDocumentFieldAction, ArrayOfObjectsItem, MemberItemError, set, defineField, unset, isDocumentSchemaType, definePlugin, isObjectInputProps } from "sanity";
 import { c } from "react/compiler-runtime";
-import { useLanguageFilterStudioContext } from "@sanity/language-filter";
-import { Grid, Button, useToast, Stack, Box, Text, Card, Code, Spinner, Label, MenuButton, Menu, MenuItem, Flex, Tooltip } from "@sanity/ui";
+import { Grid, Button, useToast, Stack, Box, Text, Card, Code, Flex, Spinner, Label, MenuButton, Menu, MenuItem, Tooltip } from "@sanity/ui";
 import { createContext, useContext, useDeferredValue, use, useCallback, useEffect, createElement } from "react";
 import { useDocumentPane } from "sanity/structure";
-import { AddIcon, TranslateIcon, RemoveCircleIcon } from "@sanity/icons";
+import { randomKey } from "@sanity/util/content";
+import { AddIcon, TranslateIcon, WarningOutlineIcon, RemoveCircleIcon } from "@sanity/icons";
 import { get, upperFirst, camelCase } from "lodash-es";
 const namespace = "sanity-plugin-internationalized-array", functionCache = /* @__PURE__ */ new Map(), functionKeyCache = /* @__PURE__ */ new WeakMap(), promiseCache = /* @__PURE__ */ new Map();
 function stringifyCacheKey(key) {
@@ -51,7 +52,7 @@ const preloadWithKey = (fn, key) => {
 }, setFunctionCache = (fn, selectedValue, languages, workspaceId) => {
   const key = createFunctionCacheKey(fn, selectedValue, workspaceId);
   functionCache.set(key, languages);
-}, LANGUAGE_FIELD_NAME = "_key", MAX_COLUMNS = {
+}, LANGUAGE_FIELD_NAME = "language", MAX_COLUMNS = {
   codeOnly: 5,
   titleOnly: 4,
   titleAndCode: 3
@@ -63,7 +64,10 @@ const preloadWithKey = (fn, key) => {
   apiVersion: "2025-10-15",
   buttonLocations: ["field"],
   buttonAddAll: !0,
-  languageDisplay: "codeOnly"
+  languageDisplay: "codeOnly",
+  languageFilter: {
+    documentTypes: []
+  }
 }, getDocumentsToTranslate = (value, rootPath = []) => {
   if (Array.isArray(value)) {
     const arrayRootPath = [...rootPath], internationalizedValues = value.filter((item) => {
@@ -101,13 +105,13 @@ function AddButtons(props) {
     languageDisplay
   } = useInternationalizedArrayContext();
   let t0;
-  return $[0] !== handleClick || $[1] !== languageDisplay || $[2] !== languages || $[3] !== readOnly || $[4] !== value ? (t0 = languages.length > 0 ? /* @__PURE__ */ jsx(Grid, { columns: Math.min(languages.length, MAX_COLUMNS[languageDisplay]), gap: 2, children: languages.map((language) => {
+  return $[0] !== handleClick || $[1] !== languageDisplay || $[2] !== languages || $[3] !== readOnly || $[4] !== value ? (t0 = languages.length > 0 ? /* @__PURE__ */ jsx(Grid, { columns: Math.min(languages.length, MAX_COLUMNS[languageDisplay]), gap: 2, "data-testid": "add-buttons-grid", children: languages.map((language) => {
     const languageTitle = getLanguageDisplay(languageDisplay, language.title, language.id);
     return /* @__PURE__ */ jsx(Button, { tone: "primary", mode: "ghost", fontSize: 1, "data-testid": `add-${language.id}`, disabled: readOnly || !!value?.find((item) => item[LANGUAGE_FIELD_NAME] === language.id), text: languageTitle, icon: languages.length > MAX_COLUMNS[languageDisplay] && languageDisplay === "codeOnly" ? void 0 : AddIcon, value: language.id, onClick: () => handleClick(language.id) }, language.id);
   }) }) : null, $[0] = handleClick, $[1] = languageDisplay, $[2] = languages, $[3] = readOnly, $[4] = value, $[5] = t0) : t0 = $[5], t0;
 }
 function DocumentAddButtons(props) {
-  const $ = c(13), {
+  const $ = c(14), {
     filteredLanguages
   } = useInternationalizedArrayContext(), value = isSanityDocument(props.value) ? props.value : void 0, toast = useToast(), {
     onChange
@@ -127,7 +131,7 @@ function DocumentAddButtons(props) {
       return [];
     const schemaType = schema.get(typeName);
     if (schemaType && "fields" in schemaType) {
-      const valueField = schemaType.fields.find(_temp$2);
+      const valueField = schemaType.fields.find(_temp$3);
       if (valueField) {
         const fieldType = valueField.type;
         if (fieldType?.jsonType === "array" || fieldType?.name === "array" || fieldType?.type === "array" || fieldType?.of !== void 0 || fieldType?.name && arrayBasedTypes.has(fieldType.name))
@@ -137,18 +141,20 @@ function DocumentAddButtons(props) {
   }, $[2] = schema, $[3] = t1) : t1 = $[3];
   const getInitialValueForType = t1;
   let t2;
-  $[4] !== documentsToTranslation || $[5] !== getInitialValueForType || $[6] !== onChange || $[7] !== toast ? (t2 = async (languageId) => {
+  $[4] !== documentsToTranslation || $[5] !== filteredLanguages || $[6] !== getInitialValueForType || $[7] !== onChange || $[8] !== toast ? (t2 = async (languageId) => {
     const alreadyTranslated = documentsToTranslation.filter((translation) => translation?.[LANGUAGE_FIELD_NAME] === languageId), removeDuplicates = documentsToTranslation.reduce((filteredTranslations, translation_0) => (alreadyTranslated.filter((alreadyTranslation) => alreadyTranslation.pathString === translation_0.pathString).length > 0 || filteredTranslations.filter((filteredTranslation) => filteredTranslation.path === translation_0.path).length > 0 || filteredTranslations.push(translation_0), filteredTranslations), []);
     if (removeDuplicates.length === 0) {
+      const language = filteredLanguages.find((l) => l.id === languageId);
       toast.push({
-        status: "error",
-        title: "No internationalizedArray fields found in document root"
+        status: "warning",
+        title: `No missing translations for ${language?.title || languageId} found.`
       });
       return;
     }
     const patches = [];
     for (const toTranslate of removeDuplicates) {
       const path = toTranslate.path, initialValue = getInitialValueForType(toTranslate._type), ifMissing = setIfMissing([], path), insertValue = insert([{
+        _key: randomKey(),
         [LANGUAGE_FIELD_NAME]: languageId,
         _type: toTranslate._type,
         value: initialValue
@@ -156,17 +162,17 @@ function DocumentAddButtons(props) {
       patches.push(ifMissing), patches.push(insertValue);
     }
     onChange(PatchEvent.from(patches.flat()));
-  }, $[4] = documentsToTranslation, $[5] = getInitialValueForType, $[6] = onChange, $[7] = toast, $[8] = t2) : t2 = $[8];
+  }, $[4] = documentsToTranslation, $[5] = filteredLanguages, $[6] = getInitialValueForType, $[7] = onChange, $[8] = toast, $[9] = t2) : t2 = $[9];
   const handleDocumentButtonClick = t2;
   let t3;
-  $[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t3 = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "Add translation to internationalized fields" }) }), $[9] = t3) : t3 = $[9];
+  $[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t3 = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "Add translation to internationalized fields" }) }), $[10] = t3) : t3 = $[10];
   let t4;
-  return $[10] !== filteredLanguages || $[11] !== handleDocumentButtonClick ? (t4 = /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+  return $[11] !== filteredLanguages || $[12] !== handleDocumentButtonClick ? (t4 = /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
     t3,
     /* @__PURE__ */ jsx(AddButtons, { languages: filteredLanguages, readOnly: !1, value: void 0, handleClick: handleDocumentButtonClick })
-  ] }), $[10] = filteredLanguages, $[11] = handleDocumentButtonClick, $[12] = t4) : t4 = $[12], t4;
+  ] }), $[11] = filteredLanguages, $[12] = handleDocumentButtonClick, $[13] = t4) : t4 = $[13], t4;
 }
-function _temp$2(f) {
+function _temp$3(f) {
   return f.name === "value";
 }
 const getSelectedValue = (select, document) => {
@@ -343,8 +349,10 @@ function createAddLanguagePatches(config) {
   const itemBase = {
     _type: type
   }, newItems = Array.isArray(addLanguageKeys) && addLanguageKeys.length > 0 ? addLanguageKeys.filter((id) => value?.length ? !value.find((v) => v[LANGUAGE_FIELD_NAME] === id) : !0).map((id) => Object.assign({}, itemBase, {
+    _key: randomKey(),
     [LANGUAGE_FIELD_NAME]: id
   })) : filteredLanguages.filter((language) => value?.length ? !value.find((v) => v[LANGUAGE_FIELD_NAME] === language.id) : !0).map((language) => Object.assign({}, itemBase, {
+    _key: randomKey(),
     [LANGUAGE_FIELD_NAME]: language.id
   })), languagesInUse = value?.length ? value.map((v) => v) : [];
   return newItems.map((item) => {
@@ -475,14 +483,86 @@ 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) }) })
   ] }) }), $[3] = t3) : t3 = $[3], t3;
 }
+function MigrationBanner(t0) {
+  const $ = c(19), {
+    value,
+    languages
+  } = t0;
+  useToast();
+  let t2;
+  bb0: {
+    if (!value?.length || !languages?.length) {
+      let t33;
+      $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t33 = [], $[0] = t33) : t33 = $[0], t2 = t33;
+      break bb0;
+    }
+    let t32;
+    $[1] !== languages ? (t32 = new Set(languages.map(_temp$2)), $[1] = languages, $[2] = t32) : t32 = $[2];
+    const languageIds = t32;
+    let t42;
+    if ($[3] !== languageIds || $[4] !== value) {
+      let t52;
+      $[6] !== languageIds ? (t52 = (item) => item._key && languageIds.has(item._key) && !item[LANGUAGE_FIELD_NAME], $[6] = languageIds, $[7] = t52) : t52 = $[7], t42 = value.filter(t52), $[3] = languageIds, $[4] = value, $[5] = t42;
+    } else
+      t42 = $[5];
+    t2 = t42;
+  }
+  const itemsNeedingMigration = t2;
+  if (!(itemsNeedingMigration.length > 0))
+    return null;
+  let t3;
+  $[8] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t3 = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { size: 1, children: /* @__PURE__ */ jsx(WarningOutlineIcon, {}) }) }), $[8] = t3) : t3 = $[8];
+  let t4;
+  $[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t4 = /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "Data migration required" }), $[9] = t4) : t4 = $[9];
+  const t5 = itemsNeedingMigration.length === 1 ? "" : "s", t6 = itemsNeedingMigration.length === 1 ? "needs" : "need";
+  let t7;
+  $[10] !== itemsNeedingMigration.length || $[11] !== t5 || $[12] !== t6 ? (t7 = /* @__PURE__ */ jsxs(Text, { size: 1, muted: !0, children: [
+    itemsNeedingMigration.length,
+    " item",
+    t5,
+    " ",
+    t6,
+    " to be migrated to the v5 format."
+  ] }), $[10] = itemsNeedingMigration.length, $[11] = t5, $[12] = t6, $[13] = t7) : t7 = $[13];
+  let t8;
+  $[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t8 = /* @__PURE__ */ jsx("code", { children: "_key" }), $[14] = t8) : t8 = $[14];
+  let t9;
+  $[15] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t9 = /* @__PURE__ */ jsx("code", { children: "language" }), $[15] = t9) : t9 = $[15];
+  let t10;
+  $[16] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t10 = /* @__PURE__ */ jsx(Box, { marginTop: 2, children: /* @__PURE__ */ jsxs(Text, { size: 1, children: [
+    "This field still uses the v4 format where language is stored in ",
+    t8,
+    ". Migrate to the v5 format where language is stored in ",
+    t9,
+    ".",
+    " ",
+    /* @__PURE__ */ jsx("a", { rel: "noopener noreferrer", target: "_blank", href: "https://github.com/sanity-io/plugins/blob/main/plugins/sanity-plugin-internationalized-array/README.md#migrate-from-v4-to-v5", children: "Learn more" }),
+    "."
+  ] }) }), $[16] = t10) : t10 = $[16];
+  let t11;
+  return $[17] !== t7 ? (t11 = /* @__PURE__ */ jsx(Card, { tone: "caution", padding: 3, radius: 2, border: !0, children: /* @__PURE__ */ jsxs(Flex, { gap: 3, align: "center", children: [
+    t3,
+    /* @__PURE__ */ jsxs(Stack, { space: 2, flex: 1, children: [
+      t4,
+      t7,
+      t10
+    ] })
+  ] }) }), $[17] = t7, $[18] = t11) : t11 = $[18], t11;
+}
+function _temp$2(l) {
+  return l.id;
+}
 function InternationalizedArray(props) {
-  const $ = c(89), {
+  const $ = c(105), {
     members,
     value: _value,
     schemaType,
     onChange,
     readOnly: documentReadOnly
-  } = props, value = _value, readOnly = typeof schemaType.readOnly == "boolean" ? schemaType.readOnly : !1, toast = useToast(), {
+  } = props, value = _value;
+  let t0;
+  $[0] !== value ? (t0 = value?.filter(_temp$1) ?? [], $[0] = value, $[1] = t0) : t0 = $[1];
+  const itemsNeedingMigration = t0.length > 0, readOnly = typeof schemaType.readOnly == "boolean" ? schemaType.readOnly : !1, toast = useToast(), {
     languages,
     filteredLanguages,
     defaultLanguages,
@@ -492,22 +572,22 @@ function InternationalizedArray(props) {
     selectedLanguageIds,
     options: languageFilterOptions
   } = useLanguageFilterStudioContext();
-  let t0;
-  $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t0 = ["_type"], $[0] = t0) : t0 = $[0];
-  const documentType = useFormValue(t0);
   let t1;
-  $[1] !== documentType || $[2] !== languageFilterOptions ? (t1 = typeof documentType == "string" && languageFilterOptions.documentTypes.includes(documentType), $[1] = documentType, $[2] = languageFilterOptions, $[3] = t1) : t1 = $[3];
-  const languageFilterEnabled = t1;
+  $[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t1 = ["_type"], $[2] = t1) : t1 = $[2];
+  const documentType = useFormValue(t1);
   let t2;
-  $[4] !== languageFilterEnabled || $[5] !== languageFilterOptions || $[6] !== members || $[7] !== selectedLanguageIds ? (t2 = languageFilterEnabled ? members.filter((member) => {
+  $[3] !== documentType || $[4] !== languageFilterOptions ? (t2 = typeof documentType == "string" && languageFilterOptions.documentTypes.includes(documentType), $[3] = documentType, $[4] = languageFilterOptions, $[5] = t2) : t2 = $[5];
+  const languageFilterEnabled = t2;
+  let t3;
+  $[6] !== languageFilterEnabled || $[7] !== languageFilterOptions || $[8] !== members || $[9] !== selectedLanguageIds || $[10] !== value ? (t3 = languageFilterEnabled ? members.filter((member) => {
     if (member.kind !== "item")
       return !1;
     const valueMember = member.item.members[0];
-    return !valueMember || valueMember.kind !== "field" ? !1 : languageFilterOptions.filterField(member.item.schemaType, valueMember, selectedLanguageIds);
-  }) : members, $[4] = languageFilterEnabled, $[5] = languageFilterOptions, $[6] = members, $[7] = selectedLanguageIds, $[8] = t2) : t2 = $[8];
-  const filteredMembers = t2;
-  let t3;
-  $[9] !== filteredLanguages || $[10] !== languages || $[11] !== onChange || $[12] !== schemaType.name || $[13] !== value ? (t3 = (addLanguageKeys) => {
+    return !valueMember || valueMember.kind !== "field" ? !1 : languageFilterOptions.filterField(member.item.schemaType, valueMember, selectedLanguageIds, value[member.index]);
+  }) : members, $[6] = languageFilterEnabled, $[7] = languageFilterOptions, $[8] = members, $[9] = selectedLanguageIds, $[10] = value, $[11] = t3) : t3 = $[11];
+  const filteredMembers = t3;
+  let t4;
+  $[12] !== filteredLanguages || $[13] !== languages || $[14] !== onChange || $[15] !== schemaType.name || $[16] !== value ? (t4 = (addLanguageKeys) => {
     if (!filteredLanguages?.length)
       return;
     const patches = createAddLanguagePatches({
@@ -518,122 +598,139 @@ function InternationalizedArray(props) {
       value
     });
     onChange([setIfMissing([]), ...patches]);
-  }, $[9] = filteredLanguages, $[10] = languages, $[11] = onChange, $[12] = schemaType.name, $[13] = value, $[14] = t3) : t3 = $[14];
-  const handleAddLanguage = t3, {
+  }, $[12] = filteredLanguages, $[13] = languages, $[14] = onChange, $[15] = schemaType.name, $[16] = value, $[17] = t4) : t4 = $[17];
+  const handleAddLanguage = t4, {
     isDeleting
   } = useDocumentPane();
-  let t4;
+  let t5;
   bb0: {
     if (!value?.length) {
-      let t53;
-      $[15] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t53 = [], $[15] = t53) : t53 = $[15], t4 = t53;
+      let t63;
+      $[18] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t63 = [], $[18] = t63) : t63 = $[18], t5 = t63;
       break bb0;
     }
-    let t52;
-    $[16] !== value ? (t52 = value.map(_temp$1).filter(Boolean), $[16] = value, $[17] = t52) : t52 = $[17], t4 = t52;
-  }
-  const addedLanguages = t4;
-  let t5;
-  if ($[18] !== addedLanguages || $[19] !== defaultLanguages || $[20] !== languages) {
     let t62;
-    $[22] !== languages ? (t62 = (language) => languages.find((l) => l.id === language), $[22] = languages, $[23] = t62) : t62 = $[23];
+    $[19] !== languages ? (t62 = new Set(languages.map(_temp2$1)), $[19] = languages, $[20] = t62) : t62 = $[20];
+    const languageIds = t62;
     let t72;
-    $[24] !== addedLanguages ? (t72 = (language_0) => addedLanguages.includes(language_0), $[24] = addedLanguages, $[25] = t72) : t72 = $[25], t5 = defaultLanguages.filter(t62).every(t72), $[18] = addedLanguages, $[19] = defaultLanguages, $[20] = languages, $[21] = t5;
+    if ($[21] !== languageIds || $[22] !== value) {
+      let t82;
+      $[24] !== languageIds ? (t82 = (v_0) => v_0[LANGUAGE_FIELD_NAME] || (v_0._key && languageIds.has(v_0._key) ? v_0._key : null), $[24] = languageIds, $[25] = t82) : t82 = $[25], t72 = value.map(t82).filter(_temp3$1), $[21] = languageIds, $[22] = value, $[23] = t72;
+    } else
+      t72 = $[23];
+    t5 = t72;
+  }
+  const addedLanguages = t5;
+  let t6;
+  if ($[26] !== addedLanguages || $[27] !== defaultLanguages || $[28] !== languages) {
+    let t72;
+    $[30] !== languages ? (t72 = (language_2) => languages.find((l) => l.id === language_2), $[30] = languages, $[31] = t72) : t72 = $[31];
+    let t82;
+    $[32] !== addedLanguages ? (t82 = (language_3) => addedLanguages.includes(language_3), $[32] = addedLanguages, $[33] = t82) : t82 = $[33], t6 = defaultLanguages.filter(t72).every(t82), $[26] = addedLanguages, $[27] = defaultLanguages, $[28] = languages, $[29] = t6;
   } else
-    t5 = $[21];
-  const hasAddedDefaultLanguages = t5;
-  let t6, t7;
-  $[26] !== addedLanguages || $[27] !== defaultLanguages || $[28] !== documentReadOnly || $[29] !== handleAddLanguage || $[30] !== hasAddedDefaultLanguages || $[31] !== isDeleting || $[32] !== languages ? (t6 = () => {
-    if (!isDeleting && !hasAddedDefaultLanguages) {
-      const languagesToAdd = defaultLanguages.filter((language_1) => !addedLanguages.includes(language_1)).filter((language_2) => languages.find((l_0) => l_0.id === language_2)), timeout = setTimeout(() => {
+    t6 = $[29];
+  const hasAddedDefaultLanguages = t6;
+  let t7, t8;
+  $[34] !== addedLanguages || $[35] !== defaultLanguages || $[36] !== documentReadOnly || $[37] !== handleAddLanguage || $[38] !== hasAddedDefaultLanguages || $[39] !== isDeleting || $[40] !== itemsNeedingMigration || $[41] !== languages ? (t7 = () => {
+    if (!isDeleting && !hasAddedDefaultLanguages && !itemsNeedingMigration) {
+      const languagesToAdd = defaultLanguages.filter((language_4) => !addedLanguages.includes(language_4)).filter((language_5) => languages.find((l_0) => l_0.id === language_5)), timeout = setTimeout(() => {
         documentReadOnly || handleAddLanguage(languagesToAdd);
       });
       return () => clearTimeout(timeout);
     }
-  }, t7 = [isDeleting, hasAddedDefaultLanguages, handleAddLanguage, defaultLanguages, addedLanguages, languages, documentReadOnly], $[26] = addedLanguages, $[27] = defaultLanguages, $[28] = documentReadOnly, $[29] = handleAddLanguage, $[30] = hasAddedDefaultLanguages, $[31] = isDeleting, $[32] = languages, $[33] = t6, $[34] = t7) : (t6 = $[33], t7 = $[34]), useEffect(t6, t7);
-  let t8;
-  $[35] !== languages || $[36] !== onChange || $[37] !== toast || $[38] !== value ? (t8 = () => {
+  }, t8 = [isDeleting, hasAddedDefaultLanguages, handleAddLanguage, defaultLanguages, addedLanguages, languages, documentReadOnly, itemsNeedingMigration], $[34] = addedLanguages, $[35] = defaultLanguages, $[36] = documentReadOnly, $[37] = handleAddLanguage, $[38] = hasAddedDefaultLanguages, $[39] = isDeleting, $[40] = itemsNeedingMigration, $[41] = languages, $[42] = t7, $[43] = t8) : (t7 = $[42], t8 = $[43]), useEffect(t7, t8);
+  let t9;
+  $[44] !== languages || $[45] !== onChange || $[46] !== toast || $[47] !== value ? (t9 = () => {
     if (!value?.length || !languages?.length)
       return;
-    const updatedValue = value.reduce((acc, v_0) => {
-      const newIndex = languages.findIndex((l_1) => l_1.id === v_0?.[LANGUAGE_FIELD_NAME]);
-      return newIndex > -1 && (acc[newIndex] = v_0), acc;
+    const updatedValue = value.reduce((acc, v_1) => {
+      const newIndex = languages.findIndex((l_1) => l_1.id === v_1?.[LANGUAGE_FIELD_NAME]);
+      return newIndex > -1 && (acc[newIndex] = v_1), acc;
     }, []).filter(Boolean);
     value?.length !== updatedValue.length && toast.push({
       title: "There was an error reordering languages",
       status: "warning"
     }), onChange(set(updatedValue));
-  }, $[35] = languages, $[36] = onChange, $[37] = toast, $[38] = value, $[39] = t8) : t8 = $[39];
-  const handleRestoreOrder = t8;
-  let t9;
+  }, $[44] = languages, $[45] = onChange, $[46] = toast, $[47] = value, $[48] = t9) : t9 = $[48];
+  const handleRestoreOrder = t9;
+  let t10;
   bb1: {
     if (!value?.length || !languages?.length) {
-      t9 = !0;
+      t10 = !0;
       break bb1;
     }
-    let t102;
-    $[40] !== languages || $[41] !== value ? (t102 = value?.every((v_1) => languages.find((l_2) => l_2?.id === v_1?.[LANGUAGE_FIELD_NAME])), $[40] = languages, $[41] = value, $[42] = t102) : t102 = $[42], t9 = t102;
+    let t112;
+    $[49] !== languages || $[50] !== value ? (t112 = value?.every((v_2) => languages.find((l_2) => l_2?.id === v_2?.[LANGUAGE_FIELD_NAME])), $[49] = languages, $[50] = value, $[51] = t112) : t112 = $[51], t10 = t112;
   }
-  const allKeysAreLanguages = t9;
-  let t10;
-  $[43] !== languages || $[44] !== value ? (t10 = languages && languages.length > 1 ? languages.filter((l_3) => value?.find((v_2) => v_2[LANGUAGE_FIELD_NAME] === l_3.id)) : [], $[43] = languages, $[44] = value, $[45] = t10) : t10 = $[45];
-  const languagesInUse = t10;
+  const allKeysAreLanguages = t10;
   let t11;
+  $[52] !== languages || $[53] !== value ? (t11 = languages && languages.length > 1 ? languages.filter((l_3) => value?.find((v_3) => v_3[LANGUAGE_FIELD_NAME] === l_3.id)) : [], $[52] = languages, $[53] = value, $[54] = t11) : t11 = $[54];
+  const languagesInUse = t11;
+  let t12;
   bb2: {
     if (!value?.length || !languagesInUse.length) {
-      let t123;
-      $[46] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t123 = [], $[46] = t123) : t123 = $[46], t11 = t123;
+      let t133;
+      $[55] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t133 = [], $[55] = t133) : t133 = $[55], t12 = t133;
       break bb2;
     }
-    let t122;
-    if ($[47] !== languagesInUse || $[48] !== value) {
-      let t132;
-      $[50] !== languagesInUse ? (t132 = (v_3, vIndex) => vIndex === languagesInUse.findIndex((l_4) => l_4.id === v_3[LANGUAGE_FIELD_NAME]) ? null : v_3, $[50] = languagesInUse, $[51] = t132) : t132 = $[51], t122 = value.map(t132).filter(Boolean), $[47] = languagesInUse, $[48] = value, $[49] = t122;
+    let t132;
+    if ($[56] !== languagesInUse || $[57] !== value) {
+      let t142;
+      $[59] !== languagesInUse ? (t142 = (v_4, vIndex) => vIndex === languagesInUse.findIndex((l_4) => l_4.id === v_4[LANGUAGE_FIELD_NAME]) ? null : v_4, $[59] = languagesInUse, $[60] = t142) : t142 = $[60], t132 = value.map(t142).filter(Boolean), $[56] = languagesInUse, $[57] = value, $[58] = t132;
     } else
-      t122 = $[49];
-    t11 = t122;
+      t132 = $[58];
+    t12 = t132;
   }
-  const languagesOutOfOrder = t11, languagesAreValid = !languages?.length || languages?.length && languages.every(_temp2$1);
-  let t12;
-  $[52] !== allKeysAreLanguages || $[53] !== documentReadOnly || $[54] !== handleRestoreOrder || $[55] !== languagesOutOfOrder.length ? (t12 = () => {
-    languagesOutOfOrder.length > 0 && allKeysAreLanguages && !documentReadOnly && handleRestoreOrder();
-  }, $[52] = allKeysAreLanguages, $[53] = documentReadOnly, $[54] = handleRestoreOrder, $[55] = languagesOutOfOrder.length, $[56] = t12) : t12 = $[56];
+  const languagesOutOfOrder = t12, languagesAreValid = !languages?.length || languages?.length && languages.every(_temp4$1);
   let t13;
-  $[57] !== allKeysAreLanguages || $[58] !== documentReadOnly || $[59] !== handleRestoreOrder || $[60] !== languagesOutOfOrder ? (t13 = [languagesOutOfOrder, allKeysAreLanguages, handleRestoreOrder, documentReadOnly], $[57] = allKeysAreLanguages, $[58] = documentReadOnly, $[59] = handleRestoreOrder, $[60] = languagesOutOfOrder, $[61] = t13) : t13 = $[61], useEffect(t12, t13);
+  $[61] !== allKeysAreLanguages || $[62] !== documentReadOnly || $[63] !== handleRestoreOrder || $[64] !== languagesOutOfOrder.length ? (t13 = () => {
+    languagesOutOfOrder.length > 0 && allKeysAreLanguages && !documentReadOnly && handleRestoreOrder();
+  }, $[61] = allKeysAreLanguages, $[62] = documentReadOnly, $[63] = handleRestoreOrder, $[64] = languagesOutOfOrder.length, $[65] = t13) : t13 = $[65];
   let t14;
-  $[62] !== filteredLanguages || $[63] !== value ? (t14 = checkAllLanguagesArePresent(filteredLanguages, value), $[62] = filteredLanguages, $[63] = value, $[64] = t14) : t14 = $[64];
-  const allLanguagesArePresent = t14;
+  $[66] !== allKeysAreLanguages || $[67] !== documentReadOnly || $[68] !== handleRestoreOrder || $[69] !== languagesOutOfOrder ? (t14 = [languagesOutOfOrder, allKeysAreLanguages, handleRestoreOrder, documentReadOnly], $[66] = allKeysAreLanguages, $[67] = documentReadOnly, $[68] = handleRestoreOrder, $[69] = languagesOutOfOrder, $[70] = t14) : t14 = $[70], useEffect(t13, t14);
+  let t15;
+  $[71] !== filteredLanguages || $[72] !== value ? (t15 = checkAllLanguagesArePresent(filteredLanguages, value), $[71] = filteredLanguages, $[72] = value, $[73] = t15) : t15 = $[73];
+  const allLanguagesArePresent = t15;
   if (!languagesAreValid) {
-    let t152;
-    return $[65] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t152 = /* @__PURE__ */ jsx(Feedback, {}), $[65] = t152) : t152 = $[65], t152;
+    let t162;
+    return $[74] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t162 = /* @__PURE__ */ jsx(Feedback, {}), $[74] = t162) : t162 = $[74], t162;
   }
-  let t15;
-  $[66] !== allLanguagesArePresent || $[67] !== buttonLocations || $[68] !== filteredLanguages?.length ? (t15 = buttonLocations.includes("field") && filteredLanguages?.length > 0 && !allLanguagesArePresent, $[66] = allLanguagesArePresent, $[67] = buttonLocations, $[68] = filteredLanguages?.length, $[69] = t15) : t15 = $[69];
-  const addButtonsAreVisible = t15, fieldHasMembers = members?.length > 0;
   let t16;
-  $[70] !== fieldHasMembers || $[71] !== filteredMembers || $[72] !== props ? (t16 = fieldHasMembers ? /* @__PURE__ */ jsx(Fragment, { children: filteredMembers.map((member_0) => member_0.kind === "item" ? /* @__PURE__ */ createElement(ArrayOfObjectsItem, { ...props, key: member_0.key, member: member_0 }) : /* @__PURE__ */ jsx(MemberItemError, { member: member_0 }, member_0.key)) }) : null, $[70] = fieldHasMembers, $[71] = filteredMembers, $[72] = props, $[73] = t16) : t16 = $[73];
+  $[75] !== allLanguagesArePresent || $[76] !== buttonLocations || $[77] !== filteredLanguages?.length || $[78] !== itemsNeedingMigration ? (t16 = !itemsNeedingMigration && buttonLocations.includes("field") && filteredLanguages?.length > 0 && !allLanguagesArePresent, $[75] = allLanguagesArePresent, $[76] = buttonLocations, $[77] = filteredLanguages?.length, $[78] = itemsNeedingMigration, $[79] = t16) : t16 = $[79];
+  const addButtonsAreVisible = t16, fieldHasMembers = members?.length > 0;
   let t17;
-  $[74] !== addButtonsAreVisible || $[75] !== fieldHasMembers ? (t17 = !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, $[74] = addButtonsAreVisible, $[75] = fieldHasMembers, $[76] = t17) : t17 = $[76];
+  $[80] !== languages || $[81] !== onChange || $[82] !== readOnly || $[83] !== value ? (t17 = /* @__PURE__ */ jsx(MigrationBanner, { value, languages, onChange, readOnly }), $[80] = languages, $[81] = onChange, $[82] = readOnly, $[83] = value, $[84] = t17) : t17 = $[84];
   let t18;
-  $[77] !== addButtonsAreVisible || $[78] !== allLanguagesArePresent || $[79] !== buttonAddAll || $[80] !== filteredLanguages || $[81] !== handleAddLanguage || $[82] !== readOnly || $[83] !== value ? (t18 = addButtonsAreVisible ? /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
-    /* @__PURE__ */ jsx(AddButtons, { languages: filteredLanguages, value, readOnly, handleClick: handleAddLanguage }),
-    buttonAddAll ? /* @__PURE__ */ jsx(Button, { tone: "primary", mode: "ghost", "data-testid": "add-all-languages", disabled: readOnly || allLanguagesArePresent, icon: AddIcon, text: createAddAllTitle(value, filteredLanguages), onClick: () => handleAddLanguage(filteredLanguages.map(_temp3$1)) }) : null
-  ] }) : null, $[77] = addButtonsAreVisible, $[78] = allLanguagesArePresent, $[79] = buttonAddAll, $[80] = filteredLanguages, $[81] = handleAddLanguage, $[82] = readOnly, $[83] = value, $[84] = t18) : t18 = $[84];
+  $[85] !== fieldHasMembers || $[86] !== filteredMembers || $[87] !== props ? (t18 = fieldHasMembers ? /* @__PURE__ */ jsx(Fragment, { children: filteredMembers.map((member_0) => member_0.kind === "item" ? /* @__PURE__ */ createElement(ArrayOfObjectsItem, { ...props, key: member_0.key, member: member_0 }) : /* @__PURE__ */ jsx(MemberItemError, { member: member_0 }, member_0.key)) }) : null, $[85] = fieldHasMembers, $[86] = filteredMembers, $[87] = props, $[88] = t18) : t18 = $[88];
   let t19;
-  return $[85] !== t16 || $[86] !== t17 || $[87] !== t18 ? (t19 = /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
-    t16,
+  $[89] !== addButtonsAreVisible || $[90] !== fieldHasMembers ? (t19 = !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, $[89] = addButtonsAreVisible, $[90] = fieldHasMembers, $[91] = t19) : t19 = $[91];
+  let t20;
+  $[92] !== addButtonsAreVisible || $[93] !== allLanguagesArePresent || $[94] !== buttonAddAll || $[95] !== filteredLanguages || $[96] !== handleAddLanguage || $[97] !== readOnly || $[98] !== value ? (t20 = addButtonsAreVisible ? /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+    /* @__PURE__ */ jsx(AddButtons, { languages: filteredLanguages, value, readOnly, handleClick: handleAddLanguage }),
+    buttonAddAll ? /* @__PURE__ */ jsx(Button, { tone: "primary", mode: "ghost", "data-testid": "add-all-languages", disabled: readOnly || allLanguagesArePresent, icon: AddIcon, text: createAddAllTitle(value, filteredLanguages), onClick: () => handleAddLanguage(filteredLanguages.map(_temp5)) }) : null
+  ] }) : null, $[92] = addButtonsAreVisible, $[93] = allLanguagesArePresent, $[94] = buttonAddAll, $[95] = filteredLanguages, $[96] = handleAddLanguage, $[97] = readOnly, $[98] = value, $[99] = t20) : t20 = $[99];
+  let t21;
+  return $[100] !== t17 || $[101] !== t18 || $[102] !== t19 || $[103] !== t20 ? (t21 = /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
     t17,
-    t18
-  ] }), $[85] = t16, $[86] = t17, $[87] = t18, $[88] = t19) : t19 = $[88], t19;
+    t18,
+    t19,
+    t20
+  ] }), $[100] = t17, $[101] = t18, $[102] = t19, $[103] = t20, $[104] = t21) : t21 = $[104], t21;
 }
-function _temp3$1(language_3) {
-  return language_3.id;
+function _temp5(language_6) {
+  return language_6.id;
 }
-function _temp2$1(item) {
+function _temp4$1(item) {
   return item.id && item.title;
 }
+function _temp3$1(language_1) {
+  return !!language_1;
+}
+function _temp2$1(language) {
+  return language.id;
+}
 function _temp$1(v) {
-  return v[LANGUAGE_FIELD_NAME] ?? v._key;
+  return !v[LANGUAGE_FIELD_NAME];
 }
 function getLanguagesFieldOption(schemaType) {
   return schemaType ? schemaType.options?.languages || getLanguagesFieldOption(schemaType.type) : void 0;
@@ -665,7 +762,19 @@ var array = (config) => {
     })],
     // @ts-expect-error - fix typings
     validation: (rule) => rule.custom(async (value, context) => {
-      if (!value || value.length === 0 || value.length === 1 && !value[0]?.[LANGUAGE_FIELD_NAME])
+      if (!value || value.length === 0)
+        return !0;
+      const itemsMissingLanguage = value.filter((item) => item && !item[LANGUAGE_FIELD_NAME] && item._key);
+      if (itemsMissingLanguage.length > 0)
+        return {
+          message: "Language is required for each array item. Run the migration to update your data from the old format.",
+          paths: itemsMissingLanguage.flatMap((item) => [[{
+            _key: item._key
+          }], [{
+            _key: item._key
+          }, "value"]])
+        };
+      if (value.length === 1 && !value[0]?.[LANGUAGE_FIELD_NAME])
         return !0;
       const selectedValue = getSelectedValue(select, context.document), client = context.getClient({
         apiVersion
@@ -717,7 +826,7 @@ function getToneFromValidation(validations) {
     return "caution";
 }
 function InternationalizedInput(props) {
-  const $ = c(13);
+  const $ = c(11);
   let t0;
   $[0] !== props.path ? (t0 = props.path.slice(0, -1), $[0] = props.path, $[1] = t0) : t0 = $[1];
   const parentValue = useFormValue(t0), originalOnChange = props.inputProps.onChange;
@@ -753,7 +862,7 @@ function InternationalizedInput(props) {
   } = useInternationalizedArrayContext();
   let t2;
   $[5] !== parentValue ? (t2 = parentValue?.map(_temp4) ?? [], $[5] = parentValue, $[6] = t2) : t2 = $[6];
-  const languageKeysInUse = t2, keyIsValid = languages?.length ? languages.find((l) => l.id === value[LANGUAGE_FIELD_NAME]) : !1, handleKeyChange = (event) => {
+  const languageKeysInUse = t2, itemNeedsMigration = !value[LANGUAGE_FIELD_NAME], keyIsValid = languages?.length ? languages.find((l) => l.id === value[LANGUAGE_FIELD_NAME]) : !1, handleKeyChange = (event) => {
     const languageId = event?.currentTarget?.value;
     !value || !languages?.length || !languages.find((l_0) => l_0.id === languageId) || onChange([set(languageId, [LANGUAGE_FIELD_NAME])]);
   }, handleUnset = () => {
@@ -763,17 +872,14 @@ function InternationalizedInput(props) {
     let t32;
     return $[7] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t32 = /* @__PURE__ */ jsx(Spinner, {}), $[7] = t32) : t32 = $[7], t32;
   }
-  const language = languages.find((l_1) => l_1.id === value[LANGUAGE_FIELD_NAME]), languageTitle = keyIsValid && language ? getLanguageDisplay(languageDisplay, language.title, language.id) : "", isDefault = defaultLanguages.includes(value[LANGUAGE_FIELD_NAME]), removeButton = /* @__PURE__ */ jsx(Button, { mode: "bleed", icon: RemoveCircleIcon, tone: "critical", disabled: readOnly || isDefault, onClick: handleUnset }), t3 = getToneFromValidation(validation), t4 = keyIsValid ? /* @__PURE__ */ jsx(Label, { muted: !0, size: 1, children: languageTitle }) : /* @__PURE__ */ jsx(MenuButton, { button: /* @__PURE__ */ jsx(Button, { fontSize: 1, text: `Change "${value[LANGUAGE_FIELD_NAME]}"` }), id: `${value[LANGUAGE_FIELD_NAME]}-change-key`, menu: /* @__PURE__ */ jsx(Menu, { children: languages.map((lang) => /* @__PURE__ */ jsx(MenuItem, { disabled: languageKeysInUse.includes(lang.id), fontSize: 1, text: lang.id.toLocaleUpperCase(), value: lang.id, onClick: handleKeyChange }, lang.id)) }), popover: {
-    portal: !0
-  } });
-  let t5;
-  $[8] !== t4 ? (t5 = /* @__PURE__ */ jsx(Card, { tone: "inherit", children: t4 }), $[8] = t4, $[9] = t5) : t5 = $[9];
-  const T0 = Card, t6 = 1, t7 = "inherit", t8 = props.inputProps.renderInput(inlineProps);
-  let t9;
-  return $[10] !== T0 || $[11] !== t8 ? (t9 = /* @__PURE__ */ jsx(T0, { flex: t6, tone: t7, children: t8 }), $[10] = T0, $[11] = t8, $[12] = t9) : t9 = $[12], /* @__PURE__ */ jsx(Card, { paddingTop: 2, tone: t3, children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
-    t5,
+  const language = languages.find((l_1) => l_1.id === value[LANGUAGE_FIELD_NAME]), languageTitle = keyIsValid && language ? getLanguageDisplay(languageDisplay, language.title, language.id) : "", isDefault = defaultLanguages.includes(value[LANGUAGE_FIELD_NAME]), removeButton = /* @__PURE__ */ jsx(Button, { mode: "bleed", icon: RemoveCircleIcon, tone: "critical", disabled: readOnly || isDefault, onClick: handleUnset }), t3 = getToneFromValidation(validation), T0 = Card, t4 = 1, t5 = "inherit", t6 = props.inputProps.renderInput(inlineProps);
+  let t7;
+  return $[8] !== T0 || $[9] !== t6 ? (t7 = /* @__PURE__ */ jsx(T0, { flex: t4, tone: t5, children: t6 }), $[8] = T0, $[9] = t6, $[10] = t7) : t7 = $[10], /* @__PURE__ */ jsx(Card, { paddingTop: 2, tone: t3, children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+    !itemNeedsMigration && /* @__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[LANGUAGE_FIELD_NAME]}"` }), id: `${value[LANGUAGE_FIELD_NAME]}-change-key`, menu: /* @__PURE__ */ jsx(Menu, { children: languages.map((lang) => /* @__PURE__ */ jsx(MenuItem, { disabled: languageKeysInUse.includes(lang.id), fontSize: 1, text: lang.id.toLocaleUpperCase(), value: lang.id, onClick: handleKeyChange }, lang.id)) }), popover: {
+      portal: !0
+    } }) }),
     /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
-      t9,
+      t7,
       /* @__PURE__ */ jsx(Card, { tone: "inherit", children: isDefault ? /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: "Can't remove default language" }), fallbackPlacements: ["right", "left"], placement: "top", portal: !0, children: /* @__PURE__ */ jsx("span", { children: removeButton }) }) : removeButton })
     ] })
   ] }) });
@@ -811,12 +917,22 @@ var object = (config) => {
       // @ts-expect-error - fix typings
       item: InternationalizedInput
     },
-    fields: [defineField({
-      ...typeof type == "string" ? {
-        type
-      } : type,
-      name: "value"
-    })],
+    fields: [
+      defineField({
+        ...typeof type == "string" ? {
+          type
+        } : type,
+        name: "value"
+      }),
+      // Hidden language field - stores the language identifier (e.g., 'en', 'fr')
+      // This replaces the previous pattern of storing language in _key
+      defineField({
+        name: "language",
+        type: "string",
+        hidden: !0,
+        validation: (Rule) => Rule.required()
+      })
+    ],
     preview: {
       select: {
         title: "value",
@@ -849,7 +965,13 @@ function extractInnerFields(fields, path, maxDepth) {
     return acc.push(thisFieldWithPath), acc;
   }, []);
 }
-const internationalizedArray = definePlugin((config) => {
+const internationalizedArrayLanguageFilter = (enclosingType, _member, selectedLanguageIds, parentValue) => {
+  if (isInternationalizedArrayItemType(enclosingType.name)) {
+    const language = typeof parentValue?.language == "string" ? parentValue?.language : null;
+    return language ? selectedLanguageIds.includes(language) : !1;
+  }
+  return !0;
+}, internationalizedArray = definePlugin((config) => {
   const pluginConfig = {
     ...CONFIG_DEFAULT,
     ...config
@@ -858,7 +980,8 @@ const internationalizedArray = definePlugin((config) => {
     select,
     languages,
     fieldTypes,
-    buttonLocations
+    buttonLocations,
+    languageFilter: languageFilterConfig
   } = pluginConfig;
   return {
     name: "sanity-plugin-internationalized-array",
@@ -892,13 +1015,19 @@ const internationalizedArray = definePlugin((config) => {
       })), ...fieldTypes.map((type) => object({
         type
       }))]
-    }
+    },
+    plugins: languageFilterConfig?.documentTypes?.length > 0 ? [languageFilter({
+      documentTypes: languageFilterConfig.documentTypes,
+      supportedLanguages: languages,
+      filterField: internationalizedArrayLanguageFilter
+    })] : void 0
   };
 });
 export {
   LANGUAGE_FIELD_NAME,
   clear,
   internationalizedArray,
+  internationalizedArrayLanguageFilter,
   isInternationalizedArrayItemType
 };
 //# sourceMappingURL=index.js.map