npm - payload-intl - Versions diffs - 0.0.2 → 0.0.4 - Mend

payload-intl 0.0.2 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (69) hide show

package/dist/components/inputs/variables/editors/PluralVariableEditor.js CHANGED Viewed

@@ -1,149 +1,178 @@
-import { TYPE as f } from "@formatjs/icu-messageformat-parser";
-import { IconX as b } from "@tabler/icons-react";
-import { Popover as n } from "radix-ui";
-import { useMemo as g, useImperativeHandle as E, Fragment as v } from "react";
-import { useForm as R, useFieldArray as h, Controller as y } from "react-hook-form";
-import { cn as x } from "../../../../utils/cn.js";
-import { serializeICUMessage as c, parseICUMessage as N } from "../../../../utils/icu-tranform.js";
-const w = ["zero", "one", "two", "few", "many"];
-function k({
-  variableName: i,
+import { jsxs as o, jsx as r, Fragment as g } from "react/jsx-runtime";
+import { TYPE as b } from "@formatjs/icu-messageformat-parser";
+import { IconX as v } from "@tabler/icons-react";
+import { Popover as i } from "radix-ui";
+import { useMemo as x, useImperativeHandle as N, Fragment as y } from "react";
+import { useForm as w, useFieldArray as C, Controller as F } from "react-hook-form";
+import { cn as O } from "../../../../utils/cn.js";
+import { serializeICUMessage as m, parseICUMessage as j } from "../../../../utils/icu-tranform.js";
+const z = ["zero", "one", "two", "few", "many"];
+function A({
+  variableName: u,
   element: l,
-  ref: u
+  ref: p
 }) {
-  const d = g(() => {
+  const f = x(() => {
     const { other: e, ...t } = l?.options ?? {};
     return {
       offset: l?.offset ?? 0,
-      options: Object.entries(t).map(([r, o]) => ({
-        name: r,
-        content: c(o.value)
+      options: Object.entries(t).map(([n, s]) => ({
+        name: n,
+        content: m(s.value)
       })),
-      other: c(e ? e.value : [])
+      other: m(e ? e.value : [])
     };
-  }, [l]), { control: m, register: s, getValues: p } = R({
-    defaultValues: d
+  }, [l]), { control: c, register: d, getValues: h } = w({
+    defaultValues: f
   });
-  E(u, () => ({
+  N(p, () => ({
     getValue: () => {
-      const e = p(), t = {
-        type: f.plural,
-        value: i,
+      const e = h(), t = {
+        type: b.plural,
+        value: u,
         offset: e.offset,
         pluralType: l?.pluralType ?? "cardinal",
         options: Object.fromEntries(
-          e.options.map(({ name: r, content: o }) => [
-            r,
-            { value: N(o) }
+          e.options.map(({ name: n, content: s }) => [
+            n,
+            { value: j(s) }
           ])
         )
       };
-      return c([t]);
+      return m([t]);
     }
   }));
-  const a = h({
-    control: m,
+  const a = C({
+    control: c,
     name: "options"
   });
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement("fieldset", { className: "mx-0 grid grid-cols-[3rem_8rem_1.5rem] gap-y-2 rounded-md border border-border px-2 pr-0" }, /* @__PURE__ */ React.createElement("legend", null, "Options"), a.fields.map((e, t) => /* @__PURE__ */ React.createElement(v, { key: e.id }, /* @__PURE__ */ React.createElement("label", { htmlFor: `options.${t}` }, e.name), /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      className: "focus:outline-none",
-      type: "text",
-      ...s(`options.${t}.content`, { required: !0 })
-    }
-  ), /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: "ml-auto flex cursor-pointer items-center justify-center border-none bg-transparent p-0 hover:text-error",
-      type: "button",
-      onClick: () => a.remove(t)
-    },
-    /* @__PURE__ */ React.createElement(b, { size: 16 })
-  ))), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("label", { htmlFor: "other" }, "other"), /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      type: "text",
-      className: "col-span-2 focus:outline-none",
-      ...s("other", { required: !0 })
-    }
-  ))), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 items-center gap-2" }, /* @__PURE__ */ React.createElement("label", { className: "flex items-center gap-3 pl-2" }, "offset", /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      className: "w-8 text-center",
-      type: "numeric",
-      placeholder: "0",
-      ...s("offset")
-    }
-  )), /* @__PURE__ */ React.createElement(n.Root, null, /* @__PURE__ */ React.createElement(n.Trigger, null, "Add Option"), /* @__PURE__ */ React.createElement(n.Portal, null, /* @__PURE__ */ React.createElement(
-    n.Content,
-    {
-      sideOffset: 4,
-      className: "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-elevation-50 shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, w.filter(
-      (e) => a.fields.every((t) => t.name !== e)
-    ).map((e) => /* @__PURE__ */ React.createElement(
-      n.Close,
-      {
-        key: e,
-        className: x(
-          "cursor-pointer border-none bg-transparent px-1 hover:bg-elevation-250"
+  return /* @__PURE__ */ o("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ o("fieldset", { className: "mx-0 grid grid-cols-[3rem_8rem_1.5rem] gap-y-2 rounded-md border border-border px-2 pr-0", children: [
+      /* @__PURE__ */ r("legend", { children: "Options" }),
+      a.fields.map((e, t) => /* @__PURE__ */ o(y, { children: [
+        /* @__PURE__ */ r("label", { htmlFor: `options.${t}`, children: e.name }),
+        /* @__PURE__ */ r(
+          "input",
+          {
+            className: "focus:outline-none",
+            type: "text",
+            ...d(`options.${t}.content`, { required: !0 })
+          }
         ),
-        onClick: () => {
-          a.append(
-            {
-              name: e,
-              content: ""
-            },
-            {
-              shouldFocus: !0
-            }
-          );
-        }
-      },
-      e
-    ))),
-    /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between gap-2 border-t border-border p-2" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "customValue" }, "custom"), /* @__PURE__ */ React.createElement(
-      y,
-      {
-        control: m,
-        name: "customValue",
-        render: ({ field: e }) => (
-          // eslint-disable-next-line jsx-a11y/control-has-associated-label
-          /* @__PURE__ */ React.createElement(
-            "input",
-            {
-              type: "numeric",
-              className: "w-8 rounded-sm border-transparent text-center focus:border-border focus:outline-none",
-              placeholder: "=0",
-              min: 0,
-              value: e.value ?? "",
-              onChange: ({ currentTarget: { value: t } }) => {
-                const r = Number(t);
-                isNaN(r) || r < 0 || e.onChange(r);
-              },
-              onKeyDown: (t) => {
-                t.key !== "Enter" || e.value === void 0 || a.fields.some(
-                  (o) => o.name === `=${e.value}`
-                ) || (a.append(
-                  {
-                    name: `=${e.value}`,
-                    content: ""
+        /* @__PURE__ */ r(
+          "button",
+          {
+            className: "ml-auto flex cursor-pointer items-center justify-center border-none bg-transparent p-0 hover:text-error",
+            type: "button",
+            onClick: () => a.remove(t),
+            children: /* @__PURE__ */ r(v, { size: 16 })
+          }
+        )
+      ] }, e.id)),
+      /* @__PURE__ */ o(g, { children: [
+        /* @__PURE__ */ r("label", { htmlFor: "other", children: "other" }),
+        /* @__PURE__ */ r(
+          "input",
+          {
+            type: "text",
+            className: "col-span-2 focus:outline-none",
+            ...d("other", { required: !0 })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ o("div", { className: "grid grid-cols-2 items-center gap-2", children: [
+      /* @__PURE__ */ o("label", { className: "flex items-center gap-3 pl-2", children: [
+        "offset",
+        /* @__PURE__ */ r(
+          "input",
+          {
+            className: "w-8 text-center",
+            type: "numeric",
+            placeholder: "0",
+            ...d("offset")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ o(i.Root, { children: [
+        /* @__PURE__ */ r(i.Trigger, { children: "Add Option" }),
+        /* @__PURE__ */ r(i.Portal, { children: /* @__PURE__ */ o(
+          i.Content,
+          {
+            sideOffset: 4,
+            className: "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-elevation-50 shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+            children: [
+              /* @__PURE__ */ r("div", { className: "flex flex-col", children: z.filter(
+                (e) => a.fields.every((t) => t.name !== e)
+              ).map((e) => /* @__PURE__ */ r(
+                i.Close,
+                {
+                  className: O(
+                    "cursor-pointer border-none bg-transparent px-1 hover:bg-elevation-250"
+                  ),
+                  onClick: () => {
+                    a.append(
+                      {
+                        name: e,
+                        content: ""
+                      },
+                      {
+                        shouldFocus: !0
+                      }
+                    );
                   },
+                  children: e
+                },
+                e
+              )) }),
+              /* @__PURE__ */ o("div", { className: "flex items-center justify-between gap-2 border-t border-border p-2", children: [
+                /* @__PURE__ */ r("label", { htmlFor: "customValue", children: "custom" }),
+                /* @__PURE__ */ r(
+                  F,
                   {
-                    shouldFocus: !0
+                    control: c,
+                    name: "customValue",
+                    render: ({ field: e }) => (
+                      // eslint-disable-next-line jsx-a11y/control-has-associated-label
+                      /* @__PURE__ */ r(
+                        "input",
+                        {
+                          type: "numeric",
+                          className: "w-8 rounded-sm border-transparent text-center focus:border-border focus:outline-none",
+                          placeholder: "=0",
+                          min: 0,
+                          value: e.value ?? "",
+                          onChange: ({ currentTarget: { value: t } }) => {
+                            const n = Number(t);
+                            isNaN(n) || n < 0 || e.onChange(n);
+                          },
+                          onKeyDown: (t) => {
+                            t.key !== "Enter" || e.value === void 0 || a.fields.some(
+                              (s) => s.name === `=${e.value}`
+                            ) || (a.append(
+                              {
+                                name: `=${e.value}`,
+                                content: ""
+                              },
+                              {
+                                shouldFocus: !0
+                              }
+                            ), e.onChange(void 0));
+                          }
+                        }
+                      )
+                    )
                   }
-                ), e.onChange(void 0));
-              }
-            }
-          )
-        )
-      }
-    ))
-  )))));
+                )
+              ] })
+            ]
+          }
+        ) })
+      ] })
+    ] })
+  ] });
 }
 export {
-  k as PluralVariableEditor
+  A as PluralVariableEditor
 };
 //# sourceMappingURL=PluralVariableEditor.js.map

package/dist/components/inputs/variables/editors/PluralVariableEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PluralVariableEditor.js","sources":["../../../../../src/components/inputs/variables/editors/PluralVariableEditor.tsx"],"sourcesContent":["import { TYPE } from \"@formatjs/icu-messageformat-parser\";\nimport { IconX } from \"@tabler/icons-react\";\nimport { Popover } from \"radix-ui\";\nimport { Fragment, useImperativeHandle, useMemo } from \"react\";\nimport { Controller, useFieldArray, useForm } from \"react-hook-form\";\n\nimport type { PluralElement } from \"@/types\";\nimport { cn } from \"@/utils/cn\";\nimport { parseICUMessage, serializeICUMessage } from \"@/utils/icu-tranform\";\n\nconst NAMED_PLURAL_OPTIONS = [\"zero\", \"one\", \"two\", \"few\", \"many\"] as const;\n\nexport interface PluralVariableEditorProps {\n variableName: string;\n element: PluralElement \| undefined;\n ref: React.Ref<{ getValue: () => string }>;\n}\n\n// TODO add support for selectordinal (\"pluralType\": \"ordinal\")\n\nexport function PluralVariableEditor({\n variableName,\n element,\n ref,\n}: PluralVariableEditorProps) {\n const config = useMemo<{\n offset: number;\n options: { name: string; content: string }[];\n other: string;\n }>(() => {\n const { other, ...options } = element?.options ?? {};\n return {\n offset: element?.offset ?? 0,\n options: Object.entries(options).map(([name, option]) => ({\n name,\n content: serializeICUMessage(option.value),\n })),\n other: serializeICUMessage(other ? other.value : []),\n };\n }, [element]);\n\n const { control, register, getValues } = useForm<{\n offset: number;\n options: { name: string; content: string }[];\n other: string;\n customValue?: number;\n }>({\n defaultValues: config,\n });\n\n useImperativeHandle(ref, () => ({\n getValue: () => {\n const values = getValues();\n const updatedElement: PluralElement = {\n type: TYPE.plural,\n value: variableName,\n offset: values.offset,\n pluralType: element?.pluralType ?? \"cardinal\",\n options: Object.fromEntries(\n values.options.map(({ name, content }) => [\n name,\n { value: parseICUMessage(content) },\n ]),\n ),\n };\n return serializeICUMessage([updatedElement]);\n },\n }));\n\n const options = useFieldArray({\n control,\n name: \"options\",\n });\n\n return (\n <div className=\"flex flex-col gap-3\">\n <fieldset className=\"mx-0 grid grid-cols-[3rem_8rem_1.5rem] gap-y-2 rounded-md border border-border px-2 pr-0\">\n <legend>Options</legend>\n {options.fields.map((field, index) => (\n <Fragment key={field.id}>\n <label htmlFor={`options.${index}`}>{field.name}</label>\n {/* // TODO add support for variable mentions /}\n <input\n className=\"focus:outline-none\"\n type=\"text\"\n {...register(`options.${index}.content`, { required: true })}\n />\n <button\n className=\"ml-auto flex cursor-pointer items-center justify-center border-none bg-transparent p-0 hover:text-error\"\n type=\"button\"\n onClick={() => options.remove(index)}\n >\n <IconX size={16} />\n </button>\n </Fragment>\n ))}\n\n <>\n <label htmlFor=\"other\">other</label>\n {/ // TODO add support for variable mentions */}\n <input\n type=\"text\"\n className=\"col-span-2 focus:outline-none\"\n {...register(\"other\", { required: true })}\n />\n </>\n </fieldset>\n <div className=\"grid grid-cols-2 items-center gap-2\">\n <label className=\"flex items-center gap-3 pl-2\">\n offset\n <input\n className=\"w-8 text-center\"\n type=\"numeric\"\n placeholder=\"0\"\n {...register(\"offset\")}\n />\n </label>\n <Popover.Root>\n <Popover.Trigger>Add Option</Popover.Trigger>\n <Popover.Portal>\n <Popover.Content\n sideOffset={4}\n className=\"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-elevation-50 shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\"\n >\n <div className=\"flex flex-col\">\n {NAMED_PLURAL_OPTIONS.filter((option) =>\n options.fields.every((field) => field.name !== option),\n ).map((option) => (\n <Popover.Close\n key={option}\n className={cn(\n \"cursor-pointer border-none bg-transparent px-1 hover:bg-elevation-250\",\n )}\n onClick={() => {\n // TODO ensure the fields are always in the same order as staticPluralOptions\n options.append(\n {\n name: option,\n content: \"\",\n },\n {\n shouldFocus: true,\n },\n );\n }}\n >\n {option}\n </Popover.Close>\n ))}\n </div>\n\n <div className=\"flex items-center justify-between gap-2 border-t border-border p-2\">\n <label htmlFor=\"customValue\">custom</label>\n <Controller\n control={control}\n name=\"customValue\"\n render={({ field }) => (\n // eslint-disable-next-line jsx-a11y/control-has-associated-label\n <input\n type=\"numeric\"\n className=\"w-8 rounded-sm border-transparent text-center focus:border-border focus:outline-none\"\n placeholder=\"=0\"\n min={0}\n value={field.value ?? \"\"}\n onChange={({ currentTarget: { value } }) => {\n const number = Number(value);\n if (isNaN(number)) return;\n if (number < 0) return;\n field.onChange(number);\n }}\n onKeyDown={(e) => {\n if (e.key !== \"Enter\") return;\n if (field.value === undefined) return;\n const isUnique = !options.fields.some(\n (existingField) =>\n existingField.name === `=${field.value}`,\n );\n if (!isUnique) return; // TODO maybe show error?\n options.append(\n {\n name: `=${field.value}`,\n content: \"\",\n },\n {\n shouldFocus: true,\n },\n );\n field.onChange(undefined);\n }}\n />\n )}\n />\n </div>\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n </div>\n </div>\n );\n}\n"],"names":["NAMED_PLURAL_OPTIONS","PluralVariableEditor","variableName","element","ref","config","useMemo","other","options","name","option","serializeICUMessage","control","register","getValues","useForm","useImperativeHandle","values","updatedElement","TYPE","content","parseICUMessage","useFieldArray","field","index","Fragment","IconX","Popover","cn","Controller","value","number","e","existingField"],"mappings":";;;;;;;AAUA,MAAMA,IAAuB,CAAC,QAAQ,OAAO,OAAO,OAAO,MAAM;AAU1D,SAASC,EAAqB;AAAA,EACnC,cAAAC;AAAA,EACA,SAAAC;AAAA,EACA,KAAAC;AACF,GAA8B;AAC5B,QAAMC,IAASC,EAIZ,MAAM;AACP,UAAM,EAAE,OAAAC,GAAO,GAAGC,MAAYL,GAAS,WAAW,CAAA;AAClD,WAAO;AAAA,MACL,QAAQA,GAAS,UAAU;AAAA,MAC3B,SAAS,OAAO,QAAQK,CAAO,EAAE,IAAI,CAAC,CAACC,GAAMC,CAAM,OAAO;AAAA,QACxD,MAAAD;AAAA,QACA,SAASE,EAAoBD,EAAO,KAAK;AAAA,MAAA,EACzC;AAAA,MACF,OAAOC,EAAoBJ,IAAQA,EAAM,QAAQ,CAAA,CAAE;AAAA,IAAA;AAAA,EAEvD,GAAG,CAACJ,CAAO,CAAC,GAEN,EAAE,SAAAS,GAAS,UAAAC,GAAU,WAAAC,EAAA,IAAcC,EAKtC;AAAA,IACD,eAAeV;AAAA,EAAA,CAChB;AAED,EAAAW,EAAoBZ,GAAK,OAAO;AAAA,IAC9B,UAAU,MAAM;AACd,YAAMa,IAASH,EAAA,GACTI,IAAgC;AAAA,QACpC,MAAMC,EAAK;AAAA,QACX,OAAOjB;AAAA,QACP,QAAQe,EAAO;AAAA,QACf,YAAYd,GAAS,cAAc;AAAA,QACnC,SAAS,OAAO;AAAA,UACdc,EAAO,QAAQ,IAAI,CAAC,EAAE,MAAAR,GAAM,SAAAW,QAAc;AAAA,YACxCX;AAAA,YACA,EAAE,OAAOY,EAAgBD,CAAO,EAAA;AAAA,UAAE,CACnC;AAAA,QAAA;AAAA,MACH;AAEF,aAAOT,EAAoB,CAACO,CAAc,CAAC;AAAA,IAC7C;AAAA,EAAA,EACA;AAEF,QAAMV,IAAUc,EAAc;AAAA,IAC5B,SAAAV;AAAA,IACA,MAAM;AAAA,EAAA,CACP;AAED,SACE,sBAAA,cAAC,OAAA,EAAI,WAAU,yBACb,sBAAA,cAAC,YAAA,EAAS,WAAU,2FAAA,GAClB,sBAAA,cAAC,UAAA,MAAO,SAAO,GACdJ,EAAQ,OAAO,IAAI,CAACe,GAAOC,MAC1B,sBAAA,cAACC,GAAA,EAAS,KAAKF,EAAM,GAAA,GACnB,sBAAA,cAAC,SAAA,EAAM,SAAS,WAAWC,CAAK,GAAA,GAAKD,EAAM,IAAK,GAEhD,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACJ,GAAGV,EAAS,WAAWW,CAAK,YAAY,EAAE,UAAU,IAAM;AAAA,IAAA;AAAA,EAAA,GAE7D,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,SAAS,MAAMhB,EAAQ,OAAOgB,CAAK;AAAA,IAAA;AAAA,IAEnC,sBAAA,cAACE,GAAA,EAAM,MAAM,GAAA,CAAI;AAAA,EAAA,CAErB,CACD,GAED,sBAAA,cAAA,MAAA,UAAA,0CACG,SAAA,EAAM,SAAQ,QAAA,GAAQ,OAAK,GAE5B,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MACT,GAAGb,EAAS,SAAS,EAAE,UAAU,IAAM;AAAA,IAAA;AAAA,EAAA,CAE5C,CACF,GACA,sBAAA,cAAC,OAAA,EAAI,WAAU,sCAAA,GACb,sBAAA,cAAC,SAAA,EAAM,WAAU,+BAAA,GAA+B,UAE9C,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,aAAY;AAAA,MACX,GAAGA,EAAS,QAAQ;AAAA,IAAA;AAAA,EAAA,CAEzB,GACA,sBAAA,cAACc,EAAQ,MAAR,MACC,sBAAA,cAACA,EAAQ,SAAR,MAAgB,YAAU,GAC3B,sBAAA,cAACA,EAAQ,QAAR,MACC,sBAAA;AAAA,IAACA,EAAQ;AAAA,IAAR;AAAA,MACC,YAAY;AAAA,MACZ,WAAU;AAAA,IAAA;AAAA,IAEV,sBAAA,cAAC,OAAA,EAAI,WAAU,gBAAA,GACZ3B,EAAqB;AAAA,MAAO,CAACU,MAC5BF,EAAQ,OAAO,MAAM,CAACe,MAAUA,EAAM,SAASb,CAAM;AAAA,IAAA,EACrD,IAAI,CAACA,MACL,sBAAA;AAAA,MAACiB,EAAQ;AAAA,MAAR;AAAA,QACC,KAAKjB;AAAA,QACL,WAAWkB;AAAA,UACT;AAAA,QAAA;AAAA,QAEF,SAAS,MAAM;AAEb,UAAApB,EAAQ;AAAA,YACN;AAAA,cACE,MAAME;AAAA,cACN,SAAS;AAAA,YAAA;AAAA,YAEX;AAAA,cACE,aAAa;AAAA,YAAA;AAAA,UACf;AAAA,QAEJ;AAAA,MAAA;AAAA,MAECA;AAAA,IAAA,CAEJ,CACH;AAAA,IAEA,sBAAA,cAAC,SAAI,WAAU,qEAAA,uCACZ,SAAA,EAAM,SAAQ,cAAA,GAAc,QAAM,GACnC,sBAAA;AAAA,MAACmB;AAAA,MAAA;AAAA,QACC,SAAAjB;AAAA,QACA,MAAK;AAAA,QACL,QAAQ,CAAC,EAAE,OAAAW,EAAA;AAAA;AAAA,UAET,sBAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,aAAY;AAAA,cACZ,KAAK;AAAA,cACL,OAAOA,EAAM,SAAS;AAAA,cACtB,UAAU,CAAC,EAAE,eAAe,EAAE,OAAAO,EAAA,QAAc;AAC1C,sBAAMC,IAAS,OAAOD,CAAK;AAC3B,gBAAI,MAAMC,CAAM,KACZA,IAAS,KACbR,EAAM,SAASQ,CAAM;AAAA,cACvB;AAAA,cACA,WAAW,CAACC,MAAM;AAOhB,gBANIA,EAAE,QAAQ,WACVT,EAAM,UAAU,UACFf,EAAQ,OAAO;AAAA,kBAC/B,CAACyB,MACCA,EAAc,SAAS,IAAIV,EAAM,KAAK;AAAA,gBAAA,MAG1Cf,EAAQ;AAAA,kBACN;AAAA,oBACE,MAAM,IAAIe,EAAM,KAAK;AAAA,oBACrB,SAAS;AAAA,kBAAA;AAAA,kBAEX;AAAA,oBACE,aAAa;AAAA,kBAAA;AAAA,gBACf,GAEFA,EAAM,SAAS,MAAS;AAAA,cAC1B;AAAA,YAAA;AAAA,UAAA;AAAA;AAAA,MACF;AAAA,IAAA,CAGN;AAAA,EAAA,CAEJ,CACF,CACF,CACF;AAEJ;"}
1	+ {"version":3,"file":"PluralVariableEditor.js","sources":["../../../../../src/components/inputs/variables/editors/PluralVariableEditor.tsx"],"sourcesContent":["import { TYPE } from \"@formatjs/icu-messageformat-parser\";\nimport { IconX } from \"@tabler/icons-react\";\nimport { Popover } from \"radix-ui\";\nimport { Fragment, useImperativeHandle, useMemo } from \"react\";\nimport { Controller, useFieldArray, useForm } from \"react-hook-form\";\n\nimport type { PluralElement } from \"@/types\";\nimport { cn } from \"@/utils/cn\";\nimport { parseICUMessage, serializeICUMessage } from \"@/utils/icu-tranform\";\n\nconst NAMED_PLURAL_OPTIONS = [\"zero\", \"one\", \"two\", \"few\", \"many\"] as const;\n\nexport interface PluralVariableEditorProps {\n variableName: string;\n element: PluralElement \| undefined;\n ref: React.Ref<{ getValue: () => string }>;\n}\n\n// TODO add support for selectordinal (\"pluralType\": \"ordinal\")\n\nexport function PluralVariableEditor({\n variableName,\n element,\n ref,\n}: PluralVariableEditorProps) {\n const config = useMemo<{\n offset: number;\n options: { name: string; content: string }[];\n other: string;\n }>(() => {\n const { other, ...options } = element?.options ?? {};\n return {\n offset: element?.offset ?? 0,\n options: Object.entries(options).map(([name, option]) => ({\n name,\n content: serializeICUMessage(option.value),\n })),\n other: serializeICUMessage(other ? other.value : []),\n };\n }, [element]);\n\n const { control, register, getValues } = useForm<{\n offset: number;\n options: { name: string; content: string }[];\n other: string;\n customValue?: number;\n }>({\n defaultValues: config,\n });\n\n useImperativeHandle(ref, () => ({\n getValue: () => {\n const values = getValues();\n const updatedElement: PluralElement = {\n type: TYPE.plural,\n value: variableName,\n offset: values.offset,\n pluralType: element?.pluralType ?? \"cardinal\",\n options: Object.fromEntries(\n values.options.map(({ name, content }) => [\n name,\n { value: parseICUMessage(content) },\n ]),\n ),\n };\n return serializeICUMessage([updatedElement]);\n },\n }));\n\n const options = useFieldArray({\n control,\n name: \"options\",\n });\n\n return (\n <div className=\"flex flex-col gap-3\">\n <fieldset className=\"mx-0 grid grid-cols-[3rem_8rem_1.5rem] gap-y-2 rounded-md border border-border px-2 pr-0\">\n <legend>Options</legend>\n {options.fields.map((field, index) => (\n <Fragment key={field.id}>\n <label htmlFor={`options.${index}`}>{field.name}</label>\n {/* // TODO add support for variable mentions /}\n <input\n className=\"focus:outline-none\"\n type=\"text\"\n {...register(`options.${index}.content`, { required: true })}\n />\n <button\n className=\"ml-auto flex cursor-pointer items-center justify-center border-none bg-transparent p-0 hover:text-error\"\n type=\"button\"\n onClick={() => options.remove(index)}\n >\n <IconX size={16} />\n </button>\n </Fragment>\n ))}\n\n <>\n <label htmlFor=\"other\">other</label>\n {/ // TODO add support for variable mentions */}\n <input\n type=\"text\"\n className=\"col-span-2 focus:outline-none\"\n {...register(\"other\", { required: true })}\n />\n </>\n </fieldset>\n <div className=\"grid grid-cols-2 items-center gap-2\">\n <label className=\"flex items-center gap-3 pl-2\">\n offset\n <input\n className=\"w-8 text-center\"\n type=\"numeric\"\n placeholder=\"0\"\n {...register(\"offset\")}\n />\n </label>\n <Popover.Root>\n <Popover.Trigger>Add Option</Popover.Trigger>\n <Popover.Portal>\n <Popover.Content\n sideOffset={4}\n className=\"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-elevation-50 shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\"\n >\n <div className=\"flex flex-col\">\n {NAMED_PLURAL_OPTIONS.filter((option) =>\n options.fields.every((field) => field.name !== option),\n ).map((option) => (\n <Popover.Close\n key={option}\n className={cn(\n \"cursor-pointer border-none bg-transparent px-1 hover:bg-elevation-250\",\n )}\n onClick={() => {\n // TODO ensure the fields are always in the same order as staticPluralOptions\n options.append(\n {\n name: option,\n content: \"\",\n },\n {\n shouldFocus: true,\n },\n );\n }}\n >\n {option}\n </Popover.Close>\n ))}\n </div>\n\n <div className=\"flex items-center justify-between gap-2 border-t border-border p-2\">\n <label htmlFor=\"customValue\">custom</label>\n <Controller\n control={control}\n name=\"customValue\"\n render={({ field }) => (\n // eslint-disable-next-line jsx-a11y/control-has-associated-label\n <input\n type=\"numeric\"\n className=\"w-8 rounded-sm border-transparent text-center focus:border-border focus:outline-none\"\n placeholder=\"=0\"\n min={0}\n value={field.value ?? \"\"}\n onChange={({ currentTarget: { value } }) => {\n const number = Number(value);\n if (isNaN(number)) return;\n if (number < 0) return;\n field.onChange(number);\n }}\n onKeyDown={(e) => {\n if (e.key !== \"Enter\") return;\n if (field.value === undefined) return;\n const isUnique = !options.fields.some(\n (existingField) =>\n existingField.name === `=${field.value}`,\n );\n if (!isUnique) return; // TODO maybe show error?\n options.append(\n {\n name: `=${field.value}`,\n content: \"\",\n },\n {\n shouldFocus: true,\n },\n );\n field.onChange(undefined);\n }}\n />\n )}\n />\n </div>\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n </div>\n </div>\n );\n}\n"],"names":["NAMED_PLURAL_OPTIONS","PluralVariableEditor","variableName","element","ref","config","useMemo","other","options","name","option","serializeICUMessage","control","register","getValues","useForm","useImperativeHandle","values","updatedElement","TYPE","content","parseICUMessage","useFieldArray","jsxs","jsx","field","index","Fragment","IconX","Popover","cn","Controller","value","number","e","existingField"],"mappings":"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"}

package/dist/components/inputs/variables/editors/SelectVariableEditor.d.ts CHANGED Viewed

@@ -3,4 +3,4 @@ export interface SelectVariableEditorProps {
     element: SelectElement;
     onUpdate: (value: string) => void;
 }
-export declare function SelectVariableEditor({ element, onUpdate, }: SelectVariableEditorProps): import("react").JSX.Element;
+export declare function SelectVariableEditor({ element, onUpdate, }: SelectVariableEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/variables/editors/SelectVariableEditor.js CHANGED Viewed

@@ -1,42 +1,46 @@
-import { useMemo as u, useEffect as f } from "react";
-import { useForm as d, useFieldArray as E } from "react-hook-form";
-import { serializeICUMessage as o, parseICUMessage as g } from "../../../../utils/icu-tranform.js";
-function N({
-  element: a,
-  onUpdate: s
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import { useMemo as d, useEffect as x } from "react";
+import { useForm as g, useFieldArray as v } from "react-hook-form";
+import { serializeICUMessage as n, parseICUMessage as b } from "../../../../utils/icu-tranform.js";
+function M({
+  element: s,
+  onUpdate: a
 }) {
-  const n = u(
-    () => Object.entries(a.options).map(([e, t]) => ({
+  const r = d(
+    () => Object.entries(s.options).map(([e, o]) => ({
       name: e,
-      content: o(t.value)
+      content: n(o.value)
     })),
-    [a]
-  ), { control: c, register: r, getValues: l } = d({
-    defaultValues: { options: n }
-  }), { fields: m } = E({
-    control: c,
+    [s]
+  ), { control: i, register: l, getValues: c } = g({
+    defaultValues: { options: r }
+  }), { fields: m } = v({
+    control: i,
     name: "options"
   });
-  return f(() => () => {
-    const e = l(), t = {
-      ...a,
+  return x(() => () => {
+    const e = c(), o = {
+      ...s,
       options: Object.fromEntries(
-        e.options.map(({ name: i, content: p }) => [
-          i,
-          { value: g(p) }
+        e.options.map(({ name: p, content: u }) => [
+          p,
+          { value: b(u) }
         ])
       )
     };
-    s(o([t]));
-  }, []), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2 p-3" }, m.map((e, t) => /* @__PURE__ */ React.createElement("div", { key: e.name, className: "flex flex-col gap-1" }, /* @__PURE__ */ React.createElement("label", { className: "text-sm font-medium" }, e.name), /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      className: "focus:outline-none",
-      ...r(`options.${t}.content`)
-    }
-  ))));
+    a(n([o]));
+  }, []), /* @__PURE__ */ t("div", { className: "flex flex-col gap-2 p-3", children: m.map((e, o) => /* @__PURE__ */ f("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ t("label", { className: "text-sm font-medium", children: e.name }),
+    /* @__PURE__ */ t(
+      "input",
+      {
+        className: "focus:outline-none",
+        ...l(`options.${o}.content`)
+      }
+    )
+  ] }, e.name)) });
 }
 export {
-  N as SelectVariableEditor
+  M as SelectVariableEditor
 };
 //# sourceMappingURL=SelectVariableEditor.js.map

package/dist/components/inputs/variables/editors/SelectVariableEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectVariableEditor.js","sources":["../../../../../src/components/inputs/variables/editors/SelectVariableEditor.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport { useFieldArray, useForm } from \"react-hook-form\";\n\nimport type { SelectElement } from \"@/types\";\nimport { parseICUMessage, serializeICUMessage } from \"@/utils/icu-tranform\";\n\nexport interface SelectVariableEditorProps {\n element: SelectElement;\n onUpdate: (value: string) => void;\n}\n\nexport function SelectVariableEditor({\n element,\n onUpdate,\n}: SelectVariableEditorProps) {\n const options = useMemo<{ name: string; content: string }[]>(\n () =>\n Object.entries(element.options).map(([name, option]) => ({\n name,\n content: serializeICUMessage(option.value),\n })),\n [element],\n );\n\n const { control, register, getValues } = useForm<{\n options: { name: string; content: string }[];\n }>({\n defaultValues: { options },\n });\n const { fields } = useFieldArray({\n control,\n name: \"options\",\n });\n\n useEffect(() => {\n return () => {\n const values = getValues();\n const updatedElement: SelectElement = {\n ...element,\n options: Object.fromEntries(\n values.options.map(({ name, content }) => [\n name,\n { value: parseICUMessage(content) },\n ]),\n ),\n };\n onUpdate(serializeICUMessage([updatedElement]));\n };\n }, []);\n\n return (\n <div className=\"flex flex-col gap-2 p-3\">\n {fields.map((field, index) => (\n <div key={field.name} className=\"flex flex-col gap-1\">\n <label className=\"text-sm font-medium\">{field.name}</label>\n {/* // TODO add support for variable mentions */}\n <input\n className=\"focus:outline-none\"\n {...register(`options.${index}.content`)}\n />\n </div>\n ))}\n </div>\n );\n}\n"],"names":["SelectVariableEditor","element","onUpdate","options","useMemo","name","option","serializeICUMessage","control","register","getValues","useForm","fields","useFieldArray","useEffect","values","updatedElement","content","parseICUMessage","field","index"],"mappings":"~~;;;~~AAWO,SAASA,EAAqB;AAAA,EACnC,SAAAC;AAAA,EACA,UAAAC;AACF,GAA8B;AAC5B,QAAMC,IAAUC;AAAA,IACd,MACE,OAAO,QAAQH,EAAQ,OAAO,EAAE,IAAI,CAAC,CAACI,GAAMC,CAAM,OAAO;AAAA,MACvD,MAAAD;AAAA,MACA,SAASE,EAAoBD,EAAO,KAAK;AAAA,IAAA,EACzC;AAAA,IACJ,CAACL,CAAO;AAAA,EAAA,GAGJ,EAAE,SAAAO,GAAS,UAAAC,GAAU,WAAAC,EAAA,IAAcC,EAEtC;AAAA,IACD,eAAe,EAAE,SAAAR,EAAA;AAAA,EAAQ,CAC1B,GACK,EAAE,QAAAS,EAAA,IAAWC,EAAc;AAAA,IAC/B,SAAAL;AAAA,IACA,MAAM;AAAA,EAAA,CACP;AAED,SAAAM,EAAU,MACD,MAAM;AACX,UAAMC,IAASL,EAAA,GACTM,IAAgC;AAAA,MACpC,GAAGf;AAAA,MACH,SAAS,OAAO;AAAA,QACdc,EAAO,QAAQ,IAAI,CAAC,EAAE,MAAAV,GAAM,SAAAY,QAAc;AAAA,UACxCZ;AAAA,UACA,EAAE,OAAOa,EAAgBD,CAAO,EAAA;AAAA,QAAE,CACnC;AAAA,MAAA;AAAA,IACH;AAEF,IAAAf,EAASK,EAAoB,CAACS,CAAc,CAAC,CAAC;AAAA,EAChD,GACC,CAAA,CAAE,GAGH,~~sBAAA~~,~~cAAC~~,~~SAAI~~,WAAU,~~0BAAA~~,~~GACZJ~~,EAAO,IAAI,~~CAACO~~,GAAOC,MAClB,~~sBAAA~~,~~cAAC~~,OAAA,~~EAAI~~,~~KAAKD~~,~~EAAM~~,~~MAAM~~,~~WAAU~~,~~sBAAA~~,~~GAC9B~~,~~sBAAA~~,~~cAAC~~,~~WAAM,~~WAAU,~~sBAAA~~,~~GAAuBA~~,EAAM,~~IAAK~~,~~GAEnD~~,~~sBAAA~~;AAAA,~~IAAC~~;AAAA,~~IAAA~~;AAAA,~~MACC~~,WAAU;AAAA,~~MACT~~,GAAGV,EAAS,~~WAAWW~~,CAAK,UAAU;AAAA,IAAA;AAAA,EAAA,~~CAE3C~~,CACD,~~CACH~~;AAEJ;"}
1	+ {"version":3,"file":"SelectVariableEditor.js","sources":["../../../../../src/components/inputs/variables/editors/SelectVariableEditor.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport { useFieldArray, useForm } from \"react-hook-form\";\n\nimport type { SelectElement } from \"@/types\";\nimport { parseICUMessage, serializeICUMessage } from \"@/utils/icu-tranform\";\n\nexport interface SelectVariableEditorProps {\n element: SelectElement;\n onUpdate: (value: string) => void;\n}\n\nexport function SelectVariableEditor({\n element,\n onUpdate,\n}: SelectVariableEditorProps) {\n const options = useMemo<{ name: string; content: string }[]>(\n () =>\n Object.entries(element.options).map(([name, option]) => ({\n name,\n content: serializeICUMessage(option.value),\n })),\n [element],\n );\n\n const { control, register, getValues } = useForm<{\n options: { name: string; content: string }[];\n }>({\n defaultValues: { options },\n });\n const { fields } = useFieldArray({\n control,\n name: \"options\",\n });\n\n useEffect(() => {\n return () => {\n const values = getValues();\n const updatedElement: SelectElement = {\n ...element,\n options: Object.fromEntries(\n values.options.map(({ name, content }) => [\n name,\n { value: parseICUMessage(content) },\n ]),\n ),\n };\n onUpdate(serializeICUMessage([updatedElement]));\n };\n }, []);\n\n return (\n <div className=\"flex flex-col gap-2 p-3\">\n {fields.map((field, index) => (\n <div key={field.name} className=\"flex flex-col gap-1\">\n <label className=\"text-sm font-medium\">{field.name}</label>\n {/* // TODO add support for variable mentions */}\n <input\n className=\"focus:outline-none\"\n {...register(`options.${index}.content`)}\n />\n </div>\n ))}\n </div>\n );\n}\n"],"names":["SelectVariableEditor","element","onUpdate","options","useMemo","name","option","serializeICUMessage","control","register","getValues","useForm","fields","useFieldArray","useEffect","values","updatedElement","content","parseICUMessage","jsx","field","index","jsxs"],"mappings":";;;;AAWO,SAASA,EAAqB;AAAA,EACnC,SAAAC;AAAA,EACA,UAAAC;AACF,GAA8B;AAC5B,QAAMC,IAAUC;AAAA,IACd,MACE,OAAO,QAAQH,EAAQ,OAAO,EAAE,IAAI,CAAC,CAACI,GAAMC,CAAM,OAAO;AAAA,MACvD,MAAAD;AAAA,MACA,SAASE,EAAoBD,EAAO,KAAK;AAAA,IAAA,EACzC;AAAA,IACJ,CAACL,CAAO;AAAA,EAAA,GAGJ,EAAE,SAAAO,GAAS,UAAAC,GAAU,WAAAC,EAAA,IAAcC,EAEtC;AAAA,IACD,eAAe,EAAE,SAAAR,EAAA;AAAA,EAAQ,CAC1B,GACK,EAAE,QAAAS,EAAA,IAAWC,EAAc;AAAA,IAC/B,SAAAL;AAAA,IACA,MAAM;AAAA,EAAA,CACP;AAED,SAAAM,EAAU,MACD,MAAM;AACX,UAAMC,IAASL,EAAA,GACTM,IAAgC;AAAA,MACpC,GAAGf;AAAA,MACH,SAAS,OAAO;AAAA,QACdc,EAAO,QAAQ,IAAI,CAAC,EAAE,MAAAV,GAAM,SAAAY,QAAc;AAAA,UACxCZ;AAAA,UACA,EAAE,OAAOa,EAAgBD,CAAO,EAAA;AAAA,QAAE,CACnC;AAAA,MAAA;AAAA,IACH;AAEF,IAAAf,EAASK,EAAoB,CAACS,CAAc,CAAC,CAAC;AAAA,EAChD,GACC,CAAA,CAAE,GAGH,gBAAAG,EAAC,OAAA,EAAI,WAAU,2BACZ,UAAAP,EAAO,IAAI,CAACQ,GAAOC,MAClB,gBAAAC,EAAC,OAAA,EAAqB,WAAU,uBAC9B,UAAA;AAAA,IAAA,gBAAAH,EAAC,SAAA,EAAM,WAAU,uBAAuB,UAAAC,EAAM,MAAK;AAAA,IAEnD,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACT,GAAGV,EAAS,WAAWY,CAAK,UAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACzC,EAAA,GANQD,EAAM,IAOhB,CACD,GACH;AAEJ;"}

package/dist/components/inputs/variables/editors/TagVariableEditor.d.ts CHANGED Viewed

@@ -3,4 +3,4 @@ export interface TagVariableEditorProps {
     element: TagElement;
     onUpdate: (value: string) => void;
 }
-export declare function TagVariableEditor({ element, onUpdate, }: TagVariableEditorProps): import("react").JSX.Element;
+export declare function TagVariableEditor({ element, onUpdate, }: TagVariableEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/variables/editors/TagVariableEditor.js CHANGED Viewed

@@ -1,32 +1,33 @@
-import { useMemo as i, useEffect as u } from "react";
-import { useForm as l } from "react-hook-form";
-import { serializeICUMessage as t, parseICUMessage as m } from "../../../../utils/icu-tranform.js";
-function g({
+import { jsx as i } from "react/jsx-runtime";
+import { useMemo as u, useEffect as m } from "react";
+import { useForm as f } from "react-hook-form";
+import { serializeICUMessage as t, parseICUMessage as l } from "../../../../utils/icu-tranform.js";
+function E({
   element: e,
   onUpdate: o
 }) {
-  const r = i(
+  const r = u(
     () => t(e.children),
     [e]
-  ), { register: n, getValues: s } = l({
+  ), { register: s, getValues: n } = f({
     defaultValues: { content: r }
   });
-  return u(() => () => {
-    const { content: a } = s(), c = {
+  return m(() => () => {
+    const { content: a } = n(), c = {
       ...e,
-      children: m(a)
+      children: l(a)
     };
     o(t([c]));
-  }, []), /* @__PURE__ */ React.createElement(
+  }, []), /* @__PURE__ */ i(
     "textarea",
     {
       className: "p-3 focus:outline-none",
-      ...n("content"),
+      ...s("content"),
       rows: 1
     }
   );
 }
 export {
-  g as TagVariableEditor
+  E as TagVariableEditor
 };
 //# sourceMappingURL=TagVariableEditor.js.map

package/dist/components/inputs/variables/editors/TagVariableEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TagVariableEditor.js","sources":["../../../../../src/components/inputs/variables/editors/TagVariableEditor.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport { useForm } from \"react-hook-form\";\n\nimport type { TagElement } from \"@/types\";\nimport { parseICUMessage, serializeICUMessage } from \"@/utils/icu-tranform\";\n\nexport interface TagVariableEditorProps {\n element: TagElement;\n onUpdate: (value: string) => void;\n}\n\nexport function TagVariableEditor({\n element,\n onUpdate,\n}: TagVariableEditorProps) {\n const content = useMemo<string>(\n () => serializeICUMessage(element.children),\n [element],\n );\n\n const { register, getValues } = useForm<{ content: string }>({\n defaultValues: { content },\n });\n\n useEffect(() => {\n return () => {\n const { content } = getValues();\n // TODO find better solution for this\n const updatedElement: TagElement = {\n ...element,\n children: parseICUMessage(content),\n };\n onUpdate(serializeICUMessage([updatedElement]));\n };\n }, []);\n\n // TODO add support for variable mentions\n return (\n <textarea\n className=\"p-3 focus:outline-none\"\n {...register(\"content\")}\n rows={1}\n />\n );\n}\n"],"names":["TagVariableEditor","element","onUpdate","content","useMemo","serializeICUMessage","register","getValues","useForm","useEffect","updatedElement","parseICUMessage"],"mappings":"~~;;;~~AAWO,SAASA,EAAkB;AAAA,EAChC,SAAAC;AAAA,EACA,UAAAC;AACF,GAA2B;AACzB,QAAMC,IAAUC;AAAA,IACd,MAAMC,EAAoBJ,EAAQ,QAAQ;AAAA,IAC1C,CAACA,CAAO;AAAA,EAAA,GAGJ,EAAE,UAAAK,GAAU,WAAAC,EAAA,IAAcC,EAA6B;AAAA,IAC3D,eAAe,EAAE,SAAAL,EAAA;AAAA,EAAQ,CAC1B;AAED,SAAAM,EAAU,MACD,MAAM;AACX,UAAM,EAAE,SAAAN,EAAAA,IAAYI,EAAA,GAEdG,IAA6B;AAAA,MACjC,GAAGT;AAAA,MACH,UAAUU,EAAgBR,CAAO;AAAA,IAAA;AAEnC,IAAAD,EAASG,EAAoB,CAACK,CAAc,CAAC,CAAC;AAAA,EAChD,GACC,CAAA,CAAE,GAIH,~~sBAAA~~;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACT,~~GAAGJ~~,EAAS,SAAS;AAAA,MACtB,MAAM;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
1	+ {"version":3,"file":"TagVariableEditor.js","sources":["../../../../../src/components/inputs/variables/editors/TagVariableEditor.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport { useForm } from \"react-hook-form\";\n\nimport type { TagElement } from \"@/types\";\nimport { parseICUMessage, serializeICUMessage } from \"@/utils/icu-tranform\";\n\nexport interface TagVariableEditorProps {\n element: TagElement;\n onUpdate: (value: string) => void;\n}\n\nexport function TagVariableEditor({\n element,\n onUpdate,\n}: TagVariableEditorProps) {\n const content = useMemo<string>(\n () => serializeICUMessage(element.children),\n [element],\n );\n\n const { register, getValues } = useForm<{ content: string }>({\n defaultValues: { content },\n });\n\n useEffect(() => {\n return () => {\n const { content } = getValues();\n // TODO find better solution for this\n const updatedElement: TagElement = {\n ...element,\n children: parseICUMessage(content),\n };\n onUpdate(serializeICUMessage([updatedElement]));\n };\n }, []);\n\n // TODO add support for variable mentions\n return (\n <textarea\n className=\"p-3 focus:outline-none\"\n {...register(\"content\")}\n rows={1}\n />\n );\n}\n"],"names":["TagVariableEditor","element","onUpdate","content","useMemo","serializeICUMessage","register","getValues","useForm","useEffect","updatedElement","parseICUMessage","jsx"],"mappings":";;;;AAWO,SAASA,EAAkB;AAAA,EAChC,SAAAC;AAAA,EACA,UAAAC;AACF,GAA2B;AACzB,QAAMC,IAAUC;AAAA,IACd,MAAMC,EAAoBJ,EAAQ,QAAQ;AAAA,IAC1C,CAACA,CAAO;AAAA,EAAA,GAGJ,EAAE,UAAAK,GAAU,WAAAC,EAAA,IAAcC,EAA6B;AAAA,IAC3D,eAAe,EAAE,SAAAL,EAAA;AAAA,EAAQ,CAC1B;AAED,SAAAM,EAAU,MACD,MAAM;AACX,UAAM,EAAE,SAAAN,EAAAA,IAAYI,EAAA,GAEdG,IAA6B;AAAA,MACjC,GAAGT;AAAA,MACH,UAAUU,EAAgBR,CAAO;AAAA,IAAA;AAEnC,IAAAD,EAASG,EAAoB,CAACK,CAAc,CAAC,CAAC;AAAA,EAChD,GACC,CAAA,CAAE,GAIH,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACT,GAAGN,EAAS,SAAS;AAAA,MACtB,MAAM;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

package/dist/components/inputs/variables/editors/TimeVariableEditor.d.ts CHANGED Viewed

@@ -6,4 +6,4 @@ export interface TimeElementEditorProps {
         getValue: () => string;
     }>;
 }
-export declare function TimeElementEditor({ name, element, ref, }: TimeElementEditorProps): import("react").JSX.Element;
+export declare function TimeElementEditor({ name, element, ref, }: TimeElementEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/variables/pickers/NumericVariablePicker.d.ts CHANGED Viewed

@@ -3,4 +3,4 @@ export interface NumericVariablePickerProps {
     element: NumberElement | PluralElement;
     onUpdate: (value: string) => void;
 }
-export declare function NumericVariablePicker({ element, onUpdate, }: NumericVariablePickerProps): import("react").JSX.Element;
+export declare function NumericVariablePicker({ element, onUpdate, }: NumericVariablePickerProps): import("react/jsx-runtime").JSX.Element;