payload-intl 1.1.2 → 1.2.0

package/dist/components/MessagesForm.js

@@ -1,117 +1,131 @@
-"use client";
-import { jsx as t, jsxs as o } from "react/jsx-runtime";
-import { useStepNav as x, Button as M, toast as d } from "@payloadcms/ui";
-import { isEqual as y } from "lodash-es";
-import { useEffect as j, useState as w } from "react";
-import { useForm as T } from "react-hook-form";
-import { MessagesFormProvider as E } from "../context/messages-form.js";
-import { cn as p } from "../utils/cn.js";
-import { getErrorMessage as F } from "../utils/error-handling.js";
-import { JsonImport as C } from "./actions/JsonImport.js";
-import { MessageField as O } from "./layout/MessageField.js";
-import { MessagesTabs as I } from "./layout/MessagesTabs.js";
-import { MessagesTree as g } from "./layout/MessagesTree.js";
-function H({
-  locales: u,
-  schema: a,
-  tabs: m = !1,
-  values: l,
-  endpointUrl: b
-}) {
-  const { setStepNav: f } = x();
-  j(() => {
-    f([{ label: "Intl Messages", url: "/intl" }]);
-  }, [f]);
-  const i = T({
-    defaultValues: l,
-    reValidateMode: "onChange"
-  }), [c, v] = w(Object.keys(a)[0]), N = async (e) => {
-    const r = d.loading("Saving..."), S = Object.entries(e).reduce((s, [n, h]) => (y(h, l[n]) || (s[n] = h), s), {});
-    try {
-      const s = await fetch(b, {
-        method: "PUT",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify(S)
-      });
-      if (!s.ok) {
-        const n = await F(s);
-        throw new Error(n);
-      }
-      i.reset(e), d.success("Saved", { id: r });
-    } catch (s) {
-      d.error(
-        `Failed to save: ${s instanceof Error ? s.message : "Unknown error"}`,
-        { id: r }
-      );
-    }
-  };
-  return /* @__PURE__ */ t(E, { form: i, locales: u, children: /* @__PURE__ */ o(
-    "form",
-    {
-      className: "flex h-[calc(100vh-var(--app-header-height))] flex-col",
-      onSubmit: i.handleSubmit(N),
-      children: [
-        /* @__PURE__ */ o("div", { className: "sticky top-0 z-10 bg-background", children: [
-          /* @__PURE__ */ o("header", { className: "mb-6 flex items-center justify-between gap-4", children: [
-            /* @__PURE__ */ t("h1", { className: "text-4xl", children: "Messages" }),
-            /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ t(C, {}),
-              /* @__PURE__ */ t(
-                M,
-                {
-                  className: "my-0",
-                  disabled: !i.formState.isDirty,
-                  type: "submit",
-                  children: "Save"
-                }
-              )
-            ] })
-          ] }),
-          m && /* @__PURE__ */ t(
-            I,
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, toast, useStepNav } from '@payloadcms/ui';
+import { isEqual } from 'lodash-es';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { MessagesFormProvider } from '../components/MessageFormContext';
+import { getErrorMessage } from '../utils/error-handling';
+import { JsonImport } from './actions/JsonImport';
+import { MessageField } from './layout/MessageField';
+import { MessagesTabs } from './layout/MessagesTabs';
+import { MessagesTree } from './layout/MessagesTree';
+import styles from './MessagesForm.module.css';
+export function MessagesForm({ locales, schema, tabs = false, values, endpointUrl }) {
+    const { setStepNav } = useStepNav();
+    useEffect(()=>{
+        setStepNav([
             {
-              activeTab: c,
-              schema: a,
-              setActiveTab: v
+                label: 'Intl Messages',
+                url: '/intl'
             }
-          )
-        ] }),
-        /* @__PURE__ */ o(
-          "div",
-          {
-            className: "min-h-0 overflow-y-auto pt-8 pb-16",
-            id: "messages-form-content",
-            children: [
-              !m && /* @__PURE__ */ t(g, { nestingLevel: 0, path: "", schema: a }),
-              m && Object.entries(a).map(([e, r]) => typeof r == "string" ? /* @__PURE__ */ t(
-                O,
-                {
-                  className: p({ hidden: c !== e }),
-                  messageKey: e,
-                  path: e,
-                  schema: r
-                },
-                e
-              ) : /* @__PURE__ */ t(
-                g,
-                {
-                  className: p({ hidden: c !== e }),
-                  nestingLevel: 0,
-                  path: e,
-                  schema: r
+        ]);
+    }, [
+        setStepNav
+    ]);
+    const form = useForm({
+        defaultValues: values,
+        reValidateMode: 'onChange'
+    });
+    const [activeTab, setActiveTab] = useState(Object.keys(schema)[0]);
+    const handleSubmit = async (currentValues)=>{
+        const toastId = toast.loading('Saving...');
+        const changes = Object.entries(currentValues).reduce((acc, [locale, value])=>{
+            const hasChanged = !isEqual(value, values[locale]);
+            if (!hasChanged) return acc;
+            acc[locale] = value;
+            return acc;
+        }, {});
+        try {
+            const response = await fetch(endpointUrl, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json'
                 },
-                e
-              ))
+                body: JSON.stringify(changes)
+            });
+            if (!response.ok) {
+                const error = await getErrorMessage(response);
+                throw new Error(error);
+            }
+            form.reset(currentValues);
+            toast.success('Saved', {
+                id: toastId
+            });
+        } catch (error) {
+            toast.error(`Failed to save: ${error instanceof Error ? error.message : 'Unknown error'}`, {
+                id: toastId
+            });
+        }
+    };
+    return /*#__PURE__*/ _jsx(MessagesFormProvider, {
+        form: form,
+        locales: locales,
+        children: /*#__PURE__*/ _jsxs("form", {
+            className: styles.form,
+            onSubmit: form.handleSubmit(handleSubmit),
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: styles.stickyHeader,
+                    children: [
+                        /*#__PURE__*/ _jsxs("header", {
+                            className: styles.header,
+                            children: [
+                                /*#__PURE__*/ _jsx("h1", {
+                                    className: styles.title,
+                                    children: "Messages"
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: styles.actions,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(JsonImport, {}),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            className: styles.saveButton,
+                                            disabled: !form.formState.isDirty,
+                                            type: "submit",
+                                            children: "Save"
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        tabs && /*#__PURE__*/ _jsx(MessagesTabs, {
+                            activeTab: activeTab,
+                            schema: schema,
+                            setActiveTab: setActiveTab
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: styles.content,
+                    id: "messages-form-content",
+                    children: [
+                        !tabs && /*#__PURE__*/ _jsx(MessagesTree, {
+                            nestingLevel: 0,
+                            path: "",
+                            schema: schema
+                        }),
+                        tabs && Object.entries(schema).map(([key, value])=>{
+                            if (typeof value === 'string') {
+                                return /*#__PURE__*/ _jsx(MessageField, {
+                                    hidden: activeTab !== key,
+                                    messageKey: key,
+                                    path: key,
+                                    schema: value
+                                }, key);
+                            }
+                            return /*#__PURE__*/ _jsx(MessagesTree, {
+                                hidden: activeTab !== key,
+                                nestingLevel: 0,
+                                path: key,
+                                schema: value
+                            }, key);
+                        })
+                    ]
+                })
             ]
-          }
-        )
-      ]
-    }
-  ) });
+        })
+    });
 }
-export {
-  H as MessagesForm
-};
-//# sourceMappingURL=MessagesForm.js.map
+
+//# sourceMappingURL=MessagesForm.js.map

package/dist/components/MessagesForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessagesForm.js","sources":["../../src/components/MessagesForm.tsx"],"sourcesContent":["'use client';\n\nimport { Button, toast, useStepNav } from '@payloadcms/ui';\nimport { isEqual } from 'lodash-es';\nimport { useEffect, useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport type { FormValues } from '@/context/messages-form';\nimport { MessagesFormProvider } from '@/context/messages-form';\nimport type {\n  DeepPartial,\n  Locales,\n  Messages,\n  MessagesSchema,\n  Translations,\n} from '@/types';\nimport { cn } from '@/utils/cn';\nimport { getErrorMessage } from '@/utils/error-handling';\nimport { JsonImport } from './actions/JsonImport';\nimport { MessageField } from './layout/MessageField';\nimport { MessagesTabs } from './layout/MessagesTabs';\nimport { MessagesTree } from './layout/MessagesTree';\n\ninterface MessagesFormProps {\n  locales: Locales;\n  schema: MessagesSchema;\n  tabs?: boolean;\n  values: Translations<DeepPartial<Messages>>;\n  endpointUrl: string;\n}\n\nexport function MessagesForm({\n  locales,\n  schema,\n  tabs = false,\n  values,\n  endpointUrl,\n}: MessagesFormProps): React.ReactNode {\n  const { setStepNav } = useStepNav();\n  useEffect(() => {\n    setStepNav([{ label: 'Intl Messages', url: '/intl' }]);\n  }, [setStepNav]);\n\n  const form = useForm<FormValues>({\n    defaultValues: values,\n    reValidateMode: 'onChange',\n  });\n  const [activeTab, setActiveTab] = useState(Object.keys(schema)[0]);\n\n  const handleSubmit = async (currentValues: FormValues) => {\n    const toastId = toast.loading('Saving...');\n    const changes = Object.entries(currentValues).reduce<\n      Translations<Messages>\n    >((acc, [locale, value]) => {\n      const hasChanged = !isEqual(value, values[locale]);\n      if (!hasChanged) return acc;\n      acc[locale] = value;\n      return acc;\n    }, {});\n\n    try {\n      const response = await fetch(endpointUrl, {\n        method: 'PUT',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        body: JSON.stringify(changes),\n      });\n\n      if (!response.ok) {\n        const error = await getErrorMessage(response);\n        throw new Error(error);\n      }\n\n      form.reset(currentValues);\n      toast.success('Saved', { id: toastId });\n    } catch (error) {\n      toast.error(\n        `Failed to save: ${error instanceof Error ? error.message : 'Unknown error'}`,\n        { id: toastId },\n      );\n    }\n  };\n\n  return (\n    <MessagesFormProvider form={form} locales={locales}>\n      <form\n        className=\"flex h-[calc(100vh-var(--app-header-height))] flex-col\"\n        onSubmit={form.handleSubmit(handleSubmit)}\n      >\n        <div className=\"sticky top-0 z-10 bg-background\">\n          <header className=\"mb-6 flex items-center justify-between gap-4\">\n            <h1 className=\"text-4xl\">Messages</h1>\n            <div className=\"flex items-center gap-2\">\n              <JsonImport />\n              <Button\n                className=\"my-0\"\n                disabled={!form.formState.isDirty}\n                type=\"submit\"\n              >\n                Save\n              </Button>\n            </div>\n          </header>\n\n          {tabs && (\n            <MessagesTabs\n              activeTab={activeTab}\n              schema={schema}\n              setActiveTab={setActiveTab}\n            />\n          )}\n        </div>\n\n        <div\n          className=\"min-h-0 overflow-y-auto pt-8 pb-16\"\n          id=\"messages-form-content\"\n        >\n          {!tabs && <MessagesTree nestingLevel={0} path=\"\" schema={schema} />}\n          {tabs &&\n            Object.entries(schema).map(([key, value]) => {\n              if (typeof value === 'string') {\n                return (\n                  <MessageField\n                    className={cn({ hidden: activeTab !== key })}\n                    key={key}\n                    messageKey={key}\n                    path={key}\n                    schema={value}\n                  />\n                );\n              }\n              return (\n                <MessagesTree\n                  className={cn({ hidden: activeTab !== key })}\n                  key={key}\n                  nestingLevel={0}\n                  path={key}\n                  schema={value}\n                />\n              );\n            })}\n        </div>\n      </form>\n    </MessagesFormProvider>\n  );\n}\n"],"names":["MessagesForm","locales","schema","tabs","values","endpointUrl","setStepNav","useStepNav","useEffect","form","useForm","activeTab","setActiveTab","useState","handleSubmit","currentValues","toastId","toast","changes","acc","locale","value","isEqual","response","error","getErrorMessage","jsx","MessagesFormProvider","jsxs","JsonImport","Button","MessagesTabs","MessagesTree","key","MessageField","cn"],"mappings":"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"}
+{"version":3,"sources":["../../src/components/MessagesForm.tsx"],"sourcesContent":["'use client';\n\nimport { Button, toast, useStepNav } from '@payloadcms/ui';\nimport { isEqual } from 'lodash-es';\nimport { useEffect, useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport type { FormValues } from '@/components/MessageFormContext';\nimport { MessagesFormProvider } from '@/components/MessageFormContext';\nimport type {\n  DeepPartial,\n  Locale,\n  Messages,\n  MessagesSchema,\n  Translations,\n} from '@/types';\nimport { getErrorMessage } from '@/utils/error-handling';\nimport { JsonImport } from './actions/JsonImport';\nimport { MessageField } from './layout/MessageField';\nimport { MessagesTabs } from './layout/MessagesTabs';\nimport { MessagesTree } from './layout/MessagesTree';\nimport styles from './MessagesForm.module.css';\n\ninterface MessagesFormProps {\n  locales: Locale[];\n  schema: MessagesSchema;\n  tabs?: boolean;\n  values: Translations<DeepPartial<Messages>>;\n  endpointUrl: string;\n}\n\nexport function MessagesForm({\n  locales,\n  schema,\n  tabs = false,\n  values,\n  endpointUrl,\n}: MessagesFormProps): React.ReactNode {\n  const { setStepNav } = useStepNav();\n  useEffect(() => {\n    setStepNav([{ label: 'Intl Messages', url: '/intl' }]);\n  }, [setStepNav]);\n\n  const form = useForm<FormValues>({\n    defaultValues: values,\n    reValidateMode: 'onChange',\n  });\n  const [activeTab, setActiveTab] = useState(Object.keys(schema)[0]);\n\n  const handleSubmit = async (currentValues: FormValues) => {\n    const toastId = toast.loading('Saving...');\n    const changes = Object.entries(currentValues).reduce<\n      Translations<Messages>\n    >((acc, [locale, value]) => {\n      const hasChanged = !isEqual(value, values[locale]);\n      if (!hasChanged) return acc;\n      acc[locale] = value;\n      return acc;\n    }, {});\n\n    try {\n      const response = await fetch(endpointUrl, {\n        method: 'PUT',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        body: JSON.stringify(changes),\n      });\n\n      if (!response.ok) {\n        const error = await getErrorMessage(response);\n        throw new Error(error);\n      }\n\n      form.reset(currentValues);\n      toast.success('Saved', { id: toastId });\n    } catch (error) {\n      toast.error(\n        `Failed to save: ${error instanceof Error ? error.message : 'Unknown error'}`,\n        { id: toastId },\n      );\n    }\n  };\n\n  return (\n    <MessagesFormProvider form={form} locales={locales}>\n      <form className={styles.form} onSubmit={form.handleSubmit(handleSubmit)}>\n        <div className={styles.stickyHeader}>\n          <header className={styles.header}>\n            <h1 className={styles.title}>Messages</h1>\n            <div className={styles.actions}>\n              <JsonImport />\n              <Button\n                className={styles.saveButton}\n                disabled={!form.formState.isDirty}\n                type=\"submit\"\n              >\n                Save\n              </Button>\n            </div>\n          </header>\n\n          {tabs && (\n            <MessagesTabs\n              activeTab={activeTab}\n              schema={schema}\n              setActiveTab={setActiveTab}\n            />\n          )}\n        </div>\n\n        <div className={styles.content} id=\"messages-form-content\">\n          {!tabs && <MessagesTree nestingLevel={0} path=\"\" schema={schema} />}\n          {tabs &&\n            Object.entries(schema).map(([key, value]) => {\n              if (typeof value === 'string') {\n                return (\n                  <MessageField\n                    hidden={activeTab !== key}\n                    key={key}\n                    messageKey={key}\n                    path={key}\n                    schema={value}\n                  />\n                );\n              }\n              return (\n                <MessagesTree\n                  hidden={activeTab !== key}\n                  key={key}\n                  nestingLevel={0}\n                  path={key}\n                  schema={value}\n                />\n              );\n            })}\n        </div>\n      </form>\n    </MessagesFormProvider>\n  );\n}\n"],"names":["Button","toast","useStepNav","isEqual","useEffect","useState","useForm","MessagesFormProvider","getErrorMessage","JsonImport","MessageField","MessagesTabs","MessagesTree","styles","MessagesForm","locales","schema","tabs","values","endpointUrl","setStepNav","label","url","form","defaultValues","reValidateMode","activeTab","setActiveTab","Object","keys","handleSubmit","currentValues","toastId","loading","changes","entries","reduce","acc","locale","value","hasChanged","response","fetch","method","headers","body","JSON","stringify","ok","error","Error","reset","success","id","message","className","onSubmit","div","stickyHeader","header","h1","title","actions","saveButton","disabled","formState","isDirty","type","content","nestingLevel","path","map","key","hidden","messageKey"],"mappings":"AAAA;;AAEA,SAASA,MAAM,EAAEC,KAAK,EAAEC,UAAU,QAAQ,iBAAiB;AAC3D,SAASC,OAAO,QAAQ,YAAY;AACpC,SAASC,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAC5C,SAASC,OAAO,QAAQ,kBAAkB;AAE1C,SAASC,oBAAoB,QAAQ,kCAAkC;AAQvE,SAASC,eAAe,QAAQ,yBAAyB;AACzD,SAASC,UAAU,QAAQ,uBAAuB;AAClD,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,YAAY,QAAQ,wBAAwB;AACrD,OAAOC,YAAY,4BAA4B;AAU/C,OAAO,SAASC,aAAa,EAC3BC,OAAO,EACPC,MAAM,EACNC,OAAO,KAAK,EACZC,MAAM,EACNC,WAAW,EACO;IAClB,MAAM,EAAEC,UAAU,EAAE,GAAGlB;IACvBE,UAAU;QACRgB,WAAW;YAAC;gBAAEC,OAAO;gBAAiBC,KAAK;YAAQ;SAAE;IACvD,GAAG;QAACF;KAAW;IAEf,MAAMG,OAAOjB,QAAoB;QAC/BkB,eAAeN;QACfO,gBAAgB;IAClB;IACA,MAAM,CAACC,WAAWC,aAAa,GAAGtB,SAASuB,OAAOC,IAAI,CAACb,OAAO,CAAC,EAAE;IAEjE,MAAMc,eAAe,OAAOC;QAC1B,MAAMC,UAAU/B,MAAMgC,OAAO,CAAC;QAC9B,MAAMC,UAAUN,OAAOO,OAAO,CAACJ,eAAeK,MAAM,CAElD,CAACC,KAAK,CAACC,QAAQC,MAAM;YACrB,MAAMC,aAAa,CAACrC,QAAQoC,OAAOrB,MAAM,CAACoB,OAAO;YACjD,IAAI,CAACE,YAAY,OAAOH;YACxBA,GAAG,CAACC,OAAO,GAAGC;YACd,OAAOF;QACT,GAAG,CAAC;QAEJ,IAAI;YACF,MAAMI,WAAW,MAAMC,MAAMvB,aAAa;gBACxCwB,QAAQ;gBACRC,SAAS;oBACP,gBAAgB;gBAClB;gBACAC,MAAMC,KAAKC,SAAS,CAACb;YACvB;YAEA,IAAI,CAACO,SAASO,EAAE,EAAE;gBAChB,MAAMC,QAAQ,MAAMzC,gBAAgBiC;gBACpC,MAAM,IAAIS,MAAMD;YAClB;YAEA1B,KAAK4B,KAAK,CAACpB;YACX9B,MAAMmD,OAAO,CAAC,SAAS;gBAAEC,IAAIrB;YAAQ;QACvC,EAAE,OAAOiB,OAAO;YACdhD,MAAMgD,KAAK,CACT,CAAC,gBAAgB,EAAEA,iBAAiBC,QAAQD,MAAMK,OAAO,GAAG,iBAAiB,EAC7E;gBAAED,IAAIrB;YAAQ;QAElB;IACF;IAEA,qBACE,KAACzB;QAAqBgB,MAAMA;QAAMR,SAASA;kBACzC,cAAA,MAACQ;YAAKgC,WAAW1C,OAAOU,IAAI;YAAEiC,UAAUjC,KAAKO,YAAY,CAACA;;8BACxD,MAAC2B;oBAAIF,WAAW1C,OAAO6C,YAAY;;sCACjC,MAACC;4BAAOJ,WAAW1C,OAAO8C,MAAM;;8CAC9B,KAACC;oCAAGL,WAAW1C,OAAOgD,KAAK;8CAAE;;8CAC7B,MAACJ;oCAAIF,WAAW1C,OAAOiD,OAAO;;sDAC5B,KAACrD;sDACD,KAACT;4CACCuD,WAAW1C,OAAOkD,UAAU;4CAC5BC,UAAU,CAACzC,KAAK0C,SAAS,CAACC,OAAO;4CACjCC,MAAK;sDACN;;;;;;wBAMJlD,sBACC,KAACN;4BACCe,WAAWA;4BACXV,QAAQA;4BACRW,cAAcA;;;;8BAKpB,MAAC8B;oBAAIF,WAAW1C,OAAOuD,OAAO;oBAAEf,IAAG;;wBAChC,CAACpC,sBAAQ,KAACL;4BAAayD,cAAc;4BAAGC,MAAK;4BAAGtD,QAAQA;;wBACxDC,QACCW,OAAOO,OAAO,CAACnB,QAAQuD,GAAG,CAAC,CAAC,CAACC,KAAKjC,MAAM;4BACtC,IAAI,OAAOA,UAAU,UAAU;gCAC7B,qBACE,KAAC7B;oCACC+D,QAAQ/C,cAAc8C;oCAEtBE,YAAYF;oCACZF,MAAME;oCACNxD,QAAQuB;mCAHHiC;4BAMX;4BACA,qBACE,KAAC5D;gCACC6D,QAAQ/C,cAAc8C;gCAEtBH,cAAc;gCACdC,MAAME;gCACNxD,QAAQuB;+BAHHiC;wBAMX;;;;;;AAKZ"}

package/dist/components/MessagesForm.module.css

@@ -0,0 +1,41 @@
+.form {
+  display: flex;
+  height: calc(100vh - var(--app-header-height));
+  flex-direction: column;
+}
+
+.stickyHeader {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: var(--theme-bg);
+}
+
+.header {
+  margin-bottom: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.title {
+  font-size: var(--font-size-2xl);
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.saveButton {
+  margin-block: 0;
+}
+
+.content {
+  min-height: 0;
+  overflow-y: auto;
+  padding-top: 2rem;
+  padding-bottom: 4rem;
+}

package/dist/{exports/link.d.ts → components/MessagesLink.d.ts}

@@ -1,8 +1,8 @@
-import { PayloadRequest } from 'payload';
-import { MessagesGuard } from '../types';
+import type { PayloadRequest } from 'payload';
+import type { MessagesGuard } from '../types';
 export interface MessagesLinkProps {
     access?: MessagesGuard;
     req: PayloadRequest;
 }
 export declare function MessagesLink({ access, req, }: MessagesLinkProps): Promise<import("react/jsx-runtime").JSX.Element | null>;
-//# sourceMappingURL=link.d.ts.map
+//# sourceMappingURL=MessagesLink.d.ts.map

package/dist/components/MessagesLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessagesLink.d.ts","sourceRoot":"","sources":["../../src/components/MessagesLink.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,GAAG,EAAE,cAAc,CAAC;CACrB;AAED,wBAAsB,YAAY,CAAC,EACjC,MAAmB,EACnB,GAAG,GACJ,EAAE,iBAAiB,2DAanB"}

package/dist/components/MessagesLink.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@payloadcms/ui';
+import { getAdminURL } from '@repo/common';
+import { IconWorld } from '@tabler/icons-react';
+export async function MessagesLink({ access = ()=>true, req }) {
+    const hasAccess = await access(req);
+    if (!hasAccess) return null;
+    return /*#__PURE__*/ _jsx(Button, {
+        buttonStyle: "tab",
+        el: "link",
+        to: getAdminURL({
+            req,
+            path: '/intl'
+        }),
+        children: /*#__PURE__*/ _jsx(IconWorld, {})
+    });
+}
+
+//# sourceMappingURL=MessagesLink.js.map

package/dist/components/MessagesLink.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/MessagesLink.tsx"],"sourcesContent":["import { Button } from '@payloadcms/ui';\nimport { getAdminURL } from '@repo/common';\nimport { IconWorld } from '@tabler/icons-react';\nimport type { PayloadRequest } from 'payload';\nimport type { MessagesGuard } from '@/types';\n\nexport interface MessagesLinkProps {\n  access?: MessagesGuard;\n  req: PayloadRequest;\n}\n\nexport async function MessagesLink({\n  access = () => true,\n  req,\n}: MessagesLinkProps) {\n  const hasAccess = await access(req);\n  if (!hasAccess) return null;\n\n  return (\n    <Button\n      buttonStyle=\"tab\"\n      el=\"link\"\n      to={getAdminURL({ req, path: '/intl' })}\n    >\n      <IconWorld />\n    </Button>\n  );\n}\n"],"names":["Button","getAdminURL","IconWorld","MessagesLink","access","req","hasAccess","buttonStyle","el","to","path"],"mappings":";AAAA,SAASA,MAAM,QAAQ,iBAAiB;AACxC,SAASC,WAAW,QAAQ,eAAe;AAC3C,SAASC,SAAS,QAAQ,sBAAsB;AAShD,OAAO,eAAeC,aAAa,EACjCC,SAAS,IAAM,IAAI,EACnBC,GAAG,EACe;IAClB,MAAMC,YAAY,MAAMF,OAAOC;IAC/B,IAAI,CAACC,WAAW,OAAO;IAEvB,qBACE,KAACN;QACCO,aAAY;QACZC,IAAG;QACHC,IAAIR,YAAY;YAAEI;YAAKK,MAAM;QAAQ;kBAErC,cAAA,KAACR;;AAGP"}

package/dist/components/MessagesView.d.ts

@@ -0,0 +1,10 @@
+import type { AdminViewServerProps } from 'payload';
+import type { Locale, Messages, MessagesGuard } from '../types';
+export interface MessagesViewProps {
+    locales: Locale[];
+    schema: Messages;
+    tabs: boolean | undefined;
+    access: MessagesGuard;
+}
+export declare function MessagesView({ access, initPageResult: { req, locale, permissions, visibleEntities }, locales, params, payload, schema, searchParams, tabs, }: AdminViewServerProps & MessagesViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=MessagesView.d.ts.map

package/dist/components/MessagesView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessagesView.d.ts","sourceRoot":"","sources":["../../src/components/MessagesView.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,KAAK,EAEV,MAAM,EACN,QAAQ,EACR,aAAa,EAEd,MAAM,SAAS,CAAC;AAKjB,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,EAAE,QAAQ,CAAC;IACjB,IAAI,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,MAAM,EAAE,aAAa,CAAC;CACvB;AAED,wBAAsB,YAAY,CAAC,EACjC,MAAM,EACN,cAAc,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,eAAe,EAAE,EAC7D,OAAO,EACP,MAAM,EACN,OAAO,EACP,MAAM,EACN,YAAY,EACZ,IAAY,GACb,EAAE,oBAAoB,GAAG,iBAAiB,oDA6C1C"}

package/dist/components/MessagesView.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DefaultTemplate } from '@payloadcms/next/templates';
+import { Gutter } from '@payloadcms/ui';
+import { getAdminURL } from '@repo/common';
+import { RedirectType, redirect } from 'next/navigation';
+import { sanitizeMessages } from '../utils/sanitize';
+import { fetchMessages } from '../requests/fetchMessages';
+import { MessagesForm } from './MessagesForm';
+export async function MessagesView({ access, initPageResult: { req, locale, permissions, visibleEntities }, locales, params, payload, schema, searchParams, tabs = false }) {
+    const apiUrl = payload.getAPIURL();
+    const endpointUrl = apiUrl.endsWith('/') ? `${apiUrl}intl-plugin` : `${apiUrl}/intl-plugin`;
+    const hasAccess = await access(req);
+    if (!hasAccess) redirect(getAdminURL({
+        req
+    }), RedirectType.replace);
+    const translations = {};
+    for (const locale of locales){
+        const messages = await fetchMessages(payload, locale);
+        translations[locale] = sanitizeMessages(schema, messages);
+    }
+    return /*#__PURE__*/ _jsx(DefaultTemplate, {
+        i18n: req.i18n,
+        locale: locale,
+        params: params,
+        payload: req.payload,
+        permissions: permissions,
+        searchParams: searchParams,
+        user: req.user || undefined,
+        viewActions: payload.config.admin.components.actions.filter((action)=>{
+            if (typeof action !== 'object') {
+                return true;
+            }
+            return action.exportName !== 'MessagesLink';
+        }),
+        visibleEntities: visibleEntities,
+        children: /*#__PURE__*/ _jsx(Gutter, {
+            children: /*#__PURE__*/ _jsx(MessagesForm, {
+                endpointUrl: endpointUrl,
+                locales: locales,
+                schema: schema,
+                tabs: tabs,
+                values: translations
+            })
+        })
+    });
+}
+
+//# sourceMappingURL=MessagesView.js.map

package/dist/components/MessagesView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/MessagesView.tsx"],"sourcesContent":["import { DefaultTemplate } from '@payloadcms/next/templates';\nimport { Gutter } from '@payloadcms/ui';\nimport { getAdminURL } from '@repo/common';\nimport { RedirectType, redirect } from 'next/navigation';\nimport type { AdminViewServerProps } from 'payload';\nimport type {\n  DeepPartial,\n  Locale,\n  Messages,\n  MessagesGuard,\n  Translations,\n} from '@/types';\nimport { sanitizeMessages } from '@/utils/sanitize';\nimport { fetchMessages } from '../requests/fetchMessages';\nimport { MessagesForm } from './MessagesForm';\n\nexport interface MessagesViewProps {\n  locales: Locale[];\n  schema: Messages;\n  tabs: boolean | undefined;\n  access: MessagesGuard;\n}\n\nexport async function MessagesView({\n  access,\n  initPageResult: { req, locale, permissions, visibleEntities },\n  locales,\n  params,\n  payload,\n  schema,\n  searchParams,\n  tabs = false,\n}: AdminViewServerProps & MessagesViewProps) {\n  const apiUrl = payload.getAPIURL();\n  const endpointUrl = apiUrl.endsWith('/')\n    ? `${apiUrl}intl-plugin`\n    : `${apiUrl}/intl-plugin`;\n\n  const hasAccess = await access(req);\n  if (!hasAccess) redirect(getAdminURL({ req }), RedirectType.replace);\n\n  const translations: Translations<DeepPartial<Messages>> = {};\n\n  for (const locale of locales) {\n    const messages = await fetchMessages(payload, locale);\n\n    translations[locale] = sanitizeMessages(schema, messages);\n  }\n\n  return (\n    <DefaultTemplate\n      i18n={req.i18n}\n      locale={locale}\n      params={params}\n      payload={req.payload}\n      permissions={permissions}\n      searchParams={searchParams}\n      user={req.user || undefined}\n      viewActions={payload.config.admin.components.actions.filter((action) => {\n        if (typeof action !== 'object') {\n          return true;\n        }\n        return action.exportName !== 'MessagesLink';\n      })}\n      visibleEntities={visibleEntities}\n    >\n      <Gutter>\n        <MessagesForm\n          endpointUrl={endpointUrl}\n          locales={locales}\n          schema={schema}\n          tabs={tabs}\n          values={translations}\n        />\n      </Gutter>\n    </DefaultTemplate>\n  );\n}\n"],"names":["DefaultTemplate","Gutter","getAdminURL","RedirectType","redirect","sanitizeMessages","fetchMessages","MessagesForm","MessagesView","access","initPageResult","req","locale","permissions","visibleEntities","locales","params","payload","schema","searchParams","tabs","apiUrl","getAPIURL","endpointUrl","endsWith","hasAccess","replace","translations","messages","i18n","user","undefined","viewActions","config","admin","components","actions","filter","action","exportName","values"],"mappings":";AAAA,SAASA,eAAe,QAAQ,6BAA6B;AAC7D,SAASC,MAAM,QAAQ,iBAAiB;AACxC,SAASC,WAAW,QAAQ,eAAe;AAC3C,SAASC,YAAY,EAAEC,QAAQ,QAAQ,kBAAkB;AASzD,SAASC,gBAAgB,QAAQ,mBAAmB;AACpD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,iBAAiB;AAS9C,OAAO,eAAeC,aAAa,EACjCC,MAAM,EACNC,gBAAgB,EAAEC,GAAG,EAAEC,MAAM,EAAEC,WAAW,EAAEC,eAAe,EAAE,EAC7DC,OAAO,EACPC,MAAM,EACNC,OAAO,EACPC,MAAM,EACNC,YAAY,EACZC,OAAO,KAAK,EAC6B;IACzC,MAAMC,SAASJ,QAAQK,SAAS;IAChC,MAAMC,cAAcF,OAAOG,QAAQ,CAAC,OAChC,GAAGH,OAAO,WAAW,CAAC,GACtB,GAAGA,OAAO,YAAY,CAAC;IAE3B,MAAMI,YAAY,MAAMhB,OAAOE;IAC/B,IAAI,CAACc,WAAWrB,SAASF,YAAY;QAAES;IAAI,IAAIR,aAAauB,OAAO;IAEnE,MAAMC,eAAoD,CAAC;IAE3D,KAAK,MAAMf,UAAUG,QAAS;QAC5B,MAAMa,WAAW,MAAMtB,cAAcW,SAASL;QAE9Ce,YAAY,CAACf,OAAO,GAAGP,iBAAiBa,QAAQU;IAClD;IAEA,qBACE,KAAC5B;QACC6B,MAAMlB,IAAIkB,IAAI;QACdjB,QAAQA;QACRI,QAAQA;QACRC,SAASN,IAAIM,OAAO;QACpBJ,aAAaA;QACbM,cAAcA;QACdW,MAAMnB,IAAImB,IAAI,IAAIC;QAClBC,aAAaf,QAAQgB,MAAM,CAACC,KAAK,CAACC,UAAU,CAACC,OAAO,CAACC,MAAM,CAAC,CAACC;YAC3D,IAAI,OAAOA,WAAW,UAAU;gBAC9B,OAAO;YACT;YACA,OAAOA,OAAOC,UAAU,KAAK;QAC/B;QACAzB,iBAAiBA;kBAEjB,cAAA,KAACb;sBACC,cAAA,KAACM;gBACCgB,aAAaA;gBACbR,SAASA;gBACTG,QAAQA;gBACRE,MAAMA;gBACNoB,QAAQb;;;;AAKlB"}

package/dist/components/actions/JsonImport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JsonImport.d.ts","sourceRoot":"","sources":["../../../src/components/actions/JsonImport.tsx"],"names":[],"mappings":"AAMA,wBAAgB,UAAU,4CAiEzB"}
+{"version":3,"file":"JsonImport.d.ts","sourceRoot":"","sources":["../../../src/components/actions/JsonImport.tsx"],"names":[],"mappings":"AAQA,wBAAgB,UAAU,4CAiEzB"}

package/dist/components/actions/JsonImport.js

@@ -1,63 +1,70 @@
-import { jsxs as a, Fragment as f, jsx as o } from "react/jsx-runtime";
-import { Button as c } from "@payloadcms/ui";
-import { IconBraces as h } from "@tabler/icons-react";
-import { useRef as g, useState as S } from "react";
-import { useMessagesForm as x } from "../../context/messages-form.js";
-function C() {
-  const { locales: i, setValue: u } = x(), r = g(null), [s, n] = S();
-  return /* @__PURE__ */ a(f, { children: [
-    /* @__PURE__ */ o(
-      "input",
-      {
-        accept: ".json",
-        hidden: !0,
-        onChange: (t) => {
-          const e = t.target.files?.[0];
-          if (!s || !e) {
-            t.target.value = "";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '@payloadcms/ui';
+import { IconBraces } from '@tabler/icons-react';
+import { useRef, useState } from 'react';
+import { useMessagesForm } from '../../components/MessageFormContext';
+import styles from './JsonImport.module.css';
+export function JsonImport() {
+    const { locales, setValue } = useMessagesForm();
+    const inputRef = useRef(null);
+    const [selectedLocale, setSelectedLocale] = useState();
+    const handleImportJSON = (event)=>{
+        const file = event.target.files?.[0];
+        if (!selectedLocale || !file) {
+            event.target.value = '';
             return;
-          }
-          const l = new FileReader();
-          l.onload = (m) => {
-            const d = m.target?.result, p = JSON.parse(d);
-            u(s, p, {
-              shouldDirty: !0,
-              shouldValidate: !0
-            }), n(void 0), t.target.value = "";
-          }, l.readAsText(e);
-        },
-        ref: r,
-        type: "file"
-      }
-    ),
-    /* @__PURE__ */ o(
-      c,
-      {
-        buttonStyle: "subtle",
-        className: "my-0",
-        icon: /* @__PURE__ */ o(h, { className: "size-5" }),
-        iconPosition: "left",
-        SubMenuPopupContent: ({ close: t }) => /* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: i.map((e) => /* @__PURE__ */ a(
-          c,
-          {
-            buttonStyle: "subtle",
-            onClick: () => {
-              n(e), r.current?.click(), t();
-            },
-            size: "small",
-            children: [
-              e,
-              ".json"
-            ]
-          },
-          e
-        )) }),
-        children: "Import"
-      }
-    )
-  ] });
+        }
+        const reader = new FileReader();
+        reader.onload = (readerEvent)=>{
+            const text = readerEvent.target?.result;
+            const data = JSON.parse(text);
+            // FIMXE this does not cause the form to re-render
+            setValue(selectedLocale, data, {
+                shouldDirty: true,
+                shouldValidate: true
+            });
+            setSelectedLocale(undefined);
+            // Clear the input value to allow re-selection of the same or different file
+            event.target.value = '';
+        };
+        reader.readAsText(file);
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("input", {
+                accept: ".json",
+                hidden: true,
+                onChange: handleImportJSON,
+                ref: inputRef,
+                type: "file"
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                buttonStyle: "subtle",
+                className: styles.button,
+                icon: /*#__PURE__*/ _jsx(IconBraces, {
+                    className: styles.icon
+                }),
+                iconPosition: "left",
+                SubMenuPopupContent: ({ close })=>/*#__PURE__*/ _jsx("div", {
+                        className: styles.submenu,
+                        children: locales.map((locale)=>/*#__PURE__*/ _jsxs(Button, {
+                                buttonStyle: "subtle",
+                                onClick: ()=>{
+                                    setSelectedLocale(locale);
+                                    inputRef.current?.click();
+                                    close();
+                                },
+                                size: "small",
+                                children: [
+                                    locale,
+                                    ".json"
+                                ]
+                            }, locale))
+                    }),
+                children: "Import"
+            })
+        ]
+    });
 }
-export {
-  C as JsonImport
-};
-//# sourceMappingURL=JsonImport.js.map
+
+//# sourceMappingURL=JsonImport.js.map

package/dist/components/actions/JsonImport.js.map

@@ -1 +1 @@
-{"version":3,"file":"JsonImport.js","sources":["../../../src/components/actions/JsonImport.tsx"],"sourcesContent":["import { Button } from '@payloadcms/ui';\nimport { IconBraces } from '@tabler/icons-react';\nimport { useRef, useState } from 'react';\n\nimport { useMessagesForm } from '@/context/messages-form';\n\nexport function JsonImport() {\n  const { locales, setValue } = useMessagesForm();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [selectedLocale, setSelectedLocale] = useState<string>();\n\n  const handleImportJSON = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const file = event.target.files?.[0];\n    if (!selectedLocale || !file) {\n      event.target.value = '';\n      return;\n    }\n\n    const reader = new FileReader();\n    reader.onload = (readerEvent) => {\n      const text = readerEvent.target?.result as string;\n      const data = JSON.parse(text);\n      // FIMXE this does not cause the form to re-render\n      setValue(selectedLocale, data, {\n        shouldDirty: true,\n        shouldValidate: true,\n      });\n      setSelectedLocale(undefined);\n      // Clear the input value to allow re-selection of the same or different file\n      event.target.value = '';\n    };\n    reader.readAsText(file);\n  };\n\n  return (\n    <>\n      <input\n        accept=\".json\"\n        hidden\n        onChange={handleImportJSON}\n        ref={inputRef}\n        type=\"file\"\n      />\n      <Button\n        buttonStyle=\"subtle\"\n        className=\"my-0\"\n        icon={<IconBraces className=\"size-5\" />}\n        iconPosition=\"left\"\n        SubMenuPopupContent={({ close }) => (\n          <div className=\"flex flex-col gap-2\">\n            {locales.map((locale) => (\n              <Button\n                buttonStyle=\"subtle\"\n                key={locale}\n                onClick={() => {\n                  setSelectedLocale(locale);\n                  inputRef.current?.click();\n                  close();\n                }}\n                size=\"small\"\n              >\n                {locale}.json\n              </Button>\n            ))}\n          </div>\n        )}\n      >\n        Import\n      </Button>\n    </>\n  );\n}\n"],"names":["JsonImport","locales","setValue","useMessagesForm","inputRef","useRef","selectedLocale","setSelectedLocale","useState","jsxs","Fragment","jsx","event","file","reader","readerEvent","text","data","Button","IconBraces","close","locale"],"mappings":";;;;;AAMO,SAASA,IAAa;AAC3B,QAAM,EAAE,SAAAC,GAAS,UAAAC,EAAA,IAAaC,EAAA,GACxBC,IAAWC,EAAyB,IAAI,GACxC,CAACC,GAAgBC,CAAiB,IAAIC,EAAA;AAyB5C,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAO;AAAA,QACP,QAAM;AAAA,QACN,UA5BmB,CAACC,MAA+C;AACvE,gBAAMC,IAAOD,EAAM,OAAO,QAAQ,CAAC;AACnC,cAAI,CAACN,KAAkB,CAACO,GAAM;AAC5B,YAAAD,EAAM,OAAO,QAAQ;AACrB;AAAA,UACF;AAEA,gBAAME,IAAS,IAAI,WAAA;AACnB,UAAAA,EAAO,SAAS,CAACC,MAAgB;AAC/B,kBAAMC,IAAOD,EAAY,QAAQ,QAC3BE,IAAO,KAAK,MAAMD,CAAI;AAE5B,YAAAd,EAASI,GAAgBW,GAAM;AAAA,cAC7B,aAAa;AAAA,cACb,gBAAgB;AAAA,YAAA,CACjB,GACDV,EAAkB,MAAS,GAE3BK,EAAM,OAAO,QAAQ;AAAA,UACvB,GACAE,EAAO,WAAWD,CAAI;AAAA,QACxB;AAAA,QAQM,KAAKT;AAAA,QACL,MAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAEP,gBAAAO;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,aAAY;AAAA,QACZ,WAAU;AAAA,QACV,MAAM,gBAAAP,EAACQ,GAAA,EAAW,WAAU,SAAA,CAAS;AAAA,QACrC,cAAa;AAAA,QACb,qBAAqB,CAAC,EAAE,OAAAC,QACtB,gBAAAT,EAAC,OAAA,EAAI,WAAU,uBACZ,UAAAV,EAAQ,IAAI,CAACoB,MACZ,gBAAAZ;AAAA,UAACS;AAAA,UAAA;AAAA,YACC,aAAY;AAAA,YAEZ,SAAS,MAAM;AACb,cAAAX,EAAkBc,CAAM,GACxBjB,EAAS,SAAS,MAAA,GAClBgB,EAAA;AAAA,YACF;AAAA,YACA,MAAK;AAAA,YAEJ,UAAA;AAAA,cAAAC;AAAA,cAAO;AAAA,YAAA;AAAA,UAAA;AAAA,UARHA;AAAA,QAAA,CAUR,GACH;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,GACF;AAEJ;"}
+{"version":3,"sources":["../../../src/components/actions/JsonImport.tsx"],"sourcesContent":["import { Button } from '@payloadcms/ui';\nimport { IconBraces } from '@tabler/icons-react';\nimport { useRef, useState } from 'react';\n\nimport { useMessagesForm } from '@/components/MessageFormContext';\n\nimport styles from './JsonImport.module.css';\n\nexport function JsonImport() {\n  const { locales, setValue } = useMessagesForm();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [selectedLocale, setSelectedLocale] = useState<string>();\n\n  const handleImportJSON = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const file = event.target.files?.[0];\n    if (!selectedLocale || !file) {\n      event.target.value = '';\n      return;\n    }\n\n    const reader = new FileReader();\n    reader.onload = (readerEvent) => {\n      const text = readerEvent.target?.result as string;\n      const data = JSON.parse(text);\n      // FIMXE this does not cause the form to re-render\n      setValue(selectedLocale, data, {\n        shouldDirty: true,\n        shouldValidate: true,\n      });\n      setSelectedLocale(undefined);\n      // Clear the input value to allow re-selection of the same or different file\n      event.target.value = '';\n    };\n    reader.readAsText(file);\n  };\n\n  return (\n    <>\n      <input\n        accept=\".json\"\n        hidden\n        onChange={handleImportJSON}\n        ref={inputRef}\n        type=\"file\"\n      />\n      <Button\n        buttonStyle=\"subtle\"\n        className={styles.button}\n        icon={<IconBraces className={styles.icon} />}\n        iconPosition=\"left\"\n        SubMenuPopupContent={({ close }) => (\n          <div className={styles.submenu}>\n            {locales.map((locale) => (\n              <Button\n                buttonStyle=\"subtle\"\n                key={locale}\n                onClick={() => {\n                  setSelectedLocale(locale);\n                  inputRef.current?.click();\n                  close();\n                }}\n                size=\"small\"\n              >\n                {locale}.json\n              </Button>\n            ))}\n          </div>\n        )}\n      >\n        Import\n      </Button>\n    </>\n  );\n}\n"],"names":["Button","IconBraces","useRef","useState","useMessagesForm","styles","JsonImport","locales","setValue","inputRef","selectedLocale","setSelectedLocale","handleImportJSON","event","file","target","files","value","reader","FileReader","onload","readerEvent","text","result","data","JSON","parse","shouldDirty","shouldValidate","undefined","readAsText","input","accept","hidden","onChange","ref","type","buttonStyle","className","button","icon","iconPosition","SubMenuPopupContent","close","div","submenu","map","locale","onClick","current","click","size"],"mappings":";AAAA,SAASA,MAAM,QAAQ,iBAAiB;AACxC,SAASC,UAAU,QAAQ,sBAAsB;AACjD,SAASC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAEzC,SAASC,eAAe,QAAQ,kCAAkC;AAElE,OAAOC,YAAY,0BAA0B;AAE7C,OAAO,SAASC;IACd,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGJ;IAC9B,MAAMK,WAAWP,OAAyB;IAC1C,MAAM,CAACQ,gBAAgBC,kBAAkB,GAAGR;IAE5C,MAAMS,mBAAmB,CAACC;QACxB,MAAMC,OAAOD,MAAME,MAAM,CAACC,KAAK,EAAE,CAAC,EAAE;QACpC,IAAI,CAACN,kBAAkB,CAACI,MAAM;YAC5BD,MAAME,MAAM,CAACE,KAAK,GAAG;YACrB;QACF;QAEA,MAAMC,SAAS,IAAIC;QACnBD,OAAOE,MAAM,GAAG,CAACC;YACf,MAAMC,OAAOD,YAAYN,MAAM,EAAEQ;YACjC,MAAMC,OAAOC,KAAKC,KAAK,CAACJ;YACxB,kDAAkD;YAClDd,SAASE,gBAAgBc,MAAM;gBAC7BG,aAAa;gBACbC,gBAAgB;YAClB;YACAjB,kBAAkBkB;YAClB,4EAA4E;YAC5EhB,MAAME,MAAM,CAACE,KAAK,GAAG;QACvB;QACAC,OAAOY,UAAU,CAAChB;IACpB;IAEA,qBACE;;0BACE,KAACiB;gBACCC,QAAO;gBACPC,MAAM;gBACNC,UAAUtB;gBACVuB,KAAK1B;gBACL2B,MAAK;;0BAEP,KAACpC;gBACCqC,aAAY;gBACZC,WAAWjC,OAAOkC,MAAM;gBACxBC,oBAAM,KAACvC;oBAAWqC,WAAWjC,OAAOmC,IAAI;;gBACxCC,cAAa;gBACbC,qBAAqB,CAAC,EAAEC,KAAK,EAAE,iBAC7B,KAACC;wBAAIN,WAAWjC,OAAOwC,OAAO;kCAC3BtC,QAAQuC,GAAG,CAAC,CAACC,uBACZ,MAAC/C;gCACCqC,aAAY;gCAEZW,SAAS;oCACPrC,kBAAkBoC;oCAClBtC,SAASwC,OAAO,EAAEC;oCAClBP;gCACF;gCACAQ,MAAK;;oCAEJJ;oCAAO;;+BARHA;;0BAad;;;;AAKP"}