@intlayer/design-system 2.0.13 → 3.0.0

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

@@ -0,0 +1,11 @@
+import { KeyPath, DictionaryValue } from '@intlayer/core';
+import { FC } from 'react';
+
+export declare const traceKeys: string[];
+export type TextEditorProps = {
+    dictionaryKey: string;
+    keyPath: KeyPath[];
+    section: DictionaryValue;
+};
+export declare const TextEditor: FC<TextEditorProps>;
+//# sourceMappingURL=TextEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/DictionaryFieldEditor/EditorView/TextEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,EAKL,KAAK,OAAO,EACZ,KAAK,eAAe,EAErB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAIL,KAAK,EAAE,EACR,MAAM,OAAO,CAAC;AAcf,eAAO,MAAM,SAAS,EAAE,MAAM,EAAmC,CAAC;AAsClE,MAAM,MAAM,eAAe,GAAG;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,OAAO,EAAE,eAAe,CAAC;CAC1B,CAAC;AAsNF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAwE1C,CAAC"}

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

@@ -0,0 +1,298 @@
+"use client";
+import { j as jsxRuntimeExports } from "../../../jsx-runtime-BgSF1HG2.js";
+import { getConfiguration } from "@intlayer/config/client";
+import { NodeType, getLocaleName } from "@intlayer/core";
+import { X, Plus } from "lucide-react";
+import { createElement } from "react";
+import { useDictionary } from "react-intlayer";
+import { getSectionType } from "../../../utils/dictionary.mjs";
+import { renameKey } from "../../../utils/object.mjs";
+import { Button } from "../../Button/Button.mjs";
+import { ContentEditorTextArea } from "../../ContentEditor/ContentEditorTextArea.mjs";
+import { useEditedContentStore } from "../../DictionaryEditor/useEditedContentStore.mjs";
+import { useEditionPanelStore } from "../../DictionaryEditor/useEditionPanelStore.mjs";
+import "clsx";
+import "tailwind-merge";
+import { EnumKeyInput } from "../EnumKeyInput.mjs";
+import { getIsEditableSection } from "../getIsEditableSection.mjs";
+import { navigationViewContent } from "../NavigationView/navigationViewNode.content.mjs";
+const traceKeys = ["filePath", "id", "nodeType"];
+const createReactElement = (element) => {
+  if (typeof element === "string") {
+    return element;
+  }
+  const convertChildrenAsArray = (element2) => {
+    if (element2?.props && typeof element2.props.children === "object") {
+      const childrenResult = [];
+      const { children } = element2.props;
+      Object.keys(children).forEach(
+        (key) => childrenResult.push(createReactElement(children[key]))
+      );
+      return {
+        ...element2,
+        props: { ...element2.props, children: childrenResult }
+      };
+    }
+    return {
+      ...element2,
+      props: { ...element2.props, children: element2.props.children }
+    };
+  };
+  const fixedElement = convertChildrenAsArray(element);
+  const { type, props } = fixedElement;
+  return createElement(type ?? "div", props, ...props.children);
+};
+const TranslationTextEditor = ({
+  section,
+  keyPath,
+  dictionaryKey
+}) => {
+  const { locales } = getConfiguration().internationalization;
+  const addEditedContent = useEditedContentStore((s) => s.addEditedContent);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("table", { className: "w-full gap-2", children: locales.map((translationKey) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "tr",
+    {
+      className: "border-text dark:border-text-dark w-full border-t-[1.5px]",
+      lang: translationKey,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "border-text dark:border-text-dark border-r-[1.5px] p-2", children: getLocaleName(translationKey) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "w-full p-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ContentEditorTextArea,
+          {
+            variant: "default",
+            "aria-label": "Edit field",
+            onContentChange: (newValue) => addEditedContent(dictionaryKey, newValue, [
+              ...keyPath,
+              {
+                type: NodeType.Translation,
+                key: translationKey
+              }
+            ]),
+            children: section[NodeType.Translation][translationKey]
+          }
+        ) })
+      ]
+    },
+    translationKey
+  )) });
+};
+const EnumerationTextEditor = ({
+  section,
+  keyPath,
+  dictionaryKey
+}) => {
+  const addEditedContent = useEditedContentStore((s) => s.addEditedContent);
+  const { addNewEnumeration } = useDictionary(navigationViewContent);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("table", { className: "w-full table-fixed gap-2", children: [
+    Object.keys(
+      section[NodeType.Enumeration]
+    ).map((enumKey) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "tr",
+      {
+        className: "border-text dark:border-text-dark w-full border-y-[1.5px]",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "border-text dark:border-text-dark w-44 border-r-[1.5px] p-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-1", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Button,
+              {
+                label: "Remove",
+                variant: "hoverable",
+                size: "icon-md",
+                color: "text",
+                Icon: X,
+                className: "w-16",
+                onClick: () => addEditedContent(dictionaryKey, void 0, [
+                  ...keyPath,
+                  {
+                    type: NodeType.Enumeration,
+                    key: enumKey
+                  }
+                ])
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              EnumKeyInput,
+              {
+                value: enumKey,
+                onChange: (value) => {
+                  const preValueContent = section[NodeType.Enumeration];
+                  const newValueContent = renameKey(
+                    preValueContent,
+                    enumKey,
+                    value
+                  );
+                  const newValue = {
+                    ...section,
+                    [NodeType.Enumeration]: newValueContent
+                  };
+                  addEditedContent(dictionaryKey, newValue, keyPath);
+                }
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "w-full p-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ContentEditorTextArea,
+            {
+              variant: "default",
+              "aria-label": "Edit field",
+              onContentChange: (newValue) => addEditedContent(dictionaryKey, newValue, [
+                ...keyPath,
+                {
+                  type: NodeType.Enumeration,
+                  key: enumKey
+                }
+              ]),
+              children: section[NodeType.Enumeration][enumKey]
+            }
+          ) })
+        ]
+      },
+      enumKey
+    )),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button,
+      {
+        label: addNewEnumeration.label.value,
+        variant: "hoverable",
+        color: "neutral",
+        textAlign: "left",
+        onClick: () => addEditedContent(
+          dictionaryKey,
+          "",
+          [...keyPath, { type: NodeType.Enumeration, key: "unknown" }],
+          false
+        ),
+        Icon: Plus,
+        className: "m-2",
+        children: addNewEnumeration.text
+      }
+    )
+  ] });
+};
+const ArrayTextEditor = ({
+  section,
+  keyPath,
+  dictionaryKey
+}) => {
+  const addEditedContent = useEditedContentStore((s) => s.addEditedContent);
+  useEditionPanelStore(
+    (s) => s.setFocusedContentKeyPath
+  );
+  const { addNewElement } = useDictionary(navigationViewContent);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("table", { className: "w-full gap-2", children: [
+    section.map((subSection, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "tr",
+      {
+        className: "border-text dark:border-text-dark w-full border-t-[1.5px]",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "border-text dark:border-text-dark border-r-[1.5px] p-2", children: index }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "w-full p-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ContentEditorTextArea,
+            {
+              variant: "default",
+              "aria-label": "Edit field",
+              onContentChange: (newValue) => {
+                addEditedContent(dictionaryKey, newValue, [
+                  ...keyPath,
+                  {
+                    type: NodeType.Array,
+                    key: index
+                  }
+                ]);
+              },
+              children: subSection
+            }
+          ) })
+        ]
+      },
+      JSON.stringify(subSection)
+    )),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button,
+      {
+        label: addNewElement.label.value,
+        variant: "hoverable",
+        color: "neutral",
+        textAlign: "left",
+        onClick: () => {
+          const newKeyPath = [
+            ...keyPath,
+            {
+              type: NodeType.Array,
+              key: section.length
+            }
+          ];
+          addEditedContent(dictionaryKey, "", newKeyPath, false);
+        },
+        Icon: Plus,
+        children: addNewElement.text
+      }
+    )
+  ] });
+};
+const TextEditor = ({
+  section,
+  keyPath,
+  dictionaryKey
+}) => {
+  const addEditedContent = useEditedContentStore((s) => s.addEditedContent);
+  const { tsxNotEditable } = useDictionary(navigationViewContent);
+  const nodeType = getSectionType(section);
+  const isEditableSection = getIsEditableSection(section);
+  if (!isEditableSection) return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
+  if (typeof section === "object") {
+    if (nodeType === NodeType.ReactNode) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        createReactElement(section),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-neutral dark:text-neutral-dark text-xs", children: tsxNotEditable })
+      ] });
+    }
+    if (nodeType === NodeType.Translation) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        TranslationTextEditor,
+        {
+          dictionaryKey,
+          keyPath,
+          section
+        }
+      );
+    }
+    if (nodeType === NodeType.Enumeration) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        EnumerationTextEditor,
+        {
+          dictionaryKey,
+          keyPath,
+          section
+        }
+      );
+    }
+    if (nodeType === NodeType.Array) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ArrayTextEditor,
+        {
+          dictionaryKey,
+          keyPath,
+          section
+        }
+      );
+    }
+  }
+  if (nodeType === NodeType.Text) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-text dark:border-text-dark w-full border-t-[1.5px] p-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ContentEditorTextArea,
+      {
+        variant: "default",
+        "aria-label": "Edit field",
+        onContentChange: (newValue) => addEditedContent(dictionaryKey, newValue, keyPath),
+        children: section
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: "Error loading section" });
+};
+export {
+  TextEditor,
+  traceKeys
+};
+//# sourceMappingURL=TextEditor.mjs.map

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

@@ -0,0 +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  type RecursiveDictionaryValue,\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';\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 {\n  useEditedContentStore,\n  useEditionPanelStore,\n} 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      {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    </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      {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      <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    </table>\n  );\n};\n\nconst ArrayTextEditor: FC<TextEditorProps> = ({\n  section,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const addEditedContent = useEditedContentStore((s) => s.addEditedContent);\n  const setFocusedContentKeyPath = useEditionPanelStore(\n    (s) => s.setFocusedContentKeyPath\n  );\n  const { addNewElement } = useDictionary(navigationViewContent);\n\n  return (\n    <table className=\"w-full gap-2\">\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\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    </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","jsxs","jsx","Fragment"],"mappings":"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"}

package/dist/components/DictionaryFieldEditor/EnumKeyInput.cjs

@@ -0,0 +1,71 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../jsx-runtime-DvCoRj5u.cjs");
+const require$$0 = require("react");
+const components_Input_Input = require("../Input/Input.cjs");
+require("../Input/InputPassword.cjs");
+require("../Select/Multiselect.cjs");
+const components_Select_Select = require("../Select/Select.cjs");
+const extractInitialState = (value) => {
+  let comparator;
+  let numberValue;
+  if (typeof value === "number" || !isNaN(Number(value))) {
+    comparator = "=";
+    numberValue = value.toString();
+  } else if (typeof value === "string") {
+    const comparators = ["<=", ">=", "<", ">", "="];
+    const matchedComparator = comparators.find(
+      (comp) => value.startsWith(comp)
+    );
+    if (matchedComparator) {
+      comparator = matchedComparator;
+      numberValue = value.slice(matchedComparator.length);
+    }
+  }
+  return { comparator, numberValue };
+};
+const EnumKeyInput = ({ value, onChange }) => {
+  const { comparator: initialComparator, numberValue: initialNumberValue } = require$$0.useMemo(() => extractInitialState(value), [value]);
+  const [comparator, setComparator] = require$$0.useState(
+    initialComparator ?? null
+  );
+  const [numberValue, setNumberValue] = require$$0.useState(
+    initialNumberValue ?? null
+  );
+  require$$0.useEffect(() => {
+    if (comparator && numberValue && (comparator !== initialComparator || numberValue !== initialNumberValue)) {
+      const newValue = `${comparator}${numberValue}`;
+      onChange(newValue);
+    }
+  }, [
+    comparator,
+    initialComparator,
+    initialNumberValue,
+    numberValue,
+    onChange
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex gap-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(components_Select_Select.Select, { onValueChange: setComparator, defaultValue: initialComparator, children: [
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_Select_Select.Select.Trigger, { className: "w-20", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_Select_Select.Select.Value, { placeholder: "Select a comparator" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(components_Select_Select.Select.Content, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_Select_Select.Select.Item, { value: "<", children: `<` }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_Select_Select.Select.Item, { value: "<=", children: `<=` }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_Select_Select.Select.Item, { value: "=", children: `=` }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_Select_Select.Select.Item, { value: ">=", children: `>=` }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_Select_Select.Select.Item, { value: ">", children: `>` })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      components_Input_Input.Input,
+      {
+        type: "number",
+        defaultValue: numberValue ?? void 0,
+        onChange: (e) => setNumberValue(e.target.value),
+        className: "w-full"
+      }
+    )
+  ] });
+};
+exports.EnumKeyInput = EnumKeyInput;
+//# sourceMappingURL=EnumKeyInput.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EnumKeyInput.cjs","sources":["../../../src/components/DictionaryFieldEditor/EnumKeyInput.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useState, type FC } from 'react';\nimport { Input } from '../Input';\nimport { Select } from '../Select';\n\nconst extractInitialState = (\n  value: string | number\n): { comparator: string | undefined; numberValue: string | undefined } => {\n  let comparator;\n  let numberValue;\n\n  if (typeof value === 'number' || !isNaN(Number(value))) {\n    // If value is a number or numeric string, set comparator to '=' and numberValue accordingly\n    comparator = '=';\n    numberValue = value.toString();\n  } else if (typeof value === 'string') {\n    // Define possible comparators\n    const comparators = ['<=', '>=', '<', '>', '='];\n    // Find the comparator that matches the start of the string\n    const matchedComparator = comparators.find((comp) =>\n      value.startsWith(comp)\n    );\n    if (matchedComparator) {\n      comparator = matchedComparator;\n      numberValue = value.slice(matchedComparator.length);\n    }\n  }\n\n  return { comparator, numberValue };\n};\n\ntype EnumKeyInputProps = {\n  value: string | number;\n  onChange: (value: string) => void;\n};\n\n/**\n * Example of values:\n * - `<1`\n * - `>-44.3`\n * - `=999`\n * - `<=1`\n * - `>=1`\n * - 88\n * - `-1`\n *\n */\nexport const EnumKeyInput: FC<EnumKeyInputProps> = ({ value, onChange }) => {\n  const { comparator: initialComparator, numberValue: initialNumberValue } =\n    useMemo(() => extractInitialState(value), [value]);\n  const [comparator, setComparator] = useState<string | null>(\n    initialComparator ?? null\n  );\n  const [numberValue, setNumberValue] = useState<string | null>(\n    initialNumberValue ?? null\n  );\n\n  useEffect(() => {\n    if (\n      comparator &&\n      numberValue &&\n      (comparator !== initialComparator || numberValue !== initialNumberValue)\n    ) {\n      const newValue = `${comparator}${numberValue}`;\n\n      onChange(newValue);\n    }\n  }, [\n    comparator,\n    initialComparator,\n    initialNumberValue,\n    numberValue,\n    onChange,\n  ]);\n\n  return (\n    <div className=\"flex gap-1\">\n      <Select onValueChange={setComparator} defaultValue={initialComparator}>\n        <Select.Trigger className=\"w-20\">\n          <Select.Value placeholder=\"Select a comparator\" />\n        </Select.Trigger>\n        <Select.Content>\n          <Select.Item value=\"<\">{`<`}</Select.Item>\n          <Select.Item value=\"<=\">{`<=`}</Select.Item>\n          <Select.Item value=\"=\">{`=`}</Select.Item>\n          <Select.Item value=\">=\">{`>=`}</Select.Item>\n          <Select.Item value=\">\">{`>`}</Select.Item>\n        </Select.Content>\n      </Select>\n      <Input\n        type=\"number\"\n        defaultValue={numberValue ?? undefined}\n        onChange={(e) => setNumberValue(e.target.value)}\n        className=\"w-full\"\n      />\n    </div>\n  );\n};\n"],"names":["useMemo","useState","useEffect","jsxs","Select","jsx","Input"],"mappings":";;;;;;;;;AAMA,MAAM,sBAAsB,CAC1B,UACwE;AACpE,MAAA;AACA,MAAA;AAEA,MAAA,OAAO,UAAU,YAAY,CAAC,MAAM,OAAO,KAAK,CAAC,GAAG;AAEzC,iBAAA;AACb,kBAAc,MAAM;EAAS,WACpB,OAAO,UAAU,UAAU;AAEpC,UAAM,cAAc,CAAC,MAAM,MAAM,KAAK,KAAK,GAAG;AAE9C,UAAM,oBAAoB,YAAY;AAAA,MAAK,CAAC,SAC1C,MAAM,WAAW,IAAI;AAAA,IAAA;AAEvB,QAAI,mBAAmB;AACR,mBAAA;AACC,oBAAA,MAAM,MAAM,kBAAkB,MAAM;AAAA,IACpD;AAAA,EACF;AAEO,SAAA,EAAE,YAAY;AACvB;AAkBO,MAAM,eAAsC,CAAC,EAAE,OAAO,eAAe;AAC1E,QAAM,EAAE,YAAY,mBAAmB,aAAa,mBAAmB,IACrEA,mBAAQ,MAAM,oBAAoB,KAAK,GAAG,CAAC,KAAK,CAAC;AAC7C,QAAA,CAAC,YAAY,aAAa,IAAIC,WAAA;AAAA,IAClC,qBAAqB;AAAA,EAAA;AAEjB,QAAA,CAAC,aAAa,cAAc,IAAIA,WAAA;AAAA,IACpC,sBAAsB;AAAA,EAAA;AAGxBC,aAAAA,UAAU,MAAM;AACd,QACE,cACA,gBACC,eAAe,qBAAqB,gBAAgB,qBACrD;AACA,YAAM,WAAW,GAAG,UAAU,GAAG,WAAW;AAE5C,eAAS,QAAQ;AAAA,IACnB;AAAA,EAAA,GACC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAAC,2BAAA,kBAAA,KAAC,OAAI,EAAA,WAAU,cACb,UAAA;AAAA,IAAAA,2BAAA,kBAAA,KAACC,yBAAO,QAAA,EAAA,eAAe,eAAe,cAAc,mBAClD,UAAA;AAAA,MAACC,2BAAAA,kBAAAA,IAAAD,yBAAAA,OAAO,SAAP,EAAe,WAAU,QACxB,UAACC,iDAAAD,yBAAAA,OAAO,OAAP,EAAa,aAAY,sBAAA,CAAsB,EAClD,CAAA;AAAA,MACAD,2BAAAA,kBAAAA,KAACC,yBAAO,OAAA,SAAP,EACC,UAAA;AAAA,QAAAC,iDAACD,yBAAAA,OAAO,MAAP,EAAY,OAAM,KAAK,UAAI,KAAA;AAAA,yDAC3BA,yBAAAA,OAAO,MAAP,EAAY,OAAM,MAAM,UAAK,MAAA;AAAA,yDAC7BA,yBAAAA,OAAO,MAAP,EAAY,OAAM,KAAK,UAAI,KAAA;AAAA,yDAC3BA,yBAAAA,OAAO,MAAP,EAAY,OAAM,MAAM,UAAK,MAAA;AAAA,yDAC7BA,yBAAAA,OAAO,MAAP,EAAY,OAAM,KAAK,UAAI,KAAA;AAAA,MAAA,GAC9B;AAAA,IAAA,GACF;AAAA,IACAC,2BAAA,kBAAA;AAAA,MAACC,uBAAA;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAc,eAAe;AAAA,QAC7B,UAAU,CAAC,MAAM,eAAe,EAAE,OAAO,KAAK;AAAA,QAC9C,WAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,EAAA,CAAA;AAEJ;;"}

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

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+
+type EnumKeyInputProps = {
+    value: string | number;
+    onChange: (value: string) => void;
+};
+/**
+ * Example of values:
+ * - `<1`
+ * - `>-44.3`
+ * - `=999`
+ * - `<=1`
+ * - `>=1`
+ * - 88
+ * - `-1`
+ *
+ */
+export declare const EnumKeyInput: FC<EnumKeyInputProps>;
+export {};
+//# sourceMappingURL=EnumKeyInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EnumKeyInput.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/EnumKeyInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgC,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AA8B9D,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAkD9C,CAAC"}

package/dist/components/DictionaryFieldEditor/EnumKeyInput.mjs

@@ -0,0 +1,71 @@
+"use client";
+import { j as jsxRuntimeExports } from "../../jsx-runtime-BgSF1HG2.js";
+import { useMemo, useState, useEffect } from "react";
+import { Input } from "../Input/Input.mjs";
+import "../Input/InputPassword.mjs";
+import "../Select/Multiselect.mjs";
+import { Select } from "../Select/Select.mjs";
+const extractInitialState = (value) => {
+  let comparator;
+  let numberValue;
+  if (typeof value === "number" || !isNaN(Number(value))) {
+    comparator = "=";
+    numberValue = value.toString();
+  } else if (typeof value === "string") {
+    const comparators = ["<=", ">=", "<", ">", "="];
+    const matchedComparator = comparators.find(
+      (comp) => value.startsWith(comp)
+    );
+    if (matchedComparator) {
+      comparator = matchedComparator;
+      numberValue = value.slice(matchedComparator.length);
+    }
+  }
+  return { comparator, numberValue };
+};
+const EnumKeyInput = ({ value, onChange }) => {
+  const { comparator: initialComparator, numberValue: initialNumberValue } = useMemo(() => extractInitialState(value), [value]);
+  const [comparator, setComparator] = useState(
+    initialComparator ?? null
+  );
+  const [numberValue, setNumberValue] = useState(
+    initialNumberValue ?? null
+  );
+  useEffect(() => {
+    if (comparator && numberValue && (comparator !== initialComparator || numberValue !== initialNumberValue)) {
+      const newValue = `${comparator}${numberValue}`;
+      onChange(newValue);
+    }
+  }, [
+    comparator,
+    initialComparator,
+    initialNumberValue,
+    numberValue,
+    onChange
+  ]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-1", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { onValueChange: setComparator, defaultValue: initialComparator, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Trigger, { className: "w-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Value, { placeholder: "Select a comparator" }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Select.Content, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Item, { value: "<", children: `<` }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Item, { value: "<=", children: `<=` }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Item, { value: "=", children: `=` }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Item, { value: ">=", children: `>=` }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Item, { value: ">", children: `>` })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Input,
+      {
+        type: "number",
+        defaultValue: numberValue ?? void 0,
+        onChange: (e) => setNumberValue(e.target.value),
+        className: "w-full"
+      }
+    )
+  ] });
+};
+export {
+  EnumKeyInput
+};
+//# sourceMappingURL=EnumKeyInput.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EnumKeyInput.mjs","sources":["../../../src/components/DictionaryFieldEditor/EnumKeyInput.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useState, type FC } from 'react';\nimport { Input } from '../Input';\nimport { Select } from '../Select';\n\nconst extractInitialState = (\n  value: string | number\n): { comparator: string | undefined; numberValue: string | undefined } => {\n  let comparator;\n  let numberValue;\n\n  if (typeof value === 'number' || !isNaN(Number(value))) {\n    // If value is a number or numeric string, set comparator to '=' and numberValue accordingly\n    comparator = '=';\n    numberValue = value.toString();\n  } else if (typeof value === 'string') {\n    // Define possible comparators\n    const comparators = ['<=', '>=', '<', '>', '='];\n    // Find the comparator that matches the start of the string\n    const matchedComparator = comparators.find((comp) =>\n      value.startsWith(comp)\n    );\n    if (matchedComparator) {\n      comparator = matchedComparator;\n      numberValue = value.slice(matchedComparator.length);\n    }\n  }\n\n  return { comparator, numberValue };\n};\n\ntype EnumKeyInputProps = {\n  value: string | number;\n  onChange: (value: string) => void;\n};\n\n/**\n * Example of values:\n * - `<1`\n * - `>-44.3`\n * - `=999`\n * - `<=1`\n * - `>=1`\n * - 88\n * - `-1`\n *\n */\nexport const EnumKeyInput: FC<EnumKeyInputProps> = ({ value, onChange }) => {\n  const { comparator: initialComparator, numberValue: initialNumberValue } =\n    useMemo(() => extractInitialState(value), [value]);\n  const [comparator, setComparator] = useState<string | null>(\n    initialComparator ?? null\n  );\n  const [numberValue, setNumberValue] = useState<string | null>(\n    initialNumberValue ?? null\n  );\n\n  useEffect(() => {\n    if (\n      comparator &&\n      numberValue &&\n      (comparator !== initialComparator || numberValue !== initialNumberValue)\n    ) {\n      const newValue = `${comparator}${numberValue}`;\n\n      onChange(newValue);\n    }\n  }, [\n    comparator,\n    initialComparator,\n    initialNumberValue,\n    numberValue,\n    onChange,\n  ]);\n\n  return (\n    <div className=\"flex gap-1\">\n      <Select onValueChange={setComparator} defaultValue={initialComparator}>\n        <Select.Trigger className=\"w-20\">\n          <Select.Value placeholder=\"Select a comparator\" />\n        </Select.Trigger>\n        <Select.Content>\n          <Select.Item value=\"<\">{`<`}</Select.Item>\n          <Select.Item value=\"<=\">{`<=`}</Select.Item>\n          <Select.Item value=\"=\">{`=`}</Select.Item>\n          <Select.Item value=\">=\">{`>=`}</Select.Item>\n          <Select.Item value=\">\">{`>`}</Select.Item>\n        </Select.Content>\n      </Select>\n      <Input\n        type=\"number\"\n        defaultValue={numberValue ?? undefined}\n        onChange={(e) => setNumberValue(e.target.value)}\n        className=\"w-full\"\n      />\n    </div>\n  );\n};\n"],"names":["jsxs","jsx"],"mappings":";;;;;;;AAMA,MAAM,sBAAsB,CAC1B,UACwE;AACpE,MAAA;AACA,MAAA;AAEA,MAAA,OAAO,UAAU,YAAY,CAAC,MAAM,OAAO,KAAK,CAAC,GAAG;AAEzC,iBAAA;AACb,kBAAc,MAAM;EAAS,WACpB,OAAO,UAAU,UAAU;AAEpC,UAAM,cAAc,CAAC,MAAM,MAAM,KAAK,KAAK,GAAG;AAE9C,UAAM,oBAAoB,YAAY;AAAA,MAAK,CAAC,SAC1C,MAAM,WAAW,IAAI;AAAA,IAAA;AAEvB,QAAI,mBAAmB;AACR,mBAAA;AACC,oBAAA,MAAM,MAAM,kBAAkB,MAAM;AAAA,IACpD;AAAA,EACF;AAEO,SAAA,EAAE,YAAY;AACvB;AAkBO,MAAM,eAAsC,CAAC,EAAE,OAAO,eAAe;AAC1E,QAAM,EAAE,YAAY,mBAAmB,aAAa,mBAAmB,IACrE,QAAQ,MAAM,oBAAoB,KAAK,GAAG,CAAC,KAAK,CAAC;AAC7C,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC,qBAAqB;AAAA,EAAA;AAEjB,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC,sBAAsB;AAAA,EAAA;AAGxB,YAAU,MAAM;AACd,QACE,cACA,gBACC,eAAe,qBAAqB,gBAAgB,qBACrD;AACA,YAAM,WAAW,GAAG,UAAU,GAAG,WAAW;AAE5C,eAAS,QAAQ;AAAA,IACnB;AAAA,EAAA,GACC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAAA,kCAAA,KAAC,OAAI,EAAA,WAAU,cACb,UAAA;AAAA,IAAAA,kCAAA,KAAC,QAAO,EAAA,eAAe,eAAe,cAAc,mBAClD,UAAA;AAAA,MAACC,kCAAAA,IAAA,OAAO,SAAP,EAAe,WAAU,QACxB,UAACA,sCAAA,OAAO,OAAP,EAAa,aAAY,sBAAA,CAAsB,EAClD,CAAA;AAAA,MACAD,kCAAAA,KAAC,OAAO,SAAP,EACC,UAAA;AAAA,QAAAC,sCAAC,OAAO,MAAP,EAAY,OAAM,KAAK,UAAI,KAAA;AAAA,8CAC3B,OAAO,MAAP,EAAY,OAAM,MAAM,UAAK,MAAA;AAAA,8CAC7B,OAAO,MAAP,EAAY,OAAM,KAAK,UAAI,KAAA;AAAA,8CAC3B,OAAO,MAAP,EAAY,OAAM,MAAM,UAAK,MAAA;AAAA,8CAC7B,OAAO,MAAP,EAAY,OAAM,KAAK,UAAI,KAAA;AAAA,MAAA,GAC9B;AAAA,IAAA,GACF;AAAA,IACAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAc,eAAe;AAAA,QAC7B,UAAU,CAAC,MAAM,eAAe,EAAE,OAAO,KAAK;AAAA,QAC9C,WAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/components/DictionaryFieldEditor/KeyPathBreadcrumb.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../jsx-runtime-DvCoRj5u.cjs");
+const components_Breadcrumb_index = require("../Breadcrumb/index.cjs");
+const KeyPathBreadcrumb = ({
+  keyPath,
+  dictionaryKey,
+  onClickKeyPath
+}) => {
+  const formattedKeyPath = [
+    { text: dictionaryKey, onClick: () => onClickKeyPath([]) },
+    ...keyPath.map((el, index) => ({
+      onClick: () => onClickKeyPath(
+        keyPath.slice(0, index + 1)
+      ),
+      text: el.key.toString()
+    }))
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_Breadcrumb_index.Breadcrumb, { links: formattedKeyPath });
+};
+exports.KeyPathBreadcrumb = KeyPathBreadcrumb;
+//# sourceMappingURL=KeyPathBreadcrumb.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyPathBreadcrumb.cjs","sources":["../../../src/components/DictionaryFieldEditor/KeyPathBreadcrumb.tsx"],"sourcesContent":["import type { KeyPath } from '@intlayer/core';\nimport type { FC } from 'react';\nimport { Breadcrumb, type BreadcrumbLink } from '../Breadcrumb';\n\ntype KeyPathBreadcrumbProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  onClickKeyPath: (keyPath: KeyPath[]) => void;\n};\n\nexport const KeyPathBreadcrumb: FC<KeyPathBreadcrumbProps> = ({\n  keyPath,\n  dictionaryKey,\n  onClickKeyPath,\n}) => {\n  const formattedKeyPath: BreadcrumbLink[] = [\n    { text: dictionaryKey, onClick: () => onClickKeyPath([]) },\n    ...keyPath.map((el, index) => ({\n      onClick: () =>\n        onClickKeyPath(\n          keyPath\n            // With keyPath = [{type: NodeType.Object, key: '0'}, {type: NodeType.Array, key: '0'}, {type: NodeType.Object, key: '1'}]\n            // If index is 0 -> onFocusKeyPath([{type: NodeType.Object, key: '0'}])\n            // If index is 1 -> onFocusKeyPath([{type: NodeType.Object, key: '0'}, {type: NodeType.Array, key: '0'}])\n            .slice(0, index + 1)\n        ),\n      text: el.key.toString(),\n    })),\n  ];\n\n  return <Breadcrumb links={formattedKeyPath} />;\n};\n"],"names":["jsx","Breadcrumb"],"mappings":";;;;AAUO,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,mBAAqC;AAAA,IACzC,EAAE,MAAM,eAAe,SAAS,MAAM,eAAe,CAAE,CAAA,EAAE;AAAA,IACzD,GAAG,QAAQ,IAAI,CAAC,IAAI,WAAW;AAAA,MAC7B,SAAS,MACP;AAAA,QACE,QAIG,MAAM,GAAG,QAAQ,CAAC;AAAA,MACvB;AAAA,MACF,MAAM,GAAG,IAAI,SAAS;AAAA,IAAA,EACtB;AAAA,EAAA;AAGG,SAAAA,2BAAA,kBAAA,IAACC,4BAAW,YAAA,EAAA,OAAO,iBAAkB,CAAA;AAC9C;;"}

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

@@ -0,0 +1,11 @@
+import { KeyPath } from '@intlayer/core';
+import { FC } from 'react';
+
+type KeyPathBreadcrumbProps = {
+    dictionaryKey: string;
+    keyPath: KeyPath[];
+    onClickKeyPath: (keyPath: KeyPath[]) => void;
+};
+export declare const KeyPathBreadcrumb: FC<KeyPathBreadcrumbProps>;
+export {};
+//# sourceMappingURL=KeyPathBreadcrumb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyPathBreadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/KeyPathBreadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,KAAK,sBAAsB,GAAG;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,cAAc,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAqBxD,CAAC"}

package/dist/components/DictionaryFieldEditor/KeyPathBreadcrumb.mjs

@@ -0,0 +1,22 @@
+import { j as jsxRuntimeExports } from "../../jsx-runtime-BgSF1HG2.js";
+import { Breadcrumb } from "../Breadcrumb/index.mjs";
+const KeyPathBreadcrumb = ({
+  keyPath,
+  dictionaryKey,
+  onClickKeyPath
+}) => {
+  const formattedKeyPath = [
+    { text: dictionaryKey, onClick: () => onClickKeyPath([]) },
+    ...keyPath.map((el, index) => ({
+      onClick: () => onClickKeyPath(
+        keyPath.slice(0, index + 1)
+      ),
+      text: el.key.toString()
+    }))
+  ];
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Breadcrumb, { links: formattedKeyPath });
+};
+export {
+  KeyPathBreadcrumb
+};
+//# sourceMappingURL=KeyPathBreadcrumb.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyPathBreadcrumb.mjs","sources":["../../../src/components/DictionaryFieldEditor/KeyPathBreadcrumb.tsx"],"sourcesContent":["import type { KeyPath } from '@intlayer/core';\nimport type { FC } from 'react';\nimport { Breadcrumb, type BreadcrumbLink } from '../Breadcrumb';\n\ntype KeyPathBreadcrumbProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  onClickKeyPath: (keyPath: KeyPath[]) => void;\n};\n\nexport const KeyPathBreadcrumb: FC<KeyPathBreadcrumbProps> = ({\n  keyPath,\n  dictionaryKey,\n  onClickKeyPath,\n}) => {\n  const formattedKeyPath: BreadcrumbLink[] = [\n    { text: dictionaryKey, onClick: () => onClickKeyPath([]) },\n    ...keyPath.map((el, index) => ({\n      onClick: () =>\n        onClickKeyPath(\n          keyPath\n            // With keyPath = [{type: NodeType.Object, key: '0'}, {type: NodeType.Array, key: '0'}, {type: NodeType.Object, key: '1'}]\n            // If index is 0 -> onFocusKeyPath([{type: NodeType.Object, key: '0'}])\n            // If index is 1 -> onFocusKeyPath([{type: NodeType.Object, key: '0'}, {type: NodeType.Array, key: '0'}])\n            .slice(0, index + 1)\n        ),\n      text: el.key.toString(),\n    })),\n  ];\n\n  return <Breadcrumb links={formattedKeyPath} />;\n};\n"],"names":["jsx"],"mappings":";;AAUO,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,mBAAqC;AAAA,IACzC,EAAE,MAAM,eAAe,SAAS,MAAM,eAAe,CAAE,CAAA,EAAE;AAAA,IACzD,GAAG,QAAQ,IAAI,CAAC,IAAI,WAAW;AAAA,MAC7B,SAAS,MACP;AAAA,QACE,QAIG,MAAM,GAAG,QAAQ,CAAC;AAAA,MACvB;AAAA,MACF,MAAM,GAAG,IAAI,SAAS;AAAA,IAAA,EACtB;AAAA,EAAA;AAGG,SAAAA,kCAAA,IAAC,YAAW,EAAA,OAAO,iBAAkB,CAAA;AAC9C;"}