@sanity/document-internationalization 2.0.0-studio-v3-plugin-v2.4 → 2.0.0-studio-v3-plugin-v2.6

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Simeon Griggs
+Copyright (c) 2023 Sanity.io
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/lib/{src/index.d.ts → index.d.ts}

@@ -15,6 +15,8 @@ declare type PluginConfig = {
   bulkPublish?: boolean
 }
 
-declare type SupportedLanguages = Language[] | ((client: SanityClient) => Promise<Language[]>)
+declare type SupportedLanguages =
+  | Language[]
+  | ((client: SanityClient) => Promise<Language[]>)
 
 export {}

package/lib/index.esm.js

@@ -1 +1,643 @@
-function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function t(t){for(var a=1;a<arguments.length;a++){var r=null!=arguments[a]?arguments[a]:{};a%2?e(Object(r),!0).forEach((function(e){n(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):e(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}function n(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 a=n.call(e,t||"default");if("object"!=typeof a)return a;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 a,jsxs as r,Fragment as i}from"react/jsx-runtime";import{defineType as o,defineField as l,useClient as s,useEditState as c,definePlugin as u}from"sanity";import{internationalizedArray as d}from"sanity-plugin-internationalized-array";import{useToast as p,Button as g,Flex as f,Spinner as m,Text as h,Box as y,Badge as v,useClickOutside as b,Card as T,Stack as _,Popover as O}from"@sanity/ui";import{TranslateIcon as j,SplitVerticalIcon as w,CheckmarkIcon as k,AddIcon as I,CogIcon as P,ChevronRightIcon as S}from"@sanity/icons";import x,{useCallback as C,useState as L}from"react";import{uuid as F}from"@sanity/uuid";import{usePaneRouter as A}from"sanity/desk";import{RouterContext as z}from"sanity/router";import{useListeningQuery as D}from"sanity-plugin-utils";const E="translation.metadata",M="2022-11-27";var N=e=>o({type:"document",name:E,title:"Translation metadata",icon:j,liveEdit:!0,fields:[l({name:"translations",type:"internationalizedArrayReference"}),l({name:"schemaTypes",description:"Used to filter the reference fields above so all translations share the same types.",type:"array",of:[{type:"string"}],options:{list:e},readOnly:e=>{let{value:t}=e;return Boolean(t)}})],preview:{select:{translations:"translations",documentSchemaTypes:"schemaTypes"},prepare(e){const{translations:t,documentSchemaTypes:n}=e,a=1===t.length?"1 Translation":"".concat(t.length," Translations"),r=t.length?t.map((e=>e._key.toUpperCase())).join(", "):"";return{title:a,subtitle:[r?"(".concat(r,")"):null,(null==n?void 0:n.length)?n.map((e=>e.toUpperCase())).join(", "):"No Schemas Defined"].filter(Boolean).join(" ")}}}});function V(e,t){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:(e,t)=>e===t;if(e===t)return!0;if(!e||!t)return!1;const a=e.length;if(t.length!==a)return!1;for(let r=0;r<a;r++)if(!n(e[r],t[r]))return!1;return!0}const $=[];const U=(e,t,n)=>function(e,t){let n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};for(const e of $)if(V(t,e.keys,e.equal)){if(n)return;if(Object.prototype.hasOwnProperty.call(e,"error"))throw e.error;if(Object.prototype.hasOwnProperty.call(e,"response"))return e.response;if(!n)throw e.promise}const r={keys:t,equal:a.equal,promise:e(...t).then((e=>r.response=e)).then((()=>{a.lifespan&&a.lifespan>0&&setTimeout((()=>{const e=$.indexOf(r);-1!==e&&$.splice(e,1)}),a.lifespan)})).catch((e=>r.error=e))};if($.push(r),!n)throw r.promise}(e,t,!1,n);function B(e,t){const n=x.useContext(z),{routerPanesState:a,groupIndex:r}=A();return x.useCallback((()=>{if(!n||!e||!t)return;const i=[...a];i.splice(r+1,0,[{id:e,params:{type:t}}]);const o=n.resolvePathFromState({panes:i});n.navigateUrl({path:o})}),[e,t,n,a,r])}function q(e,t,n){return{_key:e,value:{_type:"reference",_ref:t,_weak:!0,_strengthenOnPublish:{type:n}}}}function R(e){var n;const{apiVersion:i=M,index:o,language:l,languageField:c,schemaType:u,documentId:d,disabled:b,current:T,sourceId:_,sourceLanguageId:O,metadata:j,translation:P}=e,S=s({apiVersion:i}),x=p(),L=B(null==(n=null==P?void 0:P.value)?void 0:n._ref,u),A=C((()=>L()),[L]),z=C((async()=>{var e;const n=Boolean(null==j?void 0:j._id),a=S.transaction(),r=d.startsWith("drafts.")?[d,d.replace("drafts.","")]:[d,"drafts.".concat(d)],i=t(t({},await S.fetch("*[_id in $ids]|order(_updatedAt desc)[0]",{ids:r})),{},{_id:"drafts.".concat(F()),[c]:l.id});a.create(i);const s=null!=(e=null==j?void 0:j._id)?e:F(),p=q(l.id,i._id.replace("drafts.",""),u);if(n){const e="translations[".concat(o-1,"]"),t=S.patch(s).setIfMissing({translations:[]}).insert("before",e,[p]);a.patch(t)}else{const e=O?q(O,_,u):null;a.createIfNotExists({_id:s,_type:E,schemaTypes:[u],translations:[p,e].filter(Boolean)})}a.commit().then((()=>x.push({status:"success",title:"Created ".concat(l.title," translation"),description:n?"Updated Translations Metadata":"Created Translations Metadata"}))).catch((e=>(console.error(e),x.push({status:"error",title:"Error creating translation",description:e.message}))))}),[S,d,o,l,c,null==j?void 0:j._id,u,_,O,x]);return a(g,{onClick:P?A:z,mode:T?"default":"bleed",disabled:b||T,children:r(f,{gap:3,align:"center",children:[b?a(m,{}):a(h,{size:2,children:a(P?w:T?k:I,{})}),a(y,{flex:1,children:a(h,{children:l.title})}),a(v,{tone:b||T?"default":"primary",children:l.id})]})})}function W(e){const{id:t}=e,n=B(t,E);return a(g,{disabled:!t,mode:"ghost",text:"Manage Translations",icon:P,onClick:()=>n()})}function G(e){const{apiVersion:t=M,language:n,languageField:r,documentId:i,schemaType:o,source:l,disabled:c=!1}=e,u=s({apiVersion:t}),d=p(),f=x.useCallback((()=>{const e=l?l._id:"draft.".concat(i),t=u.transaction();l||t.createIfNotExists({_id:e,_type:o});const a=u.patch(e).set({[r]:n.id});t.patch(a),t.commit().then((()=>{d.push({title:"Set document language to ".concat(n.title),status:"success"})})).catch((e=>(console.error(e),d.push({title:"Failed to set document language to ".concat(n.title),status:"error"}))))}),[l,i,u,r,n,o,d]);return a(g,{mode:"ghost",text:n.title,icon:S,onClick:()=>f(),disabled:c,justify:"flex-start"})}function H(e){const{apiVersion:t=M,schemaType:n,documentId:o,languageField:l}=e,u=s({apiVersion:t}),d=Array.isArray(e.supportedLanguages)?e.supportedLanguages:U((async()=>"function"==typeof e.supportedLanguages?e.supportedLanguages(u):e.supportedLanguages),[]),[p,f]=L(!1),m=C((()=>f((e=>!e))),[]),[v,w]=L(null),[k,I]=L(null),P=C((()=>f(!1)),[]);b(P,[v,k]);const{data:S,loading:F,error:A}=function(e,t){const{data:n,loading:a,error:r}=D("*[_type == $translationSchema && $id in translations[].value._ref][0]",{params:{id:e,translationSchema:E}});return{data:n,loading:a,error:r}}(o),{draft:z,published:N}=c(o,n),V=z||N,$=null==V?void 0:V[l],B=d.some((e=>e.id===$)),q=x.useMemo((()=>{const e=d.every((e=>e.id&&e.title));return e||console.warn('Not all languages are valid. It should be an array of objects with an "id" and "title" property. Or a function that returns an array of objects with an "id" and "title" property.',d),e}),[d]),H=a(y,{overflow:"auto",children:A?a(T,{tone:"critical",padding:2,children:r(h,{children:["Error: ",A]})}):r(_,{padding:1,space:1,children:[d.length>0?r(i,{children:[d.map(((e,t)=>{var r;return!F&&$&&B?a(R,{index:t,language:e,languageField:l,schemaType:n,documentId:o,disabled:F||!q,current:e.id===$,metadata:S,sourceId:o,sourceLanguageId:$,translation:null==S?void 0:S.translations.find((t=>t._key===e.id))},e.id||e.title||"lang-".concat(t)):a(G,{languageField:l,source:V,documentId:o,schemaType:n,language:e,disabled:null!=(r=!q||(null==S?void 0:S.translations.filter((e=>{var t;return(null==(t=null==e?void 0:e.value)?void 0:t._ref)!==o})).some((t=>t._key===e.id))))&&r},e.id||e.title||"lang-".concat(t))})),F?null:r(i,{children:[q?null:a(T,{tone:"caution",padding:3,children:a(h,{size:1,children:"Not all language objects are valid. See the console."})}),$?null:a(T,{tone:"caution",padding:3,children:r(h,{size:1,children:["Choose a language to ",a("br",{}),"apply to ",a("strong",{children:"this Document"})]})}),$&&!B?a(T,{tone:"caution",padding:3,children:r(h,{size:1,children:["Change the current language value ",a("code",{children:$}),a("br",{}),"to one of the supported languages"]})}):null]})]}):null,a(W,{id:null==S?void 0:S._id})]})});return a(O,{constrainSize:!0,content:H,open:p,portal:!0,ref:I,children:a(g,{text:"Translations",mode:"bleed",disabled:!V,tone:!V||!F&&$&&B?void 0:"caution",icon:j,onClick:m,ref:w,selected:p})})}const J={supportedLanguages:[],schemaTypes:[],languageField:"language",bulkPublish:!1},K=u((e=>{const{supportedLanguages:n,schemaTypes:r,languageField:i,bulkPublish:o}=t(t({},J),e);return{name:"@sanity/document-internationalization",form:{components:{input:e=>o&&"root"===e.id&&e.schemaType.name===E?a(_,{space:5,children:e.renderDefault(e)}):e.renderDefault(e)}},document:{unstable_languageFilter:(e,t)=>{const{schemaType:o,documentId:l}=t;return r.includes(o)?[...e,()=>((e,t)=>a(H,{supportedLanguages:n,schemaType:e,documentId:null!=t?t:"",languageField:i}))(o,l)]:e},badges:(e,t)=>{let{schemaType:a}=t;return r.includes(a)?[e=>function(e,t,n){var a,r;const i=(null==e?void 0:e.draft)||(null==e?void 0:e.published),o=null==i?void 0:i[n];if(!o)return null;const l=Array.isArray(t)?t.find((e=>e.id===o)):null;return{label:null!=(a=null==l?void 0:l.id)?a:String(o),title:null!=(r=null==l?void 0:l.title)?r:void 0,color:"primary"}}(e,n,i),...e]:e}},schema:{types:[N(r)],templates:(e,t)=>{let{schema:a}=t;if(!Array.isArray(n))return e;const o=r.map((e=>{var t,n;return{id:"".concat(e,"-parameterized"),title:"".concat(null!=(n=null==(t=null==a?void 0:a.get(e))?void 0:t.title)?n:e,": with Language"),schemaType:e,parameters:[{name:"languageId",title:"Language ID",type:"string"}],value:e=>{let{languageId:t}=e;return{[i]:t}}}})),l=r.flatMap((e=>n.map((t=>{var n,r;return{id:"".concat(e,"-").concat(t.id),title:"".concat(t.title," ").concat(null!=(r=null==(n=null==a?void 0:a.get(e))?void 0:n.title)?r:e),schemaType:e,value:{[i]:t.id}}}))));return[...e,...o,...l]}},plugins:[d({languages:n,fieldTypes:[l({name:"reference",type:"reference",to:r.map((e=>({type:e}))),options:{collapsed:!1,filter:e=>{let{parent:t,document:n}=e;if(!t)return null;const a=(Array.isArray(t)?t:[t]).find((e=>e._key));return(null==a?void 0:a._key)?n.schemaTypes?{filter:"_type in $schemaTypes && ".concat(i," == $language"),params:{schemaTypes:n.schemaTypes,language:a._key}}:{filter:"".concat(i," == $language"),params:{language:a._key}}:null}}},{strict:!1})]})]}}));export{K as documentInternationalization};//# sourceMappingURL=index.esm.js.map
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { defineType, defineField, useClient, useEditState, definePlugin } from 'sanity';
+import { internationalizedArray } from 'sanity-plugin-internationalized-array';
+import { useToast, Button, Flex, Spinner, Text, Box, Badge, useClickOutside, Card, Stack, Popover } from '@sanity/ui';
+import { TranslateIcon, SplitVerticalIcon, CheckmarkIcon, AddIcon, CogIcon, ChevronRightIcon } from '@sanity/icons';
+import React, { useCallback, useState } from 'react';
+import { uuid } from '@sanity/uuid';
+import { usePaneRouter } from 'sanity/desk';
+import { RouterContext } from 'sanity/router';
+import { useListeningQuery } from 'sanity-plugin-utils';
+const METADATA_SCHEMA_NAME = "translation.metadata";
+const API_VERSION = "2022-11-27";
+var metadata = schemaTypes => defineType({
+  type: "document",
+  name: METADATA_SCHEMA_NAME,
+  title: "Translation metadata",
+  icon: TranslateIcon,
+  liveEdit: true,
+  fields: [defineField({
+    name: "translations",
+    type: "internationalizedArrayReference"
+  }), defineField({
+    name: "schemaTypes",
+    description: "Used to filter the reference fields above so all translations share the same types.",
+    type: "array",
+    // For some reason TS dislikes this line because of the DocumentDefinition return type
+    // @ts-expect-error
+    of: [{
+      type: "string"
+    }],
+    options: {
+      list: schemaTypes
+    },
+    readOnly: _ref => {
+      let {
+        value
+      } = _ref;
+      return Boolean(value);
+    }
+  })],
+  preview: {
+    select: {
+      translations: "translations",
+      documentSchemaTypes: "schemaTypes"
+    },
+    prepare(selection) {
+      const {
+        translations,
+        documentSchemaTypes
+      } = selection;
+      const title = translations.length === 1 ? "1 Translation" : "".concat(translations.length, " Translations");
+      const languageKeys = translations.length ? translations.map(t => t._key.toUpperCase()).join(", ") : "";
+      const subtitle = [languageKeys ? "(".concat(languageKeys, ")") : null, (documentSchemaTypes == null ? void 0 : documentSchemaTypes.length) ? documentSchemaTypes.map(s => s.toUpperCase()).join(", ") : "No Schemas Defined"].filter(Boolean).join(" ");
+      return {
+        title,
+        subtitle
+      };
+    }
+  }
+});
+function shallowEqualArrays(arrA, arrB) {
+  let equal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : (a, b) => a === b;
+  if (arrA === arrB) return true;
+  if (!arrA || !arrB) return false;
+  const len = arrA.length;
+  if (arrB.length !== len) return false;
+  for (let i = 0; i < len; i++) if (!equal(arrA[i], arrB[i])) return false;
+  return true;
+}
+const globalCache = [];
+function query(fn, keys) {
+  let preload = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  let config = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  for (const entry of globalCache) {
+    // Find a match
+    if (shallowEqualArrays(keys, entry.keys, entry.equal)) {
+      // If we're pre-loading and the element is present, just return
+      if (preload) return undefined; // If an error occurred, throw
+
+      if (Object.prototype.hasOwnProperty.call(entry, 'error')) throw entry.error; // If a response was successful, return
+
+      if (Object.prototype.hasOwnProperty.call(entry, 'response')) return entry.response; // If the promise is still unresolved, throw
+
+      if (!preload) throw entry.promise;
+    }
+  } // The request is new or has changed.
+
+  const entry = {
+    keys,
+    equal: config.equal,
+    promise:
+    // Execute the promise
+    fn(...keys) // When it resolves, store its value
+    .then(response => entry.response = response) // Remove the entry if a lifespan was given
+    .then(() => {
+      if (config.lifespan && config.lifespan > 0) {
+        setTimeout(() => {
+          const index = globalCache.indexOf(entry);
+          if (index !== -1) globalCache.splice(index, 1);
+        }, config.lifespan);
+      }
+    }) // Store caught errors, they will be thrown in the render-phase to bubble into an error-bound
+    .catch(error => entry.error = error)
+  }; // Register the entry
+
+  globalCache.push(entry); // And throw the promise, this yields control back to React
+
+  if (!preload) throw entry.promise;
+  return undefined;
+}
+const suspend = (fn, keys, config) => query(fn, keys, false, config);
+function useOpenInNewPane(id, type) {
+  const routerContext = React.useContext(RouterContext);
+  const {
+    routerPanesState,
+    groupIndex
+  } = usePaneRouter();
+  const openInNewPane = React.useCallback(() => {
+    if (!routerContext || !id || !type) {
+      return;
+    }
+    const panes = [...routerPanesState];
+    panes.splice(groupIndex + 1, 0, [{
+      id,
+      params: {
+        type
+      }
+    }]);
+    const href = routerContext.resolvePathFromState({
+      panes
+    });
+    routerContext.navigateUrl({
+      path: href
+    });
+  }, [id, type, routerContext, routerPanesState, groupIndex]);
+  return openInNewPane;
+}
+function createReference(key, ref, type) {
+  return {
+    _key: key,
+    value: {
+      _type: "reference",
+      _ref: ref,
+      _weak: true,
+      _strengthenOnPublish: {
+        type
+      }
+    }
+  };
+}
+function LanguageOption(props) {
+  var _a;
+  const {
+    apiVersion = API_VERSION,
+    index,
+    language,
+    languageField,
+    schemaType,
+    documentId,
+    disabled,
+    current,
+    sourceId,
+    sourceLanguageId,
+    metadata,
+    translation
+  } = props;
+  const client = useClient({
+    apiVersion
+  });
+  const toast = useToast();
+  const open = useOpenInNewPane((_a = translation == null ? void 0 : translation.value) == null ? void 0 : _a._ref, schemaType);
+  const handleOpen = useCallback(() => open(), [open]);
+  const handleCreate = useCallback(async () => {
+    var _a2;
+    const metadataExists = Boolean(metadata == null ? void 0 : metadata._id);
+    const transaction = client.transaction();
+    const documentIds = documentId.startsWith("drafts.") ? [documentId, documentId.replace("drafts.", "")] : [documentId, "drafts.".concat(documentId)];
+    const latestDocument = await client.fetch("*[_id in $ids]|order(_updatedAt desc)[0]", {
+      ids: documentIds
+    });
+    const newTranslationDocument = {
+      ...latestDocument,
+      _id: "drafts.".concat(uuid()),
+      [languageField]: language.id
+    };
+    transaction.create(newTranslationDocument);
+    const metadataId = (_a2 = metadata == null ? void 0 : metadata._id) != null ? _a2 : uuid();
+    const newTranslationReference = createReference(language.id, newTranslationDocument._id.replace("drafts.", ""), schemaType);
+    if (metadataExists) {
+      const path = "translations[".concat(index - 1, "]");
+      const metadataPatch = client.patch(metadataId).setIfMissing({
+        translations: []
+      }).insert("before", path, [newTranslationReference]);
+      transaction.patch(metadataPatch);
+    } else {
+      const sourceReference = sourceLanguageId ? createReference(sourceLanguageId, sourceId, schemaType) : null;
+      transaction.createIfNotExists({
+        _id: metadataId,
+        _type: METADATA_SCHEMA_NAME,
+        schemaTypes: [schemaType],
+        translations: [newTranslationReference, sourceReference].filter(Boolean)
+      });
+    }
+    transaction.commit().then(() => {
+      return toast.push({
+        status: "success",
+        title: "Created ".concat(language.title, " translation"),
+        description: metadataExists ? "Updated Translations Metadata" : "Created Translations Metadata"
+      });
+    }).catch(err => {
+      console.error(err);
+      return toast.push({
+        status: "error",
+        title: "Error creating translation",
+        description: err.message
+      });
+    });
+  }, [client, documentId, index, language, languageField, metadata == null ? void 0 : metadata._id, schemaType, sourceId, sourceLanguageId, toast]);
+  return /* @__PURE__ */jsx(Button, {
+    onClick: translation ? handleOpen : handleCreate,
+    mode: current ? "default" : "bleed",
+    disabled: disabled || current,
+    children: /* @__PURE__ */jsxs(Flex, {
+      gap: 3,
+      align: "center",
+      children: [disabled ? /* @__PURE__ */jsx(Spinner, {}) : /* @__PURE__ */jsx(Text, {
+        size: 2,
+        children: translation ? /* @__PURE__ */jsx(SplitVerticalIcon, {}) : current ? /* @__PURE__ */jsx(CheckmarkIcon, {}) : /* @__PURE__ */jsx(AddIcon, {})
+      }), /* @__PURE__ */jsx(Box, {
+        flex: 1,
+        children: /* @__PURE__ */jsx(Text, {
+          children: language.title
+        })
+      }), /* @__PURE__ */jsx(Badge, {
+        tone: disabled || current ? "default" : "primary",
+        children: language.id
+      })]
+    })
+  });
+}
+function useTranslationMetadata(id, schemaType) {
+  const query = "*[_type == $translationSchema && $id in translations[].value._ref][0]";
+  const {
+    data,
+    loading,
+    error
+  } = useListeningQuery(query, {
+    params: {
+      id,
+      translationSchema: METADATA_SCHEMA_NAME
+    }
+  });
+  return {
+    data,
+    loading,
+    error
+  };
+}
+function LanguageManage(props) {
+  const {
+    id
+  } = props;
+  const open = useOpenInNewPane(id, METADATA_SCHEMA_NAME);
+  return /* @__PURE__ */jsx(Button, {
+    disabled: !id,
+    mode: "ghost",
+    text: "Manage Translations",
+    icon: CogIcon,
+    onClick: () => open()
+  });
+}
+function LanguagePatch(props) {
+  const {
+    apiVersion = API_VERSION,
+    language,
+    languageField,
+    documentId,
+    schemaType,
+    source,
+    disabled = false
+  } = props;
+  const client = useClient({
+    apiVersion
+  });
+  const toast = useToast();
+  const handleClick = React.useCallback(() => {
+    const currentId = source ? source._id : "draft.".concat(documentId);
+    const transaction = client.transaction();
+    if (!source) {
+      transaction.createIfNotExists({
+        _id: currentId,
+        _type: schemaType
+      });
+    }
+    const patch = client.patch(currentId).set({
+      [languageField]: language.id
+    });
+    transaction.patch(patch);
+    transaction.commit().then(() => {
+      toast.push({
+        title: "Set document language to ".concat(language.title),
+        status: "success"
+      });
+    }).catch(err => {
+      console.error(err);
+      return toast.push({
+        title: "Failed to set document language to ".concat(language.title),
+        status: "error"
+      });
+    });
+  }, [source, documentId, client, languageField, language, schemaType, toast]);
+  return /* @__PURE__ */jsx(Button, {
+    mode: "ghost",
+    text: language.title,
+    icon: ChevronRightIcon,
+    onClick: () => handleClick(),
+    disabled,
+    justify: "flex-start"
+  });
+}
+function MenuButton(props) {
+  const {
+    apiVersion = API_VERSION,
+    schemaType,
+    documentId,
+    languageField
+  } = props;
+  const client = useClient({
+    apiVersion
+  });
+  const supportedLanguages = Array.isArray(props.supportedLanguages) ? props.supportedLanguages :
+  // eslint-disable-next-line require-await
+  suspend(async () => {
+    if (typeof props.supportedLanguages === "function") {
+      return props.supportedLanguages(client);
+    }
+    return props.supportedLanguages;
+  }, []);
+  const [open, setOpen] = useState(false);
+  const handleClick = useCallback(() => setOpen(o => !o), []);
+  const [button, setButton] = useState(null);
+  const [popover, setPopover] = useState(null);
+  const handleClickOutside = useCallback(() => setOpen(false), []);
+  useClickOutside(handleClickOutside, [button, popover]);
+  const {
+    data: metadata,
+    loading,
+    error
+  } = useTranslationMetadata(documentId);
+  const {
+    draft,
+    published
+  } = useEditState(documentId, schemaType);
+  const source = draft || published;
+  const sourceLanguageId = source == null ? void 0 : source[languageField];
+  const sourceLanguageIsValid = supportedLanguages.some(l => l.id === sourceLanguageId);
+  const allLanguagesAreValid = React.useMemo(() => {
+    const valid = supportedLanguages.every(l => l.id && l.title);
+    if (!valid) {
+      console.warn("Not all languages are valid. It should be an array of objects with an \"id\" and \"title\" property. Or a function that returns an array of objects with an \"id\" and \"title\" property.", supportedLanguages);
+    }
+    return valid;
+  }, [supportedLanguages]);
+  const content = /* @__PURE__ */jsx(Box, {
+    children: error ? /* @__PURE__ */jsx(Card, {
+      tone: "critical",
+      padding: 2,
+      children: /* @__PURE__ */jsxs(Text, {
+        children: ["Error: ", error]
+      })
+    }) : /* @__PURE__ */jsxs(Stack, {
+      padding: 1,
+      space: 1,
+      children: [supportedLanguages.length > 0 ? /* @__PURE__ */jsxs(Fragment, {
+        children: [supportedLanguages.map((language, langIndex) => {
+          var _a;
+          return !loading && sourceLanguageId && sourceLanguageIsValid ?
+          // Button to duplicate this document to a new translation
+          // And either create or update the metadata document
+          /* @__PURE__ */
+          jsx(LanguageOption, {
+            index: langIndex,
+            language,
+            languageField,
+            schemaType,
+            documentId,
+            disabled: loading || !allLanguagesAreValid,
+            current: language.id === sourceLanguageId,
+            metadata,
+            sourceId: documentId,
+            sourceLanguageId,
+            translation: metadata == null ? void 0 : metadata.translations.find(t => t._key === language.id)
+          }, language.id || language.title || "lang-".concat(langIndex)) :
+          // Button to set a language field on *this* document
+          /* @__PURE__ */
+          jsx(LanguagePatch, {
+            languageField,
+            source,
+            documentId,
+            schemaType,
+            language,
+            disabled: (_a = !allLanguagesAreValid || (metadata == null ? void 0 : metadata.translations.filter(t => {
+              var _a2;
+              return ((_a2 = t == null ? void 0 : t.value) == null ? void 0 : _a2._ref) !== documentId;
+            }).some(t => t._key === language.id))) != null ? _a : false
+          }, language.id || language.title || "lang-".concat(langIndex));
+        }), loading ? null : /* @__PURE__ */jsxs(Fragment, {
+          children: [allLanguagesAreValid ? null : /* @__PURE__ */jsx(Card, {
+            tone: "caution",
+            padding: 3,
+            children: /* @__PURE__ */jsx(Text, {
+              size: 1,
+              children: "Not all language objects are valid. See the console."
+            })
+          }), sourceLanguageId ? null : /* @__PURE__ */jsx(Card, {
+            tone: "caution",
+            padding: 3,
+            children: /* @__PURE__ */jsxs(Text, {
+              size: 1,
+              children: ["Choose a language to ", /* @__PURE__ */jsx("br", {}), "apply to ", /* @__PURE__ */jsx("strong", {
+                children: "this Document"
+              })]
+            })
+          }), sourceLanguageId && !sourceLanguageIsValid ? /* @__PURE__ */jsx(Card, {
+            tone: "caution",
+            padding: 3,
+            children: /* @__PURE__ */jsxs(Text, {
+              size: 1,
+              children: ["Change the current language value ", /* @__PURE__ */jsx("code", {
+                children: sourceLanguageId
+              }), /* @__PURE__ */jsx("br", {}), "to one of the supported languages"]
+            })
+          }) : null]
+        })]
+      }) : null, /* @__PURE__ */jsx(LanguageManage, {
+        id: metadata == null ? void 0 : metadata._id
+      })]
+    })
+  });
+  return /* @__PURE__ */jsx(Popover, {
+    constrainSize: true,
+    content,
+    open,
+    portal: true,
+    ref: setPopover,
+    overflow: "auto",
+    children: /* @__PURE__ */jsx(Button, {
+      text: "Translations",
+      mode: "bleed",
+      disabled: !source,
+      tone: !source || !loading && sourceLanguageId && sourceLanguageIsValid ? void 0 : "caution",
+      icon: TranslateIcon,
+      onClick: handleClick,
+      ref: setButton,
+      selected: open
+    })
+  });
+}
+function LanguageBadge(props, supportedLanguages, languageField) {
+  var _a, _b;
+  const source = (props == null ? void 0 : props.draft) || (props == null ? void 0 : props.published);
+  const languageId = source == null ? void 0 : source[languageField];
+  if (!languageId) {
+    return null;
+  }
+  const language = Array.isArray(supportedLanguages) ? supportedLanguages.find(l => l.id === languageId) : null;
+  return {
+    label: (_a = language == null ? void 0 : language.id) != null ? _a : String(languageId),
+    title: (_b = language == null ? void 0 : language.title) != null ? _b : void 0,
+    color: "primary"
+  };
+}
+const DEFAULT_CONFIG = {
+  supportedLanguages: [],
+  schemaTypes: [],
+  languageField: "language",
+  bulkPublish: false
+};
+const documentInternationalization = definePlugin(config => {
+  const {
+    supportedLanguages,
+    schemaTypes,
+    languageField,
+    bulkPublish
+  } = {
+    ...DEFAULT_CONFIG,
+    ...config
+  };
+  const renderLanguageFilter = (schemaType, documentId) => {
+    return /* @__PURE__ */jsx(MenuButton, {
+      supportedLanguages,
+      schemaType,
+      documentId: documentId != null ? documentId : "",
+      languageField
+    });
+  };
+  return {
+    name: "@sanity/document-internationalization",
+    // Adds:
+    // - A bulk-publishing UI component to the form
+    // - Will only work for projects on a compatible plan
+    form: {
+      components: {
+        input: props => {
+          if (bulkPublish && props.id === "root" && props.schemaType.name === METADATA_SCHEMA_NAME) {
+            return /* @__PURE__ */jsx(Stack, {
+              space: 5,
+              children: props.renderDefault(props)
+            });
+          }
+          return props.renderDefault(props);
+        }
+      }
+    },
+    // Adds:
+    // - The `Translations` dropdown to the editing form
+    // - `Badges` to documents with a language value
+    document: {
+      unstable_languageFilter: (prev, ctx) => {
+        const {
+          schemaType,
+          documentId
+        } = ctx;
+        return schemaTypes.includes(schemaType) ? [...prev, () => renderLanguageFilter(schemaType, documentId)] : prev;
+      },
+      badges: (prev, _ref2) => {
+        let {
+          schemaType
+        } = _ref2;
+        if (!schemaTypes.includes(schemaType)) {
+          return prev;
+        }
+        return [props => LanguageBadge(props, supportedLanguages, languageField), ...prev];
+      }
+    },
+    // Adds:
+    // - The `Translations metadata` document type to the schema
+    schema: {
+      // Create the metadata document type
+      types: [metadata(schemaTypes)],
+      // For every schema type this plugin is enabled on
+      // Create an initial value template to set the language
+      templates: (prev, _ref3) => {
+        let {
+          schema
+        } = _ref3;
+        if (!Array.isArray(supportedLanguages)) {
+          return prev;
+        }
+        const parameterizedTemplates = schemaTypes.map(schemaType => {
+          var _a, _b;
+          return {
+            id: "".concat(schemaType, "-parameterized"),
+            title: "".concat((_b = (_a = schema == null ? void 0 : schema.get(schemaType)) == null ? void 0 : _a.title) != null ? _b : schemaType, ": with Language"),
+            schemaType,
+            parameters: [{
+              name: "languageId",
+              title: "Language ID",
+              type: "string"
+            }],
+            value: _ref4 => {
+              let {
+                languageId
+              } = _ref4;
+              return {
+                [languageField]: languageId
+              };
+            }
+          };
+        });
+        const staticTemplates = schemaTypes.flatMap(schemaType => {
+          return supportedLanguages.map(language => {
+            var _a, _b;
+            return {
+              id: "".concat(schemaType, "-").concat(language.id),
+              title: "".concat(language.title, " ").concat((_b = (_a = schema == null ? void 0 : schema.get(schemaType)) == null ? void 0 : _a.title) != null ? _b : schemaType),
+              schemaType,
+              value: {
+                [languageField]: language.id
+              }
+            };
+          });
+        });
+        return [...prev, ...parameterizedTemplates, ...staticTemplates];
+      }
+    },
+    // Uses:
+    // - `sanity-plugin-internationalized-array` to maintain the translations array
+    plugins: [
+    // Translation metadata stores its references using this plugin
+    // It cuts down on attribute usage and gives UI conveniences to add new translations
+    internationalizedArray({
+      languages: supportedLanguages,
+      fieldTypes: [
+      // TODO: The plugin should allow this kind of input
+      // @ts-ignore
+      defineField({
+        name: "reference",
+        type: "reference",
+        to: schemaTypes.map(type => ({
+          type
+        })),
+        // TODO: Add a validation rule to *ensure* the document's language matches the array key
+        // Reference filters don't actually enforce validation!
+        // validation: (Rule) => Rule.custom(),
+        options: {
+          collapsed: false,
+          // TODO: Update type once it knows the values of this filter
+          // @ts-ignore
+          filter: _ref5 => {
+            let {
+              parent,
+              document
+            } = _ref5;
+            if (!parent) return null;
+            const parentArray = Array.isArray(parent) ? parent : [parent];
+            const language = parentArray.find(p => p._key);
+            if (!(language == null ? void 0 : language._key)) return null;
+            if (document.schemaTypes) {
+              return {
+                filter: "_type in $schemaTypes && ".concat(languageField, " == $language"),
+                params: {
+                  schemaTypes: document.schemaTypes,
+                  language: language._key
+                }
+              };
+            }
+            return {
+              filter: "".concat(languageField, " == $language"),
+              params: {
+                language: language._key
+              }
+            };
+          }
+        }
+      }, {
+        strict: false
+      })]
+    })]
+  };
+});
+export { documentInternationalization };
+//# sourceMappingURL=index.esm.js.map