@payloadcms/ui 3.0.0-canary.220bb7c → 3.0.0-canary.28c161d

package/dist/elements/CodeEditor/CodeEditor.js

@@ -1,41 +1,118 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import EditorImport from '@monaco-editor/react';
-import React from 'react';
+import React, { useState } from 'react';
 import { useTheme } from '../../providers/Theme/index.js';
 import { ShimmerEffect } from '../ShimmerEffect/index.js';
+import './index.scss';
 const Editor = EditorImport.default || EditorImport;
 const baseClass = 'code-editor';
-const CodeEditor = (props)=>{
-    const { className, height, options, readOnly, ...rest } = props;
-    const { theme } = useTheme();
-    const classes = [
-        baseClass,
-        className,
-        rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : ''
-    ].filter(Boolean).join(' ');
-    return /*#__PURE__*/ _jsx(Editor, {
-        className: classes,
-        height: height,
-        loading: /*#__PURE__*/ _jsx(ShimmerEffect, {
-            height: height
-        }),
-        options: {
-            detectIndentation: true,
-            minimap: {
-                enabled: false
-            },
-            readOnly: Boolean(readOnly),
-            scrollBeyondLastLine: false,
-            tabSize: 2,
-            wordWrap: 'on',
-            ...options
+const CodeEditor = props => {
+  const $ = _c(20);
+  let rest;
+  let readOnly;
+  let className;
+  let options;
+  if ($[0] !== props) {
+    ({
+      className,
+      options,
+      readOnly,
+      ...rest
+    } = props);
+    $[0] = props;
+    $[1] = rest;
+    $[2] = readOnly;
+    $[3] = className;
+    $[4] = options;
+  } else {
+    rest = $[1];
+    readOnly = $[2];
+    className = $[3];
+    options = $[4];
+  }
+  const [dynamicHeight, setDynamicHeight] = useState(20);
+  const {
+    theme
+  } = useTheme();
+  const t0 = rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : "";
+  const t1 = readOnly && "read-only";
+  let t2;
+  if ($[5] !== className || $[6] !== t0 || $[7] !== t1) {
+    t2 = [baseClass, className, t0, t1].filter(Boolean);
+    $[5] = className;
+    $[6] = t0;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  const classes = t2.join(" ");
+  let t3;
+  if ($[9] !== dynamicHeight || $[10] !== readOnly || $[11] !== options || $[12] !== theme || $[13] !== rest || $[14] !== classes) {
+    let t4;
+    if ($[16] !== rest.onChange) {
+      t4 = (value, ev) => {
+        rest.onChange?.(value, ev);
+        setDynamicHeight(value.split("\n").length * 18 + 2);
+      };
+      $[16] = rest.onChange;
+      $[17] = t4;
+    } else {
+      t4 = $[17];
+    }
+    let t5;
+    if ($[18] !== rest.onMount) {
+      t5 = (editor, monaco) => {
+        rest.onMount?.(editor, monaco);
+        setDynamicHeight(editor.getValue().split("\n").length * 18 + 2);
+      };
+      $[18] = rest.onMount;
+      $[19] = t5;
+    } else {
+      t5 = $[19];
+    }
+    t3 = _jsx(Editor, {
+      className: classes,
+      loading: _jsx(ShimmerEffect, {
+        height: dynamicHeight
+      }),
+      options: {
+        detectIndentation: true,
+        hideCursorInOverviewRuler: true,
+        minimap: {
+          enabled: false
+        },
+        overviewRulerBorder: false,
+        readOnly: Boolean(readOnly),
+        scrollbar: {
+          alwaysConsumeMouseWheel: false
         },
-        theme: theme === 'dark' ? 'vs-dark' : 'vs',
-        ...rest
+        scrollBeyondLastLine: false,
+        tabSize: 2,
+        wordWrap: "on",
+        ...options
+      },
+      theme: theme === "dark" ? "vs-dark" : "vs",
+      ...rest,
+      height: dynamicHeight,
+      onChange: t4,
+      onMount: t5
     });
+    $[9] = dynamicHeight;
+    $[10] = readOnly;
+    $[11] = options;
+    $[12] = theme;
+    $[13] = rest;
+    $[14] = classes;
+    $[15] = t3;
+  } else {
+    t3 = $[15];
+  }
+  return t3;
 };
 // eslint-disable-next-line no-restricted-exports
 export default CodeEditor;
-
 //# sourceMappingURL=CodeEditor.js.map

package/dist/elements/CodeEditor/CodeEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client'\nimport EditorImport from '@monaco-editor/react'\nimport React from 'react'\n\nimport type { Props } from './types.js'\n\nimport { useTheme } from '../../providers/Theme/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\nimport './index.scss'\n\nconst Editor = (EditorImport.default || EditorImport) as unknown as typeof EditorImport.default\n\nconst baseClass = 'code-editor'\n\nconst CodeEditor: React.FC<Props> = (props) => {\n  const { className, height, options, readOnly, ...rest } = props\n\n  const { theme } = useTheme()\n\n  const classes = [\n    baseClass,\n    className,\n    rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : '',\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <Editor\n      className={classes}\n      height={height}\n      loading={<ShimmerEffect height={height} />}\n      options={{\n        detectIndentation: true,\n        minimap: {\n          enabled: false,\n        },\n        readOnly: Boolean(readOnly),\n        scrollBeyondLastLine: false,\n        tabSize: 2,\n        wordWrap: 'on',\n        ...options,\n      }}\n      theme={theme === 'dark' ? 'vs-dark' : 'vs'}\n      {...rest}\n    />\n  )\n}\n\n// eslint-disable-next-line no-restricted-exports\nexport default CodeEditor\n"],"names":["EditorImport","React","useTheme","ShimmerEffect","Editor","default","baseClass","CodeEditor","props","className","height","options","readOnly","rest","theme","classes","defaultLanguage","filter","Boolean","join","loading","detectIndentation","minimap","enabled","scrollBeyondLastLine","tabSize","wordWrap"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,OAAOA,kBAAkB,uBAAsB;AAC/C,OAAOC,WAAW,QAAO;AAIzB,SAASC,QAAQ,QAAQ,iCAAgC;AACzD,SAASC,aAAa,QAAQ,4BAA2B;AAGzD,MAAMC,SAAUJ,aAAaK,OAAO,IAAIL;AAExC,MAAMM,YAAY;AAElB,MAAMC,aAA8B,CAACC;IACnC,MAAM,EAAEC,SAAS,EAAEC,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGL;IAE1D,MAAM,EAAEM,KAAK,EAAE,GAAGZ;IAElB,MAAMa,UAAU;QACdT;QACAG;QACAI,MAAMG,kBAAkB,CAAC,UAAU,EAAEH,KAAKG,eAAe,CAAC,CAAC,GAAG;KAC/D,CACEC,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,qBACE,KAACf;QACCK,WAAWM;QACXL,QAAQA;QACRU,uBAAS,KAACjB;YAAcO,QAAQA;;QAChCC,SAAS;YACPU,mBAAmB;YACnBC,SAAS;gBACPC,SAAS;YACX;YACAX,UAAUM,QAAQN;YAClBY,sBAAsB;YACtBC,SAAS;YACTC,UAAU;YACV,GAAGf,OAAO;QACZ;QACAG,OAAOA,UAAU,SAAS,YAAY;QACrC,GAAGD,IAAI;;AAGd;AAEA,iDAAiD;AACjD,eAAeN,WAAU"}
+{"version":3,"file":"CodeEditor.js","names":["c","_c","EditorImport","React","useState","useTheme","ShimmerEffect","Editor","default","baseClass","CodeEditor","props","$","rest","readOnly","className","options","dynamicHeight","setDynamicHeight","theme","t0","defaultLanguage","t1","t2","filter","Boolean","classes","join","t3","t4","onChange","value","ev","split","length","t5","onMount","editor","monaco","getValue","_jsx","loading","height","scrollbar","alwaysConsumeMouseWheel","scrollBeyondLastLine","tabSize","wordWrap"],"sources":["../../../src/elements/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client'\nimport EditorImport from '@monaco-editor/react'\nimport React, { useState } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { useTheme } from '../../providers/Theme/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\nimport './index.scss'\n\nconst Editor = (EditorImport.default || EditorImport) as unknown as typeof EditorImport.default\n\nconst baseClass = 'code-editor'\n\nconst CodeEditor: React.FC<Props> = (props) => {\n  const { className, options, readOnly, ...rest } = props\n  const [dynamicHeight, setDynamicHeight] = useState(20)\n  const { theme } = useTheme()\n\n  const classes = [\n    baseClass,\n    className,\n    rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : '',\n    readOnly && 'read-only',\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <Editor\n      className={classes}\n      loading={<ShimmerEffect height={dynamicHeight} />}\n      options={{\n        detectIndentation: true,\n        hideCursorInOverviewRuler: true,\n        minimap: {\n          enabled: false,\n        },\n        overviewRulerBorder: false,\n        readOnly: Boolean(readOnly),\n        scrollbar: {\n          alwaysConsumeMouseWheel: false,\n        },\n        scrollBeyondLastLine: false,\n        tabSize: 2,\n        wordWrap: 'on',\n        ...options,\n      }}\n      theme={theme === 'dark' ? 'vs-dark' : 'vs'}\n      {...rest}\n      // Since we are not building an IDE and the container\n      // can already have scrolling, we want the height of the\n      // editor to fit its content.\n      // See: https://github.com/microsoft/monaco-editor/discussions/3677\n      height={dynamicHeight}\n      onChange={(value, ev) => {\n        rest.onChange?.(value, ev)\n        setDynamicHeight(value.split('\\n').length * 18 + 2)\n      }}\n      onMount={(editor, monaco) => {\n        rest.onMount?.(editor, monaco)\n        setDynamicHeight(editor.getValue().split('\\n').length * 18 + 2)\n      }}\n    />\n  )\n}\n\n// eslint-disable-next-line no-restricted-exports\nexport default CodeEditor\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/CodeEditor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/CodeEditor/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAE7C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAMvC,YAAY,EAAE,KAAK,EAAE,CAAA;AAErB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAQtC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/CodeEditor/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAE7C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAMvC,YAAY,EAAE,KAAK,EAAE,CAAA;AAErB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAMtC,CAAA"}

package/dist/elements/CodeEditor/index.js

@@ -1,19 +1,15 @@
 'use client';
+
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { Suspense, lazy } from 'react';
+import React, { lazy, Suspense } from 'react';
 import { ShimmerEffect } from '../ShimmerEffect/index.js';
-const LazyEditor = /*#__PURE__*/ lazy(()=>import('./CodeEditor.js'));
-export const CodeEditor = (props)=>{
-    const { height = '35vh' } = props;
-    return /*#__PURE__*/ _jsx(Suspense, {
-        fallback: /*#__PURE__*/ _jsx(ShimmerEffect, {
-            height: height
-        }),
-        children: /*#__PURE__*/ _jsx(LazyEditor, {
-            ...props,
-            height: height
-        })
-    });
+const LazyEditor = /*#__PURE__*/lazy(() => import('./CodeEditor.js'));
+export const CodeEditor = props => {
+  return /*#__PURE__*/_jsx(Suspense, {
+    fallback: /*#__PURE__*/_jsx(ShimmerEffect, {}),
+    children: /*#__PURE__*/_jsx(LazyEditor, {
+      ...props
+    })
+  });
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/CodeEditor/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/CodeEditor/index.tsx"],"sourcesContent":["'use client'\nimport React, { Suspense, lazy } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\n\nconst LazyEditor = lazy(() => import('./CodeEditor.js'))\n\nexport type { Props }\n\nexport const CodeEditor: React.FC<Props> = (props) => {\n  const { height = '35vh' } = props\n\n  return (\n    <Suspense fallback={<ShimmerEffect height={height} />}>\n      <LazyEditor {...props} height={height} />\n    </Suspense>\n  )\n}\n"],"names":["React","Suspense","lazy","ShimmerEffect","LazyEditor","CodeEditor","props","height","fallback"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,OAAOA,SAASC,QAAQ,EAAEC,IAAI,QAAQ,QAAO;AAI7C,SAASC,aAAa,QAAQ,4BAA2B;AAEzD,MAAMC,2BAAaF,KAAK,IAAM,MAAM,CAAC;AAIrC,OAAO,MAAMG,aAA8B,CAACC;IAC1C,MAAM,EAAEC,SAAS,MAAM,EAAE,GAAGD;IAE5B,qBACE,KAACL;QAASO,wBAAU,KAACL;YAAcI,QAAQA;;kBACzC,cAAA,KAACH;YAAY,GAAGE,KAAK;YAAEC,QAAQA;;;AAGrC,EAAC"}
+{"version":3,"file":"index.js","names":["React","lazy","Suspense","ShimmerEffect","LazyEditor","CodeEditor","props","_jsx","fallback"],"sources":["../../../src/elements/CodeEditor/index.tsx"],"sourcesContent":["'use client'\nimport React, { lazy, Suspense } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\n\nconst LazyEditor = lazy(() => import('./CodeEditor.js'))\n\nexport type { Props }\n\nexport const CodeEditor: React.FC<Props> = (props) => {\n  return (\n    <Suspense fallback={<ShimmerEffect />}>\n      <LazyEditor {...props} />\n    </Suspense>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,IAAI,EAAEC,QAAQ,QAAQ;AAItC,SAASC,aAAa,QAAQ;AAE9B,MAAMC,UAAA,gBAAaH,IAAA,CAAK,MAAM,MAAM,CAAC;AAIrC,OAAO,MAAMI,UAAA,GAA+BC,KAAA;EAC1C,oBACEC,IAAA,CAACL,QAAA;IAASM,QAAA,eAAUD,IAAA,CAACJ,aAAA;cACnB,aAAAI,IAAA,CAACH,UAAA;MAAY,GAAGE;;;AAGtB","ignoreList":[]}

package/dist/elements/CodeEditor/types.d.ts

@@ -1,5 +1,5 @@
 import type { EditorProps } from '@monaco-editor/react';
-export type Props = EditorProps & {
+export type Props = {
     readOnly?: boolean;
-};
+} & EditorProps;
 //# sourceMappingURL=types.d.ts.map

package/dist/elements/CodeEditor/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/CodeEditor/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAEvD,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/CodeEditor/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAEvD,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,WAAW,CAAA"}

package/dist/elements/CodeEditor/types.js

@@ -1,3 +1,2 @@
-export { };
-
+export {};
 //# sourceMappingURL=types.js.map

package/dist/elements/CodeEditor/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/CodeEditor/types.ts"],"sourcesContent":["import type { EditorProps } from '@monaco-editor/react'\n\nexport type Props = EditorProps & {\n  readOnly?: boolean\n}\n"],"names":[],"rangeMappings":"","mappings":"AAEA,WAEC"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/CodeEditor/types.ts"],"sourcesContent":["import type { EditorProps } from '@monaco-editor/react'\n\nexport type Props = {\n  readOnly?: boolean\n} & EditorProps\n"],"mappings":"AAEA","ignoreList":[]}

package/dist/elements/Collapsible/index.d.ts

@@ -12,7 +12,7 @@ export type Props = {
     header?: React.ReactNode;
     initCollapsed?: boolean;
     isCollapsed?: boolean;
-    onToggle?: (collapsed: boolean) => void;
+    onToggle?: (collapsed: boolean) => Promise<void> | void;
 };
 export declare const Collapsible: React.FC<Props>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/Collapsible/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Collapsible/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAA;AAQ1F,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAInE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,CAAA;AAE9C,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IACtC,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;CACxC,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyFvC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Collapsible/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAA;AAQ1F,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAInE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,CAAA;AAE9C,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IACtC,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACxD,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA2FvC,CAAA"}

package/dist/elements/Collapsible/index.js

@@ -1,98 +1,164 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
 import AnimateHeightImport from 'react-animate-height';
 const AnimateHeight = AnimateHeightImport.default || AnimateHeightImport;
-import { Chevron } from '../../icons/Chevron/index.js';
-import { DragHandle } from '../../icons/DragHandle/index.js';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { DragHandleIcon } from '../../icons/DragHandle/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import './index.scss';
 import { CollapsibleProvider, useCollapsible } from './provider.js';
 const baseClass = 'collapsible';
 export { CollapsibleProvider, useCollapsible };
-export const Collapsible = ({ actions, children, className, collapsibleStyle = 'default', dragHandleProps, header, initCollapsed, isCollapsed: collapsedFromProps, onToggle })=>{
-    const [collapsedLocal, setCollapsedLocal] = useState(Boolean(initCollapsed));
-    const [hoveringToggle, setHoveringToggle] = useState(false);
-    const { isWithinCollapsible } = useCollapsible();
-    const { t } = useTranslation();
-    const isCollapsed = typeof collapsedFromProps === 'boolean' ? collapsedFromProps : collapsedLocal;
-    const toggleCollapsible = React.useCallback(()=>{
-        if (typeof onToggle === 'function') onToggle(!isCollapsed);
-        setCollapsedLocal(!isCollapsed);
-    }, [
-        onToggle,
-        isCollapsed
-    ]);
-    return /*#__PURE__*/ _jsx("div", {
-        className: [
-            baseClass,
-            className,
-            dragHandleProps && `${baseClass}--has-drag-handle`,
-            isCollapsed && `${baseClass}--collapsed`,
-            isWithinCollapsible && `${baseClass}--nested`,
-            hoveringToggle && `${baseClass}--hovered`,
-            `${baseClass}--style-${collapsibleStyle}`
-        ].filter(Boolean).join(' '),
-        children: /*#__PURE__*/ _jsxs(CollapsibleProvider, {
-            isCollapsed: isCollapsed,
-            toggle: toggleCollapsible,
-            children: [
-                /*#__PURE__*/ _jsxs("div", {
-                    className: `${baseClass}__toggle-wrap`,
-                    onMouseEnter: ()=>setHoveringToggle(true),
-                    onMouseLeave: ()=>setHoveringToggle(false),
-                    children: [
-                        dragHandleProps && /*#__PURE__*/ _jsx("div", {
-                            className: `${baseClass}__drag`,
-                            ...dragHandleProps.attributes,
-                            ...dragHandleProps.listeners,
-                            children: /*#__PURE__*/ _jsx(DragHandle, {})
-                        }),
-                        /*#__PURE__*/ _jsx("button", {
-                            className: [
-                                `${baseClass}__toggle`,
-                                `${baseClass}__toggle--${isCollapsed ? 'collapsed' : 'open'}`
-                            ].filter(Boolean).join(' '),
-                            onClick: toggleCollapsible,
-                            type: "button",
-                            children: /*#__PURE__*/ _jsx("span", {
-                                children: t('fields:toggleBlock')
-                            })
-                        }),
-                        header && /*#__PURE__*/ _jsx("div", {
-                            className: [
-                                `${baseClass}__header-wrap`,
-                                dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`
-                            ].filter(Boolean).join(' '),
-                            children: header && header
-                        }),
-                        /*#__PURE__*/ _jsxs("div", {
-                            className: `${baseClass}__actions-wrap`,
-                            children: [
-                                actions && /*#__PURE__*/ _jsx("div", {
-                                    className: `${baseClass}__actions`,
-                                    children: actions
-                                }),
-                                /*#__PURE__*/ _jsx("div", {
-                                    className: `${baseClass}__indicator`,
-                                    children: /*#__PURE__*/ _jsx(Chevron, {
-                                        direction: !isCollapsed ? 'up' : undefined
-                                    })
-                                })
-                            ]
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ _jsx(AnimateHeight, {
-                    duration: 200,
-                    height: isCollapsed ? 0 : 'auto',
-                    children: /*#__PURE__*/ _jsx("div", {
-                        className: `${baseClass}__content`,
-                        children: children
-                    })
-                })
-            ]
-        })
+export const Collapsible = t0 => {
+  const $ = _c(26);
+  const {
+    actions,
+    children,
+    className,
+    collapsibleStyle: t1,
+    dragHandleProps,
+    header,
+    initCollapsed,
+    isCollapsed: collapsedFromProps,
+    onToggle
+  } = t0;
+  const collapsibleStyle = t1 === undefined ? "default" : t1;
+  const [collapsedLocal, setCollapsedLocal] = useState(Boolean(initCollapsed));
+  const [hoveringToggle, setHoveringToggle] = useState(false);
+  const {
+    isWithinCollapsible
+  } = useCollapsible();
+  const {
+    t
+  } = useTranslation();
+  const isCollapsed = typeof collapsedFromProps === "boolean" ? collapsedFromProps : collapsedLocal;
+  let t2;
+  if ($[0] !== onToggle || $[1] !== isCollapsed) {
+    t2 = () => {
+      if (typeof onToggle === "function") {
+        onToggle(!isCollapsed);
+      }
+      setCollapsedLocal(!isCollapsed);
+    };
+    $[0] = onToggle;
+    $[1] = isCollapsed;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const toggleCollapsible = t2;
+  const t3 = dragHandleProps && `${baseClass}--has-drag-handle`;
+  const t4 = isCollapsed && `${baseClass}--collapsed`;
+  const t5 = isWithinCollapsible && `${baseClass}--nested`;
+  const t6 = hoveringToggle && `${baseClass}--hovered`;
+  const t7 = `${baseClass}--style-${collapsibleStyle}`;
+  let t8;
+  if ($[3] !== className || $[4] !== t3 || $[5] !== t4 || $[6] !== t5 || $[7] !== t6 || $[8] !== t7) {
+    t8 = [baseClass, className, t3, t4, t5, t6, t7].filter(Boolean);
+    $[3] = className;
+    $[4] = t3;
+    $[5] = t4;
+    $[6] = t5;
+    $[7] = t6;
+    $[8] = t7;
+    $[9] = t8;
+  } else {
+    t8 = $[9];
+  }
+  const t9 = t8.join(" ");
+  let t10;
+  let t11;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = () => setHoveringToggle(true);
+    t11 = () => setHoveringToggle(false);
+    $[10] = t10;
+    $[11] = t11;
+  } else {
+    t10 = $[10];
+    t11 = $[11];
+  }
+  const t12 = `${baseClass}__toggle--${isCollapsed ? "collapsed" : "open"}`;
+  let t13;
+  if ($[12] !== t12) {
+    t13 = [`${baseClass}__toggle`, t12].filter(Boolean);
+    $[12] = t12;
+    $[13] = t13;
+  } else {
+    t13 = $[13];
+  }
+  const t14 = t13.join(" ");
+  let t15;
+  if ($[14] !== t || $[15] !== t14 || $[16] !== toggleCollapsible || $[17] !== dragHandleProps || $[18] !== header || $[19] !== actions || $[20] !== isCollapsed || $[21] !== children || $[22] !== t9) {
+    let t16;
+    if ($[24] !== dragHandleProps) {
+      t16 = dragHandleProps && _jsx("div", {
+        className: `${baseClass}__drag`,
+        ...dragHandleProps.attributes,
+        ...dragHandleProps.listeners,
+        children: _jsx(DragHandleIcon, {})
+      });
+      $[24] = dragHandleProps;
+      $[25] = t16;
+    } else {
+      t16 = $[25];
+    }
+    t15 = _jsx("div", {
+      className: t9,
+      children: _jsxs(CollapsibleProvider, {
+        isCollapsed,
+        toggle: toggleCollapsible,
+        children: [_jsxs("div", {
+          className: `${baseClass}__toggle-wrap`,
+          onMouseEnter: t10,
+          onMouseLeave: t11,
+          children: [_jsx("button", {
+            className: t14,
+            onClick: toggleCollapsible,
+            type: "button",
+            children: _jsx("span", {
+              children: t("fields:toggleBlock")
+            })
+          }), t16, header ? _jsx("div", {
+            className: [`${baseClass}__header-wrap`, dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`].filter(Boolean).join(" "),
+            children: header
+          }) : null, _jsxs("div", {
+            className: `${baseClass}__actions-wrap`,
+            children: [actions ? _jsx("div", {
+              className: `${baseClass}__actions`,
+              children: actions
+            }) : null, _jsx("div", {
+              className: `${baseClass}__indicator`,
+              children: _jsx(ChevronIcon, {
+                direction: !isCollapsed ? "up" : undefined
+              })
+            })]
+          })]
+        }), _jsx(AnimateHeight, {
+          duration: 200,
+          height: isCollapsed ? 0 : "auto",
+          children: _jsx("div", {
+            className: `${baseClass}__content`,
+            children
+          })
+        })]
+      })
     });
+    $[14] = t;
+    $[15] = t14;
+    $[16] = toggleCollapsible;
+    $[17] = dragHandleProps;
+    $[18] = header;
+    $[19] = actions;
+    $[20] = isCollapsed;
+    $[21] = children;
+    $[22] = t9;
+    $[23] = t15;
+  } else {
+    t15 = $[23];
+  }
+  return t15;
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/Collapsible/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Collapsible/index.tsx"],"sourcesContent":["'use client'\nimport React, { useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nimport type { DragHandleProps } from '../DraggableSortable/DraggableSortableItem/types.js'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n  AnimateHeightImport) as typeof AnimateHeightImport.default\n\nimport { Chevron } from '../../icons/Chevron/index.js'\nimport { DragHandle } from '../../icons/DragHandle/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\nimport { CollapsibleProvider, useCollapsible } from './provider.js'\n\nconst baseClass = 'collapsible'\n\nexport { CollapsibleProvider, useCollapsible }\n\nexport type Props = {\n  actions?: React.ReactNode\n  children: React.ReactNode\n  className?: string\n  collapsibleStyle?: 'default' | 'error'\n  dragHandleProps?: DragHandleProps\n  header?: React.ReactNode\n  initCollapsed?: boolean\n  isCollapsed?: boolean\n  onToggle?: (collapsed: boolean) => void\n}\n\nexport const Collapsible: React.FC<Props> = ({\n  actions,\n  children,\n  className,\n  collapsibleStyle = 'default',\n  dragHandleProps,\n  header,\n  initCollapsed,\n  isCollapsed: collapsedFromProps,\n  onToggle,\n}) => {\n  const [collapsedLocal, setCollapsedLocal] = useState(Boolean(initCollapsed))\n  const [hoveringToggle, setHoveringToggle] = useState(false)\n  const { isWithinCollapsible } = useCollapsible()\n  const { t } = useTranslation()\n\n  const isCollapsed = typeof collapsedFromProps === 'boolean' ? collapsedFromProps : collapsedLocal\n\n  const toggleCollapsible = React.useCallback(() => {\n    if (typeof onToggle === 'function') onToggle(!isCollapsed)\n    setCollapsedLocal(!isCollapsed)\n  }, [onToggle, isCollapsed])\n\n  return (\n    <div\n      className={[\n        baseClass,\n        className,\n        dragHandleProps && `${baseClass}--has-drag-handle`,\n        isCollapsed && `${baseClass}--collapsed`,\n        isWithinCollapsible && `${baseClass}--nested`,\n        hoveringToggle && `${baseClass}--hovered`,\n        `${baseClass}--style-${collapsibleStyle}`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <CollapsibleProvider isCollapsed={isCollapsed} toggle={toggleCollapsible}>\n        <div\n          className={`${baseClass}__toggle-wrap`}\n          onMouseEnter={() => setHoveringToggle(true)}\n          onMouseLeave={() => setHoveringToggle(false)}\n        >\n          {dragHandleProps && (\n            <div\n              className={`${baseClass}__drag`}\n              {...dragHandleProps.attributes}\n              {...dragHandleProps.listeners}\n            >\n              <DragHandle />\n            </div>\n          )}\n          <button\n            className={[\n              `${baseClass}__toggle`,\n              `${baseClass}__toggle--${isCollapsed ? 'collapsed' : 'open'}`,\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={toggleCollapsible}\n            type=\"button\"\n          >\n            <span>{t('fields:toggleBlock')}</span>\n          </button>\n          {header && (\n            <div\n              className={[\n                `${baseClass}__header-wrap`,\n                dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              {header && header}\n            </div>\n          )}\n          <div className={`${baseClass}__actions-wrap`}>\n            {actions && <div className={`${baseClass}__actions`}>{actions}</div>}\n            <div className={`${baseClass}__indicator`}>\n              <Chevron direction={!isCollapsed ? 'up' : undefined} />\n            </div>\n          </div>\n        </div>\n        <AnimateHeight duration={200} height={isCollapsed ? 0 : 'auto'}>\n          <div className={`${baseClass}__content`}>{children}</div>\n        </AnimateHeight>\n      </CollapsibleProvider>\n    </div>\n  )\n}\n"],"names":["React","useState","AnimateHeightImport","AnimateHeight","default","Chevron","DragHandle","useTranslation","CollapsibleProvider","useCollapsible","baseClass","Collapsible","actions","children","className","collapsibleStyle","dragHandleProps","header","initCollapsed","isCollapsed","collapsedFromProps","onToggle","collapsedLocal","setCollapsedLocal","Boolean","hoveringToggle","setHoveringToggle","isWithinCollapsible","t","toggleCollapsible","useCallback","div","filter","join","toggle","onMouseEnter","onMouseLeave","attributes","listeners","button","onClick","type","span","direction","undefined","duration","height"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","React","useState","AnimateHeightImport","AnimateHeight","default","ChevronIcon","DragHandleIcon","useTranslation","CollapsibleProvider","useCollapsible","baseClass","Collapsible","t0","$","actions","children","className","collapsibleStyle","t1","dragHandleProps","header","initCollapsed","isCollapsed","collapsedFromProps","onToggle","undefined","collapsedLocal","setCollapsedLocal","Boolean","hoveringToggle","setHoveringToggle","isWithinCollapsible","t","t2","toggleCollapsible","t3","t4","t5","t6","t7","t8","filter","t9","join","t10","t11","Symbol","for","t12","t13","t14","t15","t16","_jsx","attributes","listeners","_jsxs","toggle","onMouseEnter","onMouseLeave","onClick","type","direction","duration","height"],"sources":["../../../src/elements/Collapsible/index.tsx"],"sourcesContent":["'use client'\nimport React, { useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nimport type { DragHandleProps } from '../DraggableSortable/DraggableSortableItem/types.js'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n  AnimateHeightImport) as typeof AnimateHeightImport.default\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { DragHandleIcon } from '../../icons/DragHandle/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\nimport { CollapsibleProvider, useCollapsible } from './provider.js'\n\nconst baseClass = 'collapsible'\n\nexport { CollapsibleProvider, useCollapsible }\n\nexport type Props = {\n  actions?: React.ReactNode\n  children: React.ReactNode\n  className?: string\n  collapsibleStyle?: 'default' | 'error'\n  dragHandleProps?: DragHandleProps\n  header?: React.ReactNode\n  initCollapsed?: boolean\n  isCollapsed?: boolean\n  onToggle?: (collapsed: boolean) => Promise<void> | void\n}\n\nexport const Collapsible: React.FC<Props> = ({\n  actions,\n  children,\n  className,\n  collapsibleStyle = 'default',\n  dragHandleProps,\n  header,\n  initCollapsed,\n  isCollapsed: collapsedFromProps,\n  onToggle,\n}) => {\n  const [collapsedLocal, setCollapsedLocal] = useState(Boolean(initCollapsed))\n  const [hoveringToggle, setHoveringToggle] = useState(false)\n  const { isWithinCollapsible } = useCollapsible()\n  const { t } = useTranslation()\n\n  const isCollapsed = typeof collapsedFromProps === 'boolean' ? collapsedFromProps : collapsedLocal\n\n  const toggleCollapsible = React.useCallback(() => {\n    if (typeof onToggle === 'function') {\n      void onToggle(!isCollapsed)\n    }\n    setCollapsedLocal(!isCollapsed)\n  }, [onToggle, isCollapsed])\n\n  return (\n    <div\n      className={[\n        baseClass,\n        className,\n        dragHandleProps && `${baseClass}--has-drag-handle`,\n        isCollapsed && `${baseClass}--collapsed`,\n        isWithinCollapsible && `${baseClass}--nested`,\n        hoveringToggle && `${baseClass}--hovered`,\n        `${baseClass}--style-${collapsibleStyle}`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <CollapsibleProvider isCollapsed={isCollapsed} toggle={toggleCollapsible}>\n        <div\n          className={`${baseClass}__toggle-wrap`}\n          onMouseEnter={() => setHoveringToggle(true)}\n          onMouseLeave={() => setHoveringToggle(false)}\n        >\n          <button\n            className={[\n              `${baseClass}__toggle`,\n              `${baseClass}__toggle--${isCollapsed ? 'collapsed' : 'open'}`,\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={toggleCollapsible}\n            type=\"button\"\n          >\n            <span>{t('fields:toggleBlock')}</span>\n          </button>\n          {dragHandleProps && (\n            <div\n              className={`${baseClass}__drag`}\n              {...dragHandleProps.attributes}\n              {...dragHandleProps.listeners}\n            >\n              <DragHandleIcon />\n            </div>\n          )}\n          {header ? (\n            <div\n              className={[\n                `${baseClass}__header-wrap`,\n                dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              {header}\n            </div>\n          ) : null}\n          <div className={`${baseClass}__actions-wrap`}>\n            {actions ? <div className={`${baseClass}__actions`}>{actions}</div> : null}\n            <div className={`${baseClass}__indicator`}>\n              <ChevronIcon direction={!isCollapsed ? 'up' : undefined} />\n            </div>\n          </div>\n        </div>\n        <AnimateHeight duration={200} height={isCollapsed ? 0 : 'auto'}>\n          <div className={`${baseClass}__content`}>{children}</div>\n        </AnimateHeight>\n      </CollapsibleProvider>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}