@sanity/language-filter 3.0.1 → 3.1.1

package/README.md

@@ -7,7 +7,7 @@
 
 A Sanity plugin that supports filtering localized fields by language
 
-![Language Filter UI](https://user-images.githubusercontent.com/9684022/150549913-68f1b7c7-3305-48b4-b72b-41b95e82450c.gif)
+![Language Filter UI](https://github.com/sanity-io/language-filter/assets/9684022/1a1f77cf-8234-4cf4-918d-da48c1b879b8)
 
 ## What this plugin solves
 
@@ -31,7 +31,6 @@ This plugin adds features to the Studio to improve handling **field-level transl
 
 For **document-level translations** you should use the [@sanity/document-internationalization plugin](https://www.npmjs.com/package/@sanity/document-internationalization).
 
-
 ## Installation
 
 ```
@@ -45,6 +44,7 @@ yarn add @sanity/language-filter
 ```
 
 ## Usage
+
 Add it as a plugin in sanity.config.ts (or .js), and configure it:
 
 ```
@@ -68,24 +68,26 @@ Add it as a plugin in sanity.config.ts (or .js), and configure it:
             defaultLanguages: ['nb'],
             // Only show language filter for document type `page` (schemaType.name)
             documentTypes: ['page'],
-            filterField: (enclosingType, field, selectedLanguageIds) =>
-              !enclosingType.name.startsWith('locale') || selectedLanguageIds.includes(field.name),
+            filterField: (enclosingType, member, selectedLanguageIds) =>
+              !enclosingType.name.startsWith('locale') || selectedLanguageIds.includes(member.name),
        })
      ]
  })
 ```
 
 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.
 - `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)`
+  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)`
 
 ## Changes in V3
 
 ### documentTypes
+
 Language filter can now be enabled/disabled directly from a schema, using `options.languageFilter: boolean`.
 When `documentTypes` is omitted from plugin config, use `options.languageFilter: false` in a document-definition to hide the filter button.
 When `documentTypes` is provided in plugin config, use `options.languageFilter: true` in a document-definition to show the filter button.
@@ -99,12 +101,13 @@ export const myDocumentSchema = {
   /** ... */
   options: {
     // show language filter for this document type, regardless of how documentTypes for the plugin is configured
-    languageFilter: true
-  }
+    languageFilter: true,
+  },
 }
 ```
 
 ### 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.
 

package/lib/index.esm.js

@@ -1,2 +1 @@
-var e;const n=["subscribeSelectedIds"],t=["members","options","schemaType","renderDefault","subscribeSelectedIds"];function r(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function l(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?r(Object(t),!0).forEach((function(n){i(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):r(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function i(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function c(e,n){if(null==e)return{};var t,r,l=function(e,n){if(null==e)return{};var t,r,l={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(l[t]=e[t]);return l}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(l[t]=e[t])}return l}import{jsx as o,jsxs as a,Fragment as s}from"react/jsx-runtime";import{definePlugin as d}from"sanity";import{createContext as u,useMemo as g,useContext as f,useState as p,useEffect as h,useCallback as m}from"react";import{Box as b,useClickOutside as y,Card as v,Stack as O,Text as S,Flex as j,Checkbox as w,Popover as I,Button as L}from"@sanity/ui";import T from"styled-components";const P=(e,n,t)=>!e.name.startsWith("locale")||t.includes(n.name);function x(e,n){var t,r;const l=function(e){return"object"===(null==e?void 0:e.jsonType)&&"document"===D(e).name}(e)&&(null==(t=null==e?void 0:e.options)?void 0:t.languageFilter),i=!n.documentTypes;return!!(i&&!1!==l||!i&&l||e&&(null==(r=n.documentTypes)?void 0:r.includes(e.name)))}function D(e){return e.type?D(e.type):e}const k=u(void 0);function C(e){let{options:n,enabled:t,children:r}=e;const l=g((()=>({options:n,enabled:t})),[n,t]);return o(k.Provider,{value:l,children:r})}const z="@sanity/plugin/language-filter/selected-languages";function E(e){let{supportedLanguages:n,defaultLanguages:t}=e;return n.filter((e=>!(null==t?void 0:t.includes(e.id))))}function F(e){return p((()=>function(e){const n=E(e).map((e=>e.id));let t=n;try{const e=window.localStorage.getItem(z);e&&(t=JSON.parse(e))}catch(e){}var r;return r=n,t=t.filter((e=>r.includes(e))),t}(e)))}function N(e){const t=f(k),{options:r,enabled:i}=t||{},{subscribeSelectedIds:a}=e,s=c(e,n);return i&&r?o(A,l(l({},s),{},{options:r,subscribeSelectedIds:a})):e.renderDefault(s)}function A(e){var n;const{members:r,options:i,schemaType:o,renderDefault:a,subscribeSelectedIds:s}=e,d=c(e,t),[u,f]=F(i);h((()=>{const e=s(f);return()=>e()}),[s,f]);const p=g((()=>{var e;return[...null!=(e=i.defaultLanguages)?e:[],...u]}),[i.defaultLanguages,u]),m=null!=(n=i.filterField)?n:P,b=g((()=>r.filter((e=>"field"===e.kind&&m(o,e,p)||"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&&m(o,e,p)))})}):e))),[o,r,m,p]);return a(l(l({},d),{},{members:b,schemaType:o,renderDefault:a}))}function B(e){const{options:n,onSelectedIdsChange:t}=e,{defaultLanguages:r}=n,[l,i]=F(n),c=g((()=>E(n)),[n]),o=m((e=>{var n;i(e),n=e,window.localStorage.setItem(z,JSON.stringify(n)),t(e)}),[t,i]),a=m((()=>o(c.map((e=>e.id)))),[o,c]),s=m((()=>{o([])}),[o]),d=m((e=>{let n=l;n=n.includes(e)?n.filter((n=>n!==e)):[...n,e],o(n)}),[o,l]);return{activeLanguages:g((()=>[...null!=r?r:[],...l]),[r,l]),allSelected:l.length===c.length,selectAll:a,selectNone:s,toggleLanguage:d}}const J=T(b)(e||(M=["\n  max-height: calc(100vh - 200px);\n"],_||(_=M.slice(0)),e=Object.freeze(Object.defineProperties(M,{raw:{value:Object.freeze(_)}}))));var M,_;function W(e){const{options:n,onSelectedIdsChange:t}=e,r=n.supportedLanguages.filter((e=>{var t;return null==(t=n.defaultLanguages)?void 0:t.includes(e.id)})),l=n.supportedLanguages.filter((e=>{var t;return!(null==(t=n.defaultLanguages)?void 0:t.includes(e.id))})),[i,c]=p(!1),{activeLanguages:d,allSelected:u,selectAll:g,selectNone:f,toggleLanguage:h}=B({options:n,onSelectedIdsChange:t}),[T,P]=p(null),[x,D]=p(null),k=m((e=>{e.currentTarget.checked?g():f()}),[g,f]),C=m((()=>c((e=>!e))),[]),z=m((()=>c(!1)),[]);y(z,[T,x]);const E=a(J,{overflow:"auto",padding:1,children:[r.length>0&&o(v,{radius:2,children:a(O,{padding:2,space:3,children:[o(b,{paddingBottom:2,children:a(S,{size:1,weight:"semibold",children:["Default language",r.length>1&&o(s,{children:"s"})]})}),r.map((e=>o(S,{children:e.title},e.id)))]})}),a(O,{marginTop:3,padding:2,space:2,children:[o(b,{paddingBottom:2,children:o(S,{size:1,weight:"semibold",children:"Show translations"})}),o(v,{as:"label",children:a(j,{align:"center",gap:2,children:[o(w,{checked:u,name:"_allSelected",onChange:k}),o(b,{flex:1,children:o(S,{muted:!u,weight:"semibold",children:"All translations"})})]})}),l.map((e=>o(q,{id:e.id,onToggle:h,selected:d.includes(e.id),title:e.title},e.id)))]})]}),F=n.supportedLanguages.length;return o(I,{content:E,open:i,portal:!0,ref:D,children:o(L,{text:a(j,{gap:1,children:[o(b,{children:"Filter languages:"}),a(j,{gap:1,justify:"space-around",children:[o(j,{style:{width:"".concat(Math.floor(Math.log10(F)+1),"ch")},justify:"flex-end",children:d.length}),o(b,{children:"/"}),o(b,{children:F})]})]}),mode:"bleed",onClick:C,ref:P,selected:i})})}function q(e){const{id:n,onToggle:t,selected:r,title:l}=e,i=m((()=>{t(n)}),[n,t]);return o(v,{as:"label",children:a(j,{align:"center",gap:2,children:[o(w,{checked:r,name:"language-".concat(n),onChange:i}),o(b,{flex:1,children:o(S,{muted:!r,children:l})})]})})}const G=d((e=>{const{onSelectedIdsChange:n,subscribeSelectedIds:t}=function(){const e=[];return{onSelectedIdsChange:n=>{e.forEach((e=>e(n)))},subscribeSelectedIds:n=>(e.push(n),()=>{e.splice(e.indexOf(n),1)})}}(),r=()=>o(W,{options:e,onSelectedIdsChange:n});return{name:"@sanity/language-filter",document:{unstable_languageFilter:(n,t)=>{let{schemaType:l,schema:i}=t;return x(i.get(l),e)?[...n,r]:n}},form:{components:{input:function(n){const r=x(n.schemaType,e);return r?o(C,{enabled:r,options:e,children:n.renderDefault(n)}):"object"===n.schemaType.jsonType?o(N,l(l({},n),{},{subscribeSelectedIds:t})):n.renderDefault(n)}}}}}));export{P as defaultFilterField,x as isLanguageFilterEnabled,G as languageFilter};
-//# sourceMappingURL=index.esm.js.map
+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(!0),{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

package/lib/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/filterField.ts","../src/LanguageFilterContext.tsx","../src/useSelectedLanguageIds.ts","../src/LanguageFilterObjectInput.tsx","../src/usePaneLanguages.ts","../src/LanguageFilterMenuButton.tsx","../src/plugin.tsx","../src/languageSubscription.ts"],"sourcesContent":["import type {SchemaType} from 'sanity'\nimport {FilterFieldFunction, LanguageFilterConfig, LanguageFilterSchema} from './types'\n\nexport const defaultFilterField: FilterFieldFunction = (\n  enclosingType,\n  field,\n  selectedLanguageIds\n) => !enclosingType.name.startsWith('locale') || selectedLanguageIds.includes(field.name)\n\nexport function isLanguageFilterEnabled(\n  schemaType: SchemaType | undefined,\n  options: LanguageFilterConfig\n): boolean {\n  const schemaFilter =\n    isDocument(schemaType) && (schemaType as LanguageFilterSchema)?.options?.languageFilter\n  const defaultEnabled = !options.documentTypes\n\n  return !!(\n    (defaultEnabled && schemaFilter !== false) ||\n    (!defaultEnabled && schemaFilter) ||\n    (schemaType && options.documentTypes?.includes(schemaType.name))\n  )\n}\n\nfunction isDocument(schemaType?: SchemaType) {\n  return schemaType?.jsonType === 'object' && getRootType(schemaType).name === 'document'\n}\n\nfunction getRootType(schema: SchemaType): SchemaType {\n  if (schema.type) {\n    return getRootType(schema.type)\n  }\n  return schema\n}\n","import React, {createContext, PropsWithChildren, useContext, useMemo} from 'react'\nimport {LanguageFilterConfig} from './types'\n\nexport interface LanguageFilterContextValue {\n  // eslint-disable-next-line react/require-default-props\n  options: LanguageFilterConfig\n  // eslint-disable-next-line react/require-default-props\n  enabled: boolean\n}\n\nconst LanguageFilterContext = createContext<LanguageFilterContextValue | undefined>(undefined)\n\nexport function LanguageFilterProvider({\n  options,\n  enabled,\n  children,\n}: PropsWithChildren<\n  Omit<LanguageFilterContextValue, 'selectedLanguageIds' | 'setSelectedLanguageIds'>\n>) {\n  const value = useMemo(() => ({options, enabled}), [options, enabled])\n  return <LanguageFilterContext.Provider value={value}>{children}</LanguageFilterContext.Provider>\n}\n\nexport function useLanguageFilterContext() {\n  return useContext(LanguageFilterContext)\n}\n","import {Language, LanguageFilterConfig} from './types'\nimport {useState} from 'react'\nconst storageKey = '@sanity/plugin/language-filter/selected-languages'\n\nexport function getPersistedLanguageIds(options: LanguageFilterConfig): string[] {\n  const selectableLangs = getSelectableLanguages(options).map((l) => l.id)\n\n  let selected: string[] = selectableLangs\n  try {\n    const persistedValue = window.localStorage.getItem(storageKey)\n    if (persistedValue) {\n      selected = JSON.parse(persistedValue)\n    }\n  } catch (err) {} // eslint-disable-line no-empty\n\n  // constrain persisted/selected languages to the ones currently supported\n  selected = intersection(selected, selectableLangs)\n  return selected\n}\n\nexport function persistLanguageIds(languageIds: string[]): void {\n  window.localStorage.setItem(storageKey, JSON.stringify(languageIds))\n}\n\nfunction intersection(array1: string[], array2: string[]) {\n  return array1.filter((value) => array2.includes(value))\n}\n\nexport function getSelectableLanguages({\n  supportedLanguages,\n  defaultLanguages,\n}: LanguageFilterConfig): Language[] {\n  return supportedLanguages.filter((lang) => !defaultLanguages?.includes(lang.id))\n}\n\nexport function useSelectedLanguageIds(\n  options: LanguageFilterConfig\n): [string[], (ids: string[]) => void] {\n  return useState(() => getPersistedLanguageIds(options))\n}\n","import React, {useEffect, useMemo} from 'react'\nimport {ObjectInputProps, ObjectMember} from 'sanity'\nimport {LanguageFilterConfig} from './types'\nimport {defaultFilterField} from './filterField'\nimport {useLanguageFilterContext} from './LanguageFilterContext'\nimport {useSelectedLanguageIds} from './useSelectedLanguageIds'\n\nexport type LanguageFilterObjectInputProps = {\n  options: LanguageFilterConfig\n  /**\n   * We need a way to communicate state changes between the pane menu and input components.\n   * LanguageFilter button lives outside the input-render tree, so Context is out.\n   * This is a workaround for that.\n   */\n  subscribeSelectedIds: (callback: (ids: string[]) => void) => () => void\n} & ObjectInputProps\n\nexport function LanguageFilterObjectInput(\n  props: ObjectInputProps & {\n    subscribeSelectedIds: (callback: (ids: string[]) => void) => () => void\n  }\n) {\n  const context = useLanguageFilterContext()\n  const {options, enabled} = context || {}\n  const {subscribeSelectedIds, ...restProps} = props\n  if (!enabled || !options) {\n    return props.renderDefault(restProps)\n  }\n  return (\n    <FilteredObjectInput\n      {...restProps}\n      options={options}\n      subscribeSelectedIds={subscribeSelectedIds}\n    />\n  )\n}\n\nfunction FilteredObjectInput(props: LanguageFilterObjectInputProps) {\n  const {\n    members: membersProp,\n    options,\n    schemaType,\n    renderDefault,\n    subscribeSelectedIds,\n    ...restProps\n  } = props\n  const [selectedIds, setSelectedIds] = useSelectedLanguageIds(options)\n\n  useEffect(() => {\n    const unsubscribe = subscribeSelectedIds(setSelectedIds)\n    return () => unsubscribe()\n  }, [subscribeSelectedIds, setSelectedIds])\n\n  const activeLanguages = useMemo(\n    () => [...(options.defaultLanguages ?? []), ...selectedIds],\n    [options.defaultLanguages, selectedIds]\n  )\n\n  const filterField = options.filterField ?? defaultFilterField\n\n  const members: ObjectMember[] = useMemo(() => {\n    return membersProp\n      .filter((member) => {\n        return (\n          (member.kind === 'field' && filterField(schemaType, member, activeLanguages)) ||\n          member.kind === 'fieldSet'\n        )\n      })\n      .map((member) => {\n        if (member.kind === 'fieldSet') {\n          return {\n            ...member,\n            fieldSet: {\n              ...member.fieldSet,\n              members: member.fieldSet.members.filter((fieldsetMember) => {\n                return (\n                  fieldsetMember.kind === 'field' &&\n                  filterField(schemaType, fieldsetMember, activeLanguages)\n                )\n              }),\n            },\n          }\n        }\n        return member\n      })\n  }, [schemaType, membersProp, filterField, activeLanguages])\n\n  return renderDefault({...restProps, members, schemaType, renderDefault})\n}\n","import {useCallback, useMemo} from 'react'\nimport {LanguageFilterConfig} from './types'\nimport {\n  getSelectableLanguages,\n  persistLanguageIds,\n  useSelectedLanguageIds,\n} from './useSelectedLanguageIds'\n\nexport interface UsePaneLanguagesParams {\n  options: LanguageFilterConfig\n  /**\n   * We need a way to communicate state changes between the pane menu and input components.\n   * LanguageFilter button lives outside the input-render tree, so Context is out.\n   * This is a workaround for that.\n   */\n  onSelectedIdsChange: (ids: string[]) => void\n}\n\nexport function usePaneLanguages(props: UsePaneLanguagesParams): {\n  activeLanguages: string[]\n  allSelected: boolean\n  selectAll: () => void\n  selectNone: () => void\n  toggleLanguage: (languageId: string) => void\n} {\n  const {options, onSelectedIdsChange} = props\n  const {defaultLanguages} = options\n\n  const [selectedIds, setSelectedIds] = useSelectedLanguageIds(options)\n\n  const selectableLanguages = useMemo(() => getSelectableLanguages(options), [options])\n\n  const updateSelectedIds = useCallback(\n    (ids: string[]) => {\n      setSelectedIds(ids)\n      persistLanguageIds(ids)\n      onSelectedIdsChange(ids)\n    },\n    [onSelectedIdsChange, setSelectedIds]\n  )\n\n  const selectAll = useCallback(\n    () => updateSelectedIds(selectableLanguages.map((l) => l.id)),\n    [updateSelectedIds, selectableLanguages]\n  )\n\n  const selectNone = useCallback(() => {\n    updateSelectedIds([])\n  }, [updateSelectedIds])\n\n  const toggleLanguage = useCallback(\n    (languageId: string) => {\n      let lang = selectedIds\n\n      if (lang.includes(languageId)) {\n        lang = lang.filter((l) => l !== languageId)\n      } else {\n        lang = [...lang, languageId]\n      }\n\n      updateSelectedIds(lang)\n    },\n    [updateSelectedIds, selectedIds]\n  )\n\n  const activeLanguages = useMemo(\n    () => [...(defaultLanguages ?? []), ...selectedIds],\n    [defaultLanguages, selectedIds]\n  )\n\n  return {\n    activeLanguages,\n    allSelected: selectedIds.length === selectableLanguages.length,\n    selectAll,\n    selectNone,\n    toggleLanguage,\n  }\n}\n","import {Box, Button, Card, Checkbox, Flex, Popover, Stack, Text, useClickOutside} from '@sanity/ui'\nimport React, {FormEvent, useCallback, useState} from 'react'\nimport styled from 'styled-components'\nimport {LanguageFilterConfig} from './types'\nimport {usePaneLanguages} from './usePaneLanguages'\n\nconst StyledBox = styled(Box)`\n  max-height: calc(100vh - 200px);\n`\n\nexport interface LanguageFilterMenuButtonProps {\n  options: LanguageFilterConfig\n  onSelectedIdsChange: (ids: string[]) => void\n}\n\nexport function LanguageFilterMenuButton(props: LanguageFilterMenuButtonProps) {\n  const {options, onSelectedIdsChange} = props\n\n  const defaultLanguages = options.supportedLanguages.filter((l) =>\n    options.defaultLanguages?.includes(l.id)\n  )\n\n  const languageOptions = options.supportedLanguages.filter(\n    (l) => !options.defaultLanguages?.includes(l.id)\n  )\n  const [open, setOpen] = useState(false)\n  const {activeLanguages, allSelected, selectAll, selectNone, toggleLanguage} = usePaneLanguages({\n    options,\n    onSelectedIdsChange,\n  })\n  const [button, setButton] = useState<HTMLElement | null>(null)\n  const [popover, setPopover] = useState<HTMLElement | null>(null)\n\n  const handleToggleAll = useCallback(\n    (event: FormEvent<HTMLInputElement>) => {\n      const checked = event.currentTarget.checked\n\n      if (checked) {\n        selectAll()\n      } else {\n        selectNone()\n      }\n    },\n    [selectAll, selectNone]\n  )\n\n  const handleClick = useCallback(() => setOpen((o) => !o), [])\n\n  const handleClickOutside = useCallback(() => setOpen(false), [])\n\n  useClickOutside(handleClickOutside, [button, popover])\n\n  const content = (\n    <StyledBox overflow=\"auto\" padding={1}>\n      {defaultLanguages.length > 0 && (\n        <Card radius={2}>\n          <Stack padding={2} space={3}>\n            <Box paddingBottom={2}>\n              <Text size={1} weight=\"semibold\">\n                Default language{defaultLanguages.length > 1 && <>s</>}\n              </Text>\n            </Box>\n\n            {defaultLanguages.map((l) => (\n              <Text key={l.id}>{l.title}</Text>\n            ))}\n          </Stack>\n        </Card>\n      )}\n\n      <Stack marginTop={3} padding={2} space={2}>\n        <Box paddingBottom={2}>\n          <Text size={1} weight=\"semibold\">\n            Show translations\n          </Text>\n        </Box>\n\n        <Card as=\"label\">\n          <Flex align=\"center\" gap={2}>\n            <Checkbox checked={allSelected} name=\"_allSelected\" onChange={handleToggleAll} />\n            <Box flex={1}>\n              <Text muted={!allSelected} weight=\"semibold\">\n                All translations\n              </Text>\n            </Box>\n          </Flex>\n        </Card>\n\n        {languageOptions.map((lang) => (\n          <LanguageFilterOption\n            id={lang.id}\n            key={lang.id}\n            onToggle={toggleLanguage}\n            selected={activeLanguages.includes(lang.id)}\n            title={lang.title}\n          />\n        ))}\n      </Stack>\n    </StyledBox>\n  )\n\n  const langCount = options.supportedLanguages.length\n  return (\n    <Popover content={content} open={open} portal ref={setPopover}>\n      <Button\n        text={\n          <Flex gap={1}>\n            <Box>Filter languages:</Box>\n            <Flex gap={1} justify=\"space-around\">\n              <Flex\n                style={{width: `${Math.floor(Math.log10(langCount) + 1)}ch`}}\n                justify=\"flex-end\"\n              >\n                {activeLanguages.length}\n              </Flex>\n              <Box>/</Box>\n              <Box>{langCount}</Box>\n            </Flex>\n          </Flex>\n        }\n        mode=\"bleed\"\n        onClick={handleClick}\n        ref={setButton}\n        selected={open}\n      />\n    </Popover>\n  )\n}\n\nfunction LanguageFilterOption(props: {\n  id: string\n  onToggle: (id: string) => void\n  selected: boolean\n  title: string\n}) {\n  const {id, onToggle, selected, title} = props\n\n  const handleChange = useCallback(() => {\n    onToggle(id)\n  }, [id, onToggle])\n\n  return (\n    <Card as=\"label\">\n      <Flex align=\"center\" gap={2}>\n        <Checkbox checked={selected} name={`language-${id}`} onChange={handleChange} />\n        <Box flex={1}>\n          <Text muted={!selected}>{title}</Text>\n        </Box>\n      </Flex>\n    </Card>\n  )\n}\n","import React from 'react'\nimport {definePlugin, DocumentLanguageFilterComponent, ObjectInputProps} from 'sanity'\nimport {LanguageFilterObjectInput} from './LanguageFilterObjectInput'\nimport {LanguageFilterMenuButton} from './LanguageFilterMenuButton'\nimport {LanguageFilterConfig} from './types'\nimport {isLanguageFilterEnabled} from './filterField'\nimport {LanguageFilterProvider} from './LanguageFilterContext'\nimport {createSelectedLanguageIdsBus} from './languageSubscription'\n\n/**\n * ## Usage in sanity.config.ts (or .js)\n *\n * ```\n * import {defineConfig} from 'sanity'\n * import {languageFilter} from '@sanity/language-filter'\n *\n * export const defineConfig({\n *     /...\n *     plugins: [\n *         languageFilter({\n *             supportedLanguages: [\n *               {id: 'nb', title: 'Norwegian (Bokmål)'},\n *               {id: 'nn', title: 'Norwegian (Nynorsk)'},\n *               {id: 'en', title: 'English'},\n *               {id: 'es', title: 'Spanish'},\n *               {id: 'arb', title: 'Arabic'},\n *               {id: 'pt', title: 'Portuguese'},\n *               //...\n *             ],\n *             // Select Norwegian (Bokmål) by default\n *             defaultLanguages: ['nb'],\n *             // Only show language filter for document type `page` (schemaType.name)\n *             // Can also enable via document-options: options.languageFilter: true\n *             documentTypes: ['page'],\n *             // default filter function shown\n *             filterField: (enclosingType, field, selectedLanguageIds) =>\n *               !enclosingType.name.startsWith('locale') || selectedLanguageIds.includes(field.name),\n *        })\n *    ]\n * })\n * ```\n */\nexport const languageFilter = definePlugin<LanguageFilterConfig>((options) => {\n  const {onSelectedIdsChange, subscribeSelectedIds} = createSelectedLanguageIdsBus()\n\n  const RenderLanguageFilter: DocumentLanguageFilterComponent = () => {\n    return <LanguageFilterMenuButton options={options} onSelectedIdsChange={onSelectedIdsChange} />\n  }\n\n  return {\n    name: '@sanity/language-filter',\n    document: {\n      unstable_languageFilter: (prev, {schemaType, schema}) => {\n        if (isLanguageFilterEnabled(schema.get(schemaType), options)) {\n          return [...prev, RenderLanguageFilter]\n        }\n        return prev\n      },\n    },\n\n    form: {\n      components: {\n        // eslint-disable-next-line func-name-matching\n        input: function LanguageFilterWrapper(props) {\n          const enabled = isLanguageFilterEnabled(props.schemaType, options)\n          // will only be considered enabled for document, so this is only done once\n          if (enabled) {\n            return (\n              <LanguageFilterProvider enabled={enabled} options={options}>\n                {props.renderDefault(props)}\n              </LanguageFilterProvider>\n            )\n          }\n          if (props.schemaType.jsonType === 'object') {\n            return (\n              <LanguageFilterObjectInput\n                {...(props as ObjectInputProps)}\n                subscribeSelectedIds={subscribeSelectedIds}\n              />\n            )\n          }\n\n          return props.renderDefault(props)\n        },\n      },\n    },\n  }\n})\n","export type LanguageSubscription = (ids: string[]) => void\nexport type Unsubscribe = () => void\nexport type LanguageSubscribe = (subscription: LanguageSubscription) => Unsubscribe\n\nexport interface SelectedLanguageIdsBus {\n  onSelectedIdsChange: (ids: string[]) => void\n  subscribeSelectedIds: LanguageSubscribe\n}\n\n/**\n * We need a way to communicate state changes between the pane menu and input components.\n * LanguageFilter button lives outside the input-render tree, so Context is out.\n * This is a workaround for that.\n */\nexport function createSelectedLanguageIdsBus(): SelectedLanguageIdsBus {\n  const subs: LanguageSubscription[] = []\n\n  const onSelectedIdsChange = (ids: string[]) => {\n    subs.forEach((s) => s(ids))\n  }\n  const subscribeSelectedIds = (subscription: LanguageSubscription) => {\n    subs.push(subscription)\n    return () => {\n      subs.splice(subs.indexOf(subscription), 1)\n    }\n  }\n\n  return {\n    onSelectedIdsChange,\n    subscribeSelectedIds,\n  }\n}\n"],"names":["defaultFilterField","enclosingType","field","selectedLanguageIds","name","startsWith","includes","isLanguageFilterEnabled","schemaType","options","_a","_b","schemaFilter","jsonType","getRootType","isDocument","languageFilter","defaultEnabled","documentTypes","schema","type","LanguageFilterContext","createContext","LanguageFilterProvider","_ref","enabled","children","value","useMemo","jsx","Provider","storageKey","getSelectableLanguages","_ref2","supportedLanguages","defaultLanguages","filter","lang","id","useSelectedLanguageIds","useState","selectableLangs","map","l","selected","persistedValue","window","localStorage","getItem","JSON","parse","err","array2","getPersistedLanguageIds","LanguageFilterObjectInput","props","context","useContext","subscribeSelectedIds","restProps","_excluded","FilteredObjectInput","renderDefault","members","membersProp","_excluded2","selectedIds","setSelectedIds","useEffect","unsubscribe","activeLanguages","filterField","member","kind","_objectSpread","fieldSet","fieldsetMember","usePaneLanguages","onSelectedIdsChange","selectableLanguages","updateSelectedIds","useCallback","ids","languageIds","setItem","stringify","selectAll","selectNone","toggleLanguage","languageId","allSelected","length","StyledBox","styled","Box","_templateObject","LanguageFilterMenuButton","languageOptions","open","setOpen","button","setButton","popover","setPopover","handleToggleAll","event","currentTarget","checked","handleClick","o","handleClickOutside","useClickOutside","content","jsxs","overflow","padding","Card","radius","Stack","space","paddingBottom","Text","size","weight","Fragment","title","marginTop","as","Flex","align","gap","Checkbox","onChange","flex","muted","LanguageFilterOption","onToggle","langCount","Popover","portal","ref","Button","text","justify","style","width","Math","floor","log10","mode","onClick","handleChange","definePlugin","subs","forEach","s","subscription","push","splice","indexOf","createSelectedLanguageIdsBus","RenderLanguageFilter","document","unstable_languageFilter","prev","_ref3","get","form","components","input"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/index.js

@@ -1,2 +1 @@
-"use strict";var e;const t=["subscribeSelectedIds"],n=["members","options","schemaType","renderDefault","subscribeSelectedIds"];function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);t&&(l=l.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,l)}return n}function r(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){s(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){if(null==e)return{};var n,l,r=function(e,t){if(null==e)return{};var n,l,r={},s=Object.keys(e);for(l=0;l<s.length;l++)n=s[l],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(l=0;l<s.length;l++)n=s[l],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}Object.defineProperty(exports,"__esModule",{value:!0});var i=require("react/jsx-runtime"),c=require("sanity"),o=require("react"),u=require("@sanity/ui");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=d(require("styled-components"));const f=(e,t,n)=>!e.name.startsWith("locale")||n.includes(t.name);function p(e,t){var n,l;const r=function(e){return"object"===(null==e?void 0:e.jsonType)&&"document"===b(e).name}(e)&&(null==(n=null==e?void 0:e.options)?void 0:n.languageFilter),s=!t.documentTypes;return!!(s&&!1!==r||!s&&r||e&&(null==(l=t.documentTypes)?void 0:l.includes(e.name)))}function b(e){return e.type?b(e.type):e}const h=o.createContext(void 0);function x(e){let{options:t,enabled:n,children:l}=e;const r=o.useMemo((()=>({options:t,enabled:n})),[t,n]);return i.jsx(h.Provider,{value:r,children:l})}const j="@sanity/plugin/language-filter/selected-languages";function m(e){let{supportedLanguages:t,defaultLanguages:n}=e;return t.filter((e=>!(null==n?void 0:n.includes(e.id))))}function y(e){return o.useState((()=>function(e){const t=m(e).map((e=>e.id));let n=t;try{const e=window.localStorage.getItem(j);e&&(n=JSON.parse(e))}catch(e){}var l;return l=t,n=n.filter((e=>l.includes(e))),n}(e)))}function S(e){const n=o.useContext(h),{options:l,enabled:s}=n||{},{subscribeSelectedIds:c}=e,u=a(e,t);return s&&l?i.jsx(v,r(r({},u),{},{options:l,subscribeSelectedIds:c})):e.renderDefault(u)}function v(e){var t;const{members:l,options:s,schemaType:i,renderDefault:c,subscribeSelectedIds:u}=e,d=a(e,n),[g,p]=y(s);o.useEffect((()=>{const e=u(p);return()=>e()}),[u,p]);const b=o.useMemo((()=>{var e;return[...null!=(e=s.defaultLanguages)?e:[],...g]}),[s.defaultLanguages,g]),h=null!=(t=s.filterField)?t:f,x=o.useMemo((()=>l.filter((e=>"field"===e.kind&&h(i,e,b)||"fieldSet"===e.kind)).map((e=>"fieldSet"===e.kind?r(r({},e),{},{fieldSet:r(r({},e.fieldSet),{},{members:e.fieldSet.members.filter((e=>"field"===e.kind&&h(i,e,b)))})}):e))),[i,l,h,b]);return c(r(r({},d),{},{members:x,schemaType:i,renderDefault:c}))}function O(e){const{options:t,onSelectedIdsChange:n}=e,{defaultLanguages:l}=t,[r,s]=y(t),a=o.useMemo((()=>m(t)),[t]),i=o.useCallback((e=>{var t;s(e),t=e,window.localStorage.setItem(j,JSON.stringify(t)),n(e)}),[n,s]),c=o.useCallback((()=>i(a.map((e=>e.id)))),[i,a]),u=o.useCallback((()=>{i([])}),[i]),d=o.useCallback((e=>{let t=r;t=t.includes(e)?t.filter((t=>t!==e)):[...t,e],i(t)}),[i,r]);return{activeLanguages:o.useMemo((()=>[...null!=l?l:[],...r]),[l,r]),allSelected:r.length===a.length,selectAll:c,selectNone:u,toggleLanguage:d}}const C=g.default(u.Box)(e||(k=["\n  max-height: calc(100vh - 200px);\n"],w||(w=k.slice(0)),e=Object.freeze(Object.defineProperties(k,{raw:{value:Object.freeze(w)}}))));var k,w;function T(e){const{options:t,onSelectedIdsChange:n}=e,l=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))})),[s,a]=o.useState(!1),{activeLanguages:c,allSelected:d,selectAll:g,selectNone:f,toggleLanguage:p}=O({options:t,onSelectedIdsChange:n}),[b,h]=o.useState(null),[x,j]=o.useState(null),m=o.useCallback((e=>{e.currentTarget.checked?g():f()}),[g,f]),y=o.useCallback((()=>a((e=>!e))),[]),S=o.useCallback((()=>a(!1)),[]);u.useClickOutside(S,[b,x]);const v=i.jsxs(C,{overflow:"auto",padding:1,children:[l.length>0&&i.jsx(u.Card,{radius:2,children:i.jsxs(u.Stack,{padding:2,space:3,children:[i.jsx(u.Box,{paddingBottom:2,children:i.jsxs(u.Text,{size:1,weight:"semibold",children:["Default language",l.length>1&&i.jsx(i.Fragment,{children:"s"})]})}),l.map((e=>i.jsx(u.Text,{children:e.title},e.id)))]})}),i.jsxs(u.Stack,{marginTop:3,padding:2,space:2,children:[i.jsx(u.Box,{paddingBottom:2,children:i.jsx(u.Text,{size:1,weight:"semibold",children:"Show translations"})}),i.jsx(u.Card,{as:"label",children:i.jsxs(u.Flex,{align:"center",gap:2,children:[i.jsx(u.Checkbox,{checked:d,name:"_allSelected",onChange:m}),i.jsx(u.Box,{flex:1,children:i.jsx(u.Text,{muted:!d,weight:"semibold",children:"All translations"})})]})}),r.map((e=>i.jsx(I,{id:e.id,onToggle:p,selected:c.includes(e.id),title:e.title},e.id)))]})]}),k=t.supportedLanguages.length;return i.jsx(u.Popover,{content:v,open:s,portal:!0,ref:j,children:i.jsx(u.Button,{text:i.jsxs(u.Flex,{gap:1,children:[i.jsx(u.Box,{children:"Filter languages:"}),i.jsxs(u.Flex,{gap:1,justify:"space-around",children:[i.jsx(u.Flex,{style:{width:"".concat(Math.floor(Math.log10(k)+1),"ch")},justify:"flex-end",children:c.length}),i.jsx(u.Box,{children:"/"}),i.jsx(u.Box,{children:k})]})]}),mode:"bleed",onClick:y,ref:h,selected:s})})}function I(e){const{id:t,onToggle:n,selected:l,title:r}=e,s=o.useCallback((()=>{n(t)}),[t,n]);return i.jsx(u.Card,{as:"label",children:i.jsxs(u.Flex,{align:"center",gap:2,children:[i.jsx(u.Checkbox,{checked:l,name:"language-".concat(t),onChange:s}),i.jsx(u.Box,{flex:1,children:i.jsx(u.Text,{muted:!l,children:r})})]})})}const P=c.definePlugin((e=>{const{onSelectedIdsChange:t,subscribeSelectedIds:n}=function(){const e=[];return{onSelectedIdsChange:t=>{e.forEach((e=>e(t)))},subscribeSelectedIds:t=>(e.push(t),()=>{e.splice(e.indexOf(t),1)})}}(),l=()=>i.jsx(T,{options:e,onSelectedIdsChange:t});return{name:"@sanity/language-filter",document:{unstable_languageFilter:(t,n)=>{let{schemaType:r,schema:s}=n;return p(s.get(r),e)?[...t,l]:t}},form:{components:{input:function(t){const l=p(t.schemaType,e);return l?i.jsx(x,{enabled:l,options:e,children:t.renderDefault(t)}):"object"===t.schemaType.jsonType?i.jsx(S,r(r({},t),{},{subscribeSelectedIds:n})):t.renderDefault(t)}}}}}));exports.defaultFilterField=f,exports.isLanguageFilterEnabled=p,exports.languageFilter=P;
-//# 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={},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(!0),{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

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/filterField.ts","../src/LanguageFilterContext.tsx","../src/useSelectedLanguageIds.ts","../src/LanguageFilterObjectInput.tsx","../src/usePaneLanguages.ts","../src/LanguageFilterMenuButton.tsx","../src/plugin.tsx","../src/languageSubscription.ts"],"sourcesContent":["import type {SchemaType} from 'sanity'\nimport {FilterFieldFunction, LanguageFilterConfig, LanguageFilterSchema} from './types'\n\nexport const defaultFilterField: FilterFieldFunction = (\n  enclosingType,\n  field,\n  selectedLanguageIds\n) => !enclosingType.name.startsWith('locale') || selectedLanguageIds.includes(field.name)\n\nexport function isLanguageFilterEnabled(\n  schemaType: SchemaType | undefined,\n  options: LanguageFilterConfig\n): boolean {\n  const schemaFilter =\n    isDocument(schemaType) && (schemaType as LanguageFilterSchema)?.options?.languageFilter\n  const defaultEnabled = !options.documentTypes\n\n  return !!(\n    (defaultEnabled && schemaFilter !== false) ||\n    (!defaultEnabled && schemaFilter) ||\n    (schemaType && options.documentTypes?.includes(schemaType.name))\n  )\n}\n\nfunction isDocument(schemaType?: SchemaType) {\n  return schemaType?.jsonType === 'object' && getRootType(schemaType).name === 'document'\n}\n\nfunction getRootType(schema: SchemaType): SchemaType {\n  if (schema.type) {\n    return getRootType(schema.type)\n  }\n  return schema\n}\n","import React, {createContext, PropsWithChildren, useContext, useMemo} from 'react'\nimport {LanguageFilterConfig} from './types'\n\nexport interface LanguageFilterContextValue {\n  // eslint-disable-next-line react/require-default-props\n  options: LanguageFilterConfig\n  // eslint-disable-next-line react/require-default-props\n  enabled: boolean\n}\n\nconst LanguageFilterContext = createContext<LanguageFilterContextValue | undefined>(undefined)\n\nexport function LanguageFilterProvider({\n  options,\n  enabled,\n  children,\n}: PropsWithChildren<\n  Omit<LanguageFilterContextValue, 'selectedLanguageIds' | 'setSelectedLanguageIds'>\n>) {\n  const value = useMemo(() => ({options, enabled}), [options, enabled])\n  return <LanguageFilterContext.Provider value={value}>{children}</LanguageFilterContext.Provider>\n}\n\nexport function useLanguageFilterContext() {\n  return useContext(LanguageFilterContext)\n}\n","import {Language, LanguageFilterConfig} from './types'\nimport {useState} from 'react'\nconst storageKey = '@sanity/plugin/language-filter/selected-languages'\n\nexport function getPersistedLanguageIds(options: LanguageFilterConfig): string[] {\n  const selectableLangs = getSelectableLanguages(options).map((l) => l.id)\n\n  let selected: string[] = selectableLangs\n  try {\n    const persistedValue = window.localStorage.getItem(storageKey)\n    if (persistedValue) {\n      selected = JSON.parse(persistedValue)\n    }\n  } catch (err) {} // eslint-disable-line no-empty\n\n  // constrain persisted/selected languages to the ones currently supported\n  selected = intersection(selected, selectableLangs)\n  return selected\n}\n\nexport function persistLanguageIds(languageIds: string[]): void {\n  window.localStorage.setItem(storageKey, JSON.stringify(languageIds))\n}\n\nfunction intersection(array1: string[], array2: string[]) {\n  return array1.filter((value) => array2.includes(value))\n}\n\nexport function getSelectableLanguages({\n  supportedLanguages,\n  defaultLanguages,\n}: LanguageFilterConfig): Language[] {\n  return supportedLanguages.filter((lang) => !defaultLanguages?.includes(lang.id))\n}\n\nexport function useSelectedLanguageIds(\n  options: LanguageFilterConfig\n): [string[], (ids: string[]) => void] {\n  return useState(() => getPersistedLanguageIds(options))\n}\n","import React, {useEffect, useMemo} from 'react'\nimport {ObjectInputProps, ObjectMember} from 'sanity'\nimport {LanguageFilterConfig} from './types'\nimport {defaultFilterField} from './filterField'\nimport {useLanguageFilterContext} from './LanguageFilterContext'\nimport {useSelectedLanguageIds} from './useSelectedLanguageIds'\n\nexport type LanguageFilterObjectInputProps = {\n  options: LanguageFilterConfig\n  /**\n   * We need a way to communicate state changes between the pane menu and input components.\n   * LanguageFilter button lives outside the input-render tree, so Context is out.\n   * This is a workaround for that.\n   */\n  subscribeSelectedIds: (callback: (ids: string[]) => void) => () => void\n} & ObjectInputProps\n\nexport function LanguageFilterObjectInput(\n  props: ObjectInputProps & {\n    subscribeSelectedIds: (callback: (ids: string[]) => void) => () => void\n  }\n) {\n  const context = useLanguageFilterContext()\n  const {options, enabled} = context || {}\n  const {subscribeSelectedIds, ...restProps} = props\n  if (!enabled || !options) {\n    return props.renderDefault(restProps)\n  }\n  return (\n    <FilteredObjectInput\n      {...restProps}\n      options={options}\n      subscribeSelectedIds={subscribeSelectedIds}\n    />\n  )\n}\n\nfunction FilteredObjectInput(props: LanguageFilterObjectInputProps) {\n  const {\n    members: membersProp,\n    options,\n    schemaType,\n    renderDefault,\n    subscribeSelectedIds,\n    ...restProps\n  } = props\n  const [selectedIds, setSelectedIds] = useSelectedLanguageIds(options)\n\n  useEffect(() => {\n    const unsubscribe = subscribeSelectedIds(setSelectedIds)\n    return () => unsubscribe()\n  }, [subscribeSelectedIds, setSelectedIds])\n\n  const activeLanguages = useMemo(\n    () => [...(options.defaultLanguages ?? []), ...selectedIds],\n    [options.defaultLanguages, selectedIds]\n  )\n\n  const filterField = options.filterField ?? defaultFilterField\n\n  const members: ObjectMember[] = useMemo(() => {\n    return membersProp\n      .filter((member) => {\n        return (\n          (member.kind === 'field' && filterField(schemaType, member, activeLanguages)) ||\n          member.kind === 'fieldSet'\n        )\n      })\n      .map((member) => {\n        if (member.kind === 'fieldSet') {\n          return {\n            ...member,\n            fieldSet: {\n              ...member.fieldSet,\n              members: member.fieldSet.members.filter((fieldsetMember) => {\n                return (\n                  fieldsetMember.kind === 'field' &&\n                  filterField(schemaType, fieldsetMember, activeLanguages)\n                )\n              }),\n            },\n          }\n        }\n        return member\n      })\n  }, [schemaType, membersProp, filterField, activeLanguages])\n\n  return renderDefault({...restProps, members, schemaType, renderDefault})\n}\n","import {useCallback, useMemo} from 'react'\nimport {LanguageFilterConfig} from './types'\nimport {\n  getSelectableLanguages,\n  persistLanguageIds,\n  useSelectedLanguageIds,\n} from './useSelectedLanguageIds'\n\nexport interface UsePaneLanguagesParams {\n  options: LanguageFilterConfig\n  /**\n   * We need a way to communicate state changes between the pane menu and input components.\n   * LanguageFilter button lives outside the input-render tree, so Context is out.\n   * This is a workaround for that.\n   */\n  onSelectedIdsChange: (ids: string[]) => void\n}\n\nexport function usePaneLanguages(props: UsePaneLanguagesParams): {\n  activeLanguages: string[]\n  allSelected: boolean\n  selectAll: () => void\n  selectNone: () => void\n  toggleLanguage: (languageId: string) => void\n} {\n  const {options, onSelectedIdsChange} = props\n  const {defaultLanguages} = options\n\n  const [selectedIds, setSelectedIds] = useSelectedLanguageIds(options)\n\n  const selectableLanguages = useMemo(() => getSelectableLanguages(options), [options])\n\n  const updateSelectedIds = useCallback(\n    (ids: string[]) => {\n      setSelectedIds(ids)\n      persistLanguageIds(ids)\n      onSelectedIdsChange(ids)\n    },\n    [onSelectedIdsChange, setSelectedIds]\n  )\n\n  const selectAll = useCallback(\n    () => updateSelectedIds(selectableLanguages.map((l) => l.id)),\n    [updateSelectedIds, selectableLanguages]\n  )\n\n  const selectNone = useCallback(() => {\n    updateSelectedIds([])\n  }, [updateSelectedIds])\n\n  const toggleLanguage = useCallback(\n    (languageId: string) => {\n      let lang = selectedIds\n\n      if (lang.includes(languageId)) {\n        lang = lang.filter((l) => l !== languageId)\n      } else {\n        lang = [...lang, languageId]\n      }\n\n      updateSelectedIds(lang)\n    },\n    [updateSelectedIds, selectedIds]\n  )\n\n  const activeLanguages = useMemo(\n    () => [...(defaultLanguages ?? []), ...selectedIds],\n    [defaultLanguages, selectedIds]\n  )\n\n  return {\n    activeLanguages,\n    allSelected: selectedIds.length === selectableLanguages.length,\n    selectAll,\n    selectNone,\n    toggleLanguage,\n  }\n}\n","import {Box, Button, Card, Checkbox, Flex, Popover, Stack, Text, useClickOutside} from '@sanity/ui'\nimport React, {FormEvent, useCallback, useState} from 'react'\nimport styled from 'styled-components'\nimport {LanguageFilterConfig} from './types'\nimport {usePaneLanguages} from './usePaneLanguages'\n\nconst StyledBox = styled(Box)`\n  max-height: calc(100vh - 200px);\n`\n\nexport interface LanguageFilterMenuButtonProps {\n  options: LanguageFilterConfig\n  onSelectedIdsChange: (ids: string[]) => void\n}\n\nexport function LanguageFilterMenuButton(props: LanguageFilterMenuButtonProps) {\n  const {options, onSelectedIdsChange} = props\n\n  const defaultLanguages = options.supportedLanguages.filter((l) =>\n    options.defaultLanguages?.includes(l.id)\n  )\n\n  const languageOptions = options.supportedLanguages.filter(\n    (l) => !options.defaultLanguages?.includes(l.id)\n  )\n  const [open, setOpen] = useState(false)\n  const {activeLanguages, allSelected, selectAll, selectNone, toggleLanguage} = usePaneLanguages({\n    options,\n    onSelectedIdsChange,\n  })\n  const [button, setButton] = useState<HTMLElement | null>(null)\n  const [popover, setPopover] = useState<HTMLElement | null>(null)\n\n  const handleToggleAll = useCallback(\n    (event: FormEvent<HTMLInputElement>) => {\n      const checked = event.currentTarget.checked\n\n      if (checked) {\n        selectAll()\n      } else {\n        selectNone()\n      }\n    },\n    [selectAll, selectNone]\n  )\n\n  const handleClick = useCallback(() => setOpen((o) => !o), [])\n\n  const handleClickOutside = useCallback(() => setOpen(false), [])\n\n  useClickOutside(handleClickOutside, [button, popover])\n\n  const content = (\n    <StyledBox overflow=\"auto\" padding={1}>\n      {defaultLanguages.length > 0 && (\n        <Card radius={2}>\n          <Stack padding={2} space={3}>\n            <Box paddingBottom={2}>\n              <Text size={1} weight=\"semibold\">\n                Default language{defaultLanguages.length > 1 && <>s</>}\n              </Text>\n            </Box>\n\n            {defaultLanguages.map((l) => (\n              <Text key={l.id}>{l.title}</Text>\n            ))}\n          </Stack>\n        </Card>\n      )}\n\n      <Stack marginTop={3} padding={2} space={2}>\n        <Box paddingBottom={2}>\n          <Text size={1} weight=\"semibold\">\n            Show translations\n          </Text>\n        </Box>\n\n        <Card as=\"label\">\n          <Flex align=\"center\" gap={2}>\n            <Checkbox checked={allSelected} name=\"_allSelected\" onChange={handleToggleAll} />\n            <Box flex={1}>\n              <Text muted={!allSelected} weight=\"semibold\">\n                All translations\n              </Text>\n            </Box>\n          </Flex>\n        </Card>\n\n        {languageOptions.map((lang) => (\n          <LanguageFilterOption\n            id={lang.id}\n            key={lang.id}\n            onToggle={toggleLanguage}\n            selected={activeLanguages.includes(lang.id)}\n            title={lang.title}\n          />\n        ))}\n      </Stack>\n    </StyledBox>\n  )\n\n  const langCount = options.supportedLanguages.length\n  return (\n    <Popover content={content} open={open} portal ref={setPopover}>\n      <Button\n        text={\n          <Flex gap={1}>\n            <Box>Filter languages:</Box>\n            <Flex gap={1} justify=\"space-around\">\n              <Flex\n                style={{width: `${Math.floor(Math.log10(langCount) + 1)}ch`}}\n                justify=\"flex-end\"\n              >\n                {activeLanguages.length}\n              </Flex>\n              <Box>/</Box>\n              <Box>{langCount}</Box>\n            </Flex>\n          </Flex>\n        }\n        mode=\"bleed\"\n        onClick={handleClick}\n        ref={setButton}\n        selected={open}\n      />\n    </Popover>\n  )\n}\n\nfunction LanguageFilterOption(props: {\n  id: string\n  onToggle: (id: string) => void\n  selected: boolean\n  title: string\n}) {\n  const {id, onToggle, selected, title} = props\n\n  const handleChange = useCallback(() => {\n    onToggle(id)\n  }, [id, onToggle])\n\n  return (\n    <Card as=\"label\">\n      <Flex align=\"center\" gap={2}>\n        <Checkbox checked={selected} name={`language-${id}`} onChange={handleChange} />\n        <Box flex={1}>\n          <Text muted={!selected}>{title}</Text>\n        </Box>\n      </Flex>\n    </Card>\n  )\n}\n","import React from 'react'\nimport {definePlugin, DocumentLanguageFilterComponent, ObjectInputProps} from 'sanity'\nimport {LanguageFilterObjectInput} from './LanguageFilterObjectInput'\nimport {LanguageFilterMenuButton} from './LanguageFilterMenuButton'\nimport {LanguageFilterConfig} from './types'\nimport {isLanguageFilterEnabled} from './filterField'\nimport {LanguageFilterProvider} from './LanguageFilterContext'\nimport {createSelectedLanguageIdsBus} from './languageSubscription'\n\n/**\n * ## Usage in sanity.config.ts (or .js)\n *\n * ```\n * import {defineConfig} from 'sanity'\n * import {languageFilter} from '@sanity/language-filter'\n *\n * export const defineConfig({\n *     /...\n *     plugins: [\n *         languageFilter({\n *             supportedLanguages: [\n *               {id: 'nb', title: 'Norwegian (Bokmål)'},\n *               {id: 'nn', title: 'Norwegian (Nynorsk)'},\n *               {id: 'en', title: 'English'},\n *               {id: 'es', title: 'Spanish'},\n *               {id: 'arb', title: 'Arabic'},\n *               {id: 'pt', title: 'Portuguese'},\n *               //...\n *             ],\n *             // Select Norwegian (Bokmål) by default\n *             defaultLanguages: ['nb'],\n *             // Only show language filter for document type `page` (schemaType.name)\n *             // Can also enable via document-options: options.languageFilter: true\n *             documentTypes: ['page'],\n *             // default filter function shown\n *             filterField: (enclosingType, field, selectedLanguageIds) =>\n *               !enclosingType.name.startsWith('locale') || selectedLanguageIds.includes(field.name),\n *        })\n *    ]\n * })\n * ```\n */\nexport const languageFilter = definePlugin<LanguageFilterConfig>((options) => {\n  const {onSelectedIdsChange, subscribeSelectedIds} = createSelectedLanguageIdsBus()\n\n  const RenderLanguageFilter: DocumentLanguageFilterComponent = () => {\n    return <LanguageFilterMenuButton options={options} onSelectedIdsChange={onSelectedIdsChange} />\n  }\n\n  return {\n    name: '@sanity/language-filter',\n    document: {\n      unstable_languageFilter: (prev, {schemaType, schema}) => {\n        if (isLanguageFilterEnabled(schema.get(schemaType), options)) {\n          return [...prev, RenderLanguageFilter]\n        }\n        return prev\n      },\n    },\n\n    form: {\n      components: {\n        // eslint-disable-next-line func-name-matching\n        input: function LanguageFilterWrapper(props) {\n          const enabled = isLanguageFilterEnabled(props.schemaType, options)\n          // will only be considered enabled for document, so this is only done once\n          if (enabled) {\n            return (\n              <LanguageFilterProvider enabled={enabled} options={options}>\n                {props.renderDefault(props)}\n              </LanguageFilterProvider>\n            )\n          }\n          if (props.schemaType.jsonType === 'object') {\n            return (\n              <LanguageFilterObjectInput\n                {...(props as ObjectInputProps)}\n                subscribeSelectedIds={subscribeSelectedIds}\n              />\n            )\n          }\n\n          return props.renderDefault(props)\n        },\n      },\n    },\n  }\n})\n","export type LanguageSubscription = (ids: string[]) => void\nexport type Unsubscribe = () => void\nexport type LanguageSubscribe = (subscription: LanguageSubscription) => Unsubscribe\n\nexport interface SelectedLanguageIdsBus {\n  onSelectedIdsChange: (ids: string[]) => void\n  subscribeSelectedIds: LanguageSubscribe\n}\n\n/**\n * We need a way to communicate state changes between the pane menu and input components.\n * LanguageFilter button lives outside the input-render tree, so Context is out.\n * This is a workaround for that.\n */\nexport function createSelectedLanguageIdsBus(): SelectedLanguageIdsBus {\n  const subs: LanguageSubscription[] = []\n\n  const onSelectedIdsChange = (ids: string[]) => {\n    subs.forEach((s) => s(ids))\n  }\n  const subscribeSelectedIds = (subscription: LanguageSubscription) => {\n    subs.push(subscription)\n    return () => {\n      subs.splice(subs.indexOf(subscription), 1)\n    }\n  }\n\n  return {\n    onSelectedIdsChange,\n    subscribeSelectedIds,\n  }\n}\n"],"names":["defaultFilterField","enclosingType","field","selectedLanguageIds","name","startsWith","includes","isLanguageFilterEnabled","schemaType","options","_a","_b","schemaFilter","jsonType","getRootType","isDocument","languageFilter","defaultEnabled","documentTypes","schema","type","LanguageFilterContext","createContext","LanguageFilterProvider","_ref","enabled","children","value","useMemo","jsx","Provider","storageKey","getSelectableLanguages","_ref2","supportedLanguages","defaultLanguages","filter","lang","id","useSelectedLanguageIds","useState","selectableLangs","map","l","selected","persistedValue","window","localStorage","getItem","JSON","parse","err","array2","getPersistedLanguageIds","LanguageFilterObjectInput","props","context","useContext","subscribeSelectedIds","restProps","_excluded","FilteredObjectInput","renderDefault","members","membersProp","_excluded2","selectedIds","setSelectedIds","useEffect","unsubscribe","activeLanguages","filterField","member","kind","_objectSpread","fieldSet","fieldsetMember","usePaneLanguages","onSelectedIdsChange","selectableLanguages","updateSelectedIds","useCallback","ids","languageIds","setItem","stringify","selectAll","selectNone","toggleLanguage","languageId","allSelected","length","StyledBox","styled","Box","_templateObject","LanguageFilterMenuButton","languageOptions","open","setOpen","button","setButton","popover","setPopover","handleToggleAll","event","currentTarget","checked","handleClick","o","handleClickOutside","useClickOutside","content","jsxs","overflow","padding","Card","radius","Stack","space","paddingBottom","Text","size","weight","Fragment","title","marginTop","as","Flex","align","gap","Checkbox","onChange","flex","muted","LanguageFilterOption","onToggle","langCount","Popover","portal","ref","Button","text","justify","style","width","Math","floor","log10","mode","onClick","handleChange","definePlugin","subs","forEach","s","subscription","push","splice","indexOf","createSelectedLanguageIdsBus","RenderLanguageFilter","document","unstable_languageFilter","prev","_ref3","get","form","components","input"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/src/index.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+
 import {FieldMember} from 'sanity'
 import {FieldsetState} from 'sanity'
 import {ObjectSchemaType} from 'sanity'
@@ -72,4 +74,19 @@ export declare interface LanguageFilterSchema extends ObjectSchemaType {
   options?: LanguageFilterOptions
 }
 
+declare interface LanguageFilterStudioContextProps {
+  options: Required<LanguageFilterConfig>
+}
+
+declare interface LanguageFilterStudioContextValue extends LanguageFilterStudioContextProps {
+  selectedLanguageIds: string[]
+  setSelectedLanguageIds: (ids: string[]) => void
+}
+
+/**
+ * Retrieves plugin options and the currently selected
+ * language IDs from anywhere in the Studio
+ */
+export declare function useLanguageFilterStudioContext(): LanguageFilterStudioContextValue
+
 export {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/language-filter",
-  "version": "3.0.1",
+  "version": "3.1.1",
   "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

@@ -1,8 +1,27 @@
-import {Box, Button, Card, Checkbox, Flex, Popover, Stack, Text, useClickOutside} from '@sanity/ui'
-import React, {FormEvent, useCallback, useState} from 'react'
+import {
+  TextInput,
+  Badge,
+  Box,
+  Button,
+  Card,
+  Flex,
+  Popover,
+  Stack,
+  Text,
+  useClickOutside,
+} 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,
+  CircleIcon,
+  EyeClosedIcon,
+  EyeOpenIcon,
+  TranslateIcon,
+} from '@sanity/icons'
+import {TextWithTone} from 'sanity'
 
 const StyledBox = styled(Box)`
   max-height: calc(100vh - 200px);
@@ -10,11 +29,10 @@ const StyledBox = styled(Box)`
 
 export interface LanguageFilterMenuButtonProps {
   options: LanguageFilterConfig
-  onSelectedIdsChange: (ids: string[]) => void
 }
 
 export function LanguageFilterMenuButton(props: LanguageFilterMenuButtonProps) {
-  const {options, onSelectedIdsChange} = props
+  const {options} = props
 
   const defaultLanguages = options.supportedLanguages.filter((l) =>
     options.defaultLanguages?.includes(l.id)
@@ -23,17 +41,14 @@ export function LanguageFilterMenuButton(props: LanguageFilterMenuButtonProps) {
   const languageOptions = options.supportedLanguages.filter(
     (l) => !options.defaultLanguages?.includes(l.id)
   )
-  const [open, setOpen] = useState(false)
-  const {activeLanguages, allSelected, selectAll, selectNone, toggleLanguage} = usePaneLanguages({
-    options,
-    onSelectedIdsChange,
-  })
+  const [open, setOpen] = useState(!false)
+  const {activeLanguages, allSelected, selectAll, selectNone, toggleLanguage} = usePaneLanguages()
   const [button, setButton] = useState<HTMLElement | null>(null)
   const [popover, setPopover] = useState<HTMLElement | null>(null)
 
-  const handleToggleAll = useCallback(
-    (event: FormEvent<HTMLInputElement>) => {
-      const checked = event.currentTarget.checked
+  const handleToggleAll: MouseEventHandler<HTMLButtonElement> = useCallback(
+    (event) => {
+      const checked = event.currentTarget.value === 'ALL'
 
       if (checked) {
         selectAll()
@@ -50,74 +65,88 @@ export function LanguageFilterMenuButton(props: LanguageFilterMenuButtonProps) {
 
   useClickOutside(handleClickOutside, [button, popover])
 
-  const content = (
-    <StyledBox overflow="auto" padding={1}>
-      {defaultLanguages.length > 0 && (
-        <Card radius={2}>
-          <Stack padding={2} space={3}>
-            <Box paddingBottom={2}>
-              <Text size={1} weight="semibold">
-                Default language{defaultLanguages.length > 1 && <>s</>}
-              </Text>
-            </Box>
+  const langCount = options.supportedLanguages.length
 
+  // Search filter query
+  const [query, setQuery] = useState(``)
+  const handleQuery = useCallback((event: FormEvent<HTMLInputElement>) => {
+    if (event.currentTarget.value) {
+      setQuery(event.currentTarget.value)
+    } else {
+      setQuery(``)
+    }
+  }, [])
+
+  const content = (
+    <StyledBox overflow="auto">
+      <Stack padding={1} space={1}>
+        {defaultLanguages.length > 0 && (
+          <>
             {defaultLanguages.map((l) => (
-              <Text key={l.id}>{l.title}</Text>
+              <LanguageFilterOption key={l.id} id={l.id} title={l.title} selected />
             ))}
-          </Stack>
-        </Card>
-      )}
-
-      <Stack marginTop={3} padding={2} space={2}>
-        <Box paddingBottom={2}>
-          <Text size={1} weight="semibold">
-            Show translations
-          </Text>
-        </Box>
-
-        <Card as="label">
-          <Flex align="center" gap={2}>
-            <Checkbox checked={allSelected} name="_allSelected" onChange={handleToggleAll} />
+            <Card borderTop />
+          </>
+        )}
+
+        <Button
+          mode="bleed"
+          onClick={handleToggleAll}
+          justify="flex-start"
+          value={allSelected ? 'NONE' : 'ALL'}
+          disabled={!!query}
+        >
+          <Flex gap={3} align="center">
+            <Text size={2}>
+              {allSelected ? (
+                <TextWithTone tone="primary">
+                  <EyeClosedIcon />
+                </TextWithTone>
+              ) : (
+                <EyeOpenIcon />
+              )}
+            </Text>
             <Box flex={1}>
-              <Text muted={!allSelected} weight="semibold">
-                All translations
-              </Text>
+              <Text>{allSelected ? `Hide all` : `Show all`}</Text>
             </Box>
           </Flex>
-        </Card>
-
-        {languageOptions.map((lang) => (
-          <LanguageFilterOption
-            id={lang.id}
-            key={lang.id}
-            onToggle={toggleLanguage}
-            selected={activeLanguages.includes(lang.id)}
-            title={lang.title}
-          />
-        ))}
+        </Button>
+
+        <Card borderTop />
+
+        {langCount > 4 ? (
+          <TextInput onChange={handleQuery} value={query} placeholder="Filter languages" />
+        ) : null}
+
+        {languageOptions
+          .filter((language) => {
+            if (query) {
+              return language.title.toLowerCase().includes(query.toLowerCase())
+            }
+            return true
+          })
+          .map((lang) => (
+            <LanguageFilterOption
+              id={lang.id}
+              key={lang.id}
+              onToggle={toggleLanguage}
+              selected={activeLanguages.includes(lang.id)}
+              title={lang.title}
+            />
+          ))}
       </Stack>
     </StyledBox>
   )
 
-  const langCount = options.supportedLanguages.length
+  const buttonText =
+    activeLanguages.length === langCount
+      ? `Showing all`
+      : `Showing ${activeLanguages.length} / ${langCount}`
   return (
     <Popover content={content} open={open} portal ref={setPopover}>
       <Button
-        text={
-          <Flex gap={1}>
-            <Box>Filter languages:</Box>
-            <Flex gap={1} justify="space-around">
-              <Flex
-                style={{width: `${Math.floor(Math.log10(langCount) + 1)}ch`}}
-                justify="flex-end"
-              >
-                {activeLanguages.length}
-              </Flex>
-              <Box>/</Box>
-              <Box>{langCount}</Box>
-            </Flex>
-          </Flex>
-        }
+        text={buttonText}
+        icon={TranslateIcon}
         mode="bleed"
         onClick={handleClick}
         ref={setButton}
@@ -129,24 +158,38 @@ export function LanguageFilterMenuButton(props: LanguageFilterMenuButtonProps) {
 
 function LanguageFilterOption(props: {
   id: string
-  onToggle: (id: string) => void
   selected: boolean
   title: string
+  // eslint-disable-next-line react/require-default-props
+  onToggle?: (id: string) => void
 }) {
   const {id, onToggle, selected, title} = props
 
   const handleChange = useCallback(() => {
-    onToggle(id)
+    if (onToggle) {
+      onToggle(id)
+    }
   }, [id, onToggle])
 
+  const disabled = !onToggle
+
   return (
-    <Card as="label">
-      <Flex align="center" gap={2}>
-        <Checkbox checked={selected} name={`language-${id}`} onChange={handleChange} />
+    <Button mode="bleed" onClick={handleChange} justify="flex-start" disabled={disabled}>
+      <Flex gap={3} align="center">
+        <Text size={2}>
+          {selected ? (
+            <TextWithTone tone={disabled ? 'default' : 'positive'}>
+              <CheckmarkCircleIcon />
+            </TextWithTone>
+          ) : (
+            <CircleIcon />
+          )}
+        </Text>
         <Box flex={1}>
-          <Text muted={!selected}>{title}</Text>
+          <Text>{title}</Text>
         </Box>
+        <Badge>{id}</Badge>
       </Flex>
-    </Card>
+    </Button>
   )
 }

package/src/LanguageFilterObjectInput.tsx

@@ -1,68 +1,30 @@
-import React, {useEffect, useMemo} from 'react'
-import {ObjectInputProps, ObjectMember} from 'sanity'
-import {LanguageFilterConfig} from './types'
-import {defaultFilterField} from './filterField'
-import {useLanguageFilterContext} from './LanguageFilterContext'
-import {useSelectedLanguageIds} from './useSelectedLanguageIds'
+import React, {useMemo} from 'react'
+import {ObjectInputProps, ObjectMember, useFormValue} from 'sanity'
+import {useLanguageFilterStudioContext} from './LanguageFilterStudioContext'
 
-export type LanguageFilterObjectInputProps = {
-  options: LanguageFilterConfig
-  /**
-   * We need a way to communicate state changes between the pane menu and input components.
-   * LanguageFilter button lives outside the input-render tree, so Context is out.
-   * This is a workaround for that.
-   */
-  subscribeSelectedIds: (callback: (ids: string[]) => void) => () => void
-} & ObjectInputProps
+// First check that this Object is in a schema type for which language-filter is enabled
+export function FilteredObjectWrapper(props: ObjectInputProps) {
+  const {options} = useLanguageFilterStudioContext()
 
-export function LanguageFilterObjectInput(
-  props: ObjectInputProps & {
-    subscribeSelectedIds: (callback: (ids: string[]) => void) => () => void
-  }
-) {
-  const context = useLanguageFilterContext()
-  const {options, enabled} = context || {}
-  const {subscribeSelectedIds, ...restProps} = props
-  if (!enabled || !options) {
-    return props.renderDefault(restProps)
-  }
-  return (
-    <FilteredObjectInput
-      {...restProps}
-      options={options}
-      subscribeSelectedIds={subscribeSelectedIds}
-    />
-  )
-}
-
-function FilteredObjectInput(props: LanguageFilterObjectInputProps) {
-  const {
-    members: membersProp,
-    options,
-    schemaType,
-    renderDefault,
-    subscribeSelectedIds,
-    ...restProps
-  } = props
-  const [selectedIds, setSelectedIds] = useSelectedLanguageIds(options)
+  const documentType = useFormValue(['_type'])
+  const {documentTypes} = options
+  const languageFilterEnabled =
+    typeof documentType === 'string' && documentTypes.includes(documentType)
 
-  useEffect(() => {
-    const unsubscribe = subscribeSelectedIds(setSelectedIds)
-    return () => unsubscribe()
-  }, [subscribeSelectedIds, setSelectedIds])
-
-  const activeLanguages = useMemo(
-    () => [...(options.defaultLanguages ?? []), ...selectedIds],
-    [options.defaultLanguages, selectedIds]
-  )
+  return languageFilterEnabled ? <FilteredObjectInput {...props} /> : props.renderDefault(props)
+}
 
-  const filterField = options.filterField ?? defaultFilterField
+// Modify the object members based on selected languages in the filter
+export function FilteredObjectInput(props: ObjectInputProps) {
+  const {members: membersProp, schemaType, renderDefault, ...restProps} = props
+  const {selectedLanguageIds, options} = useLanguageFilterStudioContext()
+  const {filterField} = options
 
   const members: ObjectMember[] = useMemo(() => {
     return membersProp
       .filter((member) => {
         return (
-          (member.kind === 'field' && filterField(schemaType, member, activeLanguages)) ||
+          (member.kind === 'field' && filterField(schemaType, member, selectedLanguageIds)) ||
           member.kind === 'fieldSet'
         )
       })
@@ -75,7 +37,7 @@ function FilteredObjectInput(props: LanguageFilterObjectInputProps) {
               members: member.fieldSet.members.filter((fieldsetMember) => {
                 return (
                   fieldsetMember.kind === 'field' &&
-                  filterField(schemaType, fieldsetMember, activeLanguages)
+                  filterField(schemaType, fieldsetMember, selectedLanguageIds)
                 )
               }),
             },
@@ -83,7 +45,7 @@ function FilteredObjectInput(props: LanguageFilterObjectInputProps) {
         }
         return member
       })
-  }, [schemaType, membersProp, filterField, activeLanguages])
+  }, [schemaType, membersProp, filterField, selectedLanguageIds])
 
   return renderDefault({...restProps, members, schemaType, renderDefault})
 }

package/src/LanguageFilterStudioContext.tsx

@@ -0,0 +1,63 @@
+import React, {createContext, useContext, useMemo} from 'react'
+import {LanguageFilterConfig} from './types'
+import {LayoutProps} from 'sanity'
+import {defaultFilterField} from './filterField'
+import {useSelectedLanguageIds} from './useSelectedLanguageIds'
+
+export interface LanguageFilterStudioContextProps {
+  // eslint-disable-next-line react/require-default-props
+  options: Required<LanguageFilterConfig>
+}
+
+export interface LanguageFilterStudioContextValue extends LanguageFilterStudioContextProps {
+  selectedLanguageIds: string[]
+  setSelectedLanguageIds: (ids: string[]) => void
+}
+
+export const defaultContextValue: LanguageFilterStudioContextValue = {
+  options: {
+    supportedLanguages: [],
+    defaultLanguages: [],
+    documentTypes: [],
+    filterField: defaultFilterField,
+  },
+  selectedLanguageIds: [],
+  setSelectedLanguageIds: () => console.error('LanguageFilterStudioContext not initialized'),
+}
+
+const LanguageFilterStudioContext =
+  createContext<LanguageFilterStudioContextValue>(defaultContextValue)
+
+/**
+ * This is a separate Provider from the Context that wraps the document pane
+ * but it used to listen to changes to the selected language IDs inside it
+ * and provide them to a Studio-wide context
+ */
+export function LanguageFilterStudioProvider(
+  props: LayoutProps & LanguageFilterStudioContextProps
+) {
+  const options = useMemo(
+    () => ({
+      ...defaultContextValue.options,
+      ...props.options,
+    }),
+    [props.options]
+  )
+  const [selectedLanguageIds, setSelectedLanguageIds] = useSelectedLanguageIds(options)
+
+  return (
+    <LanguageFilterStudioContext.Provider
+      value={{options, selectedLanguageIds, setSelectedLanguageIds}}
+    >
+      {props.renderDefault(props)}
+    </LanguageFilterStudioContext.Provider>
+  )
+}
+
+/**
+ * Retrieves plugin options and the currently selected
+ * language IDs from anywhere in the Studio
+ */
+export function useLanguageFilterStudioContext() {
+  return useContext(LanguageFilterStudioContext)
+}

package/src/index.ts

@@ -12,3 +12,5 @@ export type {
   FilterFieldFunction,
   Language,
 } from './types'
+
+export {useLanguageFilterStudioContext} from './LanguageFilterStudioContext'

package/src/plugin.tsx

@@ -1,11 +1,15 @@
 import React from 'react'
-import {definePlugin, DocumentLanguageFilterComponent, ObjectInputProps} from 'sanity'
-import {LanguageFilterObjectInput} from './LanguageFilterObjectInput'
+import {
+  definePlugin,
+  DocumentLanguageFilterComponent,
+  isObjectSchemaType,
+  ObjectInputProps,
+} from 'sanity'
+import {FilteredObjectWrapper} from './LanguageFilterObjectInput'
 import {LanguageFilterMenuButton} from './LanguageFilterMenuButton'
 import {LanguageFilterConfig} from './types'
 import {isLanguageFilterEnabled} from './filterField'
-import {LanguageFilterProvider} from './LanguageFilterContext'
-import {createSelectedLanguageIdsBus} from './languageSubscription'
+import {defaultContextValue, LanguageFilterStudioProvider} from './LanguageFilterStudioContext'
 
 /**
  * ## Usage in sanity.config.ts (or .js)
@@ -41,14 +45,23 @@ import {createSelectedLanguageIdsBus} from './languageSubscription'
  * ```
  */
 export const languageFilter = definePlugin<LanguageFilterConfig>((options) => {
-  const {onSelectedIdsChange, subscribeSelectedIds} = createSelectedLanguageIdsBus()
-
   const RenderLanguageFilter: DocumentLanguageFilterComponent = () => {
-    return <LanguageFilterMenuButton options={options} onSelectedIdsChange={onSelectedIdsChange} />
+    return <LanguageFilterMenuButton options={options} />
+  }
+
+  const pluginOptions = {
+    ...defaultContextValue.options,
+    ...options,
   }
 
   return {
     name: '@sanity/language-filter',
+    studio: {
+      components: {
+        layout: (props) => LanguageFilterStudioProvider({...props, options: pluginOptions}),
+      },
+    },
+
     document: {
       unstable_languageFilter: (prev, {schemaType, schema}) => {
         if (isLanguageFilterEnabled(schema.get(schemaType), options)) {
@@ -60,24 +73,9 @@ export const languageFilter = definePlugin<LanguageFilterConfig>((options) => {
 
     form: {
       components: {
-        // eslint-disable-next-line func-name-matching
-        input: function LanguageFilterWrapper(props) {
-          const enabled = isLanguageFilterEnabled(props.schemaType, options)
-          // will only be considered enabled for document, so this is only done once
-          if (enabled) {
-            return (
-              <LanguageFilterProvider enabled={enabled} options={options}>
-                {props.renderDefault(props)}
-              </LanguageFilterProvider>
-            )
-          }
-          if (props.schemaType.jsonType === 'object') {
-            return (
-              <LanguageFilterObjectInput
-                {...(props as ObjectInputProps)}
-                subscribeSelectedIds={subscribeSelectedIds}
-              />
-            )
+        input: (props) => {
+          if (props.id !== 'root' && isObjectSchemaType(props.schemaType)) {
+            return FilteredObjectWrapper(props as ObjectInputProps)
           }
 
           return props.renderDefault(props)

package/src/usePaneLanguages.ts

@@ -1,42 +1,28 @@
 import {useCallback, useMemo} from 'react'
-import {LanguageFilterConfig} from './types'
-import {
-  getSelectableLanguages,
-  persistLanguageIds,
-  useSelectedLanguageIds,
-} from './useSelectedLanguageIds'
 
-export interface UsePaneLanguagesParams {
-  options: LanguageFilterConfig
-  /**
-   * We need a way to communicate state changes between the pane menu and input components.
-   * LanguageFilter button lives outside the input-render tree, so Context is out.
-   * This is a workaround for that.
-   */
-  onSelectedIdsChange: (ids: string[]) => void
-}
+import {getSelectableLanguages, persistLanguageIds} from './useSelectedLanguageIds'
+import {useLanguageFilterStudioContext} from './LanguageFilterStudioContext'
+
+const unique = (arr: string[]) => Array.from(new Set(arr))
 
-export function usePaneLanguages(props: UsePaneLanguagesParams): {
+export function usePaneLanguages(): {
   activeLanguages: string[]
   allSelected: boolean
   selectAll: () => void
   selectNone: () => void
   toggleLanguage: (languageId: string) => void
 } {
-  const {options, onSelectedIdsChange} = props
-  const {defaultLanguages} = options
-
-  const [selectedIds, setSelectedIds] = useSelectedLanguageIds(options)
+  const {selectedLanguageIds, setSelectedLanguageIds, options} = useLanguageFilterStudioContext()
+  const {defaultLanguages = []} = options
 
   const selectableLanguages = useMemo(() => getSelectableLanguages(options), [options])
 
   const updateSelectedIds = useCallback(
     (ids: string[]) => {
-      setSelectedIds(ids)
-      persistLanguageIds(ids)
-      onSelectedIdsChange(ids)
+      setSelectedLanguageIds(unique([...defaultLanguages, ...ids]))
+      persistLanguageIds(unique([...defaultLanguages, ...ids]))
     },
-    [onSelectedIdsChange, setSelectedIds]
+    [defaultLanguages, setSelectedLanguageIds]
   )
 
   const selectAll = useCallback(
@@ -45,32 +31,33 @@ export function usePaneLanguages(props: UsePaneLanguagesParams): {
   )
 
   const selectNone = useCallback(() => {
-    updateSelectedIds([])
-  }, [updateSelectedIds])
+    updateSelectedIds(defaultLanguages)
+  }, [defaultLanguages, updateSelectedIds])
 
   const toggleLanguage = useCallback(
     (languageId: string) => {
-      let lang = selectedIds
+      let lang = selectedLanguageIds
 
       if (lang.includes(languageId)) {
         lang = lang.filter((l) => l !== languageId)
       } else {
-        lang = [...lang, languageId]
+        lang = unique([...lang, languageId])
       }
 
       updateSelectedIds(lang)
     },
-    [updateSelectedIds, selectedIds]
+    [updateSelectedIds, selectedLanguageIds]
   )
 
   const activeLanguages = useMemo(
-    () => [...(defaultLanguages ?? []), ...selectedIds],
-    [defaultLanguages, selectedIds]
+    () => unique([...(defaultLanguages ?? []), ...selectedLanguageIds]),
+    [defaultLanguages, selectedLanguageIds]
   )
 
   return {
     activeLanguages,
-    allSelected: selectedIds.length === selectableLanguages.length,
+    allSelected:
+      selectedLanguageIds.length === selectableLanguages.length + defaultLanguages.length,
     selectAll,
     selectNone,
     toggleLanguage,

package/src/useSelectedLanguageIds.ts

@@ -36,5 +36,5 @@ export function getSelectableLanguages({
 export function useSelectedLanguageIds(
   options: LanguageFilterConfig
 ): [string[], (ids: string[]) => void] {
-  return useState(() => getPersistedLanguageIds(options))
+  return useState(() => [...(options.defaultLanguages ?? []), ...getPersistedLanguageIds(options)])
 }

package/src/LanguageFilterContext.tsx

@@ -1,26 +0,0 @@
-import React, {createContext, PropsWithChildren, useContext, useMemo} from 'react'
-import {LanguageFilterConfig} from './types'
-
-export interface LanguageFilterContextValue {
-  // eslint-disable-next-line react/require-default-props
-  options: LanguageFilterConfig
-  // eslint-disable-next-line react/require-default-props
-  enabled: boolean
-}
-
-const LanguageFilterContext = createContext<LanguageFilterContextValue | undefined>(undefined)
-
-export function LanguageFilterProvider({
-  options,
-  enabled,
-  children,
-}: PropsWithChildren<
-  Omit<LanguageFilterContextValue, 'selectedLanguageIds' | 'setSelectedLanguageIds'>
->) {
-  const value = useMemo(() => ({options, enabled}), [options, enabled])
-  return <LanguageFilterContext.Provider value={value}>{children}</LanguageFilterContext.Provider>
-}
-
-export function useLanguageFilterContext() {
-  return useContext(LanguageFilterContext)
-}