@sanity/language-filter 3.1.2 → 3.2.0

package/README.md

@@ -47,7 +47,7 @@ yarn add @sanity/language-filter
 
 Add it as a plugin in sanity.config.ts (or .js), and configure it:
 
-```
+```ts
  import {defineConfig} from 'sanity'
  import {languageFilter} from '@sanity/language-filter'
 
@@ -77,12 +77,46 @@ Add it as a plugin in sanity.config.ts (or .js), and configure it:
 
 Config properties:
 
-- `supportedLanguages` is an array of languages with `id` and `title`. If your localized fields are defined using our recommended way described here (https://www.sanity.io/docs/localization), you probably want to share this list of supported languages between this config and your schema.
+- `supportedLanguages` can be either:
+  -- An static array of language objects with `id` and `title`. If your localized fields are defined using our recommended way described here (https://www.sanity.io/docs/localization), you probably want to share this list of supported languages between this config and your schema.
+  -- A function that returns a promise resolving to an array of language objects with `id` and `title`. This is useful if you want to fetch the list of supported languages from an external source. See [Loading languages](#loading-languages) for more details.
 - `defaultLanguages` (optional) is an array of strings where each entry must match an `id` from the `supportedLanguages` array. These languages will be listed by default and will not be possible to unselect. If no `defaultLanguages` is configured, all localized fields will be selected by default.
 - `documentTypes` (optional) is an array of strings where each entry must match a `name` from your document schemas. If defined, this property will be used to conditionally show the language filter on specific document schema types. If undefined, the language filter will show on all document schema types.
 - `filterField` (optional) is a function that must return true if the field should be displayed. It is passed the enclosing type (e.g the object type containing the localized fields, the field, and an array of the currently selected language ids.
   This function is called for all fields and in objects for documents that have language filter enabled.
   _Default:_ `!enclosingType.name.startsWith('locale') || selectedLanguageIds.includes(field.name)`
+- `apiVersion` (optional) used for the Sanity Client when asynchronously loading languages.
+
+## Loading languages
+
+Languages must be an array of objects with an `id` and `title`.
+
+```ts
+languages: [
+  {id: 'en', title: 'English'},
+  {id: 'fr', title: 'French'}
+],
+```
+
+Or an asynchronous function that returns an array of objects with an `id` and `title`.
+
+```ts
+languages: async () => {
+  const response = await fetch('https://example.com/languages')
+  return response.json()
+}
+```
+
+The async function contains a configured Sanity Client in the first parameter, allowing you to store Language options as documents. Your query should return an array of objects with an `id` and `title`.
+
+```ts
+languages: async (client) => {
+  const response = await client.fetch(`*[_type == "language"]{ id, title }`)
+  return response
+},
+```
+
+`@sanity/language-filter`'s asynchronous language loading does not currently support modifying the query based on a value in the current document.
 
 ## Changes in V3
 
@@ -106,13 +140,6 @@ export const myDocumentSchema = {
 }
 ```
 
-### State management
-
-Selected languages are now stored as `langs` url-param state; this allows users to copy paste
-a url in the studio with the currently selected languages preselected.
-
-Previously this state was stored in localstorage.
-
 ## License
 
 MIT-licensed. See LICENSE.

package/lib/index.esm.js

@@ -1 +1 @@
-var e;const t=["members","schemaType","renderDefault"];function n(e,t){if(null==e)return{};var n,r,l=function(e,t){if(null==e)return{};var n,r,l={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(l[n]=e[n]);return l}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}import{jsx as o,jsxs as a,Fragment as u}from"react/jsx-runtime";import{useFormValue as c,TextWithTone as s,definePlugin as d,isObjectSchemaType as g}from"sanity";import{useState as f,createContext as p,useMemo as m,useContext as y,useCallback as h}from"react";import{Box as b,useClickOutside as v,Stack as O,Card as L,Button as j,Flex as S,Text as w,TextInput as T,Popover as P,Badge as x}from"@sanity/ui";import D from"styled-components";import{EyeClosedIcon as I,EyeOpenIcon as k,TranslateIcon as C,CheckmarkCircleIcon as N,CircleIcon as F}from"@sanity/icons";const z=(e,t,n)=>!e.name.startsWith("locale")||n.includes(t.name);function A(e,t){var n,r;const l=function(e){return"object"===(null==e?void 0:e.jsonType)&&"document"===E(e).name}(e)&&(null==(n=null==e?void 0:e.options)?void 0:n.languageFilter),i=!t.documentTypes;return!!(i&&!1!==l||!i&&l||e&&(null==(r=t.documentTypes)?void 0:r.includes(e.name)))}function E(e){return e.type?E(e.type):e}const J="@sanity/plugin/language-filter/selected-languages";function _(e){const t=H(e).map((e=>e.id));let n=t;try{const e=window.localStorage.getItem(J);e&&(n=JSON.parse(e))}catch(e){}var r;return r=t,n=n.filter((e=>r.includes(e))),n}function H(e){let{supportedLanguages:t,defaultLanguages:n}=e;return t.filter((e=>!(null==n?void 0:n.includes(e.id))))}const W={options:{supportedLanguages:[],defaultLanguages:[],documentTypes:[],filterField:z},selectedLanguageIds:[],setSelectedLanguageIds:()=>console.error("LanguageFilterStudioContext not initialized")},q=p(W);function B(e){const t=m((()=>l(l({},W.options),e.options)),[e.options]),[n,r]=function(e){return f((()=>{var t;return[...null!=(t=e.defaultLanguages)?t:[],..._(e)]}))}(t);return o(q.Provider,{value:{options:t,selectedLanguageIds:n,setSelectedLanguageIds:r},children:e.renderDefault(e)})}function G(){return y(q)}function K(e){const{members:r,schemaType:i,renderDefault:o}=e,a=n(e,t),{selectedLanguageIds:u,options:c}=G(),{filterField:s}=c,d=m((()=>r.filter((e=>"field"===e.kind&&s(i,e,u)||"fieldSet"===e.kind)).map((e=>"fieldSet"===e.kind?l(l({},e),{},{fieldSet:l(l({},e.fieldSet),{},{members:e.fieldSet.members.filter((e=>"field"===e.kind&&s(i,e,u)))})}):e))),[i,r,s,u]);return o(l(l({},a),{},{members:d,schemaType:i,renderDefault:o}))}const M=e=>Array.from(new Set(e));function Q(){const{selectedLanguageIds:e,setSelectedLanguageIds:t,options:n}=G(),{defaultLanguages:r=[]}=n,l=m((()=>H(n)),[n]),i=h((e=>{var n;t(M([...r,...e])),n=M([...r,...e]),window.localStorage.setItem(J,JSON.stringify(n))}),[r,t]),o=h((()=>i(l.map((e=>e.id)))),[i,l]),a=h((()=>{i(r)}),[r,i]),u=h((t=>{let n=e;n=n.includes(t)?n.filter((e=>e!==t)):M([...n,t]),i(n)}),[i,e]);return{activeLanguages:m((()=>M([...null!=r?r:[],...e])),[r,e]),allSelected:e.length===l.length+r.length,selectAll:o,selectNone:a,toggleLanguage:u}}const R=D(b)(e||(U=["\n  max-height: calc(100vh - 200px);\n"],V||(V=U.slice(0)),e=Object.freeze(Object.defineProperties(U,{raw:{value:Object.freeze(V)}}))));var U,V;function X(e){const{options:t}=e,n=t.supportedLanguages.filter((e=>{var n;return null==(n=t.defaultLanguages)?void 0:n.includes(e.id)})),r=t.supportedLanguages.filter((e=>{var n;return!(null==(n=t.defaultLanguages)?void 0:n.includes(e.id))})),[l,i]=f(!1),{activeLanguages:c,allSelected:d,selectAll:g,selectNone:p,toggleLanguage:m}=Q(),[y,x]=f(null),[D,N]=f(null),F=h((e=>{"ALL"===e.currentTarget.value?g():p()}),[g,p]),z=h((()=>i((e=>!e))),[]),A=h((()=>i(!1)),[]);v(A,[y,D]);const E=t.supportedLanguages.length,[J,_]=f(""),H=h((e=>{e.currentTarget.value?_(e.currentTarget.value):_("")}),[]),W=o(R,{overflow:"auto",children:a(O,{padding:1,space:1,children:[n.length>0&&a(u,{children:[n.map((e=>o(Y,{id:e.id,title:e.title,selected:!0},e.id))),o(L,{borderTop:!0})]}),o(j,{mode:"bleed",onClick:F,justify:"flex-start",value:d?"NONE":"ALL",disabled:!!J,children:a(S,{gap:3,align:"center",children:[o(w,{size:2,children:d?o(s,{tone:"primary",children:o(I,{})}):o(k,{})}),o(b,{flex:1,children:o(w,{children:d?"Hide all":"Show all"})})]})}),o(L,{borderTop:!0}),E>4?o(T,{onChange:H,value:J,placeholder:"Filter languages"}):null,r.filter((e=>!J||e.title.toLowerCase().includes(J.toLowerCase()))).map((e=>o(Y,{id:e.id,onToggle:m,selected:c.includes(e.id),title:e.title},e.id)))]})}),q=c.length===E?"Showing all":"Showing ".concat(c.length," / ").concat(E);return o(P,{content:W,open:l,portal:!0,ref:N,children:o(j,{text:q,icon:C,mode:"bleed",onClick:z,ref:x,selected:l})})}function Y(e){const{id:t,onToggle:n,selected:r,title:l}=e,i=h((()=>{n&&n(t)}),[t,n]),u=!n;return o(j,{mode:"bleed",onClick:i,justify:"flex-start",disabled:u,children:a(S,{gap:3,align:"center",children:[o(w,{size:2,children:r?o(s,{tone:u?"default":"positive",children:o(N,{})}):o(F,{})}),o(b,{flex:1,children:o(w,{children:l})}),o(x,{children:t})]})})}const Z=d((e=>{const t=()=>o(X,{options:e}),n=l(l({},W.options),e);return{name:"@sanity/language-filter",studio:{components:{layout:e=>B(l(l({},e),{},{options:n}))}},document:{unstable_languageFilter:(n,r)=>{let{schemaType:l,schema:i}=r;return A(i.get(l),e)?[...n,t]:n}},form:{components:{input:e=>"root"!==e.id&&g(e.schemaType)?function(e){const{options:t}=G(),n=c(["_type"]),{documentTypes:r}=t;return"string"==typeof n&&r.includes(n)?o(K,l({},e)):e.renderDefault(e)}(e):e.renderDefault(e)}}}}));export{z as defaultFilterField,A as isLanguageFilterEnabled,Z as languageFilter,G as useLanguageFilterStudioContext};//# sourceMappingURL=index.esm.js.map
+var e;const t=["members","schemaType","renderDefault"];function n(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}import{jsx as l,jsxs as a,Fragment as s}from"react/jsx-runtime";import{useClient as u,useFormValue as c,TextWithTone as d,definePlugin as g,isObjectSchemaType as p}from"sanity";import{useState as f,createContext as m,useEffect as y,useMemo as h,useContext as b,useCallback as v}from"react";import{Box as L,useClickOutside as O,Stack as j,Card as S,Button as w,Flex as T,Text as P,TextInput as x,Popover as A,Badge as D}from"@sanity/ui";import I from"styled-components";import{EyeClosedIcon as k,EyeOpenIcon as C,TranslateIcon as N,CheckmarkCircleIcon as F,CircleIcon as z}from"@sanity/icons";const E=(e,t,n)=>!e.name.startsWith("locale")||n.includes(t.name);function J(e,t){var n,r;const o=function(e){return"object"===(null==e?void 0:e.jsonType)&&"document"===V(e).name}(e)&&(null==(n=null==e?void 0:e.options)?void 0:n.languageFilter),i=!t.documentTypes;return!!(i&&!1!==o||!i&&o||e&&(null==(r=t.documentTypes)?void 0:r.includes(e.name)))}function V(e){return e.type?V(e.type):e}const _="@sanity/plugin/language-filter/selected-languages";function H(e){const t=W(e).map((e=>e.id));let n=t;try{const e=window.localStorage.getItem(_);e&&(n=JSON.parse(e))}catch(e){}var r;return r=t,n=n.filter((e=>r.includes(e))),n}function W(e){let{supportedLanguages:t,defaultLanguages:n}=e;return Array.isArray(t)?t.filter((e=>!(null==n?void 0:n.includes(e.id)))):[]}const q={options:{apiVersion:"2022-11-27",supportedLanguages:[],defaultLanguages:[],documentTypes:[],filterField:E},selectedLanguageIds:[],setSelectedLanguageIds:()=>console.error("LanguageFilterStudioContext not initialized")},B=m(q);function G(e){const t=u({apiVersion:"2023-01-01"}),[n,r]=f(Array.isArray(e.options.supportedLanguages)?e.options.supportedLanguages:[]);y((()=>{let n=[];Array.isArray(e.options.supportedLanguages)||async function(e){n=await e(t,{}),r(n)}(e.options.supportedLanguages)}),[t,e.options.supportedLanguages]);const i=h((()=>o(o(o({},q.options),e.options),{},{supportedLanguages:n})),[e.options,n]),[a,s]=function(e){return f((()=>{var t;return[...null!=(t=e.defaultLanguages)?t:[],...H(e)]}))}(i);return l(B.Provider,{value:{options:i,selectedLanguageIds:a,setSelectedLanguageIds:s},children:e.renderDefault(e)})}function K(){return b(B)}function M(e){const{members:r,schemaType:i,renderDefault:l}=e,a=n(e,t),{selectedLanguageIds:s,options:u}=K(),{filterField:c}=u,d=h((()=>r.filter((e=>"field"===e.kind&&c(i,e,s)||"fieldSet"===e.kind)).map((e=>"fieldSet"===e.kind?o(o({},e),{},{fieldSet:o(o({},e.fieldSet),{},{members:e.fieldSet.members.filter((e=>"field"===e.kind&&c(i,e,s)))})}):e))),[i,r,c,s]);return l(o(o({},a),{},{members:d,schemaType:i,renderDefault:l}))}const Q=e=>Array.from(new Set(e));function R(){const{selectedLanguageIds:e,setSelectedLanguageIds:t,options:n}=K(),{defaultLanguages:r=[]}=n,o=h((()=>W(n)),[n]),i=v((e=>{var n;t(Q([...r,...e])),n=Q([...r,...e]),window.localStorage.setItem(_,JSON.stringify(n))}),[r,t]),l=v((()=>i(o.map((e=>e.id)))),[i,o]),a=v((()=>{i(r)}),[r,i]),s=v((t=>{let n=e;n=n.includes(t)?n.filter((e=>e!==t)):Q([...n,t]),i(n)}),[i,e]);return{activeLanguages:h((()=>Q([...null!=r?r:[],...e])),[r,e]),allSelected:e.length===o.length+r.length,selectAll:l,selectNone:a,toggleLanguage:s}}const U=I(L)(e||(X=["\n  max-height: calc(100vh - 200px);\n"],Y||(Y=X.slice(0)),e=Object.freeze(Object.defineProperties(X,{raw:{value:Object.freeze(Y)}}))));var X,Y;function Z(){const{options:e}=K(),t=e.supportedLanguages.filter((t=>{var n;return null==(n=e.defaultLanguages)?void 0:n.includes(t.id)})),n=e.supportedLanguages.filter((t=>{var n;return!(null==(n=e.defaultLanguages)?void 0:n.includes(t.id))})),[r,o]=f(!1),{activeLanguages:i,allSelected:u,selectAll:c,selectNone:g,toggleLanguage:p}=R(),[m,y]=f(null),[h,b]=f(null),D=v((e=>{"ALL"===e.currentTarget.value?c():g()}),[c,g]),I=v((()=>o((e=>!e))),[]),F=v((()=>o(!1)),[]);O(F,[m,h]);const z=e.supportedLanguages.length,[E,J]=f(""),V=v((e=>{e.currentTarget.value?J(e.currentTarget.value):J("")}),[]),_=z>4,H=l(U,{overflow:"auto",children:a(j,{padding:1,space:1,children:[t.length>0&&a(s,{children:[t.map((e=>l($,{id:e.id,title:e.title,selected:!0},e.id))),l(S,{borderTop:!0})]}),l(w,{mode:"bleed",onClick:D,justify:"flex-start",value:u?"NONE":"ALL",disabled:!!E,children:a(T,{gap:3,align:"center",children:[l(P,{size:2,children:u?l(d,{tone:"primary",children:l(k,{})}):l(C,{})}),l(L,{flex:1,children:l(P,{children:u?"Hide all":"Show all"})})]})}),_?l(x,{onChange:V,value:E,placeholder:"Filter languages"}):l(S,{borderTop:!0}),n.filter((e=>!E||e.title.toLowerCase().includes(E.toLowerCase()))).map((e=>l($,{id:e.id,onToggle:p,selected:i.includes(e.id),title:e.title},e.id)))]})}),W=i.length===z?"Showing all":"Showing ".concat(i.length," / ").concat(z);return l(A,{content:H,open:r,portal:!0,ref:b,children:l(w,{text:W,icon:N,mode:"bleed",onClick:I,ref:y,selected:r})})}function $(e){const{id:t,onToggle:n,selected:r,title:o}=e,i=v((()=>{n&&n(t)}),[t,n]),s=!n;return l(w,{mode:"bleed",onClick:i,justify:"flex-start",disabled:s,children:a(T,{gap:3,align:"center",children:[l(P,{size:2,children:r?l(d,{tone:s?"default":"positive",children:l(F,{})}):l(z,{})}),l(L,{flex:1,children:l(P,{children:o})}),l(D,{children:t})]})})}const ee=g((e=>{const t=()=>l(Z,{}),n=o(o({},q.options),e);return{name:"@sanity/language-filter",studio:{components:{layout:e=>G(o(o({},e),{},{options:n}))}},document:{unstable_languageFilter:(n,r)=>{let{schemaType:o,schema:i}=r;return J(i.get(o),e)?[...n,t]:n}},form:{components:{input:e=>"root"!==e.id&&p(e.schemaType)?function(e){const{options:t}=K(),n=c(["_type"]),{documentTypes:r}=t;return"string"==typeof n&&r.includes(n)?l(M,o({},e)):e.renderDefault(e)}(e):e.renderDefault(e)}}}}));export{E as defaultFilterField,J as isLanguageFilterEnabled,ee as languageFilter,K as useLanguageFilterStudioContext};//# sourceMappingURL=index.esm.js.map

package/lib/index.js

@@ -1 +1 @@
-"use strict";var e;const t=["members","schemaType","renderDefault"];function n(e,t){if(null==e)return{};var n,r,l=function(e,t){if(null==e)return{};var n,r,l={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(l[n]=e[n]);return l}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}Object.defineProperty(exports,"__esModule",{value:!0});var i=require("react/jsx-runtime"),a=require("sanity"),s=require("react"),u=require("@sanity/ui"),c=require("styled-components"),d=require("@sanity/icons");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=g(c);const p=(e,t,n)=>!e.name.startsWith("locale")||n.includes(t.name);function m(e,t){var n,r;const l=function(e){return"object"===(null==e?void 0:e.jsonType)&&"document"===x(e).name}(e)&&(null==(n=null==e?void 0:e.options)?void 0:n.languageFilter),o=!t.documentTypes;return!!(o&&!1!==l||!o&&l||e&&(null==(r=t.documentTypes)?void 0:r.includes(e.name)))}function x(e){return e.type?x(e.type):e}const b="@sanity/plugin/language-filter/selected-languages";function j(e){const t=y(e).map((e=>e.id));let n=t;try{const e=window.localStorage.getItem(b);e&&(n=JSON.parse(e))}catch(e){}var r;return r=t,n=n.filter((e=>r.includes(e))),n}function y(e){let{supportedLanguages:t,defaultLanguages:n}=e;return t.filter((e=>!(null==n?void 0:n.includes(e.id))))}const h={options:{supportedLanguages:[],defaultLanguages:[],documentTypes:[],filterField:p},selectedLanguageIds:[],setSelectedLanguageIds:()=>console.error("LanguageFilterStudioContext not initialized")},v=s.createContext(h);function O(e){const t=s.useMemo((()=>l(l({},h.options),e.options)),[e.options]),[n,r]=function(e){return s.useState((()=>{var t;return[...null!=(t=e.defaultLanguages)?t:[],...j(e)]}))}(t);return i.jsx(v.Provider,{value:{options:t,selectedLanguageIds:n,setSelectedLanguageIds:r},children:e.renderDefault(e)})}function S(){return s.useContext(v)}function L(e){const{members:r,schemaType:o,renderDefault:i}=e,a=n(e,t),{selectedLanguageIds:u,options:c}=S(),{filterField:d}=c,g=s.useMemo((()=>r.filter((e=>"field"===e.kind&&d(o,e,u)||"fieldSet"===e.kind)).map((e=>"fieldSet"===e.kind?l(l({},e),{},{fieldSet:l(l({},e.fieldSet),{},{members:e.fieldSet.members.filter((e=>"field"===e.kind&&d(o,e,u)))})}):e))),[o,r,d,u]);return i(l(l({},a),{},{members:g,schemaType:o,renderDefault:i}))}const T=e=>Array.from(new Set(e));function C(){const{selectedLanguageIds:e,setSelectedLanguageIds:t,options:n}=S(),{defaultLanguages:r=[]}=n,l=s.useMemo((()=>y(n)),[n]),o=s.useCallback((e=>{var n;t(T([...r,...e])),n=T([...r,...e]),window.localStorage.setItem(b,JSON.stringify(n))}),[r,t]),i=s.useCallback((()=>o(l.map((e=>e.id)))),[o,l]),a=s.useCallback((()=>{o(r)}),[r,o]),u=s.useCallback((t=>{let n=e;n=n.includes(t)?n.filter((e=>e!==t)):T([...n,t]),o(n)}),[o,e]);return{activeLanguages:s.useMemo((()=>T([...null!=r?r:[],...e])),[r,e]),allSelected:e.length===l.length+r.length,selectAll:i,selectNone:a,toggleLanguage:u}}const w=f.default(u.Box)(e||(k=["\n  max-height: calc(100vh - 200px);\n"],P||(P=k.slice(0)),e=Object.freeze(Object.defineProperties(k,{raw:{value:Object.freeze(P)}}))));var k,P;function I(e){const{options:t}=e,n=t.supportedLanguages.filter((e=>{var n;return null==(n=t.defaultLanguages)?void 0:n.includes(e.id)})),r=t.supportedLanguages.filter((e=>{var n;return!(null==(n=t.defaultLanguages)?void 0:n.includes(e.id))})),[l,o]=s.useState(!1),{activeLanguages:c,allSelected:g,selectAll:f,selectNone:p,toggleLanguage:m}=C(),[x,b]=s.useState(null),[j,y]=s.useState(null),h=s.useCallback((e=>{"ALL"===e.currentTarget.value?f():p()}),[f,p]),v=s.useCallback((()=>o((e=>!e))),[]),O=s.useCallback((()=>o(!1)),[]);u.useClickOutside(O,[x,j]);const S=t.supportedLanguages.length,[L,T]=s.useState(""),k=s.useCallback((e=>{e.currentTarget.value?T(e.currentTarget.value):T("")}),[]),P=i.jsx(w,{overflow:"auto",children:i.jsxs(u.Stack,{padding:1,space:1,children:[n.length>0&&i.jsxs(i.Fragment,{children:[n.map((e=>i.jsx(F,{id:e.id,title:e.title,selected:!0},e.id))),i.jsx(u.Card,{borderTop:!0})]}),i.jsx(u.Button,{mode:"bleed",onClick:h,justify:"flex-start",value:g?"NONE":"ALL",disabled:!!L,children:i.jsxs(u.Flex,{gap:3,align:"center",children:[i.jsx(u.Text,{size:2,children:g?i.jsx(a.TextWithTone,{tone:"primary",children:i.jsx(d.EyeClosedIcon,{})}):i.jsx(d.EyeOpenIcon,{})}),i.jsx(u.Box,{flex:1,children:i.jsx(u.Text,{children:g?"Hide all":"Show all"})})]})}),i.jsx(u.Card,{borderTop:!0}),S>4?i.jsx(u.TextInput,{onChange:k,value:L,placeholder:"Filter languages"}):null,r.filter((e=>!L||e.title.toLowerCase().includes(L.toLowerCase()))).map((e=>i.jsx(F,{id:e.id,onToggle:m,selected:c.includes(e.id),title:e.title},e.id)))]})}),I=c.length===S?"Showing all":"Showing ".concat(c.length," / ").concat(S);return i.jsx(u.Popover,{content:P,open:l,portal:!0,ref:y,children:i.jsx(u.Button,{text:I,icon:d.TranslateIcon,mode:"bleed",onClick:v,ref:b,selected:l})})}function F(e){const{id:t,onToggle:n,selected:r,title:l}=e,o=s.useCallback((()=>{n&&n(t)}),[t,n]),c=!n;return i.jsx(u.Button,{mode:"bleed",onClick:o,justify:"flex-start",disabled:c,children:i.jsxs(u.Flex,{gap:3,align:"center",children:[i.jsx(u.Text,{size:2,children:r?i.jsx(a.TextWithTone,{tone:c?"default":"positive",children:i.jsx(d.CheckmarkCircleIcon,{})}):i.jsx(d.CircleIcon,{})}),i.jsx(u.Box,{flex:1,children:i.jsx(u.Text,{children:l})}),i.jsx(u.Badge,{children:t})]})})}const D=a.definePlugin((e=>{const t=()=>i.jsx(I,{options:e}),n=l(l({},h.options),e);return{name:"@sanity/language-filter",studio:{components:{layout:e=>O(l(l({},e),{},{options:n}))}},document:{unstable_languageFilter:(n,r)=>{let{schemaType:l,schema:o}=r;return m(o.get(l),e)?[...n,t]:n}},form:{components:{input:e=>"root"!==e.id&&a.isObjectSchemaType(e.schemaType)?function(e){const{options:t}=S(),n=a.useFormValue(["_type"]),{documentTypes:r}=t;return"string"==typeof n&&r.includes(n)?i.jsx(L,l({},e)):e.renderDefault(e)}(e):e.renderDefault(e)}}}}));exports.defaultFilterField=p,exports.isLanguageFilterEnabled=m,exports.languageFilter=D,exports.useLanguageFilterStudioContext=S;//# sourceMappingURL=index.js.map
+"use strict";var e;const t=["members","schemaType","renderDefault"];function n(e,t){if(null==e)return{};var n,r,l=function(e,t){if(null==e)return{};var n,r,l={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(l[n]=e[n]);return l}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function a(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}Object.defineProperty(exports,"__esModule",{value:!0});var o=require("react/jsx-runtime"),s=require("sanity"),i=require("react"),u=require("@sanity/ui"),c=require("styled-components"),d=require("@sanity/icons");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=g(c);const f=(e,t,n)=>!e.name.startsWith("locale")||n.includes(t.name);function m(e,t){var n,r;const l=function(e){return"object"===(null==e?void 0:e.jsonType)&&"document"===y(e).name}(e)&&(null==(n=null==e?void 0:e.options)?void 0:n.languageFilter),a=!t.documentTypes;return!!(a&&!1!==l||!a&&l||e&&(null==(r=t.documentTypes)?void 0:r.includes(e.name)))}function y(e){return e.type?y(e.type):e}const x="@sanity/plugin/language-filter/selected-languages";function b(e){const t=j(e).map((e=>e.id));let n=t;try{const e=window.localStorage.getItem(x);e&&(n=JSON.parse(e))}catch(e){}var r;return r=t,n=n.filter((e=>r.includes(e))),n}function j(e){let{supportedLanguages:t,defaultLanguages:n}=e;return Array.isArray(t)?t.filter((e=>!(null==n?void 0:n.includes(e.id)))):[]}const h={options:{apiVersion:"2022-11-27",supportedLanguages:[],defaultLanguages:[],documentTypes:[],filterField:f},selectedLanguageIds:[],setSelectedLanguageIds:()=>console.error("LanguageFilterStudioContext not initialized")},v=i.createContext(h);function L(e){const t=s.useClient({apiVersion:"2023-01-01"}),[n,r]=i.useState(Array.isArray(e.options.supportedLanguages)?e.options.supportedLanguages:[]);i.useEffect((()=>{let n=[];Array.isArray(e.options.supportedLanguages)||async function(e){n=await e(t,{}),r(n)}(e.options.supportedLanguages)}),[t,e.options.supportedLanguages]);const a=i.useMemo((()=>l(l(l({},h.options),e.options),{},{supportedLanguages:n})),[e.options,n]),[u,c]=function(e){return i.useState((()=>{var t;return[...null!=(t=e.defaultLanguages)?t:[],...b(e)]}))}(a);return o.jsx(v.Provider,{value:{options:a,selectedLanguageIds:u,setSelectedLanguageIds:c},children:e.renderDefault(e)})}function O(){return i.useContext(v)}function S(e){const{members:r,schemaType:a,renderDefault:o}=e,s=n(e,t),{selectedLanguageIds:u,options:c}=O(),{filterField:d}=c,g=i.useMemo((()=>r.filter((e=>"field"===e.kind&&d(a,e,u)||"fieldSet"===e.kind)).map((e=>"fieldSet"===e.kind?l(l({},e),{},{fieldSet:l(l({},e.fieldSet),{},{members:e.fieldSet.members.filter((e=>"field"===e.kind&&d(a,e,u)))})}):e))),[a,r,d,u]);return o(l(l({},s),{},{members:g,schemaType:a,renderDefault:o}))}const T=e=>Array.from(new Set(e));function C(){const{selectedLanguageIds:e,setSelectedLanguageIds:t,options:n}=O(),{defaultLanguages:r=[]}=n,l=i.useMemo((()=>j(n)),[n]),a=i.useCallback((e=>{var n;t(T([...r,...e])),n=T([...r,...e]),window.localStorage.setItem(x,JSON.stringify(n))}),[r,t]),o=i.useCallback((()=>a(l.map((e=>e.id)))),[a,l]),s=i.useCallback((()=>{a(r)}),[r,a]),u=i.useCallback((t=>{let n=e;n=n.includes(t)?n.filter((e=>e!==t)):T([...n,t]),a(n)}),[a,e]);return{activeLanguages:i.useMemo((()=>T([...null!=r?r:[],...e])),[r,e]),allSelected:e.length===l.length+r.length,selectAll:o,selectNone:s,toggleLanguage:u}}const w=p.default(u.Box)(e||(k=["\n  max-height: calc(100vh - 200px);\n"],P||(P=k.slice(0)),e=Object.freeze(Object.defineProperties(k,{raw:{value:Object.freeze(P)}}))));var k,P;function I(){const{options:e}=O(),t=e.supportedLanguages.filter((t=>{var n;return null==(n=e.defaultLanguages)?void 0:n.includes(t.id)})),n=e.supportedLanguages.filter((t=>{var n;return!(null==(n=e.defaultLanguages)?void 0:n.includes(t.id))})),[r,l]=i.useState(!1),{activeLanguages:a,allSelected:c,selectAll:g,selectNone:p,toggleLanguage:f}=C(),[m,y]=i.useState(null),[x,b]=i.useState(null),j=i.useCallback((e=>{"ALL"===e.currentTarget.value?g():p()}),[g,p]),h=i.useCallback((()=>l((e=>!e))),[]),v=i.useCallback((()=>l(!1)),[]);u.useClickOutside(v,[m,x]);const L=e.supportedLanguages.length,[S,T]=i.useState(""),k=i.useCallback((e=>{e.currentTarget.value?T(e.currentTarget.value):T("")}),[]),P=L>4,I=o.jsx(w,{overflow:"auto",children:o.jsxs(u.Stack,{padding:1,space:1,children:[t.length>0&&o.jsxs(o.Fragment,{children:[t.map((e=>o.jsx(F,{id:e.id,title:e.title,selected:!0},e.id))),o.jsx(u.Card,{borderTop:!0})]}),o.jsx(u.Button,{mode:"bleed",onClick:j,justify:"flex-start",value:c?"NONE":"ALL",disabled:!!S,children:o.jsxs(u.Flex,{gap:3,align:"center",children:[o.jsx(u.Text,{size:2,children:c?o.jsx(s.TextWithTone,{tone:"primary",children:o.jsx(d.EyeClosedIcon,{})}):o.jsx(d.EyeOpenIcon,{})}),o.jsx(u.Box,{flex:1,children:o.jsx(u.Text,{children:c?"Hide all":"Show all"})})]})}),P?o.jsx(u.TextInput,{onChange:k,value:S,placeholder:"Filter languages"}):o.jsx(u.Card,{borderTop:!0}),n.filter((e=>!S||e.title.toLowerCase().includes(S.toLowerCase()))).map((e=>o.jsx(F,{id:e.id,onToggle:f,selected:a.includes(e.id),title:e.title},e.id)))]})}),A=a.length===L?"Showing all":"Showing ".concat(a.length," / ").concat(L);return o.jsx(u.Popover,{content:I,open:r,portal:!0,ref:b,children:o.jsx(u.Button,{text:A,icon:d.TranslateIcon,mode:"bleed",onClick:h,ref:y,selected:r})})}function F(e){const{id:t,onToggle:n,selected:r,title:l}=e,a=i.useCallback((()=>{n&&n(t)}),[t,n]),c=!n;return o.jsx(u.Button,{mode:"bleed",onClick:a,justify:"flex-start",disabled:c,children:o.jsxs(u.Flex,{gap:3,align:"center",children:[o.jsx(u.Text,{size:2,children:r?o.jsx(s.TextWithTone,{tone:c?"default":"positive",children:o.jsx(d.CheckmarkCircleIcon,{})}):o.jsx(d.CircleIcon,{})}),o.jsx(u.Box,{flex:1,children:o.jsx(u.Text,{children:l})}),o.jsx(u.Badge,{children:t})]})})}const A=s.definePlugin((e=>{const t=()=>o.jsx(I,{}),n=l(l({},h.options),e);return{name:"@sanity/language-filter",studio:{components:{layout:e=>L(l(l({},e),{},{options:n}))}},document:{unstable_languageFilter:(n,r)=>{let{schemaType:l,schema:a}=r;return m(a.get(l),e)?[...n,t]:n}},form:{components:{input:e=>"root"!==e.id&&s.isObjectSchemaType(e.schemaType)?function(e){const{options:t}=O(),n=s.useFormValue(["_type"]),{documentTypes:r}=t;return"string"==typeof n&&r.includes(n)?o.jsx(S,l({},e)):e.renderDefault(e)}(e):e.renderDefault(e)}}}}));exports.defaultFilterField=f,exports.isLanguageFilterEnabled=m,exports.languageFilter=A,exports.useLanguageFilterStudioContext=O;//# sourceMappingURL=index.js.map

package/lib/src/index.d.ts

@@ -4,6 +4,7 @@ import {FieldMember} from 'sanity'
 import {FieldsetState} from 'sanity'
 import {ObjectSchemaType} from 'sanity'
 import {Plugin as Plugin_2} from 'sanity'
+import {SanityClient} from 'sanity'
 import type {SchemaType} from 'sanity'
 
 export declare const defaultFilterField: FilterFieldFunction
@@ -19,11 +20,16 @@ export declare function isLanguageFilterEnabled(
   options: LanguageFilterConfig
 ): boolean
 
-export declare interface Language {
-  id: string
+export declare type Language = {
+  id: Intl.UnicodeBCP47LocaleIdentifier
   title: string
 }
 
+declare type LanguageCallback = (
+  client: SanityClient,
+  selectedValue: Record<string, unknown>
+) => Promise<Language[]>
+
 /**
  * ## Usage in sanity.config.ts (or .js)
  *
@@ -60,10 +66,19 @@ export declare interface Language {
 export declare const languageFilter: Plugin_2<LanguageFilterConfig>
 
 export declare interface LanguageFilterConfig {
-  supportedLanguages: Language[]
+  supportedLanguages: Language[] | LanguageCallback
   defaultLanguages?: string[]
   documentTypes?: string[]
   filterField?: FilterFieldFunction
+  /**
+   * https://www.sanity.io/docs/api-versioning
+   * @defaultValue '2022-11-27'
+   */
+  apiVersion?: string
+}
+
+declare interface LanguageFilterConfigProcessed extends LanguageFilterConfig {
+  supportedLanguages: Language[]
 }
 
 export declare interface LanguageFilterOptions {
@@ -74,11 +89,11 @@ export declare interface LanguageFilterSchema extends ObjectSchemaType {
   options?: LanguageFilterOptions
 }
 
-declare interface LanguageFilterStudioContextProps {
-  options: Required<LanguageFilterConfig>
+declare interface LanguageFilterStudioContextProcessed {
+  options: Required<LanguageFilterConfigProcessed>
 }
 
-declare interface LanguageFilterStudioContextValue extends LanguageFilterStudioContextProps {
+declare interface LanguageFilterStudioContextValue extends LanguageFilterStudioContextProcessed {
   selectedLanguageIds: string[]
   setSelectedLanguageIds: (ids: string[]) => void
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/language-filter",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "description": "A Sanity plugin that supports filtering localized fields by language",
   "homepage": "https://github.com/sanity-io/language-filter#readme",
   "bugs": {

package/src/LanguageFilterMenuButton.tsx

@@ -12,7 +12,6 @@ import {
 } from '@sanity/ui'
 import React, {FormEvent, MouseEventHandler, useCallback, useState} from 'react'
 import styled from 'styled-components'
-import {LanguageFilterConfig} from './types'
 import {usePaneLanguages} from './usePaneLanguages'
 import {
   CheckmarkCircleIcon,
@@ -22,17 +21,14 @@ import {
   TranslateIcon,
 } from '@sanity/icons'
 import {TextWithTone} from 'sanity'
+import {useLanguageFilterStudioContext} from './LanguageFilterStudioContext'
 
 const StyledBox = styled(Box)`
   max-height: calc(100vh - 200px);
 `
 
-export interface LanguageFilterMenuButtonProps {
-  options: LanguageFilterConfig
-}
-
-export function LanguageFilterMenuButton(props: LanguageFilterMenuButtonProps) {
-  const {options} = props
+export function LanguageFilterMenuButton() {
+  const {options} = useLanguageFilterStudioContext()
 
   const defaultLanguages = options.supportedLanguages.filter((l) =>
     options.defaultLanguages?.includes(l.id)
@@ -77,6 +73,8 @@ export function LanguageFilterMenuButton(props: LanguageFilterMenuButtonProps) {
     }
   }, [])
 
+  const showSearch = langCount > 4
+
   const content = (
     <StyledBox overflow="auto">
       <Stack padding={1} space={1}>
@@ -112,11 +110,11 @@ export function LanguageFilterMenuButton(props: LanguageFilterMenuButtonProps) {
           </Flex>
         </Button>
 
-        <Card borderTop />
-
-        {langCount > 4 ? (
+        {showSearch ? (
           <TextInput onChange={handleQuery} value={query} placeholder="Filter languages" />
-        ) : null}
+        ) : (
+          <Card borderTop />
+        )}
 
         {languageOptions
           .filter((language) => {

package/src/LanguageFilterStudioContext.tsx

@@ -1,6 +1,11 @@
-import React, {createContext, useContext, useMemo} from 'react'
-import {LanguageFilterConfig} from './types'
-import {LayoutProps} from 'sanity'
+import React, {createContext, useContext, useEffect, useMemo, useState} from 'react'
+import {
+  Language,
+  LanguageCallback,
+  LanguageFilterConfig,
+  LanguageFilterConfigProcessed,
+} from './types'
+import {LayoutProps, useClient} from 'sanity'
 import {defaultFilterField} from './filterField'
 import {useSelectedLanguageIds} from './useSelectedLanguageIds'
 
@@ -9,13 +14,18 @@ export interface LanguageFilterStudioContextProps {
   options: Required<LanguageFilterConfig>
 }
 
-export interface LanguageFilterStudioContextValue extends LanguageFilterStudioContextProps {
+export interface LanguageFilterStudioContextProcessed {
+  options: Required<LanguageFilterConfigProcessed>
+}
+
+export interface LanguageFilterStudioContextValue extends LanguageFilterStudioContextProcessed {
   selectedLanguageIds: string[]
   setSelectedLanguageIds: (ids: string[]) => void
 }
 
 export const defaultContextValue: LanguageFilterStudioContextValue = {
   options: {
+    apiVersion: '2022-11-27',
     supportedLanguages: [],
     defaultLanguages: [],
     documentTypes: [],
@@ -36,13 +46,31 @@ const LanguageFilterStudioContext =
 export function LanguageFilterStudioProvider(
   props: LayoutProps & LanguageFilterStudioContextProps
 ) {
-  const options = useMemo(
-    () => ({
+  const client = useClient({apiVersion: '2023-01-01'})
+  const [languages, setLanguages] = useState<Language[]>(
+    Array.isArray(props.options.supportedLanguages) ? props.options.supportedLanguages : []
+  )
+  useEffect(() => {
+    let asyncLanguages: Language[] = []
+
+    async function getLanguages(supportedLanguagesCallback: LanguageCallback) {
+      asyncLanguages = await supportedLanguagesCallback(client, {})
+      setLanguages(asyncLanguages)
+    }
+
+    if (!Array.isArray(props.options.supportedLanguages)) {
+      getLanguages(props.options.supportedLanguages)
+    }
+  }, [client, props.options.supportedLanguages])
+
+  const options = useMemo<Required<LanguageFilterConfigProcessed>>(() => {
+    return {
       ...defaultContextValue.options,
       ...props.options,
-    }),
-    [props.options]
-  )
+      supportedLanguages: languages,
+    }
+  }, [props.options, languages])
+
   const [selectedLanguageIds, setSelectedLanguageIds] = useSelectedLanguageIds(options)
 
   return (

package/src/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

@@ -46,7 +46,7 @@ import {defaultContextValue, LanguageFilterStudioProvider} from './LanguageFilte
  */
 export const languageFilter = definePlugin<LanguageFilterConfig>((options) => {
   const RenderLanguageFilter: DocumentLanguageFilterComponent = () => {
-    return <LanguageFilterMenuButton options={options} />
+    return <LanguageFilterMenuButton />
   }
 
   const pluginOptions = {

package/src/types.ts

@@ -1,4 +1,4 @@
-import {FieldMember, FieldsetState, ObjectSchemaType} from 'sanity'
+import {FieldMember, FieldsetState, ObjectSchemaType, SanityClient} from 'sanity'
 
 export interface LanguageFilterOptions {
   languageFilter?: boolean
@@ -8,11 +8,16 @@ export interface LanguageFilterSchema extends ObjectSchemaType {
   options?: LanguageFilterOptions
 }
 
-export interface Language {
-  id: string
+export type Language = {
+  id: Intl.UnicodeBCP47LocaleIdentifier
   title: string
 }
 
+export type LanguageCallback = (
+  client: SanityClient,
+  selectedValue: Record<string, unknown>
+) => Promise<Language[]>
+
 export type FilterFieldFunction = (
   enclosingType: ObjectSchemaType,
   field: FieldMember | FieldsetState,
@@ -20,8 +25,17 @@ export type FilterFieldFunction = (
 ) => boolean
 
 export interface LanguageFilterConfig {
-  supportedLanguages: Language[]
+  supportedLanguages: Language[] | LanguageCallback
   defaultLanguages?: string[]
   documentTypes?: string[]
   filterField?: FilterFieldFunction
+  /**
+   * https://www.sanity.io/docs/api-versioning
+   * @defaultValue '2022-11-27'
+   */
+  apiVersion?: string
+}
+
+export interface LanguageFilterConfigProcessed extends LanguageFilterConfig {
+  supportedLanguages: Language[]
 }

package/src/useSelectedLanguageIds.ts

@@ -30,7 +30,9 @@ export function getSelectableLanguages({
   supportedLanguages,
   defaultLanguages,
 }: LanguageFilterConfig): Language[] {
-  return supportedLanguages.filter((lang) => !defaultLanguages?.includes(lang.id))
+  return Array.isArray(supportedLanguages)
+    ? supportedLanguages.filter((lang) => !defaultLanguages?.includes(lang.id))
+    : []
 }
 
 export function useSelectedLanguageIds(