sanity-plugin-internationalized-array 1.6.2 → 1.8.0

package/README.md

@@ -36,6 +36,7 @@ import {internationalizedArray} from 'sanity-plugin-internationalized-array'
         {id: 'en', title: 'English'},
         {id: 'fr', title: 'French'}
       ],
+      defaultLanguages: ['en'],
       fieldTypes: ['string'],
     })
   ]
@@ -47,6 +48,8 @@ This will register two new fields to the schema, based on the settings passed in
 - `internationalizedArrayString` an array field of:
 - `internationalizedArrayStringValue` an object field, with a single `string` field inside called `value`
 
+The above config will also create an empty array item in new documents for each language in `defaultLanguages`. This is configured globally for all internationalized array fields.
+
 You can pass in more registered schema-type names to generate more internationalized arrays. Use them in your schema like this:
 
 ```ts
@@ -102,7 +105,29 @@ languages: async (client, {market = ``}) => {
 },
 ```
 
-## Using more complex field types
+## Configuring the "Add translation" buttons
+
+The "Add translation" buttons can be positioned below the field, inside Field Actions (⚠️ currently unstable ⚠️) or both with `buttonLocations`.
+
+The "Add all languages" button can be hidden with `buttonAddAll`.
+
+```ts
+import {defineConfig} from 'sanity'
+import {internationalizedArray} from 'sanity-plugin-internationalized-array'
+
+ export const defineConfig({
+  // ...
+  plugins: [
+    internationalizedArray({
+      // ...other config
+      buttonLocations: ['field', 'unstable__fieldAction'] // default ['field']
+      buttonAddAll: false // default true
+    })
+  ]
+})
+```
+
+## Using complex field configurations
 
 For more control over the `value` field, you can pass a schema definition into the `fieldTypes` array.
 
@@ -138,6 +163,109 @@ This would also create two new fields in your schema.
 
 Note that the `name` key in the field gets rewritten to `value` and is instead used to name the object field.
 
+## Creating internationalized objects
+
+Due to how fields are created, you cannot use anonymous objects in the `fieldTypes` array. You must register the object type in your Studio's schema as an "alias type".
+
+```ts
+// ./schemas/seoType.ts
+
+import {defineField} from 'sanity'
+
+export const seoType = defineField({
+  name: 'seo',
+  title: 'SEO',
+  type: 'object',
+  fields: [
+    defineField({name: 'title', type: 'string'}),
+    defineField({name: 'description', type: 'string'}),
+  ],
+})
+```
+
+Then in your plugin configuration settings, add the name of your alias type to the `fieldTypes` setting.
+
+```ts
+internationalizedArray({
+  languages: [
+    //...languages
+  ],
+  fieldTypes: ['seo'],
+})
+```
+
+Lastly, add the field to your schema.
+
+```ts
+// ./schemas/post.ts
+
+import {defineField, defineType} from 'sanity'
+
+export default defineType({
+  name: 'post',
+  title: 'Post',
+  type: 'document',
+  fields: [
+    defineField({
+      name: 'seo',
+      type: 'internationalizedArraySeo',
+    }),
+  ],
+})
+```
+
+## Usage with @sanity/language-filter
+
+If you have many languages and authors that predominately write in only a few, [@sanity/language-filter](https://github.com/sanity-io/language-filter) can be used to reduce the number of language fields shown in the document form.
+
+![Internationalized array field filtered with language-filter](https://github.com/sanity-io/language-filter/assets/9684022/4b402520-4128-4e6e-af07-960a10be397e)
+
+Configure both plugins in your sanity.config.ts file:
+
+```ts
+// ./sanity.config.ts
+
+import {languageFilter} from '@sanity/language-filter'
+
+export default defineConfig({
+  // ... other config
+  plugins: [
+    // ... other plugins
+    languageFilter({
+      // Use the same languages as the internationalized array plugin
+      supportedLanguages: SUPPORTED_LANGUAGES,
+      defaultLanguages: [],
+      documentTypes: ['post'],
+      filterField: (enclosingType, member, selectedLanguageIds) => {
+        // Filter internationalized arrays
+        if (
+          enclosingType.jsonType === 'object' &&
+          enclosingType.name.startsWith('internationalizedArray') &&
+          'kind' in member
+        ) {
+          const language = isKeyedObject(member.field.path[1])
+            ? member.field.path[1]._key
+            : null
+
+          return language ? selectedLanguageIds.includes(language) : false
+        }
+
+        // Filter internationalized objects if you have them
+        // `localeString` must be registered as a custom schema type
+        if (
+          enclosingType.jsonType === 'object' &&
+          enclosingType.name.startsWith('locale')
+        ) {
+          return selectedLanguageIds.includes(member.name)
+        }
+
+        return true
+      },
+    }),
+  ],
+})
+```
+
 ## Shape of stored data
 
 The custom input contains buttons which will add new array items with the language as the `_key` value. Data returned from this array will look like this:
@@ -161,7 +289,7 @@ Using GROQ filters you can query for a specific language key like so:
 
 ## Migrate from objects to arrays
 
-[See the migration script](https://github.com/sanity-io/sanity-plugin-internationalized-array/blob/main/migrations/transformObjectToArray.js) inside `./migrations/transformObjectToArray.js` of this Repo.
+[See the migration script](https://github.com/sanity-io/sanity-plugin-internationalized-array/blob/main/migrations/transformObjectToArray.ts) inside `./migrations/transformObjectToArray.ts` of this Repo.
 
 Follow the instructions inside the script and set the `_type` and field name you wish to target.
 
@@ -169,11 +297,11 @@ Please take a backup first!
 
 ### Why store localized field data like this?
 
-The most popular way to store field-level translated content is in an object using the method prescribed in [@sanity/language-filter](https://www.npmjs.com/package/@sanity/language-filter). This works well and creates tidy object structures, but also create a unique field path for every unique field name, multiplied by the number of languages in your dataset.
+The most popular way to store field-level translated content is in an object using the method prescribed in [@sanity/language-filter](https://www.npmjs.com/package/@sanity/language-filter). This works well and creates tidy object structures, but also creates a unique field path for every unique field name, multiplied by the number of languages in your dataset.
 
-For most people, this won't become an issue. On a very large dataset with a lot of languages, the [Attribute Limit](https://www.sanity.io/docs/attribute-limit) can become a concern. This plugin's arrays will use less attributes than an object once you have more than three languages.
+For most people, this won't become an issue. On a very large dataset with a lot of languages, the [Attribute Limit](https://www.sanity.io/docs/attribute-limit) can become a concern. This plugin's arrays will use fewer attributes than an object once you have more than three languages.
 
-The same content as above, plus a third language, structed as an `object` of `string` fields looks like this:
+The same content as above, plus a third language, structured as an `object` of `string` fields looks like this:
 
 ```json
 "greeting" {
@@ -194,7 +322,7 @@ greeting.es
 
 Every language you add to every object that uses this structure will add to the number of unique query paths.
 
-The array created by this plugin creates four query paths by default, but is not effected by the number of languages:
+The array created by this plugin creates four query paths by default, but is not affected by the number of languages:
 
 ```
 greeting
@@ -205,7 +333,7 @@ greeting[].value
 
 By using this plugin you can safely extend the number of languages without adding any additional query paths.
 
-MIT © Simeon Griggs
+MIT © Sanity.io
 See LICENSE
 
 ## License

package/lib/index.d.ts

@@ -1,4 +1,3 @@
-import type {ArraySchemaType} from 'sanity'
 import type {FieldDefinition} from 'sanity'
 import {Plugin as Plugin_2} from 'sanity'
 import type {Rule} from 'sanity'
@@ -29,14 +28,6 @@ export declare type ArrayConfig = {
   }
 }
 
-export declare type ArraySchemaWithLanguageOptions = ArraySchemaType & {
-  options: {
-    select?: Record<string, string>
-    languages: Language[] | LanguageCallback
-    apiVersion: string
-  }
-}
-
 export declare const clear: () => void
 
 export declare const internationalizedArray: Plugin_2<PluginConfig>
@@ -98,6 +89,15 @@ export declare type PluginConfig = {
    * ```
    */
   languages: Language[] | LanguageCallback
+  /**
+   * You can specify a list of language IDs that should be pre-filled when creating a new document
+   * ```tsx
+   * {
+   *  defaultLanguages: ['en']
+   * }
+   * ```
+   */
+  defaultLanguages?: string[]
   /**
    * Can be a string matching core field types, as well as custom ones:
    * ```tsx
@@ -122,6 +122,16 @@ export declare type PluginConfig = {
    * ```
    */
   fieldTypes: (string | RuleTypeConstraint | FieldDefinition)[]
+  /**
+   * Locations where the "+ EN" add language buttons are visible
+   * @defaultValue ['field']
+   * */
+  buttonLocations: ('field' | 'unstable__fieldAction')[]
+  /**
+   * Show or hide the "Add missing languages" button
+   * @defaultValue true
+   * */
+  buttonAddAll: boolean
 }
 
 export declare type Value = {

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-import*as suspend from'suspend-react';import{suspend as suspend$1}from'suspend-react';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{useClient,useFormBuilder,insert,setIfMissing,set,ArrayOfObjectsItem,defineField,useFormValue,unset,definePlugin}from'sanity';import React,{memo,useDeferredValue,useMemo,useCallback,useEffect}from'react';import{AddIcon,RemoveCircleIcon}from'@sanity/icons';import{Card,Stack,Text,Code,useToast,Grid,Button,Spinner,Label,MenuButton,Menu,MenuItem,Flex}from'@sanity/ui';import equal from'fast-deep-equal';const namespace="sanity-plugin-internationalized-array";const version="v0";const preload=fn=>suspend.preload(()=>fn(),[version,namespace]);const clear=()=>suspend.clear([version,namespace]);const peek=selectedValue=>suspend.peek([version,namespace,selectedValue]);var Preload=memo(function Preload(props){const client=useClient({apiVersion:props.apiVersion});if(!Array.isArray(peek({}))){preload(async()=>Array.isArray(props.languages)?props.languages:props.languages(client,{}));}return null;});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){let addValue=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;return addValue?["internationalizedArray",pascalCase(name),"Value"].join(""):["internationalizedArray",pascalCase(name)].join("");}var commonjsGlobal=typeof globalThis!=='undefined'?globalThis:typeof window!=='undefined'?window:typeof global!=='undefined'?global:typeof self!=='undefined'?self:{};var lodash={exports:{}};/**
+import*as suspend from'suspend-react';import{suspend as suspend$1}from'suspend-react';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{useClient,useFormBuilder,insert,defineDocumentFieldAction,useFormValue,PatchEvent,setIfMissing,set,ArrayOfObjectsItem,defineField,unset,definePlugin,isObjectInputProps}from'sanity';import{useLanguageFilterStudioContext}from'@sanity/language-filter';import equal from'fast-deep-equal';import{createContext,useContext,useDeferredValue,useMemo,memo,useCallback,useEffect}from'react';import{TranslateIcon,AddIcon,RemoveCircleIcon}from'@sanity/icons';import{useDocumentPane}from'sanity/desk';import{Card,Stack,Text,Code,useToast,Grid,Button,Spinner,Label,MenuButton,Menu,MenuItem,Flex}from'@sanity/ui';const namespace="sanity-plugin-internationalized-array";const version="v0";const preload=fn=>suspend.preload(()=>fn(),[version,namespace]);const clear=()=>suspend.clear([version,namespace]);const peek=selectedValue=>suspend.peek([version,namespace,selectedValue]);const MAX_COLUMNS=7;const CONFIG_DEFAULT={languages:[],select:{},defaultLanguages:[],fieldTypes:[],apiVersion:"2022-11-27",buttonLocations:["field"],buttonAddAll:true};var commonjsGlobal=typeof globalThis!=='undefined'?globalThis:typeof window!=='undefined'?window:typeof global!=='undefined'?global:typeof self!=='undefined'?self:{};var lodash={exports:{}};/**
  * @license
  * Lodash <https://lodash.com/>
  * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
@@ -9467,24 +9467,33 @@ var _=runInContext();// Some AMD build optimizers, like r.js, check for conditio
 if(freeModule){// Export for Node.js.
 (freeModule.exports=_)._=_;// Export for CommonJS support.
 freeExports._=_;}else{// Export to the global object.
-root._=_;}}).call(commonjsGlobal);})(lodash,lodash.exports);var lodashExports=lodash.exports;const getSelectedValue=(select,document)=>{if(!select||!document){return{};}const selection=select||{};const selectedValue={};for(const[key,path]of Object.entries(selection)){let value=lodashExports.get(document,path);if(Array.isArray(value)){value=value.filter(item=>typeof item==="object"?(item==null?void 0:item._type)==="reference"&&"_ref"in item:true);}selectedValue[key]=value;}return selectedValue;};const schemaExample={languages:[{id:"en",title:"English"},{id:"no",title:"Norsk"}]};function Feedback(){return/* @__PURE__ */jsx(Card,{tone:"caution",border:true,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:true,radius:2,children:/* @__PURE__ */jsx(Code,{size:1,language:"javascript",children:JSON.stringify(schemaExample,null,2)})})]})});}const LanguageContext=React.createContext({languages:[]});const LanguageProvider=LanguageContext.Provider;function InternationalizedArray(props){const{members,value,schemaType,onChange}=props;const readOnly=typeof schemaType.readOnly==="boolean"?schemaType.readOnly:false;const{options}=schemaType;const toast=useToast();const{value:document}=useFormBuilder();const deferredDocument=useDeferredValue(document);const selectedValue=useMemo(()=>getSelectedValue(options.select,deferredDocument),[options.select,deferredDocument]);const{apiVersion}=options;const client=useClient({apiVersion});const languages=Array.isArray(options.languages)?options.languages:suspend$1(// eslint-disable-next-line require-await
-async()=>{if(typeof options.languages==="function"){return options.languages(client,selectedValue);}return options.languages;},[version,namespace,selectedValue],{equal});const handleAddLanguage=useCallback(languageId=>{if(!(languages==null?void 0:languages.length)){return;}const itemBase={_type:"".concat(schemaType.name,"Value")};const newItems=languageId?// Just one for this language
-[{...itemBase,_key:languageId}]:// Or one for every missing language
-languages.filter(language=>(value==null?void 0:value.length)?!value.find(v=>v._key===language.id):true).map(language=>({...itemBase,_key:language.id}));const languagesInUse2=(value==null?void 0:value.length)?value.map(v=>v):[];const insertions=newItems.map(item=>{const languageIndex=languages.findIndex(l=>item._key===l.id);const remainingLanguages=languages.slice(languageIndex+1);const nextLanguageIndex=languagesInUse2.findIndex(l=>// eslint-disable-next-line max-nested-callbacks
-remainingLanguages.find(r=>r.id===l._key));if(nextLanguageIndex<0){languagesInUse2.push(item);}else{languagesInUse2.splice(nextLanguageIndex,0,item);}return nextLanguageIndex<0?// No next language (-1), add to end of array
-insert([item],"after",[nextLanguageIndex]):// Next language found, insert before that
-insert([item],"before",[nextLanguageIndex]);});onChange([setIfMissing([]),...insertions]);},[languages,onChange,schemaType.name,value]);const handleRestoreOrder=useCallback(()=>{if(!(value==null?void 0:value.length)||!(languages==null?void 0:languages.length)){return;}const updatedValue=value.reduce((acc,v)=>{const newIndex=languages.findIndex(l=>l.id===(v==null?void 0:v._key));if(newIndex>-1){acc[newIndex]=v;}return acc;},[]).filter(Boolean);if((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]);const allKeysAreLanguages=useMemo(()=>{if(!(value==null?void 0:value.length)||!(languages==null?void 0:languages.length)){return true;}return value==null?void 0:value.every(v=>languages.find(l=>(l==null?void 0:l.id)===(v==null?void 0:v._key)));},[value,languages]);const languagesInUse=useMemo(()=>languages&&languages.length>1?languages.filter(l=>value==null?void 0:value.find(v=>v._key===l.id)):[],[languages,value]);const languagesOutOfOrder=useMemo(()=>{if(!(value==null?void 0:value.length)||!languagesInUse.length){return[];}return value.map((v,vIndex)=>vIndex===languagesInUse.findIndex(l=>l.id===v._key)?null:v).filter(Boolean);},[value,languagesInUse]);const languagesAreValid=useMemo(()=>!(languages==null?void 0:languages.length)||(languages==null?void 0:languages.length)&&languages.every(item=>item.id&&item.title),[languages]);useEffect(()=>{if(languagesOutOfOrder.length>0&&allKeysAreLanguages){handleRestoreOrder();}},[languagesOutOfOrder,allKeysAreLanguages,handleRestoreOrder]);if(!languagesAreValid){return/* @__PURE__ */jsx(Feedback,{});}return/* @__PURE__ */jsx(LanguageProvider,{value:{languages},children:/* @__PURE__ */jsxs(Stack,{space:2,children:[(members==null?void 0:members.length)>0?/* @__PURE__ */jsx(Fragment,{children:members.map(member=>{if(member.kind==="item"){return/* @__PURE__ */jsx(ArrayOfObjectsItem,{member,renderItem:props.renderItem,renderField:props.renderField,renderInput:props.renderInput,renderPreview:props.renderPreview},member.key);}return null;})}):null,(languages==null?void 0:languages.length)>0&&languagesInUse.length<languages.length?/* @__PURE__ */jsxs(Stack,{space:2,children:[languages.length>1?/* @__PURE__ */jsx(Grid,{columns:Math.min(languages.length,5),gap:2,children:languages.map(language=>/* @__PURE__ */jsx(Button,{tone:"primary",mode:"ghost",fontSize:1,disabled:readOnly||Boolean(value==null?void 0:value.find(item=>item._key===language.id)),text:language.id.toUpperCase(),icon:AddIcon,onClick:()=>handleAddLanguage(language.id)},language.id))}):null,/* @__PURE__ */jsx(Button,{tone:"primary",mode:"ghost",disabled:readOnly||value&&(value==null?void 0:value.length)>=(languages==null?void 0:languages.length),icon:AddIcon,text:// eslint-disable-next-line no-nested-ternary
-(value==null?void 0:value.length)?"Add missing ".concat(languages.length-value.length===1?"language":"languages"):languages.length===1?"Add ".concat(languages[0].title," Field"):"Add all languages",onClick:()=>handleAddLanguage()})]}):null]})});}var array=config=>{const{apiVersion,select,languages,type}=config;const typeName=typeof type==="string"?type:type.name;const arrayName=createFieldName(typeName);const objectName=createFieldName(typeName,true);return defineField({name:arrayName,title:"Internationalized array",type:"array",components:{input:InternationalizedArray},options:{apiVersion,select,languages},// TODO: Resolve this typing issue with the inner object
+root._=_;}}).call(commonjsGlobal);})(lodash,lodash.exports);var lodashExports=lodash.exports;const getSelectedValue=(select,document)=>{if(!select||!document){return{};}const selection=select||{};const selectedValue={};for(const[key,path]of Object.entries(selection)){let value=lodashExports.get(document,path);if(Array.isArray(value)){value=value.filter(item=>typeof item==="object"?(item==null?void 0:item._type)==="reference"&&"_ref"in item:true);}selectedValue[key]=value;}return selectedValue;};const InternationalizedArrayContext=createContext({...CONFIG_DEFAULT,languages:[],filteredLanguages:[]});function useInternationalizedArrayContext(){return useContext(InternationalizedArrayContext);}function InternationalizedArrayProvider(props){const{internationalizedArray}=props;const client=useClient({apiVersion:internationalizedArray.apiVersion});const{value:document}=useFormBuilder();const deferredDocument=useDeferredValue(document);const selectedValue=useMemo(()=>getSelectedValue(internationalizedArray.select,deferredDocument),[internationalizedArray.select,deferredDocument]);const languages=Array.isArray(internationalizedArray.languages)?internationalizedArray.languages:suspend$1(// eslint-disable-next-line require-await
+async()=>{if(typeof internationalizedArray.languages==="function"){return internationalizedArray.languages(client,selectedValue);}return internationalizedArray.languages;},[version,namespace],{equal});const{selectedLanguageIds,options:languageFilterOptions}=useLanguageFilterStudioContext();const filteredLanguages=useMemo(()=>{const documentType=deferredDocument?deferredDocument._type:void 0;const languageFilterEnabled=typeof documentType==="string"&&languageFilterOptions.documentTypes.includes(documentType);return languageFilterEnabled?languages.filter(language=>selectedLanguageIds.includes(language.id)):languages;},[deferredDocument,languageFilterOptions,languages,selectedLanguageIds]);return/* @__PURE__ */jsx(InternationalizedArrayContext.Provider,{value:{...internationalizedArray,languages,filteredLanguages},children:props.renderDefault(props)});}var Preload=memo(function Preload(props){const client=useClient({apiVersion:props.apiVersion});if(!Array.isArray(peek({}))){preload(async()=>Array.isArray(props.languages)?props.languages:props.languages(client,{}));}return null;});function checkAllLanguagesArePresent(languages,value){const filteredLanguageIds=languages.map(l=>l.id);const languagesInUseIds=value?value.map(v=>v._key):[];return languagesInUseIds.length===filteredLanguageIds.length&&languagesInUseIds.every(l=>filteredLanguageIds.includes(l));}function createAddAllTitle(value,languages){if(value==null?void 0:value.length){return"Add missing ".concat(languages.length-value.length===1?"language":"languages");}return languages.length===1?"Add ".concat(languages[0].title," Field"):"Add all languages";}function createAddLanguagePatches(config){const{addLanguageKeys,schemaType,languages,filteredLanguages,value,path=[]}=config;const itemBase={_type:"".concat(schemaType.name,"Value")};const 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?void 0:value.length)?!value.find(v=>v._key===language.id):true).map(language=>({...itemBase,_key:language.id}));const languagesInUse=(value==null?void 0:value.length)?value.map(v=>v):[];const insertions=newItems.map(item=>{const languageIndex=languages.findIndex(l=>item._key===l.id);const remainingLanguages=languages.slice(languageIndex+1);const nextLanguageIndex=languagesInUse.findIndex(l=>// eslint-disable-next-line max-nested-callbacks
+remainingLanguages.find(r=>r.id===l._key));if(nextLanguageIndex<0){languagesInUse.push(item);}else{languagesInUse.splice(nextLanguageIndex,0,item);}return 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]);});return insertions;}const createTranslateFieldActions=(fieldActionProps,_ref)=>{let{languages,filteredLanguages}=_ref;return languages.map(language=>{const value=useFormValue(fieldActionProps.path);const disabled=value&&Array.isArray(value)?Boolean(value==null?void 0:value.find(item=>item._key===language.id)):true;const hidden=!filteredLanguages.some(f=>f.id===language.id);const{onChange}=useDocumentPane();const onAction=useCallback(()=>{const{schemaType,path}=fieldActionProps;const addLanguageKeys=[language.id];const 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.id.toLocaleUpperCase(),hidden,disabled};});};const AddMissingTranslationsFieldAction=(fieldActionProps,_ref2)=>{let{languages,filteredLanguages}=_ref2;const value=useFormValue(fieldActionProps.path);const disabled=value.length===filteredLanguages.length;const hidden=checkAllLanguagesArePresent(filteredLanguages,value);const{onChange}=useDocumentPane();const onAction=useCallback(()=>{const{schemaType,path}=fieldActionProps;const addLanguageKeys=[];const 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};};const 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");const{languages,filteredLanguages}=useInternationalizedArrayContext();const translateFieldActions=createTranslateFieldActions(fieldActionProps,{languages,filteredLanguages});return{type:"group",icon:TranslateIcon,title:"Add Translation",renderAsButton:true,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){let addValue=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;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:true,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:true,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;const readOnly=typeof schemaType.readOnly==="boolean"?schemaType.readOnly:false;const toast=useToast();const{languages,filteredLanguages,defaultLanguages,buttonAddAll,buttonLocations}=useInternationalizedArrayContext();const{selectedLanguageIds,options:languageFilterOptions}=useLanguageFilterStudioContext();const documentType=useFormValue(["_type"]);const languageFilterEnabled=typeof documentType==="string"&&languageFilterOptions.documentTypes.includes(documentType);const filteredMembers=useMemo(()=>languageFilterEnabled?members.filter(member=>{if(member.kind!=="item"){return false;}const valueMember=member.item.members[0];if(valueMember.kind!=="field"){return false;}return languageFilterOptions.filterField(member.item.schemaType,valueMember,selectedLanguageIds);}):members,[languageFilterEnabled,members,languageFilterOptions,selectedLanguageIds]);const handleAddLanguage=useCallback(param=>{var _a;if(!(filteredLanguages==null?void 0:filteredLanguages.length)){return;}const addLanguageKeys=Array.isArray(param)?param:[(_a=param==null?void 0:param.currentTarget)==null?void 0:_a.value].filter(Boolean);const patches=createAddLanguagePatches({addLanguageKeys,schemaType,languages,filteredLanguages,value});onChange([setIfMissing([]),...patches]);},[filteredLanguages,languages,onChange,schemaType,value]);const documentCreatedAt=useFormValue(["_createdAt"]);if(// Array field is empty
+!value&&// Document form is in "not yet created" state
+!documentCreatedAt&&// Plugin config included default languages
+defaultLanguages&&(defaultLanguages==null?void 0:defaultLanguages.length)>0){handleAddLanguage(defaultLanguages);}const handleRestoreOrder=useCallback(()=>{if(!(value==null?void 0:value.length)||!(languages==null?void 0:languages.length)){return;}const updatedValue=value.reduce((acc,v)=>{const newIndex=languages.findIndex(l=>l.id===(v==null?void 0:v._key));if(newIndex>-1){acc[newIndex]=v;}return acc;},[]).filter(Boolean);if((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]);const allKeysAreLanguages=useMemo(()=>{if(!(value==null?void 0:value.length)||!(languages==null?void 0:languages.length)){return true;}return value==null?void 0:value.every(v=>languages.find(l=>(l==null?void 0:l.id)===(v==null?void 0:v._key)));},[value,languages]);const languagesInUse=useMemo(()=>languages&&languages.length>1?languages.filter(l=>value==null?void 0:value.find(v=>v._key===l.id)):[],[languages,value]);const languagesOutOfOrder=useMemo(()=>{if(!(value==null?void 0:value.length)||!languagesInUse.length){return[];}return value.map((v,vIndex)=>vIndex===languagesInUse.findIndex(l=>l.id===v._key)?null:v).filter(Boolean);},[value,languagesInUse]);const languagesAreValid=useMemo(()=>!(languages==null?void 0:languages.length)||(languages==null?void 0:languages.length)&&languages.every(item=>item.id&&item.title),[languages]);useEffect(()=>{if(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;return/* @__PURE__ */jsxs(Stack,{space:2,children:[(members==null?void 0:members.length)>0?/* @__PURE__ */jsx(Fragment,{children:filteredMembers.map(member=>{if(member.kind==="item"){return/* @__PURE__ */jsx(ArrayOfObjectsItem,{member,renderItem:props.renderItem,renderField:props.renderField,renderInput:props.renderInput,renderPreview:props.renderPreview},member.key);}return null;})}):null,addButtonsAreVisible?/* @__PURE__ */jsxs(Stack,{space:2,children:[filteredLanguages.length>1?/* @__PURE__ */jsx(Grid,{columns:Math.min(filteredLanguages.length,MAX_COLUMNS),gap:2,children:filteredLanguages.map(language=>/* @__PURE__ */jsx(Button,{tone:"primary",mode:"ghost",fontSize:1,disabled:readOnly||Boolean(value==null?void 0:value.find(item=>item._key===language.id)),text:language.id.toUpperCase(),icon:filteredLanguages.length>MAX_COLUMNS?void 0:AddIcon,value:language.id,onClick:handleAddLanguage},language.id))}):null,buttonAddAll?/* @__PURE__ */jsx(Button,{tone:"primary",mode:"ghost",disabled:readOnly||allLanguagesArePresent,icon:AddIcon,text:createAddAllTitle(value,filteredLanguages),onClick:handleAddLanguage}):null]}):null]});}var array=config=>{const{apiVersion,select,languages,type}=config;const typeName=typeof type==="string"?type:type.name;const arrayName=createFieldName(typeName);const objectName=createFieldName(typeName,true);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},// TODO: Resolve this typing issue with the inner object
 // @ts-expect-error
 of:[defineField({...(typeof type==="string"?{}:type),name:objectName,type:objectName})],validation:rule=>rule.custom(async(value,context)=>{var _a,_b,_c;if(!value){return true;}const selectedValue=getSelectedValue(select,context.document);const client=context.getClient({apiVersion});const contextLanguages=Array.isArray((_b=(_a=context==null?void 0:context.type)==null?void 0:_a.options)==null?void 0:_b.languages)?context.type.options.languages:Array.isArray(peek(selectedValue))?peek(selectedValue):await((_c=context==null?void 0:context.type)==null?void 0:_c.options.languages(client,selectedValue));if(value&&value.length>contextLanguages.length){return"Cannot be more than ".concat(contextLanguages.length===1?"1 item":"".concat(contextLanguages.length," items"));}const nonLanguageKeys=(value==null?void 0: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?void 0:value.length)?value.filter(item=>Boolean(item==null?void 0:item._key)).reduce((acc,cur)=>{if(acc[cur._key]){return{...acc,[cur._key]:[...acc[cur._key],cur]};}return{...acc,[cur._key]:[cur]};},{}):{};const duplicateValues=Object.values(valuesByLanguage).filter(item=>(item==null?void 0:item.length)>1).flat();if(duplicateValues.length){return{message:"There can only be one field per language",paths:duplicateValues.map(item=>[{_key:item._key}])};}return true;})});};function InternationalizedField(props){if(props.schemaType.name==="reference"&&props.value){return props.renderDefault({...props,title:"",level:0});}return props.children;}function getToneFromValidation(validations){if(!(validations==null?void 0:validations.length)){return void 0;}const validationLevels=validations.map(v=>v.level);if(validationLevels.includes("error")){return"critical";}else if(validationLevels.includes("warning")){return"caution";}return void 0;}function InternationalizedInput(props){const parentValue=useFormValue(props.path.slice(0,-1));const 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};const{validation,value,onChange,readOnly}=inlineProps;const{languages}=React.useContext(LanguageContext);const languageKeysInUse=useMemo(()=>{var _a;return(_a=parentValue==null?void 0:parentValue.map(v=>v._key))!=null?_a:[];},[parentValue]);const keyIsValid=(languages==null?void 0:languages.length)?languages.find(l=>l.id===value._key):false;const handleKeyChange=useCallback(languageId=>{if(!value||!(languages==null?void 0:languages.length)||!languages.find(l=>l.id===languageId)){return;}onChange([set(languageId,["_key"])]);},[onChange,value,languages]);const handleUnset=useCallback(()=>{onChange(unset());},[onChange]);if(!languages){return/* @__PURE__ */jsx(Spinner,{});}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:true,size:1,children:value._key}):/* @__PURE__ */jsx(MenuButton,{button:/* @__PURE__ */jsx(Button,{fontSize:1,text:"Change \"".concat(value._key,"\"")}),id:"".concat(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(),onClick:()=>handleKeyChange(language.id)},language.id))}),placement:"right",popover:{portal:true}})}),/* @__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})})]})]})});}var object=config=>{const{type}=config;const typeName=typeof type==="string"?type:type.name;const objectName=createFieldName(typeName,true);return defineField({name:objectName,title:"Internationalized array ".concat(type),type:"object",components:{item:InternationalizedInput},// TODO: Address this typing issue with the inner object
+value:props.value};const{validation,value,onChange,readOnly}=inlineProps;const{languages}=useInternationalizedArrayContext();const languageKeysInUse=useMemo(()=>{var _a;return(_a=parentValue==null?void 0:parentValue.map(v=>v._key))!=null?_a:[];},[parentValue]);const keyIsValid=(languages==null?void 0:languages.length)?languages.find(l=>l.id===value._key):false;const handleKeyChange=useCallback(event=>{var _a;const languageId=(_a=event==null?void 0:event.currentTarget)==null?void 0:_a.value;if(!value||!(languages==null?void 0:languages.length)||!languages.find(l=>l.id===languageId)){return;}onChange([set(languageId,["_key"])]);},[onChange,value,languages]);const handleUnset=useCallback(()=>{onChange(unset());},[onChange]);if(!languages){return/* @__PURE__ */jsx(Spinner,{});}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:true,size:1,children:value._key}):/* @__PURE__ */jsx(MenuButton,{button:/* @__PURE__ */jsx(Button,{fontSize:1,text:"Change \"".concat(value._key,"\"")}),id:"".concat(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:true}})}),/* @__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})})]})]})});}var object=config=>{const{type}=config;const typeName=typeof type==="string"?type:type.name;const objectName=createFieldName(typeName,true);return defineField({name:objectName,title:"Internationalized array ".concat(type),type:"object",components:{item:InternationalizedInput},// TODO: Address this typing issue with the inner object
 // @ts-expect-error
 fields:[typeof type==="string"?// Define a simple field if all we have is the name as a string
 defineField({name:"value",type,components:{// TODO: Address this typing issue with the inner object
 // @ts-expect-error
 field:InternationalizedField}}):// Pass in the configured options, but overwrite the name
-{...type,name:"value",components:{field:InternationalizedField}}],preview:{select:{title:"value",subtitle:"_key"}}});};const CONFIG_DEFAULT={languages:[],fieldTypes:[]};const internationalizedArray=definePlugin(function(){let config=arguments.length>0&&arguments[0]!==undefined?arguments[0]:CONFIG_DEFAULT;const{apiVersion="2022-11-27",select,languages,fieldTypes}={...CONFIG_DEFAULT,...config};return{name:"sanity-plugin-internationalized-array",// If `languages` is a callback then let's preload it
-studio:Array.isArray(languages)?void 0:{components:{layout:props=>/* @__PURE__ */jsxs(Fragment,{children:[/* @__PURE__ */jsx(Preload,{apiVersion,languages}),props.renderDefault(props)]})}},schema:{types:[...fieldTypes.map(type=>array({type,apiVersion,select,languages})),...fieldTypes.map(type=>object({type}))]}};});export{clear,internationalizedArray};
+{...type,name:"value",components:{field:InternationalizedField}}],preview:{select:{title:"value",subtitle:"_key"}}});};const internationalizedArray=definePlugin(config=>{const pluginConfig={...CONFIG_DEFAULT,...config};const{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=>{const isRootInput=props.id==="root"&&isObjectInputProps(props);if(!isRootInput){return props.renderDefault(props);}const rootFieldTypeNames=props.schemaType.fields.map(field=>field.type.name);const hasInternationalizedArray=rootFieldTypeNames.some(name=>name.startsWith("internationalizedArray"));if(!hasInternationalizedArray){return props.renderDefault(props);}return 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.esm.js.map