@intlayer/design-system 3.0.3 → 3.1.0

package/dist/components/DictionaryEditor/DictionaryEditor.mjs

@@ -1,34 +1,40 @@
 "use client";
 import { j as jsxRuntimeExports } from "../../jsx-runtime-BgSF1HG2.js";
 import { N as NodeWrapper } from "../../index-pLq_417z.js";
+import { useEditedContentStore } from "./useEditedContentStore.mjs";
+import { useEditionPanelStore } from "./useEditionPanelStore.mjs";
 import { ValidDictionaryChangeButtons } from "./ValidDictionaryChangeButtons.mjs";
 const DictionaryEditor = ({
   dictionary,
-  onContentChange,
-  focusedKeyPath,
-  onCancelEdition,
-  onValidEdition,
   ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col justify-between gap-2", children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-    NodeWrapper,
-    {
-      ...props,
-      keyPath: [],
-      focusedKeyPath,
-      section: dictionary.content,
-      onContentChange: (content) => onContentChange(content.keyPath, content.newValue)
-    }
-  ) }),
-  /* @__PURE__ */ jsxRuntimeExports.jsx(
-    ValidDictionaryChangeButtons,
-    {
-      onCancelEdition,
-      onValidEdition,
-      editedContent: props.editedContent
-    }
-  )
-] });
+}) => {
+  const { addEditedContent, editedContent } = useEditedContentStore((s) => ({
+    addEditedContent: s.addEditedContent,
+    editedContent: s.editedContent
+  }));
+  const { focusedContent, setFocusedContentKeyPath } = useEditionPanelStore(
+    (s) => ({
+      focusedContent: s.focusedContent,
+      setFocusedContentKeyPath: s.setFocusedContentKeyPath
+    })
+  );
+  const focusedKeyPath = focusedContent?.keyPath;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col justify-between gap-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      NodeWrapper,
+      {
+        ...props,
+        keyPath: [],
+        editedContent: editedContent.content,
+        focusedKeyPath,
+        section: dictionary.content,
+        onContentChange: (content) => addEditedContent(dictionary.key, content.newValue, content.keyPath),
+        onFocusKeyPath: setFocusedContentKeyPath
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ValidDictionaryChangeButtons, { dictionary })
+  ] });
+};
 export {
   DictionaryEditor
 };

package/dist/components/DictionaryEditor/DictionaryEditor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DictionaryEditor.mjs","sources":["../../../src/components/DictionaryEditor/DictionaryEditor.tsx"],"sourcesContent":["'use client';\n\nimport type { Locales } from '@intlayer/config/client';\nimport type { Dictionary, KeyPath } from '@intlayer/core';\nimport type { FC } from 'react';\nimport { NodeWrapper } from './NodeWrapper';\nimport { ValidDictionaryChangeButtons } from './ValidDictionaryChangeButtons';\n\ntype DictionaryEditorProps = {\n  dictionary: Dictionary;\n  onContentChange: (keyPath: KeyPath[], newValue: string) => void;\n  onValidEdition: () => void;\n  onCancelEdition: () => void;\n  locale: Locales;\n  editedContent: Dictionary;\n  focusedKeyPath?: KeyPath[];\n  onFocusKeyPath: (keyPath: KeyPath[]) => void;\n  onClickEdit?: (keyPath: KeyPath[]) => void;\n};\n\nexport const DictionaryEditor: FC<DictionaryEditorProps> = ({\n  dictionary,\n  onContentChange,\n  focusedKeyPath,\n  onCancelEdition,\n  onValidEdition,\n  ...props\n}) => (\n  <div className=\"flex h-full flex-col justify-between gap-2\">\n    <div>\n      <NodeWrapper\n        {...props}\n        keyPath={[]}\n        focusedKeyPath={focusedKeyPath}\n        section={dictionary.content}\n        onContentChange={(content) =>\n          onContentChange(content.keyPath, content.newValue)\n        }\n      />\n    </div>\n    <ValidDictionaryChangeButtons\n      onCancelEdition={onCancelEdition}\n      onValidEdition={onValidEdition}\n      editedContent={props.editedContent}\n    />\n  </div>\n);\n"],"names":["jsxs","jsx"],"mappings":";;;;AAoBO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,kCAAA,KAAC,OAAI,EAAA,WAAU,8CACb,UAAA;AAAA,EAAAC,sCAAC,OACC,EAAA,UAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,SAAS,CAAC;AAAA,MACV;AAAA,MACA,SAAS,WAAW;AAAA,MACpB,iBAAiB,CAAC,YAChB,gBAAgB,QAAQ,SAAS,QAAQ,QAAQ;AAAA,IAAA;AAAA,EAAA,GAGvD;AAAA,EACAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAe,MAAM;AAAA,IAAA;AAAA,EACvB;AAAA,EACF,CAAA;"}
+{"version":3,"file":"DictionaryEditor.mjs","sources":["../../../src/components/DictionaryEditor/DictionaryEditor.tsx"],"sourcesContent":["'use client';\n\nimport type { Locales } from '@intlayer/config/client';\nimport type { Dictionary, KeyPath } from '@intlayer/core';\nimport type { FC } from 'react';\nimport { NodeWrapper } from './NodeWrapper';\nimport { useEditedContentStore } from './useEditedContentStore';\nimport { useEditionPanelStore } from './useEditionPanelStore';\nimport { ValidDictionaryChangeButtons } from './ValidDictionaryChangeButtons';\n\ntype DictionaryEditorProps = {\n  dictionary: Dictionary;\n  locale: Locales;\n  onClickEdit?: (keyPath: KeyPath[]) => void;\n};\n\nexport const DictionaryEditor: FC<DictionaryEditorProps> = ({\n  dictionary,\n  ...props\n}) => {\n  const { addEditedContent, editedContent } = useEditedContentStore((s) => ({\n    addEditedContent: s.addEditedContent,\n    editedContent: s.editedContent,\n  }));\n  const { focusedContent, setFocusedContentKeyPath } = useEditionPanelStore(\n    (s) => ({\n      focusedContent: s.focusedContent,\n      setFocusedContentKeyPath: s.setFocusedContentKeyPath,\n    })\n  );\n\n  const focusedKeyPath = focusedContent?.keyPath;\n\n  return (\n    <div className=\"flex h-full flex-col justify-between gap-2\">\n      <div>\n        <NodeWrapper\n          {...props}\n          keyPath={[]}\n          editedContent={editedContent.content}\n          focusedKeyPath={focusedKeyPath}\n          section={dictionary.content}\n          onContentChange={(content) =>\n            addEditedContent(dictionary.key, content.newValue, content.keyPath)\n          }\n          onFocusKeyPath={setFocusedContentKeyPath}\n        />\n      </div>\n      <ValidDictionaryChangeButtons dictionary={dictionary} />\n    </div>\n  );\n};\n"],"names":["jsxs","jsx"],"mappings":";;;;;;AAgBO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,kBAAkB,cAAkB,IAAA,sBAAsB,CAAC,OAAO;AAAA,IACxE,kBAAkB,EAAE;AAAA,IACpB,eAAe,EAAE;AAAA,EACjB,EAAA;AACI,QAAA,EAAE,gBAAgB,yBAAA,IAA6B;AAAA,IACnD,CAAC,OAAO;AAAA,MACN,gBAAgB,EAAE;AAAA,MAClB,0BAA0B,EAAE;AAAA,IAAA;AAAA,EAC9B;AAGF,QAAM,iBAAiB,gBAAgB;AAGrC,SAAAA,kCAAA,KAAC,OAAI,EAAA,WAAU,8CACb,UAAA;AAAA,IAAAC,sCAAC,OACC,EAAA,UAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,SAAS,CAAC;AAAA,QACV,eAAe,cAAc;AAAA,QAC7B;AAAA,QACA,SAAS,WAAW;AAAA,QACpB,iBAAiB,CAAC,YAChB,iBAAiB,WAAW,KAAK,QAAQ,UAAU,QAAQ,OAAO;AAAA,QAEpE,gBAAgB;AAAA,MAAA;AAAA,IAAA,GAEpB;AAAA,IACAA,sCAAC,gCAA6B,YAAwB;AAAA,EACxD,EAAA,CAAA;AAEJ;"}

package/dist/components/DictionaryEditor/ItemLayout.cjs

@@ -26,6 +26,7 @@ const ItemLayout = ({
       components_Accordion_Accordion.Accordion,
       {
         isOpen: isSelected,
+        label: title,
         identifier: `accordion_${title}`,
         header: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex w-full", children: [
           /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-between", children: [

package/dist/components/DictionaryEditor/ItemLayout.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ItemLayout.cjs","sources":["../../../src/components/DictionaryEditor/ItemLayout.tsx"],"sourcesContent":["import type { ReactNode, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Accordion } from '../Accordion';\n\ninterface ItemWrapperProps extends HTMLAttributes<HTMLDivElement> {\n  level: number;\n  children: ReactNode;\n  title: string;\n  description: string;\n  rightParam?: ReactNode;\n  isSelected: boolean;\n}\n\nexport const ItemLayout: FC<ItemWrapperProps> = ({\n  level,\n  title,\n  description,\n  children,\n  rightParam,\n  isSelected,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'rounded-md p-2 transition',\n      'hover:bg-card/30 dark:hover:bg-card-dark/30 [&:has(.section:hover)]:bg-transparent',\n      level === 2 && 'hover:bg-card/30 dark:hover:bg-card-dark/30',\n      level >= 3 && '',\n      isSelected === true && 'bg-card/40 dark:bg-card-dark/40'\n    )}\n    {...props}\n  >\n    <Accordion\n      isOpen={isSelected}\n      identifier={`accordion_${title}`}\n      header={\n        <div className=\"flex w-full\">\n          <div className=\"flex w-full items-center justify-between\">\n            <span\n              className={cn(\n                level === 0 && 'text-2xl',\n                level === 1 && 'text-xl',\n                level === 2 && 'text-lg',\n                level >= 3 && 'text-base'\n              )}\n            >\n              {title}\n            </span>\n            {rightParam && (\n              <div className=\"flex w-auto items-center justify-between p-3\">\n                {rightParam}\n              </div>\n            )}\n          </div>\n          {description && (\n            <p className=\"text-card pl-3 text-sm\">{description}</p>\n          )}\n        </div>\n      }\n    >\n      {children}\n    </Accordion>\n  </div>\n);\n"],"names":["jsx","cn","Accordion","jsxs"],"mappings":";;;;;AAaO,MAAM,aAAmC,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAA,kBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAA;AAAA,MACT;AAAA,MACA;AAAA,MACA,UAAU,KAAK;AAAA,MACf,SAAS,KAAK;AAAA,MACd,eAAe,QAAQ;AAAA,IACzB;AAAA,IACC,GAAG;AAAA,IAEJ,UAAAD,2BAAA,kBAAA;AAAA,MAACE,+BAAA;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,YAAY,aAAa,KAAK;AAAA,QAC9B,QACEC,2BAAA,kBAAA,KAAC,OAAI,EAAA,WAAU,eACb,UAAA;AAAA,UAACA,2BAAAA,kBAAAA,KAAA,OAAA,EAAI,WAAU,4CACb,UAAA;AAAA,YAAAH,2BAAA,kBAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWC,SAAA;AAAA,kBACT,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK;AAAA,kBACf,SAAS,KAAK;AAAA,gBAChB;AAAA,gBAEC,UAAA;AAAA,cAAA;AAAA,YACH;AAAA,YACC,cACCD,2BAAA,kBAAA,IAAC,OAAI,EAAA,WAAU,gDACZ,UACH,YAAA;AAAA,UAAA,GAEJ;AAAA,UACC,eACCA,2BAAA,kBAAA,IAAC,KAAE,EAAA,WAAU,0BAA0B,UAAY,aAAA;AAAA,QAAA,GAEvD;AAAA,QAGD;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AACF;;"}
+{"version":3,"file":"ItemLayout.cjs","sources":["../../../src/components/DictionaryEditor/ItemLayout.tsx"],"sourcesContent":["import type { ReactNode, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Accordion } from '../Accordion';\n\ninterface ItemWrapperProps extends HTMLAttributes<HTMLDivElement> {\n  level: number;\n  children: ReactNode;\n  title: string;\n  description: string;\n  rightParam?: ReactNode;\n  isSelected: boolean;\n}\n\nexport const ItemLayout: FC<ItemWrapperProps> = ({\n  level,\n  title,\n  description,\n  children,\n  rightParam,\n  isSelected,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'rounded-md p-2 transition',\n      'hover:bg-card/30 dark:hover:bg-card-dark/30 [&:has(.section:hover)]:bg-transparent',\n      level === 2 && 'hover:bg-card/30 dark:hover:bg-card-dark/30',\n      level >= 3 && '',\n      isSelected === true && 'bg-card/40 dark:bg-card-dark/40'\n    )}\n    {...props}\n  >\n    <Accordion\n      isOpen={isSelected}\n      label={title}\n      identifier={`accordion_${title}`}\n      header={\n        <div className=\"flex w-full\">\n          <div className=\"flex w-full items-center justify-between\">\n            <span\n              className={cn(\n                level === 0 && 'text-2xl',\n                level === 1 && 'text-xl',\n                level === 2 && 'text-lg',\n                level >= 3 && 'text-base'\n              )}\n            >\n              {title}\n            </span>\n            {rightParam && (\n              <div className=\"flex w-auto items-center justify-between p-3\">\n                {rightParam}\n              </div>\n            )}\n          </div>\n          {description && (\n            <p className=\"text-card pl-3 text-sm\">{description}</p>\n          )}\n        </div>\n      }\n    >\n      {children}\n    </Accordion>\n  </div>\n);\n"],"names":["jsx","cn","Accordion","jsxs"],"mappings":";;;;;AAaO,MAAM,aAAmC,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAA,kBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAA;AAAA,MACT;AAAA,MACA;AAAA,MACA,UAAU,KAAK;AAAA,MACf,SAAS,KAAK;AAAA,MACd,eAAe,QAAQ;AAAA,IACzB;AAAA,IACC,GAAG;AAAA,IAEJ,UAAAD,2BAAA,kBAAA;AAAA,MAACE,+BAAA;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,YAAY,aAAa,KAAK;AAAA,QAC9B,QACEC,2BAAA,kBAAA,KAAC,OAAI,EAAA,WAAU,eACb,UAAA;AAAA,UAACA,2BAAAA,kBAAAA,KAAA,OAAA,EAAI,WAAU,4CACb,UAAA;AAAA,YAAAH,2BAAA,kBAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWC,SAAA;AAAA,kBACT,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK;AAAA,kBACf,SAAS,KAAK;AAAA,gBAChB;AAAA,gBAEC,UAAA;AAAA,cAAA;AAAA,YACH;AAAA,YACC,cACCD,2BAAA,kBAAA,IAAC,OAAI,EAAA,WAAU,gDACZ,UACH,YAAA;AAAA,UAAA,GAEJ;AAAA,UACC,eACCA,2BAAA,kBAAA,IAAC,KAAE,EAAA,WAAU,0BAA0B,UAAY,aAAA;AAAA,QAAA,GAEvD;AAAA,QAGD;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AACF;;"}

package/dist/components/DictionaryEditor/ItemLayout.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode, FC, HTMLAttributes } from 'react';
-
 interface ItemWrapperProps extends HTMLAttributes<HTMLDivElement> {
     level: number;
     children: ReactNode;

package/dist/components/DictionaryEditor/ItemLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemLayout.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryEditor/ItemLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI3D,UAAU,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,gBAAgB,CAkD3C,CAAC"}
+{"version":3,"file":"ItemLayout.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryEditor/ItemLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI3D,UAAU,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,gBAAgB,CAmD3C,CAAC"}

package/dist/components/DictionaryEditor/ItemLayout.mjs

@@ -24,6 +24,7 @@ const ItemLayout = ({
       Accordion,
       {
         isOpen: isSelected,
+        label: title,
         identifier: `accordion_${title}`,
         header: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-full", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-between", children: [

package/dist/components/DictionaryEditor/ItemLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ItemLayout.mjs","sources":["../../../src/components/DictionaryEditor/ItemLayout.tsx"],"sourcesContent":["import type { ReactNode, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Accordion } from '../Accordion';\n\ninterface ItemWrapperProps extends HTMLAttributes<HTMLDivElement> {\n  level: number;\n  children: ReactNode;\n  title: string;\n  description: string;\n  rightParam?: ReactNode;\n  isSelected: boolean;\n}\n\nexport const ItemLayout: FC<ItemWrapperProps> = ({\n  level,\n  title,\n  description,\n  children,\n  rightParam,\n  isSelected,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'rounded-md p-2 transition',\n      'hover:bg-card/30 dark:hover:bg-card-dark/30 [&:has(.section:hover)]:bg-transparent',\n      level === 2 && 'hover:bg-card/30 dark:hover:bg-card-dark/30',\n      level >= 3 && '',\n      isSelected === true && 'bg-card/40 dark:bg-card-dark/40'\n    )}\n    {...props}\n  >\n    <Accordion\n      isOpen={isSelected}\n      identifier={`accordion_${title}`}\n      header={\n        <div className=\"flex w-full\">\n          <div className=\"flex w-full items-center justify-between\">\n            <span\n              className={cn(\n                level === 0 && 'text-2xl',\n                level === 1 && 'text-xl',\n                level === 2 && 'text-lg',\n                level >= 3 && 'text-base'\n              )}\n            >\n              {title}\n            </span>\n            {rightParam && (\n              <div className=\"flex w-auto items-center justify-between p-3\">\n                {rightParam}\n              </div>\n            )}\n          </div>\n          {description && (\n            <p className=\"text-card pl-3 text-sm\">{description}</p>\n          )}\n        </div>\n      }\n    >\n      {children}\n    </Accordion>\n  </div>\n);\n"],"names":["jsx","jsxs"],"mappings":";;;AAaO,MAAM,aAAmC,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA,UAAU,KAAK;AAAA,MACf,SAAS,KAAK;AAAA,MACd,eAAe,QAAQ;AAAA,IACzB;AAAA,IACC,GAAG;AAAA,IAEJ,UAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,YAAY,aAAa,KAAK;AAAA,QAC9B,QACEC,kCAAA,KAAC,OAAI,EAAA,WAAU,eACb,UAAA;AAAA,UAACA,kCAAAA,KAAA,OAAA,EAAI,WAAU,4CACb,UAAA;AAAA,YAAAD,kCAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACT,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK;AAAA,kBACf,SAAS,KAAK;AAAA,gBAChB;AAAA,gBAEC,UAAA;AAAA,cAAA;AAAA,YACH;AAAA,YACC,cACCA,kCAAA,IAAC,OAAI,EAAA,WAAU,gDACZ,UACH,YAAA;AAAA,UAAA,GAEJ;AAAA,UACC,eACCA,kCAAA,IAAC,KAAE,EAAA,WAAU,0BAA0B,UAAY,aAAA;AAAA,QAAA,GAEvD;AAAA,QAGD;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AACF;"}
+{"version":3,"file":"ItemLayout.mjs","sources":["../../../src/components/DictionaryEditor/ItemLayout.tsx"],"sourcesContent":["import type { ReactNode, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Accordion } from '../Accordion';\n\ninterface ItemWrapperProps extends HTMLAttributes<HTMLDivElement> {\n  level: number;\n  children: ReactNode;\n  title: string;\n  description: string;\n  rightParam?: ReactNode;\n  isSelected: boolean;\n}\n\nexport const ItemLayout: FC<ItemWrapperProps> = ({\n  level,\n  title,\n  description,\n  children,\n  rightParam,\n  isSelected,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'rounded-md p-2 transition',\n      'hover:bg-card/30 dark:hover:bg-card-dark/30 [&:has(.section:hover)]:bg-transparent',\n      level === 2 && 'hover:bg-card/30 dark:hover:bg-card-dark/30',\n      level >= 3 && '',\n      isSelected === true && 'bg-card/40 dark:bg-card-dark/40'\n    )}\n    {...props}\n  >\n    <Accordion\n      isOpen={isSelected}\n      label={title}\n      identifier={`accordion_${title}`}\n      header={\n        <div className=\"flex w-full\">\n          <div className=\"flex w-full items-center justify-between\">\n            <span\n              className={cn(\n                level === 0 && 'text-2xl',\n                level === 1 && 'text-xl',\n                level === 2 && 'text-lg',\n                level >= 3 && 'text-base'\n              )}\n            >\n              {title}\n            </span>\n            {rightParam && (\n              <div className=\"flex w-auto items-center justify-between p-3\">\n                {rightParam}\n              </div>\n            )}\n          </div>\n          {description && (\n            <p className=\"text-card pl-3 text-sm\">{description}</p>\n          )}\n        </div>\n      }\n    >\n      {children}\n    </Accordion>\n  </div>\n);\n"],"names":["jsx","jsxs"],"mappings":";;;AAaO,MAAM,aAAmC,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA,UAAU,KAAK;AAAA,MACf,SAAS,KAAK;AAAA,MACd,eAAe,QAAQ;AAAA,IACzB;AAAA,IACC,GAAG;AAAA,IAEJ,UAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,YAAY,aAAa,KAAK;AAAA,QAC9B,QACEC,kCAAA,KAAC,OAAI,EAAA,WAAU,eACb,UAAA;AAAA,UAACA,kCAAAA,KAAA,OAAA,EAAI,WAAU,4CACb,UAAA;AAAA,YAAAD,kCAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACT,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK;AAAA,kBACf,SAAS,KAAK;AAAA,gBAChB;AAAA,gBAEC,UAAA;AAAA,cAAA;AAAA,YACH;AAAA,YACC,cACCA,kCAAA,IAAC,OAAI,EAAA,WAAU,gDACZ,UACH,YAAA;AAAA,UAAA,GAEJ;AAAA,UACC,eACCA,kCAAA,IAAC,KAAE,EAAA,WAAU,0BAA0B,UAAY,aAAA;AAAA,QAAA,GAEvD;AAAA,QAGD;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AACF;"}

package/dist/components/DictionaryEditor/NodeWrapper/ArrayWrapper.d.ts

@@ -1,7 +1,6 @@
 import { DictionaryValue } from '@intlayer/core';
 import { FC } from 'react';
 import { NodeWrapperProps } from './index';
-
 type ArrayWrapperProps = Omit<NodeWrapperProps, 'section'> & {
     section: DictionaryValue[];
 };

package/dist/components/DictionaryEditor/NodeWrapper/EnumerationWrapper.d.ts

@@ -1,7 +1,6 @@
 import { EnumerationContent, DictionaryValue } from '@intlayer/core';
 import { FC } from 'react';
 import { NodeWrapperProps } from './index';
-
 type EnumerationWrapperProps = Omit<NodeWrapperProps, 'section'> & {
     section: EnumerationContent<DictionaryValue>;
 };

package/dist/components/DictionaryEditor/NodeWrapper/NestedObjectWrapper.d.ts

@@ -1,7 +1,6 @@
 import { DictionaryValue } from '@intlayer/core';
 import { FC } from 'react';
 import { NodeWrapperProps } from './index';
-
 type NestedObjectWrapperProps = Omit<NodeWrapperProps, 'section'> & {
     section: Record<string, DictionaryValue>;
 };

package/dist/components/DictionaryEditor/NodeWrapper/StringWrapper.cjs

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../../jsx-runtime-DvCoRj5u.cjs");
+require("../../EditableField/EditableFieldInput.cjs");
+const components_EditableField_EditableFieldTextArea = require("../../EditableField/EditableFieldTextArea.cjs");
 const utils_cn = require("../../../utils/cn.cjs");
 const utils_dictionary = require("../../../utils/dictionary.cjs");
-const components_ContentEditor_ContentEditorTextArea = require("../../ContentEditor/ContentEditorTextArea.cjs");
 const StringWrapper = ({
   keyPath,
   section,
@@ -24,7 +25,7 @@ const StringWrapper = ({
     "button",
     {
       className: utils_cn.cn(
-        "w-full rounded-md p-2 transition",
+        "w-full rounded-md p-2 text-left transition",
         "hover:bg-card/30 dark:hover:bg-card-dark/30 [&:has(.section:hover)]:bg-transparent",
         level === 2 && "hover:bg-card/30 dark:hover:bg-card-dark/30",
         level >= 3 && ""
@@ -34,10 +35,11 @@ const StringWrapper = ({
         onFocusKeyPath(keyPath);
       },
       children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-        components_ContentEditor_ContentEditorTextArea.ContentEditorTextArea,
+        components_EditableField_EditableFieldTextArea.EditableFieldTextArea,
         {
-          onContentChange: (newValue) => onContentChange({ keyPath, newValue }),
-          children: `${content}`
+          defaultValue: content,
+          onSave: (newValue) => onContentChange({ keyPath, newValue }),
+          onCancel: () => null
         }
       )
     }

package/dist/components/DictionaryEditor/NodeWrapper/StringWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"StringWrapper.cjs","sources":["../../../../src/components/DictionaryEditor/NodeWrapper/StringWrapper.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { cn } from '../../../utils/cn';\nimport { getDictionaryValueByKeyPath } from '../../../utils/dictionary';\nimport { ContentEditorTextArea } from '../../ContentEditor/ContentEditorTextArea';\nimport type { NodeWrapperProps } from './index';\n\ntype StringWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n  section: string;\n};\n\nexport const StringWrapper: FC<StringWrapperProps> = ({\n  keyPath,\n  section,\n  editedContent,\n  onContentChange,\n  onFocusKeyPath,\n}) => {\n  const editedContentValue = getDictionaryValueByKeyPath(\n    editedContent,\n    keyPath\n  );\n\n  if (editedContentValue && typeof editedContentValue !== 'string') {\n    return <>Error loading section</>;\n  }\n\n  const level = keyPath.length;\n\n  const content = editedContentValue ?? section;\n\n  return (\n    <button\n      className={cn(\n        'w-full rounded-md p-2 transition',\n        'hover:bg-card/30 dark:hover:bg-card-dark/30 [&:has(.section:hover)]:bg-transparent',\n        level === 2 && 'hover:bg-card/30 dark:hover:bg-card-dark/30',\n        level >= 3 && ''\n      )}\n      onClick={(e) => {\n        e.stopPropagation();\n        onFocusKeyPath(keyPath);\n      }}\n    >\n      <ContentEditorTextArea\n        onContentChange={(newValue) => onContentChange({ keyPath, newValue })}\n      >\n        {`${content}`}\n      </ContentEditorTextArea>\n    </button>\n  );\n};\n"],"names":["getDictionaryValueByKeyPath","jsx","cn","ContentEditorTextArea"],"mappings":";;;;;;AAUO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAqBA,iBAAA;AAAA,IACzB;AAAA,IACA;AAAA,EAAA;AAGE,MAAA,sBAAsB,OAAO,uBAAuB,UAAU;AAChE,qGAAS,UAAqB,wBAAA,CAAA;AAAA,EAChC;AAEA,QAAM,QAAQ,QAAQ;AAEtB,QAAM,UAAU,sBAAsB;AAGpC,SAAAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA;AAAA,QACT;AAAA,QACA;AAAA,QACA,UAAU,KAAK;AAAA,QACf,SAAS,KAAK;AAAA,MAChB;AAAA,MACA,SAAS,CAAC,MAAM;AACd,UAAE,gBAAgB;AAClB,uBAAe,OAAO;AAAA,MACxB;AAAA,MAEA,UAAAD,2BAAA,kBAAA;AAAA,QAACE,+CAAA;AAAA,QAAA;AAAA,UACC,iBAAiB,CAAC,aAAa,gBAAgB,EAAE,SAAS,UAAU;AAAA,UAEnE,aAAG,OAAO;AAAA,QAAA;AAAA,MACb;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"StringWrapper.cjs","sources":["../../../../src/components/DictionaryEditor/NodeWrapper/StringWrapper.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { EditableFieldTextArea } from '../..//EditableField';\nimport { cn } from '../../../utils/cn';\nimport { getDictionaryValueByKeyPath } from '../../../utils/dictionary';\nimport type { NodeWrapperProps } from './index';\n\ntype StringWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n  section: string;\n};\n\nexport const StringWrapper: FC<StringWrapperProps> = ({\n  keyPath,\n  section,\n  editedContent,\n  onContentChange,\n  onFocusKeyPath,\n}) => {\n  const editedContentValue = getDictionaryValueByKeyPath(\n    editedContent,\n    keyPath\n  );\n\n  if (editedContentValue && typeof editedContentValue !== 'string') {\n    return <>Error loading section</>;\n  }\n\n  const level = keyPath.length;\n\n  const content = editedContentValue ?? section;\n\n  return (\n    <button\n      className={cn(\n        'w-full rounded-md p-2 text-left transition',\n        'hover:bg-card/30 dark:hover:bg-card-dark/30 [&:has(.section:hover)]:bg-transparent',\n        level === 2 && 'hover:bg-card/30 dark:hover:bg-card-dark/30',\n        level >= 3 && ''\n      )}\n      onClick={(e) => {\n        e.stopPropagation();\n        onFocusKeyPath(keyPath);\n      }}\n    >\n      <EditableFieldTextArea\n        defaultValue={content}\n        onSave={(newValue) => onContentChange({ keyPath, newValue })}\n        onCancel={() => null}\n      />\n    </button>\n  );\n};\n"],"names":["getDictionaryValueByKeyPath","jsx","cn","EditableFieldTextArea"],"mappings":";;;;;;;AAUO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAqBA,iBAAA;AAAA,IACzB;AAAA,IACA;AAAA,EAAA;AAGE,MAAA,sBAAsB,OAAO,uBAAuB,UAAU;AAChE,qGAAS,UAAqB,wBAAA,CAAA;AAAA,EAChC;AAEA,QAAM,QAAQ,QAAQ;AAEtB,QAAM,UAAU,sBAAsB;AAGpC,SAAAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA;AAAA,QACT;AAAA,QACA;AAAA,QACA,UAAU,KAAK;AAAA,QACf,SAAS,KAAK;AAAA,MAChB;AAAA,MACA,SAAS,CAAC,MAAM;AACd,UAAE,gBAAgB;AAClB,uBAAe,OAAO;AAAA,MACxB;AAAA,MAEA,UAAAD,2BAAA,kBAAA;AAAA,QAACE,+CAAA;AAAA,QAAA;AAAA,UACC,cAAc;AAAA,UACd,QAAQ,CAAC,aAAa,gBAAgB,EAAE,SAAS,UAAU;AAAA,UAC3D,UAAU,MAAM;AAAA,QAAA;AAAA,MAClB;AAAA,IAAA;AAAA,EAAA;AAGN;;"}

package/dist/components/DictionaryEditor/NodeWrapper/StringWrapper.d.ts

@@ -1,6 +1,5 @@
 import { FC } from 'react';
 import { NodeWrapperProps } from './index';
-
 type StringWrapperProps = Omit<NodeWrapperProps, 'section'> & {
     section: string;
 };

package/dist/components/DictionaryEditor/NodeWrapper/StringWrapper.mjs

@@ -1,7 +1,8 @@
 import { j as jsxRuntimeExports } from "../../../jsx-runtime-BgSF1HG2.js";
+import "../../EditableField/EditableFieldInput.mjs";
+import { EditableFieldTextArea } from "../../EditableField/EditableFieldTextArea.mjs";
 import { cn } from "../../../utils/cn.mjs";
 import { getDictionaryValueByKeyPath } from "../../../utils/dictionary.mjs";
-import { ContentEditorTextArea } from "../../ContentEditor/ContentEditorTextArea.mjs";
 const StringWrapper = ({
   keyPath,
   section,
@@ -22,7 +23,7 @@ const StringWrapper = ({
     "button",
     {
       className: cn(
-        "w-full rounded-md p-2 transition",
+        "w-full rounded-md p-2 text-left transition",
         "hover:bg-card/30 dark:hover:bg-card-dark/30 [&:has(.section:hover)]:bg-transparent",
         level === 2 && "hover:bg-card/30 dark:hover:bg-card-dark/30",
         level >= 3 && ""
@@ -32,10 +33,11 @@ const StringWrapper = ({
         onFocusKeyPath(keyPath);
       },
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ContentEditorTextArea,
+        EditableFieldTextArea,
         {
-          onContentChange: (newValue) => onContentChange({ keyPath, newValue }),
-          children: `${content}`
+          defaultValue: content,
+          onSave: (newValue) => onContentChange({ keyPath, newValue }),
+          onCancel: () => null
         }
       )
     }

package/dist/components/DictionaryEditor/NodeWrapper/StringWrapper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StringWrapper.mjs","sources":["../../../../src/components/DictionaryEditor/NodeWrapper/StringWrapper.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { cn } from '../../../utils/cn';\nimport { getDictionaryValueByKeyPath } from '../../../utils/dictionary';\nimport { ContentEditorTextArea } from '../../ContentEditor/ContentEditorTextArea';\nimport type { NodeWrapperProps } from './index';\n\ntype StringWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n  section: string;\n};\n\nexport const StringWrapper: FC<StringWrapperProps> = ({\n  keyPath,\n  section,\n  editedContent,\n  onContentChange,\n  onFocusKeyPath,\n}) => {\n  const editedContentValue = getDictionaryValueByKeyPath(\n    editedContent,\n    keyPath\n  );\n\n  if (editedContentValue && typeof editedContentValue !== 'string') {\n    return <>Error loading section</>;\n  }\n\n  const level = keyPath.length;\n\n  const content = editedContentValue ?? section;\n\n  return (\n    <button\n      className={cn(\n        'w-full rounded-md p-2 transition',\n        'hover:bg-card/30 dark:hover:bg-card-dark/30 [&:has(.section:hover)]:bg-transparent',\n        level === 2 && 'hover:bg-card/30 dark:hover:bg-card-dark/30',\n        level >= 3 && ''\n      )}\n      onClick={(e) => {\n        e.stopPropagation();\n        onFocusKeyPath(keyPath);\n      }}\n    >\n      <ContentEditorTextArea\n        onContentChange={(newValue) => onContentChange({ keyPath, newValue })}\n      >\n        {`${content}`}\n      </ContentEditorTextArea>\n    </button>\n  );\n};\n"],"names":["jsx"],"mappings":";;;;AAUO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAqB;AAAA,IACzB;AAAA,IACA;AAAA,EAAA;AAGE,MAAA,sBAAsB,OAAO,uBAAuB,UAAU;AAChE,+EAAS,UAAqB,wBAAA,CAAA;AAAA,EAChC;AAEA,QAAM,QAAQ,QAAQ;AAEtB,QAAM,UAAU,sBAAsB;AAGpC,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,UAAU,KAAK;AAAA,QACf,SAAS,KAAK;AAAA,MAChB;AAAA,MACA,SAAS,CAAC,MAAM;AACd,UAAE,gBAAgB;AAClB,uBAAe,OAAO;AAAA,MACxB;AAAA,MAEA,UAAAA,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,iBAAiB,CAAC,aAAa,gBAAgB,EAAE,SAAS,UAAU;AAAA,UAEnE,aAAG,OAAO;AAAA,QAAA;AAAA,MACb;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"StringWrapper.mjs","sources":["../../../../src/components/DictionaryEditor/NodeWrapper/StringWrapper.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { EditableFieldTextArea } from '../..//EditableField';\nimport { cn } from '../../../utils/cn';\nimport { getDictionaryValueByKeyPath } from '../../../utils/dictionary';\nimport type { NodeWrapperProps } from './index';\n\ntype StringWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n  section: string;\n};\n\nexport const StringWrapper: FC<StringWrapperProps> = ({\n  keyPath,\n  section,\n  editedContent,\n  onContentChange,\n  onFocusKeyPath,\n}) => {\n  const editedContentValue = getDictionaryValueByKeyPath(\n    editedContent,\n    keyPath\n  );\n\n  if (editedContentValue && typeof editedContentValue !== 'string') {\n    return <>Error loading section</>;\n  }\n\n  const level = keyPath.length;\n\n  const content = editedContentValue ?? section;\n\n  return (\n    <button\n      className={cn(\n        'w-full rounded-md p-2 text-left transition',\n        'hover:bg-card/30 dark:hover:bg-card-dark/30 [&:has(.section:hover)]:bg-transparent',\n        level === 2 && 'hover:bg-card/30 dark:hover:bg-card-dark/30',\n        level >= 3 && ''\n      )}\n      onClick={(e) => {\n        e.stopPropagation();\n        onFocusKeyPath(keyPath);\n      }}\n    >\n      <EditableFieldTextArea\n        defaultValue={content}\n        onSave={(newValue) => onContentChange({ keyPath, newValue })}\n        onCancel={() => null}\n      />\n    </button>\n  );\n};\n"],"names":["jsx"],"mappings":";;;;;AAUO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAqB;AAAA,IACzB;AAAA,IACA;AAAA,EAAA;AAGE,MAAA,sBAAsB,OAAO,uBAAuB,UAAU;AAChE,+EAAS,UAAqB,wBAAA,CAAA;AAAA,EAChC;AAEA,QAAM,QAAQ,QAAQ;AAEtB,QAAM,UAAU,sBAAsB;AAGpC,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,UAAU,KAAK;AAAA,QACf,SAAS,KAAK;AAAA,MAChB;AAAA,MACA,SAAS,CAAC,MAAM;AACd,UAAE,gBAAgB;AAClB,uBAAe,OAAO;AAAA,MACxB;AAAA,MAEA,UAAAA,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,cAAc;AAAA,UACd,QAAQ,CAAC,aAAa,gBAAgB,EAAE,SAAS,UAAU;AAAA,UAC3D,UAAU,MAAM;AAAA,QAAA;AAAA,MAClB;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/DictionaryEditor/NodeWrapper/TranslationWrapper.d.ts

@@ -1,7 +1,6 @@
 import { TranslationContent, DictionaryValue } from '@intlayer/core';
 import { FC } from 'react';
 import { NodeWrapperProps } from './index';
-
 type TranslationWrapperProps = Omit<NodeWrapperProps, 'section'> & {
     section: TranslationContent<DictionaryValue>;
 };

package/dist/components/DictionaryEditor/NodeWrapper/index.d.ts

@@ -1,7 +1,6 @@
 import { Locales } from '@intlayer/config/client';
 import { KeyPath, DictionaryValue, Dictionary } from '@intlayer/core';
 import { FC } from 'react';
-
 export declare const traceKeys: string[];
 export type NodeWrapperProps = {
     keyPath: KeyPath[];

package/dist/components/DictionaryEditor/ValidDictionaryChangeButtons.cjs

@@ -3,27 +3,119 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../jsx-runtime-DvCoRj5u.cjs");
 const lucideReact = require("lucide-react");
-const ValidDictionaryChangeButtons = ({ onCancelEdition, onValidEdition, ...props }) => {
-  const isEditing = Object.keys(props.editedContent ?? {}).length > 0;
-  return isEditing && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center justify-end gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { children: "Valid dictionary changes" }),
-    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-      lucideReact.Check,
+const require$$0 = require("react");
+const reactIntlayer = require("react-intlayer");
+require("../../hooks/useScrollBlockage/useScrollBlockageStore.cjs");
+require("../../hooks/useAsync/useAsyncStateStore.cjs");
+const hooks_intlayerAPIHooks = require("../../hooks/intlayerAPIHooks.cjs");
+require("@intlayer/dictionaries-entry");
+require("deepmerge");
+const components_Form_FormBase = require("../Form/FormBase.cjs");
+require("../Form/FormField.cjs");
+const components_Form_layout_FormItemLayout = require("../../Form-DERuauvB.cjs");
+require("../Toaster/Toast.cjs");
+const components_Toaster_useToast = require("../Toaster/useToast.cjs");
+const components_DictionaryEditor_useEditedContentStore = require("./useEditedContentStore.cjs");
+const components_DictionaryEditor_validDictionaryChangeButtons_content = require("./validDictionaryChangeButtons.content.cjs");
+const components_DictionaryEditor_validDictionaryChangeButtonsSchema = require("./validDictionaryChangeButtonsSchema.cjs");
+const ValidDictionaryChangeButtons = ({ dictionary }) => {
+  const ValidDictionaryChangeButtonsSchemaSchema = components_DictionaryEditor_validDictionaryChangeButtonsSchema.getValidDictionaryChangeButtonsSchemaSchema();
+  const { resetButton, saveButton, publishButton, updateDictionaryToasts } = reactIntlayer.useDictionary(components_DictionaryEditor_validDictionaryChangeButtons_content.validDictionaryChangeButtonsContent);
+  const { pushDictionaries } = hooks_intlayerAPIHooks.usePushDictionaries();
+  const { editedContent, restoreEditedContent } = components_DictionaryEditor_useEditedContentStore.useEditedContentStore(
+    (s) => ({
+      editedContent: s.editedContent,
+      restoreEditedContent: s.restoreEditedContent
+    })
+  );
+  const { form, isSubmitting } = components_Form_FormBase.useForm(
+    ValidDictionaryChangeButtonsSchemaSchema
+  );
+  const { toast } = components_Toaster_useToast.useToast();
+  const editedDictionary = require$$0.useMemo(
+    () => editedContent[dictionary.key],
+    [editedContent, dictionary.key]
+  );
+  const isEdited = require$$0.useMemo(
+    () => editedDictionary && JSON.stringify(editedDictionary?.content) !== JSON.stringify(dictionary?.content),
+    [editedDictionary, dictionary]
+  );
+  const isLocalDictionary = require$$0.useMemo(
+    () => typeof dictionary?._id === "undefined",
+    [dictionary]
+  );
+  const onSubmitSuccess = async () => {
+    await pushDictionaries([
       {
-        className: "cursor-pointer hover:scale-110",
-        size: 16,
-        onClick: onValidEdition
+        ...dictionary,
+        ...editedContent[dictionary.key]
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-      lucideReact.X,
-      {
-        className: "cursor-pointer hover:scale-110",
-        size: 16,
-        onClick: onCancelEdition
-      }
-    )
-  ] });
+    ]).then(() => {
+      toast({
+        title: updateDictionaryToasts.updated.title.value,
+        description: updateDictionaryToasts.updated.description,
+        variant: "success"
+      });
+    }).catch((error) => {
+      toast({
+        title: updateDictionaryToasts.failed.title.value,
+        description: error.message,
+        variant: "error"
+      });
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+    components_Form_layout_FormItemLayout.Form,
+    {
+      className: "flex w-full flex-row flex-wrap justify-end gap-3",
+      ...form,
+      schema: ValidDictionaryChangeButtonsSchemaSchema,
+      onSubmitSuccess,
+      children: [
+        isEdited && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          components_Form_layout_FormItemLayout.Form.Button,
+          {
+            type: "button",
+            label: resetButton.label.value,
+            disabled: !isEdited || isSubmitting,
+            className: "ml-auto",
+            Icon: lucideReact.RotateCcw,
+            variant: "outline",
+            color: "text",
+            isFullWidth: true,
+            isLoading: isSubmitting,
+            onClick: () => restoreEditedContent(dictionary.key),
+            children: resetButton.text
+          }
+        ),
+        isLocalDictionary ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          components_Form_layout_FormItemLayout.Form.Button,
+          {
+            type: "submit",
+            label: publishButton.label.value,
+            disabled: !isEdited || isSubmitting,
+            Icon: lucideReact.ArrowUpFromLine,
+            color: "text",
+            isFullWidth: true,
+            isLoading: isSubmitting,
+            children: publishButton.text
+          }
+        ) : isEdited && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          components_Form_layout_FormItemLayout.Form.Button,
+          {
+            type: "submit",
+            label: saveButton.label.value,
+            disabled: !isEdited || isSubmitting,
+            Icon: lucideReact.Save,
+            color: "text",
+            isFullWidth: true,
+            isLoading: isSubmitting,
+            children: saveButton.text
+          }
+        )
+      ]
+    }
+  ) });
 };
 exports.ValidDictionaryChangeButtons = ValidDictionaryChangeButtons;
 //# sourceMappingURL=ValidDictionaryChangeButtons.cjs.map

package/dist/components/DictionaryEditor/ValidDictionaryChangeButtons.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ValidDictionaryChangeButtons.cjs","sources":["../../../src/components/DictionaryEditor/ValidDictionaryChangeButtons.tsx"],"sourcesContent":["'use client';\n\nimport type { Dictionary } from '@intlayer/core';\nimport { Check, X } from 'lucide-react';\nimport type { FC } from 'react';\n\ntype ValidDictionaryChangeButtonsProps = {\n  onValidEdition: () => void;\n  onCancelEdition: () => void;\n  editedContent?: Dictionary;\n  dictionaryId?: string;\n};\n\nexport const ValidDictionaryChangeButtons: FC<\n  ValidDictionaryChangeButtonsProps\n> = ({ onCancelEdition, onValidEdition, ...props }) => {\n  const isEditing = Object.keys(props.editedContent ?? {}).length > 0;\n\n  return (\n    isEditing && (\n      <div className=\"flex flex-row items-center justify-end gap-2\">\n        <span>Valid dictionary changes</span>\n        <Check\n          className=\"cursor-pointer hover:scale-110\"\n          size={16}\n          onClick={onValidEdition}\n        />\n        <X\n          className=\"cursor-pointer hover:scale-110\"\n          size={16}\n          onClick={onCancelEdition}\n        />\n      </div>\n    )\n  );\n};\n"],"names":["jsxs","jsx","Check","X"],"mappings":";;;;;AAaO,MAAM,+BAET,CAAC,EAAE,iBAAiB,gBAAgB,GAAG,YAAY;AAC/C,QAAA,YAAY,OAAO,KAAK,MAAM,iBAAiB,CAAE,CAAA,EAAE,SAAS;AAElE,SACE,aACEA,2BAAAA,kBAAAA,KAAC,OAAI,EAAA,WAAU,gDACb,UAAA;AAAA,IAAAC,2BAAAA,kBAAAA,IAAC,UAAK,UAAwB,2BAAA,CAAA;AAAA,IAC9BA,2BAAA,kBAAA;AAAA,MAACC,YAAA;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IACAD,2BAAA,kBAAA;AAAA,MAACE,YAAA;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF,EAAA,CAAA;AAGN;;"}
+{"version":3,"file":"ValidDictionaryChangeButtons.cjs","sources":["../../../src/components/DictionaryEditor/ValidDictionaryChangeButtons.tsx"],"sourcesContent":["'use client';\n\nimport { Dictionary as DistantDictionary } from '@intlayer/backend';\nimport type { Dictionary } from '@intlayer/core';\nimport { ArrowUpFromLine, RotateCcw, Save } from 'lucide-react';\nimport { useMemo, type FC } from 'react';\nimport { useDictionary } from 'react-intlayer';\nimport { usePushDictionaries } from '../../hooks';\nimport { Form, useForm } from '../Form';\nimport { useToast } from '../Toaster';\nimport { useEditedContentStore } from './useEditedContentStore';\nimport { validDictionaryChangeButtonsContent } from './validDictionaryChangeButtons.content';\nimport { getValidDictionaryChangeButtonsSchemaSchema } from './validDictionaryChangeButtonsSchema';\n\ntype ValidDictionaryChangeButtonsProps = {\n  dictionary: Dictionary;\n};\n\nexport const ValidDictionaryChangeButtons: FC<\n  ValidDictionaryChangeButtonsProps\n> = ({ dictionary }) => {\n  const ValidDictionaryChangeButtonsSchemaSchema =\n    getValidDictionaryChangeButtonsSchemaSchema();\n\n  const { resetButton, saveButton, publishButton, updateDictionaryToasts } =\n    useDictionary(validDictionaryChangeButtonsContent);\n\n  const { pushDictionaries } = usePushDictionaries();\n\n  const { editedContent, restoreEditedContent } = useEditedContentStore(\n    (s) => ({\n      editedContent: s.editedContent,\n      restoreEditedContent: s.restoreEditedContent,\n    })\n  );\n  const { form, isSubmitting } = useForm(\n    ValidDictionaryChangeButtonsSchemaSchema\n  );\n  const { toast } = useToast();\n\n  const editedDictionary = useMemo(\n    () => editedContent[dictionary.key],\n    [editedContent, dictionary.key]\n  );\n\n  const isEdited = useMemo(\n    () =>\n      editedDictionary &&\n      JSON.stringify(editedDictionary?.content) !==\n        JSON.stringify(dictionary?.content),\n    [editedDictionary, dictionary]\n  );\n\n  const isLocalDictionary = useMemo(\n    () => typeof (dictionary as DistantDictionary)?._id === 'undefined',\n    [dictionary]\n  );\n\n  const onSubmitSuccess = async () => {\n    await pushDictionaries([\n      {\n        ...dictionary,\n        ...editedContent[dictionary.key],\n      },\n    ])\n      .then(() => {\n        toast({\n          title: updateDictionaryToasts.updated.title.value,\n          description: updateDictionaryToasts.updated.description,\n          variant: 'success',\n        });\n      })\n      .catch((error) => {\n        toast({\n          title: updateDictionaryToasts.failed.title.value,\n          description: error.message,\n          variant: 'error',\n        });\n      });\n  };\n\n  return (\n    <div className=\"mb-4\">\n      <Form\n        className=\"flex w-full flex-row flex-wrap justify-end gap-3\"\n        {...form}\n        schema={ValidDictionaryChangeButtonsSchemaSchema}\n        onSubmitSuccess={onSubmitSuccess}\n      >\n        {isEdited && (\n          <Form.Button\n            type=\"button\"\n            label={resetButton.label.value}\n            disabled={!isEdited || isSubmitting}\n            className=\"ml-auto\"\n            Icon={RotateCcw}\n            variant=\"outline\"\n            color=\"text\"\n            isFullWidth\n            isLoading={isSubmitting}\n            onClick={() => restoreEditedContent(dictionary.key)}\n          >\n            {resetButton.text}\n          </Form.Button>\n        )}\n        {isLocalDictionary ? (\n          <Form.Button\n            type=\"submit\"\n            label={publishButton.label.value}\n            disabled={!isEdited || isSubmitting}\n            Icon={ArrowUpFromLine}\n            color=\"text\"\n            isFullWidth\n            isLoading={isSubmitting}\n          >\n            {publishButton.text}\n          </Form.Button>\n        ) : (\n          isEdited && (\n            <Form.Button\n              type=\"submit\"\n              label={saveButton.label.value}\n              disabled={!isEdited || isSubmitting}\n              Icon={Save}\n              color=\"text\"\n              isFullWidth\n              isLoading={isSubmitting}\n            >\n              {saveButton.text}\n            </Form.Button>\n          )\n        )}\n      </Form>\n    </div>\n  );\n};\n"],"names":["getValidDictionaryChangeButtonsSchemaSchema","useDictionary","validDictionaryChangeButtonsContent","usePushDictionaries","useEditedContentStore","useForm","useToast","useMemo","jsx","jsxs","Form","RotateCcw","ArrowUpFromLine","Save"],"mappings":"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"}

package/dist/components/DictionaryEditor/ValidDictionaryChangeButtons.d.ts

@@ -1,11 +1,7 @@
 import { Dictionary } from '@intlayer/core';
 import { FC } from 'react';
-
 type ValidDictionaryChangeButtonsProps = {
-    onValidEdition: () => void;
-    onCancelEdition: () => void;
-    editedContent?: Dictionary;
-    dictionaryId?: string;
+    dictionary: Dictionary;
 };
 export declare const ValidDictionaryChangeButtons: FC<ValidDictionaryChangeButtonsProps>;
 export {};

package/dist/components/DictionaryEditor/ValidDictionaryChangeButtons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ValidDictionaryChangeButtons.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryEditor/ValidDictionaryChangeButtons.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,KAAK,iCAAiC,GAAG;IACvC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,EAAE,CAC3C,iCAAiC,CAqBlC,CAAC"}
+{"version":3,"file":"ValidDictionaryChangeButtons.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryEditor/ValidDictionaryChangeButtons.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,OAAO,EAAW,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AASzC,KAAK,iCAAiC,GAAG;IACvC,UAAU,EAAE,UAAU,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,EAAE,CAC3C,iCAAiC,CAoHlC,CAAC"}