sanity-plugin-internationalized-array 1.9.1 → 1.10.0

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{isSanityDocument,setIfMissing,insert,PatchEvent,useClient,useFormBuilder,defineDocumentFieldAction,useFormValue,set,ArrayOfObjectsItem,defineField,unset,isDocumentSchemaType,isArraySchemaType,definePlugin,isObjectInputProps}from'sanity';import{useLanguageFilterStudioContext}from'@sanity/language-filter';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{useMemo,useCallback,createContext,useContext,useDeferredValue,memo,useEffect}from'react';import{useDocumentPane}from'sanity/desk';import{AddIcon,TranslateIcon,RemoveCircleIcon}from'@sanity/icons';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};function createValueSchemaTypeName(schemaType){return"".concat(schemaType.name,"Value");}function AddButtons(props){const{languages,readOnly,value,onClick}=props;return languages.length>0?/* @__PURE__ */jsx(Grid,{columns:Math.min(languages.length,MAX_COLUMNS),gap:2,children:languages.map(language=>/* @__PURE__ */jsx(Button,{tone:"primary",mode:"ghost",fontSize:1,disabled:readOnly||Boolean(value==null?void 0:value.find(item=>item._key===language.id)),text:language.id.toUpperCase(),icon:languages.length>MAX_COLUMNS?void 0:AddIcon,value:language.id,onClick},language.id))}):null;}function DocumentAddButtons(props){const{filteredLanguages}=useInternationalizedArrayContext();const{fields}=props.schemaType;const value=isSanityDocument(props.value)?props.value:void 0;const toast=useToast();const{onChange}=useDocumentPane();const internationalizedArrayFields=useMemo(()=>fields.filter(field=>field.type.name.startsWith("internationalizedArray")),[fields]);const handleDocumentButtonClick=useCallback(event=>{const languageId=event.currentTarget.value;if(!languageId){toast.push({status:"error",title:"No language selected"});return;}if(internationalizedArrayFields.length===0){toast.push({status:"error",title:"No internationalizedArray fields found in document root"});return;}const emptyLanguageFields=internationalizedArrayFields.filter(field=>{const fieldValue=value==null?void 0:value[field.name];const fieldValueLanguage=fieldValue&&Array.isArray(fieldValue)?fieldValue.find(v=>v._key===languageId):void 0;return!fieldValueLanguage;});const patches=emptyLanguageFields.map(field=>{const fieldKey=field.name;return[setIfMissing([],[fieldKey]),insert([{_key:languageId,_type:createValueSchemaTypeName(field.type)}],"after",[fieldKey,-1])];}).flat();onChange(PatchEvent.from(patches));},[internationalizedArrayFields,onChange,toast,value]);return/* @__PURE__ */jsxs(Stack,{space:3,children:[/* @__PURE__ */jsx(Box,{children:/* @__PURE__ */jsx(Text,{size:1,weight:"semibold",children:"Add translation to internationalized fields"})}),/* @__PURE__ */jsx(AddButtons,{languages:filteredLanguages,readOnly:false,value:void 0,onClick:handleDocumentButtonClick})]});}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{isSanityDocument,setIfMissing,insert,PatchEvent,useClient,useFormBuilder,defineDocumentFieldAction,useFormValue,set,ArrayOfObjectsItem,MemberItemError,defineField,unset,isDocumentSchemaType,isArraySchemaType,definePlugin,isObjectInputProps}from'sanity';import{useLanguageFilterStudioContext}from'@sanity/language-filter';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{useMemo,useCallback,createContext,useContext,useDeferredValue,memo,useEffect,createElement}from'react';import{useDocumentPane}from'sanity/desk';import{AddIcon,TranslateIcon,RemoveCircleIcon}from'@sanity/icons';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};function createValueSchemaTypeName(schemaType){return"".concat(schemaType.name,"Value");}function AddButtons(props){const{languages,readOnly,value,onClick}=props;return languages.length>0?/* @__PURE__ */jsx(Grid,{columns:Math.min(languages.length,MAX_COLUMNS),gap:2,children:languages.map(language=>/* @__PURE__ */jsx(Button,{tone:"primary",mode:"ghost",fontSize:1,disabled:readOnly||Boolean(value==null?void 0:value.find(item=>item._key===language.id)),text:language.id.toUpperCase(),icon:languages.length>MAX_COLUMNS?void 0:AddIcon,value:language.id,onClick},language.id))}):null;}function DocumentAddButtons(props){const{filteredLanguages}=useInternationalizedArrayContext();const{fields}=props.schemaType;const value=isSanityDocument(props.value)?props.value:void 0;const toast=useToast();const{onChange}=useDocumentPane();const internationalizedArrayFields=useMemo(()=>fields.filter(field=>field.type.name.startsWith("internationalizedArray")),[fields]);const handleDocumentButtonClick=useCallback(event=>{const languageId=event.currentTarget.value;if(!languageId){toast.push({status:"error",title:"No language selected"});return;}if(internationalizedArrayFields.length===0){toast.push({status:"error",title:"No internationalizedArray fields found in document root"});return;}const emptyLanguageFields=internationalizedArrayFields.filter(field=>{const fieldValue=value==null?void 0:value[field.name];const fieldValueLanguage=fieldValue&&Array.isArray(fieldValue)?fieldValue.find(v=>v._key===languageId):void 0;return!fieldValueLanguage;});const patches=emptyLanguageFields.map(field=>{const fieldKey=field.name;return[setIfMissing([],[fieldKey]),insert([{_key:languageId,_type:createValueSchemaTypeName(field.type)}],"after",[fieldKey,-1])];}).flat();onChange(PatchEvent.from(patches));},[internationalizedArrayFields,onChange,toast,value]);return/* @__PURE__ */jsxs(Stack,{space:3,children:[/* @__PURE__ */jsx(Box,{children:/* @__PURE__ */jsx(Text,{size:1,weight:"semibold",children:"Add translation to internationalized fields"})}),/* @__PURE__ */jsx(AddButtons,{languages:filteredLanguages,readOnly:false,value:void 0,onClick:handleDocumentButtonClick})]});}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/>
@@ -9479,7 +9479,7 @@ insert([item],"before",[...path,nextLanguageIndex]);});return insertions;}const
 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;const fieldHasMembers=(members==null?void 0:members.length)>0;return/* @__PURE__ */jsxs(Stack,{space:2,children:[fieldHasMembers?/* @__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&&!fieldHasMembers?/* @__PURE__ */jsx(Card,{border:true,tone:"transparent",padding:3,radius:2,children:/* @__PURE__ */jsx(Text,{size:1,children:"This internationalized field currently has no translations."})}):null,addButtonsAreVisible?/* @__PURE__ */jsxs(Stack,{space:2,children:[/* @__PURE__ */jsx(AddButtons,{languages:filteredLanguages,value,readOnly,onClick:handleAddLanguage}),buttonAddAll?/* @__PURE__ */jsx(Button,{tone:"primary",mode:"ghost",disabled:readOnly||allLanguagesArePresent,icon:AddIcon,text:createAddAllTitle(value,filteredLanguages),onClick:handleAddLanguage}):null]}):null]});}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
+!allLanguagesArePresent;const fieldHasMembers=(members==null?void 0:members.length)>0;return/* @__PURE__ */jsxs(Stack,{space:2,children:[fieldHasMembers?/* @__PURE__ */jsx(Fragment,{children:filteredMembers.map(member=>{if(member.kind==="item"){return/* @__PURE__ */createElement(ArrayOfObjectsItem,{...props,key:member.key,member});}return/* @__PURE__ */jsx(MemberItemError,{member},member.key);})}):null,!addButtonsAreVisible&&!fieldHasMembers?/* @__PURE__ */jsx(Card,{border:true,tone:"transparent",padding:3,radius:2,children:/* @__PURE__ */jsx(Text,{size:1,children:"This internationalized field currently has no translations."})}):null,addButtonsAreVisible?/* @__PURE__ */jsxs(Stack,{space:2,children:[/* @__PURE__ */jsx(AddButtons,{languages:filteredLanguages,value,readOnly,onClick:handleAddLanguage}),buttonAddAll?/* @__PURE__ */jsx(Button,{tone:"primary",mode:"ghost",disabled:readOnly||allLanguagesArePresent,icon:AddIcon,text:createAddAllTitle(value,filteredLanguages),onClick:handleAddLanguage}):null]}):null]});}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?