@intlayer/design-system 3.3.4 → 3.3.6

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

@@ -1 +1 @@
-{"version":3,"file":"TextEditor.mjs","sources":["../../../../src/components/DictionaryFieldEditor/EditorView/TextEditor.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n'use client';\n\nimport { getConfiguration } from '@intlayer/config/client';\nimport {\n  type EnumerationContent,\n  type TranslationContent,\n  NodeType,\n  type KeyPath,\n  type DictionaryValue,\n  getLocaleName,\n} from '@intlayer/core';\nimport { Plus, X } from 'lucide-react';\nimport {\n  createElement,\n  type ReactElement,\n  type ReactNode,\n  type FC,\n} from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { getSectionType } from '../../../utils/dictionary';\nimport { renameKey } from '../../../utils/object';\nimport { Button } from '../../Button';\nimport { ContentEditorTextArea } from '../../ContentEditor/ContentEditorTextArea';\nimport { useEditedContentStore } from '../../DictionaryEditor';\nimport { EnumKeyInput } from '../EnumKeyInput';\nimport { getIsEditableSection } from '../getIsEditableSection';\nimport { navigationViewContent } from '../NavigationView/navigationViewNode.content';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nconst createReactElement = (element: ReactElement) => {\n  if (typeof element === 'string') {\n    // If it's a string, simply return it (used for text content)\n    return element;\n  }\n\n  const convertChildrenAsArray = (element: ReactElement): ReactElement => {\n    if (element?.props && typeof element.props.children === 'object') {\n      const childrenResult: ReactNode[] = [];\n      const { children } = element.props;\n\n      // Create the children elements recursively, if any\n      Object.keys(children).forEach((key) =>\n        childrenResult.push(createReactElement(children[key]))\n      );\n\n      return {\n        ...element,\n        props: { ...element.props, children: childrenResult },\n      };\n    }\n\n    return {\n      ...element,\n      props: { ...element.props, children: element.props.children },\n    };\n  };\n\n  const fixedElement = convertChildrenAsArray(element);\n\n  const { type, props } = fixedElement;\n\n  // Create and return the React element\n  return createElement(type ?? 'div', props, ...props.children);\n};\n\nexport type TextEditorProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: DictionaryValue;\n};\n\nconst TranslationTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionaryKey,\n}: TextEditorProps) => {\n  const { locales } = getConfiguration().internationalization;\n  const addEditedContent = useEditedContentStore((s) => s.addEditedContent);\n\n  return (\n    <table className=\"w-full gap-2\">\n      <tbody>\n        {locales.map((translationKey) => (\n          <tr\n            key={translationKey}\n            className=\"border-text dark:border-text-dark w-full border-t-[1.5px]\"\n            lang={translationKey}\n          >\n            <td className=\"border-text dark:border-text-dark border-r-[1.5px] p-2\">\n              {getLocaleName(translationKey)}\n            </td>\n            <td className=\"w-full p-2\">\n              <ContentEditorTextArea\n                variant=\"default\"\n                aria-label=\"Edit field\"\n                onContentChange={(newValue) =>\n                  addEditedContent(dictionaryKey, newValue, [\n                    ...keyPath,\n                    {\n                      type: NodeType.Translation,\n                      key: translationKey,\n                    },\n                  ])\n                }\n              >\n                {\n                  (section as TranslationContent<string>)[NodeType.Translation][\n                    translationKey\n                  ] as string\n                }\n              </ContentEditorTextArea>\n            </td>\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nconst EnumerationTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const addEditedContent = useEditedContentStore((s) => s.addEditedContent);\n  const { addNewEnumeration } = useDictionary(navigationViewContent);\n\n  return (\n    <table className=\"w-full table-fixed gap-2\">\n      <tbody>\n        {Object.keys(\n          (section as EnumerationContent<DictionaryValue>)[NodeType.Enumeration]\n        ).map((enumKey) => (\n          <tr\n            key={enumKey}\n            className=\"border-text dark:border-text-dark w-full border-y-[1.5px]\"\n          >\n            <td className=\"border-text dark:border-text-dark w-44 border-r-[1.5px] p-2\">\n              <div className=\"flex gap-1\">\n                <Button\n                  label=\"Remove\"\n                  variant=\"hoverable\"\n                  size=\"icon-md\"\n                  color=\"text\"\n                  Icon={X}\n                  className=\"w-16\"\n                  onClick={() =>\n                    addEditedContent(dictionaryKey, undefined, [\n                      ...keyPath,\n                      {\n                        type: NodeType.Enumeration,\n                        key: enumKey,\n                      },\n                    ])\n                  }\n                />\n                <EnumKeyInput\n                  value={enumKey}\n                  onChange={(value) => {\n                    const preValueContent = (\n                      section as EnumerationContent<string>\n                    )[NodeType.Enumeration];\n                    const newValueContent = renameKey(\n                      preValueContent,\n                      enumKey as keyof typeof preValueContent,\n                      value\n                    );\n                    const newValue = {\n                      ...(section as EnumerationContent<string>),\n                      [NodeType.Enumeration]: newValueContent,\n                    };\n\n                    addEditedContent(dictionaryKey, newValue, keyPath);\n                  }}\n                />\n              </div>\n            </td>\n            <td className=\"w-full p-2\">\n              <ContentEditorTextArea\n                variant=\"default\"\n                aria-label=\"Edit field\"\n                onContentChange={(newValue) =>\n                  addEditedContent(dictionaryKey, newValue, [\n                    ...keyPath,\n                    {\n                      type: NodeType.Enumeration,\n                      key: enumKey,\n                    },\n                  ])\n                }\n              >\n                {\n                  (section as EnumerationContent<string>)[NodeType.Enumeration][\n                    enumKey as any\n                  ] as string\n                }\n              </ContentEditorTextArea>\n            </td>\n          </tr>\n        ))}\n      </tbody>\n\n      <tfoot>\n        <Button\n          label={addNewEnumeration.label.value}\n          variant=\"hoverable\"\n          color=\"neutral\"\n          textAlign=\"left\"\n          onClick={() =>\n            addEditedContent(\n              dictionaryKey,\n              '',\n              [...keyPath, { type: NodeType.Enumeration, key: 'unknown' }],\n              false\n            )\n          }\n          Icon={Plus}\n          className=\"m-2\"\n        >\n          {addNewEnumeration.text}\n        </Button>\n      </tfoot>\n    </table>\n  );\n};\n\nconst ArrayTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const addEditedContent = useEditedContentStore((s) => s.addEditedContent);\n  const { addNewElement } = useDictionary(navigationViewContent);\n\n  return (\n    <table className=\"w-full gap-2\">\n      <tbody>\n        {(section as DictionaryValue[]).map((subSection, index) => (\n          <tr\n            key={JSON.stringify(subSection)}\n            className=\"border-text dark:border-text-dark w-full border-t-[1.5px]\"\n          >\n            <td className=\"border-text dark:border-text-dark border-r-[1.5px] p-2\">\n              {index}\n            </td>\n            <td className=\"w-full p-2\">\n              <ContentEditorTextArea\n                variant=\"default\"\n                aria-label=\"Edit field\"\n                onContentChange={(newValue) => {\n                  addEditedContent(dictionaryKey, newValue, [\n                    ...keyPath,\n                    {\n                      type: NodeType.Array,\n                      key: index,\n                    },\n                  ]);\n                }}\n              >\n                {subSection as string}\n              </ContentEditorTextArea>\n            </td>\n          </tr>\n        ))}\n      </tbody>\n      <tfoot>\n        <Button\n          label={addNewElement.label.value}\n          variant=\"hoverable\"\n          color=\"neutral\"\n          textAlign=\"left\"\n          onClick={() => {\n            const newKeyPath: KeyPath[] = [\n              ...keyPath,\n              {\n                type: NodeType.Array,\n                key: (section as DictionaryValue[]).length,\n              },\n            ];\n            addEditedContent(dictionaryKey, '', newKeyPath, false);\n          }}\n          Icon={Plus}\n        >\n          {addNewElement.text}\n        </Button>\n      </tfoot>\n    </table>\n  );\n};\n\nexport const TextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const addEditedContent = useEditedContentStore((s) => s.addEditedContent);\n  const { tsxNotEditable } = useDictionary(navigationViewContent);\n  const nodeType = getSectionType(section);\n  const isEditableSection = getIsEditableSection(section);\n\n  if (!isEditableSection) return <></>;\n\n  if (typeof section === 'object') {\n    if (nodeType === NodeType.ReactNode) {\n      return (\n        <>\n          {createReactElement(section as unknown as ReactElement)}\n          <span className=\"text-neutral dark:text-neutral-dark text-xs\">\n            {tsxNotEditable}\n          </span>\n        </>\n      );\n    }\n\n    if (nodeType === NodeType.Translation) {\n      return (\n        <TranslationTextEditor\n          dictionaryKey={dictionaryKey}\n          keyPath={keyPath}\n          section={section}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Enumeration) {\n      return (\n        <EnumerationTextEditor\n          dictionaryKey={dictionaryKey}\n          keyPath={keyPath}\n          section={section}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Array) {\n      return (\n        <ArrayTextEditor\n          dictionaryKey={dictionaryKey}\n          keyPath={keyPath}\n          section={section}\n        />\n      );\n    }\n  }\n\n  if (nodeType === NodeType.Text) {\n    return (\n      <div className=\"border-text dark:border-text-dark w-full border-t-[1.5px] p-2\">\n        <ContentEditorTextArea\n          variant=\"default\"\n          aria-label=\"Edit field\"\n          onContentChange={(newValue) =>\n            addEditedContent(dictionaryKey, newValue, keyPath)\n          }\n        >\n          {section as string}\n        </ContentEditorTextArea>\n      </div>\n    );\n  }\n\n  return <>Error loading section</>;\n};\n"],"names":["element","jsx","jsxs","Fragment"],"mappings":"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"}
+{"version":3,"file":"TextEditor.mjs","sources":["../../../../src/components/DictionaryFieldEditor/EditorView/TextEditor.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n'use client';\n\nimport { getConfiguration } from '@intlayer/config/client';\nimport {\n  type EnumerationContent,\n  type TranslationContent,\n  NodeType,\n  type KeyPath,\n  type DictionaryValue,\n  getLocaleName,\n} from '@intlayer/core';\nimport { Plus, X } from 'lucide-react';\nimport {\n  createElement,\n  type ReactElement,\n  type ReactNode,\n  type FC,\n} from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { useShallow } from 'zustand/react/shallow';\nimport { getSectionType } from '../../../utils/dictionary';\nimport { renameKey } from '../../../utils/object';\nimport { Button } from '../../Button';\nimport { ContentEditorTextArea } from '../../ContentEditor/ContentEditorTextArea';\nimport { useEditedContentStore } from '../../DictionaryEditor';\nimport { EnumKeyInput } from '../EnumKeyInput';\nimport { getIsEditableSection } from '../getIsEditableSection';\nimport { navigationViewContent } from '../NavigationView/navigationViewNode.content';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nconst createReactElement = (element: ReactElement) => {\n  if (typeof element === 'string') {\n    // If it's a string, simply return it (used for text content)\n    return element;\n  }\n\n  const convertChildrenAsArray = (element: ReactElement): ReactElement => {\n    if (element?.props && typeof element.props.children === 'object') {\n      const childrenResult: ReactNode[] = [];\n      const { children } = element.props;\n\n      // Create the children elements recursively, if any\n      Object.keys(children).forEach((key) =>\n        childrenResult.push(createReactElement(children[key]))\n      );\n\n      return {\n        ...element,\n        props: { ...element.props, children: childrenResult },\n      };\n    }\n\n    return {\n      ...element,\n      props: { ...element.props, children: element.props.children },\n    };\n  };\n\n  const fixedElement = convertChildrenAsArray(element);\n\n  const { type, props } = fixedElement;\n\n  // Create and return the React element\n  return createElement(type ?? 'div', props, ...props.children);\n};\n\nexport type TextEditorProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: DictionaryValue;\n};\n\nconst TranslationTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionaryKey,\n}: TextEditorProps) => {\n  const { locales } = getConfiguration().internationalization;\n  const addEditedContent = useEditedContentStore(\n    useShallow((s) => s.addEditedContent)\n  );\n\n  return (\n    <table className=\"w-full gap-2\">\n      <tbody>\n        {locales.map((translationKey) => (\n          <tr\n            key={translationKey}\n            className=\"border-text dark:border-text-dark w-full border-t-[1.5px]\"\n            lang={translationKey}\n          >\n            <td className=\"border-text dark:border-text-dark border-r-[1.5px] p-2\">\n              {getLocaleName(translationKey)}\n            </td>\n            <td className=\"w-full p-2\">\n              <ContentEditorTextArea\n                variant=\"default\"\n                aria-label=\"Edit field\"\n                onContentChange={(newValue) =>\n                  addEditedContent(dictionaryKey, newValue, [\n                    ...keyPath,\n                    {\n                      type: NodeType.Translation,\n                      key: translationKey,\n                    },\n                  ])\n                }\n              >\n                {\n                  (section as TranslationContent<string>)[NodeType.Translation][\n                    translationKey\n                  ] as string\n                }\n              </ContentEditorTextArea>\n            </td>\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nconst EnumerationTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const addEditedContent = useEditedContentStore(\n    useShallow((s) => s.addEditedContent)\n  );\n  const { addNewEnumeration } = useDictionary(navigationViewContent);\n\n  return (\n    <table className=\"w-full table-fixed gap-2\">\n      <tbody>\n        {Object.keys(\n          (section as EnumerationContent<DictionaryValue>)[NodeType.Enumeration]\n        ).map((enumKey) => (\n          <tr\n            key={enumKey}\n            className=\"border-text dark:border-text-dark w-full border-y-[1.5px]\"\n          >\n            <td className=\"border-text dark:border-text-dark w-44 border-r-[1.5px] p-2\">\n              <div className=\"flex gap-1\">\n                <Button\n                  label=\"Remove\"\n                  variant=\"hoverable\"\n                  size=\"icon-md\"\n                  color=\"text\"\n                  Icon={X}\n                  className=\"w-16\"\n                  onClick={() =>\n                    addEditedContent(dictionaryKey, undefined, [\n                      ...keyPath,\n                      {\n                        type: NodeType.Enumeration,\n                        key: enumKey,\n                      },\n                    ])\n                  }\n                />\n                <EnumKeyInput\n                  value={enumKey}\n                  onChange={(value) => {\n                    const preValueContent = (\n                      section as EnumerationContent<string>\n                    )[NodeType.Enumeration];\n                    const newValueContent = renameKey(\n                      preValueContent,\n                      enumKey as keyof typeof preValueContent,\n                      value\n                    );\n                    const newValue = {\n                      ...(section as EnumerationContent<string>),\n                      [NodeType.Enumeration]: newValueContent,\n                    };\n\n                    addEditedContent(dictionaryKey, newValue, keyPath);\n                  }}\n                />\n              </div>\n            </td>\n            <td className=\"w-full p-2\">\n              <ContentEditorTextArea\n                variant=\"default\"\n                aria-label=\"Edit field\"\n                onContentChange={(newValue) =>\n                  addEditedContent(dictionaryKey, newValue, [\n                    ...keyPath,\n                    {\n                      type: NodeType.Enumeration,\n                      key: enumKey,\n                    },\n                  ])\n                }\n              >\n                {\n                  (section as EnumerationContent<string>)[NodeType.Enumeration][\n                    enumKey as any\n                  ] as string\n                }\n              </ContentEditorTextArea>\n            </td>\n          </tr>\n        ))}\n      </tbody>\n\n      <tfoot>\n        <Button\n          label={addNewEnumeration.label.value}\n          variant=\"hoverable\"\n          color=\"neutral\"\n          textAlign=\"left\"\n          onClick={() =>\n            addEditedContent(\n              dictionaryKey,\n              '',\n              [...keyPath, { type: NodeType.Enumeration, key: 'unknown' }],\n              false\n            )\n          }\n          Icon={Plus}\n          className=\"m-2\"\n        >\n          {addNewEnumeration.text}\n        </Button>\n      </tfoot>\n    </table>\n  );\n};\n\nconst ArrayTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const addEditedContent = useEditedContentStore(\n    useShallow((s) => s.addEditedContent)\n  );\n  const { addNewElement } = useDictionary(navigationViewContent);\n\n  return (\n    <table className=\"w-full gap-2\">\n      <tbody>\n        {(section as DictionaryValue[]).map((subSection, index) => (\n          <tr\n            key={JSON.stringify(subSection)}\n            className=\"border-text dark:border-text-dark w-full border-t-[1.5px]\"\n          >\n            <td className=\"border-text dark:border-text-dark border-r-[1.5px] p-2\">\n              {index}\n            </td>\n            <td className=\"w-full p-2\">\n              <ContentEditorTextArea\n                variant=\"default\"\n                aria-label=\"Edit field\"\n                onContentChange={(newValue) => {\n                  addEditedContent(dictionaryKey, newValue, [\n                    ...keyPath,\n                    {\n                      type: NodeType.Array,\n                      key: index,\n                    },\n                  ]);\n                }}\n              >\n                {subSection as string}\n              </ContentEditorTextArea>\n            </td>\n          </tr>\n        ))}\n      </tbody>\n      <tfoot>\n        <Button\n          label={addNewElement.label.value}\n          variant=\"hoverable\"\n          color=\"neutral\"\n          textAlign=\"left\"\n          onClick={() => {\n            const newKeyPath: KeyPath[] = [\n              ...keyPath,\n              {\n                type: NodeType.Array,\n                key: (section as DictionaryValue[]).length,\n              },\n            ];\n            addEditedContent(dictionaryKey, '', newKeyPath, false);\n          }}\n          Icon={Plus}\n        >\n          {addNewElement.text}\n        </Button>\n      </tfoot>\n    </table>\n  );\n};\n\nexport const TextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const addEditedContent = useEditedContentStore(\n    useShallow((s) => s.addEditedContent)\n  );\n  const { tsxNotEditable } = useDictionary(navigationViewContent);\n  const nodeType = getSectionType(section);\n  const isEditableSection = getIsEditableSection(section);\n\n  if (!isEditableSection) return <></>;\n\n  if (typeof section === 'object') {\n    if (nodeType === NodeType.ReactNode) {\n      return (\n        <>\n          {createReactElement(section as unknown as ReactElement)}\n          <span className=\"text-neutral dark:text-neutral-dark text-xs\">\n            {tsxNotEditable}\n          </span>\n        </>\n      );\n    }\n\n    if (nodeType === NodeType.Translation) {\n      return (\n        <TranslationTextEditor\n          dictionaryKey={dictionaryKey}\n          keyPath={keyPath}\n          section={section}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Enumeration) {\n      return (\n        <EnumerationTextEditor\n          dictionaryKey={dictionaryKey}\n          keyPath={keyPath}\n          section={section}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Array) {\n      return (\n        <ArrayTextEditor\n          dictionaryKey={dictionaryKey}\n          keyPath={keyPath}\n          section={section}\n        />\n      );\n    }\n  }\n\n  if (nodeType === NodeType.Text) {\n    return (\n      <div className=\"border-text dark:border-text-dark w-full border-t-[1.5px] p-2\">\n        <ContentEditorTextArea\n          variant=\"default\"\n          aria-label=\"Edit field\"\n          onContentChange={(newValue) =>\n            addEditedContent(dictionaryKey, newValue, keyPath)\n          }\n        >\n          {section as string}\n        </ContentEditorTextArea>\n      </div>\n    );\n  }\n\n  return <>Error loading section</>;\n};\n"],"names":["element","jsx","jsxs","Fragment"],"mappings":"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"}

package/dist/components/DictionaryFieldEditor/JSONEditor.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../jsx-runtime-XHKiWCTo.cjs");
+const shallow = require("../../shallow-lhDIFtEp.cjs");
 const components_ContentEditor_ContentEditorTextArea = require("../ContentEditor/ContentEditorTextArea.cjs");
 const components_DictionaryEditor_useEditedContentStore = require("../DictionaryEditor/useEditedContentStore.cjs");
 require("../DictionaryEditor/useEditionPanelStore.cjs");
@@ -27,10 +28,12 @@ require("../DictionaryEditor/validDictionaryChangeButtons.content.cjs");
 require("zod");
 const components_DictionaryFieldEditor_SaveForm_SaveForm = require("./SaveForm/SaveForm.cjs");
 const JSONEditor = ({ dictionary }) => {
-  const { setEditedContent, editedContent } = components_DictionaryEditor_useEditedContentStore.useEditedContentStore((s) => ({
-    editedContent: s.editedContent,
-    setEditedContent: s.setEditedContent
-  }));
+  const { setEditedContent, editedContent } = components_DictionaryEditor_useEditedContentStore.useEditedContentStore(
+    shallow.useShallow((s) => ({
+      editedContent: s.editedContent,
+      setEditedContent: s.setEditedContent
+    }))
+  );
   const isValidJSON = (jsonString) => {
     try {
       JSON.parse(jsonString);

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

@@ -1 +1 @@
-{"version":3,"file":"JSONEditor.cjs","sources":["../../../src/components/DictionaryFieldEditor/JSONEditor.tsx"],"sourcesContent":["import { Dictionary } from '@intlayer/core';\nimport type { FC } from 'react';\nimport { ContentEditorTextArea } from '../ContentEditor/ContentEditorTextArea';\nimport { useEditedContentStore } from '../DictionaryEditor';\nimport { SaveForm } from './SaveForm/SaveForm';\n\ntype JSONEditorProps = {\n  dictionary: Dictionary;\n};\n\nexport const JSONEditor: FC<JSONEditorProps> = ({ dictionary }) => {\n  const { setEditedContent, editedContent } = useEditedContentStore((s) => ({\n    editedContent: s.editedContent,\n    setEditedContent: s.setEditedContent,\n  }));\n\n  const isValidJSON = (jsonString: string): boolean => {\n    try {\n      JSON.parse(jsonString);\n      return true; // Valid JSON\n    } catch (_error) {\n      return false; // Invalid JSON\n    }\n  };\n\n  const displayedContent =\n    editedContent[dictionary.key]?.content ?? dictionary?.content ?? {};\n\n  return (\n    <>\n      <ContentEditorTextArea\n        key={JSON.stringify(displayedContent)}\n        onContentChange={(content) =>\n          setEditedContent(dictionary.key, JSON.parse(content))\n        }\n        validate={isValidJSON}\n        className=\"text-sm\"\n        variant=\"default\"\n      >\n        {JSON.stringify(displayedContent, null, 2)}\n      </ContentEditorTextArea>\n      <SaveForm dictionary={dictionary} />\n    </>\n  );\n};\n"],"names":["useEditedContentStore","jsxs","Fragment","jsx","ContentEditorTextArea","SaveForm"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,aAAkC,CAAC,EAAE,iBAAiB;AACjE,QAAM,EAAE,kBAAkB,cAAkB,IAAAA,kDAAA,sBAAsB,CAAC,OAAO;AAAA,IACxE,eAAe,EAAE;AAAA,IACjB,kBAAkB,EAAE;AAAA,EACpB,EAAA;AAEI,QAAA,cAAc,CAAC,eAAgC;AAC/C,QAAA;AACF,WAAK,MAAM,UAAU;AACd,aAAA;AAAA,aACA,QAAQ;AACR,aAAA;AAAA,IACT;AAAA,EAAA;AAGI,QAAA,mBACJ,cAAc,WAAW,GAAG,GAAG,WAAW,YAAY,WAAW;AAEnE,SAEIC,2BAAA,kBAAA,KAAAC,uCAAA,EAAA,UAAA;AAAA,IAAAC,2BAAA,kBAAA;AAAA,MAACC,+CAAA;AAAA,MAAA;AAAA,QAEC,iBAAiB,CAAC,YAChB,iBAAiB,WAAW,KAAK,KAAK,MAAM,OAAO,CAAC;AAAA,QAEtD,UAAU;AAAA,QACV,WAAU;AAAA,QACV,SAAQ;AAAA,QAEP,UAAK,KAAA,UAAU,kBAAkB,MAAM,CAAC;AAAA,MAAA;AAAA,MARpC,KAAK,UAAU,gBAAgB;AAAA,IAStC;AAAA,IACAD,iDAACE,mDAAAA,YAAS,YAAwB;AAAA,EACpC,EAAA,CAAA;AAEJ;;"}
+{"version":3,"file":"JSONEditor.cjs","sources":["../../../src/components/DictionaryFieldEditor/JSONEditor.tsx"],"sourcesContent":["import { Dictionary } from '@intlayer/core';\nimport type { FC } from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { ContentEditorTextArea } from '../ContentEditor/ContentEditorTextArea';\nimport { useEditedContentStore } from '../DictionaryEditor';\nimport { SaveForm } from './SaveForm/SaveForm';\n\ntype JSONEditorProps = {\n  dictionary: Dictionary;\n};\n\nexport const JSONEditor: FC<JSONEditorProps> = ({ dictionary }) => {\n  const { setEditedContent, editedContent } = useEditedContentStore(\n    useShallow((s) => ({\n      editedContent: s.editedContent,\n      setEditedContent: s.setEditedContent,\n    }))\n  );\n\n  const isValidJSON = (jsonString: string): boolean => {\n    try {\n      JSON.parse(jsonString);\n      return true; // Valid JSON\n    } catch (_error) {\n      return false; // Invalid JSON\n    }\n  };\n\n  const displayedContent =\n    editedContent[dictionary.key]?.content ?? dictionary?.content ?? {};\n\n  return (\n    <>\n      <ContentEditorTextArea\n        key={JSON.stringify(displayedContent)}\n        onContentChange={(content) =>\n          setEditedContent(dictionary.key, JSON.parse(content))\n        }\n        validate={isValidJSON}\n        className=\"text-sm\"\n        variant=\"default\"\n      >\n        {JSON.stringify(displayedContent, null, 2)}\n      </ContentEditorTextArea>\n      <SaveForm dictionary={dictionary} />\n    </>\n  );\n};\n"],"names":["useEditedContentStore","useShallow","jsxs","Fragment","jsx","ContentEditorTextArea","SaveForm"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,aAAkC,CAAC,EAAE,iBAAiB;AAC3D,QAAA,EAAE,kBAAkB,cAAA,IAAkBA,kDAAA;AAAA,IAC1CC,QAAA,WAAW,CAAC,OAAO;AAAA,MACjB,eAAe,EAAE;AAAA,MACjB,kBAAkB,EAAE;AAAA,IAAA,EACpB;AAAA,EAAA;AAGE,QAAA,cAAc,CAAC,eAAgC;AAC/C,QAAA;AACF,WAAK,MAAM,UAAU;AACd,aAAA;AAAA,aACA,QAAQ;AACR,aAAA;AAAA,IACT;AAAA,EAAA;AAGI,QAAA,mBACJ,cAAc,WAAW,GAAG,GAAG,WAAW,YAAY,WAAW;AAEnE,SAEIC,2BAAA,kBAAA,KAAAC,uCAAA,EAAA,UAAA;AAAA,IAAAC,2BAAA,kBAAA;AAAA,MAACC,+CAAA;AAAA,MAAA;AAAA,QAEC,iBAAiB,CAAC,YAChB,iBAAiB,WAAW,KAAK,KAAK,MAAM,OAAO,CAAC;AAAA,QAEtD,UAAU;AAAA,QACV,WAAU;AAAA,QACV,SAAQ;AAAA,QAEP,UAAK,KAAA,UAAU,kBAAkB,MAAM,CAAC;AAAA,MAAA;AAAA,MARpC,KAAK,UAAU,gBAAgB;AAAA,IAStC;AAAA,IACAD,iDAACE,mDAAAA,YAAS,YAAwB;AAAA,EACpC,EAAA,CAAA;AAEJ;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"JSONEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/JSONEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKhC,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,UAAU,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAkC1C,CAAC"}
+{"version":3,"file":"JSONEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/JSONEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMhC,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,UAAU,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAoC1C,CAAC"}

package/dist/components/DictionaryFieldEditor/JSONEditor.mjs

@@ -1,4 +1,5 @@
 import { j as jsxRuntimeExports } from "../../jsx-runtime-DaNGiM0W.js";
+import { u as useShallow } from "../../shallow-m9BpCkKh.js";
 import { ContentEditorTextArea } from "../ContentEditor/ContentEditorTextArea.mjs";
 import { useEditedContentStore } from "../DictionaryEditor/useEditedContentStore.mjs";
 import "../DictionaryEditor/useEditionPanelStore.mjs";
@@ -25,10 +26,12 @@ import "../DictionaryEditor/validDictionaryChangeButtons.content.mjs";
 import "zod";
 import { SaveForm } from "./SaveForm/SaveForm.mjs";
 const JSONEditor = ({ dictionary }) => {
-  const { setEditedContent, editedContent } = useEditedContentStore((s) => ({
-    editedContent: s.editedContent,
-    setEditedContent: s.setEditedContent
-  }));
+  const { setEditedContent, editedContent } = useEditedContentStore(
+    useShallow((s) => ({
+      editedContent: s.editedContent,
+      setEditedContent: s.setEditedContent
+    }))
+  );
   const isValidJSON = (jsonString) => {
     try {
       JSON.parse(jsonString);

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

@@ -1 +1 @@
-{"version":3,"file":"JSONEditor.mjs","sources":["../../../src/components/DictionaryFieldEditor/JSONEditor.tsx"],"sourcesContent":["import { Dictionary } from '@intlayer/core';\nimport type { FC } from 'react';\nimport { ContentEditorTextArea } from '../ContentEditor/ContentEditorTextArea';\nimport { useEditedContentStore } from '../DictionaryEditor';\nimport { SaveForm } from './SaveForm/SaveForm';\n\ntype JSONEditorProps = {\n  dictionary: Dictionary;\n};\n\nexport const JSONEditor: FC<JSONEditorProps> = ({ dictionary }) => {\n  const { setEditedContent, editedContent } = useEditedContentStore((s) => ({\n    editedContent: s.editedContent,\n    setEditedContent: s.setEditedContent,\n  }));\n\n  const isValidJSON = (jsonString: string): boolean => {\n    try {\n      JSON.parse(jsonString);\n      return true; // Valid JSON\n    } catch (_error) {\n      return false; // Invalid JSON\n    }\n  };\n\n  const displayedContent =\n    editedContent[dictionary.key]?.content ?? dictionary?.content ?? {};\n\n  return (\n    <>\n      <ContentEditorTextArea\n        key={JSON.stringify(displayedContent)}\n        onContentChange={(content) =>\n          setEditedContent(dictionary.key, JSON.parse(content))\n        }\n        validate={isValidJSON}\n        className=\"text-sm\"\n        variant=\"default\"\n      >\n        {JSON.stringify(displayedContent, null, 2)}\n      </ContentEditorTextArea>\n      <SaveForm dictionary={dictionary} />\n    </>\n  );\n};\n"],"names":["jsxs","Fragment","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,aAAkC,CAAC,EAAE,iBAAiB;AACjE,QAAM,EAAE,kBAAkB,cAAkB,IAAA,sBAAsB,CAAC,OAAO;AAAA,IACxE,eAAe,EAAE;AAAA,IACjB,kBAAkB,EAAE;AAAA,EACpB,EAAA;AAEI,QAAA,cAAc,CAAC,eAAgC;AAC/C,QAAA;AACF,WAAK,MAAM,UAAU;AACd,aAAA;AAAA,aACA,QAAQ;AACR,aAAA;AAAA,IACT;AAAA,EAAA;AAGI,QAAA,mBACJ,cAAc,WAAW,GAAG,GAAG,WAAW,YAAY,WAAW;AAEnE,SAEIA,kCAAA,KAAAC,4BAAA,EAAA,UAAA;AAAA,IAAAC,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,iBAAiB,CAAC,YAChB,iBAAiB,WAAW,KAAK,KAAK,MAAM,OAAO,CAAC;AAAA,QAEtD,UAAU;AAAA,QACV,WAAU;AAAA,QACV,SAAQ;AAAA,QAEP,UAAK,KAAA,UAAU,kBAAkB,MAAM,CAAC;AAAA,MAAA;AAAA,MARpC,KAAK,UAAU,gBAAgB;AAAA,IAStC;AAAA,IACAA,sCAAC,YAAS,YAAwB;AAAA,EACpC,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"JSONEditor.mjs","sources":["../../../src/components/DictionaryFieldEditor/JSONEditor.tsx"],"sourcesContent":["import { Dictionary } from '@intlayer/core';\nimport type { FC } from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { ContentEditorTextArea } from '../ContentEditor/ContentEditorTextArea';\nimport { useEditedContentStore } from '../DictionaryEditor';\nimport { SaveForm } from './SaveForm/SaveForm';\n\ntype JSONEditorProps = {\n  dictionary: Dictionary;\n};\n\nexport const JSONEditor: FC<JSONEditorProps> = ({ dictionary }) => {\n  const { setEditedContent, editedContent } = useEditedContentStore(\n    useShallow((s) => ({\n      editedContent: s.editedContent,\n      setEditedContent: s.setEditedContent,\n    }))\n  );\n\n  const isValidJSON = (jsonString: string): boolean => {\n    try {\n      JSON.parse(jsonString);\n      return true; // Valid JSON\n    } catch (_error) {\n      return false; // Invalid JSON\n    }\n  };\n\n  const displayedContent =\n    editedContent[dictionary.key]?.content ?? dictionary?.content ?? {};\n\n  return (\n    <>\n      <ContentEditorTextArea\n        key={JSON.stringify(displayedContent)}\n        onContentChange={(content) =>\n          setEditedContent(dictionary.key, JSON.parse(content))\n        }\n        validate={isValidJSON}\n        className=\"text-sm\"\n        variant=\"default\"\n      >\n        {JSON.stringify(displayedContent, null, 2)}\n      </ContentEditorTextArea>\n      <SaveForm dictionary={dictionary} />\n    </>\n  );\n};\n"],"names":["jsxs","Fragment","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,aAAkC,CAAC,EAAE,iBAAiB;AAC3D,QAAA,EAAE,kBAAkB,cAAA,IAAkB;AAAA,IAC1C,WAAW,CAAC,OAAO;AAAA,MACjB,eAAe,EAAE;AAAA,MACjB,kBAAkB,EAAE;AAAA,IAAA,EACpB;AAAA,EAAA;AAGE,QAAA,cAAc,CAAC,eAAgC;AAC/C,QAAA;AACF,WAAK,MAAM,UAAU;AACd,aAAA;AAAA,aACA,QAAQ;AACR,aAAA;AAAA,IACT;AAAA,EAAA;AAGI,QAAA,mBACJ,cAAc,WAAW,GAAG,GAAG,WAAW,YAAY,WAAW;AAEnE,SAEIA,kCAAA,KAAAC,4BAAA,EAAA,UAAA;AAAA,IAAAC,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,iBAAiB,CAAC,YAChB,iBAAiB,WAAW,KAAK,KAAK,MAAM,OAAO,CAAC;AAAA,QAEtD,UAAU;AAAA,QACV,WAAU;AAAA,QACV,SAAQ;AAAA,QAEP,UAAK,KAAA,UAAU,kBAAkB,MAAM,CAAC;AAAA,MAAA;AAAA,MARpC,KAAK,UAAU,gBAAgB;AAAA,IAStC;AAAA,IACAA,sCAAC,YAAS,YAAwB;AAAA,EACpC,EAAA,CAAA;AAEJ;"}

package/dist/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.cjs

@@ -6,6 +6,7 @@ const core = require("@intlayer/core");
 const lucideReact = require("lucide-react");
 const require$$0 = require("react");
 const reactIntlayer = require("react-intlayer");
+const shallow = require("../../../shallow-lhDIFtEp.cjs");
 const utils_camelCase = require("../../../utils/camelCase.cjs");
 const utils_dictionary = require("../../../utils/dictionary.cjs");
 const components_Accordion_Accordion = require("../../Accordion/Accordion.cjs");
@@ -37,12 +38,14 @@ const NavigationViewNode = ({
 }) => {
   const { locales } = client.getConfiguration().internationalization;
   const section = utils_dictionary.getDictionaryValueByKeyPath(sectionProp, keyPath);
-  const addEditedContent = components_DictionaryEditor_useEditedContentStore.useEditedContentStore((s) => s.addEditedContent);
+  const addEditedContent = components_DictionaryEditor_useEditedContentStore.useEditedContentStore(
+    shallow.useShallow((s) => s.addEditedContent)
+  );
   const { setFocusedContentKeyPath, focusedContent } = components_DictionaryEditor_useEditionPanelStore.useEditionPanelStore(
-    (s) => ({
+    shallow.useShallow((s) => ({
       setFocusedContentKeyPath: s.setFocusedContentKeyPath,
       focusedContent: s.focusedContent
-    })
+    }))
   );
   const {
     addNewElement,
@@ -59,7 +62,11 @@ const NavigationViewNode = ({
     [focusedContent?.keyPath]
   );
   if (isEditableSection) return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, { children: "-" });
+  if (!section) return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, { children: "-" });
   if (typeof section === "object") {
+    if (nodeType === core.NodeType.ReactNode) {
+      return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, { children: "React Node" });
+    }
     if (nodeType === core.NodeType.Translation) {
       return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex flex-col justify-between gap-2", children: locales.map((translationKey) => {
         const childKeyPath = [

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationViewNode.cjs","sources":["../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"sourcesContent":["import { getConfiguration } from '@intlayer/config/client';\nimport {\n  type EnumerationContent,\n  NodeType,\n  type KeyPath,\n  type DictionaryValue,\n  isSameKeyPath,\n} from '@intlayer/core';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport { useCallback, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { camelCaseToSentence } from '../../../utils/camelCase';\nimport {\n  getDictionaryValueByKeyPath,\n  getSectionType,\n} from '../../../utils/dictionary';\nimport { Accordion } from '../../Accordion';\nimport { Button } from '../../Button';\nimport {\n  useEditedContentStore,\n  useEditionPanelStore,\n} from '../../DictionaryEditor';\nimport { getIsEditableSection } from '../getIsEditableSection';\nimport { navigationViewContent } from './navigationViewNode.content';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: DictionaryValue;\n};\n\nexport const NavigationViewNode: FC<NodeWrapperProps> = ({\n  section: sectionProp,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const { locales } = getConfiguration().internationalization;\n  const section = getDictionaryValueByKeyPath(sectionProp, keyPath);\n  const addEditedContent = useEditedContentStore((s) => s.addEditedContent);\n  const { setFocusedContentKeyPath, focusedContent } = useEditionPanelStore(\n    (s) => ({\n      setFocusedContentKeyPath: s.setFocusedContentKeyPath,\n      focusedContent: s.focusedContent,\n    })\n  );\n  const {\n    addNewElement,\n    addNewField,\n    goToElement,\n    goToField,\n    goToEnumeration,\n    goToTranslation,\n  } = useDictionary(navigationViewContent);\n  const nodeType = getSectionType(section);\n  const isEditableSection = getIsEditableSection(section);\n  const getIsSelected = useCallback(\n    (keyPath: KeyPath[]) =>\n      (focusedContent?.keyPath?.length ?? 0) > 0 &&\n      isSameKeyPath(keyPath, focusedContent?.keyPath ?? []),\n    [focusedContent?.keyPath]\n  );\n\n  if (isEditableSection) return <>-</>;\n\n  if (typeof section === 'object') {\n    if (nodeType === NodeType.Translation) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {locales.map((translationKey) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Translation, key: translationKey },\n            ];\n            const subSection = getDictionaryValueByKeyPath(\n              sectionProp,\n              childKeyPath\n            );\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToTranslation.label.value} ${translationKey}`}\n                  key={translationKey}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {translationKey}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={translationKey}\n                identifier={translationKey}\n                label={`${goToTranslation.label.value} ${translationKey}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={translationKey}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Enumeration) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {Object.keys(\n            (section as EnumerationContent<DictionaryValue>)[\n              NodeType.Enumeration\n            ]\n          ).map((key) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Enumeration, key },\n            ];\n            const subSection = getDictionaryValueByKeyPath(\n              sectionProp,\n              childKeyPath\n            );\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToEnumeration.label.value} ${key}`}\n                  key={key}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {key}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={key}\n                identifier={key}\n                label={`${goToEnumeration.label.value} ${key}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={key}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Array) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {(section as DictionaryValue[]).map((subSection, index) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Array, key: index },\n            ];\n\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToElement.label.value} ${index}`}\n                  key={`${index}`}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {index}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={`${index}`}\n                identifier={`${index}`}\n                label={`${goToElement.label.value} ${index}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={index}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n\n          <Button\n            label={addNewElement.label.value}\n            variant=\"hoverable\"\n            color=\"neutral\"\n            textAlign=\"left\"\n            onClick={() => {\n              const newKeyPath: KeyPath[] = [\n                ...keyPath,\n                {\n                  type: NodeType.Array,\n                  key: (section as DictionaryValue[]).length,\n                },\n              ];\n              addEditedContent(dictionaryKey, {}, newKeyPath, false);\n              setFocusedContentKeyPath(newKeyPath);\n            }}\n            Icon={Plus}\n          >\n            {addNewElement.text}\n          </Button>\n        </div>\n      );\n    }\n\n    const sectionArray = Object.keys(section);\n    return (\n      <div className=\"flex w-full max-w-full flex-col justify-between gap-2\">\n        {sectionArray.map((key) => {\n          const childKeyPath: KeyPath[] = [\n            ...keyPath,\n            { type: NodeType.Object, key },\n          ];\n          const subSection = getDictionaryValueByKeyPath(\n            sectionProp,\n            childKeyPath\n          );\n          const isEditableSubSection = getIsEditableSection(subSection);\n\n          if (isEditableSubSection) {\n            return (\n              <Button\n                label={`${goToField.label.value} ${key}`}\n                key={key}\n                isActive={getIsSelected(childKeyPath)}\n                variant=\"hoverable\"\n                color=\"text\"\n                className=\"w-full\"\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                IconRight={ChevronRight}\n              >\n                {camelCaseToSentence(key)}\n              </Button>\n            );\n          }\n\n          return (\n            <Accordion\n              key={key}\n              identifier={key}\n              label={`${goToField.label.value} ${key}`}\n              isActive={getIsSelected(childKeyPath)}\n              onClick={() => setFocusedContentKeyPath(childKeyPath)}\n              header={camelCaseToSentence(key)}\n            >\n              <div className=\"flex w-full max-w-full\">\n                <div className=\"flex-1 pl-10\">\n                  <NavigationViewNode\n                    keyPath={childKeyPath}\n                    section={sectionProp}\n                    dictionaryKey={dictionaryKey}\n                  />\n                </div>\n              </div>\n            </Accordion>\n          );\n        })}\n\n        <Button\n          label={addNewField.label.value}\n          variant=\"hoverable\"\n          color=\"neutral\"\n          textAlign=\"left\"\n          onClick={() => {\n            const newKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Object, key: 'newField' },\n            ];\n            addEditedContent(dictionaryKey, {}, newKeyPath, false);\n            setFocusedContentKeyPath(newKeyPath);\n          }}\n          Icon={Plus}\n        >\n          {addNewField.text}\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <>\n      Error loading section --\n      {nodeType}\n      --\n      {JSON.stringify(section)}\n      --\n      {JSON.stringify(keyPath)}\n    </>\n  );\n};\n"],"names":["getConfiguration","getDictionaryValueByKeyPath","useEditedContentStore","useEditionPanelStore","useDictionary","navigationViewContent","getSectionType","getIsEditableSection","useCallback","keyPath","isSameKeyPath","jsx","Fragment","NodeType","Button","ChevronRight","Accordion","jsxs","Plus","camelCaseToSentence"],"mappings":"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"}
+{"version":3,"file":"NavigationViewNode.cjs","sources":["../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"sourcesContent":["import { getConfiguration } from '@intlayer/config/client';\nimport {\n  type EnumerationContent,\n  NodeType,\n  type KeyPath,\n  type DictionaryValue,\n  isSameKeyPath,\n} from '@intlayer/core';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport { useCallback, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { useShallow } from 'zustand/react/shallow';\nimport { camelCaseToSentence } from '../../../utils/camelCase';\nimport {\n  getDictionaryValueByKeyPath,\n  getSectionType,\n} from '../../../utils/dictionary';\nimport { Accordion } from '../../Accordion';\nimport { Button } from '../../Button';\nimport {\n  useEditedContentStore,\n  useEditionPanelStore,\n} from '../../DictionaryEditor';\nimport { getIsEditableSection } from '../getIsEditableSection';\nimport { navigationViewContent } from './navigationViewNode.content';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: DictionaryValue;\n};\n\nexport const NavigationViewNode: FC<NodeWrapperProps> = ({\n  section: sectionProp,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const { locales } = getConfiguration().internationalization;\n  const section = getDictionaryValueByKeyPath(sectionProp, keyPath);\n  const addEditedContent = useEditedContentStore(\n    useShallow((s) => s.addEditedContent)\n  );\n  const { setFocusedContentKeyPath, focusedContent } = useEditionPanelStore(\n    useShallow((s) => ({\n      setFocusedContentKeyPath: s.setFocusedContentKeyPath,\n      focusedContent: s.focusedContent,\n    }))\n  );\n  const {\n    addNewElement,\n    addNewField,\n    goToElement,\n    goToField,\n    goToEnumeration,\n    goToTranslation,\n  } = useDictionary(navigationViewContent);\n  const nodeType = getSectionType(section);\n  const isEditableSection = getIsEditableSection(section);\n  const getIsSelected = useCallback(\n    (keyPath: KeyPath[]) =>\n      (focusedContent?.keyPath?.length ?? 0) > 0 &&\n      isSameKeyPath(keyPath, focusedContent?.keyPath ?? []),\n    [focusedContent?.keyPath]\n  );\n\n  if (isEditableSection) return <>-</>;\n\n  if (!section) return <>-</>;\n\n  if (typeof section === 'object') {\n    if (nodeType === NodeType.ReactNode) {\n      return <>React Node</>;\n    }\n\n    if (nodeType === NodeType.Translation) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {locales.map((translationKey) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Translation, key: translationKey },\n            ];\n            const subSection = getDictionaryValueByKeyPath(\n              sectionProp,\n              childKeyPath\n            );\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToTranslation.label.value} ${translationKey}`}\n                  key={translationKey}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {translationKey}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={translationKey}\n                identifier={translationKey}\n                label={`${goToTranslation.label.value} ${translationKey}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={translationKey}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Enumeration) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {Object.keys(\n            (section as EnumerationContent<DictionaryValue>)[\n              NodeType.Enumeration\n            ]\n          ).map((key) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Enumeration, key },\n            ];\n            const subSection = getDictionaryValueByKeyPath(\n              sectionProp,\n              childKeyPath\n            );\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToEnumeration.label.value} ${key}`}\n                  key={key}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {key}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={key}\n                identifier={key}\n                label={`${goToEnumeration.label.value} ${key}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={key}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Array) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {(section as DictionaryValue[]).map((subSection, index) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Array, key: index },\n            ];\n\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToElement.label.value} ${index}`}\n                  key={`${index}`}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {index}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={`${index}`}\n                identifier={`${index}`}\n                label={`${goToElement.label.value} ${index}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={index}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n\n          <Button\n            label={addNewElement.label.value}\n            variant=\"hoverable\"\n            color=\"neutral\"\n            textAlign=\"left\"\n            onClick={() => {\n              const newKeyPath: KeyPath[] = [\n                ...keyPath,\n                {\n                  type: NodeType.Array,\n                  key: (section as DictionaryValue[]).length,\n                },\n              ];\n              addEditedContent(dictionaryKey, {}, newKeyPath, false);\n              setFocusedContentKeyPath(newKeyPath);\n            }}\n            Icon={Plus}\n          >\n            {addNewElement.text}\n          </Button>\n        </div>\n      );\n    }\n\n    const sectionArray = Object.keys(section);\n    return (\n      <div className=\"flex w-full max-w-full flex-col justify-between gap-2\">\n        {sectionArray.map((key) => {\n          const childKeyPath: KeyPath[] = [\n            ...keyPath,\n            { type: NodeType.Object, key },\n          ];\n          const subSection = getDictionaryValueByKeyPath(\n            sectionProp,\n            childKeyPath\n          );\n          const isEditableSubSection = getIsEditableSection(subSection);\n\n          if (isEditableSubSection) {\n            return (\n              <Button\n                label={`${goToField.label.value} ${key}`}\n                key={key}\n                isActive={getIsSelected(childKeyPath)}\n                variant=\"hoverable\"\n                color=\"text\"\n                className=\"w-full\"\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                IconRight={ChevronRight}\n              >\n                {camelCaseToSentence(key)}\n              </Button>\n            );\n          }\n\n          return (\n            <Accordion\n              key={key}\n              identifier={key}\n              label={`${goToField.label.value} ${key}`}\n              isActive={getIsSelected(childKeyPath)}\n              onClick={() => setFocusedContentKeyPath(childKeyPath)}\n              header={camelCaseToSentence(key)}\n            >\n              <div className=\"flex w-full max-w-full\">\n                <div className=\"flex-1 pl-10\">\n                  <NavigationViewNode\n                    keyPath={childKeyPath}\n                    section={sectionProp}\n                    dictionaryKey={dictionaryKey}\n                  />\n                </div>\n              </div>\n            </Accordion>\n          );\n        })}\n\n        <Button\n          label={addNewField.label.value}\n          variant=\"hoverable\"\n          color=\"neutral\"\n          textAlign=\"left\"\n          onClick={() => {\n            const newKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Object, key: 'newField' },\n            ];\n            addEditedContent(dictionaryKey, {}, newKeyPath, false);\n            setFocusedContentKeyPath(newKeyPath);\n          }}\n          Icon={Plus}\n        >\n          {addNewField.text}\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <>\n      Error loading section --\n      {nodeType}\n      --\n      {JSON.stringify(section)}\n      --\n      {JSON.stringify(keyPath)}\n    </>\n  );\n};\n"],"names":["getConfiguration","getDictionaryValueByKeyPath","useEditedContentStore","useShallow","useEditionPanelStore","useDictionary","navigationViewContent","getSectionType","getIsEditableSection","useCallback","keyPath","isSameKeyPath","jsx","Fragment","NodeType","Button","ChevronRight","Accordion","jsxs","Plus","camelCaseToSentence"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationViewNode.d.ts","sourceRoot":"","sources":["../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,OAAO,EACZ,KAAK,eAAe,EAErB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAe,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAiB7C,eAAO,MAAM,SAAS,EAAE,MAAM,EAAmC,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,OAAO,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,gBAAgB,CAoTnD,CAAC"}
+{"version":3,"file":"NavigationViewNode.d.ts","sourceRoot":"","sources":["../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,OAAO,EACZ,KAAK,eAAe,EAErB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAe,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAkB7C,eAAO,MAAM,SAAS,EAAE,MAAM,EAAmC,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,OAAO,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,gBAAgB,CA4TnD,CAAC"}

package/dist/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs

@@ -4,6 +4,7 @@ import { isSameKeyPath, NodeType } from "@intlayer/core";
 import { ChevronRight, Plus } from "lucide-react";
 import { useCallback } from "react";
 import { useDictionary } from "react-intlayer";
+import { u as useShallow } from "../../../shallow-m9BpCkKh.js";
 import { camelCaseToSentence } from "../../../utils/camelCase.mjs";
 import { getDictionaryValueByKeyPath, getSectionType } from "../../../utils/dictionary.mjs";
 import { Accordion } from "../../Accordion/Accordion.mjs";
@@ -35,12 +36,14 @@ const NavigationViewNode = ({
 }) => {
   const { locales } = getConfiguration().internationalization;
   const section = getDictionaryValueByKeyPath(sectionProp, keyPath);
-  const addEditedContent = useEditedContentStore((s) => s.addEditedContent);
+  const addEditedContent = useEditedContentStore(
+    useShallow((s) => s.addEditedContent)
+  );
   const { setFocusedContentKeyPath, focusedContent } = useEditionPanelStore(
-    (s) => ({
+    useShallow((s) => ({
       setFocusedContentKeyPath: s.setFocusedContentKeyPath,
       focusedContent: s.focusedContent
-    })
+    }))
   );
   const {
     addNewElement,
@@ -57,7 +60,11 @@ const NavigationViewNode = ({
     [focusedContent?.keyPath]
   );
   if (isEditableSection) return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: "-" });
+  if (!section) return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: "-" });
   if (typeof section === "object") {
+    if (nodeType === NodeType.ReactNode) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: "React Node" });
+    }
     if (nodeType === NodeType.Translation) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col justify-between gap-2", children: locales.map((translationKey) => {
         const childKeyPath = [

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationViewNode.mjs","sources":["../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"sourcesContent":["import { getConfiguration } from '@intlayer/config/client';\nimport {\n  type EnumerationContent,\n  NodeType,\n  type KeyPath,\n  type DictionaryValue,\n  isSameKeyPath,\n} from '@intlayer/core';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport { useCallback, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { camelCaseToSentence } from '../../../utils/camelCase';\nimport {\n  getDictionaryValueByKeyPath,\n  getSectionType,\n} from '../../../utils/dictionary';\nimport { Accordion } from '../../Accordion';\nimport { Button } from '../../Button';\nimport {\n  useEditedContentStore,\n  useEditionPanelStore,\n} from '../../DictionaryEditor';\nimport { getIsEditableSection } from '../getIsEditableSection';\nimport { navigationViewContent } from './navigationViewNode.content';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: DictionaryValue;\n};\n\nexport const NavigationViewNode: FC<NodeWrapperProps> = ({\n  section: sectionProp,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const { locales } = getConfiguration().internationalization;\n  const section = getDictionaryValueByKeyPath(sectionProp, keyPath);\n  const addEditedContent = useEditedContentStore((s) => s.addEditedContent);\n  const { setFocusedContentKeyPath, focusedContent } = useEditionPanelStore(\n    (s) => ({\n      setFocusedContentKeyPath: s.setFocusedContentKeyPath,\n      focusedContent: s.focusedContent,\n    })\n  );\n  const {\n    addNewElement,\n    addNewField,\n    goToElement,\n    goToField,\n    goToEnumeration,\n    goToTranslation,\n  } = useDictionary(navigationViewContent);\n  const nodeType = getSectionType(section);\n  const isEditableSection = getIsEditableSection(section);\n  const getIsSelected = useCallback(\n    (keyPath: KeyPath[]) =>\n      (focusedContent?.keyPath?.length ?? 0) > 0 &&\n      isSameKeyPath(keyPath, focusedContent?.keyPath ?? []),\n    [focusedContent?.keyPath]\n  );\n\n  if (isEditableSection) return <>-</>;\n\n  if (typeof section === 'object') {\n    if (nodeType === NodeType.Translation) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {locales.map((translationKey) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Translation, key: translationKey },\n            ];\n            const subSection = getDictionaryValueByKeyPath(\n              sectionProp,\n              childKeyPath\n            );\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToTranslation.label.value} ${translationKey}`}\n                  key={translationKey}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {translationKey}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={translationKey}\n                identifier={translationKey}\n                label={`${goToTranslation.label.value} ${translationKey}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={translationKey}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Enumeration) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {Object.keys(\n            (section as EnumerationContent<DictionaryValue>)[\n              NodeType.Enumeration\n            ]\n          ).map((key) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Enumeration, key },\n            ];\n            const subSection = getDictionaryValueByKeyPath(\n              sectionProp,\n              childKeyPath\n            );\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToEnumeration.label.value} ${key}`}\n                  key={key}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {key}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={key}\n                identifier={key}\n                label={`${goToEnumeration.label.value} ${key}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={key}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Array) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {(section as DictionaryValue[]).map((subSection, index) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Array, key: index },\n            ];\n\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToElement.label.value} ${index}`}\n                  key={`${index}`}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {index}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={`${index}`}\n                identifier={`${index}`}\n                label={`${goToElement.label.value} ${index}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={index}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n\n          <Button\n            label={addNewElement.label.value}\n            variant=\"hoverable\"\n            color=\"neutral\"\n            textAlign=\"left\"\n            onClick={() => {\n              const newKeyPath: KeyPath[] = [\n                ...keyPath,\n                {\n                  type: NodeType.Array,\n                  key: (section as DictionaryValue[]).length,\n                },\n              ];\n              addEditedContent(dictionaryKey, {}, newKeyPath, false);\n              setFocusedContentKeyPath(newKeyPath);\n            }}\n            Icon={Plus}\n          >\n            {addNewElement.text}\n          </Button>\n        </div>\n      );\n    }\n\n    const sectionArray = Object.keys(section);\n    return (\n      <div className=\"flex w-full max-w-full flex-col justify-between gap-2\">\n        {sectionArray.map((key) => {\n          const childKeyPath: KeyPath[] = [\n            ...keyPath,\n            { type: NodeType.Object, key },\n          ];\n          const subSection = getDictionaryValueByKeyPath(\n            sectionProp,\n            childKeyPath\n          );\n          const isEditableSubSection = getIsEditableSection(subSection);\n\n          if (isEditableSubSection) {\n            return (\n              <Button\n                label={`${goToField.label.value} ${key}`}\n                key={key}\n                isActive={getIsSelected(childKeyPath)}\n                variant=\"hoverable\"\n                color=\"text\"\n                className=\"w-full\"\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                IconRight={ChevronRight}\n              >\n                {camelCaseToSentence(key)}\n              </Button>\n            );\n          }\n\n          return (\n            <Accordion\n              key={key}\n              identifier={key}\n              label={`${goToField.label.value} ${key}`}\n              isActive={getIsSelected(childKeyPath)}\n              onClick={() => setFocusedContentKeyPath(childKeyPath)}\n              header={camelCaseToSentence(key)}\n            >\n              <div className=\"flex w-full max-w-full\">\n                <div className=\"flex-1 pl-10\">\n                  <NavigationViewNode\n                    keyPath={childKeyPath}\n                    section={sectionProp}\n                    dictionaryKey={dictionaryKey}\n                  />\n                </div>\n              </div>\n            </Accordion>\n          );\n        })}\n\n        <Button\n          label={addNewField.label.value}\n          variant=\"hoverable\"\n          color=\"neutral\"\n          textAlign=\"left\"\n          onClick={() => {\n            const newKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Object, key: 'newField' },\n            ];\n            addEditedContent(dictionaryKey, {}, newKeyPath, false);\n            setFocusedContentKeyPath(newKeyPath);\n          }}\n          Icon={Plus}\n        >\n          {addNewField.text}\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <>\n      Error loading section --\n      {nodeType}\n      --\n      {JSON.stringify(section)}\n      --\n      {JSON.stringify(keyPath)}\n    </>\n  );\n};\n"],"names":["keyPath","jsx","Fragment","jsxs"],"mappings":"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"}
+{"version":3,"file":"NavigationViewNode.mjs","sources":["../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"sourcesContent":["import { getConfiguration } from '@intlayer/config/client';\nimport {\n  type EnumerationContent,\n  NodeType,\n  type KeyPath,\n  type DictionaryValue,\n  isSameKeyPath,\n} from '@intlayer/core';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport { useCallback, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { useShallow } from 'zustand/react/shallow';\nimport { camelCaseToSentence } from '../../../utils/camelCase';\nimport {\n  getDictionaryValueByKeyPath,\n  getSectionType,\n} from '../../../utils/dictionary';\nimport { Accordion } from '../../Accordion';\nimport { Button } from '../../Button';\nimport {\n  useEditedContentStore,\n  useEditionPanelStore,\n} from '../../DictionaryEditor';\nimport { getIsEditableSection } from '../getIsEditableSection';\nimport { navigationViewContent } from './navigationViewNode.content';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: DictionaryValue;\n};\n\nexport const NavigationViewNode: FC<NodeWrapperProps> = ({\n  section: sectionProp,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const { locales } = getConfiguration().internationalization;\n  const section = getDictionaryValueByKeyPath(sectionProp, keyPath);\n  const addEditedContent = useEditedContentStore(\n    useShallow((s) => s.addEditedContent)\n  );\n  const { setFocusedContentKeyPath, focusedContent } = useEditionPanelStore(\n    useShallow((s) => ({\n      setFocusedContentKeyPath: s.setFocusedContentKeyPath,\n      focusedContent: s.focusedContent,\n    }))\n  );\n  const {\n    addNewElement,\n    addNewField,\n    goToElement,\n    goToField,\n    goToEnumeration,\n    goToTranslation,\n  } = useDictionary(navigationViewContent);\n  const nodeType = getSectionType(section);\n  const isEditableSection = getIsEditableSection(section);\n  const getIsSelected = useCallback(\n    (keyPath: KeyPath[]) =>\n      (focusedContent?.keyPath?.length ?? 0) > 0 &&\n      isSameKeyPath(keyPath, focusedContent?.keyPath ?? []),\n    [focusedContent?.keyPath]\n  );\n\n  if (isEditableSection) return <>-</>;\n\n  if (!section) return <>-</>;\n\n  if (typeof section === 'object') {\n    if (nodeType === NodeType.ReactNode) {\n      return <>React Node</>;\n    }\n\n    if (nodeType === NodeType.Translation) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {locales.map((translationKey) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Translation, key: translationKey },\n            ];\n            const subSection = getDictionaryValueByKeyPath(\n              sectionProp,\n              childKeyPath\n            );\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToTranslation.label.value} ${translationKey}`}\n                  key={translationKey}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {translationKey}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={translationKey}\n                identifier={translationKey}\n                label={`${goToTranslation.label.value} ${translationKey}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={translationKey}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Enumeration) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {Object.keys(\n            (section as EnumerationContent<DictionaryValue>)[\n              NodeType.Enumeration\n            ]\n          ).map((key) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Enumeration, key },\n            ];\n            const subSection = getDictionaryValueByKeyPath(\n              sectionProp,\n              childKeyPath\n            );\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToEnumeration.label.value} ${key}`}\n                  key={key}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {key}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={key}\n                identifier={key}\n                label={`${goToEnumeration.label.value} ${key}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={key}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Array) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {(section as DictionaryValue[]).map((subSection, index) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Array, key: index },\n            ];\n\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToElement.label.value} ${index}`}\n                  key={`${index}`}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {index}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={`${index}`}\n                identifier={`${index}`}\n                label={`${goToElement.label.value} ${index}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={index}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n\n          <Button\n            label={addNewElement.label.value}\n            variant=\"hoverable\"\n            color=\"neutral\"\n            textAlign=\"left\"\n            onClick={() => {\n              const newKeyPath: KeyPath[] = [\n                ...keyPath,\n                {\n                  type: NodeType.Array,\n                  key: (section as DictionaryValue[]).length,\n                },\n              ];\n              addEditedContent(dictionaryKey, {}, newKeyPath, false);\n              setFocusedContentKeyPath(newKeyPath);\n            }}\n            Icon={Plus}\n          >\n            {addNewElement.text}\n          </Button>\n        </div>\n      );\n    }\n\n    const sectionArray = Object.keys(section);\n    return (\n      <div className=\"flex w-full max-w-full flex-col justify-between gap-2\">\n        {sectionArray.map((key) => {\n          const childKeyPath: KeyPath[] = [\n            ...keyPath,\n            { type: NodeType.Object, key },\n          ];\n          const subSection = getDictionaryValueByKeyPath(\n            sectionProp,\n            childKeyPath\n          );\n          const isEditableSubSection = getIsEditableSection(subSection);\n\n          if (isEditableSubSection) {\n            return (\n              <Button\n                label={`${goToField.label.value} ${key}`}\n                key={key}\n                isActive={getIsSelected(childKeyPath)}\n                variant=\"hoverable\"\n                color=\"text\"\n                className=\"w-full\"\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                IconRight={ChevronRight}\n              >\n                {camelCaseToSentence(key)}\n              </Button>\n            );\n          }\n\n          return (\n            <Accordion\n              key={key}\n              identifier={key}\n              label={`${goToField.label.value} ${key}`}\n              isActive={getIsSelected(childKeyPath)}\n              onClick={() => setFocusedContentKeyPath(childKeyPath)}\n              header={camelCaseToSentence(key)}\n            >\n              <div className=\"flex w-full max-w-full\">\n                <div className=\"flex-1 pl-10\">\n                  <NavigationViewNode\n                    keyPath={childKeyPath}\n                    section={sectionProp}\n                    dictionaryKey={dictionaryKey}\n                  />\n                </div>\n              </div>\n            </Accordion>\n          );\n        })}\n\n        <Button\n          label={addNewField.label.value}\n          variant=\"hoverable\"\n          color=\"neutral\"\n          textAlign=\"left\"\n          onClick={() => {\n            const newKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Object, key: 'newField' },\n            ];\n            addEditedContent(dictionaryKey, {}, newKeyPath, false);\n            setFocusedContentKeyPath(newKeyPath);\n          }}\n          Icon={Plus}\n        >\n          {addNewField.text}\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <>\n      Error loading section --\n      {nodeType}\n      --\n      {JSON.stringify(section)}\n      --\n      {JSON.stringify(keyPath)}\n    </>\n  );\n};\n"],"names":["keyPath","jsx","Fragment","jsxs"],"mappings":"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"}

package/dist/components/DictionaryFieldEditor/NodeEditor.cjs

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../jsx-runtime-XHKiWCTo.cjs");
 const require$$0 = require("react");
+const shallow = require("../../shallow-lhDIFtEp.cjs");
 const components_Container_index = require("../Container/index.cjs");
 const components_DictionaryEditor_useEditedContentStore = require("../DictionaryEditor/useEditedContentStore.cjs");
 const components_DictionaryEditor_useEditionPanelStore = require("../DictionaryEditor/useEditionPanelStore.cjs");
@@ -32,16 +33,18 @@ const components_DictionaryFieldEditor_NavigationView_NavigationViewNode = requi
 const components_DictionaryFieldEditor_SaveForm_SaveForm = require("./SaveForm/SaveForm.cjs");
 const NodeEditor = ({ dictionary }) => {
   const { content: dictionaryContent, key } = dictionary;
-  const { editedContent, dictionaryRecord, setDictionariesRecord } = components_DictionaryEditor_useEditedContentStore.useEditedContentStore((s) => ({
-    editedContent: s.editedContent,
-    dictionaryRecord: s.dictionariesRecord,
-    setDictionariesRecord: s.setDictionariesRecord
-  }));
+  const { editedContent, dictionaryRecord, setDictionariesRecord } = components_DictionaryEditor_useEditedContentStore.useEditedContentStore(
+    shallow.useShallow((s) => ({
+      editedContent: s.editedContent,
+      dictionaryRecord: s.dictionariesRecord,
+      setDictionariesRecord: s.setDictionariesRecord
+    }))
+  );
   const { focusedContent, setFocusedContentKeyPath } = components_DictionaryEditor_useEditionPanelStore.useEditionPanelStore(
-    (s) => ({
+    shallow.useShallow((s) => ({
       focusedContent: s.focusedContent,
       setFocusedContentKeyPath: s.setFocusedContentKeyPath
-    })
+    }))
   );
   const focusedKeyPath = focusedContent?.keyPath;
   const section = editedContent[key]?.content ?? dictionaryContent;

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

@@ -1 +1 @@
-{"version":3,"file":"NodeEditor.cjs","sources":["../../../src/components/DictionaryFieldEditor/NodeEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Dictionary } from '@intlayer/core';\nimport { useEffect, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { Container } from '../Container';\nimport {\n  useEditedContentStore,\n  useEditionPanelStore,\n} from '../DictionaryEditor';\nimport { EditorView } from './EditorView/EditorView';\nimport { KeyPathBreadcrumb } from './KeyPathBreadcrumb';\nimport { NavigationViewNode } from './NavigationView/NavigationViewNode';\nimport { SaveForm } from './SaveForm/SaveForm';\n\ntype NodeEditorProps = {\n  dictionary: Dictionary;\n};\n\nexport const NodeEditor: FC<NodeEditorProps> = ({ dictionary }) => {\n  const { content: dictionaryContent, key } = dictionary;\n  const { editedContent, dictionaryRecord, setDictionariesRecord } =\n    useEditedContentStore((s) => ({\n      editedContent: s.editedContent,\n      dictionaryRecord: s.dictionariesRecord,\n      setDictionariesRecord: s.setDictionariesRecord,\n    }));\n\n  const { focusedContent, setFocusedContentKeyPath } = useEditionPanelStore(\n    (s) => ({\n      focusedContent: s.focusedContent,\n      setFocusedContentKeyPath: s.setFocusedContentKeyPath,\n    })\n  );\n\n  const focusedKeyPath = focusedContent?.keyPath;\n\n  const section = editedContent[key]?.content ?? dictionaryContent;\n\n  useEffect(() => {\n    if (dictionaryRecord[key]) return;\n\n    setDictionariesRecord({\n      [key]: dictionary,\n    });\n  }, [dictionary, key, setDictionariesRecord, dictionaryRecord]);\n\n  return (\n    <>\n      <KeyPathBreadcrumb\n        dictionaryKey={key}\n        keyPath={focusedKeyPath ?? []}\n        onClickKeyPath={setFocusedContentKeyPath}\n      />\n      <div className=\"flex gap-2 max-md:flex-col\">\n        <Container\n          border\n          background={false}\n          className=\"top-6 flex h-full flex-col items-start gap-0.5 overflow-auto p-2 md:sticky md:max-w-[50%]\"\n          roundedSize=\"xl\"\n        >\n          <NavigationViewNode\n            keyPath={[]}\n            section={section}\n            dictionaryKey={key}\n          />\n        </Container>\n        <div className=\"top-6 flex h-full flex-1 flex-col gap-6 md:sticky\">\n          {(focusedKeyPath?.length ?? 0) > 0 && (\n            <Container\n              border\n              background={false}\n              className=\"h-full flex-1 overflow-hidden\"\n              roundedSize=\"xl\"\n            >\n              <EditorView dictionary={dictionary} dictionaryKey={key} />\n            </Container>\n          )}\n          <SaveForm dictionary={dictionary} />\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":["useEditedContentStore","useEditionPanelStore","useEffect","jsxs","Fragment","jsx","KeyPathBreadcrumb","Container","NavigationViewNode","EditorView","SaveForm"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,aAAkC,CAAC,EAAE,iBAAiB;AACjE,QAAM,EAAE,SAAS,mBAAmB,IAAA,IAAQ;AAC5C,QAAM,EAAE,eAAe,kBAAkB,0BACvCA,kDAAAA,sBAAsB,CAAC,OAAO;AAAA,IAC5B,eAAe,EAAE;AAAA,IACjB,kBAAkB,EAAE;AAAA,IACpB,uBAAuB,EAAE;AAAA,EACzB,EAAA;AAEE,QAAA,EAAE,gBAAgB,yBAAA,IAA6BC,iDAAA;AAAA,IACnD,CAAC,OAAO;AAAA,MACN,gBAAgB,EAAE;AAAA,MAClB,0BAA0B,EAAE;AAAA,IAAA;AAAA,EAC9B;AAGF,QAAM,iBAAiB,gBAAgB;AAEvC,QAAM,UAAU,cAAc,GAAG,GAAG,WAAW;AAE/CC,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,SAEIC,2BAAA,kBAAA,KAAAC,uCAAA,EAAA,UAAA;AAAA,IAAAC,2BAAA,kBAAA;AAAA,MAACC,mDAAA;AAAA,MAAA;AAAA,QACC,eAAe;AAAA,QACf,SAAS,kBAAkB,CAAC;AAAA,QAC5B,gBAAgB;AAAA,MAAA;AAAA,IAClB;AAAA,IACAH,2BAAAA,kBAAAA,KAAC,OAAI,EAAA,WAAU,8BACb,UAAA;AAAA,MAAAE,2BAAA,kBAAA;AAAA,QAACE,2BAAA;AAAA,QAAA;AAAA,UACC,QAAM;AAAA,UACN,YAAY;AAAA,UACZ,WAAU;AAAA,UACV,aAAY;AAAA,UAEZ,UAAAF,2BAAA,kBAAA;AAAA,YAACG,mEAAA;AAAA,YAAA;AAAA,cACC,SAAS,CAAC;AAAA,cACV;AAAA,cACA,eAAe;AAAA,YAAA;AAAA,UACjB;AAAA,QAAA;AAAA,MACF;AAAA,MACAL,2BAAAA,kBAAAA,KAAC,OAAI,EAAA,WAAU,qDACX,UAAA;AAAA,SAAgB,gBAAA,UAAU,KAAK,KAC/BE,2BAAA,kBAAA;AAAA,UAACE,2BAAA;AAAA,UAAA;AAAA,YACC,QAAM;AAAA,YACN,YAAY;AAAA,YACZ,WAAU;AAAA,YACV,aAAY;AAAA,YAEZ,UAACF,2BAAA,kBAAA,IAAAI,uDAAA,YAAA,EAAW,YAAwB,eAAe,KAAK;AAAA,UAAA;AAAA,QAC1D;AAAA,QAEFJ,iDAACK,mDAAAA,YAAS,YAAwB;AAAA,MAAA,GACpC;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;;"}
+{"version":3,"file":"NodeEditor.cjs","sources":["../../../src/components/DictionaryFieldEditor/NodeEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Dictionary } from '@intlayer/core';\nimport { useEffect, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { useShallow } from 'zustand/react/shallow';\nimport { Container } from '../Container';\nimport {\n  useEditedContentStore,\n  useEditionPanelStore,\n} from '../DictionaryEditor';\nimport { EditorView } from './EditorView/EditorView';\nimport { KeyPathBreadcrumb } from './KeyPathBreadcrumb';\nimport { NavigationViewNode } from './NavigationView/NavigationViewNode';\nimport { SaveForm } from './SaveForm/SaveForm';\n\ntype NodeEditorProps = {\n  dictionary: Dictionary;\n};\n\nexport const NodeEditor: FC<NodeEditorProps> = ({ dictionary }) => {\n  const { content: dictionaryContent, key } = dictionary;\n  const { editedContent, dictionaryRecord, setDictionariesRecord } =\n    useEditedContentStore(\n      useShallow((s) => ({\n        editedContent: s.editedContent,\n        dictionaryRecord: s.dictionariesRecord,\n        setDictionariesRecord: s.setDictionariesRecord,\n      }))\n    );\n\n  const { focusedContent, setFocusedContentKeyPath } = useEditionPanelStore(\n    useShallow((s) => ({\n      focusedContent: s.focusedContent,\n      setFocusedContentKeyPath: s.setFocusedContentKeyPath,\n    }))\n  );\n\n  const focusedKeyPath = focusedContent?.keyPath;\n\n  const section = editedContent[key]?.content ?? dictionaryContent;\n\n  useEffect(() => {\n    if (dictionaryRecord[key]) return;\n\n    setDictionariesRecord({\n      [key]: dictionary,\n    });\n  }, [dictionary, key, setDictionariesRecord, dictionaryRecord]);\n\n  return (\n    <>\n      <KeyPathBreadcrumb\n        dictionaryKey={key}\n        keyPath={focusedKeyPath ?? []}\n        onClickKeyPath={setFocusedContentKeyPath}\n      />\n      <div className=\"flex gap-2 max-md:flex-col\">\n        <Container\n          border\n          background={false}\n          className=\"top-6 flex h-full flex-col items-start gap-0.5 overflow-auto p-2 md:sticky md:max-w-[50%]\"\n          roundedSize=\"xl\"\n        >\n          <NavigationViewNode\n            keyPath={[]}\n            section={section}\n            dictionaryKey={key}\n          />\n        </Container>\n        <div className=\"top-6 flex h-full flex-1 flex-col gap-6 md:sticky\">\n          {(focusedKeyPath?.length ?? 0) > 0 && (\n            <Container\n              border\n              background={false}\n              className=\"h-full flex-1 overflow-hidden\"\n              roundedSize=\"xl\"\n            >\n              <EditorView dictionary={dictionary} dictionaryKey={key} />\n            </Container>\n          )}\n          <SaveForm dictionary={dictionary} />\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":["useEditedContentStore","useShallow","useEditionPanelStore","useEffect","jsxs","Fragment","jsx","KeyPathBreadcrumb","Container","NavigationViewNode","EditorView","SaveForm"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBO,MAAM,aAAkC,CAAC,EAAE,iBAAiB;AACjE,QAAM,EAAE,SAAS,mBAAmB,IAAA,IAAQ;AAC5C,QAAM,EAAE,eAAe,kBAAkB,sBACvC,IAAAA,kDAAA;AAAA,IACEC,QAAA,WAAW,CAAC,OAAO;AAAA,MACjB,eAAe,EAAE;AAAA,MACjB,kBAAkB,EAAE;AAAA,MACpB,uBAAuB,EAAE;AAAA,IAAA,EACzB;AAAA,EAAA;AAGA,QAAA,EAAE,gBAAgB,yBAAA,IAA6BC,iDAAA;AAAA,IACnDD,QAAA,WAAW,CAAC,OAAO;AAAA,MACjB,gBAAgB,EAAE;AAAA,MAClB,0BAA0B,EAAE;AAAA,IAAA,EAC5B;AAAA,EAAA;AAGJ,QAAM,iBAAiB,gBAAgB;AAEvC,QAAM,UAAU,cAAc,GAAG,GAAG,WAAW;AAE/CE,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,SAEIC,2BAAA,kBAAA,KAAAC,uCAAA,EAAA,UAAA;AAAA,IAAAC,2BAAA,kBAAA;AAAA,MAACC,mDAAA;AAAA,MAAA;AAAA,QACC,eAAe;AAAA,QACf,SAAS,kBAAkB,CAAC;AAAA,QAC5B,gBAAgB;AAAA,MAAA;AAAA,IAClB;AAAA,IACAH,2BAAAA,kBAAAA,KAAC,OAAI,EAAA,WAAU,8BACb,UAAA;AAAA,MAAAE,2BAAA,kBAAA;AAAA,QAACE,2BAAA;AAAA,QAAA;AAAA,UACC,QAAM;AAAA,UACN,YAAY;AAAA,UACZ,WAAU;AAAA,UACV,aAAY;AAAA,UAEZ,UAAAF,2BAAA,kBAAA;AAAA,YAACG,mEAAA;AAAA,YAAA;AAAA,cACC,SAAS,CAAC;AAAA,cACV;AAAA,cACA,eAAe;AAAA,YAAA;AAAA,UACjB;AAAA,QAAA;AAAA,MACF;AAAA,MACAL,2BAAAA,kBAAAA,KAAC,OAAI,EAAA,WAAU,qDACX,UAAA;AAAA,SAAgB,gBAAA,UAAU,KAAK,KAC/BE,2BAAA,kBAAA;AAAA,UAACE,2BAAA;AAAA,UAAA;AAAA,YACC,QAAM;AAAA,YACN,YAAY;AAAA,YACZ,WAAU;AAAA,YACV,aAAY;AAAA,YAEZ,UAACF,2BAAA,kBAAA,IAAAI,uDAAA,YAAA,EAAW,YAAwB,eAAe,KAAK;AAAA,UAAA;AAAA,QAC1D;AAAA,QAEFJ,iDAACK,mDAAAA,YAAS,YAAwB;AAAA,MAAA,GACpC;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"NodeEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/NodeEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAa,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAa3C,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,UAAU,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAgE1C,CAAC"}
+{"version":3,"file":"NodeEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/NodeEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAa,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAc3C,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,UAAU,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAkE1C,CAAC"}

package/dist/components/DictionaryFieldEditor/NodeEditor.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { j as jsxRuntimeExports } from "../../jsx-runtime-DaNGiM0W.js";
 import { useEffect } from "react";
+import { u as useShallow } from "../../shallow-m9BpCkKh.js";
 import { Container } from "../Container/index.mjs";
 import { useEditedContentStore } from "../DictionaryEditor/useEditedContentStore.mjs";
 import { useEditionPanelStore } from "../DictionaryEditor/useEditionPanelStore.mjs";
@@ -30,16 +31,18 @@ import { NavigationViewNode } from "./NavigationView/NavigationViewNode.mjs";
 import { SaveForm } from "./SaveForm/SaveForm.mjs";
 const NodeEditor = ({ dictionary }) => {
   const { content: dictionaryContent, key } = dictionary;
-  const { editedContent, dictionaryRecord, setDictionariesRecord } = useEditedContentStore((s) => ({
-    editedContent: s.editedContent,
-    dictionaryRecord: s.dictionariesRecord,
-    setDictionariesRecord: s.setDictionariesRecord
-  }));
+  const { editedContent, dictionaryRecord, setDictionariesRecord } = useEditedContentStore(
+    useShallow((s) => ({
+      editedContent: s.editedContent,
+      dictionaryRecord: s.dictionariesRecord,
+      setDictionariesRecord: s.setDictionariesRecord
+    }))
+  );
   const { focusedContent, setFocusedContentKeyPath } = useEditionPanelStore(
-    (s) => ({
+    useShallow((s) => ({
       focusedContent: s.focusedContent,
       setFocusedContentKeyPath: s.setFocusedContentKeyPath
-    })
+    }))
   );
   const focusedKeyPath = focusedContent?.keyPath;
   const section = editedContent[key]?.content ?? dictionaryContent;

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

@@ -1 +1 @@
-{"version":3,"file":"NodeEditor.mjs","sources":["../../../src/components/DictionaryFieldEditor/NodeEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Dictionary } from '@intlayer/core';\nimport { useEffect, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { Container } from '../Container';\nimport {\n  useEditedContentStore,\n  useEditionPanelStore,\n} from '../DictionaryEditor';\nimport { EditorView } from './EditorView/EditorView';\nimport { KeyPathBreadcrumb } from './KeyPathBreadcrumb';\nimport { NavigationViewNode } from './NavigationView/NavigationViewNode';\nimport { SaveForm } from './SaveForm/SaveForm';\n\ntype NodeEditorProps = {\n  dictionary: Dictionary;\n};\n\nexport const NodeEditor: FC<NodeEditorProps> = ({ dictionary }) => {\n  const { content: dictionaryContent, key } = dictionary;\n  const { editedContent, dictionaryRecord, setDictionariesRecord } =\n    useEditedContentStore((s) => ({\n      editedContent: s.editedContent,\n      dictionaryRecord: s.dictionariesRecord,\n      setDictionariesRecord: s.setDictionariesRecord,\n    }));\n\n  const { focusedContent, setFocusedContentKeyPath } = useEditionPanelStore(\n    (s) => ({\n      focusedContent: s.focusedContent,\n      setFocusedContentKeyPath: s.setFocusedContentKeyPath,\n    })\n  );\n\n  const focusedKeyPath = focusedContent?.keyPath;\n\n  const section = editedContent[key]?.content ?? dictionaryContent;\n\n  useEffect(() => {\n    if (dictionaryRecord[key]) return;\n\n    setDictionariesRecord({\n      [key]: dictionary,\n    });\n  }, [dictionary, key, setDictionariesRecord, dictionaryRecord]);\n\n  return (\n    <>\n      <KeyPathBreadcrumb\n        dictionaryKey={key}\n        keyPath={focusedKeyPath ?? []}\n        onClickKeyPath={setFocusedContentKeyPath}\n      />\n      <div className=\"flex gap-2 max-md:flex-col\">\n        <Container\n          border\n          background={false}\n          className=\"top-6 flex h-full flex-col items-start gap-0.5 overflow-auto p-2 md:sticky md:max-w-[50%]\"\n          roundedSize=\"xl\"\n        >\n          <NavigationViewNode\n            keyPath={[]}\n            section={section}\n            dictionaryKey={key}\n          />\n        </Container>\n        <div className=\"top-6 flex h-full flex-1 flex-col gap-6 md:sticky\">\n          {(focusedKeyPath?.length ?? 0) > 0 && (\n            <Container\n              border\n              background={false}\n              className=\"h-full flex-1 overflow-hidden\"\n              roundedSize=\"xl\"\n            >\n              <EditorView dictionary={dictionary} dictionaryKey={key} />\n            </Container>\n          )}\n          <SaveForm dictionary={dictionary} />\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":["jsxs","Fragment","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,aAAkC,CAAC,EAAE,iBAAiB;AACjE,QAAM,EAAE,SAAS,mBAAmB,IAAA,IAAQ;AAC5C,QAAM,EAAE,eAAe,kBAAkB,0BACvC,sBAAsB,CAAC,OAAO;AAAA,IAC5B,eAAe,EAAE;AAAA,IACjB,kBAAkB,EAAE;AAAA,IACpB,uBAAuB,EAAE;AAAA,EACzB,EAAA;AAEE,QAAA,EAAE,gBAAgB,yBAAA,IAA6B;AAAA,IACnD,CAAC,OAAO;AAAA,MACN,gBAAgB,EAAE;AAAA,MAClB,0BAA0B,EAAE;AAAA,IAAA;AAAA,EAC9B;AAGF,QAAM,iBAAiB,gBAAgB;AAEvC,QAAM,UAAU,cAAc,GAAG,GAAG,WAAW;AAE/C,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,SAEIA,kCAAA,KAAAC,4BAAA,EAAA,UAAA;AAAA,IAAAC,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAe;AAAA,QACf,SAAS,kBAAkB,CAAC;AAAA,QAC5B,gBAAgB;AAAA,MAAA;AAAA,IAClB;AAAA,IACAF,kCAAAA,KAAC,OAAI,EAAA,WAAU,8BACb,UAAA;AAAA,MAAAE,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,QAAM;AAAA,UACN,YAAY;AAAA,UACZ,WAAU;AAAA,UACV,aAAY;AAAA,UAEZ,UAAAA,kCAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS,CAAC;AAAA,cACV;AAAA,cACA,eAAe;AAAA,YAAA;AAAA,UACjB;AAAA,QAAA;AAAA,MACF;AAAA,MACAF,kCAAAA,KAAC,OAAI,EAAA,WAAU,qDACX,UAAA;AAAA,SAAgB,gBAAA,UAAU,KAAK,KAC/BE,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,QAAM;AAAA,YACN,YAAY;AAAA,YACZ,WAAU;AAAA,YACV,aAAY;AAAA,YAEZ,UAACA,kCAAA,IAAA,YAAA,EAAW,YAAwB,eAAe,KAAK;AAAA,UAAA;AAAA,QAC1D;AAAA,QAEFA,sCAAC,YAAS,YAAwB;AAAA,MAAA,GACpC;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"NodeEditor.mjs","sources":["../../../src/components/DictionaryFieldEditor/NodeEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Dictionary } from '@intlayer/core';\nimport { useEffect, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { useShallow } from 'zustand/react/shallow';\nimport { Container } from '../Container';\nimport {\n  useEditedContentStore,\n  useEditionPanelStore,\n} from '../DictionaryEditor';\nimport { EditorView } from './EditorView/EditorView';\nimport { KeyPathBreadcrumb } from './KeyPathBreadcrumb';\nimport { NavigationViewNode } from './NavigationView/NavigationViewNode';\nimport { SaveForm } from './SaveForm/SaveForm';\n\ntype NodeEditorProps = {\n  dictionary: Dictionary;\n};\n\nexport const NodeEditor: FC<NodeEditorProps> = ({ dictionary }) => {\n  const { content: dictionaryContent, key } = dictionary;\n  const { editedContent, dictionaryRecord, setDictionariesRecord } =\n    useEditedContentStore(\n      useShallow((s) => ({\n        editedContent: s.editedContent,\n        dictionaryRecord: s.dictionariesRecord,\n        setDictionariesRecord: s.setDictionariesRecord,\n      }))\n    );\n\n  const { focusedContent, setFocusedContentKeyPath } = useEditionPanelStore(\n    useShallow((s) => ({\n      focusedContent: s.focusedContent,\n      setFocusedContentKeyPath: s.setFocusedContentKeyPath,\n    }))\n  );\n\n  const focusedKeyPath = focusedContent?.keyPath;\n\n  const section = editedContent[key]?.content ?? dictionaryContent;\n\n  useEffect(() => {\n    if (dictionaryRecord[key]) return;\n\n    setDictionariesRecord({\n      [key]: dictionary,\n    });\n  }, [dictionary, key, setDictionariesRecord, dictionaryRecord]);\n\n  return (\n    <>\n      <KeyPathBreadcrumb\n        dictionaryKey={key}\n        keyPath={focusedKeyPath ?? []}\n        onClickKeyPath={setFocusedContentKeyPath}\n      />\n      <div className=\"flex gap-2 max-md:flex-col\">\n        <Container\n          border\n          background={false}\n          className=\"top-6 flex h-full flex-col items-start gap-0.5 overflow-auto p-2 md:sticky md:max-w-[50%]\"\n          roundedSize=\"xl\"\n        >\n          <NavigationViewNode\n            keyPath={[]}\n            section={section}\n            dictionaryKey={key}\n          />\n        </Container>\n        <div className=\"top-6 flex h-full flex-1 flex-col gap-6 md:sticky\">\n          {(focusedKeyPath?.length ?? 0) > 0 && (\n            <Container\n              border\n              background={false}\n              className=\"h-full flex-1 overflow-hidden\"\n              roundedSize=\"xl\"\n            >\n              <EditorView dictionary={dictionary} dictionaryKey={key} />\n            </Container>\n          )}\n          <SaveForm dictionary={dictionary} />\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":["jsxs","Fragment","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBO,MAAM,aAAkC,CAAC,EAAE,iBAAiB;AACjE,QAAM,EAAE,SAAS,mBAAmB,IAAA,IAAQ;AAC5C,QAAM,EAAE,eAAe,kBAAkB,sBACvC,IAAA;AAAA,IACE,WAAW,CAAC,OAAO;AAAA,MACjB,eAAe,EAAE;AAAA,MACjB,kBAAkB,EAAE;AAAA,MACpB,uBAAuB,EAAE;AAAA,IAAA,EACzB;AAAA,EAAA;AAGA,QAAA,EAAE,gBAAgB,yBAAA,IAA6B;AAAA,IACnD,WAAW,CAAC,OAAO;AAAA,MACjB,gBAAgB,EAAE;AAAA,MAClB,0BAA0B,EAAE;AAAA,IAAA,EAC5B;AAAA,EAAA;AAGJ,QAAM,iBAAiB,gBAAgB;AAEvC,QAAM,UAAU,cAAc,GAAG,GAAG,WAAW;AAE/C,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,SAEIA,kCAAA,KAAAC,4BAAA,EAAA,UAAA;AAAA,IAAAC,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAe;AAAA,QACf,SAAS,kBAAkB,CAAC;AAAA,QAC5B,gBAAgB;AAAA,MAAA;AAAA,IAClB;AAAA,IACAF,kCAAAA,KAAC,OAAI,EAAA,WAAU,8BACb,UAAA;AAAA,MAAAE,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,QAAM;AAAA,UACN,YAAY;AAAA,UACZ,WAAU;AAAA,UACV,aAAY;AAAA,UAEZ,UAAAA,kCAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS,CAAC;AAAA,cACV;AAAA,cACA,eAAe;AAAA,YAAA;AAAA,UACjB;AAAA,QAAA;AAAA,MACF;AAAA,MACAF,kCAAAA,KAAC,OAAI,EAAA,WAAU,qDACX,UAAA;AAAA,SAAgB,gBAAA,UAAU,KAAK,KAC/BE,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,QAAM;AAAA,YACN,YAAY;AAAA,YACZ,WAAU;AAAA,YACV,aAAY;AAAA,YAEZ,UAACA,kCAAA,IAAA,YAAA,EAAW,YAAwB,eAAe,KAAK;AAAA,UAAA;AAAA,QAC1D;AAAA,QAEFA,sCAAC,YAAS,YAAwB;AAAA,MAAA,GACpC;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/components/DictionaryFieldEditor/NodeTypeSelector.cjs

@@ -6,6 +6,7 @@ const client = require("@intlayer/config/client");
 const core = require("@intlayer/core");
 const require$$0 = require("react");
 const reactIntlayer = require("react-intlayer");
+const shallow = require("../../shallow-lhDIFtEp.cjs");
 const utils_dictionary = require("../../utils/dictionary.cjs");
 const components_DictionaryEditor_useEditedContentStore = require("../DictionaryEditor/useEditedContentStore.cjs");
 require("../DictionaryEditor/useEditionPanelStore.cjs");
@@ -44,9 +45,11 @@ const NodeTypeSelector = ({
   } = reactIntlayer.useDictionary(components_DictionaryFieldEditor_nodeTypeSelector_content.nodeTypeSelectorContent);
   const nodeType = utils_dictionary.getSectionType(section);
   const [keyType, setKeyType] = require$$0.useState(nodeType);
-  const { addEditedContent } = components_DictionaryEditor_useEditedContentStore.useEditedContentStore((s) => ({
-    addEditedContent: s.addEditedContent
-  }));
+  const { addEditedContent } = components_DictionaryEditor_useEditedContentStore.useEditedContentStore(
+    shallow.useShallow((s) => ({
+      addEditedContent: s.addEditedContent
+    }))
+  );
   const { locales } = client.getConfiguration().internationalization;
   const onValueChange = (keyType2) => {
     setKeyType(keyType2);