@intlayer/design-system 6.1.5 → 6.1.6

package/dist/components/CopyToClipboard/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/CopyToClipboard/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheck, CopyIcon } from 'lucide-react';\nimport { type FC, type PropsWithChildren, useState } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport type CopyToClipboardProps = PropsWithChildren<{\n  text: string;\n  className?: string;\n}>;\n\nexport const CopyToClipboard: FC<CopyToClipboardProps> = ({\n  text,\n  children,\n  className,\n}) => {\n  const [isCopied, setIsCopied] = useState(false);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(text).then(() => {\n      setIsCopied(true);\n      setTimeout(() => setIsCopied(false), 1000);\n    });\n  };\n\n  return (\n    <span\n      className={cn(\n        'inline-block gap-2 hover:cursor-pointer hover:bg-neutral/10 rounded-md p-0.5',\n        className\n      )}\n      onClick={handleCopy}\n    >\n      {children}\n\n      <span className=\"inline-flex\">\n        {text &&\n          (isCopied ? (\n            <CopyCheck\n              size={12}\n              aria-label=\"copied\"\n              role=\"button\"\n              data-testid=\"copy-to-clipboard\"\n              className=\"ml-1 mt-1\"\n            />\n          ) : (\n            <CopyIcon\n              size={12}\n              aria-label=\"copy\"\n              role=\"button\"\n              data-testid=\"copy-to-clipboard\"\n              className=\"ml-1 mt-1 cursor-pointer\"\n            />\n          ))}\n      </span>\n    </span>\n  );\n};\n"],"names":["useState","jsxs","cn","jsx","CopyCheck","CopyIcon"],"mappings":";;;;;;;AAWO,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAIA,aAAAA,SAAS,KAAK;AAE9C,QAAM,aAAa,MAAM;AACvB,cAAU,UAAU,UAAU,IAAI,EAAE,KAAK,MAAM;AAC7C,kBAAY,IAAI;AAChB,iBAAW,MAAM,YAAY,KAAK,GAAG,GAAI;AAAA,IAC3C,CAAC;AAAA,EACH;AAEA,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAAA;AAAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,SAAS;AAAA,MAER,UAAA;AAAA,QAAA;AAAA,QAEDC,2BAAAA,IAAC,QAAA,EAAK,WAAU,eACb,mBACE,WACCA,2BAAAA;AAAAA,UAACC,YAAAA;AAAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,cAAW;AAAA,YACX,MAAK;AAAA,YACL,eAAY;AAAA,YACZ,WAAU;AAAA,UAAA;AAAA,QAAA,IAGZD,2BAAAA;AAAAA,UAACE,YAAAA;AAAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,cAAW;AAAA,YACX,MAAK;AAAA,YACL,eAAY;AAAA,YACZ,WAAU;AAAA,UAAA;AAAA,QAAA,GACZ,CAEN;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/CopyToClipboard/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheck, CopyIcon } from 'lucide-react';\nimport { type FC, type PropsWithChildren, useState } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Props for the CopyToClipboard component\n */\nexport interface CopyToClipboardProps extends PropsWithChildren {\n  /**\n   * The text to copy to the clipboard when clicked\n   * @example \"Hello World\"\n   * @example \"npm install @intlayer/design-system\"\n   */\n  text: string;\n\n  /**\n   * Additional CSS classes for the wrapper element\n   * @example \"bg-blue-100 text-blue-800\"\n   */\n  className?: string;\n\n  /**\n   * Accessible label for screen readers when copy operation is available\n   * @default \"Copy to clipboard\"\n   */\n  'aria-label'?: string;\n\n  /**\n   * Accessible label for screen readers when content has been copied\n   * @default \"Copied to clipboard\"\n   */\n  'aria-copied-label'?: string;\n\n  /**\n   * Duration in milliseconds to show the \"copied\" state\n   * @default 2000\n   */\n  feedbackDuration?: number;\n\n  /**\n   * Callback function called when copy operation succeeds\n   */\n  onCopySuccess?: () => void;\n\n  /**\n   * Callback function called when copy operation fails\n   */\n  onCopyError?: (error: Error) => void;\n}\n\n/**\n * CopyToClipboard Component\n *\n * A versatile component that allows users to copy text to their clipboard with visual feedback.\n * Provides accessibility features, customizable feedback duration, and error handling.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <CopyToClipboard text=\"Hello World\">\n *   <span>Click to copy</span>\n * </CopyToClipboard>\n *\n * // With custom styling and callbacks\n * <CopyToClipboard\n *   text=\"npm install @intlayer/design-system\"\n *   className=\"bg-gray-100 p-2\"\n *   feedbackDuration={3000}\n *   onCopySuccess={() => console.log('Copied!')}\n * >\n *   <code>npm install @intlayer/design-system</code>\n * </CopyToClipboard>\n * ```\n *\n * @component\n * @accessibility\n * - Uses proper ARIA labels for copy and copied states\n * - Supports keyboard navigation (Enter and Space keys)\n * - Announces state changes to screen readers\n * - Provides visual focus indicators\n */\nexport const CopyToClipboard: FC<CopyToClipboardProps> = ({\n  text,\n  children,\n  className,\n  'aria-label': ariaLabel = 'Copy to clipboard',\n  'aria-copied-label': ariaCopiedLabel = 'Copied to clipboard',\n  feedbackDuration = 2000,\n  onCopySuccess,\n  onCopyError,\n}) => {\n  const [isCopied, setIsCopied] = useState(false);\n  const [copyError, setCopyError] = useState<string | null>(null);\n\n  const handleCopy = async () => {\n    if (!text) return;\n\n    try {\n      setCopyError(null);\n\n      if (navigator.clipboard && navigator.clipboard.writeText) {\n        await navigator.clipboard.writeText(text);\n      } else {\n        // Fallback for older browsers\n        const textArea = document.createElement('textarea');\n        textArea.value = text;\n        textArea.style.position = 'fixed';\n        textArea.style.left = '-999999px';\n        textArea.style.top = '-999999px';\n        document.body.appendChild(textArea);\n        textArea.focus();\n        textArea.select();\n        document.execCommand('copy');\n        document.body.removeChild(textArea);\n      }\n\n      setIsCopied(true);\n      setTimeout(() => setIsCopied(false), feedbackDuration);\n      onCopySuccess?.();\n    } catch (error) {\n      const errorMessage =\n        error instanceof Error ? error.message : 'Failed to copy to clipboard';\n      setCopyError(errorMessage);\n      onCopyError?.(error instanceof Error ? error : new Error(errorMessage));\n\n      // Clear error after feedback duration\n      setTimeout(() => setCopyError(null), feedbackDuration);\n    }\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      handleCopy();\n    }\n  };\n\n  const currentAriaLabel = copyError\n    ? `Error copying to clipboard: ${copyError}`\n    : isCopied\n      ? ariaCopiedLabel\n      : ariaLabel;\n\n  const IconComponent = copyError ? CopyIcon : isCopied ? CopyCheck : CopyIcon;\n\n  return (\n    <span\n      className={cn(\n        'inline-flex gap-2 hover:cursor-pointer hover:bg-neutral/10 rounded-md p-0.5',\n        className\n      )}\n      onClick={handleCopy}\n      onKeyDown={handleKeyDown}\n      role=\"button\"\n      tabIndex={0}\n      aria-label={currentAriaLabel}\n      aria-pressed={isCopied}\n      data-testid=\"copy-to-clipboard\"\n    >\n      {children}\n\n      {text && (\n        <IconComponent\n          size={12}\n          className={cn(\n            'ml-1 transition-colors duration-200',\n            copyError && 'text-destructive',\n            isCopied && 'text-success',\n            !copyError &&\n              !isCopied &&\n              'text-muted-foreground hover:text-foreground'\n          )}\n          aria-hidden=\"true\"\n        />\n      )}\n    </span>\n  );\n};\n"],"names":["useState","CopyIcon","CopyCheck","jsxs","cn","jsx"],"mappings":";;;;;;;AAmFO,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc,YAAY;AAAA,EAC1B,qBAAqB,kBAAkB;AAAA,EACvC,mBAAmB;AAAA,EACnB;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAIA,aAAAA,SAAS,KAAK;AAC9C,QAAM,CAAC,WAAW,YAAY,IAAIA,aAAAA,SAAwB,IAAI;AAE9D,QAAM,aAAa,YAAY;AAC7B,QAAI,CAAC,KAAM;AAEX,QAAI;AACF,mBAAa,IAAI;AAEjB,UAAI,UAAU,aAAa,UAAU,UAAU,WAAW;AACxD,cAAM,UAAU,UAAU,UAAU,IAAI;AAAA,MAC1C,OAAO;AAEL,cAAM,WAAW,SAAS,cAAc,UAAU;AAClD,iBAAS,QAAQ;AACjB,iBAAS,MAAM,WAAW;AAC1B,iBAAS,MAAM,OAAO;AACtB,iBAAS,MAAM,MAAM;AACrB,iBAAS,KAAK,YAAY,QAAQ;AAClC,iBAAS,MAAA;AACT,iBAAS,OAAA;AACT,iBAAS,YAAY,MAAM;AAC3B,iBAAS,KAAK,YAAY,QAAQ;AAAA,MACpC;AAEA,kBAAY,IAAI;AAChB,iBAAW,MAAM,YAAY,KAAK,GAAG,gBAAgB;AACrD,sBAAA;AAAA,IACF,SAAS,OAAO;AACd,YAAM,eACJ,iBAAiB,QAAQ,MAAM,UAAU;AAC3C,mBAAa,YAAY;AACzB,oBAAc,iBAAiB,QAAQ,QAAQ,IAAI,MAAM,YAAY,CAAC;AAGtE,iBAAW,MAAM,aAAa,IAAI,GAAG,gBAAgB;AAAA,IACvD;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,UAA+B;AACpD,QAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,YAAM,eAAA;AACN,iBAAA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,mBAAmB,YACrB,+BAA+B,SAAS,KACxC,WACE,kBACA;AAEN,QAAM,gBAAgB,YAAYC,YAAAA,WAAW,WAAWC,YAAAA,YAAYD,YAAAA;AAEpE,SACEE,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAAA;AAAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,SAAS;AAAA,MACT,WAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACV,cAAY;AAAA,MACZ,gBAAc;AAAA,MACd,eAAY;AAAA,MAEX,UAAA;AAAA,QAAA;AAAA,QAEA,QACCC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAWD,SAAAA;AAAAA,cACT;AAAA,cACA,aAAa;AAAA,cACb,YAAY;AAAA,cACZ,CAAC,aACC,CAAC,YACD;AAAA,YAAA;AAAA,YAEJ,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EAAA;AAIR;;"}

package/dist/components/CopyToClipboard/index.d.ts

@@ -1,7 +1,73 @@
 import { FC, PropsWithChildren } from 'react';
-export type CopyToClipboardProps = PropsWithChildren<{
+/**
+ * Props for the CopyToClipboard component
+ */
+export interface CopyToClipboardProps extends PropsWithChildren {
+    /**
+     * The text to copy to the clipboard when clicked
+     * @example "Hello World"
+     * @example "npm install @intlayer/design-system"
+     */
     text: string;
+    /**
+     * Additional CSS classes for the wrapper element
+     * @example "bg-blue-100 text-blue-800"
+     */
     className?: string;
-}>;
+    /**
+     * Accessible label for screen readers when copy operation is available
+     * @default "Copy to clipboard"
+     */
+    'aria-label'?: string;
+    /**
+     * Accessible label for screen readers when content has been copied
+     * @default "Copied to clipboard"
+     */
+    'aria-copied-label'?: string;
+    /**
+     * Duration in milliseconds to show the "copied" state
+     * @default 2000
+     */
+    feedbackDuration?: number;
+    /**
+     * Callback function called when copy operation succeeds
+     */
+    onCopySuccess?: () => void;
+    /**
+     * Callback function called when copy operation fails
+     */
+    onCopyError?: (error: Error) => void;
+}
+/**
+ * CopyToClipboard Component
+ *
+ * A versatile component that allows users to copy text to their clipboard with visual feedback.
+ * Provides accessibility features, customizable feedback duration, and error handling.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CopyToClipboard text="Hello World">
+ *   <span>Click to copy</span>
+ * </CopyToClipboard>
+ *
+ * // With custom styling and callbacks
+ * <CopyToClipboard
+ *   text="npm install @intlayer/design-system"
+ *   className="bg-gray-100 p-2"
+ *   feedbackDuration={3000}
+ *   onCopySuccess={() => console.log('Copied!')}
+ * >
+ *   <code>npm install @intlayer/design-system</code>
+ * </CopyToClipboard>
+ * ```
+ *
+ * @component
+ * @accessibility
+ * - Uses proper ARIA labels for copy and copied states
+ * - Supports keyboard navigation (Enter and Space keys)
+ * - Announces state changes to screen readers
+ * - Provides visual focus indicators
+ */
 export declare const CopyToClipboard: FC<CopyToClipboardProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/CopyToClipboard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CopyToClipboard/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAGlE,MAAM,MAAM,oBAAoB,GAAG,iBAAiB,CAAC;IACnD,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA8CpD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CopyToClipboard/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAGlE;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC7D;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAgGpD,CAAC"}

package/dist/components/CopyToClipboard/index.mjs

@@ -1,49 +1,85 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { CopyCheck, CopyIcon } from "lucide-react";
+import { CopyIcon, CopyCheck } from "lucide-react";
 import { useState } from "react";
 import { cn } from "../../utils/cn.mjs";
 const CopyToClipboard = ({
   text,
   children,
-  className
+  className,
+  "aria-label": ariaLabel = "Copy to clipboard",
+  "aria-copied-label": ariaCopiedLabel = "Copied to clipboard",
+  feedbackDuration = 2e3,
+  onCopySuccess,
+  onCopyError
 }) => {
   const [isCopied, setIsCopied] = useState(false);
-  const handleCopy = () => {
-    navigator.clipboard.writeText(text).then(() => {
+  const [copyError, setCopyError] = useState(null);
+  const handleCopy = async () => {
+    if (!text) return;
+    try {
+      setCopyError(null);
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        await navigator.clipboard.writeText(text);
+      } else {
+        const textArea = document.createElement("textarea");
+        textArea.value = text;
+        textArea.style.position = "fixed";
+        textArea.style.left = "-999999px";
+        textArea.style.top = "-999999px";
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textArea);
+      }
       setIsCopied(true);
-      setTimeout(() => setIsCopied(false), 1e3);
-    });
+      setTimeout(() => setIsCopied(false), feedbackDuration);
+      onCopySuccess?.();
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "Failed to copy to clipboard";
+      setCopyError(errorMessage);
+      onCopyError?.(error instanceof Error ? error : new Error(errorMessage));
+      setTimeout(() => setCopyError(null), feedbackDuration);
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      handleCopy();
+    }
   };
+  const currentAriaLabel = copyError ? `Error copying to clipboard: ${copyError}` : isCopied ? ariaCopiedLabel : ariaLabel;
+  const IconComponent = copyError ? CopyIcon : isCopied ? CopyCheck : CopyIcon;
   return /* @__PURE__ */ jsxs(
     "span",
     {
       className: cn(
-        "inline-block gap-2 hover:cursor-pointer hover:bg-neutral/10 rounded-md p-0.5",
+        "inline-flex gap-2 hover:cursor-pointer hover:bg-neutral/10 rounded-md p-0.5",
         className
       ),
       onClick: handleCopy,
+      onKeyDown: handleKeyDown,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": currentAriaLabel,
+      "aria-pressed": isCopied,
+      "data-testid": "copy-to-clipboard",
       children: [
         children,
-        /* @__PURE__ */ jsx("span", { className: "inline-flex", children: text && (isCopied ? /* @__PURE__ */ jsx(
-          CopyCheck,
-          {
-            size: 12,
-            "aria-label": "copied",
-            role: "button",
-            "data-testid": "copy-to-clipboard",
-            className: "ml-1 mt-1"
-          }
-        ) : /* @__PURE__ */ jsx(
-          CopyIcon,
+        text && /* @__PURE__ */ jsx(
+          IconComponent,
           {
             size: 12,
-            "aria-label": "copy",
-            role: "button",
-            "data-testid": "copy-to-clipboard",
-            className: "ml-1 mt-1 cursor-pointer"
+            className: cn(
+              "ml-1 transition-colors duration-200",
+              copyError && "text-destructive",
+              isCopied && "text-success",
+              !copyError && !isCopied && "text-muted-foreground hover:text-foreground"
+            ),
+            "aria-hidden": "true"
           }
-        )) })
+        )
       ]
     }
   );

package/dist/components/CopyToClipboard/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/CopyToClipboard/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheck, CopyIcon } from 'lucide-react';\nimport { type FC, type PropsWithChildren, useState } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport type CopyToClipboardProps = PropsWithChildren<{\n  text: string;\n  className?: string;\n}>;\n\nexport const CopyToClipboard: FC<CopyToClipboardProps> = ({\n  text,\n  children,\n  className,\n}) => {\n  const [isCopied, setIsCopied] = useState(false);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(text).then(() => {\n      setIsCopied(true);\n      setTimeout(() => setIsCopied(false), 1000);\n    });\n  };\n\n  return (\n    <span\n      className={cn(\n        'inline-block gap-2 hover:cursor-pointer hover:bg-neutral/10 rounded-md p-0.5',\n        className\n      )}\n      onClick={handleCopy}\n    >\n      {children}\n\n      <span className=\"inline-flex\">\n        {text &&\n          (isCopied ? (\n            <CopyCheck\n              size={12}\n              aria-label=\"copied\"\n              role=\"button\"\n              data-testid=\"copy-to-clipboard\"\n              className=\"ml-1 mt-1\"\n            />\n          ) : (\n            <CopyIcon\n              size={12}\n              aria-label=\"copy\"\n              role=\"button\"\n              data-testid=\"copy-to-clipboard\"\n              className=\"ml-1 mt-1 cursor-pointer\"\n            />\n          ))}\n      </span>\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;;;AAWO,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,QAAM,aAAa,MAAM;AACvB,cAAU,UAAU,UAAU,IAAI,EAAE,KAAK,MAAM;AAC7C,kBAAY,IAAI;AAChB,iBAAW,MAAM,YAAY,KAAK,GAAG,GAAI;AAAA,IAC3C,CAAC;AAAA,EACH;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,SAAS;AAAA,MAER,UAAA;AAAA,QAAA;AAAA,QAED,oBAAC,QAAA,EAAK,WAAU,eACb,mBACE,WACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,cAAW;AAAA,YACX,MAAK;AAAA,YACL,eAAY;AAAA,YACZ,WAAU;AAAA,UAAA;AAAA,QAAA,IAGZ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,cAAW;AAAA,YACX,MAAK;AAAA,YACL,eAAY;AAAA,YACZ,WAAU;AAAA,UAAA;AAAA,QAAA,GACZ,CAEN;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/CopyToClipboard/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheck, CopyIcon } from 'lucide-react';\nimport { type FC, type PropsWithChildren, useState } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Props for the CopyToClipboard component\n */\nexport interface CopyToClipboardProps extends PropsWithChildren {\n  /**\n   * The text to copy to the clipboard when clicked\n   * @example \"Hello World\"\n   * @example \"npm install @intlayer/design-system\"\n   */\n  text: string;\n\n  /**\n   * Additional CSS classes for the wrapper element\n   * @example \"bg-blue-100 text-blue-800\"\n   */\n  className?: string;\n\n  /**\n   * Accessible label for screen readers when copy operation is available\n   * @default \"Copy to clipboard\"\n   */\n  'aria-label'?: string;\n\n  /**\n   * Accessible label for screen readers when content has been copied\n   * @default \"Copied to clipboard\"\n   */\n  'aria-copied-label'?: string;\n\n  /**\n   * Duration in milliseconds to show the \"copied\" state\n   * @default 2000\n   */\n  feedbackDuration?: number;\n\n  /**\n   * Callback function called when copy operation succeeds\n   */\n  onCopySuccess?: () => void;\n\n  /**\n   * Callback function called when copy operation fails\n   */\n  onCopyError?: (error: Error) => void;\n}\n\n/**\n * CopyToClipboard Component\n *\n * A versatile component that allows users to copy text to their clipboard with visual feedback.\n * Provides accessibility features, customizable feedback duration, and error handling.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <CopyToClipboard text=\"Hello World\">\n *   <span>Click to copy</span>\n * </CopyToClipboard>\n *\n * // With custom styling and callbacks\n * <CopyToClipboard\n *   text=\"npm install @intlayer/design-system\"\n *   className=\"bg-gray-100 p-2\"\n *   feedbackDuration={3000}\n *   onCopySuccess={() => console.log('Copied!')}\n * >\n *   <code>npm install @intlayer/design-system</code>\n * </CopyToClipboard>\n * ```\n *\n * @component\n * @accessibility\n * - Uses proper ARIA labels for copy and copied states\n * - Supports keyboard navigation (Enter and Space keys)\n * - Announces state changes to screen readers\n * - Provides visual focus indicators\n */\nexport const CopyToClipboard: FC<CopyToClipboardProps> = ({\n  text,\n  children,\n  className,\n  'aria-label': ariaLabel = 'Copy to clipboard',\n  'aria-copied-label': ariaCopiedLabel = 'Copied to clipboard',\n  feedbackDuration = 2000,\n  onCopySuccess,\n  onCopyError,\n}) => {\n  const [isCopied, setIsCopied] = useState(false);\n  const [copyError, setCopyError] = useState<string | null>(null);\n\n  const handleCopy = async () => {\n    if (!text) return;\n\n    try {\n      setCopyError(null);\n\n      if (navigator.clipboard && navigator.clipboard.writeText) {\n        await navigator.clipboard.writeText(text);\n      } else {\n        // Fallback for older browsers\n        const textArea = document.createElement('textarea');\n        textArea.value = text;\n        textArea.style.position = 'fixed';\n        textArea.style.left = '-999999px';\n        textArea.style.top = '-999999px';\n        document.body.appendChild(textArea);\n        textArea.focus();\n        textArea.select();\n        document.execCommand('copy');\n        document.body.removeChild(textArea);\n      }\n\n      setIsCopied(true);\n      setTimeout(() => setIsCopied(false), feedbackDuration);\n      onCopySuccess?.();\n    } catch (error) {\n      const errorMessage =\n        error instanceof Error ? error.message : 'Failed to copy to clipboard';\n      setCopyError(errorMessage);\n      onCopyError?.(error instanceof Error ? error : new Error(errorMessage));\n\n      // Clear error after feedback duration\n      setTimeout(() => setCopyError(null), feedbackDuration);\n    }\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      handleCopy();\n    }\n  };\n\n  const currentAriaLabel = copyError\n    ? `Error copying to clipboard: ${copyError}`\n    : isCopied\n      ? ariaCopiedLabel\n      : ariaLabel;\n\n  const IconComponent = copyError ? CopyIcon : isCopied ? CopyCheck : CopyIcon;\n\n  return (\n    <span\n      className={cn(\n        'inline-flex gap-2 hover:cursor-pointer hover:bg-neutral/10 rounded-md p-0.5',\n        className\n      )}\n      onClick={handleCopy}\n      onKeyDown={handleKeyDown}\n      role=\"button\"\n      tabIndex={0}\n      aria-label={currentAriaLabel}\n      aria-pressed={isCopied}\n      data-testid=\"copy-to-clipboard\"\n    >\n      {children}\n\n      {text && (\n        <IconComponent\n          size={12}\n          className={cn(\n            'ml-1 transition-colors duration-200',\n            copyError && 'text-destructive',\n            isCopied && 'text-success',\n            !copyError &&\n              !isCopied &&\n              'text-muted-foreground hover:text-foreground'\n          )}\n          aria-hidden=\"true\"\n        />\n      )}\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;;;AAmFO,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc,YAAY;AAAA,EAC1B,qBAAqB,kBAAkB;AAAA,EACvC,mBAAmB;AAAA,EACnB;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAwB,IAAI;AAE9D,QAAM,aAAa,YAAY;AAC7B,QAAI,CAAC,KAAM;AAEX,QAAI;AACF,mBAAa,IAAI;AAEjB,UAAI,UAAU,aAAa,UAAU,UAAU,WAAW;AACxD,cAAM,UAAU,UAAU,UAAU,IAAI;AAAA,MAC1C,OAAO;AAEL,cAAM,WAAW,SAAS,cAAc,UAAU;AAClD,iBAAS,QAAQ;AACjB,iBAAS,MAAM,WAAW;AAC1B,iBAAS,MAAM,OAAO;AACtB,iBAAS,MAAM,MAAM;AACrB,iBAAS,KAAK,YAAY,QAAQ;AAClC,iBAAS,MAAA;AACT,iBAAS,OAAA;AACT,iBAAS,YAAY,MAAM;AAC3B,iBAAS,KAAK,YAAY,QAAQ;AAAA,MACpC;AAEA,kBAAY,IAAI;AAChB,iBAAW,MAAM,YAAY,KAAK,GAAG,gBAAgB;AACrD,sBAAA;AAAA,IACF,SAAS,OAAO;AACd,YAAM,eACJ,iBAAiB,QAAQ,MAAM,UAAU;AAC3C,mBAAa,YAAY;AACzB,oBAAc,iBAAiB,QAAQ,QAAQ,IAAI,MAAM,YAAY,CAAC;AAGtE,iBAAW,MAAM,aAAa,IAAI,GAAG,gBAAgB;AAAA,IACvD;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,UAA+B;AACpD,QAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,YAAM,eAAA;AACN,iBAAA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,mBAAmB,YACrB,+BAA+B,SAAS,KACxC,WACE,kBACA;AAEN,QAAM,gBAAgB,YAAY,WAAW,WAAW,YAAY;AAEpE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,SAAS;AAAA,MACT,WAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACV,cAAY;AAAA,MACZ,gBAAc;AAAA,MACd,eAAY;AAAA,MAEX,UAAA;AAAA,QAAA;AAAA,QAEA,QACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAW;AAAA,cACT;AAAA,cACA,aAAa;AAAA,cACb,YAAY;AAAA,cACZ,CAAC,aACC,CAAC,YACD;AAAA,YAAA;AAAA,YAEJ,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/DictionaryFieldEditor/DictionaryFieldEditor.cjs

@@ -31,7 +31,8 @@ const DictionaryFieldEditor = ({
   onClickDictionaryList,
   isDarkMode,
   mode,
-  onDelete
+  onDelete,
+  onSave
 }) => {
   const config = editorReact.useConfiguration();
   const [editorView, setEditorView] = ReactExports.useState(
@@ -115,7 +116,8 @@ const DictionaryFieldEditor = ({
             onDelete: () => {
               setFocusedContent(null);
               onDelete?.();
-            }
+            },
+            onSave
           }
         )
       ] })

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

@@ -1 +1 @@
-{"version":3,"file":"DictionaryFieldEditor.cjs","sources":["../../../src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx"],"sourcesContent":["'use client';\n\nimport type { Dictionary } from '@intlayer/core';\nimport {\n  useConfiguration,\n  useDictionariesRecordActions,\n  useFocusDictionaryActions,\n} from '@intlayer/editor-react';\nimport { ArrowLeft } from 'lucide-react';\nimport { useEffect, useState, type FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, ButtonColor, ButtonVariant } from '../Button';\nimport { LocaleSwitcherContentProvider } from '../LocaleSwitcherContentDropDown';\nimport {\n  SwitchSelector,\n  SwitchSelectorColor,\n  SwitchSelectorSize,\n} from '../SwitchSelector';\nimport { ContentEditor } from './ContentEditor';\nimport { DictionaryDetailsForm } from './DictionaryDetails/DictionaryDetailsForm';\nimport { JSONEditor } from './JSONEditor';\nimport { SaveForm } from './SaveForm/SaveForm';\nimport { StructureEditor } from './StructureEditor';\n\ntype DictionaryFieldEditorProps = {\n  dictionary: Dictionary;\n  onClickDictionaryList?: () => void;\n  onDelete?: () => void;\n  isDarkMode?: boolean;\n  mode: ('local' | 'remote')[];\n};\n\nenum EditorViewType {\n  DetailsEditor,\n  ContentEditor,\n  StructureEditor,\n  JSONEditor,\n}\n\nexport const DictionaryFieldEditor: FC<DictionaryFieldEditorProps> = ({\n  dictionary,\n  onClickDictionaryList,\n  isDarkMode,\n  mode,\n  onDelete,\n}) => {\n  const config = useConfiguration();\n  const [editorView, setEditorView] = useState<EditorViewType>(\n    EditorViewType.ContentEditor\n  );\n  const { returnToDictionaryList } = useIntlayer('dictionary-field-editor');\n  const { setFocusedContent } = useFocusDictionaryActions();\n  const { setLocaleDictionaries } = useDictionariesRecordActions();\n\n  useEffect(() => {\n    // Focus the dictionary if not focused\n    setFocusedContent((prev) => ({\n      ...(prev ?? {}),\n      dictionaryKey: dictionary.key,\n      dictionaryLocalId: dictionary.localId,\n    }));\n    setLocaleDictionaries((prev) => ({\n      ...prev,\n      [dictionary.localId!]: dictionary,\n    }));\n  }, []);\n\n  return (\n    <LocaleSwitcherContentProvider\n      availableLocales={config?.internationalization.locales ?? []}\n    >\n      <div className=\"flex size-full flex-col gap-6 px-2\">\n        <Button\n          onClick={onClickDictionaryList}\n          variant={ButtonVariant.HOVERABLE}\n          className=\"z-10 ml-5 mr-auto\"\n          color={ButtonColor.TEXT}\n          Icon={ArrowLeft}\n          label={returnToDictionaryList.label.value}\n        >\n          {returnToDictionaryList.text}\n        </Button>\n\n        <SwitchSelector\n          defaultValue={editorView}\n          onChange={(value) => setEditorView(value)}\n          color={SwitchSelectorColor.TEXT}\n          size={SwitchSelectorSize.SM}\n          className=\"m-auto w-full max-w-xl\"\n          choices={[\n            {\n              content: 'Details',\n              value: EditorViewType.DetailsEditor,\n            },\n            {\n              content: 'Structure',\n              value: EditorViewType.StructureEditor,\n            },\n            {\n              content: 'Content',\n              value: EditorViewType.ContentEditor,\n            },\n            {\n              content: 'JSON',\n              value: EditorViewType.JSONEditor,\n            },\n          ].filter(\n            ({ value }) =>\n              !(\n                !mode.includes('remote') &&\n                value === EditorViewType.DetailsEditor\n              )\n          )}\n        />\n\n        {editorView === EditorViewType.DetailsEditor && (\n          <DictionaryDetailsForm dictionary={dictionary} />\n        )}\n        {editorView === EditorViewType.StructureEditor && (\n          <StructureEditor dictionary={dictionary} />\n        )}\n        {editorView === EditorViewType.ContentEditor && (\n          <ContentEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n        )}\n        {editorView === EditorViewType.JSONEditor && (\n          <JSONEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n        )}\n\n        <SaveForm\n          dictionary={dictionary}\n          mode={mode}\n          onDelete={() => {\n            setFocusedContent(null);\n            onDelete?.();\n          }}\n        />\n      </div>\n    </LocaleSwitcherContentProvider>\n  );\n};\n"],"names":["useConfiguration","useState","useIntlayer","useFocusDictionaryActions","useDictionariesRecordActions","useEffect","jsx","LocaleSwitcherContentProvider","jsxs","Button","ButtonVariant","ButtonColor","ArrowLeft","SwitchSelector","SwitchSelectorColor","SwitchSelectorSize","DictionaryDetailsForm","StructureEditor","ContentEditor","JSONEditor","SaveForm"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,SAASA,YAAAA,iBAAA;AACf,QAAM,CAAC,YAAY,aAAa,IAAIC,aAAAA;AAAAA,IAClC;AAAA;AAAA,EAAA;AAEF,QAAM,EAAE,uBAAA,IAA2BC,cAAAA,YAAY,yBAAyB;AACxE,QAAM,EAAE,kBAAA,IAAsBC,sCAAA;AAC9B,QAAM,EAAE,sBAAA,IAA0BC,yCAAA;AAElCC,eAAAA,UAAU,MAAM;AAEd,sBAAkB,CAAC,UAAU;AAAA,MAC3B,GAAI,QAAQ,CAAA;AAAA,MACZ,eAAe,WAAW;AAAA,MAC1B,mBAAmB,WAAW;AAAA,IAAA,EAC9B;AACF,0BAAsB,CAAC,UAAU;AAAA,MAC/B,GAAG;AAAA,MACH,CAAC,WAAW,OAAQ,GAAG;AAAA,IAAA,EACvB;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,SACEC,2BAAAA;AAAAA,IAACC,sEAAAA;AAAAA,IAAA;AAAA,MACC,kBAAkB,QAAQ,qBAAqB,WAAW,CAAA;AAAA,MAE1D,UAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,sCACb,UAAA;AAAA,QAAAF,2BAAAA;AAAAA,UAACG,yBAAAA;AAAAA,UAAA;AAAA,YACC,SAAS;AAAA,YACT,SAASC,yBAAAA,cAAc;AAAA,YACvB,WAAU;AAAA,YACV,OAAOC,yBAAAA,YAAY;AAAA,YACnB,MAAMC,YAAAA;AAAAA,YACN,OAAO,uBAAuB,MAAM;AAAA,YAEnC,UAAA,uBAAuB;AAAA,UAAA;AAAA,QAAA;AAAA,QAG1BN,2BAAAA;AAAAA,UAACO,gCAAAA;AAAAA,UAAA;AAAA,YACC,cAAc;AAAA,YACd,UAAU,CAAC,UAAU,cAAc,KAAK;AAAA,YACxC,OAAOC,gCAAAA,oBAAoB;AAAA,YAC3B,MAAMC,gCAAAA,mBAAmB;AAAA,YACzB,WAAU;AAAA,YACV,SAAS;AAAA,cACP;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA;AAAA,cAAA;AAAA,cAET;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA;AAAA,cAAA;AAAA,cAET;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA;AAAA,cAAA;AAAA,cAET;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA;AAAA,cAAA;AAAA,YACT,EACA;AAAA,cACA,CAAC,EAAE,MAAA,MACD,EACE,CAAC,KAAK,SAAS,QAAQ,KACvB,UAAU;AAAA,YAAA;AAAA,UAEhB;AAAA,QAAA;AAAA,QAGD,eAAe,KACdT,2BAAAA,IAACU,yEAAAA,uBAAA,EAAsB,WAAA,CAAwB;AAAA,QAEhD,eAAe,KACdV,2BAAAA,IAACW,iDAAAA,iBAAA,EAAgB,WAAA,CAAwB;AAAA,QAE1C,eAAe,KACdX,2BAAAA,IAACY,+CAAAA,eAAA,EAAc,YAAwB,YAAwB;AAAA,QAEhE,eAAe,KACdZ,2BAAAA,IAACa,4CAAAA,YAAA,EAAW,YAAwB,YAAwB;AAAA,QAG9Db,2BAAAA;AAAAA,UAACc,mDAAAA;AAAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,UAAU,MAAM;AACd,gCAAkB,IAAI;AACtB,yBAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"DictionaryFieldEditor.cjs","sources":["../../../src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx"],"sourcesContent":["'use client';\n\nimport type { Dictionary } from '@intlayer/core';\nimport {\n  useConfiguration,\n  useDictionariesRecordActions,\n  useFocusDictionaryActions,\n} from '@intlayer/editor-react';\nimport { ArrowLeft } from 'lucide-react';\nimport { useEffect, useState, type FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, ButtonColor, ButtonVariant } from '../Button';\nimport { LocaleSwitcherContentProvider } from '../LocaleSwitcherContentDropDown';\nimport {\n  SwitchSelector,\n  SwitchSelectorColor,\n  SwitchSelectorSize,\n} from '../SwitchSelector';\nimport { ContentEditor } from './ContentEditor';\nimport { DictionaryDetailsForm } from './DictionaryDetails/DictionaryDetailsForm';\nimport { JSONEditor } from './JSONEditor';\nimport { SaveForm } from './SaveForm/SaveForm';\nimport { StructureEditor } from './StructureEditor';\n\ntype DictionaryFieldEditorProps = {\n  dictionary: Dictionary;\n  onClickDictionaryList?: () => void;\n  onDelete?: () => void;\n  onSave?: () => void;\n  isDarkMode?: boolean;\n  mode: ('local' | 'remote')[];\n};\n\nenum EditorViewType {\n  DetailsEditor,\n  ContentEditor,\n  StructureEditor,\n  JSONEditor,\n}\n\nexport const DictionaryFieldEditor: FC<DictionaryFieldEditorProps> = ({\n  dictionary,\n  onClickDictionaryList,\n  isDarkMode,\n  mode,\n  onDelete,\n  onSave,\n}) => {\n  const config = useConfiguration();\n  const [editorView, setEditorView] = useState<EditorViewType>(\n    EditorViewType.ContentEditor\n  );\n  const { returnToDictionaryList } = useIntlayer('dictionary-field-editor');\n  const { setFocusedContent } = useFocusDictionaryActions();\n  const { setLocaleDictionaries } = useDictionariesRecordActions();\n\n  useEffect(() => {\n    // Focus the dictionary if not focused\n    setFocusedContent((prev) => ({\n      ...(prev ?? {}),\n      dictionaryKey: dictionary.key,\n      dictionaryLocalId: dictionary.localId,\n    }));\n    setLocaleDictionaries((prev) => ({\n      ...prev,\n      [dictionary.localId!]: dictionary,\n    }));\n  }, []);\n\n  return (\n    <LocaleSwitcherContentProvider\n      availableLocales={config?.internationalization.locales ?? []}\n    >\n      <div className=\"flex size-full flex-col gap-6 px-2\">\n        <Button\n          onClick={onClickDictionaryList}\n          variant={ButtonVariant.HOVERABLE}\n          className=\"z-10 ml-5 mr-auto\"\n          color={ButtonColor.TEXT}\n          Icon={ArrowLeft}\n          label={returnToDictionaryList.label.value}\n        >\n          {returnToDictionaryList.text}\n        </Button>\n\n        <SwitchSelector\n          defaultValue={editorView}\n          onChange={(value) => setEditorView(value)}\n          color={SwitchSelectorColor.TEXT}\n          size={SwitchSelectorSize.SM}\n          className=\"m-auto w-full max-w-xl\"\n          choices={[\n            {\n              content: 'Details',\n              value: EditorViewType.DetailsEditor,\n            },\n            {\n              content: 'Structure',\n              value: EditorViewType.StructureEditor,\n            },\n            {\n              content: 'Content',\n              value: EditorViewType.ContentEditor,\n            },\n            {\n              content: 'JSON',\n              value: EditorViewType.JSONEditor,\n            },\n          ].filter(\n            ({ value }) =>\n              !(\n                !mode.includes('remote') &&\n                value === EditorViewType.DetailsEditor\n              )\n          )}\n        />\n\n        {editorView === EditorViewType.DetailsEditor && (\n          <DictionaryDetailsForm dictionary={dictionary} />\n        )}\n        {editorView === EditorViewType.StructureEditor && (\n          <StructureEditor dictionary={dictionary} />\n        )}\n        {editorView === EditorViewType.ContentEditor && (\n          <ContentEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n        )}\n        {editorView === EditorViewType.JSONEditor && (\n          <JSONEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n        )}\n\n        <SaveForm\n          dictionary={dictionary}\n          mode={mode}\n          onDelete={() => {\n            setFocusedContent(null);\n            onDelete?.();\n          }}\n          onSave={onSave}\n        />\n      </div>\n    </LocaleSwitcherContentProvider>\n  );\n};\n"],"names":["useConfiguration","useState","useIntlayer","useFocusDictionaryActions","useDictionariesRecordActions","useEffect","jsx","LocaleSwitcherContentProvider","jsxs","Button","ButtonVariant","ButtonColor","ArrowLeft","SwitchSelector","SwitchSelectorColor","SwitchSelectorSize","DictionaryDetailsForm","StructureEditor","ContentEditor","JSONEditor","SaveForm"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,SAASA,YAAAA,iBAAA;AACf,QAAM,CAAC,YAAY,aAAa,IAAIC,aAAAA;AAAAA,IAClC;AAAA;AAAA,EAAA;AAEF,QAAM,EAAE,uBAAA,IAA2BC,cAAAA,YAAY,yBAAyB;AACxE,QAAM,EAAE,kBAAA,IAAsBC,sCAAA;AAC9B,QAAM,EAAE,sBAAA,IAA0BC,yCAAA;AAElCC,eAAAA,UAAU,MAAM;AAEd,sBAAkB,CAAC,UAAU;AAAA,MAC3B,GAAI,QAAQ,CAAA;AAAA,MACZ,eAAe,WAAW;AAAA,MAC1B,mBAAmB,WAAW;AAAA,IAAA,EAC9B;AACF,0BAAsB,CAAC,UAAU;AAAA,MAC/B,GAAG;AAAA,MACH,CAAC,WAAW,OAAQ,GAAG;AAAA,IAAA,EACvB;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,SACEC,2BAAAA;AAAAA,IAACC,sEAAAA;AAAAA,IAAA;AAAA,MACC,kBAAkB,QAAQ,qBAAqB,WAAW,CAAA;AAAA,MAE1D,UAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,sCACb,UAAA;AAAA,QAAAF,2BAAAA;AAAAA,UAACG,yBAAAA;AAAAA,UAAA;AAAA,YACC,SAAS;AAAA,YACT,SAASC,yBAAAA,cAAc;AAAA,YACvB,WAAU;AAAA,YACV,OAAOC,yBAAAA,YAAY;AAAA,YACnB,MAAMC,YAAAA;AAAAA,YACN,OAAO,uBAAuB,MAAM;AAAA,YAEnC,UAAA,uBAAuB;AAAA,UAAA;AAAA,QAAA;AAAA,QAG1BN,2BAAAA;AAAAA,UAACO,gCAAAA;AAAAA,UAAA;AAAA,YACC,cAAc;AAAA,YACd,UAAU,CAAC,UAAU,cAAc,KAAK;AAAA,YACxC,OAAOC,gCAAAA,oBAAoB;AAAA,YAC3B,MAAMC,gCAAAA,mBAAmB;AAAA,YACzB,WAAU;AAAA,YACV,SAAS;AAAA,cACP;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA;AAAA,cAAA;AAAA,cAET;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA;AAAA,cAAA;AAAA,cAET;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA;AAAA,cAAA;AAAA,cAET;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA;AAAA,cAAA;AAAA,YACT,EACA;AAAA,cACA,CAAC,EAAE,MAAA,MACD,EACE,CAAC,KAAK,SAAS,QAAQ,KACvB,UAAU;AAAA,YAAA;AAAA,UAEhB;AAAA,QAAA;AAAA,QAGD,eAAe,KACdT,2BAAAA,IAACU,yEAAAA,uBAAA,EAAsB,WAAA,CAAwB;AAAA,QAEhD,eAAe,KACdV,2BAAAA,IAACW,iDAAAA,iBAAA,EAAgB,WAAA,CAAwB;AAAA,QAE1C,eAAe,KACdX,2BAAAA,IAACY,+CAAAA,eAAA,EAAc,YAAwB,YAAwB;AAAA,QAEhE,eAAe,KACdZ,2BAAAA,IAACa,4CAAAA,YAAA,EAAW,YAAwB,YAAwB;AAAA,QAG9Db,2BAAAA;AAAAA,UAACc,mDAAAA;AAAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,UAAU,MAAM;AACd,gCAAkB,IAAI;AACtB,yBAAA;AAAA,YACF;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;;"}

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

@@ -4,6 +4,7 @@ type DictionaryFieldEditorProps = {
     dictionary: Dictionary;
     onClickDictionaryList?: () => void;
     onDelete?: () => void;
+    onSave?: () => void;
     isDarkMode?: boolean;
     mode: ('local' | 'remote')[];
 };

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

@@ -1 +1 @@
-{"version":3,"file":"DictionaryFieldEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAOjD,OAAO,EAAuB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAerD,KAAK,0BAA0B,GAAG;IAChC,UAAU,EAAE,UAAU,CAAC;IACvB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,CAAC,OAAO,GAAG,QAAQ,CAAC,EAAE,CAAC;CAC9B,CAAC;AASF,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAoGhE,CAAC"}
+{"version":3,"file":"DictionaryFieldEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAOjD,OAAO,EAAuB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAerD,KAAK,0BAA0B,GAAG;IAChC,UAAU,EAAE,UAAU,CAAC;IACvB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,CAAC,OAAO,GAAG,QAAQ,CAAC,EAAE,CAAC;CAC9B,CAAC;AASF,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAsGhE,CAAC"}

package/dist/components/DictionaryFieldEditor/DictionaryFieldEditor.mjs

@@ -29,7 +29,8 @@ const DictionaryFieldEditor = ({
   onClickDictionaryList,
   isDarkMode,
   mode,
-  onDelete
+  onDelete,
+  onSave
 }) => {
   const config = useConfiguration();
   const [editorView, setEditorView] = useState(
@@ -113,7 +114,8 @@ const DictionaryFieldEditor = ({
             onDelete: () => {
               setFocusedContent(null);
               onDelete?.();
-            }
+            },
+            onSave
           }
         )
       ] })

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

@@ -1 +1 @@
-{"version":3,"file":"DictionaryFieldEditor.mjs","sources":["../../../src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx"],"sourcesContent":["'use client';\n\nimport type { Dictionary } from '@intlayer/core';\nimport {\n  useConfiguration,\n  useDictionariesRecordActions,\n  useFocusDictionaryActions,\n} from '@intlayer/editor-react';\nimport { ArrowLeft } from 'lucide-react';\nimport { useEffect, useState, type FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, ButtonColor, ButtonVariant } from '../Button';\nimport { LocaleSwitcherContentProvider } from '../LocaleSwitcherContentDropDown';\nimport {\n  SwitchSelector,\n  SwitchSelectorColor,\n  SwitchSelectorSize,\n} from '../SwitchSelector';\nimport { ContentEditor } from './ContentEditor';\nimport { DictionaryDetailsForm } from './DictionaryDetails/DictionaryDetailsForm';\nimport { JSONEditor } from './JSONEditor';\nimport { SaveForm } from './SaveForm/SaveForm';\nimport { StructureEditor } from './StructureEditor';\n\ntype DictionaryFieldEditorProps = {\n  dictionary: Dictionary;\n  onClickDictionaryList?: () => void;\n  onDelete?: () => void;\n  isDarkMode?: boolean;\n  mode: ('local' | 'remote')[];\n};\n\nenum EditorViewType {\n  DetailsEditor,\n  ContentEditor,\n  StructureEditor,\n  JSONEditor,\n}\n\nexport const DictionaryFieldEditor: FC<DictionaryFieldEditorProps> = ({\n  dictionary,\n  onClickDictionaryList,\n  isDarkMode,\n  mode,\n  onDelete,\n}) => {\n  const config = useConfiguration();\n  const [editorView, setEditorView] = useState<EditorViewType>(\n    EditorViewType.ContentEditor\n  );\n  const { returnToDictionaryList } = useIntlayer('dictionary-field-editor');\n  const { setFocusedContent } = useFocusDictionaryActions();\n  const { setLocaleDictionaries } = useDictionariesRecordActions();\n\n  useEffect(() => {\n    // Focus the dictionary if not focused\n    setFocusedContent((prev) => ({\n      ...(prev ?? {}),\n      dictionaryKey: dictionary.key,\n      dictionaryLocalId: dictionary.localId,\n    }));\n    setLocaleDictionaries((prev) => ({\n      ...prev,\n      [dictionary.localId!]: dictionary,\n    }));\n  }, []);\n\n  return (\n    <LocaleSwitcherContentProvider\n      availableLocales={config?.internationalization.locales ?? []}\n    >\n      <div className=\"flex size-full flex-col gap-6 px-2\">\n        <Button\n          onClick={onClickDictionaryList}\n          variant={ButtonVariant.HOVERABLE}\n          className=\"z-10 ml-5 mr-auto\"\n          color={ButtonColor.TEXT}\n          Icon={ArrowLeft}\n          label={returnToDictionaryList.label.value}\n        >\n          {returnToDictionaryList.text}\n        </Button>\n\n        <SwitchSelector\n          defaultValue={editorView}\n          onChange={(value) => setEditorView(value)}\n          color={SwitchSelectorColor.TEXT}\n          size={SwitchSelectorSize.SM}\n          className=\"m-auto w-full max-w-xl\"\n          choices={[\n            {\n              content: 'Details',\n              value: EditorViewType.DetailsEditor,\n            },\n            {\n              content: 'Structure',\n              value: EditorViewType.StructureEditor,\n            },\n            {\n              content: 'Content',\n              value: EditorViewType.ContentEditor,\n            },\n            {\n              content: 'JSON',\n              value: EditorViewType.JSONEditor,\n            },\n          ].filter(\n            ({ value }) =>\n              !(\n                !mode.includes('remote') &&\n                value === EditorViewType.DetailsEditor\n              )\n          )}\n        />\n\n        {editorView === EditorViewType.DetailsEditor && (\n          <DictionaryDetailsForm dictionary={dictionary} />\n        )}\n        {editorView === EditorViewType.StructureEditor && (\n          <StructureEditor dictionary={dictionary} />\n        )}\n        {editorView === EditorViewType.ContentEditor && (\n          <ContentEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n        )}\n        {editorView === EditorViewType.JSONEditor && (\n          <JSONEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n        )}\n\n        <SaveForm\n          dictionary={dictionary}\n          mode={mode}\n          onDelete={() => {\n            setFocusedContent(null);\n            onDelete?.();\n          }}\n        />\n      </div>\n    </LocaleSwitcherContentProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAuCO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,SAAS,iBAAA;AACf,QAAM,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA;AAAA,EAAA;AAEF,QAAM,EAAE,uBAAA,IAA2B,YAAY,yBAAyB;AACxE,QAAM,EAAE,kBAAA,IAAsB,0BAAA;AAC9B,QAAM,EAAE,sBAAA,IAA0B,6BAAA;AAElC,YAAU,MAAM;AAEd,sBAAkB,CAAC,UAAU;AAAA,MAC3B,GAAI,QAAQ,CAAA;AAAA,MACZ,eAAe,WAAW;AAAA,MAC1B,mBAAmB,WAAW;AAAA,IAAA,EAC9B;AACF,0BAAsB,CAAC,UAAU;AAAA,MAC/B,GAAG;AAAA,MACH,CAAC,WAAW,OAAQ,GAAG;AAAA,IAAA,EACvB;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,kBAAkB,QAAQ,qBAAqB,WAAW,CAAA;AAAA,MAE1D,UAAA,qBAAC,OAAA,EAAI,WAAU,sCACb,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS;AAAA,YACT,SAAS,cAAc;AAAA,YACvB,WAAU;AAAA,YACV,OAAO,YAAY;AAAA,YACnB,MAAM;AAAA,YACN,OAAO,uBAAuB,MAAM;AAAA,YAEnC,UAAA,uBAAuB;AAAA,UAAA;AAAA,QAAA;AAAA,QAG1B;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,cAAc;AAAA,YACd,UAAU,CAAC,UAAU,cAAc,KAAK;AAAA,YACxC,OAAO,oBAAoB;AAAA,YAC3B,MAAM,mBAAmB;AAAA,YACzB,WAAU;AAAA,YACV,SAAS;AAAA,cACP;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA;AAAA,cAAA;AAAA,cAET;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA;AAAA,cAAA;AAAA,cAET;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA;AAAA,cAAA;AAAA,cAET;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA;AAAA,cAAA;AAAA,YACT,EACA;AAAA,cACA,CAAC,EAAE,MAAA,MACD,EACE,CAAC,KAAK,SAAS,QAAQ,KACvB,UAAU;AAAA,YAAA;AAAA,UAEhB;AAAA,QAAA;AAAA,QAGD,eAAe,KACd,oBAAC,uBAAA,EAAsB,WAAA,CAAwB;AAAA,QAEhD,eAAe,KACd,oBAAC,iBAAA,EAAgB,WAAA,CAAwB;AAAA,QAE1C,eAAe,KACd,oBAAC,eAAA,EAAc,YAAwB,YAAwB;AAAA,QAEhE,eAAe,KACd,oBAAC,YAAA,EAAW,YAAwB,YAAwB;AAAA,QAG9D;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,UAAU,MAAM;AACd,gCAAkB,IAAI;AACtB,yBAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"DictionaryFieldEditor.mjs","sources":["../../../src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx"],"sourcesContent":["'use client';\n\nimport type { Dictionary } from '@intlayer/core';\nimport {\n  useConfiguration,\n  useDictionariesRecordActions,\n  useFocusDictionaryActions,\n} from '@intlayer/editor-react';\nimport { ArrowLeft } from 'lucide-react';\nimport { useEffect, useState, type FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, ButtonColor, ButtonVariant } from '../Button';\nimport { LocaleSwitcherContentProvider } from '../LocaleSwitcherContentDropDown';\nimport {\n  SwitchSelector,\n  SwitchSelectorColor,\n  SwitchSelectorSize,\n} from '../SwitchSelector';\nimport { ContentEditor } from './ContentEditor';\nimport { DictionaryDetailsForm } from './DictionaryDetails/DictionaryDetailsForm';\nimport { JSONEditor } from './JSONEditor';\nimport { SaveForm } from './SaveForm/SaveForm';\nimport { StructureEditor } from './StructureEditor';\n\ntype DictionaryFieldEditorProps = {\n  dictionary: Dictionary;\n  onClickDictionaryList?: () => void;\n  onDelete?: () => void;\n  onSave?: () => void;\n  isDarkMode?: boolean;\n  mode: ('local' | 'remote')[];\n};\n\nenum EditorViewType {\n  DetailsEditor,\n  ContentEditor,\n  StructureEditor,\n  JSONEditor,\n}\n\nexport const DictionaryFieldEditor: FC<DictionaryFieldEditorProps> = ({\n  dictionary,\n  onClickDictionaryList,\n  isDarkMode,\n  mode,\n  onDelete,\n  onSave,\n}) => {\n  const config = useConfiguration();\n  const [editorView, setEditorView] = useState<EditorViewType>(\n    EditorViewType.ContentEditor\n  );\n  const { returnToDictionaryList } = useIntlayer('dictionary-field-editor');\n  const { setFocusedContent } = useFocusDictionaryActions();\n  const { setLocaleDictionaries } = useDictionariesRecordActions();\n\n  useEffect(() => {\n    // Focus the dictionary if not focused\n    setFocusedContent((prev) => ({\n      ...(prev ?? {}),\n      dictionaryKey: dictionary.key,\n      dictionaryLocalId: dictionary.localId,\n    }));\n    setLocaleDictionaries((prev) => ({\n      ...prev,\n      [dictionary.localId!]: dictionary,\n    }));\n  }, []);\n\n  return (\n    <LocaleSwitcherContentProvider\n      availableLocales={config?.internationalization.locales ?? []}\n    >\n      <div className=\"flex size-full flex-col gap-6 px-2\">\n        <Button\n          onClick={onClickDictionaryList}\n          variant={ButtonVariant.HOVERABLE}\n          className=\"z-10 ml-5 mr-auto\"\n          color={ButtonColor.TEXT}\n          Icon={ArrowLeft}\n          label={returnToDictionaryList.label.value}\n        >\n          {returnToDictionaryList.text}\n        </Button>\n\n        <SwitchSelector\n          defaultValue={editorView}\n          onChange={(value) => setEditorView(value)}\n          color={SwitchSelectorColor.TEXT}\n          size={SwitchSelectorSize.SM}\n          className=\"m-auto w-full max-w-xl\"\n          choices={[\n            {\n              content: 'Details',\n              value: EditorViewType.DetailsEditor,\n            },\n            {\n              content: 'Structure',\n              value: EditorViewType.StructureEditor,\n            },\n            {\n              content: 'Content',\n              value: EditorViewType.ContentEditor,\n            },\n            {\n              content: 'JSON',\n              value: EditorViewType.JSONEditor,\n            },\n          ].filter(\n            ({ value }) =>\n              !(\n                !mode.includes('remote') &&\n                value === EditorViewType.DetailsEditor\n              )\n          )}\n        />\n\n        {editorView === EditorViewType.DetailsEditor && (\n          <DictionaryDetailsForm dictionary={dictionary} />\n        )}\n        {editorView === EditorViewType.StructureEditor && (\n          <StructureEditor dictionary={dictionary} />\n        )}\n        {editorView === EditorViewType.ContentEditor && (\n          <ContentEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n        )}\n        {editorView === EditorViewType.JSONEditor && (\n          <JSONEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n        )}\n\n        <SaveForm\n          dictionary={dictionary}\n          mode={mode}\n          onDelete={() => {\n            setFocusedContent(null);\n            onDelete?.();\n          }}\n          onSave={onSave}\n        />\n      </div>\n    </LocaleSwitcherContentProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAwCO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,SAAS,iBAAA;AACf,QAAM,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA;AAAA,EAAA;AAEF,QAAM,EAAE,uBAAA,IAA2B,YAAY,yBAAyB;AACxE,QAAM,EAAE,kBAAA,IAAsB,0BAAA;AAC9B,QAAM,EAAE,sBAAA,IAA0B,6BAAA;AAElC,YAAU,MAAM;AAEd,sBAAkB,CAAC,UAAU;AAAA,MAC3B,GAAI,QAAQ,CAAA;AAAA,MACZ,eAAe,WAAW;AAAA,MAC1B,mBAAmB,WAAW;AAAA,IAAA,EAC9B;AACF,0BAAsB,CAAC,UAAU;AAAA,MAC/B,GAAG;AAAA,MACH,CAAC,WAAW,OAAQ,GAAG;AAAA,IAAA,EACvB;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,kBAAkB,QAAQ,qBAAqB,WAAW,CAAA;AAAA,MAE1D,UAAA,qBAAC,OAAA,EAAI,WAAU,sCACb,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS;AAAA,YACT,SAAS,cAAc;AAAA,YACvB,WAAU;AAAA,YACV,OAAO,YAAY;AAAA,YACnB,MAAM;AAAA,YACN,OAAO,uBAAuB,MAAM;AAAA,YAEnC,UAAA,uBAAuB;AAAA,UAAA;AAAA,QAAA;AAAA,QAG1B;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,cAAc;AAAA,YACd,UAAU,CAAC,UAAU,cAAc,KAAK;AAAA,YACxC,OAAO,oBAAoB;AAAA,YAC3B,MAAM,mBAAmB;AAAA,YACzB,WAAU;AAAA,YACV,SAAS;AAAA,cACP;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA;AAAA,cAAA;AAAA,cAET;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA;AAAA,cAAA;AAAA,cAET;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA;AAAA,cAAA;AAAA,cAET;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA;AAAA,cAAA;AAAA,YACT,EACA;AAAA,cACA,CAAC,EAAE,MAAA,MACD,EACE,CAAC,KAAK,SAAS,QAAQ,KACvB,UAAU;AAAA,YAAA;AAAA,UAEhB;AAAA,QAAA;AAAA,QAGD,eAAe,KACd,oBAAC,uBAAA,EAAsB,WAAA,CAAwB;AAAA,QAEhD,eAAe,KACd,oBAAC,iBAAA,EAAgB,WAAA,CAAwB;AAAA,QAE1C,eAAe,KACd,oBAAC,eAAA,EAAc,YAAwB,YAAwB;AAAA,QAEhE,eAAe,KACd,oBAAC,YAAA,EAAW,YAAwB,YAAwB;AAAA,QAG9D;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,UAAU,MAAM;AACd,gCAAkB,IAAI;AACtB,yBAAA;AAAA,YACF;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const configuration = require("@intlayer/config/built");
+const defaultConfiguration = require("@intlayer/config/built");
 const core = require("@intlayer/core");
 const editorReact = require("@intlayer/editor-react");
 const lucideReact = require("lucide-react");
@@ -16,7 +16,7 @@ const NavigationViewNode = ({
   keyPath,
   dictionaryKey
 }) => {
-  const { locales } = configuration?.internationalization;
+  const { locales } = defaultConfiguration?.internationalization;
   const section = core.getContentNodeByKeyPath(sectionProp, keyPath);
   const { addEditedContent } = editorReact.useEditedContentActions();
   const { setFocusedContentKeyPath, focusedContent } = editorReact.useFocusDictionary();

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationViewNode.cjs","sources":["../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"sourcesContent":["import configuration from '@intlayer/config/built';\n\nimport {\n  getContentNodeByKeyPath,\n  getEmptyNode,\n  getNodeType,\n  isSameKeyPath,\n  NodeType,\n  type ContentNode,\n  type KeyPath,\n} from '@intlayer/core';\nimport {\n  useEditedContentActions,\n  useFocusDictionary,\n} from '@intlayer/editor-react';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { camelCaseToSentence } from '../../../utils/camelCase';\nimport { Accordion } from '../../Accordion';\nimport {\n  Button,\n  ButtonColor,\n  ButtonTextAlign,\n  ButtonVariant,\n} from '../../Button';\nimport { getIsEditableSection } from '../getIsEditableSection';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: ContentNode;\n};\n\nexport const NavigationViewNode: FC<NodeWrapperProps> = ({\n  section: sectionProp,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const { locales } = configuration?.internationalization;\n  const section = getContentNodeByKeyPath(sectionProp, keyPath);\n  const { addEditedContent } = useEditedContentActions();\n  const { setFocusedContentKeyPath, focusedContent } = useFocusDictionary();\n  const { addNewElement, goToField } = useIntlayer('navigation-view');\n  const nodeType = getNodeType(section);\n  const getIsSelected = (keyPath: KeyPath[]) =>\n    (focusedContent?.keyPath?.length ?? 0) > 0 &&\n    isSameKeyPath(keyPath, focusedContent?.keyPath ?? []);\n  const isEditableSubSection = getIsEditableSection(section);\n\n  if (!section) return <></>;\n\n  if (isEditableSubSection) {\n    return (\n      <Button\n        label={goToField.label.value}\n        variant={ButtonVariant.HOVERABLE}\n        color={ButtonColor.TEXT}\n        className=\"w-full\"\n        onClick={() => setFocusedContentKeyPath(keyPath)}\n        IconRight={ChevronRight}\n      >\n        {camelCaseToSentence(keyPath[keyPath.length - 1].key as string)}\n      </Button>\n    );\n  }\n\n  if (typeof section === 'object') {\n    if (nodeType === NodeType.ReactNode) {\n      return <>React Node</>;\n    }\n\n    if (nodeType === NodeType.Translation) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {locales.map((translationKey) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Translation, key: translationKey },\n            ];\n\n            return (\n              <NavigationViewNode\n                key={translationKey}\n                keyPath={childKeyPath}\n                section={sectionProp}\n                dictionaryKey={dictionaryKey}\n              />\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Enumeration || nodeType === NodeType.Condition) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {Object.keys(\n            (section as any)[nodeType as unknown as keyof typeof section]\n          ).map((key) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: nodeType, key },\n            ];\n\n            return (\n              <NavigationViewNode\n                key={key}\n                keyPath={childKeyPath}\n                section={sectionProp}\n                dictionaryKey={dictionaryKey}\n              />\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Array) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {(section as unknown as ContentNode[]).map((_, index) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Array, key: index },\n            ];\n\n            return (\n              <NavigationViewNode\n                key={JSON.stringify(childKeyPath)}\n                keyPath={childKeyPath}\n                section={sectionProp}\n                dictionaryKey={dictionaryKey}\n              />\n            );\n          })}\n\n          <Button\n            label={addNewElement.label.value}\n            variant={ButtonVariant.HOVERABLE}\n            color={ButtonColor.NEUTRAL}\n            textAlign={ButtonTextAlign.LEFT}\n            onClick={() => {\n              const newKeyPath: KeyPath[] = [\n                ...keyPath,\n                {\n                  type: NodeType.Array,\n                  key: (section as unknown as ContentNode[]).length,\n                },\n              ];\n              const sectionArray = section as unknown as ContentNode[];\n              const emptySectionEl =\n                getEmptyNode(\n                  sectionArray[\n                    (sectionArray.length - 1) as keyof typeof sectionArray\n                  ] as ContentNode\n                ) ?? '';\n              addEditedContent(\n                dictionaryKey,\n                emptySectionEl,\n                newKeyPath,\n                false\n              );\n              setFocusedContentKeyPath(newKeyPath);\n            }}\n            Icon={Plus}\n          >\n            {addNewElement.text}\n          </Button>\n        </div>\n      );\n    }\n\n    if (typeof section.nodeType === 'string') {\n      const childKeyPath: KeyPath[] = [\n        ...keyPath,\n        { type: section.nodeType } as KeyPath,\n      ];\n\n      return (\n        <NavigationViewNode\n          keyPath={childKeyPath}\n          section={sectionProp}\n          dictionaryKey={dictionaryKey}\n        />\n      );\n    }\n\n    const sectionArray = Object.keys(section);\n    return (\n      <div className=\"flex w-full max-w-full flex-col justify-between gap-2\">\n        {sectionArray.map((key) => {\n          const childKeyPath: KeyPath[] = [\n            ...keyPath,\n            { type: NodeType.Object, key },\n          ];\n\n          const subSection = getContentNodeByKeyPath(sectionProp, childKeyPath);\n          const isEditableSubSection = getIsEditableSection(subSection);\n\n          if (isEditableSubSection) {\n            return (\n              <Button\n                label={`${goToField.label.value} ${key}`}\n                key={key}\n                isActive={getIsSelected(childKeyPath)}\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                className=\"w-full\"\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                IconRight={ChevronRight}\n              >\n                {camelCaseToSentence(key)}\n              </Button>\n            );\n          }\n\n          return (\n            <Accordion\n              key={key}\n              label={`${goToField.label.value} ${key}`}\n              isActive={getIsSelected(childKeyPath)}\n              onClick={() => setFocusedContentKeyPath(childKeyPath)}\n              header={camelCaseToSentence(key)}\n            >\n              <div className=\"mt-2 flex w-full max-w-full\">\n                <div className=\"flex-1 pl-10\">\n                  <NavigationViewNode\n                    keyPath={childKeyPath}\n                    section={sectionProp}\n                    dictionaryKey={dictionaryKey}\n                  />\n                </div>\n              </div>\n            </Accordion>\n          );\n        })}\n      </div>\n    );\n  }\n\n  return (\n    <>\n      Error loading section --\n      {nodeType}\n      --\n      {JSON.stringify(section)}\n      --\n      {JSON.stringify(keyPath)}\n    </>\n  );\n};\n"],"names":["getContentNodeByKeyPath","useEditedContentActions","useFocusDictionary","useIntlayer","getNodeType","keyPath","isSameKeyPath","getIsEditableSection","jsx","Fragment","Button","ButtonVariant","ButtonColor","ChevronRight","NodeType","jsxs","ButtonTextAlign","sectionArray","getEmptyNode","Plus","isEditableSubSection","Accordion","camelCaseToSentence"],"mappings":"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"}
+{"version":3,"file":"NavigationViewNode.cjs","sources":["../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"sourcesContent":["import configuration from '@intlayer/config/built';\n\nimport {\n  getContentNodeByKeyPath,\n  getEmptyNode,\n  getNodeType,\n  isSameKeyPath,\n  NodeType,\n  type ContentNode,\n  type KeyPath,\n} from '@intlayer/core';\nimport {\n  useEditedContentActions,\n  useFocusDictionary,\n} from '@intlayer/editor-react';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { camelCaseToSentence } from '../../../utils/camelCase';\nimport { Accordion } from '../../Accordion';\nimport {\n  Button,\n  ButtonColor,\n  ButtonTextAlign,\n  ButtonVariant,\n} from '../../Button';\nimport { getIsEditableSection } from '../getIsEditableSection';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: ContentNode;\n};\n\nexport const NavigationViewNode: FC<NodeWrapperProps> = ({\n  section: sectionProp,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const { locales } = configuration?.internationalization;\n  const section = getContentNodeByKeyPath(sectionProp, keyPath);\n  const { addEditedContent } = useEditedContentActions();\n  const { setFocusedContentKeyPath, focusedContent } = useFocusDictionary();\n  const { addNewElement, goToField } = useIntlayer('navigation-view');\n  const nodeType = getNodeType(section);\n  const getIsSelected = (keyPath: KeyPath[]) =>\n    (focusedContent?.keyPath?.length ?? 0) > 0 &&\n    isSameKeyPath(keyPath, focusedContent?.keyPath ?? []);\n  const isEditableSubSection = getIsEditableSection(section);\n\n  if (!section) return <></>;\n\n  if (isEditableSubSection) {\n    return (\n      <Button\n        label={goToField.label.value}\n        variant={ButtonVariant.HOVERABLE}\n        color={ButtonColor.TEXT}\n        className=\"w-full\"\n        onClick={() => setFocusedContentKeyPath(keyPath)}\n        IconRight={ChevronRight}\n      >\n        {camelCaseToSentence(keyPath[keyPath.length - 1].key as string)}\n      </Button>\n    );\n  }\n\n  if (typeof section === 'object') {\n    if (nodeType === NodeType.ReactNode) {\n      return <>React Node</>;\n    }\n\n    if (nodeType === NodeType.Translation) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {locales.map((translationKey) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Translation, key: translationKey },\n            ];\n\n            return (\n              <NavigationViewNode\n                key={translationKey}\n                keyPath={childKeyPath}\n                section={sectionProp}\n                dictionaryKey={dictionaryKey}\n              />\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Enumeration || nodeType === NodeType.Condition) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {Object.keys(\n            (section as any)[nodeType as unknown as keyof typeof section]\n          ).map((key) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: nodeType, key },\n            ];\n\n            return (\n              <NavigationViewNode\n                key={key}\n                keyPath={childKeyPath}\n                section={sectionProp}\n                dictionaryKey={dictionaryKey}\n              />\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Array) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {(section as unknown as ContentNode[]).map((_, index) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Array, key: index },\n            ];\n\n            return (\n              <NavigationViewNode\n                key={JSON.stringify(childKeyPath)}\n                keyPath={childKeyPath}\n                section={sectionProp}\n                dictionaryKey={dictionaryKey}\n              />\n            );\n          })}\n\n          <Button\n            label={addNewElement.label.value}\n            variant={ButtonVariant.HOVERABLE}\n            color={ButtonColor.NEUTRAL}\n            textAlign={ButtonTextAlign.LEFT}\n            onClick={() => {\n              const newKeyPath: KeyPath[] = [\n                ...keyPath,\n                {\n                  type: NodeType.Array,\n                  key: (section as unknown as ContentNode[]).length,\n                },\n              ];\n              const sectionArray = section as unknown as ContentNode[];\n              const emptySectionEl =\n                getEmptyNode(\n                  sectionArray[\n                    (sectionArray.length - 1) as keyof typeof sectionArray\n                  ] as ContentNode\n                ) ?? '';\n              addEditedContent(\n                dictionaryKey,\n                emptySectionEl,\n                newKeyPath,\n                false\n              );\n              setFocusedContentKeyPath(newKeyPath);\n            }}\n            Icon={Plus}\n          >\n            {addNewElement.text}\n          </Button>\n        </div>\n      );\n    }\n\n    if (typeof section.nodeType === 'string') {\n      const childKeyPath: KeyPath[] = [\n        ...keyPath,\n        { type: section.nodeType } as KeyPath,\n      ];\n\n      return (\n        <NavigationViewNode\n          keyPath={childKeyPath}\n          section={sectionProp}\n          dictionaryKey={dictionaryKey}\n        />\n      );\n    }\n\n    const sectionArray = Object.keys(section);\n    return (\n      <div className=\"flex w-full max-w-full flex-col justify-between gap-2\">\n        {sectionArray.map((key) => {\n          const childKeyPath: KeyPath[] = [\n            ...keyPath,\n            { type: NodeType.Object, key },\n          ];\n\n          const subSection = getContentNodeByKeyPath(sectionProp, childKeyPath);\n          const isEditableSubSection = getIsEditableSection(subSection);\n\n          if (isEditableSubSection) {\n            return (\n              <Button\n                label={`${goToField.label.value} ${key}`}\n                key={key}\n                isActive={getIsSelected(childKeyPath)}\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                className=\"w-full\"\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                IconRight={ChevronRight}\n              >\n                {camelCaseToSentence(key)}\n              </Button>\n            );\n          }\n\n          return (\n            <Accordion\n              key={key}\n              label={`${goToField.label.value} ${key}`}\n              isActive={getIsSelected(childKeyPath)}\n              onClick={() => setFocusedContentKeyPath(childKeyPath)}\n              header={camelCaseToSentence(key)}\n            >\n              <div className=\"mt-2 flex w-full max-w-full\">\n                <div className=\"flex-1 pl-10\">\n                  <NavigationViewNode\n                    keyPath={childKeyPath}\n                    section={sectionProp}\n                    dictionaryKey={dictionaryKey}\n                  />\n                </div>\n              </div>\n            </Accordion>\n          );\n        })}\n      </div>\n    );\n  }\n\n  return (\n    <>\n      Error loading section --\n      {nodeType}\n      --\n      {JSON.stringify(section)}\n      --\n      {JSON.stringify(keyPath)}\n    </>\n  );\n};\n"],"names":["configuration","getContentNodeByKeyPath","useEditedContentActions","useFocusDictionary","useIntlayer","getNodeType","keyPath","isSameKeyPath","getIsEditableSection","jsx","Fragment","Button","ButtonVariant","ButtonColor","ChevronRight","NodeType","jsxs","ButtonTextAlign","sectionArray","getEmptyNode","Plus","isEditableSubSection","Accordion","camelCaseToSentence"],"mappings":";;;;;;;;;;;;AA4BO,MAAM,YAAsB,CAAC,YAAY,MAAM,UAAU;AAQzD,MAAM,qBAA2C,CAAC;AAAA,EACvD,SAAS;AAAA,EACT;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,YAAYA,sBAAe;AACnC,QAAM,UAAUC,KAAAA,wBAAwB,aAAa,OAAO;AAC5D,QAAM,EAAE,iBAAA,IAAqBC,oCAAA;AAC7B,QAAM,EAAE,0BAA0B,eAAA,IAAmBC,+BAAA;AACrD,QAAM,EAAE,eAAe,cAAcC,cAAAA,YAAY,iBAAiB;AAClE,QAAM,WAAWC,KAAAA,YAAY,OAAO;AACpC,QAAM,gBAAgB,CAACC,cACpB,gBAAgB,SAAS,UAAU,KAAK,KACzCC,KAAAA,cAAcD,UAAS,gBAAgB,WAAW,CAAA,CAAE;AACtD,QAAM,uBAAuBE,sDAAAA,qBAAqB,OAAO;AAEzD,MAAI,CAAC,QAAS,QAAOC,+BAAAC,WAAAA,UAAA,CAAA,CAAE;AAEvB,MAAI,sBAAsB;AACxB,WACED,2BAAAA;AAAAA,MAACE,yBAAAA;AAAAA,MAAA;AAAA,QACC,OAAO,UAAU,MAAM;AAAA,QACvB,SAASC,yBAAAA,cAAc;AAAA,QACvB,OAAOC,yBAAAA,YAAY;AAAA,QACnB,WAAU;AAAA,QACV,SAAS,MAAM,yBAAyB,OAAO;AAAA,QAC/C,WAAWC,YAAAA;AAAAA,QAEV,8CAAoB,QAAQ,QAAQ,SAAS,CAAC,EAAE,GAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAGpE;AAEA,MAAI,OAAO,YAAY,UAAU;AAC/B,QAAI,aAAaC,KAAAA,SAAS,WAAW;AACnC,mEAAS,UAAA,aAAA,CAAU;AAAA,IACrB;AAEA,QAAI,aAAaA,KAAAA,SAAS,aAAa;AACrC,4CACG,OAAA,EAAI,WAAU,uCACZ,UAAA,QAAQ,IAAI,CAAC,mBAAmB;AAC/B,cAAM,eAA0B;AAAA,UAC9B,GAAG;AAAA,UACH,EAAE,MAAMA,KAAAA,SAAS,aAAa,KAAK,eAAA;AAAA,QAAe;AAGpD,eACEN,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,SAAS;AAAA,YACT,SAAS;AAAA,YACT;AAAA,UAAA;AAAA,UAHK;AAAA,QAAA;AAAA,MAMX,CAAC,EAAA,CACH;AAAA,IAEJ;AAEA,QAAI,aAAaM,KAAAA,SAAS,eAAe,aAAaA,KAAAA,SAAS,WAAW;AACxE,aACEN,2BAAAA,IAAC,OAAA,EAAI,WAAU,uCACZ,UAAA,OAAO;AAAA,QACL,QAAgB,QAA2C;AAAA,MAAA,EAC5D,IAAI,CAAC,QAAQ;AACb,cAAM,eAA0B;AAAA,UAC9B,GAAG;AAAA,UACH,EAAE,MAAM,UAAU,IAAA;AAAA,QAAI;AAGxB,eACEA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,SAAS;AAAA,YACT,SAAS;AAAA,YACT;AAAA,UAAA;AAAA,UAHK;AAAA,QAAA;AAAA,MAMX,CAAC,EAAA,CACH;AAAA,IAEJ;AAEA,QAAI,aAAaM,KAAAA,SAAS,OAAO;AAC/B,aACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,uCACX,UAAA;AAAA,QAAA,QAAqC,IAAI,CAAC,GAAG,UAAU;AACvD,gBAAM,eAA0B;AAAA,YAC9B,GAAG;AAAA,YACH,EAAE,MAAMD,KAAAA,SAAS,OAAO,KAAK,MAAA;AAAA,UAAM;AAGrC,iBACEN,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC,SAAS;AAAA,cACT,SAAS;AAAA,cACT;AAAA,YAAA;AAAA,YAHK,KAAK,UAAU,YAAY;AAAA,UAAA;AAAA,QAMtC,CAAC;AAAA,QAEDA,2BAAAA;AAAAA,UAACE,yBAAAA;AAAAA,UAAA;AAAA,YACC,OAAO,cAAc,MAAM;AAAA,YAC3B,SAASC,yBAAAA,cAAc;AAAA,YACvB,OAAOC,yBAAAA,YAAY;AAAA,YACnB,WAAWI,yBAAAA,gBAAgB;AAAA,YAC3B,SAAS,MAAM;AACb,oBAAM,aAAwB;AAAA,gBAC5B,GAAG;AAAA,gBACH;AAAA,kBACE,MAAMF,KAAAA,SAAS;AAAA,kBACf,KAAM,QAAqC;AAAA,gBAAA;AAAA,cAC7C;AAEF,oBAAMG,gBAAe;AACrB,oBAAM,iBACJC,KAAAA;AAAAA,gBACED,cACGA,cAAa,SAAS,CACzB;AAAA,cAAA,KACG;AACP;AAAA,gBACE;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAEF,uCAAyB,UAAU;AAAA,YACrC;AAAA,YACA,MAAME,YAAAA;AAAAA,YAEL,UAAA,cAAc;AAAA,UAAA;AAAA,QAAA;AAAA,MACjB,GACF;AAAA,IAEJ;AAEA,QAAI,OAAO,QAAQ,aAAa,UAAU;AACxC,YAAM,eAA0B;AAAA,QAC9B,GAAG;AAAA,QACH,EAAE,MAAM,QAAQ,SAAA;AAAA,MAAS;AAG3B,aACEX,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,SAAS;AAAA,UACT;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN;AAEA,UAAM,eAAe,OAAO,KAAK,OAAO;AACxC,0CACG,OAAA,EAAI,WAAU,yDACZ,UAAA,aAAa,IAAI,CAAC,QAAQ;AACzB,YAAM,eAA0B;AAAA,QAC9B,GAAG;AAAA,QACH,EAAE,MAAMM,cAAS,QAAQ,IAAA;AAAA,MAAI;AAG/B,YAAM,aAAad,KAAAA,wBAAwB,aAAa,YAAY;AACpE,YAAMoB,wBAAuBb,sDAAAA,qBAAqB,UAAU;AAE5D,UAAIa,uBAAsB;AACxB,eACEZ,2BAAAA;AAAAA,UAACE,yBAAAA;AAAAA,UAAA;AAAA,YACC,OAAO,GAAG,UAAU,MAAM,KAAK,IAAI,GAAG;AAAA,YAEtC,UAAU,cAAc,YAAY;AAAA,YACpC,SAASC,yBAAAA,cAAc;AAAA,YACvB,OAAOC,yBAAAA,YAAY;AAAA,YACnB,WAAU;AAAA,YACV,SAAS,MAAM,yBAAyB,YAAY;AAAA,YACpD,WAAWC,YAAAA;AAAAA,YAEV,8CAAoB,GAAG;AAAA,UAAA;AAAA,UARnB;AAAA,QAAA;AAAA,MAWX;AAEA,aACEL,2BAAAA;AAAAA,QAACa,+BAAAA;AAAAA,QAAA;AAAA,UAEC,OAAO,GAAG,UAAU,MAAM,KAAK,IAAI,GAAG;AAAA,UACtC,UAAU,cAAc,YAAY;AAAA,UACpC,SAAS,MAAM,yBAAyB,YAAY;AAAA,UACpD,QAAQC,gBAAAA,oBAAoB,GAAG;AAAA,UAE/B,yCAAC,OAAA,EAAI,WAAU,+BACb,UAAAd,2BAAAA,IAAC,OAAA,EAAI,WAAU,gBACb,UAAAA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,SAAS;AAAA,cACT;AAAA,YAAA;AAAA,UAAA,GAEJ,EAAA,CACF;AAAA,QAAA;AAAA,QAdK;AAAA,MAAA;AAAA,IAiBX,CAAC,EAAA,CACH;AAAA,EAEJ;AAEA,SACEO,2BAAAA,KAAAN,qBAAA,EAAE,UAAA;AAAA,IAAA;AAAA,IAEC;AAAA,IAAS;AAAA,IAET,KAAK,UAAU,OAAO;AAAA,IAAE;AAAA,IAExB,KAAK,UAAU,OAAO;AAAA,EAAA,GACzB;AAEJ;;;"}

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

@@ -1,5 +1,5 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import configuration from "@intlayer/config/built";
+import defaultConfiguration from "@intlayer/config/built";
 import { getContentNodeByKeyPath, getNodeType, NodeType, getEmptyNode, isSameKeyPath } from "@intlayer/core";
 import { useEditedContentActions, useFocusDictionary } from "@intlayer/editor-react";
 import { ChevronRight, Plus } from "lucide-react";
@@ -14,7 +14,7 @@ const NavigationViewNode = ({
   keyPath,
   dictionaryKey
 }) => {
-  const { locales } = configuration?.internationalization;
+  const { locales } = defaultConfiguration?.internationalization;
   const section = getContentNodeByKeyPath(sectionProp, keyPath);
   const { addEditedContent } = useEditedContentActions();
   const { setFocusedContentKeyPath, focusedContent } = useFocusDictionary();

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationViewNode.mjs","sources":["../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"sourcesContent":["import configuration from '@intlayer/config/built';\n\nimport {\n  getContentNodeByKeyPath,\n  getEmptyNode,\n  getNodeType,\n  isSameKeyPath,\n  NodeType,\n  type ContentNode,\n  type KeyPath,\n} from '@intlayer/core';\nimport {\n  useEditedContentActions,\n  useFocusDictionary,\n} from '@intlayer/editor-react';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { camelCaseToSentence } from '../../../utils/camelCase';\nimport { Accordion } from '../../Accordion';\nimport {\n  Button,\n  ButtonColor,\n  ButtonTextAlign,\n  ButtonVariant,\n} from '../../Button';\nimport { getIsEditableSection } from '../getIsEditableSection';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: ContentNode;\n};\n\nexport const NavigationViewNode: FC<NodeWrapperProps> = ({\n  section: sectionProp,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const { locales } = configuration?.internationalization;\n  const section = getContentNodeByKeyPath(sectionProp, keyPath);\n  const { addEditedContent } = useEditedContentActions();\n  const { setFocusedContentKeyPath, focusedContent } = useFocusDictionary();\n  const { addNewElement, goToField } = useIntlayer('navigation-view');\n  const nodeType = getNodeType(section);\n  const getIsSelected = (keyPath: KeyPath[]) =>\n    (focusedContent?.keyPath?.length ?? 0) > 0 &&\n    isSameKeyPath(keyPath, focusedContent?.keyPath ?? []);\n  const isEditableSubSection = getIsEditableSection(section);\n\n  if (!section) return <></>;\n\n  if (isEditableSubSection) {\n    return (\n      <Button\n        label={goToField.label.value}\n        variant={ButtonVariant.HOVERABLE}\n        color={ButtonColor.TEXT}\n        className=\"w-full\"\n        onClick={() => setFocusedContentKeyPath(keyPath)}\n        IconRight={ChevronRight}\n      >\n        {camelCaseToSentence(keyPath[keyPath.length - 1].key as string)}\n      </Button>\n    );\n  }\n\n  if (typeof section === 'object') {\n    if (nodeType === NodeType.ReactNode) {\n      return <>React Node</>;\n    }\n\n    if (nodeType === NodeType.Translation) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {locales.map((translationKey) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Translation, key: translationKey },\n            ];\n\n            return (\n              <NavigationViewNode\n                key={translationKey}\n                keyPath={childKeyPath}\n                section={sectionProp}\n                dictionaryKey={dictionaryKey}\n              />\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Enumeration || nodeType === NodeType.Condition) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {Object.keys(\n            (section as any)[nodeType as unknown as keyof typeof section]\n          ).map((key) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: nodeType, key },\n            ];\n\n            return (\n              <NavigationViewNode\n                key={key}\n                keyPath={childKeyPath}\n                section={sectionProp}\n                dictionaryKey={dictionaryKey}\n              />\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Array) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {(section as unknown as ContentNode[]).map((_, index) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Array, key: index },\n            ];\n\n            return (\n              <NavigationViewNode\n                key={JSON.stringify(childKeyPath)}\n                keyPath={childKeyPath}\n                section={sectionProp}\n                dictionaryKey={dictionaryKey}\n              />\n            );\n          })}\n\n          <Button\n            label={addNewElement.label.value}\n            variant={ButtonVariant.HOVERABLE}\n            color={ButtonColor.NEUTRAL}\n            textAlign={ButtonTextAlign.LEFT}\n            onClick={() => {\n              const newKeyPath: KeyPath[] = [\n                ...keyPath,\n                {\n                  type: NodeType.Array,\n                  key: (section as unknown as ContentNode[]).length,\n                },\n              ];\n              const sectionArray = section as unknown as ContentNode[];\n              const emptySectionEl =\n                getEmptyNode(\n                  sectionArray[\n                    (sectionArray.length - 1) as keyof typeof sectionArray\n                  ] as ContentNode\n                ) ?? '';\n              addEditedContent(\n                dictionaryKey,\n                emptySectionEl,\n                newKeyPath,\n                false\n              );\n              setFocusedContentKeyPath(newKeyPath);\n            }}\n            Icon={Plus}\n          >\n            {addNewElement.text}\n          </Button>\n        </div>\n      );\n    }\n\n    if (typeof section.nodeType === 'string') {\n      const childKeyPath: KeyPath[] = [\n        ...keyPath,\n        { type: section.nodeType } as KeyPath,\n      ];\n\n      return (\n        <NavigationViewNode\n          keyPath={childKeyPath}\n          section={sectionProp}\n          dictionaryKey={dictionaryKey}\n        />\n      );\n    }\n\n    const sectionArray = Object.keys(section);\n    return (\n      <div className=\"flex w-full max-w-full flex-col justify-between gap-2\">\n        {sectionArray.map((key) => {\n          const childKeyPath: KeyPath[] = [\n            ...keyPath,\n            { type: NodeType.Object, key },\n          ];\n\n          const subSection = getContentNodeByKeyPath(sectionProp, childKeyPath);\n          const isEditableSubSection = getIsEditableSection(subSection);\n\n          if (isEditableSubSection) {\n            return (\n              <Button\n                label={`${goToField.label.value} ${key}`}\n                key={key}\n                isActive={getIsSelected(childKeyPath)}\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                className=\"w-full\"\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                IconRight={ChevronRight}\n              >\n                {camelCaseToSentence(key)}\n              </Button>\n            );\n          }\n\n          return (\n            <Accordion\n              key={key}\n              label={`${goToField.label.value} ${key}`}\n              isActive={getIsSelected(childKeyPath)}\n              onClick={() => setFocusedContentKeyPath(childKeyPath)}\n              header={camelCaseToSentence(key)}\n            >\n              <div className=\"mt-2 flex w-full max-w-full\">\n                <div className=\"flex-1 pl-10\">\n                  <NavigationViewNode\n                    keyPath={childKeyPath}\n                    section={sectionProp}\n                    dictionaryKey={dictionaryKey}\n                  />\n                </div>\n              </div>\n            </Accordion>\n          );\n        })}\n      </div>\n    );\n  }\n\n  return (\n    <>\n      Error loading section --\n      {nodeType}\n      --\n      {JSON.stringify(section)}\n      --\n      {JSON.stringify(keyPath)}\n    </>\n  );\n};\n"],"names":["keyPath","sectionArray","isEditableSubSection"],"mappings":"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"}
+{"version":3,"file":"NavigationViewNode.mjs","sources":["../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"sourcesContent":["import configuration from '@intlayer/config/built';\n\nimport {\n  getContentNodeByKeyPath,\n  getEmptyNode,\n  getNodeType,\n  isSameKeyPath,\n  NodeType,\n  type ContentNode,\n  type KeyPath,\n} from '@intlayer/core';\nimport {\n  useEditedContentActions,\n  useFocusDictionary,\n} from '@intlayer/editor-react';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { camelCaseToSentence } from '../../../utils/camelCase';\nimport { Accordion } from '../../Accordion';\nimport {\n  Button,\n  ButtonColor,\n  ButtonTextAlign,\n  ButtonVariant,\n} from '../../Button';\nimport { getIsEditableSection } from '../getIsEditableSection';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: ContentNode;\n};\n\nexport const NavigationViewNode: FC<NodeWrapperProps> = ({\n  section: sectionProp,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const { locales } = configuration?.internationalization;\n  const section = getContentNodeByKeyPath(sectionProp, keyPath);\n  const { addEditedContent } = useEditedContentActions();\n  const { setFocusedContentKeyPath, focusedContent } = useFocusDictionary();\n  const { addNewElement, goToField } = useIntlayer('navigation-view');\n  const nodeType = getNodeType(section);\n  const getIsSelected = (keyPath: KeyPath[]) =>\n    (focusedContent?.keyPath?.length ?? 0) > 0 &&\n    isSameKeyPath(keyPath, focusedContent?.keyPath ?? []);\n  const isEditableSubSection = getIsEditableSection(section);\n\n  if (!section) return <></>;\n\n  if (isEditableSubSection) {\n    return (\n      <Button\n        label={goToField.label.value}\n        variant={ButtonVariant.HOVERABLE}\n        color={ButtonColor.TEXT}\n        className=\"w-full\"\n        onClick={() => setFocusedContentKeyPath(keyPath)}\n        IconRight={ChevronRight}\n      >\n        {camelCaseToSentence(keyPath[keyPath.length - 1].key as string)}\n      </Button>\n    );\n  }\n\n  if (typeof section === 'object') {\n    if (nodeType === NodeType.ReactNode) {\n      return <>React Node</>;\n    }\n\n    if (nodeType === NodeType.Translation) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {locales.map((translationKey) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Translation, key: translationKey },\n            ];\n\n            return (\n              <NavigationViewNode\n                key={translationKey}\n                keyPath={childKeyPath}\n                section={sectionProp}\n                dictionaryKey={dictionaryKey}\n              />\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Enumeration || nodeType === NodeType.Condition) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {Object.keys(\n            (section as any)[nodeType as unknown as keyof typeof section]\n          ).map((key) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: nodeType, key },\n            ];\n\n            return (\n              <NavigationViewNode\n                key={key}\n                keyPath={childKeyPath}\n                section={sectionProp}\n                dictionaryKey={dictionaryKey}\n              />\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Array) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {(section as unknown as ContentNode[]).map((_, index) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Array, key: index },\n            ];\n\n            return (\n              <NavigationViewNode\n                key={JSON.stringify(childKeyPath)}\n                keyPath={childKeyPath}\n                section={sectionProp}\n                dictionaryKey={dictionaryKey}\n              />\n            );\n          })}\n\n          <Button\n            label={addNewElement.label.value}\n            variant={ButtonVariant.HOVERABLE}\n            color={ButtonColor.NEUTRAL}\n            textAlign={ButtonTextAlign.LEFT}\n            onClick={() => {\n              const newKeyPath: KeyPath[] = [\n                ...keyPath,\n                {\n                  type: NodeType.Array,\n                  key: (section as unknown as ContentNode[]).length,\n                },\n              ];\n              const sectionArray = section as unknown as ContentNode[];\n              const emptySectionEl =\n                getEmptyNode(\n                  sectionArray[\n                    (sectionArray.length - 1) as keyof typeof sectionArray\n                  ] as ContentNode\n                ) ?? '';\n              addEditedContent(\n                dictionaryKey,\n                emptySectionEl,\n                newKeyPath,\n                false\n              );\n              setFocusedContentKeyPath(newKeyPath);\n            }}\n            Icon={Plus}\n          >\n            {addNewElement.text}\n          </Button>\n        </div>\n      );\n    }\n\n    if (typeof section.nodeType === 'string') {\n      const childKeyPath: KeyPath[] = [\n        ...keyPath,\n        { type: section.nodeType } as KeyPath,\n      ];\n\n      return (\n        <NavigationViewNode\n          keyPath={childKeyPath}\n          section={sectionProp}\n          dictionaryKey={dictionaryKey}\n        />\n      );\n    }\n\n    const sectionArray = Object.keys(section);\n    return (\n      <div className=\"flex w-full max-w-full flex-col justify-between gap-2\">\n        {sectionArray.map((key) => {\n          const childKeyPath: KeyPath[] = [\n            ...keyPath,\n            { type: NodeType.Object, key },\n          ];\n\n          const subSection = getContentNodeByKeyPath(sectionProp, childKeyPath);\n          const isEditableSubSection = getIsEditableSection(subSection);\n\n          if (isEditableSubSection) {\n            return (\n              <Button\n                label={`${goToField.label.value} ${key}`}\n                key={key}\n                isActive={getIsSelected(childKeyPath)}\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                className=\"w-full\"\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                IconRight={ChevronRight}\n              >\n                {camelCaseToSentence(key)}\n              </Button>\n            );\n          }\n\n          return (\n            <Accordion\n              key={key}\n              label={`${goToField.label.value} ${key}`}\n              isActive={getIsSelected(childKeyPath)}\n              onClick={() => setFocusedContentKeyPath(childKeyPath)}\n              header={camelCaseToSentence(key)}\n            >\n              <div className=\"mt-2 flex w-full max-w-full\">\n                <div className=\"flex-1 pl-10\">\n                  <NavigationViewNode\n                    keyPath={childKeyPath}\n                    section={sectionProp}\n                    dictionaryKey={dictionaryKey}\n                  />\n                </div>\n              </div>\n            </Accordion>\n          );\n        })}\n      </div>\n    );\n  }\n\n  return (\n    <>\n      Error loading section --\n      {nodeType}\n      --\n      {JSON.stringify(section)}\n      --\n      {JSON.stringify(keyPath)}\n    </>\n  );\n};\n"],"names":["configuration","keyPath","sectionArray","isEditableSubSection"],"mappings":"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"}

package/dist/components/DictionaryFieldEditor/SaveForm/SaveForm.cjs

@@ -25,6 +25,7 @@ const SaveForm = ({
   mode,
   className,
   onDelete,
+  onSave,
   ...props
 }) => {
   const [isFormatAlertModalOpen, setIsFormatAlertModalOpen] = ReactExports.useState(false);
@@ -60,6 +61,7 @@ const SaveForm = ({
         onSuccess: () => {
           setLocaleDictionary(editedContent?.[dictionary.localId]);
           restoreEditedContent(dictionary.localId);
+          onSave?.();
         }
       }
     );
@@ -75,6 +77,7 @@ const SaveForm = ({
         if (res) {
           setLocaleDictionary(editedContent?.[dictionary.localId]);
           restoreEditedContent(dictionary.localId);
+          onSave?.();
         }
       }
     });