@sanity/language-filter 3.0.1 → 3.1.0

package/README.md

@@ -68,8 +68,8 @@ 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),
        })
      ]
  })

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 c}from"react/jsx-runtime";import{useFormValue as u,TextWithTone as s,definePlugin as d,isObjectSchemaType as g}from"sanity";import{useState as f,createContext as p,useMemo as m,useContext as h,useCallback as y}from"react";import{Box as b,useClickOutside as v,Card as O,Stack as L,Text as j,Button as S,Flex 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 z}from"@sanity/icons";const A=(e,t,n)=>!e.name.startsWith("locale")||n.includes(t.name);function F(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){let{supportedLanguages:t,defaultLanguages:n}=e;return t.filter((e=>!(null==n?void 0:n.includes(e.id))))}function B(e){return f((()=>function(e){const t=_(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}(e)))}const H={options:{supportedLanguages:[],defaultLanguages:[],documentTypes:[],filterField:A},selectedLanguageIds:[],setSelectedLanguageIds:()=>console.error("LanguageFilterStudioContext not initialized")},W=p(H);function q(){return h(W)}function G(e){const{members:r,schemaType:i,renderDefault:o}=e,a=n(e,t),{selectedLanguageIds:c,options:u}=q(),{filterField:s}=u,d=m((()=>r.filter((e=>"field"===e.kind&&s(i,e,c)||"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,c)))})}):e))),[i,r,s,c]);return o(l(l({},a),{},{members:d,schemaType:i,renderDefault:o}))}function K(){const{selectedLanguageIds:e,setSelectedLanguageIds:t,options:n}=q(),{defaultLanguages:r}=n,l=m((()=>_(n)),[n]),i=y((e=>{var n;t(e),n=e,window.localStorage.setItem(J,JSON.stringify(n))}),[t]),o=y((()=>i(l.map((e=>e.id)))),[i,l]),a=y((()=>{i([])}),[i]),c=y((t=>{let n=e;n=n.includes(t)?n.filter((e=>e!==t)):[...n,t],i(n)}),[i,e]);return{activeLanguages:m((()=>[...null!=r?r:[],...e]),[r,e]),allSelected:e.length===l.length,selectAll:o,selectNone:a,toggleLanguage:c}}const M=D(b)(e||(Q=["\n  max-height: calc(100vh - 200px);\n"],R||(R=Q.slice(0)),e=Object.freeze(Object.defineProperties(Q,{raw:{value:Object.freeze(R)}}))));var Q,R;function U(e){const{options:t}=e,n=t.supportedLanguages.filter((e=>{var n;return null==(n=t.defaultLanguages)?void 0:n.includes(e.id)})),r=t.supportedLanguages.filter((e=>{var n;return!(null==(n=t.defaultLanguages)?void 0:n.includes(e.id))})),[l,i]=f(!1),{activeLanguages:u,allSelected:d,selectAll:g,selectNone:p,toggleLanguage:m}=K(),[h,x]=f(null),[D,N]=f(null),z=y((e=>{"ALL"===e.currentTarget.value?g():p()}),[g,p]),A=y((()=>i((e=>!e))),[]),F=y((()=>i(!1)),[]);v(F,[h,D]);const E=t.supportedLanguages.length,[J,_]=f(""),B=y((e=>{e.currentTarget.value?_(e.currentTarget.value):_("")}),[]),H=a(M,{overflow:"auto",padding:1,children:[n.length>0&&o(O,{radius:2,children:a(L,{padding:2,space:3,children:[o(b,{paddingBottom:2,children:a(j,{size:1,weight:"semibold",children:["Default language",n.length>1&&o(c,{children:"s"})]})}),n.map((e=>o(j,{children:e.title},e.id)))]})}),a(L,{padding:1,space:1,children:[o(S,{mode:"bleed",onClick:z,justify:"flex-start",value:d?"NONE":"ALL",disabled:!!J,children:a(w,{gap:3,align:"center",children:[o(j,{size:2,children:d?o(s,{tone:"primary",children:o(I,{})}):o(k,{})}),o(b,{flex:1,children:o(j,{children:d?"Hide All":"Show All"})})]})}),o(O,{borderTop:!0}),E>4?o(T,{onChange:B,value:J,placeholder:"Filter languages"}):null,r.filter((e=>!J||e.title.toLowerCase().includes(J.toLowerCase()))).map((e=>o(V,{id:e.id,onToggle:m,selected:u.includes(e.id),title:e.title},e.id)))]})]}),W=u.length===E?"Showing all":"Showing ".concat(u.length," / ").concat(E);return o(P,{content:H,open:l,portal:!0,ref:N,children:o(S,{text:W,icon:C,mode:"bleed",onClick:A,ref:x,selected:l})})}function V(e){const{id:t,onToggle:n,selected:r,title:l}=e,i=y((()=>{n(t)}),[t,n]);return o(S,{mode:"bleed",onClick:i,justify:"flex-start",children:a(w,{gap:3,align:"center",children:[o(j,{size:2,children:r?o(s,{tone:"positive",children:o(N,{})}):o(z,{})}),o(b,{flex:1,children:o(j,{children:l})}),o(x,{children:t})]})})}const X=d((e=>{const t=()=>o(U,{options:e}),n=l(l({},H.options),e);return{name:"@sanity/language-filter",studio:{components:{layout:e=>function(e){const t=m((()=>l(l({},H.options),e.options)),[e.options]),[n,r]=B(t);return o(W.Provider,{value:{options:t,selectedLanguageIds:n,setSelectedLanguageIds:r},children:e.renderDefault(e)})}(l(l({},e),{},{options:n}))}},document:{unstable_languageFilter:(n,r)=>{let{schemaType:l,schema:i}=r;return F(i.get(l),e)?[...n,t]:n}},form:{components:{input:e=>"root"!==e.id&&g(e.schemaType)?function(e){const{options:t}=q(),n=u(["_type"]),{documentTypes:r}=t;return"string"==typeof n&&r.includes(n)?o(G,l({},e)):e.renderDefault(e)}(e):e.renderDefault(e)}}}}));export{A as defaultFilterField,F as isLanguageFilterEnabled,X as languageFilter,q 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={},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}Object.defineProperty(exports,"__esModule",{value:!0});var o=require("react/jsx-runtime"),s=require("sanity"),a=require("react"),u=require("@sanity/ui"),c=require("styled-components"),d=require("@sanity/icons");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=g(c);const f=(e,t,n)=>!e.name.startsWith("locale")||n.includes(t.name);function m(e,t){var n,r;const l=function(e){return"object"===(null==e?void 0:e.jsonType)&&"document"===x(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 x(e){return e.type?x(e.type):e}const j="@sanity/plugin/language-filter/selected-languages";function b(e){let{supportedLanguages:t,defaultLanguages:n}=e;return t.filter((e=>!(null==n?void 0:n.includes(e.id))))}function h(e){return a.useState((()=>function(e){const t=b(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}(e)))}const y={options:{supportedLanguages:[],defaultLanguages:[],documentTypes:[],filterField:f},selectedLanguageIds:[],setSelectedLanguageIds:()=>console.error("LanguageFilterStudioContext not initialized")},v=a.createContext(y);function O(){return a.useContext(v)}function S(e){const{members:r,schemaType:i,renderDefault:o}=e,s=n(e,t),{selectedLanguageIds:u,options:c}=O(),{filterField:d}=c,g=a.useMemo((()=>r.filter((e=>"field"===e.kind&&d(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&&d(i,e,u)))})}):e))),[i,r,d,u]);return o(l(l({},s),{},{members:g,schemaType:i,renderDefault:o}))}function L(){const{selectedLanguageIds:e,setSelectedLanguageIds:t,options:n}=O(),{defaultLanguages:r}=n,l=a.useMemo((()=>b(n)),[n]),i=a.useCallback((e=>{var n;t(e),n=e,window.localStorage.setItem(j,JSON.stringify(n))}),[t]),o=a.useCallback((()=>i(l.map((e=>e.id)))),[i,l]),s=a.useCallback((()=>{i([])}),[i]),u=a.useCallback((t=>{let n=e;n=n.includes(t)?n.filter((e=>e!==t)):[...n,t],i(n)}),[i,e]);return{activeLanguages:a.useMemo((()=>[...null!=r?r:[],...e]),[r,e]),allSelected:e.length===l.length,selectAll:o,selectNone:s,toggleLanguage:u}}const T=p.default(u.Box)(e||(C=["\n  max-height: calc(100vh - 200px);\n"],k||(k=C.slice(0)),e=Object.freeze(Object.defineProperties(C,{raw:{value:Object.freeze(k)}}))));var C,k;function w(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]=a.useState(!1),{activeLanguages:c,allSelected:g,selectAll:p,selectNone:f,toggleLanguage:m}=L(),[x,j]=a.useState(null),[b,h]=a.useState(null),y=a.useCallback((e=>{"ALL"===e.currentTarget.value?p():f()}),[p,f]),v=a.useCallback((()=>i((e=>!e))),[]),O=a.useCallback((()=>i(!1)),[]);u.useClickOutside(O,[x,b]);const S=t.supportedLanguages.length,[C,k]=a.useState(""),w=a.useCallback((e=>{e.currentTarget.value?k(e.currentTarget.value):k("")}),[]),I=o.jsxs(T,{overflow:"auto",padding:1,children:[n.length>0&&o.jsx(u.Card,{radius:2,children:o.jsxs(u.Stack,{padding:2,space:3,children:[o.jsx(u.Box,{paddingBottom:2,children:o.jsxs(u.Text,{size:1,weight:"semibold",children:["Default language",n.length>1&&o.jsx(o.Fragment,{children:"s"})]})}),n.map((e=>o.jsx(u.Text,{children:e.title},e.id)))]})}),o.jsxs(u.Stack,{padding:1,space:1,children:[o.jsx(u.Button,{mode:"bleed",onClick:y,justify:"flex-start",value:g?"NONE":"ALL",disabled:!!C,children:o.jsxs(u.Flex,{gap:3,align:"center",children:[o.jsx(u.Text,{size:2,children:g?o.jsx(s.TextWithTone,{tone:"primary",children:o.jsx(d.EyeClosedIcon,{})}):o.jsx(d.EyeOpenIcon,{})}),o.jsx(u.Box,{flex:1,children:o.jsx(u.Text,{children:g?"Hide All":"Show All"})})]})}),o.jsx(u.Card,{borderTop:!0}),S>4?o.jsx(u.TextInput,{onChange:w,value:C,placeholder:"Filter languages"}):null,r.filter((e=>!C||e.title.toLowerCase().includes(C.toLowerCase()))).map((e=>o.jsx(P,{id:e.id,onToggle:m,selected:c.includes(e.id),title:e.title},e.id)))]})]}),F=c.length===S?"Showing all":"Showing ".concat(c.length," / ").concat(S);return o.jsx(u.Popover,{content:I,open:l,portal:!0,ref:h,children:o.jsx(u.Button,{text:F,icon:d.TranslateIcon,mode:"bleed",onClick:v,ref:j,selected:l})})}function P(e){const{id:t,onToggle:n,selected:r,title:l}=e,i=a.useCallback((()=>{n(t)}),[t,n]);return o.jsx(u.Button,{mode:"bleed",onClick:i,justify:"flex-start",children:o.jsxs(u.Flex,{gap:3,align:"center",children:[o.jsx(u.Text,{size:2,children:r?o.jsx(s.TextWithTone,{tone:"positive",children:o.jsx(d.CheckmarkCircleIcon,{})}):o.jsx(d.CircleIcon,{})}),o.jsx(u.Box,{flex:1,children:o.jsx(u.Text,{children:l})}),o.jsx(u.Badge,{children:t})]})})}const I=s.definePlugin((e=>{const t=()=>o.jsx(w,{options:e}),n=l(l({},y.options),e);return{name:"@sanity/language-filter",studio:{components:{layout:e=>function(e){const t=a.useMemo((()=>l(l({},y.options),e.options)),[e.options]),[n,r]=h(t);return o.jsx(v.Provider,{value:{options:t,selectedLanguageIds:n,setSelectedLanguageIds:r},children:e.renderDefault(e)})}(l(l({},e),{},{options:n}))}},document:{unstable_languageFilter:(n,r)=>{let{schemaType:l,schema:i}=r;return m(i.get(l),e)?[...n,t]:n}},form:{components:{input:e=>"root"!==e.id&&s.isObjectSchemaType(e.schemaType)?function(e){const{options:t}=O(),n=s.useFormValue(["_type"]),{documentTypes:r}=t;return"string"==typeof n&&r.includes(n)?o.jsx(S,l({},e)):e.renderDefault(e)}(e):e.renderDefault(e)}}}}));exports.defaultFilterField=f,exports.isLanguageFilterEnabled=m,exports.languageFilter=I,exports.useLanguageFilterStudioContext=O;//# 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.0",
   "description": "A Sanity plugin that supports filtering localized fields by language",
   "homepage": "https://github.com/sanity-io/language-filter#readme",
   "bugs": {

package/src/LanguageFilterMenuButton.tsx

@@ -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)
@@ -24,16 +42,13 @@ export function LanguageFilterMenuButton(props: LanguageFilterMenuButtonProps) {
     (l) => !options.defaultLanguages?.includes(l.id)
   )
   const [open, setOpen] = useState(false)
-  const {activeLanguages, allSelected, selectAll, selectNone, toggleLanguage} = usePaneLanguages({
-    options,
-    onSelectedIdsChange,
-  })
+  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,6 +65,18 @@ export function LanguageFilterMenuButton(props: LanguageFilterMenuButtonProps) {
 
   useClickOutside(handleClickOutside, [button, popover])
 
+  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" padding={1}>
       {defaultLanguages.length > 0 && (
@@ -68,56 +95,65 @@ export function LanguageFilterMenuButton(props: LanguageFilterMenuButtonProps) {
         </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} />
+      <Stack padding={1} space={1}>
+        <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}
@@ -140,13 +176,22 @@ function LanguageFilterOption(props: {
   }, [id, 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">
+      <Flex gap={3} align="center">
+        <Text size={2}>
+          {selected ? (
+            <TextWithTone tone="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,26 @@
 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'
 
-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 {selectedLanguageIds, setSelectedLanguageIds, options} = useLanguageFilterStudioContext()
   const {defaultLanguages} = options
 
-  const [selectedIds, setSelectedIds] = useSelectedLanguageIds(options)
-
   const selectableLanguages = useMemo(() => getSelectableLanguages(options), [options])
 
   const updateSelectedIds = useCallback(
     (ids: string[]) => {
-      setSelectedIds(ids)
+      setSelectedLanguageIds(ids)
       persistLanguageIds(ids)
-      onSelectedIdsChange(ids)
     },
-    [onSelectedIdsChange, setSelectedIds]
+    [setSelectedLanguageIds]
   )
 
   const selectAll = useCallback(
@@ -50,7 +34,7 @@ export function usePaneLanguages(props: UsePaneLanguagesParams): {
 
   const toggleLanguage = useCallback(
     (languageId: string) => {
-      let lang = selectedIds
+      let lang = selectedLanguageIds
 
       if (lang.includes(languageId)) {
         lang = lang.filter((l) => l !== languageId)
@@ -60,17 +44,17 @@ export function usePaneLanguages(props: UsePaneLanguagesParams): {
 
       updateSelectedIds(lang)
     },
-    [updateSelectedIds, selectedIds]
+    [updateSelectedIds, selectedLanguageIds]
   )
 
   const activeLanguages = useMemo(
-    () => [...(defaultLanguages ?? []), ...selectedIds],
-    [defaultLanguages, selectedIds]
+    () => [...(defaultLanguages ?? []), ...selectedLanguageIds],
+    [defaultLanguages, selectedLanguageIds]
   )
 
   return {
     activeLanguages,
-    allSelected: selectedIds.length === selectableLanguages.length,
+    allSelected: selectedLanguageIds.length === selectableLanguages.length,
     selectAll,
     selectNone,
     toggleLanguage,

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)
-}