@intlayer/design-system 3.5.5 → 3.5.6

package/dist/components/DictionaryFieldEditor/DictionaryDetails/useDictionaryDetailsSchema.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useDictionaryDetailsSchema.mjs","sources":["../../../../src/components/DictionaryFieldEditor/DictionaryDetails/useDictionaryDetailsSchema.ts"],"sourcesContent":["// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { z } from 'zod';\nimport { useDictionaryDetailsSchemaContent } from './useDictionaryDetailsSchema.content';\n\nexport const useDictionaryDetailsSchema = (projectId: string) => {\n  const {\n    titleRequiredError,\n    titleInvalidTypeError,\n    titleMinLengthError,\n    keyRequiredError,\n    keyInvalidTypeError,\n    keySpaceError,\n    keyMinLengthError,\n    descriptionRequiredError,\n    descriptionInvalidTypeError,\n    requiredErrorProjectId,\n    invalidTypeErrorProjectId,\n  } = useDictionary(useDictionaryDetailsSchemaContent);\n\n  return z.object({\n    title: z\n      .string({\n        required_error: titleRequiredError,\n        invalid_type_error: titleInvalidTypeError,\n      })\n      // Can be length of 0 or > 4\n      .refine((val) => val.length === 0 || val.length >= 4, {\n        message: titleMinLengthError,\n      })\n      .optional(),\n    key: z\n      .string({\n        required_error: keyRequiredError,\n        invalid_type_error: keyInvalidTypeError,\n      })\n      .min(4, { message: keyMinLengthError })\n      /**\n       * Valid :\n       * my-key\n       * my_key\n       *\n       * Invalid :\n       * my key\n       * my.key\n       */\n      .regex(/^[a-zA-Z0-9-_]+$/, { message: keySpaceError })\n      .default(''),\n    description: z\n      .string({\n        required_error: descriptionRequiredError,\n        invalid_type_error: descriptionInvalidTypeError,\n      })\n      .optional(),\n    projectIds: z\n      .array(\n        z.string({\n          required_error: requiredErrorProjectId,\n          invalid_type_error: invalidTypeErrorProjectId,\n        })\n      )\n      .default([projectId]),\n  });\n};\n\nexport type DictionaryDetailsFormData = z.infer<\n  ReturnType<typeof useDictionaryDetailsSchema>\n>;\n"],"names":[],"mappings":";;;AAKa,MAAA,6BAA6B,CAAC,cAAsB;AACzD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,cAAc,iCAAiC;AAEnD,SAAO,EAAE,OAAO;AAAA,IACd,OAAO,EACJ,OAAO;AAAA,MACN,gBAAgB;AAAA,MAChB,oBAAoB;AAAA,IAAA,CACrB,EAEA,OAAO,CAAC,QAAQ,IAAI,WAAW,KAAK,IAAI,UAAU,GAAG;AAAA,MACpD,SAAS;AAAA,IACV,CAAA,EACA,SAAS;AAAA,IACZ,KAAK,EACF,OAAO;AAAA,MACN,gBAAgB;AAAA,MAChB,oBAAoB;AAAA,IACrB,CAAA,EACA,IAAI,GAAG,EAAE,SAAS,kBAAkB,CAAC,EAUrC,MAAM,oBAAoB,EAAE,SAAS,cAAe,CAAA,EACpD,QAAQ,EAAE;AAAA,IACb,aAAa,EACV,OAAO;AAAA,MACN,gBAAgB;AAAA,MAChB,oBAAoB;AAAA,IACrB,CAAA,EACA,SAAS;AAAA,IACZ,YAAY,EACT;AAAA,MACC,EAAE,OAAO;AAAA,QACP,gBAAgB;AAAA,QAChB,oBAAoB;AAAA,MACrB,CAAA;AAAA,IAAA,EAEF,QAAQ,CAAC,SAAS,CAAC;AAAA,EAAA,CACvB;AACH;"}
+{"version":3,"file":"useDictionaryDetailsSchema.mjs","sources":["../../../../src/components/DictionaryFieldEditor/DictionaryDetails/useDictionaryDetailsSchema.ts"],"sourcesContent":["// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { z } from 'zod';\nimport { useDictionaryDetailsSchemaContent } from './useDictionaryDetailsSchema.content';\n\nexport const useDictionaryDetailsSchema = (projectId: string) => {\n  const {\n    titleRequiredError,\n    titleInvalidTypeError,\n    titleMinLengthError,\n    keyRequiredError,\n    keyInvalidTypeError,\n    keySpaceError,\n    keyMinLengthError,\n    descriptionRequiredError,\n    descriptionInvalidTypeError,\n    requiredErrorProjectId,\n    invalidTypeErrorProjectId,\n    invalidTypeErrorTags,\n  } = useDictionary(useDictionaryDetailsSchemaContent);\n\n  return z.object({\n    title: z\n      .string({\n        required_error: titleRequiredError,\n        invalid_type_error: titleInvalidTypeError,\n      })\n      // Can be length of 0 or > 4\n      .refine((val) => val.length === 0 || val.length >= 4, {\n        message: titleMinLengthError,\n      })\n      .optional(),\n    key: z\n      .string({\n        required_error: keyRequiredError,\n        invalid_type_error: keyInvalidTypeError,\n      })\n      .min(4, { message: keyMinLengthError })\n      /**\n       * Valid :\n       * my-key\n       * my_key\n       *\n       * Invalid :\n       * my key\n       * my.key\n       */\n      .regex(/^[a-zA-Z0-9-_]+$/, { message: keySpaceError })\n      .default(''),\n    description: z\n      .string({\n        required_error: descriptionRequiredError,\n        invalid_type_error: descriptionInvalidTypeError,\n      })\n      .optional(),\n    projectIds: z\n      .array(\n        z.string({\n          required_error: requiredErrorProjectId,\n          invalid_type_error: invalidTypeErrorProjectId,\n        })\n      )\n      .default([projectId]),\n    tags: z\n      .array(\n        z.string({\n          invalid_type_error: invalidTypeErrorTags,\n        })\n      )\n      .default([]),\n    publishedVersion: z.string().default('-1'),\n  });\n};\n\nexport type DictionaryDetailsFormData = z.infer<\n  ReturnType<typeof useDictionaryDetailsSchema>\n>;\n"],"names":[],"mappings":";;;AAKa,MAAA,6BAA6B,CAAC,cAAsB;AACzD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,cAAc,iCAAiC;AAEnD,SAAO,EAAE,OAAO;AAAA,IACd,OAAO,EACJ,OAAO;AAAA,MACN,gBAAgB;AAAA,MAChB,oBAAoB;AAAA,IAAA,CACrB,EAEA,OAAO,CAAC,QAAQ,IAAI,WAAW,KAAK,IAAI,UAAU,GAAG;AAAA,MACpD,SAAS;AAAA,IACV,CAAA,EACA,SAAS;AAAA,IACZ,KAAK,EACF,OAAO;AAAA,MACN,gBAAgB;AAAA,MAChB,oBAAoB;AAAA,IACrB,CAAA,EACA,IAAI,GAAG,EAAE,SAAS,kBAAkB,CAAC,EAUrC,MAAM,oBAAoB,EAAE,SAAS,cAAe,CAAA,EACpD,QAAQ,EAAE;AAAA,IACb,aAAa,EACV,OAAO;AAAA,MACN,gBAAgB;AAAA,MAChB,oBAAoB;AAAA,IACrB,CAAA,EACA,SAAS;AAAA,IACZ,YAAY,EACT;AAAA,MACC,EAAE,OAAO;AAAA,QACP,gBAAgB;AAAA,QAChB,oBAAoB;AAAA,MACrB,CAAA;AAAA,IAAA,EAEF,QAAQ,CAAC,SAAS,CAAC;AAAA,IACtB,MAAM,EACH;AAAA,MACC,EAAE,OAAO;AAAA,QACP,oBAAoB;AAAA,MACrB,CAAA;AAAA,IAAA,EAEF,QAAQ,CAAA,CAAE;AAAA,IACb,kBAAkB,EAAE,OAAO,EAAE,QAAQ,IAAI;AAAA,EAAA,CAC1C;AACH;"}

package/dist/components/DictionaryFieldEditor/DictionaryFieldEditor.cjs

@@ -28,7 +28,14 @@ require("../../Form-BDcoNTLV.cjs");
 require("../DictionaryEditor/validDictionaryChangeButtons.content.cjs");
 require("zod");
 const components_Headers_index = require("../Headers/index.cjs");
+require("fuse.js");
+require("../DropDown/index.cjs");
+require("../Input/Input.cjs");
+require("../Input/InputPassword.cjs");
+require("../Input/Checkbox.cjs");
 const components_SwitchSelector_index = require("../SwitchSelector/index.cjs");
+require("../LocaleSwitcherContentDropDown/localeSwitcher.content.cjs");
+const components_LocaleSwitcherContentDropDown_LocaleSwitcherContentContext = require("../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.cjs");
 const components_DictionaryFieldEditor_DictionaryDetails_DictionaryDetailsForm = require("./DictionaryDetails/DictionaryDetailsForm.cjs");
 const components_DictionaryFieldEditor_dictionaryFieldEditor_content = require("./dictionaryFieldEditor.content.cjs");
 const components_DictionaryFieldEditor_JSONEditor = require("./JSONEditor.cjs");
@@ -37,7 +44,8 @@ const components_DictionaryFieldEditor_SaveForm_SaveForm = require("./SaveForm/S
 const DictionaryFieldEditor = ({
   dictionary,
   onClickDictionaryList,
-  isDarkMode
+  isDarkMode,
+  availableLocales
 }) => {
   const { key } = dictionary;
   const [editorView, setEditorView] = require$$0.useState(
@@ -58,7 +66,7 @@ const DictionaryFieldEditor = ({
       [key]: dictionary
     });
   }, [dictionary, key, setDictionariesRecord, dictionaryRecord]);
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex size-full flex-1 flex-col gap-10", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_LocaleSwitcherContentDropDown_LocaleSwitcherContentContext.LocaleSwitcherContentProvider, { availableLocales, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex size-full flex-1 flex-col gap-10", children: [
     /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
         components_Button_Button.Button,
@@ -121,13 +129,13 @@ const DictionaryFieldEditor = ({
               ]
             }
           ),
-          editorView === 0 && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_DictionaryFieldEditor_NodeEditor.NodeEditor, { dictionary }),
+          editorView === 0 && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_DictionaryFieldEditor_NodeEditor.NodeEditor, { dictionary, locales: availableLocales }),
           editorView === 1 && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_DictionaryFieldEditor_JSONEditor.JSONEditor, { dictionary, isDarkMode }),
           /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_DictionaryFieldEditor_SaveForm_SaveForm.SaveForm, { dictionary })
         ]
       }
     )
-  ] });
+  ] }) });
 };
 exports.DictionaryFieldEditor = DictionaryFieldEditor;
 //# sourceMappingURL=DictionaryFieldEditor.cjs.map

package/dist/components/DictionaryFieldEditor/DictionaryFieldEditor.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DictionaryFieldEditor.cjs","sources":["../../../src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Dictionary } from '@intlayer/core';\nimport { ArrowLeft } from 'lucide-react';\nimport { useEffect, useState, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { useShallow } from 'zustand/react/shallow';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { useEditedContentStore } from '../DictionaryEditor';\nimport { H2 } from '../Headers';\nimport { SwitchSelector } from '../SwitchSelector';\nimport { DictionaryDetailsForm } from './DictionaryDetails/DictionaryDetailsForm';\nimport { dictionaryFieldEditorContent } from './dictionaryFieldEditor.content';\nimport { JSONEditor } from './JSONEditor';\nimport { NodeEditor } from './NodeEditor';\nimport { SaveForm } from './SaveForm/SaveForm';\n\ntype DictionaryFieldEditorProps = {\n  dictionary: Dictionary;\n  onClickDictionaryList?: () => void;\n  isDarkMode?: boolean;\n};\n\nenum EditorViewType {\n  NodeEditor,\n  JSONEditor,\n}\n\nexport const DictionaryFieldEditor: FC<DictionaryFieldEditorProps> = ({\n  dictionary,\n  onClickDictionaryList,\n  isDarkMode,\n}) => {\n  const { key } = dictionary;\n  const [editorView, setEditorView] = useState<EditorViewType>(\n    EditorViewType.NodeEditor\n  );\n  const { dictionaryRecord, setDictionariesRecord } = useEditedContentStore(\n    useShallow((s) => ({\n      editedContent: s.editedContent,\n      dictionaryRecord: s.dictionariesRecord,\n      setDictionariesRecord: s.setDictionariesRecord,\n    }))\n  );\n  const { returnToDictionaryList, titleContent, titleInformation } =\n    useDictionary(dictionaryFieldEditorContent);\n\n  useEffect(() => {\n    if (dictionaryRecord[key]) return;\n\n    setDictionariesRecord({\n      [key]: dictionary,\n    });\n  }, [dictionary, key, setDictionariesRecord, dictionaryRecord]);\n\n  return (\n    <div className=\"flex size-full flex-1 flex-col gap-10\">\n      <div className=\"flex items-center gap-2\">\n        <Button\n          onClick={() => onClickDictionaryList?.()}\n          variant=\"hoverable\"\n          size=\"icon-md\"\n          color=\"text\"\n          id=\"return-to-dictionary-list\"\n          Icon={ArrowLeft}\n          label={returnToDictionaryList.label}\n        />\n        <label\n          className=\"cursor-pointer text-xs hover:underline\"\n          htmlFor=\"return-to-dictionary-list\"\n        >\n          {returnToDictionaryList.text}\n        </label>\n      </div>\n\n      <Container\n        className=\"flex size-full justify-center gap-10 p-6\"\n        roundedSize=\"xl\"\n      >\n        <H2>{titleInformation}</H2>\n\n        <DictionaryDetailsForm dictionary={dictionary} />\n      </Container>\n\n      <Container\n        className=\"flex size-full justify-center gap-10 p-6\"\n        roundedSize=\"xl\"\n      >\n        <H2>{titleContent}</H2>\n        <SwitchSelector\n          defaultValue={editorView}\n          onChange={(value) => setEditorView(value)}\n          color=\"text\"\n          size=\"sm\"\n          className=\"ml-auto\"\n          choices={[\n            {\n              content: 'Node editor',\n              value: EditorViewType.NodeEditor,\n            },\n            {\n              content: 'JSON editor',\n              value: EditorViewType.JSONEditor,\n            },\n          ]}\n        />\n        {editorView === EditorViewType.NodeEditor && (\n          <NodeEditor dictionary={dictionary} />\n        )}\n        {editorView === EditorViewType.JSONEditor && (\n          <JSONEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n        )}\n        <SaveForm dictionary={dictionary} />\n      </Container>\n    </div>\n  );\n};\n"],"names":["useState","useEditedContentStore","useShallow","useDictionary","dictionaryFieldEditorContent","useEffect","jsxs","jsx","Button","ArrowLeft","Container","H2","DictionaryDetailsForm","SwitchSelector","NodeEditor","JSONEditor","SaveForm"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACE,QAAA,EAAE,QAAQ;AACV,QAAA,CAAC,YAAY,aAAa,IAAIA,WAAA;AAAA,IAClC;AAAA;AAAA,EACF;AACM,QAAA,EAAE,kBAAkB,sBAAA,IAA0BC,kDAAA;AAAA,IAClDC,QAAA,WAAW,CAAC,OAAO;AAAA,MACjB,eAAe,EAAE;AAAA,MACjB,kBAAkB,EAAE;AAAA,MACpB,uBAAuB,EAAE;AAAA,IAAA,EACzB;AAAA,EACJ;AACA,QAAM,EAAE,wBAAwB,cAAc,iBAAiB,IAC7DC,cAAAA,cAAcC,+DAAAA,4BAA4B;AAE5CC,aAAAA,UAAU,MAAM;AACV,QAAA,iBAAiB,GAAG,EAAG;AAEL,0BAAA;AAAA,MACpB,CAAC,GAAG,GAAG;AAAA,IAAA,CACR;AAAA,KACA,CAAC,YAAY,KAAK,uBAAuB,gBAAgB,CAAC;AAG3D,SAAAC,2BAAA,kBAAA,KAAC,OAAI,EAAA,WAAU,yCACb,UAAA;AAAA,IAACA,2BAAAA,kBAAAA,KAAA,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,MAAAC,2BAAA,kBAAA;AAAA,QAACC,yBAAA;AAAA,QAAA;AAAA,UACC,SAAS,MAAM,wBAAwB;AAAA,UACvC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,OAAM;AAAA,UACN,IAAG;AAAA,UACH,MAAMC,YAAA;AAAA,UACN,OAAO,uBAAuB;AAAA,QAAA;AAAA,MAChC;AAAA,MACAF,2BAAA,kBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAQ;AAAA,UAEP,UAAuB,uBAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1B,GACF;AAAA,IAEAD,2BAAA,kBAAA;AAAA,MAACI,2BAAA;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,aAAY;AAAA,QAEZ,UAAA;AAAA,UAAAH,2BAAAA,kBAAAA,IAACI,+BAAI,UAAiB,iBAAA,CAAA;AAAA,UAEtBJ,iDAACK,yEAAAA,yBAAsB,WAAwB,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACjD;AAAA,IAEAN,2BAAA,kBAAA;AAAA,MAACI,2BAAA;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,aAAY;AAAA,QAEZ,UAAA;AAAA,UAAAH,2BAAAA,kBAAAA,IAACI,+BAAI,UAAa,aAAA,CAAA;AAAA,UAClBJ,2BAAA,kBAAA;AAAA,YAACM,gCAAA;AAAA,YAAA;AAAA,cACC,cAAc;AAAA,cACd,UAAU,CAAC,UAAU,cAAc,KAAK;AAAA,cACxC,OAAM;AAAA,cACN,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAAS;AAAA,gBACP;AAAA,kBACE,SAAS;AAAA,kBACT,OAAO;AAAA;AAAA,gBACT;AAAA,gBACA;AAAA,kBACE,SAAS;AAAA,kBACT,OAAO;AAAA;AAAA,gBAAA;AAAA,cACT;AAAA,YACF;AAAA,UACF;AAAA,UACC,eAAe,KACbN,2BAAAA,kBAAAA,IAAAO,4CAAAA,YAAA,EAAW,WAAwB,CAAA;AAAA,UAErC,eAAe,KACbP,2BAAA,kBAAA,IAAAQ,4CAAA,YAAA,EAAW,YAAwB,YAAwB;AAAA,UAE9DR,iDAACS,mDAAAA,YAAS,WAAwB,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACpC,GACF;AAEJ;;"}
+{"version":3,"file":"DictionaryFieldEditor.cjs","sources":["../../../src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx"],"sourcesContent":["'use client';\n\nimport { DictionaryAPI } from '@intlayer/backend';\nimport { Locales } from '@intlayer/config';\nimport { Dictionary } from '@intlayer/core';\nimport { ArrowLeft } from 'lucide-react';\nimport { useEffect, useState, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { useShallow } from 'zustand/react/shallow';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { useEditedContentStore } from '../DictionaryEditor';\nimport { H2 } from '../Headers';\nimport { LocaleSwitcherContentProvider } from '../LocaleSwitcherContentDropDown';\nimport { SwitchSelector } from '../SwitchSelector';\nimport { DictionaryDetailsForm } from './DictionaryDetails/DictionaryDetailsForm';\nimport { dictionaryFieldEditorContent } from './dictionaryFieldEditor.content';\nimport { JSONEditor } from './JSONEditor';\nimport { NodeEditor } from './NodeEditor';\nimport { SaveForm } from './SaveForm/SaveForm';\nimport { VersionSwitcherProvider } from './VersionSwitcherDropDown';\n\ntype DictionaryFieldEditorProps = {\n  dictionary: Dictionary;\n  onClickDictionaryList?: () => void;\n  isDarkMode?: boolean;\n  availableLocales: Locales[];\n};\n\nenum EditorViewType {\n  NodeEditor,\n  JSONEditor,\n}\n\nexport const DictionaryFieldEditor: FC<DictionaryFieldEditorProps> = ({\n  dictionary,\n  onClickDictionaryList,\n  isDarkMode,\n  availableLocales,\n}) => {\n  const { key } = dictionary;\n  const [editorView, setEditorView] = useState<EditorViewType>(\n    EditorViewType.NodeEditor\n  );\n  const { dictionaryRecord, setDictionariesRecord } = useEditedContentStore(\n    useShallow((s) => ({\n      editedContent: s.editedContent,\n      dictionaryRecord: s.dictionariesRecord,\n      setDictionariesRecord: s.setDictionariesRecord,\n    }))\n  );\n  const { returnToDictionaryList, titleContent, titleInformation } =\n    useDictionary(dictionaryFieldEditorContent);\n\n  useEffect(() => {\n    if (dictionaryRecord[key]) return;\n\n    setDictionariesRecord({\n      [key]: dictionary,\n    });\n  }, [dictionary, key, setDictionariesRecord, dictionaryRecord]);\n\n  return (\n    <LocaleSwitcherContentProvider availableLocales={availableLocales}>\n      <div className=\"flex size-full flex-1 flex-col gap-10\">\n        <div className=\"flex items-center gap-2\">\n          <Button\n            onClick={() => onClickDictionaryList?.()}\n            variant=\"hoverable\"\n            size=\"icon-md\"\n            color=\"text\"\n            id=\"return-to-dictionary-list\"\n            Icon={ArrowLeft}\n            label={returnToDictionaryList.label}\n          />\n          <label\n            className=\"cursor-pointer text-xs hover:underline\"\n            htmlFor=\"return-to-dictionary-list\"\n          >\n            {returnToDictionaryList.text}\n          </label>\n        </div>\n\n        <Container\n          className=\"flex size-full justify-center gap-10 p-6\"\n          roundedSize=\"xl\"\n        >\n          <H2>{titleInformation}</H2>\n\n          <DictionaryDetailsForm dictionary={dictionary} />\n        </Container>\n\n        <Container\n          className=\"flex size-full justify-center gap-10 p-6\"\n          roundedSize=\"xl\"\n        >\n          <H2>{titleContent}</H2>\n          <SwitchSelector\n            defaultValue={editorView}\n            onChange={(value) => setEditorView(value)}\n            color=\"text\"\n            size=\"sm\"\n            className=\"ml-auto\"\n            choices={[\n              {\n                content: 'Node editor',\n                value: EditorViewType.NodeEditor,\n              },\n              {\n                content: 'JSON editor',\n                value: EditorViewType.JSONEditor,\n              },\n            ]}\n          />\n          {editorView === EditorViewType.NodeEditor && (\n            <NodeEditor dictionary={dictionary} locales={availableLocales} />\n          )}\n          {editorView === EditorViewType.JSONEditor && (\n            <JSONEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n          )}\n          <SaveForm dictionary={dictionary} />\n        </Container>\n      </div>\n    </LocaleSwitcherContentProvider>\n  );\n};\n"],"names":["useState","useEditedContentStore","useShallow","useDictionary","dictionaryFieldEditorContent","useEffect","LocaleSwitcherContentProvider","jsxs","jsx","Button","ArrowLeft","Container","H2","DictionaryDetailsForm","SwitchSelector","NodeEditor","JSONEditor","SaveForm"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACE,QAAA,EAAE,QAAQ;AACV,QAAA,CAAC,YAAY,aAAa,IAAIA,WAAA;AAAA,IAClC;AAAA;AAAA,EACF;AACM,QAAA,EAAE,kBAAkB,sBAAA,IAA0BC,kDAAA;AAAA,IAClDC,QAAA,WAAW,CAAC,OAAO;AAAA,MACjB,eAAe,EAAE;AAAA,MACjB,kBAAkB,EAAE;AAAA,MACpB,uBAAuB,EAAE;AAAA,IAAA,EACzB;AAAA,EACJ;AACA,QAAM,EAAE,wBAAwB,cAAc,iBAAiB,IAC7DC,cAAAA,cAAcC,+DAAAA,4BAA4B;AAE5CC,aAAAA,UAAU,MAAM;AACV,QAAA,iBAAiB,GAAG,EAAG;AAEL,0BAAA;AAAA,MACpB,CAAC,GAAG,GAAG;AAAA,IAAA,CACR;AAAA,KACA,CAAC,YAAY,KAAK,uBAAuB,gBAAgB,CAAC;AAE7D,0DACGC,sEAAAA,+BAA8B,EAAA,kBAC7B,UAACC,kDAAA,OAAA,EAAI,WAAU,yCACb,UAAA;AAAA,IAACA,2BAAAA,kBAAAA,KAAA,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,MAAAC,2BAAA,kBAAA;AAAA,QAACC,yBAAA;AAAA,QAAA;AAAA,UACC,SAAS,MAAM,wBAAwB;AAAA,UACvC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,OAAM;AAAA,UACN,IAAG;AAAA,UACH,MAAMC,YAAA;AAAA,UACN,OAAO,uBAAuB;AAAA,QAAA;AAAA,MAChC;AAAA,MACAF,2BAAA,kBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAQ;AAAA,UAEP,UAAuB,uBAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1B,GACF;AAAA,IAEAD,2BAAA,kBAAA;AAAA,MAACI,2BAAA;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,aAAY;AAAA,QAEZ,UAAA;AAAA,UAAAH,2BAAAA,kBAAAA,IAACI,+BAAI,UAAiB,iBAAA,CAAA;AAAA,UAEtBJ,iDAACK,yEAAAA,yBAAsB,WAAwB,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACjD;AAAA,IAEAN,2BAAA,kBAAA;AAAA,MAACI,2BAAA;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,aAAY;AAAA,QAEZ,UAAA;AAAA,UAAAH,2BAAAA,kBAAAA,IAACI,+BAAI,UAAa,aAAA,CAAA;AAAA,UAClBJ,2BAAA,kBAAA;AAAA,YAACM,gCAAA;AAAA,YAAA;AAAA,cACC,cAAc;AAAA,cACd,UAAU,CAAC,UAAU,cAAc,KAAK;AAAA,cACxC,OAAM;AAAA,cACN,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAAS;AAAA,gBACP;AAAA,kBACE,SAAS;AAAA,kBACT,OAAO;AAAA;AAAA,gBACT;AAAA,gBACA;AAAA,kBACE,SAAS;AAAA,kBACT,OAAO;AAAA;AAAA,gBAAA;AAAA,cACT;AAAA,YACF;AAAA,UACF;AAAA,UACC,eAAe,KACdN,iDAACO,4CAAAA,YAAW,EAAA,YAAwB,SAAS,kBAAkB;AAAA,UAEhE,eAAe,KACbP,2BAAA,kBAAA,IAAAQ,4CAAA,YAAA,EAAW,YAAwB,YAAwB;AAAA,UAE9DR,iDAACS,mDAAAA,YAAS,WAAwB,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACpC,EAAA,CACF,EACF,CAAA;AAEJ;;"}

package/dist/components/DictionaryFieldEditor/DictionaryFieldEditor.d.ts

@@ -1,9 +1,11 @@
+import { Locales } from '@intlayer/config';
 import { Dictionary } from '@intlayer/core';
 import { FC } from 'react';
 type DictionaryFieldEditorProps = {
     dictionary: Dictionary;
     onClickDictionaryList?: () => void;
     isDarkMode?: boolean;
+    availableLocales: Locales[];
 };
 export declare const DictionaryFieldEditor: FC<DictionaryFieldEditorProps>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"DictionaryFieldEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,OAAO,EAAuB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAerD,KAAK,0BAA0B,GAAG;IAChC,UAAU,EAAE,UAAU,CAAC;IACvB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAOF,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAwFhE,CAAC"}
+{"version":3,"file":"DictionaryFieldEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,OAAO,EAAuB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAiBrD,KAAK,0BAA0B,GAAG;IAChC,UAAU,EAAE,UAAU,CAAC;IACvB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,OAAO,EAAE,CAAC;CAC7B,CAAC;AAOF,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CA2FhE,CAAC"}

package/dist/components/DictionaryFieldEditor/DictionaryFieldEditor.mjs

@@ -26,7 +26,14 @@ import "../../Form-DhsgC7kB.js";
 import "../DictionaryEditor/validDictionaryChangeButtons.content.mjs";
 import "zod";
 import { H2 } from "../Headers/index.mjs";
+import "fuse.js";
+import "../DropDown/index.mjs";
+import "../Input/Input.mjs";
+import "../Input/InputPassword.mjs";
+import "../Input/Checkbox.mjs";
 import { SwitchSelector } from "../SwitchSelector/index.mjs";
+import "../LocaleSwitcherContentDropDown/localeSwitcher.content.mjs";
+import { LocaleSwitcherContentProvider } from "../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
 import { DictionaryDetailsForm } from "./DictionaryDetails/DictionaryDetailsForm.mjs";
 import { dictionaryFieldEditorContent } from "./dictionaryFieldEditor.content.mjs";
 import { JSONEditor } from "./JSONEditor.mjs";
@@ -35,7 +42,8 @@ import { SaveForm } from "./SaveForm/SaveForm.mjs";
 const DictionaryFieldEditor = ({
   dictionary,
   onClickDictionaryList,
-  isDarkMode
+  isDarkMode,
+  availableLocales
 }) => {
   const { key } = dictionary;
   const [editorView, setEditorView] = useState(
@@ -56,7 +64,7 @@ const DictionaryFieldEditor = ({
       [key]: dictionary
     });
   }, [dictionary, key, setDictionariesRecord, dictionaryRecord]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex size-full flex-1 flex-col gap-10", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(LocaleSwitcherContentProvider, { availableLocales, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex size-full flex-1 flex-col gap-10", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Button,
@@ -119,13 +127,13 @@ const DictionaryFieldEditor = ({
               ]
             }
           ),
-          editorView === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(NodeEditor, { dictionary }),
+          editorView === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(NodeEditor, { dictionary, locales: availableLocales }),
           editorView === 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(JSONEditor, { dictionary, isDarkMode }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(SaveForm, { dictionary })
         ]
       }
     )
-  ] });
+  ] }) });
 };
 export {
   DictionaryFieldEditor

package/dist/components/DictionaryFieldEditor/DictionaryFieldEditor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DictionaryFieldEditor.mjs","sources":["../../../src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Dictionary } from '@intlayer/core';\nimport { ArrowLeft } from 'lucide-react';\nimport { useEffect, useState, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { useShallow } from 'zustand/react/shallow';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { useEditedContentStore } from '../DictionaryEditor';\nimport { H2 } from '../Headers';\nimport { SwitchSelector } from '../SwitchSelector';\nimport { DictionaryDetailsForm } from './DictionaryDetails/DictionaryDetailsForm';\nimport { dictionaryFieldEditorContent } from './dictionaryFieldEditor.content';\nimport { JSONEditor } from './JSONEditor';\nimport { NodeEditor } from './NodeEditor';\nimport { SaveForm } from './SaveForm/SaveForm';\n\ntype DictionaryFieldEditorProps = {\n  dictionary: Dictionary;\n  onClickDictionaryList?: () => void;\n  isDarkMode?: boolean;\n};\n\nenum EditorViewType {\n  NodeEditor,\n  JSONEditor,\n}\n\nexport const DictionaryFieldEditor: FC<DictionaryFieldEditorProps> = ({\n  dictionary,\n  onClickDictionaryList,\n  isDarkMode,\n}) => {\n  const { key } = dictionary;\n  const [editorView, setEditorView] = useState<EditorViewType>(\n    EditorViewType.NodeEditor\n  );\n  const { dictionaryRecord, setDictionariesRecord } = useEditedContentStore(\n    useShallow((s) => ({\n      editedContent: s.editedContent,\n      dictionaryRecord: s.dictionariesRecord,\n      setDictionariesRecord: s.setDictionariesRecord,\n    }))\n  );\n  const { returnToDictionaryList, titleContent, titleInformation } =\n    useDictionary(dictionaryFieldEditorContent);\n\n  useEffect(() => {\n    if (dictionaryRecord[key]) return;\n\n    setDictionariesRecord({\n      [key]: dictionary,\n    });\n  }, [dictionary, key, setDictionariesRecord, dictionaryRecord]);\n\n  return (\n    <div className=\"flex size-full flex-1 flex-col gap-10\">\n      <div className=\"flex items-center gap-2\">\n        <Button\n          onClick={() => onClickDictionaryList?.()}\n          variant=\"hoverable\"\n          size=\"icon-md\"\n          color=\"text\"\n          id=\"return-to-dictionary-list\"\n          Icon={ArrowLeft}\n          label={returnToDictionaryList.label}\n        />\n        <label\n          className=\"cursor-pointer text-xs hover:underline\"\n          htmlFor=\"return-to-dictionary-list\"\n        >\n          {returnToDictionaryList.text}\n        </label>\n      </div>\n\n      <Container\n        className=\"flex size-full justify-center gap-10 p-6\"\n        roundedSize=\"xl\"\n      >\n        <H2>{titleInformation}</H2>\n\n        <DictionaryDetailsForm dictionary={dictionary} />\n      </Container>\n\n      <Container\n        className=\"flex size-full justify-center gap-10 p-6\"\n        roundedSize=\"xl\"\n      >\n        <H2>{titleContent}</H2>\n        <SwitchSelector\n          defaultValue={editorView}\n          onChange={(value) => setEditorView(value)}\n          color=\"text\"\n          size=\"sm\"\n          className=\"ml-auto\"\n          choices={[\n            {\n              content: 'Node editor',\n              value: EditorViewType.NodeEditor,\n            },\n            {\n              content: 'JSON editor',\n              value: EditorViewType.JSONEditor,\n            },\n          ]}\n        />\n        {editorView === EditorViewType.NodeEditor && (\n          <NodeEditor dictionary={dictionary} />\n        )}\n        {editorView === EditorViewType.JSONEditor && (\n          <JSONEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n        )}\n        <SaveForm dictionary={dictionary} />\n      </Container>\n    </div>\n  );\n};\n"],"names":["jsxs","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACE,QAAA,EAAE,QAAQ;AACV,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA;AAAA,EACF;AACM,QAAA,EAAE,kBAAkB,sBAAA,IAA0B;AAAA,IAClD,WAAW,CAAC,OAAO;AAAA,MACjB,eAAe,EAAE;AAAA,MACjB,kBAAkB,EAAE;AAAA,MACpB,uBAAuB,EAAE;AAAA,IAAA,EACzB;AAAA,EACJ;AACA,QAAM,EAAE,wBAAwB,cAAc,iBAAiB,IAC7D,cAAc,4BAA4B;AAE5C,YAAU,MAAM;AACV,QAAA,iBAAiB,GAAG,EAAG;AAEL,0BAAA;AAAA,MACpB,CAAC,GAAG,GAAG;AAAA,IAAA,CACR;AAAA,KACA,CAAC,YAAY,KAAK,uBAAuB,gBAAgB,CAAC;AAG3D,SAAAA,kCAAA,KAAC,OAAI,EAAA,WAAU,yCACb,UAAA;AAAA,IAACA,kCAAAA,KAAA,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,MAAAC,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS,MAAM,wBAAwB;AAAA,UACvC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,OAAM;AAAA,UACN,IAAG;AAAA,UACH,MAAM;AAAA,UACN,OAAO,uBAAuB;AAAA,QAAA;AAAA,MAChC;AAAA,MACAA,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAQ;AAAA,UAEP,UAAuB,uBAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1B,GACF;AAAA,IAEAD,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,aAAY;AAAA,QAEZ,UAAA;AAAA,UAAAC,kCAAAA,IAAC,MAAI,UAAiB,iBAAA,CAAA;AAAA,UAEtBA,sCAAC,yBAAsB,WAAwB,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACjD;AAAA,IAEAD,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,aAAY;AAAA,QAEZ,UAAA;AAAA,UAAAC,kCAAAA,IAAC,MAAI,UAAa,aAAA,CAAA;AAAA,UAClBA,kCAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,cAAc;AAAA,cACd,UAAU,CAAC,UAAU,cAAc,KAAK;AAAA,cACxC,OAAM;AAAA,cACN,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAAS;AAAA,gBACP;AAAA,kBACE,SAAS;AAAA,kBACT,OAAO;AAAA;AAAA,gBACT;AAAA,gBACA;AAAA,kBACE,SAAS;AAAA,kBACT,OAAO;AAAA;AAAA,gBAAA;AAAA,cACT;AAAA,YACF;AAAA,UACF;AAAA,UACC,eAAe,KACbA,kCAAAA,IAAA,YAAA,EAAW,WAAwB,CAAA;AAAA,UAErC,eAAe,KACbA,kCAAA,IAAA,YAAA,EAAW,YAAwB,YAAwB;AAAA,UAE9DA,sCAAC,YAAS,WAAwB,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACpC,GACF;AAEJ;"}
+{"version":3,"file":"DictionaryFieldEditor.mjs","sources":["../../../src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx"],"sourcesContent":["'use client';\n\nimport { DictionaryAPI } from '@intlayer/backend';\nimport { Locales } from '@intlayer/config';\nimport { Dictionary } from '@intlayer/core';\nimport { ArrowLeft } from 'lucide-react';\nimport { useEffect, useState, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { useShallow } from 'zustand/react/shallow';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { useEditedContentStore } from '../DictionaryEditor';\nimport { H2 } from '../Headers';\nimport { LocaleSwitcherContentProvider } from '../LocaleSwitcherContentDropDown';\nimport { SwitchSelector } from '../SwitchSelector';\nimport { DictionaryDetailsForm } from './DictionaryDetails/DictionaryDetailsForm';\nimport { dictionaryFieldEditorContent } from './dictionaryFieldEditor.content';\nimport { JSONEditor } from './JSONEditor';\nimport { NodeEditor } from './NodeEditor';\nimport { SaveForm } from './SaveForm/SaveForm';\nimport { VersionSwitcherProvider } from './VersionSwitcherDropDown';\n\ntype DictionaryFieldEditorProps = {\n  dictionary: Dictionary;\n  onClickDictionaryList?: () => void;\n  isDarkMode?: boolean;\n  availableLocales: Locales[];\n};\n\nenum EditorViewType {\n  NodeEditor,\n  JSONEditor,\n}\n\nexport const DictionaryFieldEditor: FC<DictionaryFieldEditorProps> = ({\n  dictionary,\n  onClickDictionaryList,\n  isDarkMode,\n  availableLocales,\n}) => {\n  const { key } = dictionary;\n  const [editorView, setEditorView] = useState<EditorViewType>(\n    EditorViewType.NodeEditor\n  );\n  const { dictionaryRecord, setDictionariesRecord } = useEditedContentStore(\n    useShallow((s) => ({\n      editedContent: s.editedContent,\n      dictionaryRecord: s.dictionariesRecord,\n      setDictionariesRecord: s.setDictionariesRecord,\n    }))\n  );\n  const { returnToDictionaryList, titleContent, titleInformation } =\n    useDictionary(dictionaryFieldEditorContent);\n\n  useEffect(() => {\n    if (dictionaryRecord[key]) return;\n\n    setDictionariesRecord({\n      [key]: dictionary,\n    });\n  }, [dictionary, key, setDictionariesRecord, dictionaryRecord]);\n\n  return (\n    <LocaleSwitcherContentProvider availableLocales={availableLocales}>\n      <div className=\"flex size-full flex-1 flex-col gap-10\">\n        <div className=\"flex items-center gap-2\">\n          <Button\n            onClick={() => onClickDictionaryList?.()}\n            variant=\"hoverable\"\n            size=\"icon-md\"\n            color=\"text\"\n            id=\"return-to-dictionary-list\"\n            Icon={ArrowLeft}\n            label={returnToDictionaryList.label}\n          />\n          <label\n            className=\"cursor-pointer text-xs hover:underline\"\n            htmlFor=\"return-to-dictionary-list\"\n          >\n            {returnToDictionaryList.text}\n          </label>\n        </div>\n\n        <Container\n          className=\"flex size-full justify-center gap-10 p-6\"\n          roundedSize=\"xl\"\n        >\n          <H2>{titleInformation}</H2>\n\n          <DictionaryDetailsForm dictionary={dictionary} />\n        </Container>\n\n        <Container\n          className=\"flex size-full justify-center gap-10 p-6\"\n          roundedSize=\"xl\"\n        >\n          <H2>{titleContent}</H2>\n          <SwitchSelector\n            defaultValue={editorView}\n            onChange={(value) => setEditorView(value)}\n            color=\"text\"\n            size=\"sm\"\n            className=\"ml-auto\"\n            choices={[\n              {\n                content: 'Node editor',\n                value: EditorViewType.NodeEditor,\n              },\n              {\n                content: 'JSON editor',\n                value: EditorViewType.JSONEditor,\n              },\n            ]}\n          />\n          {editorView === EditorViewType.NodeEditor && (\n            <NodeEditor dictionary={dictionary} locales={availableLocales} />\n          )}\n          {editorView === EditorViewType.JSONEditor && (\n            <JSONEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n          )}\n          <SaveForm dictionary={dictionary} />\n        </Container>\n      </div>\n    </LocaleSwitcherContentProvider>\n  );\n};\n"],"names":["jsxs","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACE,QAAA,EAAE,QAAQ;AACV,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA;AAAA,EACF;AACM,QAAA,EAAE,kBAAkB,sBAAA,IAA0B;AAAA,IAClD,WAAW,CAAC,OAAO;AAAA,MACjB,eAAe,EAAE;AAAA,MACjB,kBAAkB,EAAE;AAAA,MACpB,uBAAuB,EAAE;AAAA,IAAA,EACzB;AAAA,EACJ;AACA,QAAM,EAAE,wBAAwB,cAAc,iBAAiB,IAC7D,cAAc,4BAA4B;AAE5C,YAAU,MAAM;AACV,QAAA,iBAAiB,GAAG,EAAG;AAEL,0BAAA;AAAA,MACpB,CAAC,GAAG,GAAG;AAAA,IAAA,CACR;AAAA,KACA,CAAC,YAAY,KAAK,uBAAuB,gBAAgB,CAAC;AAE7D,+CACG,+BAA8B,EAAA,kBAC7B,UAACA,uCAAA,OAAA,EAAI,WAAU,yCACb,UAAA;AAAA,IAACA,kCAAAA,KAAA,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,MAAAC,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS,MAAM,wBAAwB;AAAA,UACvC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,OAAM;AAAA,UACN,IAAG;AAAA,UACH,MAAM;AAAA,UACN,OAAO,uBAAuB;AAAA,QAAA;AAAA,MAChC;AAAA,MACAA,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAQ;AAAA,UAEP,UAAuB,uBAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1B,GACF;AAAA,IAEAD,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,aAAY;AAAA,QAEZ,UAAA;AAAA,UAAAC,kCAAAA,IAAC,MAAI,UAAiB,iBAAA,CAAA;AAAA,UAEtBA,sCAAC,yBAAsB,WAAwB,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACjD;AAAA,IAEAD,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,aAAY;AAAA,QAEZ,UAAA;AAAA,UAAAC,kCAAAA,IAAC,MAAI,UAAa,aAAA,CAAA;AAAA,UAClBA,kCAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,cAAc;AAAA,cACd,UAAU,CAAC,UAAU,cAAc,KAAK;AAAA,cACxC,OAAM;AAAA,cACN,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAAS;AAAA,gBACP;AAAA,kBACE,SAAS;AAAA,kBACT,OAAO;AAAA;AAAA,gBACT;AAAA,gBACA;AAAA,kBACE,SAAS;AAAA,kBACT,OAAO;AAAA;AAAA,gBAAA;AAAA,cACT;AAAA,YACF;AAAA,UACF;AAAA,UACC,eAAe,KACdA,sCAAC,YAAW,EAAA,YAAwB,SAAS,kBAAkB;AAAA,UAEhE,eAAe,KACbA,kCAAA,IAAA,YAAA,EAAW,YAAwB,YAAwB;AAAA,UAE9DA,sCAAC,YAAS,WAAwB,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACpC,EAAA,CACF,EACF,CAAA;AAEJ;"}

package/dist/components/DictionaryFieldEditor/EditorView/EditorView.cjs

@@ -35,7 +35,8 @@ const components_DictionaryFieldEditor_NodeTypeSelector = require("../NodeTypeSe
 const components_DictionaryFieldEditor_EditorView_TextEditor = require("./TextEditor.cjs");
 const EditorView = ({
   dictionaryKey,
-  dictionary
+  dictionary,
+  locales
 }) => {
   const { focusedContent, setFocusedContentKeyPath } = components_DictionaryEditor_useEditionPanelStore.useEditionPanelStore(
     shallow.useShallow((s) => ({
@@ -87,7 +88,8 @@ const EditorView = ({
       {
         keyPath,
         section,
-        dictionaryKey
+        dictionary,
+        locales
       },
       keyPath.join(".")
     ),
@@ -105,7 +107,7 @@ const EditorView = ({
                   {
                     name: "key",
                     "aria-label": "Key",
-                    placeholder: titleInput.placeholder.value,
+                    placeholder: titleInput.placeholder,
                     defaultValue: utils_camelCase.camelCaseToSentence(initialKeyName),
                     onSave: (value) => handleRenameNodeKey(value),
                     className: "h-8",
@@ -136,7 +138,7 @@ const EditorView = ({
             isEdited && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
               components_Button_Button.Button,
               {
-                label: restoreButton.label.value,
+                label: restoreButton.label,
                 variant: "outline",
                 color: "text-inverse",
                 Icon: lucideReact.RotateCcw,
@@ -147,7 +149,7 @@ const EditorView = ({
             /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
               components_Button_Button.Button,
               {
-                label: deleteButton.label.value,
+                label: deleteButton.label,
                 variant: "outline",
                 color: "error",
                 Icon: lucideReact.X,

package/dist/components/DictionaryFieldEditor/EditorView/EditorView.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditorView.cjs","sources":["../../../../src/components/DictionaryFieldEditor/EditorView/EditorView.tsx"],"sourcesContent":["'use client';\n\nimport { type KeyPath, type Dictionary } from '@intlayer/core';\nimport { RotateCcw, X } from 'lucide-react';\nimport { useMemo, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { useShallow } from 'zustand/react/shallow';\nimport { EditableFieldInput } from '../..//EditableField';\nimport {\n  camelCaseToSentence,\n  sentenceToCamelCase,\n} from '../../../utils/camelCase';\nimport { getDictionaryValueByKeyPath } from '../../../utils/dictionary';\nimport { Button } from '../../Button';\nimport {\n  useEditedContentStore,\n  useEditionPanelStore,\n} from '../../DictionaryEditor';\nimport { Label } from '../../Label';\nimport { editorViewContent } from '../editorView.content';\nimport { getIsEditableSection } from '../getIsEditableSection';\nimport { NodeTypeSelector } from '../NodeTypeSelector';\nimport { TextEditor } from './TextEditor';\n\ntype EditorViewProps = {\n  dictionaryKey: string;\n  dictionary: Dictionary;\n};\n\nexport const EditorView: FC<EditorViewProps> = ({\n  dictionaryKey,\n  dictionary,\n}) => {\n  const { focusedContent, setFocusedContentKeyPath } = useEditionPanelStore(\n    useShallow((s) => ({\n      setFocusedContentKeyPath: s.setFocusedContentKeyPath,\n      focusedContent: s.focusedContent,\n    }))\n  );\n  const keyPath = focusedContent?.keyPath ?? [];\n  const initialKeyName = keyPath[keyPath.length - 1]?.key ?? '';\n  const { titleInput, deleteButton, nodeTypeSelector, restoreButton } =\n    useDictionary(editorViewContent);\n\n  const {\n    editedContent,\n    renameEditedContent,\n    addEditedContent,\n    removeEditedContent,\n  } = useEditedContentStore(\n    useShallow((s) => ({\n      editedContent: s.editedContent,\n      renameEditedContent: s.renameEditedContent,\n      addEditedContent: s.addEditedContent,\n      removeEditedContent: s.removeEditedContent,\n    }))\n  );\n\n  const editedSection = editedContent[dictionaryKey]?.content\n    ? getDictionaryValueByKeyPath(editedContent[dictionaryKey].content, keyPath)\n    : undefined;\n\n  const dictionarySection = getDictionaryValueByKeyPath(\n    dictionary.content,\n    keyPath\n  );\n\n  const section = editedSection ?? dictionarySection;\n\n  const isEdited = useMemo(\n    () =>\n      editedSection &&\n      JSON.stringify(editedSection) !== JSON.stringify(dictionarySection),\n    [editedSection, dictionarySection]\n  );\n\n  const isEditableSection = getIsEditableSection(section);\n\n  const handleRenameNodeKey = (keyName: string) => {\n    const camelCaseSentence = sentenceToCamelCase(keyName);\n    renameEditedContent(dictionaryKey, camelCaseSentence, keyPath);\n    const prevKeyPath: KeyPath[] = keyPath.slice(0, -1);\n    const lastKeyPath: KeyPath = keyPath[keyPath.length - 1];\n    const newKeyPath: KeyPath[] = [\n      ...prevKeyPath,\n      { ...lastKeyPath, key: camelCaseSentence } as KeyPath,\n    ];\n    setFocusedContentKeyPath(newKeyPath);\n  };\n\n  return (\n    <>\n      {isEditableSection && (\n        <TextEditor\n          key={keyPath.join('.')}\n          keyPath={keyPath}\n          section={section}\n          dictionaryKey={dictionaryKey}\n        />\n      )}\n\n      {keyPath.length > 0 ? (\n        <form\n          className=\"bg-text text-text-dark dark:bg-text-dark dark:text-text flex w-full flex-col items-start justify-between gap-6 px-4 py-2\"\n          key={JSON.stringify(focusedContent?.keyPath)}\n        >\n          <div className=\"flex w-full flex-wrap items-start justify-between gap-6\">\n            {typeof initialKeyName === 'string' && (\n              <div className=\"flex flex-col gap-3\">\n                <Label>{titleInput.label}</Label>\n                <div className=\"flex flex-wrap items-center gap-4\">\n                  <EditableFieldInput\n                    name=\"key\"\n                    aria-label=\"Key\"\n                    key={initialKeyName}\n                    placeholder={titleInput.placeholder.value}\n                    defaultValue={camelCaseToSentence(initialKeyName)}\n                    onSave={(value) => handleRenameNodeKey(value)}\n                    className=\"h-8\"\n                    variant=\"invisible\"\n                  />\n                  <span className=\"text-neutral dark:text-neutral-dark text-sm\">\n                    ({initialKeyName})\n                  </span>\n                </div>\n              </div>\n            )}\n\n            <div>\n              <Label>{nodeTypeSelector.label}</Label>\n\n              <NodeTypeSelector\n                keyPath={keyPath}\n                dictionaryKey={dictionaryKey}\n                section={section}\n              />\n            </div>\n          </div>\n          {keyPath.length > 0 && (\n            <div className=\"ml-auto flex gap-2\">\n              {isEdited && (\n                <Button\n                  label={restoreButton.label.value}\n                  variant=\"outline\"\n                  color=\"text-inverse\"\n                  Icon={RotateCcw}\n                  onClick={() => removeEditedContent(dictionaryKey, keyPath)}\n                >\n                  {restoreButton.text}\n                </Button>\n              )}\n              <Button\n                label={deleteButton.label.value}\n                variant=\"outline\"\n                color=\"error\"\n                Icon={X}\n                onClick={() => {\n                  addEditedContent(dictionaryKey, undefined, keyPath);\n\n                  const parentKeyPath: KeyPath[] = keyPath.slice(0, -1);\n                  setFocusedContentKeyPath(parentKeyPath);\n                }}\n              >\n                {deleteButton.text}\n              </Button>\n            </div>\n          )}\n        </form>\n      ) : (\n        <span className=\"h-8\"></span>\n      )}\n    </>\n  );\n};\n"],"names":["useEditionPanelStore","useShallow","useDictionary","editorViewContent","useEditedContentStore","getDictionaryValueByKeyPath","useMemo","getIsEditableSection","sentenceToCamelCase","jsxs","Fragment","jsx","TextEditor","Label","EditableFieldInput","camelCaseToSentence","NodeTypeSelector","Button","RotateCcw","X"],"mappings":"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"}
+{"version":3,"file":"EditorView.cjs","sources":["../../../../src/components/DictionaryFieldEditor/EditorView/EditorView.tsx"],"sourcesContent":["'use client';\n\nimport { type Locales } from '@intlayer/config';\nimport { type KeyPath, type Dictionary } from '@intlayer/core';\nimport { RotateCcw, X } from 'lucide-react';\nimport { useMemo, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { useShallow } from 'zustand/react/shallow';\nimport { EditableFieldInput } from '../..//EditableField';\nimport {\n  camelCaseToSentence,\n  sentenceToCamelCase,\n} from '../../../utils/camelCase';\nimport { getDictionaryValueByKeyPath } from '../../../utils/dictionary';\nimport { Button } from '../../Button';\nimport {\n  useEditedContentStore,\n  useEditionPanelStore,\n} from '../../DictionaryEditor';\nimport { Label } from '../../Label';\nimport { editorViewContent } from '../editorView.content';\nimport { getIsEditableSection } from '../getIsEditableSection';\nimport { NodeTypeSelector } from '../NodeTypeSelector';\nimport { TextEditor } from './TextEditor';\n\ntype EditorViewProps = {\n  dictionaryKey: string;\n  dictionary: Dictionary;\n  locales: Locales[];\n};\n\nexport const EditorView: FC<EditorViewProps> = ({\n  dictionaryKey,\n  dictionary,\n  locales,\n}) => {\n  const { focusedContent, setFocusedContentKeyPath } = useEditionPanelStore(\n    useShallow((s) => ({\n      setFocusedContentKeyPath: s.setFocusedContentKeyPath,\n      focusedContent: s.focusedContent,\n    }))\n  );\n  const keyPath = focusedContent?.keyPath ?? [];\n  const initialKeyName = keyPath[keyPath.length - 1]?.key ?? '';\n  const { titleInput, deleteButton, nodeTypeSelector, restoreButton } =\n    useDictionary(editorViewContent);\n\n  const {\n    editedContent,\n    renameEditedContent,\n    addEditedContent,\n    removeEditedContent,\n  } = useEditedContentStore(\n    useShallow((s) => ({\n      editedContent: s.editedContent,\n      renameEditedContent: s.renameEditedContent,\n      addEditedContent: s.addEditedContent,\n      removeEditedContent: s.removeEditedContent,\n    }))\n  );\n\n  const editedSection = editedContent[dictionaryKey]?.content\n    ? getDictionaryValueByKeyPath(editedContent[dictionaryKey].content, keyPath)\n    : undefined;\n\n  const dictionarySection = getDictionaryValueByKeyPath(\n    dictionary.content,\n    keyPath\n  );\n\n  const section = editedSection ?? dictionarySection;\n\n  const isEdited = useMemo(\n    () =>\n      editedSection &&\n      JSON.stringify(editedSection) !== JSON.stringify(dictionarySection),\n    [editedSection, dictionarySection]\n  );\n\n  const isEditableSection = getIsEditableSection(section);\n\n  const handleRenameNodeKey = (keyName: string) => {\n    const camelCaseSentence = sentenceToCamelCase(keyName);\n    renameEditedContent(dictionaryKey, camelCaseSentence, keyPath);\n    const prevKeyPath: KeyPath[] = keyPath.slice(0, -1);\n    const lastKeyPath: KeyPath = keyPath[keyPath.length - 1];\n    const newKeyPath: KeyPath[] = [\n      ...prevKeyPath,\n      { ...lastKeyPath, key: camelCaseSentence } as KeyPath,\n    ];\n    setFocusedContentKeyPath(newKeyPath);\n  };\n\n  return (\n    <>\n      {isEditableSection && (\n        <TextEditor\n          key={keyPath.join('.')}\n          keyPath={keyPath}\n          section={section}\n          dictionary={dictionary}\n          locales={locales}\n        />\n      )}\n\n      {keyPath.length > 0 ? (\n        <form\n          className=\"bg-text text-text-dark dark:bg-text-dark dark:text-text flex w-full flex-col items-start justify-between gap-6 px-4 py-2\"\n          key={JSON.stringify(focusedContent?.keyPath)}\n        >\n          <div className=\"flex w-full flex-wrap items-start justify-between gap-6\">\n            {typeof initialKeyName === 'string' && (\n              <div className=\"flex flex-col gap-3\">\n                <Label>{titleInput.label}</Label>\n                <div className=\"flex flex-wrap items-center gap-4\">\n                  <EditableFieldInput\n                    name=\"key\"\n                    aria-label=\"Key\"\n                    key={initialKeyName}\n                    placeholder={titleInput.placeholder}\n                    defaultValue={camelCaseToSentence(initialKeyName)}\n                    onSave={(value) => handleRenameNodeKey(value)}\n                    className=\"h-8\"\n                    variant=\"invisible\"\n                  />\n                  <span className=\"text-neutral dark:text-neutral-dark text-sm\">\n                    ({initialKeyName})\n                  </span>\n                </div>\n              </div>\n            )}\n\n            <div>\n              <Label>{nodeTypeSelector.label}</Label>\n\n              <NodeTypeSelector\n                keyPath={keyPath}\n                dictionaryKey={dictionaryKey}\n                section={section}\n              />\n            </div>\n          </div>\n          {keyPath.length > 0 && (\n            <div className=\"ml-auto flex gap-2\">\n              {isEdited && (\n                <Button\n                  label={restoreButton.label}\n                  variant=\"outline\"\n                  color=\"text-inverse\"\n                  Icon={RotateCcw}\n                  onClick={() => removeEditedContent(dictionaryKey, keyPath)}\n                >\n                  {restoreButton.text}\n                </Button>\n              )}\n              <Button\n                label={deleteButton.label}\n                variant=\"outline\"\n                color=\"error\"\n                Icon={X}\n                onClick={() => {\n                  addEditedContent(dictionaryKey, undefined, keyPath);\n\n                  const parentKeyPath: KeyPath[] = keyPath.slice(0, -1);\n                  setFocusedContentKeyPath(parentKeyPath);\n                }}\n              >\n                {deleteButton.text}\n              </Button>\n            </div>\n          )}\n        </form>\n      ) : (\n        <span className=\"h-8\"></span>\n      )}\n    </>\n  );\n};\n"],"names":["useEditionPanelStore","useShallow","useDictionary","editorViewContent","useEditedContentStore","getDictionaryValueByKeyPath","useMemo","getIsEditableSection","sentenceToCamelCase","jsxs","Fragment","jsx","TextEditor","Label","EditableFieldInput","camelCaseToSentence","NodeTypeSelector","Button","RotateCcw","X"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCO,MAAM,aAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACE,QAAA,EAAE,gBAAgB,yBAAA,IAA6BA,iDAAA;AAAA,IACnDC,QAAA,WAAW,CAAC,OAAO;AAAA,MACjB,0BAA0B,EAAE;AAAA,MAC5B,gBAAgB,EAAE;AAAA,IAAA,EAClB;AAAA,EACJ;AACM,QAAA,UAAU,gBAAgB,WAAW,CAAC;AAC5C,QAAM,iBAAiB,QAAQ,QAAQ,SAAS,CAAC,GAAG,OAAO;AAC3D,QAAM,EAAE,YAAY,cAAc,kBAAkB,cAAc,IAChEC,4BAAcC,qEAAiB;AAE3B,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACEC,kDAAA;AAAA,IACFH,QAAA,WAAW,CAAC,OAAO;AAAA,MACjB,eAAe,EAAE;AAAA,MACjB,qBAAqB,EAAE;AAAA,MACvB,kBAAkB,EAAE;AAAA,MACpB,qBAAqB,EAAE;AAAA,IAAA,EACvB;AAAA,EACJ;AAEM,QAAA,gBAAgB,cAAc,aAAa,GAAG,UAChDI,iBAAAA,4BAA4B,cAAc,aAAa,EAAE,SAAS,OAAO,IACzE;AAEJ,QAAM,oBAAoBA,iBAAA;AAAA,IACxB,WAAW;AAAA,IACX;AAAA,EACF;AAEA,QAAM,UAAU,iBAAiB;AAEjC,QAAM,WAAWC,WAAA;AAAA,IACf,MACE,iBACA,KAAK,UAAU,aAAa,MAAM,KAAK,UAAU,iBAAiB;AAAA,IACpE,CAAC,eAAe,iBAAiB;AAAA,EACnC;AAEM,QAAA,oBAAoBC,2EAAqB,OAAO;AAEhD,QAAA,sBAAsB,CAAC,YAAoB;AACzC,UAAA,oBAAoBC,oCAAoB,OAAO;AACjC,wBAAA,eAAe,mBAAmB,OAAO;AAC7D,UAAM,cAAyB,QAAQ,MAAM,GAAG,EAAE;AAClD,UAAM,cAAuB,QAAQ,QAAQ,SAAS,CAAC;AACvD,UAAM,aAAwB;AAAA,MAC5B,GAAG;AAAA,MACH,EAAE,GAAG,aAAa,KAAK,kBAAkB;AAAA,IAC3C;AACA,6BAAyB,UAAU;AAAA,EACrC;AAEA,SAEKC,2BAAA,kBAAA,KAAAC,uCAAA,EAAA,UAAA;AAAA,IACC,qBAAAC,2BAAA,kBAAA;AAAA,MAACC,uDAAA;AAAA,MAAA;AAAA,QAEC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAJK,QAAQ,KAAK,GAAG;AAAA,IAKvB;AAAA,IAGD,QAAQ,SAAS,IAChBH,2BAAA,kBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QAGV,UAAA;AAAA,UAACA,2BAAAA,kBAAAA,KAAA,OAAA,EAAI,WAAU,2DACZ,UAAA;AAAA,YAAA,OAAO,mBAAmB,YACxBA,2BAAA,kBAAA,KAAA,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,cAACE,2BAAAA,kBAAAA,IAAAE,uBAAAA,OAAA,EAAO,qBAAW,MAAM,CAAA;AAAA,cACzBJ,2BAAAA,kBAAAA,KAAC,OAAI,EAAA,WAAU,qCACb,UAAA;AAAA,gBAAAE,2BAAA,kBAAA;AAAA,kBAACG,4CAAA;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,cAAW;AAAA,oBAEX,aAAa,WAAW;AAAA,oBACxB,cAAcC,oCAAoB,cAAc;AAAA,oBAChD,QAAQ,CAAC,UAAU,oBAAoB,KAAK;AAAA,oBAC5C,WAAU;AAAA,oBACV,SAAQ;AAAA,kBAAA;AAAA,kBALH;AAAA,gBAMP;AAAA,gBACAN,2BAAAA,kBAAAA,KAAC,QAAK,EAAA,WAAU,+CAA8C,UAAA;AAAA,kBAAA;AAAA,kBAC1D;AAAA,kBAAe;AAAA,gBAAA,EACnB,CAAA;AAAA,cAAA,EACF,CAAA;AAAA,YAAA,GACF;AAAA,8DAGD,OACC,EAAA,UAAA;AAAA,cAACE,2BAAAA,kBAAAA,IAAAE,uBAAAA,OAAA,EAAO,2BAAiB,MAAM,CAAA;AAAA,cAE/BF,2BAAA,kBAAA;AAAA,gBAACK,kDAAA;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA;AAAA,kBACA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF,EACF,CAAA;AAAA,UAAA,GACF;AAAA,UACC,QAAQ,SAAS,KACfP,2BAAA,kBAAA,KAAA,OAAA,EAAI,WAAU,sBACZ,UAAA;AAAA,YACC,YAAAE,2BAAA,kBAAA;AAAA,cAACM,yBAAA;AAAA,cAAA;AAAA,gBACC,OAAO,cAAc;AAAA,gBACrB,SAAQ;AAAA,gBACR,OAAM;AAAA,gBACN,MAAMC,YAAA;AAAA,gBACN,SAAS,MAAM,oBAAoB,eAAe,OAAO;AAAA,gBAExD,UAAc,cAAA;AAAA,cAAA;AAAA,YACjB;AAAA,YAEFP,2BAAA,kBAAA;AAAA,cAACM,yBAAA;AAAA,cAAA;AAAA,gBACC,OAAO,aAAa;AAAA,gBACpB,SAAQ;AAAA,gBACR,OAAM;AAAA,gBACN,MAAME,YAAA;AAAA,gBACN,SAAS,MAAM;AACI,mCAAA,eAAe,QAAW,OAAO;AAElD,wBAAM,gBAA2B,QAAQ,MAAM,GAAG,EAAE;AACpD,2CAAyB,aAAa;AAAA,gBACxC;AAAA,gBAEC,UAAa,aAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAChB,EACF,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MA7DG,KAAK,UAAU,gBAAgB,OAAO;AAAA,IAiE7C,IAAAR,iDAAC,QAAK,EAAA,WAAU,MAAM,CAAA;AAAA,EAAA,GAE1B;AAEJ;;"}

package/dist/components/DictionaryFieldEditor/EditorView/EditorView.d.ts

@@ -1,8 +1,10 @@
+import { Locales } from '@intlayer/config';
 import { Dictionary } from '@intlayer/core';
 import { FC } from 'react';
 type EditorViewProps = {
     dictionaryKey: string;
     dictionary: Dictionary;
+    locales: Locales[];
 };
 export declare const EditorView: FC<EditorViewProps>;
 export {};

package/dist/components/DictionaryFieldEditor/EditorView/EditorView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorView.d.ts","sourceRoot":"","sources":["../../../../src/components/DictionaryFieldEditor/EditorView/EditorView.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgB,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAO,EAAW,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAqBzC,KAAK,eAAe,GAAG;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,UAAU,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAgJ1C,CAAC"}
+{"version":3,"file":"EditorView.d.ts","sourceRoot":"","sources":["../../../../src/components/DictionaryFieldEditor/EditorView/EditorView.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAgB,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAO,EAAW,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAqBzC,KAAK,eAAe,GAAG;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,EAAE,OAAO,EAAE,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAkJ1C,CAAC"}

package/dist/components/DictionaryFieldEditor/EditorView/EditorView.mjs

@@ -33,7 +33,8 @@ import { NodeTypeSelector } from "../NodeTypeSelector.mjs";
 import { TextEditor } from "./TextEditor.mjs";
 const EditorView = ({
   dictionaryKey,
-  dictionary
+  dictionary,
+  locales
 }) => {
   const { focusedContent, setFocusedContentKeyPath } = useEditionPanelStore(
     useShallow((s) => ({
@@ -85,7 +86,8 @@ const EditorView = ({
       {
         keyPath,
         section,
-        dictionaryKey
+        dictionary,
+        locales
       },
       keyPath.join(".")
     ),
@@ -103,7 +105,7 @@ const EditorView = ({
                   {
                     name: "key",
                     "aria-label": "Key",
-                    placeholder: titleInput.placeholder.value,
+                    placeholder: titleInput.placeholder,
                     defaultValue: camelCaseToSentence(initialKeyName),
                     onSave: (value) => handleRenameNodeKey(value),
                     className: "h-8",
@@ -134,7 +136,7 @@ const EditorView = ({
             isEdited && /* @__PURE__ */ jsxRuntimeExports.jsx(
               Button,
               {
-                label: restoreButton.label.value,
+                label: restoreButton.label,
                 variant: "outline",
                 color: "text-inverse",
                 Icon: RotateCcw,
@@ -145,7 +147,7 @@ const EditorView = ({
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               Button,
               {
-                label: deleteButton.label.value,
+                label: deleteButton.label,
                 variant: "outline",
                 color: "error",
                 Icon: X,

package/dist/components/DictionaryFieldEditor/EditorView/EditorView.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditorView.mjs","sources":["../../../../src/components/DictionaryFieldEditor/EditorView/EditorView.tsx"],"sourcesContent":["'use client';\n\nimport { type KeyPath, type Dictionary } from '@intlayer/core';\nimport { RotateCcw, X } from 'lucide-react';\nimport { useMemo, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { useShallow } from 'zustand/react/shallow';\nimport { EditableFieldInput } from '../..//EditableField';\nimport {\n  camelCaseToSentence,\n  sentenceToCamelCase,\n} from '../../../utils/camelCase';\nimport { getDictionaryValueByKeyPath } from '../../../utils/dictionary';\nimport { Button } from '../../Button';\nimport {\n  useEditedContentStore,\n  useEditionPanelStore,\n} from '../../DictionaryEditor';\nimport { Label } from '../../Label';\nimport { editorViewContent } from '../editorView.content';\nimport { getIsEditableSection } from '../getIsEditableSection';\nimport { NodeTypeSelector } from '../NodeTypeSelector';\nimport { TextEditor } from './TextEditor';\n\ntype EditorViewProps = {\n  dictionaryKey: string;\n  dictionary: Dictionary;\n};\n\nexport const EditorView: FC<EditorViewProps> = ({\n  dictionaryKey,\n  dictionary,\n}) => {\n  const { focusedContent, setFocusedContentKeyPath } = useEditionPanelStore(\n    useShallow((s) => ({\n      setFocusedContentKeyPath: s.setFocusedContentKeyPath,\n      focusedContent: s.focusedContent,\n    }))\n  );\n  const keyPath = focusedContent?.keyPath ?? [];\n  const initialKeyName = keyPath[keyPath.length - 1]?.key ?? '';\n  const { titleInput, deleteButton, nodeTypeSelector, restoreButton } =\n    useDictionary(editorViewContent);\n\n  const {\n    editedContent,\n    renameEditedContent,\n    addEditedContent,\n    removeEditedContent,\n  } = useEditedContentStore(\n    useShallow((s) => ({\n      editedContent: s.editedContent,\n      renameEditedContent: s.renameEditedContent,\n      addEditedContent: s.addEditedContent,\n      removeEditedContent: s.removeEditedContent,\n    }))\n  );\n\n  const editedSection = editedContent[dictionaryKey]?.content\n    ? getDictionaryValueByKeyPath(editedContent[dictionaryKey].content, keyPath)\n    : undefined;\n\n  const dictionarySection = getDictionaryValueByKeyPath(\n    dictionary.content,\n    keyPath\n  );\n\n  const section = editedSection ?? dictionarySection;\n\n  const isEdited = useMemo(\n    () =>\n      editedSection &&\n      JSON.stringify(editedSection) !== JSON.stringify(dictionarySection),\n    [editedSection, dictionarySection]\n  );\n\n  const isEditableSection = getIsEditableSection(section);\n\n  const handleRenameNodeKey = (keyName: string) => {\n    const camelCaseSentence = sentenceToCamelCase(keyName);\n    renameEditedContent(dictionaryKey, camelCaseSentence, keyPath);\n    const prevKeyPath: KeyPath[] = keyPath.slice(0, -1);\n    const lastKeyPath: KeyPath = keyPath[keyPath.length - 1];\n    const newKeyPath: KeyPath[] = [\n      ...prevKeyPath,\n      { ...lastKeyPath, key: camelCaseSentence } as KeyPath,\n    ];\n    setFocusedContentKeyPath(newKeyPath);\n  };\n\n  return (\n    <>\n      {isEditableSection && (\n        <TextEditor\n          key={keyPath.join('.')}\n          keyPath={keyPath}\n          section={section}\n          dictionaryKey={dictionaryKey}\n        />\n      )}\n\n      {keyPath.length > 0 ? (\n        <form\n          className=\"bg-text text-text-dark dark:bg-text-dark dark:text-text flex w-full flex-col items-start justify-between gap-6 px-4 py-2\"\n          key={JSON.stringify(focusedContent?.keyPath)}\n        >\n          <div className=\"flex w-full flex-wrap items-start justify-between gap-6\">\n            {typeof initialKeyName === 'string' && (\n              <div className=\"flex flex-col gap-3\">\n                <Label>{titleInput.label}</Label>\n                <div className=\"flex flex-wrap items-center gap-4\">\n                  <EditableFieldInput\n                    name=\"key\"\n                    aria-label=\"Key\"\n                    key={initialKeyName}\n                    placeholder={titleInput.placeholder.value}\n                    defaultValue={camelCaseToSentence(initialKeyName)}\n                    onSave={(value) => handleRenameNodeKey(value)}\n                    className=\"h-8\"\n                    variant=\"invisible\"\n                  />\n                  <span className=\"text-neutral dark:text-neutral-dark text-sm\">\n                    ({initialKeyName})\n                  </span>\n                </div>\n              </div>\n            )}\n\n            <div>\n              <Label>{nodeTypeSelector.label}</Label>\n\n              <NodeTypeSelector\n                keyPath={keyPath}\n                dictionaryKey={dictionaryKey}\n                section={section}\n              />\n            </div>\n          </div>\n          {keyPath.length > 0 && (\n            <div className=\"ml-auto flex gap-2\">\n              {isEdited && (\n                <Button\n                  label={restoreButton.label.value}\n                  variant=\"outline\"\n                  color=\"text-inverse\"\n                  Icon={RotateCcw}\n                  onClick={() => removeEditedContent(dictionaryKey, keyPath)}\n                >\n                  {restoreButton.text}\n                </Button>\n              )}\n              <Button\n                label={deleteButton.label.value}\n                variant=\"outline\"\n                color=\"error\"\n                Icon={X}\n                onClick={() => {\n                  addEditedContent(dictionaryKey, undefined, keyPath);\n\n                  const parentKeyPath: KeyPath[] = keyPath.slice(0, -1);\n                  setFocusedContentKeyPath(parentKeyPath);\n                }}\n              >\n                {deleteButton.text}\n              </Button>\n            </div>\n          )}\n        </form>\n      ) : (\n        <span className=\"h-8\"></span>\n      )}\n    </>\n  );\n};\n"],"names":["jsxs","Fragment","jsx"],"mappings":"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"}
+{"version":3,"file":"EditorView.mjs","sources":["../../../../src/components/DictionaryFieldEditor/EditorView/EditorView.tsx"],"sourcesContent":["'use client';\n\nimport { type Locales } from '@intlayer/config';\nimport { type KeyPath, type Dictionary } from '@intlayer/core';\nimport { RotateCcw, X } from 'lucide-react';\nimport { useMemo, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { useShallow } from 'zustand/react/shallow';\nimport { EditableFieldInput } from '../..//EditableField';\nimport {\n  camelCaseToSentence,\n  sentenceToCamelCase,\n} from '../../../utils/camelCase';\nimport { getDictionaryValueByKeyPath } from '../../../utils/dictionary';\nimport { Button } from '../../Button';\nimport {\n  useEditedContentStore,\n  useEditionPanelStore,\n} from '../../DictionaryEditor';\nimport { Label } from '../../Label';\nimport { editorViewContent } from '../editorView.content';\nimport { getIsEditableSection } from '../getIsEditableSection';\nimport { NodeTypeSelector } from '../NodeTypeSelector';\nimport { TextEditor } from './TextEditor';\n\ntype EditorViewProps = {\n  dictionaryKey: string;\n  dictionary: Dictionary;\n  locales: Locales[];\n};\n\nexport const EditorView: FC<EditorViewProps> = ({\n  dictionaryKey,\n  dictionary,\n  locales,\n}) => {\n  const { focusedContent, setFocusedContentKeyPath } = useEditionPanelStore(\n    useShallow((s) => ({\n      setFocusedContentKeyPath: s.setFocusedContentKeyPath,\n      focusedContent: s.focusedContent,\n    }))\n  );\n  const keyPath = focusedContent?.keyPath ?? [];\n  const initialKeyName = keyPath[keyPath.length - 1]?.key ?? '';\n  const { titleInput, deleteButton, nodeTypeSelector, restoreButton } =\n    useDictionary(editorViewContent);\n\n  const {\n    editedContent,\n    renameEditedContent,\n    addEditedContent,\n    removeEditedContent,\n  } = useEditedContentStore(\n    useShallow((s) => ({\n      editedContent: s.editedContent,\n      renameEditedContent: s.renameEditedContent,\n      addEditedContent: s.addEditedContent,\n      removeEditedContent: s.removeEditedContent,\n    }))\n  );\n\n  const editedSection = editedContent[dictionaryKey]?.content\n    ? getDictionaryValueByKeyPath(editedContent[dictionaryKey].content, keyPath)\n    : undefined;\n\n  const dictionarySection = getDictionaryValueByKeyPath(\n    dictionary.content,\n    keyPath\n  );\n\n  const section = editedSection ?? dictionarySection;\n\n  const isEdited = useMemo(\n    () =>\n      editedSection &&\n      JSON.stringify(editedSection) !== JSON.stringify(dictionarySection),\n    [editedSection, dictionarySection]\n  );\n\n  const isEditableSection = getIsEditableSection(section);\n\n  const handleRenameNodeKey = (keyName: string) => {\n    const camelCaseSentence = sentenceToCamelCase(keyName);\n    renameEditedContent(dictionaryKey, camelCaseSentence, keyPath);\n    const prevKeyPath: KeyPath[] = keyPath.slice(0, -1);\n    const lastKeyPath: KeyPath = keyPath[keyPath.length - 1];\n    const newKeyPath: KeyPath[] = [\n      ...prevKeyPath,\n      { ...lastKeyPath, key: camelCaseSentence } as KeyPath,\n    ];\n    setFocusedContentKeyPath(newKeyPath);\n  };\n\n  return (\n    <>\n      {isEditableSection && (\n        <TextEditor\n          key={keyPath.join('.')}\n          keyPath={keyPath}\n          section={section}\n          dictionary={dictionary}\n          locales={locales}\n        />\n      )}\n\n      {keyPath.length > 0 ? (\n        <form\n          className=\"bg-text text-text-dark dark:bg-text-dark dark:text-text flex w-full flex-col items-start justify-between gap-6 px-4 py-2\"\n          key={JSON.stringify(focusedContent?.keyPath)}\n        >\n          <div className=\"flex w-full flex-wrap items-start justify-between gap-6\">\n            {typeof initialKeyName === 'string' && (\n              <div className=\"flex flex-col gap-3\">\n                <Label>{titleInput.label}</Label>\n                <div className=\"flex flex-wrap items-center gap-4\">\n                  <EditableFieldInput\n                    name=\"key\"\n                    aria-label=\"Key\"\n                    key={initialKeyName}\n                    placeholder={titleInput.placeholder}\n                    defaultValue={camelCaseToSentence(initialKeyName)}\n                    onSave={(value) => handleRenameNodeKey(value)}\n                    className=\"h-8\"\n                    variant=\"invisible\"\n                  />\n                  <span className=\"text-neutral dark:text-neutral-dark text-sm\">\n                    ({initialKeyName})\n                  </span>\n                </div>\n              </div>\n            )}\n\n            <div>\n              <Label>{nodeTypeSelector.label}</Label>\n\n              <NodeTypeSelector\n                keyPath={keyPath}\n                dictionaryKey={dictionaryKey}\n                section={section}\n              />\n            </div>\n          </div>\n          {keyPath.length > 0 && (\n            <div className=\"ml-auto flex gap-2\">\n              {isEdited && (\n                <Button\n                  label={restoreButton.label}\n                  variant=\"outline\"\n                  color=\"text-inverse\"\n                  Icon={RotateCcw}\n                  onClick={() => removeEditedContent(dictionaryKey, keyPath)}\n                >\n                  {restoreButton.text}\n                </Button>\n              )}\n              <Button\n                label={deleteButton.label}\n                variant=\"outline\"\n                color=\"error\"\n                Icon={X}\n                onClick={() => {\n                  addEditedContent(dictionaryKey, undefined, keyPath);\n\n                  const parentKeyPath: KeyPath[] = keyPath.slice(0, -1);\n                  setFocusedContentKeyPath(parentKeyPath);\n                }}\n              >\n                {deleteButton.text}\n              </Button>\n            </div>\n          )}\n        </form>\n      ) : (\n        <span className=\"h-8\"></span>\n      )}\n    </>\n  );\n};\n"],"names":["jsxs","Fragment","jsx"],"mappings":"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"}