@intlayer/design-system 8.4.4 → 8.4.6

package/dist/esm/components/DictionaryFieldEditor/StructureView/StructureView.mjs

@@ -1,2 +1,201 @@
-"use client";import{Container as e}from"../../Container/index.mjs";import{Button as t,ButtonColor as n,ButtonSize as r,ButtonVariant as i}from"../../Button/Button.mjs";import{InputVariant as a}from"../../Input/Input.mjs";import{EditableFieldInput as o}from"../../EditableField/EditableFieldInput.mjs";import{NodeTypeSelector as s}from"../NodeTypeSelector.mjs";import{Plus as c,Trash as l}from"lucide-react";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";import{useConfiguration as p,useEditedContentActions as m,useFocusUnmergedDictionary as h}from"@intlayer/editor-react";import{useIntlayer as g}from"react-intlayer";import{getDefaultNode as _,getNodeChildren as v,getNodeType as y}from"@intlayer/core/dictionaryManipulator";import{NodeType as b}from"@intlayer/types/nodeType";import{isSameKeyPath as x}from"@intlayer/core/utils";import{camelCaseToSentence as S}from"@intlayer/config/client";const C=({section:e,dictionaryLocalId:t,keyPath:n,onNodeTypeChange:r})=>{let i=p()?.internationalization.locales??[],a=y(e),o=v(e),c=e=>{r(_(a,i,e))};if(a===b.Translation||a===b.Condition||a===b.Gender||a===b.Enumeration){let l=Object.keys(e[a])[0],u=[...n,{type:a,key:l}];return f(`div`,{className:`flex w-full flex-col gap-1`,children:[d(s,{section:e,onValueChange:e=>r(_(e,i))}),d(C,{section:o,keyPath:u,dictionaryLocalId:t,onNodeTypeChange:c})]})}if(a===b.Array){let l=[...n,{type:a,key:0}];return f(`div`,{className:`flex w-full flex-col gap-1`,children:[d(s,{section:e,onValueChange:e=>r(_(e,i))}),d(C,{section:o,keyPath:l,dictionaryLocalId:t,onNodeTypeChange:c})]})}return a===b.Object?f(u,{children:[d(s,{section:e,onValueChange:e=>r(_(e,i))}),d(`div`,{className:`mt-6 ml-10`,children:d(E,{keyPath:n,section:e,dictionaryLocalId:t})})]}):d(s,{section:e,onValueChange:e=>r(_(e,i))})},w=({sectionKey:s,section:c,keyPath:u,dictionaryLocalId:p})=>{let{focusedContent:_,setFocusedContentKeyPath:v}=h(),{renameEditedContent:y,addEditedContent:b}=m(),{titleInput:w,deleteButton:T}=g(`structure-view`),E=e=>{y(p,e,u);let t=u.slice(0,-1),n=u[u.length-1];v([...t,{...n,key:e}])};return d(e,{transparency:`xl`,roundedSize:`xl`,className:`w-full min-w-80 gap-2 overflow-auto px-5 py-2`,border:!0,borderColor:`text`,background:`none`,"aria-selected":x(u,_?.keyPath??[]),onClick:()=>v(u),children:f(`div`,{className:`flex w-full flex-col items-start justify-between gap-3`,children:[typeof s==`string`&&f(`div`,{className:`w-full`,children:[f(`div`,{className:`flex w-full items-center justify-between gap-10`,children:[d(o,{name:`key`,"aria-label":`Key`,placeholder:w.placeholder.value,defaultValue:s,onSave:e=>E(e),variant:a.INVISIBLE}),d(t,{label:T.label.value,variant:i.HOVERABLE,size:r.ICON_SM,color:n.TEXT,className:`translate-x-2`,Icon:l,onClick:()=>{b(p,void 0,u),v(u.slice(0,-1))}})]}),f(`span`,{className:`ml-3 text-neutral text-sm`,children:[`( `,S(s),` )`]})]}),d(C,{keyPath:u,dictionaryLocalId:p,section:c,onNodeTypeChange:e=>{b(p,e,u)}})]})})},T=({section:e,keyPath:a,dictionaryLocalId:o})=>{let{addNodeButton:s}=g(`structure-view`),{setFocusedContentKeyPath:l}=h(),{addEditedContent:u}=m();return!e||typeof e!=`object`?d(`div`,{children:`Not an object`}):f(`div`,{className:`flex flex-col gap-2 overflow-y-auto`,children:[d(`ul`,{className:`mr-auto flex flex-col gap-4`,children:Object.keys(e).map(t=>d(`li`,{className:`flex w-full`,children:d(w,{sectionKey:t,section:e?.[t],keyPath:[...a,{type:b.Object,key:t}],dictionaryLocalId:o})},`${JSON.stringify(a)}-object-${t}`))}),d(t,{label:s.label.value,variant:i.HOVERABLE,size:r.MD,color:n.TEXT,Icon:c,className:`flex-1`,onClick:()=>{let e=[...a,{type:b.Object,key:`newKey`}];u(o,``,e),l(e)},children:s.text})]})},E=({section:e,keyPath:t,dictionaryLocalId:n})=>!e||typeof e!=`object`||typeof e.nodeType==`string`?d(w,{sectionKey:`content`,section:e,keyPath:t,dictionaryLocalId:n}):d(T,{section:e,keyPath:t,dictionaryLocalId:n});export{w as NodeView,T as ObjectView,E as StructureView};
+'use client';
+
+import { Container } from "../../Container/index.mjs";
+import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../../Button/Button.mjs";
+import { InputVariant } from "../../Input/Input.mjs";
+import { EditableFieldInput } from "../../EditableField/EditableFieldInput.mjs";
+import { NodeTypeSelector } from "../NodeTypeSelector.mjs";
+import { Plus, Trash } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useConfiguration, useEditedContentActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
+import { useIntlayer } from "react-intlayer";
+import { getDefaultNode, getNodeChildren, getNodeType } from "@intlayer/core/dictionaryManipulator";
+import * as NodeTypes from "@intlayer/types/nodeType";
+import { isSameKeyPath } from "@intlayer/core/utils";
+import { camelCaseToSentence } from "@intlayer/config/client";
+
+//#region src/components/DictionaryFieldEditor/StructureView/StructureView.tsx
+const NodeTypeView = ({ section, dictionaryLocalId, keyPath, onNodeTypeChange: onNodeTypeChangeProp }) => {
+	const locales = useConfiguration()?.internationalization.locales ?? [];
+	const nodeType = getNodeType(section);
+	const children = getNodeChildren(section);
+	const onNodeTypeChange = (content) => {
+		onNodeTypeChangeProp(getDefaultNode(nodeType, locales, content));
+	};
+	if (nodeType === NodeTypes.TRANSLATION || nodeType === NodeTypes.CONDITION || nodeType === NodeTypes.GENDER || nodeType === NodeTypes.ENUMERATION) {
+		const firstKey = Object.keys(section[nodeType])[0];
+		const childrenKeyPath = [...keyPath, {
+			type: nodeType,
+			key: firstKey
+		}];
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full flex-col gap-1",
+			children: [/* @__PURE__ */ jsx(NodeTypeSelector, {
+				section,
+				onValueChange: (nodeType) => onNodeTypeChangeProp(getDefaultNode(nodeType, locales))
+			}), /* @__PURE__ */ jsx(NodeTypeView, {
+				section: children,
+				keyPath: childrenKeyPath,
+				dictionaryLocalId,
+				onNodeTypeChange
+			})]
+		});
+	}
+	if (nodeType === NodeTypes.ARRAY) {
+		const childrenKeyPath = [...keyPath, {
+			type: nodeType,
+			key: 0
+		}];
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full flex-col gap-1",
+			children: [/* @__PURE__ */ jsx(NodeTypeSelector, {
+				section,
+				onValueChange: (nodeType) => onNodeTypeChangeProp(getDefaultNode(nodeType, locales))
+			}), /* @__PURE__ */ jsx(NodeTypeView, {
+				section: children,
+				keyPath: childrenKeyPath,
+				dictionaryLocalId,
+				onNodeTypeChange
+			})]
+		});
+	}
+	if (nodeType === NodeTypes.OBJECT) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(NodeTypeSelector, {
+		section,
+		onValueChange: (nodeType) => onNodeTypeChangeProp(getDefaultNode(nodeType, locales))
+	}), /* @__PURE__ */ jsx("div", {
+		className: "mt-6 ml-10",
+		children: /* @__PURE__ */ jsx(StructureView, {
+			keyPath,
+			section,
+			dictionaryLocalId
+		})
+	})] });
+	return /* @__PURE__ */ jsx(NodeTypeSelector, {
+		section,
+		onValueChange: (nodeType) => onNodeTypeChangeProp(getDefaultNode(nodeType, locales))
+	});
+};
+const NodeView = ({ sectionKey, section, keyPath, dictionaryLocalId }) => {
+	const { focusedContent, setFocusedContentKeyPath } = useFocusUnmergedDictionary();
+	const { renameEditedContent, addEditedContent } = useEditedContentActions();
+	const { titleInput, deleteButton } = useIntlayer("structure-view");
+	const handleRenameNodeKey = (keyName) => {
+		renameEditedContent(dictionaryLocalId, keyName, keyPath);
+		const prevKeyPath = keyPath.slice(0, -1);
+		const lastKeyPath = keyPath[keyPath.length - 1];
+		setFocusedContentKeyPath([...prevKeyPath, {
+			...lastKeyPath,
+			key: keyName
+		}]);
+	};
+	return /* @__PURE__ */ jsx(Container, {
+		transparency: "xl",
+		roundedSize: "xl",
+		className: "w-full min-w-80 gap-2 overflow-auto px-5 py-2",
+		border: true,
+		borderColor: "text",
+		background: "none",
+		"aria-selected": isSameKeyPath(keyPath, focusedContent?.keyPath ?? []),
+		onClick: () => setFocusedContentKeyPath(keyPath),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full flex-col items-start justify-between gap-3",
+			children: [typeof sectionKey === "string" && /* @__PURE__ */ jsxs("div", {
+				className: "w-full",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex w-full items-center justify-between gap-10",
+					children: [/* @__PURE__ */ jsx(EditableFieldInput, {
+						name: "key",
+						"aria-label": "Key",
+						placeholder: titleInput.placeholder.value,
+						defaultValue: sectionKey,
+						onSave: (value) => handleRenameNodeKey(value),
+						variant: InputVariant.INVISIBLE
+					}), /* @__PURE__ */ jsx(Button, {
+						label: deleteButton.label.value,
+						variant: ButtonVariant.HOVERABLE,
+						size: ButtonSize.ICON_SM,
+						color: ButtonColor.TEXT,
+						className: "translate-x-2",
+						Icon: Trash,
+						onClick: () => {
+							addEditedContent(dictionaryLocalId, void 0, keyPath);
+							setFocusedContentKeyPath(keyPath.slice(0, -1));
+						}
+					})]
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "ml-3 text-neutral text-sm",
+					children: [
+						"( ",
+						camelCaseToSentence(sectionKey),
+						" )"
+					]
+				})]
+			}), /* @__PURE__ */ jsx(NodeTypeView, {
+				keyPath,
+				dictionaryLocalId,
+				section,
+				onNodeTypeChange: (content) => {
+					addEditedContent(dictionaryLocalId, content, keyPath);
+				}
+			})]
+		})
+	});
+};
+const ObjectView = ({ section, keyPath, dictionaryLocalId }) => {
+	const { addNodeButton } = useIntlayer("structure-view");
+	const { setFocusedContentKeyPath } = useFocusUnmergedDictionary();
+	const { addEditedContent } = useEditedContentActions();
+	if (!section || typeof section !== "object") return /* @__PURE__ */ jsx("div", { children: "Not an object" });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2 overflow-y-auto",
+		children: [/* @__PURE__ */ jsx("ul", {
+			className: "mr-auto flex flex-col gap-4",
+			children: Object.keys(section).map((key) => /* @__PURE__ */ jsx("li", {
+				className: "flex w-full",
+				children: /* @__PURE__ */ jsx(NodeView, {
+					sectionKey: key,
+					section: section?.[key],
+					keyPath: [...keyPath, {
+						type: NodeTypes.OBJECT,
+						key
+					}],
+					dictionaryLocalId
+				})
+			}, `${JSON.stringify(keyPath)}-object-${key}`))
+		}), /* @__PURE__ */ jsx(Button, {
+			label: addNodeButton.label.value,
+			variant: ButtonVariant.HOVERABLE,
+			size: ButtonSize.MD,
+			color: ButtonColor.TEXT,
+			Icon: Plus,
+			className: "flex-1",
+			onClick: () => {
+				const newKey = "newKey";
+				const newKeyPath = [...keyPath, {
+					type: NodeTypes.OBJECT,
+					key: newKey
+				}];
+				addEditedContent(dictionaryLocalId, "", newKeyPath);
+				setFocusedContentKeyPath(newKeyPath);
+			},
+			children: addNodeButton.text
+		})]
+	});
+};
+const StructureView = ({ section, keyPath, dictionaryLocalId }) => {
+	if (!section || typeof section !== "object" || typeof section.nodeType === "string") return /* @__PURE__ */ jsx(NodeView, {
+		sectionKey: "content",
+		section,
+		keyPath,
+		dictionaryLocalId
+	});
+	return /* @__PURE__ */ jsx(ObjectView, {
+		section,
+		keyPath,
+		dictionaryLocalId
+	});
+};
+
+//#endregion
+export { NodeView, ObjectView, StructureView };
 //# sourceMappingURL=StructureView.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"StructureView.mjs","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/StructureView/StructureView.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\n  ButtonColor,\n  ButtonSize,\n  ButtonVariant,\n} from '@components/Button';\nimport { Container } from '@components/Container';\nimport { EditableFieldInput } from '@components/EditableField';\nimport { InputVariant } from '@components/Input';\nimport { camelCaseToSentence } from '@intlayer/config/client';\nimport {\n  getDefaultNode,\n  getNodeChildren,\n  getNodeType,\n} from '@intlayer/core/dictionaryManipulator';\nimport { isSameKeyPath } from '@intlayer/core/utils';\nimport {\n  useConfiguration,\n  useEditedContentActions,\n  useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport type { LocalDictionaryId, TypedNode } from '@intlayer/types/dictionary';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport { NodeType } from '@intlayer/types/nodeType';\nimport type { ContentNode } from 'intlayer';\nimport { Plus, Trash } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { NodeTypeSelector } from '../NodeTypeSelector';\n\ntype NodeTypeViewProps = {\n  dictionaryLocalId: LocalDictionaryId;\n  keyPath: KeyPath[];\n  section: ContentNode;\n  onNodeTypeChange: (content?: ContentNode) => void;\n};\n\nconst NodeTypeView: FC<NodeTypeViewProps> = ({\n  section,\n  dictionaryLocalId,\n  keyPath,\n  onNodeTypeChange: onNodeTypeChangeProp,\n}) => {\n  const locales = useConfiguration()?.internationalization.locales ?? [];\n  const nodeType = getNodeType(section);\n  const children = getNodeChildren(section);\n\n  const onNodeTypeChange = (content?: ContentNode) => {\n    const transformedContent = getDefaultNode(\n      nodeType,\n      locales,\n      content\n    ) as ContentNode;\n\n    onNodeTypeChangeProp(transformedContent);\n  };\n\n  if (\n    nodeType === NodeType.Translation ||\n    nodeType === NodeType.Condition ||\n    nodeType === NodeType.Gender ||\n    nodeType === NodeType.Enumeration\n  ) {\n    const firstKey = Object.keys(\n      (section as unknown as TypedNode)[nodeType as keyof typeof section]\n    )[0];\n    const childrenKeyPath = [\n      ...keyPath,\n      { type: nodeType, key: firstKey },\n    ] as KeyPath[];\n\n    return (\n      <div className=\"flex w-full flex-col gap-1\">\n        <NodeTypeSelector\n          section={section}\n          onValueChange={(nodeType) =>\n            onNodeTypeChangeProp(\n              getDefaultNode(nodeType, locales) as ContentNode\n            )\n          }\n        />\n\n        <NodeTypeView\n          section={children}\n          keyPath={childrenKeyPath}\n          dictionaryLocalId={dictionaryLocalId}\n          onNodeTypeChange={onNodeTypeChange}\n        />\n      </div>\n    );\n  }\n\n  if (nodeType === NodeType.Array) {\n    const childrenKeyPath = [...keyPath, { type: nodeType, key: 0 } as KeyPath];\n    return (\n      <div className=\"flex w-full flex-col gap-1\">\n        <NodeTypeSelector\n          section={section}\n          onValueChange={(nodeType) =>\n            onNodeTypeChangeProp(\n              getDefaultNode(nodeType, locales) as ContentNode\n            )\n          }\n        />\n\n        <NodeTypeView\n          section={children}\n          keyPath={childrenKeyPath}\n          dictionaryLocalId={dictionaryLocalId}\n          onNodeTypeChange={onNodeTypeChange}\n        />\n      </div>\n    );\n  }\n\n  if (nodeType === NodeType.Object) {\n    return (\n      <>\n        <NodeTypeSelector\n          section={section}\n          onValueChange={(nodeType) =>\n            onNodeTypeChangeProp(\n              getDefaultNode(nodeType, locales) as ContentNode\n            )\n          }\n        />\n        <div className=\"mt-6 ml-10\">\n          <StructureView\n            keyPath={keyPath}\n            section={section}\n            dictionaryLocalId={dictionaryLocalId}\n          />\n        </div>\n      </>\n    );\n  }\n\n  return (\n    <NodeTypeSelector\n      section={section}\n      onValueChange={(nodeType) =>\n        onNodeTypeChangeProp(getDefaultNode(nodeType, locales) as ContentNode)\n      }\n    />\n  );\n};\n\ntype NodeWrapperProps = {\n  sectionKey?: string;\n  dictionaryLocalId: LocalDictionaryId;\n  keyPath: KeyPath[];\n  section: ContentNode;\n};\n\nexport const NodeView: FC<NodeWrapperProps> = ({\n  sectionKey,\n  section,\n  keyPath,\n  dictionaryLocalId,\n}) => {\n  const { focusedContent, setFocusedContentKeyPath } =\n    useFocusUnmergedDictionary();\n  const { renameEditedContent, addEditedContent } = useEditedContentActions();\n\n  const { titleInput, deleteButton } = useIntlayer('structure-view');\n\n  const handleRenameNodeKey = (keyName: string) => {\n    renameEditedContent(dictionaryLocalId, keyName, keyPath);\n    const prevKeyPath: KeyPath[] = keyPath.slice(0, -1);\n    const lastKeyPath: KeyPath = keyPath[keyPath.length - 1];\n    const newKeyPath: KeyPath[] = [\n      ...prevKeyPath,\n      { ...lastKeyPath, key: keyName } as KeyPath,\n    ];\n    setFocusedContentKeyPath(newKeyPath);\n  };\n\n  return (\n    <Container\n      transparency=\"xl\"\n      roundedSize=\"xl\"\n      className=\"w-full min-w-80 gap-2 overflow-auto px-5 py-2\"\n      border\n      borderColor=\"text\"\n      background=\"none\"\n      aria-selected={isSameKeyPath(keyPath, focusedContent?.keyPath ?? [])}\n      onClick={() => setFocusedContentKeyPath(keyPath)}\n    >\n      <div className=\"flex w-full flex-col items-start justify-between gap-3\">\n        {typeof sectionKey === 'string' && (\n          <div className=\"w-full\">\n            <div className=\"flex w-full items-center justify-between gap-10\">\n              <EditableFieldInput\n                name=\"key\"\n                aria-label=\"Key\"\n                placeholder={titleInput.placeholder.value}\n                defaultValue={sectionKey}\n                onSave={(value) => handleRenameNodeKey(value)}\n                variant={InputVariant.INVISIBLE}\n              />\n              <Button\n                label={deleteButton.label.value}\n                variant={ButtonVariant.HOVERABLE}\n                size={ButtonSize.ICON_SM}\n                color={ButtonColor.TEXT}\n                className=\"translate-x-2\"\n                Icon={Trash}\n                onClick={() => {\n                  addEditedContent(dictionaryLocalId, undefined, keyPath);\n\n                  const parentKeyPath: KeyPath[] = keyPath.slice(0, -1);\n                  setFocusedContentKeyPath(parentKeyPath);\n                }}\n              />\n            </div>\n\n            <span className=\"ml-3 text-neutral text-sm\">\n              ( {camelCaseToSentence(sectionKey)} )\n            </span>\n          </div>\n        )}\n        <NodeTypeView\n          keyPath={keyPath}\n          dictionaryLocalId={dictionaryLocalId}\n          section={section}\n          onNodeTypeChange={(content) => {\n            addEditedContent(dictionaryLocalId, content, keyPath);\n          }}\n        />\n      </div>\n    </Container>\n  );\n};\n\ntype ObjectViewProps = {\n  dictionaryLocalId: LocalDictionaryId;\n  keyPath: KeyPath[];\n  section: ContentNode;\n};\n\nexport const ObjectView: FC<ObjectViewProps> = ({\n  section,\n  keyPath,\n  dictionaryLocalId,\n}) => {\n  const { addNodeButton } = useIntlayer('structure-view');\n  const { setFocusedContentKeyPath } = useFocusUnmergedDictionary();\n  const { addEditedContent } = useEditedContentActions();\n\n  if (!section || typeof section !== 'object') {\n    return <div>Not an object</div>;\n  }\n\n  return (\n    <div className=\"flex flex-col gap-2 overflow-y-auto\">\n      <ul className=\"mr-auto flex flex-col gap-4\">\n        {Object.keys(section).map((key) => (\n          <li\n            key={`${JSON.stringify(keyPath)}-object-${key}`}\n            className=\"flex w-full\"\n          >\n            <NodeView\n              sectionKey={key}\n              section={section?.[key as keyof typeof section]}\n              keyPath={[...keyPath, { type: NodeType.Object, key }]}\n              dictionaryLocalId={dictionaryLocalId}\n            />\n          </li>\n        ))}\n      </ul>\n      <Button\n        label={addNodeButton.label.value}\n        variant={ButtonVariant.HOVERABLE}\n        size={ButtonSize.MD}\n        color={ButtonColor.TEXT}\n        Icon={Plus}\n        className=\"flex-1\"\n        onClick={() => {\n          const newKey = 'newKey';\n          const newKeyPath = [\n            ...keyPath,\n            { type: NodeType.Object, key: newKey },\n          ] as KeyPath[];\n          addEditedContent(dictionaryLocalId, '', newKeyPath);\n          setFocusedContentKeyPath(newKeyPath);\n        }}\n      >\n        {addNodeButton.text}\n      </Button>\n    </div>\n  );\n};\n\ntype StructureViewProps = {\n  dictionaryLocalId: LocalDictionaryId;\n  keyPath: KeyPath[];\n  section: ContentNode;\n};\n\nexport const StructureView: FC<StructureViewProps> = ({\n  section,\n  keyPath,\n  dictionaryLocalId,\n}) => {\n  if (\n    !section ||\n    typeof section !== 'object' ||\n    typeof section.nodeType === 'string'\n  ) {\n    return (\n      <NodeView\n        sectionKey={'content'}\n        section={section}\n        keyPath={keyPath}\n        dictionaryLocalId={dictionaryLocalId}\n      />\n    );\n  }\n\n  return (\n    <ObjectView\n      section={section}\n      keyPath={keyPath}\n      dictionaryLocalId={dictionaryLocalId}\n    />\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"StructureView.mjs","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/StructureView/StructureView.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\n  ButtonColor,\n  ButtonSize,\n  ButtonVariant,\n} from '@components/Button';\nimport { Container } from '@components/Container';\nimport { EditableFieldInput } from '@components/EditableField';\nimport { InputVariant } from '@components/Input';\nimport { camelCaseToSentence } from '@intlayer/config/client';\nimport {\n  getDefaultNode,\n  getNodeChildren,\n  getNodeType,\n} from '@intlayer/core/dictionaryManipulator';\nimport { isSameKeyPath } from '@intlayer/core/utils';\nimport {\n  useConfiguration,\n  useEditedContentActions,\n  useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport type { LocalDictionaryId, TypedNode } from '@intlayer/types/dictionary';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport * as NodeTypes from '@intlayer/types/nodeType';\nimport type { ContentNode } from 'intlayer';\nimport { Plus, Trash } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { NodeTypeSelector } from '../NodeTypeSelector';\n\ntype NodeTypeViewProps = {\n  dictionaryLocalId: LocalDictionaryId;\n  keyPath: KeyPath[];\n  section: ContentNode;\n  onNodeTypeChange: (content?: ContentNode) => void;\n};\n\nconst NodeTypeView: FC<NodeTypeViewProps> = ({\n  section,\n  dictionaryLocalId,\n  keyPath,\n  onNodeTypeChange: onNodeTypeChangeProp,\n}) => {\n  const locales = useConfiguration()?.internationalization.locales ?? [];\n  const nodeType = getNodeType(section);\n  const children = getNodeChildren(section);\n\n  const onNodeTypeChange = (content?: ContentNode) => {\n    const transformedContent = getDefaultNode(\n      nodeType,\n      locales,\n      content\n    ) as ContentNode;\n\n    onNodeTypeChangeProp(transformedContent);\n  };\n\n  if (\n    nodeType === NodeTypes.TRANSLATION ||\n    nodeType === NodeTypes.CONDITION ||\n    nodeType === NodeTypes.GENDER ||\n    nodeType === NodeTypes.ENUMERATION\n  ) {\n    const firstKey = Object.keys(\n      (section as unknown as TypedNode)[nodeType as keyof typeof section]\n    )[0];\n    const childrenKeyPath = [\n      ...keyPath,\n      { type: nodeType, key: firstKey },\n    ] as KeyPath[];\n\n    return (\n      <div className=\"flex w-full flex-col gap-1\">\n        <NodeTypeSelector\n          section={section}\n          onValueChange={(nodeType) =>\n            onNodeTypeChangeProp(\n              getDefaultNode(nodeType, locales) as ContentNode\n            )\n          }\n        />\n\n        <NodeTypeView\n          section={children}\n          keyPath={childrenKeyPath}\n          dictionaryLocalId={dictionaryLocalId}\n          onNodeTypeChange={onNodeTypeChange}\n        />\n      </div>\n    );\n  }\n\n  if (nodeType === NodeTypes.ARRAY) {\n    const childrenKeyPath = [...keyPath, { type: nodeType, key: 0 } as KeyPath];\n    return (\n      <div className=\"flex w-full flex-col gap-1\">\n        <NodeTypeSelector\n          section={section}\n          onValueChange={(nodeType) =>\n            onNodeTypeChangeProp(\n              getDefaultNode(nodeType, locales) as ContentNode\n            )\n          }\n        />\n\n        <NodeTypeView\n          section={children}\n          keyPath={childrenKeyPath}\n          dictionaryLocalId={dictionaryLocalId}\n          onNodeTypeChange={onNodeTypeChange}\n        />\n      </div>\n    );\n  }\n\n  if (nodeType === NodeTypes.OBJECT) {\n    return (\n      <>\n        <NodeTypeSelector\n          section={section}\n          onValueChange={(nodeType) =>\n            onNodeTypeChangeProp(\n              getDefaultNode(nodeType, locales) as ContentNode\n            )\n          }\n        />\n        <div className=\"mt-6 ml-10\">\n          <StructureView\n            keyPath={keyPath}\n            section={section}\n            dictionaryLocalId={dictionaryLocalId}\n          />\n        </div>\n      </>\n    );\n  }\n\n  return (\n    <NodeTypeSelector\n      section={section}\n      onValueChange={(nodeType) =>\n        onNodeTypeChangeProp(getDefaultNode(nodeType, locales) as ContentNode)\n      }\n    />\n  );\n};\n\ntype NodeWrapperProps = {\n  sectionKey?: string;\n  dictionaryLocalId: LocalDictionaryId;\n  keyPath: KeyPath[];\n  section: ContentNode;\n};\n\nexport const NodeView: FC<NodeWrapperProps> = ({\n  sectionKey,\n  section,\n  keyPath,\n  dictionaryLocalId,\n}) => {\n  const { focusedContent, setFocusedContentKeyPath } =\n    useFocusUnmergedDictionary();\n  const { renameEditedContent, addEditedContent } = useEditedContentActions();\n\n  const { titleInput, deleteButton } = useIntlayer('structure-view');\n\n  const handleRenameNodeKey = (keyName: string) => {\n    renameEditedContent(dictionaryLocalId, keyName, keyPath);\n    const prevKeyPath: KeyPath[] = keyPath.slice(0, -1);\n    const lastKeyPath: KeyPath = keyPath[keyPath.length - 1];\n    const newKeyPath: KeyPath[] = [\n      ...prevKeyPath,\n      { ...lastKeyPath, key: keyName } as KeyPath,\n    ];\n    setFocusedContentKeyPath(newKeyPath);\n  };\n\n  return (\n    <Container\n      transparency=\"xl\"\n      roundedSize=\"xl\"\n      className=\"w-full min-w-80 gap-2 overflow-auto px-5 py-2\"\n      border\n      borderColor=\"text\"\n      background=\"none\"\n      aria-selected={isSameKeyPath(keyPath, focusedContent?.keyPath ?? [])}\n      onClick={() => setFocusedContentKeyPath(keyPath)}\n    >\n      <div className=\"flex w-full flex-col items-start justify-between gap-3\">\n        {typeof sectionKey === 'string' && (\n          <div className=\"w-full\">\n            <div className=\"flex w-full items-center justify-between gap-10\">\n              <EditableFieldInput\n                name=\"key\"\n                aria-label=\"Key\"\n                placeholder={titleInput.placeholder.value}\n                defaultValue={sectionKey}\n                onSave={(value) => handleRenameNodeKey(value)}\n                variant={InputVariant.INVISIBLE}\n              />\n              <Button\n                label={deleteButton.label.value}\n                variant={ButtonVariant.HOVERABLE}\n                size={ButtonSize.ICON_SM}\n                color={ButtonColor.TEXT}\n                className=\"translate-x-2\"\n                Icon={Trash}\n                onClick={() => {\n                  addEditedContent(dictionaryLocalId, undefined, keyPath);\n\n                  const parentKeyPath: KeyPath[] = keyPath.slice(0, -1);\n                  setFocusedContentKeyPath(parentKeyPath);\n                }}\n              />\n            </div>\n\n            <span className=\"ml-3 text-neutral text-sm\">\n              ( {camelCaseToSentence(sectionKey)} )\n            </span>\n          </div>\n        )}\n        <NodeTypeView\n          keyPath={keyPath}\n          dictionaryLocalId={dictionaryLocalId}\n          section={section}\n          onNodeTypeChange={(content) => {\n            addEditedContent(dictionaryLocalId, content, keyPath);\n          }}\n        />\n      </div>\n    </Container>\n  );\n};\n\ntype ObjectViewProps = {\n  dictionaryLocalId: LocalDictionaryId;\n  keyPath: KeyPath[];\n  section: ContentNode;\n};\n\nexport const ObjectView: FC<ObjectViewProps> = ({\n  section,\n  keyPath,\n  dictionaryLocalId,\n}) => {\n  const { addNodeButton } = useIntlayer('structure-view');\n  const { setFocusedContentKeyPath } = useFocusUnmergedDictionary();\n  const { addEditedContent } = useEditedContentActions();\n\n  if (!section || typeof section !== 'object') {\n    return <div>Not an object</div>;\n  }\n\n  return (\n    <div className=\"flex flex-col gap-2 overflow-y-auto\">\n      <ul className=\"mr-auto flex flex-col gap-4\">\n        {Object.keys(section).map((key) => (\n          <li\n            key={`${JSON.stringify(keyPath)}-object-${key}`}\n            className=\"flex w-full\"\n          >\n            <NodeView\n              sectionKey={key}\n              section={section?.[key as keyof typeof section]}\n              keyPath={[...keyPath, { type: NodeTypes.OBJECT, key }]}\n              dictionaryLocalId={dictionaryLocalId}\n            />\n          </li>\n        ))}\n      </ul>\n      <Button\n        label={addNodeButton.label.value}\n        variant={ButtonVariant.HOVERABLE}\n        size={ButtonSize.MD}\n        color={ButtonColor.TEXT}\n        Icon={Plus}\n        className=\"flex-1\"\n        onClick={() => {\n          const newKey = 'newKey';\n          const newKeyPath = [\n            ...keyPath,\n            { type: NodeTypes.OBJECT, key: newKey },\n          ] as KeyPath[];\n          addEditedContent(dictionaryLocalId, '', newKeyPath);\n          setFocusedContentKeyPath(newKeyPath);\n        }}\n      >\n        {addNodeButton.text}\n      </Button>\n    </div>\n  );\n};\n\ntype StructureViewProps = {\n  dictionaryLocalId: LocalDictionaryId;\n  keyPath: KeyPath[];\n  section: ContentNode;\n};\n\nexport const StructureView: FC<StructureViewProps> = ({\n  section,\n  keyPath,\n  dictionaryLocalId,\n}) => {\n  if (\n    !section ||\n    typeof section !== 'object' ||\n    typeof section.nodeType === 'string'\n  ) {\n    return (\n      <NodeView\n        sectionKey={'content'}\n        section={section}\n        keyPath={keyPath}\n        dictionaryLocalId={dictionaryLocalId}\n      />\n    );\n  }\n\n  return (\n    <ObjectView\n      section={section}\n      keyPath={keyPath}\n      dictionaryLocalId={dictionaryLocalId}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAuCA,MAAM,gBAAuC,EAC3C,SACA,mBACA,SACA,kBAAkB,2BACd;CACJ,MAAM,UAAU,kBAAkB,EAAE,qBAAqB,WAAW,EAAE;CACtE,MAAM,WAAW,YAAY,QAAQ;CACrC,MAAM,WAAW,gBAAgB,QAAQ;CAEzC,MAAM,oBAAoB,YAA0B;AAOlD,uBAN2B,eACzB,UACA,SACA,QACD,CAEuC;;AAG1C,KACE,aAAa,UAAU,eACvB,aAAa,UAAU,aACvB,aAAa,UAAU,UACvB,aAAa,UAAU,aACvB;EACA,MAAM,WAAW,OAAO,KACrB,QAAiC,UACnC,CAAC;EACF,MAAM,kBAAkB,CACtB,GAAG,SACH;GAAE,MAAM;GAAU,KAAK;GAAU,CAClC;AAED,SACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,kBAAD;IACW;IACT,gBAAgB,aACd,qBACE,eAAe,UAAU,QAAQ,CAClC;IAEH,GAEF,oBAAC,cAAD;IACE,SAAS;IACT,SAAS;IACU;IACD;IAClB,EACE;;;AAIV,KAAI,aAAa,UAAU,OAAO;EAChC,MAAM,kBAAkB,CAAC,GAAG,SAAS;GAAE,MAAM;GAAU,KAAK;GAAG,CAAY;AAC3E,SACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,kBAAD;IACW;IACT,gBAAgB,aACd,qBACE,eAAe,UAAU,QAAQ,CAClC;IAEH,GAEF,oBAAC,cAAD;IACE,SAAS;IACT,SAAS;IACU;IACD;IAClB,EACE;;;AAIV,KAAI,aAAa,UAAU,OACzB,QACE,4CACE,oBAAC,kBAAD;EACW;EACT,gBAAgB,aACd,qBACE,eAAe,UAAU,QAAQ,CAClC;EAEH,GACF,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,eAAD;GACW;GACA;GACU;GACnB;EACE,EACL;AAIP,QACE,oBAAC,kBAAD;EACW;EACT,gBAAgB,aACd,qBAAqB,eAAe,UAAU,QAAQ,CAAgB;EAExE;;AAWN,MAAa,YAAkC,EAC7C,YACA,SACA,SACA,wBACI;CACJ,MAAM,EAAE,gBAAgB,6BACtB,4BAA4B;CAC9B,MAAM,EAAE,qBAAqB,qBAAqB,yBAAyB;CAE3E,MAAM,EAAE,YAAY,iBAAiB,YAAY,iBAAiB;CAElE,MAAM,uBAAuB,YAAoB;AAC/C,sBAAoB,mBAAmB,SAAS,QAAQ;EACxD,MAAM,cAAyB,QAAQ,MAAM,GAAG,GAAG;EACnD,MAAM,cAAuB,QAAQ,QAAQ,SAAS;AAKtD,2BAJ8B,CAC5B,GAAG,aACH;GAAE,GAAG;GAAa,KAAK;GAAS,CACjC,CACmC;;AAGtC,QACE,oBAAC,WAAD;EACE,cAAa;EACb,aAAY;EACZ,WAAU;EACV;EACA,aAAY;EACZ,YAAW;EACX,iBAAe,cAAc,SAAS,gBAAgB,WAAW,EAAE,CAAC;EACpE,eAAe,yBAAyB,QAAQ;YAEhD,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,OAAO,eAAe,YACrB,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,oBAAD;MACE,MAAK;MACL,cAAW;MACX,aAAa,WAAW,YAAY;MACpC,cAAc;MACd,SAAS,UAAU,oBAAoB,MAAM;MAC7C,SAAS,aAAa;MACtB,GACF,oBAAC,QAAD;MACE,OAAO,aAAa,MAAM;MAC1B,SAAS,cAAc;MACvB,MAAM,WAAW;MACjB,OAAO,YAAY;MACnB,WAAU;MACV,MAAM;MACN,eAAe;AACb,wBAAiB,mBAAmB,QAAW,QAAQ;AAGvD,gCADiC,QAAQ,MAAM,GAAG,GAAG,CACd;;MAEzC,EACE;QAEN,qBAAC,QAAD;KAAM,WAAU;eAAhB;MAA4C;MACvC,oBAAoB,WAAW;MAAC;MAC9B;OACH;OAER,oBAAC,cAAD;IACW;IACU;IACV;IACT,mBAAmB,YAAY;AAC7B,sBAAiB,mBAAmB,SAAS,QAAQ;;IAEvD,EACE;;EACI;;AAUhB,MAAa,cAAmC,EAC9C,SACA,SACA,wBACI;CACJ,MAAM,EAAE,kBAAkB,YAAY,iBAAiB;CACvD,MAAM,EAAE,6BAA6B,4BAA4B;CACjE,MAAM,EAAE,qBAAqB,yBAAyB;AAEtD,KAAI,CAAC,WAAW,OAAO,YAAY,SACjC,QAAO,oBAAC,OAAD,YAAK,iBAAmB;AAGjC,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,MAAD;GAAI,WAAU;aACX,OAAO,KAAK,QAAQ,CAAC,KAAK,QACzB,oBAAC,MAAD;IAEE,WAAU;cAEV,oBAAC,UAAD;KACE,YAAY;KACZ,SAAS,UAAU;KACnB,SAAS,CAAC,GAAG,SAAS;MAAE,MAAM,UAAU;MAAQ;MAAK,CAAC;KACnC;KACnB;IACC,EATE,GAAG,KAAK,UAAU,QAAQ,CAAC,UAAU,MASvC,CACL;GACC,GACL,oBAAC,QAAD;GACE,OAAO,cAAc,MAAM;GAC3B,SAAS,cAAc;GACvB,MAAM,WAAW;GACjB,OAAO,YAAY;GACnB,MAAM;GACN,WAAU;GACV,eAAe;IACb,MAAM,SAAS;IACf,MAAM,aAAa,CACjB,GAAG,SACH;KAAE,MAAM,UAAU;KAAQ,KAAK;KAAQ,CACxC;AACD,qBAAiB,mBAAmB,IAAI,WAAW;AACnD,6BAAyB,WAAW;;aAGrC,cAAc;GACR,EACL;;;AAUV,MAAa,iBAAyC,EACpD,SACA,SACA,wBACI;AACJ,KACE,CAAC,WACD,OAAO,YAAY,YACnB,OAAO,QAAQ,aAAa,SAE5B,QACE,oBAAC,UAAD;EACE,YAAY;EACH;EACA;EACU;EACnB;AAIN,QACE,oBAAC,YAAD;EACW;EACA;EACU;EACnB"}

package/dist/esm/components/DictionaryFieldEditor/StructureView/structureView.content.mjs

@@ -1,2 +1,101 @@
-import{t as e}from"intlayer";const t={key:`structure-view`,content:{titleInput:{placeholder:e({en:`Enter the key of your node`,"en-GB":`Enter the key of your node`,fr:`Entrez la clé de votre nœud`,es:`Ingrese la clave de su nodo`,de:`Geben Sie den Schlüssel Ihres Knotens ein`,ja:`ノードのキーを入力してください`,ko:`노드의 키를 입력하세요`,zh:`输入您节点的键`,it:`Inserisci la chiave del tuo nodo`,pt:`Insira a chave do seu nó`,hi:`अपनी नोड की कुंजी दर्ज करें`,ar:`أدخل مفتاح العقدة الخاص بك`,ru:`Введите ключ вашего узла`,tr:`Düğümünüzün anahtarını girin`,pl:`Wprowadź klucz węzła`,id:`Masukkan kunci node Anda`,vi:`Nhập key của node của bạn`,uk:`Введіть ключ вашого вузла`})},deleteButton:{label:e({en:`Remove node from section`,"en-GB":`Remove node from section`,fr:`Supprimer le nœud de la section`,es:`Eliminar el nodo de la sección`,de:`Knoten aus dem Abschnitt entfernen`,ja:`セクションからノードを削除`,ko:`섹션에서 노드를 제거`,zh:`从部分中移除节点`,it:`Rimuovi nodo dalla sezione`,pt:`Remover nó da seção`,hi:`सेक्शन से नोड हटाएं`,ar:`إزالة العقدة من القسم`,ru:`Удалить узел из секции`,tr:`Düğümü bölümden kaldır`,pl:`Usuń węzeł z sekcji`,id:`Hapus node dari bagian`,vi:`Xóa node khỏi section`,uk:`Видалити вузол з розділу`})},addNodeButton:{label:e({en:`Click to add a new node`,"en-GB":`Click to add a new node`,fr:`Cliquez pour ajouter un nouveau nœud`,es:`Haga clic para agregar un nuevo nodo`,de:`Klicken, um einen neuen Knoten hinzuzufügen`,ja:`新しいノードを追加するにはクリックしてください`,ko:`새 노드를 추가하려면 클릭하세요`,zh:`点击添加新节点`,it:`Fai clic per aggiungere un nuovo nodo`,pt:`Clique para adicionar um novo nó`,hi:`नया नोड जोड़ने के लिए क्लिक करें`,ar:`انقر لإضافة عقدة جديدة`,ru:`Нажмите, чтобы добавить новый узел`,tr:`Yeni bir düğüm eklemek için tıklayın`,pl:`Kliknij, aby dodać nowy węzeł`,id:`Klik untuk menambahkan node baru`,vi:`Nhấp để thêm node mới`,uk:`Натисніть, щоб додати новий вузол`}),text:e({en:`Add a new node`,"en-GB":`Add a new node`,fr:`Ajouter un nouveau nœud`,es:`Agregar un nuevo nodo`,de:`Neuen Knoten hinzufügen`,ja:`新しいノードを追加`,ko:`새 노드 추가`,zh:`添加新节点`,it:`Aggiungi un nuovo nodo`,pt:`Adicionar um novo nó`,hi:`नया नोड जोड़ें`,ar:`إضافة عقدة جديدة`,ru:`Добавить новый узел`,tr:`Yeni bir düğüm ekle`,pl:`Dodaj nowy węzeł`,id:`Tambahkan node baru`,vi:`Thêm node mới`,uk:`Додати новий вузол`})}},title:`Structure view`,description:`Interface content for managing nodes within a structured view, including actions to add, remove, and identify nodes by key.`,tags:[`form`,`dictionary editor`,`structure management`]};export{t as default,t as structureViewContent};
+import { t } from "intlayer";
+
+//#region src/components/DictionaryFieldEditor/StructureView/structureView.content.ts
+const structureViewContent = {
+	key: "structure-view",
+	content: {
+		titleInput: { placeholder: t({
+			en: "Enter the key of your node",
+			"en-GB": "Enter the key of your node",
+			fr: "Entrez la clé de votre nœud",
+			es: "Ingrese la clave de su nodo",
+			de: "Geben Sie den Schlüssel Ihres Knotens ein",
+			ja: "ノードのキーを入力してください",
+			ko: "노드의 키를 입력하세요",
+			zh: "输入您节点的键",
+			it: "Inserisci la chiave del tuo nodo",
+			pt: "Insira a chave do seu nó",
+			hi: "अपनी नोड की कुंजी दर्ज करें",
+			ar: "أدخل مفتاح العقدة الخاص بك",
+			ru: "Введите ключ вашего узла",
+			tr: "Düğümünüzün anahtarını girin",
+			pl: "Wprowadź klucz węzła",
+			id: "Masukkan kunci node Anda",
+			vi: "Nhập key của node của bạn",
+			uk: "Введіть ключ вашого вузла"
+		}) },
+		deleteButton: { label: t({
+			en: "Remove node from section",
+			"en-GB": "Remove node from section",
+			fr: "Supprimer le nœud de la section",
+			es: "Eliminar el nodo de la sección",
+			de: "Knoten aus dem Abschnitt entfernen",
+			ja: "セクションからノードを削除",
+			ko: "섹션에서 노드를 제거",
+			zh: "从部分中移除节点",
+			it: "Rimuovi nodo dalla sezione",
+			pt: "Remover nó da seção",
+			hi: "सेक्शन से नोड हटाएं",
+			ar: "إزالة العقدة من القسم",
+			ru: "Удалить узел из секции",
+			tr: "Düğümü bölümden kaldır",
+			pl: "Usuń węzeł z sekcji",
+			id: "Hapus node dari bagian",
+			vi: "Xóa node khỏi section",
+			uk: "Видалити вузол з розділу"
+		}) },
+		addNodeButton: {
+			label: t({
+				en: "Click to add a new node",
+				"en-GB": "Click to add a new node",
+				fr: "Cliquez pour ajouter un nouveau nœud",
+				es: "Haga clic para agregar un nuevo nodo",
+				de: "Klicken, um einen neuen Knoten hinzuzufügen",
+				ja: "新しいノードを追加するにはクリックしてください",
+				ko: "새 노드를 추가하려면 클릭하세요",
+				zh: "点击添加新节点",
+				it: "Fai clic per aggiungere un nuovo nodo",
+				pt: "Clique para adicionar um novo nó",
+				hi: "नया नोड जोड़ने के लिए क्लिक करें",
+				ar: "انقر لإضافة عقدة جديدة",
+				ru: "Нажмите, чтобы добавить новый узел",
+				tr: "Yeni bir düğüm eklemek için tıklayın",
+				pl: "Kliknij, aby dodać nowy węzeł",
+				id: "Klik untuk menambahkan node baru",
+				vi: "Nhấp để thêm node mới",
+				uk: "Натисніть, щоб додати новий вузол"
+			}),
+			text: t({
+				en: "Add a new node",
+				"en-GB": "Add a new node",
+				fr: "Ajouter un nouveau nœud",
+				es: "Agregar un nuevo nodo",
+				de: "Neuen Knoten hinzufügen",
+				ja: "新しいノードを追加",
+				ko: "새 노드 추가",
+				zh: "添加新节点",
+				it: "Aggiungi un nuovo nodo",
+				pt: "Adicionar um novo nó",
+				hi: "नया नोड जोड़ें",
+				ar: "إضافة عقدة جديدة",
+				ru: "Добавить новый узел",
+				tr: "Yeni bir düğüm ekle",
+				pl: "Dodaj nowy węzeł",
+				id: "Tambahkan node baru",
+				vi: "Thêm node mới",
+				uk: "Додати новий вузол"
+			})
+		}
+	},
+	title: "Structure view",
+	description: "Interface content for managing nodes within a structured view, including actions to add, remove, and identify nodes by key.",
+	tags: [
+		"form",
+		"dictionary editor",
+		"structure management"
+	]
+};
+
+//#endregion
+export { structureViewContent as default, structureViewContent };
 //# sourceMappingURL=structureView.content.mjs.map

package/dist/esm/components/DictionaryFieldEditor/StructureView/structureView.content.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"structureView.content.mjs","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/StructureView/structureView.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nexport const structureViewContent = {\n  key: 'structure-view',\n  content: {\n    titleInput: {\n      placeholder: t({\n        en: 'Enter the key of your node',\n        'en-GB': 'Enter the key of your node',\n        fr: 'Entrez la clé de votre nœud',\n        es: 'Ingrese la clave de su nodo',\n        de: 'Geben Sie den Schlüssel Ihres Knotens ein',\n        ja: 'ノードのキーを入力してください',\n        ko: '노드의 키를 입력하세요',\n        zh: '输入您节点的键',\n        it: 'Inserisci la chiave del tuo nodo',\n        pt: 'Insira a chave do seu nó',\n        hi: 'अपनी नोड की कुंजी दर्ज करें',\n        ar: 'أدخل مفتاح العقدة الخاص بك',\n        ru: 'Введите ключ вашего узла',\n        tr: 'Düğümünüzün anahtarını girin',\n        pl: 'Wprowadź klucz węzła',\n        id: 'Masukkan kunci node Anda',\n        vi: 'Nhập key của node của bạn',\n        uk: 'Введіть ключ вашого вузла',\n      }),\n    },\n    deleteButton: {\n      label: t({\n        en: 'Remove node from section',\n        'en-GB': 'Remove node from section',\n        fr: 'Supprimer le nœud de la section',\n        es: 'Eliminar el nodo de la sección',\n        de: 'Knoten aus dem Abschnitt entfernen',\n        ja: 'セクションからノードを削除',\n        ko: '섹션에서 노드를 제거',\n        zh: '从部分中移除节点',\n        it: 'Rimuovi nodo dalla sezione',\n        pt: 'Remover nó da seção',\n        hi: 'सेक्शन से नोड हटाएं',\n        ar: 'إزالة العقدة من القسم',\n        ru: 'Удалить узел из секции',\n        tr: 'Düğümü bölümden kaldır',\n        pl: 'Usuń węzeł z sekcji',\n        id: 'Hapus node dari bagian',\n        vi: 'Xóa node khỏi section',\n        uk: 'Видалити вузол з розділу',\n      }),\n    },\n    addNodeButton: {\n      label: t({\n        en: 'Click to add a new node',\n        'en-GB': 'Click to add a new node',\n        fr: 'Cliquez pour ajouter un nouveau nœud',\n        es: 'Haga clic para agregar un nuevo nodo',\n        de: 'Klicken, um einen neuen Knoten hinzuzufügen',\n        ja: '新しいノードを追加するにはクリックしてください',\n        ko: '새 노드를 추가하려면 클릭하세요',\n        zh: '点击添加新节点',\n        it: 'Fai clic per aggiungere un nuovo nodo',\n        pt: 'Clique para adicionar um novo nó',\n        hi: 'नया नोड जोड़ने के लिए क्लिक करें',\n        ar: 'انقر لإضافة عقدة جديدة',\n        ru: 'Нажмите, чтобы добавить новый узел',\n        tr: 'Yeni bir düğüm eklemek için tıklayın',\n        pl: 'Kliknij, aby dodać nowy węzeł',\n        id: 'Klik untuk menambahkan node baru',\n        vi: 'Nhấp để thêm node mới',\n        uk: 'Натисніть, щоб додати новий вузол',\n      }),\n      text: t({\n        en: 'Add a new node',\n        'en-GB': 'Add a new node',\n        fr: 'Ajouter un nouveau nœud',\n        es: 'Agregar un nuevo nodo',\n        de: 'Neuen Knoten hinzufügen',\n        ja: '新しいノードを追加',\n        ko: '새 노드 추가',\n        zh: '添加新节点',\n        it: 'Aggiungi un nuovo nodo',\n        pt: 'Adicionar um novo nó',\n        hi: 'नया नोड जोड़ें',\n        ar: 'إضافة عقدة جديدة',\n        ru: 'Добавить новый узел',\n        tr: 'Yeni bir düğüm ekle',\n        pl: 'Dodaj nowy węzeł',\n        id: 'Tambahkan node baru',\n        vi: 'Thêm node mới',\n        uk: 'Додати новий вузол',\n      }),\n    },\n  },\n  title: 'Structure view',\n  description:\n    'Interface content for managing nodes within a structured view, including actions to add, remove, and identify nodes by key.',\n  tags: ['form', 'dictionary editor', 'structure management'],\n} satisfies Dictionary;\n\nexport default structureViewContent;\n"],"mappings":"6BAEA,MAAa,EAAuB,CAClC,IAAK,iBACL,QAAS,CACP,WAAY,CACV,YAAa,EAAE,CACb,GAAI,6BACJ,QAAS,6BACT,GAAI,8BACJ,GAAI,8BACJ,GAAI,4CACJ,GAAI,kBACJ,GAAI,eACJ,GAAI,UACJ,GAAI,mCACJ,GAAI,2BACJ,GAAI,8BACJ,GAAI,6BACJ,GAAI,2BACJ,GAAI,+BACJ,GAAI,uBACJ,GAAI,2BACJ,GAAI,4BACJ,GAAI,4BACL,CAAC,CACH,CACD,aAAc,CACZ,MAAO,EAAE,CACP,GAAI,2BACJ,QAAS,2BACT,GAAI,kCACJ,GAAI,iCACJ,GAAI,qCACJ,GAAI,gBACJ,GAAI,cACJ,GAAI,WACJ,GAAI,6BACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,wBACJ,GAAI,yBACJ,GAAI,yBACJ,GAAI,sBACJ,GAAI,yBACJ,GAAI,wBACJ,GAAI,2BACL,CAAC,CACH,CACD,cAAe,CACb,MAAO,EAAE,CACP,GAAI,0BACJ,QAAS,0BACT,GAAI,uCACJ,GAAI,uCACJ,GAAI,8CACJ,GAAI,0BACJ,GAAI,oBACJ,GAAI,UACJ,GAAI,wCACJ,GAAI,mCACJ,GAAI,mCACJ,GAAI,yBACJ,GAAI,qCACJ,GAAI,uCACJ,GAAI,gCACJ,GAAI,mCACJ,GAAI,wBACJ,GAAI,oCACL,CAAC,CACF,KAAM,EAAE,CACN,GAAI,iBACJ,QAAS,iBACT,GAAI,0BACJ,GAAI,wBACJ,GAAI,0BACJ,GAAI,YACJ,GAAI,UACJ,GAAI,QACJ,GAAI,yBACJ,GAAI,uBACJ,GAAI,iBACJ,GAAI,mBACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,mBACJ,GAAI,sBACJ,GAAI,gBACJ,GAAI,qBACL,CAAC,CACH,CACF,CACD,MAAO,iBACP,YACE,8HACF,KAAM,CAAC,OAAQ,oBAAqB,uBAAuB,CAC5D"}
+{"version":3,"file":"structureView.content.mjs","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/StructureView/structureView.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nexport const structureViewContent = {\n  key: 'structure-view',\n  content: {\n    titleInput: {\n      placeholder: t({\n        en: 'Enter the key of your node',\n        'en-GB': 'Enter the key of your node',\n        fr: 'Entrez la clé de votre nœud',\n        es: 'Ingrese la clave de su nodo',\n        de: 'Geben Sie den Schlüssel Ihres Knotens ein',\n        ja: 'ノードのキーを入力してください',\n        ko: '노드의 키를 입력하세요',\n        zh: '输入您节点的键',\n        it: 'Inserisci la chiave del tuo nodo',\n        pt: 'Insira a chave do seu nó',\n        hi: 'अपनी नोड की कुंजी दर्ज करें',\n        ar: 'أدخل مفتاح العقدة الخاص بك',\n        ru: 'Введите ключ вашего узла',\n        tr: 'Düğümünüzün anahtarını girin',\n        pl: 'Wprowadź klucz węzła',\n        id: 'Masukkan kunci node Anda',\n        vi: 'Nhập key của node của bạn',\n        uk: 'Введіть ключ вашого вузла',\n      }),\n    },\n    deleteButton: {\n      label: t({\n        en: 'Remove node from section',\n        'en-GB': 'Remove node from section',\n        fr: 'Supprimer le nœud de la section',\n        es: 'Eliminar el nodo de la sección',\n        de: 'Knoten aus dem Abschnitt entfernen',\n        ja: 'セクションからノードを削除',\n        ko: '섹션에서 노드를 제거',\n        zh: '从部分中移除节点',\n        it: 'Rimuovi nodo dalla sezione',\n        pt: 'Remover nó da seção',\n        hi: 'सेक्शन से नोड हटाएं',\n        ar: 'إزالة العقدة من القسم',\n        ru: 'Удалить узел из секции',\n        tr: 'Düğümü bölümden kaldır',\n        pl: 'Usuń węzeł z sekcji',\n        id: 'Hapus node dari bagian',\n        vi: 'Xóa node khỏi section',\n        uk: 'Видалити вузол з розділу',\n      }),\n    },\n    addNodeButton: {\n      label: t({\n        en: 'Click to add a new node',\n        'en-GB': 'Click to add a new node',\n        fr: 'Cliquez pour ajouter un nouveau nœud',\n        es: 'Haga clic para agregar un nuevo nodo',\n        de: 'Klicken, um einen neuen Knoten hinzuzufügen',\n        ja: '新しいノードを追加するにはクリックしてください',\n        ko: '새 노드를 추가하려면 클릭하세요',\n        zh: '点击添加新节点',\n        it: 'Fai clic per aggiungere un nuovo nodo',\n        pt: 'Clique para adicionar um novo nó',\n        hi: 'नया नोड जोड़ने के लिए क्लिक करें',\n        ar: 'انقر لإضافة عقدة جديدة',\n        ru: 'Нажмите, чтобы добавить новый узел',\n        tr: 'Yeni bir düğüm eklemek için tıklayın',\n        pl: 'Kliknij, aby dodać nowy węzeł',\n        id: 'Klik untuk menambahkan node baru',\n        vi: 'Nhấp để thêm node mới',\n        uk: 'Натисніть, щоб додати новий вузол',\n      }),\n      text: t({\n        en: 'Add a new node',\n        'en-GB': 'Add a new node',\n        fr: 'Ajouter un nouveau nœud',\n        es: 'Agregar un nuevo nodo',\n        de: 'Neuen Knoten hinzufügen',\n        ja: '新しいノードを追加',\n        ko: '새 노드 추가',\n        zh: '添加新节点',\n        it: 'Aggiungi un nuovo nodo',\n        pt: 'Adicionar um novo nó',\n        hi: 'नया नोड जोड़ें',\n        ar: 'إضافة عقدة جديدة',\n        ru: 'Добавить новый узел',\n        tr: 'Yeni bir düğüm ekle',\n        pl: 'Dodaj nowy węzeł',\n        id: 'Tambahkan node baru',\n        vi: 'Thêm node mới',\n        uk: 'Додати новий вузол',\n      }),\n    },\n  },\n  title: 'Structure view',\n  description:\n    'Interface content for managing nodes within a structured view, including actions to add, remove, and identify nodes by key.',\n  tags: ['form', 'dictionary editor', 'structure management'],\n} satisfies Dictionary;\n\nexport default structureViewContent;\n"],"mappings":";;;AAEA,MAAa,uBAAuB;CAClC,KAAK;CACL,SAAS;EACP,YAAY,EACV,aAAa,EAAE;GACb,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC,EACH;EACD,cAAc,EACZ,OAAO,EAAE;GACP,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC,EACH;EACD,eAAe;GACb,OAAO,EAAE;IACP,IAAI;IACJ,SAAS;IACT,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,CAAC;GACF,MAAM,EAAE;IACN,IAAI;IACJ,SAAS;IACT,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,CAAC;GACH;EACF;CACD,OAAO;CACP,aACE;CACF,MAAM;EAAC;EAAQ;EAAqB;EAAuB;CAC5D"}

package/dist/esm/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.mjs

@@ -1,2 +1,74 @@
-"use client";import{Container as e}from"../../Container/index.mjs";import{Button as t,ButtonColor as n,ButtonSize as r,ButtonTextAlign as i,ButtonVariant as a}from"../../Button/Button.mjs";import{DropDown as o}from"../../DropDown/index.mjs";import{useVersionSwitcher as s}from"./VersionSwitcherContext.mjs";import{MoveVertical as c}from"lucide-react";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";import{useIntlayer as f}from"react-intlayer";const p=`version-switcher`,m=({panelProps:m})=>{let{switchTo:h,versionSwitcherLabel:g,versionListLabel:_}=f(`version-switcher`),{selectedVersion:v,versions:y,setSelectedVersion:b}=s();return y.length===0?u(l,{}):u(`div`,{className:`rounded-xl border border-text text-text transition-colors`,"aria-label":_.value,children:d(o,{identifier:p,children:[u(o.Trigger,{identifier:p,children:d(`div`,{className:`flex w-full items-center justify-between`,children:[u(`div`,{className:`px-2`,children:v??`LTS`}),u(c,{className:`w-5 self-center`})]})}),u(o.Panel,{identifier:p,isOverable:!0,isFocusable:!0,className:`right-0 left-auto`,...m,children:u(e,{className:`max-h-[80vh] min-w-28`,separator:`y`,role:`listbox`,transparency:`xs`,border:!0,roundedSize:`2xl`,borderColor:`text`,"aria-label":g.value,children:u(`ol`,{className:`divide-y divide-dashed divide-text/20 overflow-y-auto p-1`,children:y.reverse().map(e=>u(`li`,{className:`px-1.5 py-1`,children:u(t,{onClick:()=>b(e),label:`${h} v${e}`,isActive:v===e,variant:a.HOVERABLE,color:n.TEXT,isFullWidth:!0,textAlign:i.LEFT,size:r.SM,children:u(`div`,{className:`flex flex-1 flex-row items-center justify-between gap-3 px-2 py-1 text-neutral text-sm`,children:e})})},e))})})})]})})};export{m as VersionSwitcher};
+'use client';
+
+import { Container } from "../../Container/index.mjs";
+import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant } from "../../Button/Button.mjs";
+import { DropDown } from "../../DropDown/index.mjs";
+import { useVersionSwitcher } from "./VersionSwitcherContext.mjs";
+import { MoveVertical } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useIntlayer } from "react-intlayer";
+
+//#region src/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.tsx
+const DROPDOWN_IDENTIFIER = "version-switcher";
+const VersionSwitcher = ({ panelProps }) => {
+	const { switchTo, versionSwitcherLabel, versionListLabel } = useIntlayer("version-switcher");
+	const { selectedVersion, versions, setSelectedVersion } = useVersionSwitcher();
+	if (versions.length === 0) return /* @__PURE__ */ jsx(Fragment, {});
+	return /* @__PURE__ */ jsx("div", {
+		className: "rounded-xl border border-text text-text transition-colors",
+		"aria-label": versionListLabel.value,
+		children: /* @__PURE__ */ jsxs(DropDown, {
+			identifier: DROPDOWN_IDENTIFIER,
+			children: [/* @__PURE__ */ jsx(DropDown.Trigger, {
+				identifier: DROPDOWN_IDENTIFIER,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex w-full items-center justify-between",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "px-2",
+						children: selectedVersion ?? "LTS"
+					}), /* @__PURE__ */ jsx(MoveVertical, { className: "w-5 self-center" })]
+				})
+			}), /* @__PURE__ */ jsx(DropDown.Panel, {
+				identifier: DROPDOWN_IDENTIFIER,
+				isOverable: true,
+				isFocusable: true,
+				className: "right-0 left-auto",
+				...panelProps,
+				children: /* @__PURE__ */ jsx(Container, {
+					className: "max-h-[80vh] min-w-28",
+					separator: "y",
+					role: "listbox",
+					transparency: "xs",
+					border: true,
+					roundedSize: "2xl",
+					borderColor: "text",
+					"aria-label": versionSwitcherLabel.value,
+					children: /* @__PURE__ */ jsx("ol", {
+						className: "divide-y divide-dashed divide-text/20 overflow-y-auto p-1",
+						children: versions.reverse().map((version) => /* @__PURE__ */ jsx("li", {
+							className: "px-1.5 py-1",
+							children: /* @__PURE__ */ jsx(Button, {
+								onClick: () => setSelectedVersion(version),
+								label: `${switchTo} v${version}`,
+								isActive: selectedVersion === version,
+								variant: ButtonVariant.HOVERABLE,
+								color: ButtonColor.TEXT,
+								isFullWidth: true,
+								textAlign: ButtonTextAlign.LEFT,
+								size: ButtonSize.SM,
+								children: /* @__PURE__ */ jsx("div", {
+									className: "flex flex-1 flex-row items-center justify-between gap-3 px-2 py-1 text-neutral text-sm",
+									children: version
+								})
+							})
+						}, version))
+					})
+				})
+			})]
+		})
+	});
+};
+
+//#endregion
+export { VersionSwitcher };
 //# sourceMappingURL=VersionSwitcher.mjs.map

package/dist/esm/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VersionSwitcher.mjs","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\n  ButtonColor,\n  ButtonSize,\n  ButtonTextAlign,\n  ButtonVariant,\n} from '@components/Button';\nimport { Container } from '@components/Container';\nimport { DropDown, type PanelProps } from '@components/DropDown';\nimport { MoveVertical } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { useVersionSwitcher } from './VersionSwitcherContext';\n\nexport type VersionSwitcherProps = {\n  panelProps?: Omit<PanelProps, 'identifier'>;\n};\n\nconst DROPDOWN_IDENTIFIER = 'version-switcher';\n\nexport const VersionSwitcher: FC<VersionSwitcherProps> = ({ panelProps }) => {\n  const { switchTo, versionSwitcherLabel, versionListLabel } =\n    useIntlayer('version-switcher');\n  const { selectedVersion, versions, setSelectedVersion } =\n    useVersionSwitcher();\n\n  if (versions.length === 0) {\n    return <></>;\n  }\n\n  return (\n    <div\n      className=\"rounded-xl border border-text text-text transition-colors\"\n      aria-label={versionListLabel.value}\n    >\n      <DropDown identifier={DROPDOWN_IDENTIFIER}>\n        <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER}>\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"px-2\">{selectedVersion ?? 'LTS'}</div>\n            <MoveVertical className=\"w-5 self-center\" />\n          </div>\n        </DropDown.Trigger>\n\n        <DropDown.Panel\n          identifier={DROPDOWN_IDENTIFIER}\n          isOverable\n          isFocusable\n          className=\"right-0 left-auto\"\n          {...panelProps}\n        >\n          <Container\n            className=\"max-h-[80vh] min-w-28\"\n            separator=\"y\"\n            role=\"listbox\"\n            transparency=\"xs\"\n            border\n            roundedSize=\"2xl\"\n            borderColor=\"text\"\n            aria-label={versionSwitcherLabel.value}\n          >\n            <ol className=\"divide-y divide-dashed divide-text/20 overflow-y-auto p-1\">\n              {versions.reverse().map((version) => (\n                <li className=\"px-1.5 py-1\" key={version}>\n                  <Button\n                    onClick={() => setSelectedVersion(version)}\n                    label={`${switchTo} v${version}`}\n                    isActive={selectedVersion === version}\n                    variant={ButtonVariant.HOVERABLE}\n                    color={ButtonColor.TEXT}\n                    isFullWidth\n                    textAlign={ButtonTextAlign.LEFT}\n                    size={ButtonSize.SM}\n                  >\n                    <div className=\"flex flex-1 flex-row items-center justify-between gap-3 px-2 py-1 text-neutral text-sm\">\n                      {version}\n                    </div>\n                  </Button>\n                </li>\n              ))}\n            </ol>\n          </Container>\n        </DropDown.Panel>\n      </DropDown>\n    </div>\n  );\n};\n"],"mappings":"4cAoBA,MAAM,EAAsB,mBAEf,GAA6C,CAAE,gBAAiB,CAC3E,GAAM,CAAE,WAAU,uBAAsB,oBACtC,EAAY,mBAAmB,CAC3B,CAAE,kBAAiB,WAAU,sBACjC,GAAoB,CAMtB,OAJI,EAAS,SAAW,EACf,EAAA,EAAA,EAAK,CAAA,CAIZ,EAAC,MAAD,CACE,UAAU,4DACV,aAAY,EAAiB,eAE7B,EAAC,EAAD,CAAU,WAAY,WAAtB,CACE,EAAC,EAAS,QAAV,CAAkB,WAAY,WAC5B,EAAC,MAAD,CAAK,UAAU,oDAAf,CACE,EAAC,MAAD,CAAK,UAAU,gBAAQ,GAAmB,MAAY,CAAA,CACtD,EAAC,EAAD,CAAc,UAAU,kBAAoB,CAAA,CACxC,GACW,CAAA,CAEnB,EAAC,EAAS,MAAV,CACE,WAAY,EACZ,WAAA,GACA,YAAA,GACA,UAAU,oBACV,GAAI,WAEJ,EAAC,EAAD,CACE,UAAU,wBACV,UAAU,IACV,KAAK,UACL,aAAa,KACb,OAAA,GACA,YAAY,MACZ,YAAY,OACZ,aAAY,EAAqB,eAEjC,EAAC,KAAD,CAAI,UAAU,qEACX,EAAS,SAAS,CAAC,IAAK,GACvB,EAAC,KAAD,CAAI,UAAU,uBACZ,EAAC,EAAD,CACE,YAAe,EAAmB,EAAQ,CAC1C,MAAO,GAAG,EAAS,IAAI,IACvB,SAAU,IAAoB,EAC9B,QAAS,EAAc,UACvB,MAAO,EAAY,KACnB,YAAA,GACA,UAAW,EAAgB,KAC3B,KAAM,EAAW,YAEjB,EAAC,MAAD,CAAK,UAAU,kGACZ,EACG,CAAA,CACC,CAAA,CACN,CAf4B,EAe5B,CACL,CACC,CAAA,CACK,CAAA,CACG,CAAA,CACR,GACP,CAAA"}
+{"version":3,"file":"VersionSwitcher.mjs","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\n  ButtonColor,\n  ButtonSize,\n  ButtonTextAlign,\n  ButtonVariant,\n} from '@components/Button';\nimport { Container } from '@components/Container';\nimport { DropDown, type PanelProps } from '@components/DropDown';\nimport { MoveVertical } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { useVersionSwitcher } from './VersionSwitcherContext';\n\nexport type VersionSwitcherProps = {\n  panelProps?: Omit<PanelProps, 'identifier'>;\n};\n\nconst DROPDOWN_IDENTIFIER = 'version-switcher';\n\nexport const VersionSwitcher: FC<VersionSwitcherProps> = ({ panelProps }) => {\n  const { switchTo, versionSwitcherLabel, versionListLabel } =\n    useIntlayer('version-switcher');\n  const { selectedVersion, versions, setSelectedVersion } =\n    useVersionSwitcher();\n\n  if (versions.length === 0) {\n    return <></>;\n  }\n\n  return (\n    <div\n      className=\"rounded-xl border border-text text-text transition-colors\"\n      aria-label={versionListLabel.value}\n    >\n      <DropDown identifier={DROPDOWN_IDENTIFIER}>\n        <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER}>\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"px-2\">{selectedVersion ?? 'LTS'}</div>\n            <MoveVertical className=\"w-5 self-center\" />\n          </div>\n        </DropDown.Trigger>\n\n        <DropDown.Panel\n          identifier={DROPDOWN_IDENTIFIER}\n          isOverable\n          isFocusable\n          className=\"right-0 left-auto\"\n          {...panelProps}\n        >\n          <Container\n            className=\"max-h-[80vh] min-w-28\"\n            separator=\"y\"\n            role=\"listbox\"\n            transparency=\"xs\"\n            border\n            roundedSize=\"2xl\"\n            borderColor=\"text\"\n            aria-label={versionSwitcherLabel.value}\n          >\n            <ol className=\"divide-y divide-dashed divide-text/20 overflow-y-auto p-1\">\n              {versions.reverse().map((version) => (\n                <li className=\"px-1.5 py-1\" key={version}>\n                  <Button\n                    onClick={() => setSelectedVersion(version)}\n                    label={`${switchTo} v${version}`}\n                    isActive={selectedVersion === version}\n                    variant={ButtonVariant.HOVERABLE}\n                    color={ButtonColor.TEXT}\n                    isFullWidth\n                    textAlign={ButtonTextAlign.LEFT}\n                    size={ButtonSize.SM}\n                  >\n                    <div className=\"flex flex-1 flex-row items-center justify-between gap-3 px-2 py-1 text-neutral text-sm\">\n                      {version}\n                    </div>\n                  </Button>\n                </li>\n              ))}\n            </ol>\n          </Container>\n        </DropDown.Panel>\n      </DropDown>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAoBA,MAAM,sBAAsB;AAE5B,MAAa,mBAA6C,EAAE,iBAAiB;CAC3E,MAAM,EAAE,UAAU,sBAAsB,qBACtC,YAAY,mBAAmB;CACjC,MAAM,EAAE,iBAAiB,UAAU,uBACjC,oBAAoB;AAEtB,KAAI,SAAS,WAAW,EACtB,QAAO,gCAAK;AAGd,QACE,oBAAC,OAAD;EACE,WAAU;EACV,cAAY,iBAAiB;YAE7B,qBAAC,UAAD;GAAU,YAAY;aAAtB,CACE,oBAAC,SAAS,SAAV;IAAkB,YAAY;cAC5B,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAK,WAAU;gBAAQ,mBAAmB;MAAY,GACtD,oBAAC,cAAD,EAAc,WAAU,mBAAoB,EACxC;;IACW,GAEnB,oBAAC,SAAS,OAAV;IACE,YAAY;IACZ;IACA;IACA,WAAU;IACV,GAAI;cAEJ,oBAAC,WAAD;KACE,WAAU;KACV,WAAU;KACV,MAAK;KACL,cAAa;KACb;KACA,aAAY;KACZ,aAAY;KACZ,cAAY,qBAAqB;eAEjC,oBAAC,MAAD;MAAI,WAAU;gBACX,SAAS,SAAS,CAAC,KAAK,YACvB,oBAAC,MAAD;OAAI,WAAU;iBACZ,oBAAC,QAAD;QACE,eAAe,mBAAmB,QAAQ;QAC1C,OAAO,GAAG,SAAS,IAAI;QACvB,UAAU,oBAAoB;QAC9B,SAAS,cAAc;QACvB,OAAO,YAAY;QACnB;QACA,WAAW,gBAAgB;QAC3B,MAAM,WAAW;kBAEjB,oBAAC,OAAD;SAAK,WAAU;mBACZ;SACG;QACC;OACN,EAf4B,QAe5B,CACL;MACC;KACK;IACG,EACR;;EACP"}

package/dist/esm/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcherContext.mjs

@@ -1,2 +1,28 @@
-"use client";import{usePersistedStore as e}from"../../../hooks/usePersistedStore.mjs";import{createContext as t,useContext as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=t({versions:[],selectedVersion:null,setSelectedVersion:()=>{}}),a=()=>n(i),o=({versions:t,defaultSelectedVersion:n,children:a})=>{let[o,s]=e(`version-selector`,n);return r(i,{value:{versions:t,selectedVersion:o,setSelectedVersion:s},children:a})};export{o as VersionSwitcherProvider,a as useVersionSwitcher};
+'use client';
+
+import { usePersistedStore } from "../../../hooks/usePersistedStore.mjs";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcherContext.tsx
+const VersionSwitcherContext = createContext({
+	versions: [],
+	selectedVersion: null,
+	setSelectedVersion: () => {}
+});
+const useVersionSwitcher = () => useContext(VersionSwitcherContext);
+const VersionSwitcherProvider = ({ versions, defaultSelectedVersion, children }) => {
+	const [selectedVersion, setSelectedVersion] = usePersistedStore("version-selector", defaultSelectedVersion);
+	return /* @__PURE__ */ jsx(VersionSwitcherContext, {
+		value: {
+			versions,
+			selectedVersion,
+			setSelectedVersion
+		},
+		children
+	});
+};
+
+//#endregion
+export { VersionSwitcherProvider, useVersionSwitcher };
 //# sourceMappingURL=VersionSwitcherContext.mjs.map

package/dist/esm/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcherContext.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VersionSwitcherContext.mjs","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcherContext.tsx"],"sourcesContent":["'use client';\n\nimport { usePersistedStore } from '@hooks/usePersistedStore';\nimport {\n  createContext,\n  type Dispatch,\n  type FC,\n  type PropsWithChildren,\n  type SetStateAction,\n  useContext,\n} from 'react';\n\ntype VersionSwitcherContextProps = {\n  versions: string[];\n  selectedVersion: string | null;\n  setSelectedVersion: Dispatch<SetStateAction<string | null>>;\n};\n\nconst VersionSwitcherContext = createContext<VersionSwitcherContextProps>({\n  versions: [],\n  selectedVersion: null,\n  setSelectedVersion: () => {},\n});\n\nexport const useVersionSwitcher = () => useContext(VersionSwitcherContext);\n\ntype VersionSwitcherProviderProps = {\n  versions: string[];\n  defaultSelectedVersion?: string;\n};\n\nexport const VersionSwitcherProvider: FC<\n  PropsWithChildren<VersionSwitcherProviderProps>\n> = ({ versions, defaultSelectedVersion, children }) => {\n  const [selectedVersion, setSelectedVersion] = usePersistedStore<\n    string | null\n  >('version-selector', defaultSelectedVersion);\n\n  return (\n    <VersionSwitcherContext\n      value={{\n        versions,\n        selectedVersion,\n        setSelectedVersion,\n      }}\n    >\n      {children}\n    </VersionSwitcherContext>\n  );\n};\n"],"mappings":"oLAkBA,MAAM,EAAyB,EAA2C,CACxE,SAAU,EAAE,CACZ,gBAAiB,KACjB,uBAA0B,GAC3B,CAAC,CAEW,MAA2B,EAAW,EAAuB,CAO7D,GAER,CAAE,WAAU,yBAAwB,cAAe,CACtD,GAAM,CAAC,EAAiB,GAAsB,EAE5C,mBAAoB,EAAuB,CAE7C,OACE,EAAC,EAAD,CACE,MAAO,CACL,WACA,kBACA,qBACD,CAEA,WACsB,CAAA"}
+{"version":3,"file":"VersionSwitcherContext.mjs","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcherContext.tsx"],"sourcesContent":["'use client';\n\nimport { usePersistedStore } from '@hooks/usePersistedStore';\nimport {\n  createContext,\n  type Dispatch,\n  type FC,\n  type PropsWithChildren,\n  type SetStateAction,\n  useContext,\n} from 'react';\n\ntype VersionSwitcherContextProps = {\n  versions: string[];\n  selectedVersion: string | null;\n  setSelectedVersion: Dispatch<SetStateAction<string | null>>;\n};\n\nconst VersionSwitcherContext = createContext<VersionSwitcherContextProps>({\n  versions: [],\n  selectedVersion: null,\n  setSelectedVersion: () => {},\n});\n\nexport const useVersionSwitcher = () => useContext(VersionSwitcherContext);\n\ntype VersionSwitcherProviderProps = {\n  versions: string[];\n  defaultSelectedVersion?: string;\n};\n\nexport const VersionSwitcherProvider: FC<\n  PropsWithChildren<VersionSwitcherProviderProps>\n> = ({ versions, defaultSelectedVersion, children }) => {\n  const [selectedVersion, setSelectedVersion] = usePersistedStore<\n    string | null\n  >('version-selector', defaultSelectedVersion);\n\n  return (\n    <VersionSwitcherContext\n      value={{\n        versions,\n        selectedVersion,\n        setSelectedVersion,\n      }}\n    >\n      {children}\n    </VersionSwitcherContext>\n  );\n};\n"],"mappings":";;;;;;;AAkBA,MAAM,yBAAyB,cAA2C;CACxE,UAAU,EAAE;CACZ,iBAAiB;CACjB,0BAA0B;CAC3B,CAAC;AAEF,MAAa,2BAA2B,WAAW,uBAAuB;AAO1E,MAAa,2BAER,EAAE,UAAU,wBAAwB,eAAe;CACtD,MAAM,CAAC,iBAAiB,sBAAsB,kBAE5C,oBAAoB,uBAAuB;AAE7C,QACE,oBAAC,wBAAD;EACE,OAAO;GACL;GACA;GACA;GACD;EAEA;EACsB"}

package/dist/esm/components/DictionaryFieldEditor/VersionSwitcherDropDown/index.mjs

@@ -1 +1,4 @@
-import{VersionSwitcherProvider as e,useVersionSwitcher as t}from"./VersionSwitcherContext.mjs";import{VersionSwitcher as n}from"./VersionSwitcher.mjs";export{n as VersionSwitcher,e as VersionSwitcherProvider,t as useVersionSwitcher};
+import { VersionSwitcherProvider, useVersionSwitcher } from "./VersionSwitcherContext.mjs";
+import { VersionSwitcher } from "./VersionSwitcher.mjs";
+
+export { VersionSwitcher, VersionSwitcherProvider, useVersionSwitcher };