@payloadcms/ui 3.0.0-canary.95fcd13 → 3.0.0-canary.9beaa28

package/dist/elements/Collapsible/index.js

@@ -1,4 +1,6 @@
 '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';
@@ -10,90 +12,171 @@ 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') void 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(DragHandleIcon, {})
-                        }),
-                        /*#__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(ChevronIcon, {
-                                        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(32);
+  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];
+  }
+  let t12;
+  if ($[12] !== dragHandleProps) {
+    t12 = dragHandleProps && _jsx("div", {
+      className: `${baseClass}__drag`,
+      ...dragHandleProps.attributes,
+      ...dragHandleProps.listeners,
+      children: _jsx(DragHandleIcon, {})
+    });
+    $[12] = dragHandleProps;
+    $[13] = t12;
+  } else {
+    t12 = $[13];
+  }
+  const t13 = `${baseClass}__toggle--${isCollapsed ? "collapsed" : "open"}`;
+  let t14;
+  if ($[14] !== t13) {
+    t14 = [`${baseClass}__toggle`, t13].filter(Boolean);
+    $[14] = t13;
+    $[15] = t14;
+  } else {
+    t14 = $[15];
+  }
+  const t15 = t14.join(" ");
+  let t16;
+  if ($[16] !== t || $[17] !== t15 || $[18] !== toggleCollapsible || $[19] !== header || $[20] !== dragHandleProps || $[21] !== actions || $[22] !== isCollapsed || $[23] !== t12 || $[24] !== children || $[25] !== t9) {
+    let t17;
+    if ($[27] !== header || $[28] !== dragHandleProps) {
+      t17 = header && _jsx("div", {
+        className: [`${baseClass}__header-wrap`, dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`].filter(Boolean).join(" "),
+        children: header && header
+      });
+      $[27] = header;
+      $[28] = dragHandleProps;
+      $[29] = t17;
+    } else {
+      t17 = $[29];
+    }
+    let t18;
+    if ($[30] !== actions) {
+      t18 = actions && _jsx("div", {
+        className: `${baseClass}__actions`,
+        children: actions
+      });
+      $[30] = actions;
+      $[31] = t18;
+    } else {
+      t18 = $[31];
+    }
+    t16 = _jsx("div", {
+      className: t9,
+      children: _jsxs(CollapsibleProvider, {
+        isCollapsed,
+        toggle: toggleCollapsible,
+        children: [_jsxs("div", {
+          className: `${baseClass}__toggle-wrap`,
+          onMouseEnter: t10,
+          onMouseLeave: t11,
+          children: [t12, _jsx("button", {
+            className: t15,
+            onClick: toggleCollapsible,
+            type: "button",
+            children: _jsx("span", {
+              children: t("fields:toggleBlock")
+            })
+          }), t17, _jsxs("div", {
+            className: `${baseClass}__actions-wrap`,
+            children: [t18, _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
+          })
+        })]
+      })
     });
+    $[16] = t;
+    $[17] = t15;
+    $[18] = toggleCollapsible;
+    $[19] = header;
+    $[20] = dragHandleProps;
+    $[21] = actions;
+    $[22] = isCollapsed;
+    $[23] = t12;
+    $[24] = children;
+    $[25] = t9;
+    $[26] = t16;
+  } else {
+    t16 = $[26];
+  }
+  return t16;
 };
-
 //# 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 { 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') void 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              <DragHandleIcon />\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              <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"],"names":["React","useState","AnimateHeightImport","AnimateHeight","default","ChevronIcon","DragHandleIcon","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"],"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","_jsx","attributes","listeners","t13","t14","t15","t16","t17","t18","_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') void 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              <DragHandleIcon />\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              <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":[]}

package/dist/elements/Collapsible/index.scss

@@ -17,9 +17,10 @@
     gap: base(0.2);
     border-top-right-radius: $style-radius-m;
     border-top-left-radius: $style-radius-m;
+    width: 100%;
 
     & > * {
-      z-index: 2;
+      z-index: 1;
     }
 
     &:has(.collapsible__drag) {
@@ -87,6 +88,8 @@
     left: 0;
     pointer-events: none;
     width: 100%;
+    overflow: hidden;
+    max-width: 100%;
   }
 
   &__header-wrap--has-drag-handle {

package/dist/elements/Collapsible/provider.js

@@ -1,33 +1,37 @@
 'use client';
+
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { createContext, useContext } from 'react';
-const Context = /*#__PURE__*/ createContext({
-    isCollapsed: undefined,
-    isVisible: undefined,
-    isWithinCollapsible: undefined,
-    toggle: ()=>{}
+const Context = /*#__PURE__*/createContext({
+  isCollapsed: undefined,
+  isVisible: undefined,
+  isWithinCollapsible: undefined,
+  toggle: () => {}
 });
-export const CollapsibleProvider = ({ children, isCollapsed, isWithinCollapsible = true, toggle })=>{
-    const { isCollapsed: parentIsCollapsed, isVisible } = useCollapsible();
-    const contextValue = React.useMemo(()=>{
-        return {
-            isCollapsed,
-            isVisible: isVisible && !parentIsCollapsed,
-            isWithinCollapsible,
-            toggle
-        };
-    }, [
-        isCollapsed,
-        isWithinCollapsible,
-        toggle,
-        parentIsCollapsed,
-        isVisible
-    ]);
-    return /*#__PURE__*/ _jsx(Context.Provider, {
-        value: contextValue,
-        children: children
-    });
+export const CollapsibleProvider = ({
+  children,
+  isCollapsed,
+  isWithinCollapsible = true,
+  toggle
+}) => {
+  const {
+    isCollapsed: parentIsCollapsed,
+    isVisible
+  } = useCollapsible();
+  const contextValue = React.useMemo(() => {
+    return {
+      isCollapsed,
+      isVisible: isVisible && !parentIsCollapsed,
+      isWithinCollapsible,
+      toggle
+    };
+  }, [isCollapsed, isWithinCollapsible, toggle, parentIsCollapsed, isVisible]);
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: contextValue,
+    children: children
+  });
+};
+export const useCollapsible = () => {
+  return useContext(Context);
 };
-export const useCollapsible = ()=>useContext(Context);
-
 //# sourceMappingURL=provider.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Collapsible/provider.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, useContext } from 'react'\n\ntype ContextType = {\n  isCollapsed: boolean\n  isVisible: boolean\n  isWithinCollapsible: boolean\n  toggle: () => void\n}\n\nconst Context = createContext({\n  isCollapsed: undefined,\n  isVisible: undefined,\n  isWithinCollapsible: undefined,\n  toggle: () => {},\n} as ContextType)\n\nexport const CollapsibleProvider: React.FC<{\n  children?: React.ReactNode\n  isCollapsed?: boolean\n  isWithinCollapsible?: boolean\n  toggle: () => void\n}> = ({ children, isCollapsed, isWithinCollapsible = true, toggle }) => {\n  const { isCollapsed: parentIsCollapsed, isVisible } = useCollapsible()\n\n  const contextValue = React.useMemo((): ContextType => {\n    return {\n      isCollapsed,\n      isVisible: isVisible && !parentIsCollapsed,\n      isWithinCollapsible,\n      toggle,\n    }\n  }, [isCollapsed, isWithinCollapsible, toggle, parentIsCollapsed, isVisible])\n\n  return <Context.Provider value={contextValue}>{children}</Context.Provider>\n}\n\nexport const useCollapsible = (): ContextType => useContext(Context)\n"],"names":["React","createContext","useContext","Context","isCollapsed","undefined","isVisible","isWithinCollapsible","toggle","CollapsibleProvider","children","parentIsCollapsed","useCollapsible","contextValue","useMemo","Provider","value"],"mappings":"AAAA;;AACA,OAAOA,SAASC,aAAa,EAAEC,UAAU,QAAQ,QAAO;AASxD,MAAMC,wBAAUF,cAAc;IAC5BG,aAAaC;IACbC,WAAWD;IACXE,qBAAqBF;IACrBG,QAAQ,KAAO;AACjB;AAEA,OAAO,MAAMC,sBAKR,CAAC,EAAEC,QAAQ,EAAEN,WAAW,EAAEG,sBAAsB,IAAI,EAAEC,MAAM,EAAE;IACjE,MAAM,EAAEJ,aAAaO,iBAAiB,EAAEL,SAAS,EAAE,GAAGM;IAEtD,MAAMC,eAAeb,MAAMc,OAAO,CAAC;QACjC,OAAO;YACLV;YACAE,WAAWA,aAAa,CAACK;YACzBJ;YACAC;QACF;IACF,GAAG;QAACJ;QAAaG;QAAqBC;QAAQG;QAAmBL;KAAU;IAE3E,qBAAO,KAACH,QAAQY,QAAQ;QAACC,OAAOH;kBAAeH;;AACjD,EAAC;AAED,OAAO,MAAME,iBAAiB,IAAmBV,WAAWC,SAAQ"}
+{"version":3,"file":"provider.js","names":["React","createContext","useContext","Context","isCollapsed","undefined","isVisible","isWithinCollapsible","toggle","CollapsibleProvider","children","parentIsCollapsed","useCollapsible","contextValue","useMemo","_jsx","Provider","value"],"sources":["../../../src/elements/Collapsible/provider.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, useContext } from 'react'\n\ntype ContextType = {\n  isCollapsed: boolean\n  isVisible: boolean\n  isWithinCollapsible: boolean\n  toggle: () => void\n}\n\nconst Context = createContext({\n  isCollapsed: undefined,\n  isVisible: undefined,\n  isWithinCollapsible: undefined,\n  toggle: () => {},\n} as ContextType)\n\nexport const CollapsibleProvider: React.FC<{\n  children?: React.ReactNode\n  isCollapsed?: boolean\n  isWithinCollapsible?: boolean\n  toggle: () => void\n}> = ({ children, isCollapsed, isWithinCollapsible = true, toggle }) => {\n  const { isCollapsed: parentIsCollapsed, isVisible } = useCollapsible()\n\n  const contextValue = React.useMemo((): ContextType => {\n    return {\n      isCollapsed,\n      isVisible: isVisible && !parentIsCollapsed,\n      isWithinCollapsible,\n      toggle,\n    }\n  }, [isCollapsed, isWithinCollapsible, toggle, parentIsCollapsed, isVisible])\n\n  return <Context.Provider value={contextValue}>{children}</Context.Provider>\n}\n\nexport const useCollapsible = (): ContextType => useContext(Context)\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,aAAa,EAAEC,UAAU,QAAQ;AASjD,MAAMC,OAAA,gBAAUF,aAAA,CAAc;EAC5BG,WAAA,EAAaC,SAAA;EACbC,SAAA,EAAWD,SAAA;EACXE,mBAAA,EAAqBF,SAAA;EACrBG,MAAA,EAAQA,CAAA,MAAO;AACjB;AAEA,OAAO,MAAMC,mBAAA,GAKRA,CAAC;EAAEC,QAAQ;EAAEN,WAAW;EAAEG,mBAAA,GAAsB,IAAI;EAAEC;AAAM,CAAE;EACjE,MAAM;IAAEJ,WAAA,EAAaO,iBAAiB;IAAEL;EAAS,CAAE,GAAGM,cAAA;EAEtD,MAAMC,YAAA,GAAeb,KAAA,CAAMc,OAAO,CAAC;IACjC,OAAO;MACLV,WAAA;MACAE,SAAA,EAAWA,SAAA,IAAa,CAACK,iBAAA;MACzBJ,mBAAA;MACAC;IACF;EACF,GAAG,CAACJ,WAAA,EAAaG,mBAAA,EAAqBC,MAAA,EAAQG,iBAAA,EAAmBL,SAAA,CAAU;EAE3E,oBAAOS,IAAA,CAACZ,OAAA,CAAQa,QAAQ;IAACC,KAAA,EAAOJ,YAAA;cAAeH;;AACjD;AAEA,OAAO,MAAME,cAAA,GAAiBA,CAAA;EAAA,OAAmBV,UAAA,CAAAC,OAAW;AAAA","ignoreList":[]}

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

@@ -2,7 +2,7 @@ import type { SanitizedCollectionConfig } from 'payload';
 import React from 'react';
 import './index.scss';
 export type Props = {
-    collectionSlug: SanitizedCollectionConfig['slug'];
+    readonly collectionSlug: SanitizedCollectionConfig['slug'];
 };
 export declare const ColumnSelector: React.FC<Props>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelector/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAExD,OAAO,KAAgB,MAAM,OAAO,CAAA;AAUpC,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;CAClD,CAAA;AAQD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmD1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelector/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAExD,OAAO,KAAgB,MAAM,OAAO,CAAA;AAUpC,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;CAC3D,CAAA;AAQD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmD1C,CAAA"}

package/dist/elements/ColumnSelector/index.js

@@ -1,4 +1,6 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useId } from 'react';
 import { PlusIcon } from '../../icons/Plus/index.js';
@@ -9,49 +11,100 @@ import { Pill } from '../Pill/index.js';
 import { useTableColumns } from '../TableColumns/index.js';
 import './index.scss';
 const baseClass = 'column-selector';
-const filterColumnFields = (fields)=>{
-    return fields.filter((field)=>{
-        return !field.admin?.disableListColumn;
-    });
+const filterColumnFields = fields => {
+  return fields.filter(field => {
+    return !field.cellProps?.field?.admin?.disableListColumn;
+  });
 };
-export const ColumnSelector = ({ collectionSlug })=>{
-    const { columns, moveColumn, toggleColumn } = useTableColumns();
-    const uuid = useId();
-    const editDepth = useEditDepth();
-    if (!columns) {
-        return null;
-    }
+export const ColumnSelector = t0 => {
+  const $ = _c(14);
+  const {
+    collectionSlug
+  } = t0;
+  const {
+    columns,
+    moveColumn,
+    toggleColumn
+  } = useTableColumns();
+  const uuid = useId();
+  const editDepth = useEditDepth();
+  if (!columns) {
+    return null;
+  }
+  let t1;
+  if ($[0] !== columns || $[1] !== moveColumn || $[2] !== toggleColumn || $[3] !== collectionSlug || $[4] !== editDepth || $[5] !== uuid) {
     const filteredColumns = filterColumnFields(columns);
-    return /*#__PURE__*/ _jsx(DraggableSortable, {
-        className: baseClass,
-        ids: filteredColumns.map((col)=>col?.accessor),
-        onDragEnd: ({ moveFromIndex, moveToIndex })=>{
-            moveColumn({
-                fromIndex: moveFromIndex,
-                toIndex: moveToIndex
-            });
-        },
-        children: filteredColumns.map((col, i)=>{
-            if (!col) return null;
-            const { Label, accessor, active } = col;
-            if (col.accessor === '_select') return null;
-            return /*#__PURE__*/ _jsx(Pill, {
-                alignIcon: "left",
-                "aria-checked": active,
-                className: [
-                    `${baseClass}__column`,
-                    active && `${baseClass}__column--active`
-                ].filter(Boolean).join(' '),
-                draggable: true,
-                icon: active ? /*#__PURE__*/ _jsx(XIcon, {}) : /*#__PURE__*/ _jsx(PlusIcon, {}),
-                id: accessor,
-                onClick: ()=>{
-                    toggleColumn(accessor);
-                },
-                children: Label
-            }, `${collectionSlug}-${col.name || i}${editDepth ? `-${editDepth}-` : ''}${uuid}`);
-        })
+    let t2;
+    if ($[7] !== moveColumn) {
+      t2 = t3 => {
+        const {
+          moveFromIndex,
+          moveToIndex
+        } = t3;
+        moveColumn({
+          fromIndex: moveFromIndex,
+          toIndex: moveToIndex
+        });
+      };
+      $[7] = moveColumn;
+      $[8] = t2;
+    } else {
+      t2 = $[8];
+    }
+    let t3;
+    if ($[9] !== toggleColumn || $[10] !== collectionSlug || $[11] !== editDepth || $[12] !== uuid) {
+      t3 = (col_0, i) => {
+        if (!col_0) {
+          return null;
+        }
+        const {
+          Label,
+          accessor,
+          active
+        } = col_0;
+        if (col_0.accessor === "_select") {
+          return null;
+        }
+        return _jsx(Pill, {
+          alignIcon: "left",
+          "aria-checked": active,
+          className: [`${baseClass}__column`, active && `${baseClass}__column--active`].filter(Boolean).join(" "),
+          draggable: true,
+          icon: active ? _jsx(XIcon, {}) : _jsx(PlusIcon, {}),
+          id: accessor,
+          onClick: () => {
+            toggleColumn(accessor);
+          },
+          children: Label
+        }, `${collectionSlug}-${col_0.cellProps?.field && "name" in col_0.cellProps.field ? col_0.cellProps?.field?.name : i}${editDepth ? `-${editDepth}-` : ""}${uuid}`);
+      };
+      $[9] = toggleColumn;
+      $[10] = collectionSlug;
+      $[11] = editDepth;
+      $[12] = uuid;
+      $[13] = t3;
+    } else {
+      t3 = $[13];
+    }
+    t1 = _jsx(DraggableSortable, {
+      className: baseClass,
+      ids: filteredColumns.map(_temp),
+      onDragEnd: t2,
+      children: filteredColumns.map(t3)
     });
+    $[0] = columns;
+    $[1] = moveColumn;
+    $[2] = toggleColumn;
+    $[3] = collectionSlug;
+    $[4] = editDepth;
+    $[5] = uuid;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  return t1;
 };
-
+function _temp(col) {
+  return col?.accessor;
+}
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ColumnSelector/index.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport React, { useId } from 'react'\n\nimport type { Column } from '../Table/index.js'\n\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { useTableColumns } from '../TableColumns/index.js'\nimport './index.scss'\n\nconst baseClass = 'column-selector'\n\nexport type Props = {\n  collectionSlug: SanitizedCollectionConfig['slug']\n}\n\nconst filterColumnFields = (fields: Column[]): Column[] => {\n  return fields.filter((field) => {\n    return !field.admin?.disableListColumn\n  })\n}\n\nexport const ColumnSelector: React.FC<Props> = ({ collectionSlug }) => {\n  const { columns, moveColumn, toggleColumn } = useTableColumns()\n\n  const uuid = useId()\n  const editDepth = useEditDepth()\n\n  if (!columns) {\n    return null\n  }\n\n  const filteredColumns = filterColumnFields(columns)\n\n  return (\n    <DraggableSortable\n      className={baseClass}\n      ids={filteredColumns.map((col) => col?.accessor)}\n      onDragEnd={({ moveFromIndex, moveToIndex }) => {\n        moveColumn({\n          fromIndex: moveFromIndex,\n          toIndex: moveToIndex,\n        })\n      }}\n    >\n      {filteredColumns.map((col, i) => {\n        if (!col) return null\n\n        const { Label, accessor, active } = col\n\n        if (col.accessor === '_select') return null\n\n        return (\n          <Pill\n            alignIcon=\"left\"\n            aria-checked={active}\n            className={[`${baseClass}__column`, active && `${baseClass}__column--active`]\n              .filter(Boolean)\n              .join(' ')}\n            draggable\n            icon={active ? <XIcon /> : <PlusIcon />}\n            id={accessor}\n            key={`${collectionSlug}-${col.name || i}${editDepth ? `-${editDepth}-` : ''}${uuid}`}\n            onClick={() => {\n              toggleColumn(accessor)\n            }}\n          >\n            {Label}\n          </Pill>\n        )\n      })}\n    </DraggableSortable>\n  )\n}\n"],"names":["React","useId","PlusIcon","XIcon","useEditDepth","DraggableSortable","Pill","useTableColumns","baseClass","filterColumnFields","fields","filter","field","admin","disableListColumn","ColumnSelector","collectionSlug","columns","moveColumn","toggleColumn","uuid","editDepth","filteredColumns","className","ids","map","col","accessor","onDragEnd","moveFromIndex","moveToIndex","fromIndex","toIndex","i","Label","active","alignIcon","aria-checked","Boolean","join","draggable","icon","id","onClick","name"],"mappings":"AAAA;;AAGA,OAAOA,SAASC,KAAK,QAAQ,QAAO;AAIpC,SAASC,QAAQ,QAAQ,4BAA2B;AACpD,SAASC,KAAK,QAAQ,yBAAwB;AAC9C,SAASC,YAAY,QAAQ,qCAAoC;AACjE,SAASC,iBAAiB,QAAQ,gCAA+B;AACjE,SAASC,IAAI,QAAQ,mBAAkB;AACvC,SAASC,eAAe,QAAQ,2BAA0B;AAC1D,OAAO,eAAc;AAErB,MAAMC,YAAY;AAMlB,MAAMC,qBAAqB,CAACC;IAC1B,OAAOA,OAAOC,MAAM,CAAC,CAACC;QACpB,OAAO,CAACA,MAAMC,KAAK,EAAEC;IACvB;AACF;AAEA,OAAO,MAAMC,iBAAkC,CAAC,EAAEC,cAAc,EAAE;IAChE,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGZ;IAE9C,MAAMa,OAAOnB;IACb,MAAMoB,YAAYjB;IAElB,IAAI,CAACa,SAAS;QACZ,OAAO;IACT;IAEA,MAAMK,kBAAkBb,mBAAmBQ;IAE3C,qBACE,KAACZ;QACCkB,WAAWf;QACXgB,KAAKF,gBAAgBG,GAAG,CAAC,CAACC,MAAQA,KAAKC;QACvCC,WAAW,CAAC,EAAEC,aAAa,EAAEC,WAAW,EAAE;YACxCZ,WAAW;gBACTa,WAAWF;gBACXG,SAASF;YACX;QACF;kBAECR,gBAAgBG,GAAG,CAAC,CAACC,KAAKO;YACzB,IAAI,CAACP,KAAK,OAAO;YAEjB,MAAM,EAAEQ,KAAK,EAAEP,QAAQ,EAAEQ,MAAM,EAAE,GAAGT;YAEpC,IAAIA,IAAIC,QAAQ,KAAK,WAAW,OAAO;YAEvC,qBACE,KAACrB;gBACC8B,WAAU;gBACVC,gBAAcF;gBACdZ,WAAW;oBAAC,CAAC,EAAEf,UAAU,QAAQ,CAAC;oBAAE2B,UAAU,CAAC,EAAE3B,UAAU,gBAAgB,CAAC;iBAAC,CAC1EG,MAAM,CAAC2B,SACPC,IAAI,CAAC;gBACRC,SAAS;gBACTC,MAAMN,uBAAS,KAAChC,2BAAW,KAACD;gBAC5BwC,IAAIf;gBAEJgB,SAAS;oBACPxB,aAAaQ;gBACf;0BAECO;eALI,CAAC,EAAElB,eAAe,CAAC,EAAEU,IAAIkB,IAAI,IAAIX,EAAE,EAAEZ,YAAY,CAAC,CAAC,EAAEA,UAAU,CAAC,CAAC,GAAG,GAAG,EAAED,KAAK,CAAC;QAQ1F;;AAGN,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","useId","PlusIcon","XIcon","useEditDepth","DraggableSortable","Pill","useTableColumns","baseClass","filterColumnFields","fields","filter","field","cellProps","admin","disableListColumn","ColumnSelector","t0","$","collectionSlug","columns","moveColumn","toggleColumn","uuid","editDepth","t1","filteredColumns","t2","t3","moveFromIndex","moveToIndex","fromIndex","toIndex","col_0","i","col","Label","accessor","active","_jsx","alignIcon","className","Boolean","join","draggable","icon","id","onClick","children","name","ids","map","_temp","onDragEnd"],"sources":["../../../src/elements/ColumnSelector/index.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport React, { useId } from 'react'\n\nimport type { Column } from '../Table/index.js'\n\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { useTableColumns } from '../TableColumns/index.js'\nimport './index.scss'\n\nconst baseClass = 'column-selector'\n\nexport type Props = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n}\n\nconst filterColumnFields = (fields: Column[]): Column[] => {\n  return fields.filter((field) => {\n    return !field.cellProps?.field?.admin?.disableListColumn\n  })\n}\n\nexport const ColumnSelector: React.FC<Props> = ({ collectionSlug }) => {\n  const { columns, moveColumn, toggleColumn } = useTableColumns()\n\n  const uuid = useId()\n  const editDepth = useEditDepth()\n\n  if (!columns) {\n    return null\n  }\n\n  const filteredColumns = filterColumnFields(columns)\n\n  return (\n    <DraggableSortable\n      className={baseClass}\n      ids={filteredColumns.map((col) => col?.accessor)}\n      onDragEnd={({ moveFromIndex, moveToIndex }) => {\n        moveColumn({\n          fromIndex: moveFromIndex,\n          toIndex: moveToIndex,\n        })\n      }}\n    >\n      {filteredColumns.map((col, i) => {\n        if (!col) return null\n\n        const { Label, accessor, active } = col\n\n        if (col.accessor === '_select') return null\n\n        return (\n          <Pill\n            alignIcon=\"left\"\n            aria-checked={active}\n            className={[`${baseClass}__column`, active && `${baseClass}__column--active`]\n              .filter(Boolean)\n              .join(' ')}\n            draggable\n            icon={active ? <XIcon /> : <PlusIcon />}\n            id={accessor}\n            key={`${collectionSlug}-${col.cellProps?.field && 'name' in col.cellProps.field ? col.cellProps?.field?.name : i}${editDepth ? `-${editDepth}-` : ''}${uuid}`}\n            onClick={() => {\n              toggleColumn(accessor)\n            }}\n          >\n            {Label}\n          </Pill>\n        )\n      })}\n    </DraggableSortable>\n  )\n}\n"],"mappings":"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","ignoreList":[]}