sanity-plugin-internationalized-array 1.5.0 → 1.6.0

package/lib/src/index.d.ts

@@ -1,4 +1,5 @@
 import type {ArraySchemaType} from 'sanity'
+import type {FieldDefinition} from 'sanity'
 import {Plugin as Plugin_2} from 'sanity'
 import type {Rule} from 'sanity'
 import type {RuleTypeConstraint} from 'sanity'
@@ -25,7 +26,8 @@ export declare type ArrayConfig = {
 
 export declare type ArraySchemaWithLanguageOptions = ArraySchemaType & {
   options: {
-    languages: Language[] | ((client: SanityClient) => Promise<Language[]>)
+    select?: Record<string, string>
+    languages: Language[] | LanguageCallback
     apiVersion: string
   }
 }
@@ -39,12 +41,30 @@ export declare type Language = {
   title: string
 }
 
+export declare type LanguageCallback = (
+  client: SanityClient,
+  selectedValue: Record<string, unknown>
+) => Promise<Language[]>
+
 export declare type PluginConfig = {
   /**
    * https://www.sanity.io/docs/api-versioning
    * @defaultValue '2022-11-27'
    */
   apiVersion?: string
+  /**
+   * Specify fields that should be available in the language callback:
+   * ```tsx
+   * {
+   *   select: {
+   *     markets: 'markets'
+   *   },
+   *   languages: (client, {markets}) =>
+   *     query.fetch(groq`*[_type == "language" && market in $markets]{id,title}`, {markets})
+   * }
+   * ```
+   */
+  select?: Record<string, string>
   /**
    * You can give it an array of language definitions:
    * ```tsx
@@ -72,7 +92,7 @@ export declare type PluginConfig = {
    * }
    * ```
    */
-  languages: Language[] | ((client: SanityClient) => Promise<Language[]>)
+  languages: Language[] | LanguageCallback
   /**
    * Can be a string matching core field types, as well as custom ones:
    * ```tsx
@@ -96,7 +116,7 @@ export declare type PluginConfig = {
    * }
    * ```
    */
-  fieldTypes: (string | RuleTypeConstraint)[]
+  fieldTypes: (string | RuleTypeConstraint | FieldDefinition)[]
 }
 
 export declare type Value = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-internationalized-array",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Store localized fields in an array to save on attributes",
   "keywords": [
     "sanity",
@@ -50,6 +50,8 @@
     "@sanity/icons": "^2.0.0",
     "@sanity/incompatible-plugin": "^1.0.4",
     "@sanity/ui": "^1.0.0",
+    "fast-deep-equal": "^3.1.3",
+    "lodash.get": "^4.4.2",
     "suspend-react": "^0.0.8"
   },
   "devDependencies": {
@@ -58,6 +60,7 @@
     "@sanity/pkg-utils": "^1.18.0",
     "@sanity/plugin-kit": "^2.1.17",
     "@sanity/semantic-release-preset": "^2.0.2",
+    "@types/lodash.get": "^4.4.7",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.44.0",
     "@typescript-eslint/parser": "^5.44.0",

package/src/cache.ts

@@ -15,4 +15,5 @@ export const preload = (fn: () => Promise<Language[]>) =>
 export const clear = () => suspend.clear([version, namespace])
 
 // https://github.com/pmndrs/suspend-react#peeking-into-entries-outside-of-suspense
-export const peek = () => suspend.peek([version, namespace]) as Language[] | undefined
+export const peek = (selectedValue: Record<string, unknown>) =>
+  suspend.peek([version, namespace, selectedValue]) as Language[] | undefined

package/src/components/InternationalizedArray.tsx

@@ -1,4 +1,4 @@
-import React, {Fragment, useCallback, useEffect, useMemo} from 'react'
+import React, {useCallback, useDeferredValue, useEffect, useMemo} from 'react'
 import {
   insert,
   set,
@@ -7,16 +7,19 @@ import {
   ArrayOfObjectsItem,
   ArrayOfObjectsInputProps,
   useClient,
+  useFormBuilder,
 } from 'sanity'
 import {Button, Grid, Stack, useToast} from '@sanity/ui'
 import {AddIcon} from '@sanity/icons'
 import {suspend} from 'suspend-react'
+import equal from 'fast-deep-equal'
 
 import type {Value, ArraySchemaWithLanguageOptions} from '../types'
 import Feedback from './Feedback'
 // TODO: Move this provider to the root component
 import {LanguageProvider} from './languageContext'
 import {namespace, version} from '../cache'
+import {getSelectedValue} from './getSelectedValue'
 
 export type InternationalizedArrayProps = ArrayOfObjectsInputProps<
   Value,
@@ -28,18 +31,28 @@ export default function InternationalizedArray(props: InternationalizedArrayProp
   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
-    : // eslint-disable-next-line require-await
-      suspend(async () => {
-        if (typeof options.languages === 'function') {
-          return options.languages(client)
-        }
-        return options.languages
-      }, [version, namespace])
+    : suspend(
+        // 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?: string) => {

package/src/components/Preload.tsx

@@ -7,10 +7,10 @@ export default memo(function Preload(
   props: Required<Pick<PluginConfig, 'apiVersion' | 'languages'>>
 ) {
   const client = useClient({apiVersion: props.apiVersion})
-  if (!Array.isArray(peek())) {
+  if (!Array.isArray(peek({}))) {
     // eslint-disable-next-line require-await
     preload(async () =>
-      Array.isArray(props.languages) ? props.languages : props.languages(client)
+      Array.isArray(props.languages) ? props.languages : props.languages(client, {})
     )
   }
 

package/src/components/getSelectedValue.ts

@@ -0,0 +1,29 @@
+import {get} from 'lodash'
+
+export const getSelectedValue = (
+  select: Record<string, string> | undefined,
+  document:
+    | {
+        [x: string]: unknown
+      }
+    | undefined
+): Record<string, unknown> => {
+  if (!select || !document) {
+    return {}
+  }
+
+  const selection: Record<string, string> = select || {}
+  const selectedValue: Record<string, unknown> = {}
+  for (const [key, path] of Object.entries(selection)) {
+    let value = get(document, path)
+    if (Array.isArray(value)) {
+      // If there are references in the array, ensure they have `_ref` set, otherwise they are considered empty and can safely be ignored
+      value = value.filter((item) =>
+        typeof item === 'object' ? item?._type === 'reference' && '_ref' in item : true
+      )
+    }
+    selectedValue[key] = value
+  }
+
+  return selectedValue
+}

package/src/plugin.tsx

@@ -11,7 +11,7 @@ const CONFIG_DEFAULT: PluginConfig = {
 }
 
 export const internationalizedArray = definePlugin<PluginConfig>((config = CONFIG_DEFAULT) => {
-  const {apiVersion = '2022-11-27', languages, fieldTypes} = {...CONFIG_DEFAULT, ...config}
+  const {apiVersion = '2022-11-27', select, languages, fieldTypes} = {...CONFIG_DEFAULT, ...config}
 
   return {
     name: 'sanity-plugin-internationalized-array',
@@ -30,7 +30,7 @@ export const internationalizedArray = definePlugin<PluginConfig>((config = CONFI
         },
     schema: {
       types: [
-        ...fieldTypes.map((type) => array({type, apiVersion, languages})),
+        ...fieldTypes.map((type) => array({type, apiVersion, select, languages})),
         ...fieldTypes.map((type) => object({type})),
       ],
     },

package/src/schema/array.ts

@@ -1,19 +1,21 @@
 /* eslint-disable no-nested-ternary */
-import {defineField, type FieldDefinition, type Rule, type SanityClient} from 'sanity'
+import {defineField, type FieldDefinition, type Rule} from 'sanity'
 import {peek} from '../cache'
 
 import {createFieldName} from '../components/createFieldName'
+import {getSelectedValue} from '../components/getSelectedValue'
 import InternationalizedArray from '../components/InternationalizedArray'
-import {Language, Value} from '../types'
+import {Language, LanguageCallback, Value} from '../types'
 
 type ArrayFactoryConfig = {
   apiVersion: string
-  languages: Language[] | ((client: SanityClient) => Promise<Language[]>)
+  select?: Record<string, string>
+  languages: Language[] | LanguageCallback
   type: string | FieldDefinition
 }
 
 export default (config: ArrayFactoryConfig): FieldDefinition<'array'> => {
-  const {apiVersion, languages, type} = config
+  const {apiVersion, select, languages, type} = config
   const typeName = typeof type === `string` ? type : type.name
   const arrayName = createFieldName(typeName)
   const objectName = createFieldName(typeName, true)
@@ -27,7 +29,7 @@ export default (config: ArrayFactoryConfig): FieldDefinition<'array'> => {
     components: {
       input: InternationalizedArray,
     },
-    options: {apiVersion, languages},
+    options: {apiVersion, select, languages},
     // TODO: Resolve this typing issue with the inner object
     // @ts-ignore
     of: [
@@ -43,12 +45,13 @@ export default (config: ArrayFactoryConfig): FieldDefinition<'array'> => {
           return true
         }
 
+        const selectedValue = getSelectedValue(select, context.document)
         const client = context.getClient({apiVersion})
         const contextLanguages: Language[] = Array.isArray(context?.type?.options?.languages)
           ? context!.type!.options.languages
-          : Array.isArray(peek())
-          ? peek()
-          : await context?.type?.options.languages(client)
+          : Array.isArray(peek(selectedValue))
+          ? peek(selectedValue)
+          : await context?.type?.options.languages(client, selectedValue)
 
         if (value && value.length > contextLanguages.length) {
           return `Cannot be more than ${

package/src/types.ts

@@ -1,4 +1,4 @@
-import type {Rule, ArraySchemaType, RuleTypeConstraint, SanityClient} from 'sanity'
+import type {Rule, ArraySchemaType, RuleTypeConstraint, SanityClient, FieldDefinition} from 'sanity'
 
 export type Language = {
   id: Intl.UnicodeBCP47LocaleIdentifier
@@ -24,12 +24,30 @@ export type Value = {
   value?: string
 }
 
+export type LanguageCallback = (
+  client: SanityClient,
+  selectedValue: Record<string, unknown>
+) => Promise<Language[]>
+
 export type PluginConfig = {
   /**
    * https://www.sanity.io/docs/api-versioning
    * @defaultValue '2022-11-27'
    */
   apiVersion?: string
+  /**
+   * Specify fields that should be available in the language callback:
+   * ```tsx
+   * {
+   *   select: {
+   *     markets: 'markets'
+   *   },
+   *   languages: (client, {markets}) =>
+   *     query.fetch(groq`*[_type == "language" && market in $markets]{id,title}`, {markets})
+   * }
+   * ```
+   */
+  select?: Record<string, string>
   /**
    * You can give it an array of language definitions:
    * ```tsx
@@ -57,7 +75,7 @@ export type PluginConfig = {
    * }
    * ```
    */
-  languages: Language[] | ((client: SanityClient) => Promise<Language[]>)
+  languages: Language[] | LanguageCallback
   /**
    * Can be a string matching core field types, as well as custom ones:
    * ```tsx
@@ -81,12 +99,13 @@ export type PluginConfig = {
    * }
    * ```
    */
-  fieldTypes: (string | RuleTypeConstraint)[]
+  fieldTypes: (string | RuleTypeConstraint | FieldDefinition)[]
 }
 
 export type ArraySchemaWithLanguageOptions = ArraySchemaType & {
   options: {
-    languages: Language[] | ((client: SanityClient) => Promise<Language[]>)
+    select?: Record<string, string>
+    languages: Language[] | LanguageCallback
     apiVersion: string
   }
 }