@payloadcms/ui 3.0.0-canary.6041f49 → 3.0.0-canary.690108d

package/dist/elements/Collapsible/index.js

@@ -1,10 +1,12 @@
 'use client';
+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 };
@@ -15,13 +17,13 @@ export const Collapsible = ({ actions, children, className, collapsibleStyle = '
     const { t } = useTranslation();
     const isCollapsed = typeof collapsedFromProps === 'boolean' ? collapsedFromProps : collapsedLocal;
     const toggleCollapsible = React.useCallback(()=>{
-        if (typeof onToggle === 'function') onToggle(!isCollapsed);
+        if (typeof onToggle === 'function') void onToggle(!isCollapsed);
         setCollapsedLocal(!isCollapsed);
     }, [
         onToggle,
         isCollapsed
     ]);
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ _jsx("div", {
         className: [
             baseClass,
             className,
@@ -30,44 +32,68 @@ export const Collapsible = ({ actions, children, className, collapsibleStyle = '
             isWithinCollapsible && `${baseClass}--nested`,
             hoveringToggle && `${baseClass}--hovered`,
             `${baseClass}--style-${collapsibleStyle}`
-        ].filter(Boolean).join(' ')
-    }, /*#__PURE__*/ React.createElement(CollapsibleProvider, {
-        isCollapsed: isCollapsed,
-        toggle: toggleCollapsible
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__toggle-wrap`,
-        onMouseEnter: ()=>setHoveringToggle(true),
-        onMouseLeave: ()=>setHoveringToggle(false)
-    }, dragHandleProps && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__drag`,
-        ...dragHandleProps.attributes,
-        ...dragHandleProps.listeners
-    }, /*#__PURE__*/ React.createElement(DragHandle, null)), /*#__PURE__*/ React.createElement("button", {
-        className: [
-            `${baseClass}__toggle`,
-            `${baseClass}__toggle--${isCollapsed ? 'collapsed' : 'open'}`
         ].filter(Boolean).join(' '),
-        onClick: toggleCollapsible,
-        type: "button"
-    }, /*#__PURE__*/ React.createElement("span", null, t('fields:toggleBlock'))), header && /*#__PURE__*/ React.createElement("div", {
-        className: [
-            `${baseClass}__header-wrap`,
-            dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`
-        ].filter(Boolean).join(' ')
-    }, header && header), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__actions-wrap`
-    }, actions && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__actions`
-    }, actions), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__indicator`
-    }, /*#__PURE__*/ React.createElement(Chevron, {
-        direction: !isCollapsed ? 'up' : undefined
-    })))), /*#__PURE__*/ React.createElement(AnimateHeight, {
-        duration: 200,
-        height: isCollapsed ? 0 : 'auto'
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__content`
-    }, children))));
+        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
+                    })
+                })
+            ]
+        })
+    });
 };
 
 //# 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,"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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"}

package/dist/elements/Collapsible/index.scss

@@ -2,20 +2,45 @@
 
 .collapsible {
   --toggle-pad-h: #{base(0.75)};
-  --toggle-pad-v: #{base(0.5)};
+  --toggle-pad-v: #{base(0.6)};
 
   border-radius: $style-radius-m;
 
   &__toggle-wrap {
     position: relative;
+    padding: base(0.4) base(0.4) base(0.4) base(0.8);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--theme-elevation-50);
+    line-height: base(1.2);
+    gap: base(0.2);
+    border-top-right-radius: $style-radius-m;
+    border-top-left-radius: $style-radius-m;
+    width: 100%;
+
+    & > * {
+      z-index: 1;
+    }
+
+    &:has(.collapsible__drag) {
+      padding-inline-start: base(0.4);
+    }
   }
 
   &__drag {
+    display: flex;
     opacity: 0.5;
-    position: absolute;
-    z-index: 1;
+    z-index: 2;
     top: var(--toggle-pad-v);
-    left: base(0.5);
+    width: base(1.2);
+    height: base(1.2);
+    padding: base(0.1);
+
+    icon {
+      width: 100%;
+      height: 100%;
+    }
   }
 
   &__toggle {
@@ -23,10 +48,15 @@
     @extend %body;
     text-align: left;
     cursor: pointer;
-    border-top-right-radius: $style-radius-s;
-    border-top-left-radius: $style-radius-s;
+    border-top-right-radius: $style-radius-m;
+    border-top-left-radius: $style-radius-m;
     width: 100%;
+    height: 100%;
     color: transparent;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
 
     span {
       user-select: none;
@@ -43,9 +73,6 @@
       .row-label {
         color: var(--theme-text);
       }
-      .collapsible__toggle {
-        background: var(--theme-elevation-50);
-      }
     }
     &.collapsible--hovered {
       > .collapsible__toggle-wrap .collapsible__toggle {
@@ -54,57 +81,64 @@
     }
   }
 
-  &__toggle,
-  &__header-wrap {
-    padding: var(--toggle-pad-v) var(--toggle-pad-h);
-  }
-
   &__header-wrap {
-    position: absolute;
     top: 0;
     right: base(3);
     bottom: 0;
     left: 0;
     pointer-events: none;
-
-    > * {
-      pointer-events: all;
-    }
+    width: 100%;
+    overflow: hidden;
+    max-width: 100%;
   }
 
   &__header-wrap--has-drag-handle {
-    left: base(0.875);
+    left: base(1);
   }
 
   &--collapsed {
-    .collapsible__toggle {
-      border-bottom-right-radius: $style-radius-s;
-      border-bottom-left-radius: $style-radius-s;
+    .collapsible__toggle-wrap {
+      border-bottom-right-radius: $style-radius-m;
+      border-bottom-left-radius: $style-radius-m;
     }
   }
 
   &__actions-wrap {
-    position: absolute;
-    right: var(--toggle-pad-h);
-    top: var(--toggle-pad-v);
     pointer-events: none;
     display: flex;
+    gap: base(0.2);
+    margin-inline-end: base(0.2);
   }
 
   &__actions {
     pointer-events: all;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: base(1.2);
+    height: base(1.2);
+
+    &.icon {
+      padding: base(0.1);
+    }
   }
 
   &__indicator {
-    padding: calc(var(--base) / 4);
     display: flex;
-    align-items: flex-start;
+    align-items: center;
+    justify-content: center;
+    width: base(1.2);
+    height: base(1.2);
+
+    &.icon {
+      padding: base(0.1);
+    }
   }
 
   &__content {
     background-color: var(--theme-elevation-0);
-    border-bottom-left-radius: $style-radius-s;
-    border-bottom-right-radius: $style-radius-s;
+    border-bottom-left-radius: $style-radius-m;
+    border-bottom-right-radius: $style-radius-m;
     padding: var(--base);
   }
 
@@ -113,58 +147,24 @@
       padding: var(--gutter-h);
     }
   }
-}
-
-html[data-theme='dark'] {
-  .collapsible {
-    &--style-error {
-      border: 1px solid var(--theme-error-400);
-      &:hover {
-        border: 1px solid var(--theme-error-500);
-      }
-
-      > .collapsible__toggle-wrap {
-        .row-label {
-          color: var(--theme-error-500);
-        }
-        .collapsible__toggle {
-          background: var(--theme-error-100);
-        }
-      }
-      &.collapsible--hovered {
-        > .collapsible__toggle-wrap .collapsible__toggle {
-          background: var(--theme-error-150);
-        }
-      }
-    }
-  }
-}
 
-html[data-theme='light'] {
-  .collapsible {
-    &--style-error {
+  &--style-error {
+    border: 1px solid var(--theme-error-400);
+    &:hover {
       border: 1px solid var(--theme-error-500);
-      &:hover {
-        border: 1px solid var(--theme-error-600);
-      }
+    }
 
-      > .collapsible__toggle-wrap {
-        .row-label {
-          color: var(--theme-error-750);
-        }
-        .collapsible__toggle {
-          background: var(--theme-error-50);
-        }
+    > .collapsible__toggle-wrap {
+      .row-label {
+        color: var(--theme-error-950);
       }
-      &.collapsible--hovered {
-        > .collapsible__toggle-wrap .collapsible__toggle {
-          background: var(--theme-error-100);
-        }
+      .collapsible__toggle {
+        background: var(--theme-error-100);
       }
-      &.error {
-        & input {
-          border-color: var(--theme-error-500);
-        }
+    }
+    &.collapsible--hovered {
+      > .collapsible__toggle-wrap .collapsible__toggle {
+        background: var(--theme-error-150);
       }
     }
   }

package/dist/elements/Collapsible/provider.js

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { createContext, useContext } from 'react';
 const Context = /*#__PURE__*/ createContext({
     isCollapsed: undefined,
@@ -22,9 +23,10 @@ export const CollapsibleProvider = ({ children, isCollapsed, isWithinCollapsible
         parentIsCollapsed,
         isVisible
     ]);
-    return /*#__PURE__*/ React.createElement(Context.Provider, {
-        value: contextValue
-    }, children);
+    return /*#__PURE__*/ _jsx(Context.Provider, {
+        value: contextValue,
+        children: children
+    });
 };
 export const useCollapsible = ()=>useContext(Context);
 

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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","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,oBAACH,QAAQY,QAAQ;QAACC,OAAOH;OAAeH;AACjD,EAAC;AAED,OAAO,MAAME,iBAAiB,IAAmBV,WAAWC,SAAQ"}
+{"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"}

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

@@ -1,8 +1,8 @@
-import type { SanitizedCollectionConfig } from 'payload/types';
+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,eAAe,CAAA;AAE9D,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,15 +1,17 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useId } from 'react';
-import { Plus } from '../../icons/Plus/index.js';
-import { X } from '../../icons/X/index.js';
+import { PlusIcon } from '../../icons/Plus/index.js';
+import { XIcon } from '../../icons/X/index.js';
 import { useEditDepth } from '../../providers/EditDepth/index.js';
 import { DraggableSortable } from '../DraggableSortable/index.js';
 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;
+        return !field.cellProps?.field?.admin?.disableListColumn;
     });
 };
 export const ColumnSelector = ({ collectionSlug })=>{
@@ -20,7 +22,7 @@ export const ColumnSelector = ({ collectionSlug })=>{
         return null;
     }
     const filteredColumns = filterColumnFields(columns);
-    return /*#__PURE__*/ React.createElement(DraggableSortable, {
+    return /*#__PURE__*/ _jsx(DraggableSortable, {
         className: baseClass,
         ids: filteredColumns.map((col)=>col?.accessor),
         onDragEnd: ({ moveFromIndex, moveToIndex })=>{
@@ -28,27 +30,28 @@ export const ColumnSelector = ({ collectionSlug })=>{
                 fromIndex: moveFromIndex,
                 toIndex: moveToIndex
             });
-        }
-    }, filteredColumns.map((col, i)=>{
-        if (!col) return null;
-        const { Label, accessor, active } = col;
-        if (col.accessor === '_select') return null;
-        return /*#__PURE__*/ React.createElement(Pill, {
-            alignIcon: "left",
-            "aria-checked": active,
-            className: [
-                `${baseClass}__column`,
-                active && `${baseClass}__column--active`
-            ].filter(Boolean).join(' '),
-            draggable: true,
-            icon: active ? /*#__PURE__*/ React.createElement(X, null) : /*#__PURE__*/ React.createElement(Plus, null),
-            id: accessor,
-            key: `${collectionSlug}-${col.name || i}${editDepth ? `-${editDepth}-` : ''}${uuid}`,
-            onClick: ()=>{
-                toggleColumn(accessor);
-            }
-        }, Label);
-    }));
+        },
+        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.cellProps?.field && 'name' in col.cellProps.field ? col.cellProps?.field?.name : i}${editDepth ? `-${editDepth}-` : ''}${uuid}`);
+        })
+    });
 };
 
 //# 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/types'\n\nimport React, { useId } from 'react'\n\nimport type { Column } from '../Table/index.js'\n\nimport { Plus } from '../../icons/Plus/index.js'\nimport { X } 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 ? <X /> : <Plus />}\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","Plus","X","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","key","name","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAGA,OAAOA,SAASC,KAAK,QAAQ,QAAO;AAIpC,SAASC,IAAI,QAAQ,4BAA2B;AAChD,SAASC,CAAC,QAAQ,yBAAwB;AAC1C,SAASC,YAAY,QAAQ,qCAAoC;AACjE,SAASC,iBAAiB,QAAQ,gCAA+B;AACjE,SAASC,IAAI,QAAQ,mBAAkB;AACvC,SAASC,eAAe,QAAQ,2BAA0B;AAG1D,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,oBAACZ;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;OAECR,gBAAgBG,GAAG,CAAC,CAACC,KAAKO;QACzB,IAAI,CAACP,KAAK,OAAO;QAEjB,MAAM,EAAEQ,KAAK,EAAEP,QAAQ,EAAEQ,MAAM,EAAE,GAAGT;QAEpC,IAAIA,IAAIC,QAAQ,KAAK,WAAW,OAAO;QAEvC,qBACE,oBAACrB;YACC8B,WAAU;YACVC,gBAAcF;YACdZ,WAAW;gBAAC,CAAC,EAAEf,UAAU,QAAQ,CAAC;gBAAE2B,UAAU,CAAC,EAAE3B,UAAU,gBAAgB,CAAC;aAAC,CAC1EG,MAAM,CAAC2B,SACPC,IAAI,CAAC;YACRC,WAAAA;YACAC,MAAMN,uBAAS,oBAAChC,yBAAO,oBAACD;YACxBwC,IAAIf;YACJgB,KAAK,CAAC,EAAE3B,eAAe,CAAC,EAAEU,IAAIkB,IAAI,IAAIX,EAAE,EAAEZ,YAAY,CAAC,CAAC,EAAEA,UAAU,CAAC,CAAC,GAAG,GAAG,EAAED,KAAK,CAAC;YACpFyB,SAAS;gBACP1B,aAAaQ;YACf;WAECO;IAGP;AAGN,EAAC"}
+{"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  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"],"names":["React","useId","PlusIcon","XIcon","useEditDepth","DraggableSortable","Pill","useTableColumns","baseClass","filterColumnFields","fields","filter","field","cellProps","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,SAAS,EAAED,OAAOE,OAAOC;IACzC;AACF;AAEA,OAAO,MAAMC,iBAAkC,CAAC,EAAEC,cAAc,EAAE;IAChE,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGb;IAE9C,MAAMc,OAAOpB;IACb,MAAMqB,YAAYlB;IAElB,IAAI,CAACc,SAAS;QACZ,OAAO;IACT;IAEA,MAAMK,kBAAkBd,mBAAmBS;IAE3C,qBACE,KAACb;QACCmB,WAAWhB;QACXiB,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,KAACtB;gBACC+B,WAAU;gBACVC,gBAAcF;gBACdZ,WAAW;oBAAC,CAAC,EAAEhB,UAAU,QAAQ,CAAC;oBAAE4B,UAAU,CAAC,EAAE5B,UAAU,gBAAgB,CAAC;iBAAC,CAC1EG,MAAM,CAAC4B,SACPC,IAAI,CAAC;gBACRC,SAAS;gBACTC,MAAMN,uBAAS,KAACjC,2BAAW,KAACD;gBAC5ByC,IAAIf;gBAEJgB,SAAS;oBACPxB,aAAaQ;gBACf;0BAECO;eALI,CAAC,EAAElB,eAAe,CAAC,EAAEU,IAAId,SAAS,EAAED,SAAS,UAAUe,IAAId,SAAS,CAACD,KAAK,GAAGe,IAAId,SAAS,EAAED,OAAOiC,OAAOX,EAAE,EAAEZ,YAAY,CAAC,CAAC,EAAEA,UAAU,CAAC,CAAC,GAAG,GAAG,EAAED,KAAK,CAAC;QAQnK;;AAGN,EAAC"}

package/dist/elements/ColumnSelector/index.scss

@@ -10,10 +10,28 @@
     margin-right: base(0.5);
     margin-bottom: base(0.5);
     background-color: transparent;
-    box-shadow: 0 0 0 1px var(--theme-elevation-200);
+    box-shadow: 0 0 0 1px var(--theme-elevation-150);
+
+    &.column-selector__column {
+      cursor: pointer;
+
+      &:hover {
+        background-color: var(--theme-elevation-100);
+      }
+    }
 
     &.column-selector__column--active {
-      background-color: var(--theme-elevation-150);
+      background-color: var(--theme-elevation-0);
+      box-shadow:
+        0 0px 1px 1px var(--theme-elevation-150),
+        0 2px 4px -2px rgba(0, 0, 0, 0.1);
+
+      &:hover {
+        background-color: var(--theme-elevation-0);
+        box-shadow:
+          0 0px 1px 1px var(--theme-elevation-250),
+          0 3px 4px -1px rgba(0, 0, 0, 0.1);
+      }
     }
   }