@payloadcms/ui 3.86.0-internal.ac46214 → 4.0.0-internal.1f9ae9a

package/dist/elements/Collapsible/index.css

@@ -0,0 +1,214 @@
+@layer payload-default {
+  .collapsible {
+    position: relative;
+    border-radius: var(--button-radius);
+    background: var(--color-bg);
+  }
+
+  .collapsible__toggle-wrap {
+    width: 100%;
+    position: relative;
+    padding: 0 var(--spacer-1) 0 var(--spacer-2);
+    display: flex;
+    align-items: center;
+    background: var(--color-bg-secondary);
+    border: var(--stroke-width-small) solid var(--color-border);
+    border-radius: var(--button-radius);
+    height: var(--spacer-5);
+    z-index: 2;
+    cursor: pointer;
+
+    &:not(.toggle-disabled):hover:not(
+        :has(.section-title__input:hover, .section-title__input:focus)
+      ) {
+      background: var(--color-bg-secondary-hover);
+    }
+
+    &.toggle-disabled {
+      cursor: default;
+    }
+
+    &:has(.collapsible__drag) {
+      padding-inline-start: var(--spacer-2);
+    }
+  }
+
+  .collapsible__drag {
+    display: flex;
+    width: var(--spacer-3);
+    height: var(--spacer-3);
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    cursor: grab;
+    touch-action: none;
+    border-radius: var(--button-radius, 0.3125rem);
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    .icon {
+      width: var(--spacer-3);
+      height: var(--spacer-3);
+      .fill {
+        fill: var(--color-icon-tertiary);
+      }
+    }
+  }
+
+  .collapsible__toggle {
+    position: absolute;
+    inset: 0;
+    color: transparent;
+    cursor: pointer;
+    text-align: left;
+    outline: none;
+    border-radius: var(--button-radius);
+
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+      outline-offset: -1px;
+    }
+
+    span {
+      user-select: none;
+    }
+  }
+
+  .collapsible .row-label {
+    color: var(--color-text);
+    letter-spacing: var(--text-letter-spacing);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1 0 0;
+  }
+
+  .collapsible--style-error > .collapsible__toggle-wrap {
+    background-color: var(--color-bg-danger-tertiary);
+    border-color: var(--color-border-danger-strong);
+
+    &:hover:not(:has(.section-title__input:hover, .section-title__input:focus)) {
+      background: var(--color-bg-danger-tertiary-hover);
+    }
+  }
+
+  .collapsible__header-wrap {
+    pointer-events: none;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    flex: 1 0 0;
+    min-width: 1px;
+    padding: 0 var(--spacer-1);
+  }
+
+  /* When expanded, toggle should only have top corners rounded */
+  .collapsible:not(.collapsible--collapsed) > .collapsible__toggle-wrap {
+    border-radius: var(--button-radius) var(--button-radius) 0 0;
+  }
+
+  /* When collapsed, animate border-radius after content finishes closing */
+  .collapsible--collapsed > .collapsible__toggle-wrap {
+    animation: collapsible-round-corners 150ms ease 300ms both;
+  }
+
+  @keyframes collapsible-round-corners {
+    from {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    to {
+      border-bottom-left-radius: var(--button-radius);
+      border-bottom-right-radius: var(--button-radius);
+    }
+  }
+
+  /* Focus ring: when expanded, only top corners rounded */
+  .collapsible:not(.collapsible--collapsed)
+    > .collapsible__toggle-wrap
+    .collapsible__toggle:focus-visible {
+    border-radius: var(--button-radius) var(--button-radius) 0 0;
+  }
+
+  /* Focus ring: when collapsed, animate border-radius after content finishes closing */
+  .collapsible--collapsed > .collapsible__toggle-wrap .collapsible__toggle:focus-visible {
+    animation: collapsible-round-corners 150ms ease 300ms both;
+  }
+
+  .collapsible__actions-wrap {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    position: relative;
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  .collapsible__actions {
+    pointer-events: all;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacer-1);
+    padding: 0 var(--spacer-1);
+    flex-shrink: 0;
+    min-height: var(--spacer-4);
+  }
+
+  .collapsible__indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--spacer-4);
+    min-height: var(--spacer-4);
+    border-radius: var(--button-radius);
+    flex-shrink: 0;
+    pointer-events: all;
+    cursor: pointer;
+    outline: none;
+  }
+
+  .collapsible__toggle-wrap:hover .collapsible__indicator {
+    color: var(--color-icon);
+  }
+
+  .collapsible__indicator:hover {
+    background: var(--color-bg-transparent-hover);
+  }
+
+  .collapsible__indicator:focus-visible {
+    border: var(--stroke-width-small) solid var(--accessibility-focus-color);
+    border-radius: var(--button-radius, 0.3125rem);
+    background: var(--color-bg-secondary);
+  }
+
+  .collapsible__indicator:active {
+    background: var(--color-bg-transparent-pressed);
+  }
+
+  .collapsible__content {
+    background-color: var(--color-bg);
+    border: var(--stroke-width-small) solid var(--color-border);
+    border-top: none;
+    border-radius: 0 0 var(--button-radius) var(--button-radius);
+    padding: var(--spacer-3);
+    z-index: 1;
+  }
+
+  .collapsible--style-error .collapsible__content {
+    border-color: var(--color-border-danger-strong);
+  }
+
+  .collapsible--style-error .collapsible:not(.collapsible--style-error) .collapsible__content {
+    border-color: var(--color-border);
+  }
+
+  @media (max-width: 768px) {
+    .collapsible__content {
+      padding: var(--spacer-2-5);
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { DragHandleProps } from '../DraggableSortable/DraggableSortableItem/types.js';
-import './index.scss';
+import './index.css';
 import { CollapsibleProvider, useCollapsible } from './provider.js';
 export { CollapsibleProvider, useCollapsible };
 export type CollapsibleProps = {

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;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAA;AAK1F,OAAO,cAAc,CAAA;AAErB,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAInE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,CAAA;AAE9C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IACtC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,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,gBAAgB,CAoGlD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Collapsible/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAA;AAK1F,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAInE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,CAAA;AAE9C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IACtC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,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,gBAAgB,CAyGlD,CAAA"}

package/dist/elements/Collapsible/index.js

@@ -3,10 +3,10 @@
 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 { AlignJustifiedIcon } from '../../icons/AlignJustified/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 './index.css';
 import { AnimateHeight } from '../AnimateHeight/index.js';
 import { CollapsibleProvider, useCollapsible } from './provider.js';
 const baseClass = 'collapsible';
@@ -107,7 +107,7 @@ export const Collapsible = t0 => {
             className: `${baseClass}__drag`,
             ...dragHandleProps.attributes,
             ...dragHandleProps.listeners,
-            children: _jsx(DragHandleIcon, {})
+            children: _jsx(AlignJustifiedIcon, {})
           }), header ? _jsx("div", {
             className: [`${baseClass}__header-wrap`, dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`].filter(Boolean).join(" "),
             children: header
@@ -116,8 +116,11 @@ export const Collapsible = t0 => {
             children: [actions ? _jsx("div", {
               className: `${baseClass}__actions`,
               children: actions
-            }) : null, !disableToggleIndicator && _jsx("div", {
+            }) : null, !disableToggleIndicator && _jsx("button", {
               className: `${baseClass}__indicator`,
+              onClick: toggleCollapsible,
+              tabIndex: -1,
+              type: "button",
               children: _jsx(ChevronIcon, {
                 direction: !isCollapsed ? "up" : undefined
               })

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useState","ChevronIcon","DragHandleIcon","useTranslation","AnimateHeight","CollapsibleProvider","useCollapsible","baseClass","Collapsible","t0","$","actions","AfterCollapsible","children","className","collapsibleStyle","t1","disableHeaderToggle","t2","disableToggleIndicator","t3","dragHandleProps","header","initCollapsed","isCollapsed","collapsedFromProps","onToggle","undefined","collapsedLocal","setCollapsedLocal","Boolean","hoveringToggle","setHoveringToggle","isWithinCollapsible","t","t4","toggleCollapsible","t5","t6","t7","t8","t9","t10","filter","t11","join","t12","t13","t14","Symbol","for","t15","_jsx","_jsxs","toggle","onMouseEnter","onMouseLeave","onClick","type","attributes","listeners","direction","height"],"sources":["../../../src/elements/Collapsible/index.tsx"],"sourcesContent":["'use client'\nimport React, { useState } from 'react'\n\nimport type { DragHandleProps } from '../DraggableSortable/DraggableSortableItem/types.js'\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 { AnimateHeight } from '../AnimateHeight/index.js'\nimport { CollapsibleProvider, useCollapsible } from './provider.js'\n\nconst baseClass = 'collapsible'\n\nexport { CollapsibleProvider, useCollapsible }\n\nexport type CollapsibleProps = {\n  actions?: React.ReactNode\n  /**\n   * Components that will be rendered within the collapsible provider but after the wrapper.\n   */\n  AfterCollapsible?: React.ReactNode\n  children: React.ReactNode\n  className?: string\n  collapsibleStyle?: 'default' | 'error'\n  /**\n   * If set to true, clicking on the collapsible header will not toggle the collapsible state.\n   * This is useful if the collapsible state is controlled externally (e.g. from a parent component or custom button).\n   */\n  disableHeaderToggle?: boolean\n  /**\n   * If set to true, the toggle indicator (chevron) on the right side of the header will be hidden.\n   */\n  disableToggleIndicator?: boolean\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<CollapsibleProps> = ({\n  actions,\n  AfterCollapsible,\n  children,\n  className,\n  collapsibleStyle = 'default',\n  disableHeaderToggle = false,\n  disableToggleIndicator = false,\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 && !disableHeaderToggle && `${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${disableHeaderToggle ? ' toggle-disabled' : ''}`}\n          onMouseEnter={() => setHoveringToggle(true)}\n          onMouseLeave={() => setHoveringToggle(false)}\n        >\n          {!disableHeaderToggle && (\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          )}\n\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            {!disableToggleIndicator && (\n              <div className={`${baseClass}__indicator`}>\n                <ChevronIcon direction={!isCollapsed ? 'up' : undefined} />\n              </div>\n            )}\n          </div>\n        </div>\n        <AnimateHeight height={isCollapsed ? 0 : 'auto'}>\n          <div className={`${baseClass}__content`}>{children}</div>\n        </AnimateHeight>\n        {AfterCollapsible}\n      </CollapsibleProvider>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useState","AlignJustifiedIcon","ChevronIcon","useTranslation","AnimateHeight","CollapsibleProvider","useCollapsible","baseClass","Collapsible","t0","$","actions","AfterCollapsible","children","className","collapsibleStyle","t1","disableHeaderToggle","t2","disableToggleIndicator","t3","dragHandleProps","header","initCollapsed","isCollapsed","collapsedFromProps","onToggle","undefined","collapsedLocal","setCollapsedLocal","Boolean","hoveringToggle","setHoveringToggle","isWithinCollapsible","t","t4","toggleCollapsible","t5","t6","t7","t8","t9","t10","filter","t11","join","t12","t13","t14","Symbol","for","t15","_jsx","_jsxs","toggle","onMouseEnter","onMouseLeave","onClick","type","attributes","listeners","tabIndex","direction","height"],"sources":["../../../src/elements/Collapsible/index.tsx"],"sourcesContent":["'use client'\nimport React, { useState } from 'react'\n\nimport type { DragHandleProps } from '../DraggableSortable/DraggableSortableItem/types.js'\n\nimport { AlignJustifiedIcon } from '../../icons/AlignJustified/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\nimport { AnimateHeight } from '../AnimateHeight/index.js'\nimport { CollapsibleProvider, useCollapsible } from './provider.js'\n\nconst baseClass = 'collapsible'\n\nexport { CollapsibleProvider, useCollapsible }\n\nexport type CollapsibleProps = {\n  actions?: React.ReactNode\n  /**\n   * Components that will be rendered within the collapsible provider but after the wrapper.\n   */\n  AfterCollapsible?: React.ReactNode\n  children: React.ReactNode\n  className?: string\n  collapsibleStyle?: 'default' | 'error'\n  /**\n   * If set to true, clicking on the collapsible header will not toggle the collapsible state.\n   * This is useful if the collapsible state is controlled externally (e.g. from a parent component or custom button).\n   */\n  disableHeaderToggle?: boolean\n  /**\n   * If set to true, the toggle indicator (chevron) on the right side of the header will be hidden.\n   */\n  disableToggleIndicator?: boolean\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<CollapsibleProps> = ({\n  actions,\n  AfterCollapsible,\n  children,\n  className,\n  collapsibleStyle = 'default',\n  disableHeaderToggle = false,\n  disableToggleIndicator = false,\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 && !disableHeaderToggle && `${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${disableHeaderToggle ? ' toggle-disabled' : ''}`}\n          onMouseEnter={() => setHoveringToggle(true)}\n          onMouseLeave={() => setHoveringToggle(false)}\n        >\n          {!disableHeaderToggle && (\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          )}\n\n          {dragHandleProps && (\n            <div\n              className={`${baseClass}__drag`}\n              {...dragHandleProps.attributes}\n              {...dragHandleProps.listeners}\n            >\n              <AlignJustifiedIcon />\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            {!disableToggleIndicator && (\n              <button\n                className={`${baseClass}__indicator`}\n                onClick={toggleCollapsible}\n                tabIndex={-1}\n                type=\"button\"\n              >\n                <ChevronIcon direction={!isCollapsed ? 'up' : undefined} />\n              </button>\n            )}\n          </div>\n        </div>\n        <AnimateHeight height={isCollapsed ? 0 : 'auto'}>\n          <div className={`${baseClass}__content`}>{children}</div>\n        </AnimateHeight>\n        {AfterCollapsible}\n      </CollapsibleProvider>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ColumnSelector/index.css

@@ -0,0 +1,229 @@
+@layer payload-default {
+  /* Override default popup padding/max-height when column selector is inside */
+  .popup__scroll-container:has(.column-selector) {
+    padding: 0;
+    max-height: fit-content;
+  }
+
+  .column-selector {
+    --column-selector-min-width: 240px;
+    --column-selector-max-height: 430px;
+
+    display: flex;
+    flex-direction: column;
+    min-width: var(--column-selector-min-width);
+    max-height: var(--column-selector-max-height);
+  }
+
+  /* Lock width during search to prevent layout shift when results change */
+  .column-selector[data-width-locked] {
+    min-width: var(--column-selector-locked-width);
+  }
+
+  .column-selector__header {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: space-between;
+    height: var(--spacer-6);
+    padding-inline-start: var(--spacer-2);
+    padding-inline-end: var(--spacer-2);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  .column-selector__title {
+    padding-inline-start: var(--spacer-2);
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-strong-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    color: var(--color-text);
+  }
+
+  .column-selector__close {
+    padding: 0;
+    color: var(--color-icon);
+  }
+
+  .column-selector__search {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    /* +1px accounts for border-bottom so content area remains 40px (8px + 24px search bar + 8px) */
+    height: calc(var(--spacer-5) + var(--spacer-2) + var(--stroke-width-small));
+    padding-inline: var(--spacer-2-5);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  .column-selector__search-bar {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    height: var(--spacer-4);
+    padding-inline-end: var(--spacer-2);
+    background: var(--color-bg-secondary);
+    border-radius: var(--button-radius);
+  }
+
+  .column-selector__search-bar svg {
+    display: block;
+    flex-shrink: 0;
+    color: var(--color-icon-secondary);
+  }
+
+  .column-selector__search-input {
+    flex: 1;
+    height: 100%;
+    padding: 0;
+    background: transparent;
+    border: none;
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    color: var(--color-text);
+
+    &::placeholder {
+      color: var(--color-text-tertiary);
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .column-selector__content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  .column-selector__no-results {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: calc(
+      var(--spacer-6) + var(--spacer-2)
+    ); /* 48px total: 32px content + 8px top/bottom padding */
+    padding-block: var(--spacer-2);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    color: var(--color-text);
+  }
+
+  .column-selector__section {
+    display: flex;
+    flex-direction: column;
+    padding-block: var(--spacer-2);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .column-selector__section-header {
+    display: flex;
+    align-items: center;
+    height: var(--spacer-5);
+    padding-inline: var(--spacer-3);
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-strong-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    color: var(--color-text-secondary);
+  }
+
+  .column-selector__item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+    padding-inline: var(--spacer-3);
+    padding-block: var(--spacer-1);
+    cursor: pointer;
+
+    &:hover {
+      background: var(--color-bg-secondary);
+    }
+
+    &:focus-visible {
+      outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
+      outline-offset: calc(-1 * var(--accessibility-outline-offset));
+    }
+  }
+
+  .column-selector__item-label {
+    flex: 1;
+    min-width: 0;
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    color: var(--color-text);
+    white-space: nowrap;
+  }
+
+  .column-selector__separator {
+    margin-inline: var(--spacer-1);
+    color: var(--color-text-secondary);
+  }
+
+  .column-selector__item--inactive .column-selector__item-label {
+    color: var(--color-text-secondary);
+  }
+
+  .column-selector__drag-handle {
+    position: absolute;
+    inset-inline-start: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--spacer-3);
+    height: 100%;
+    color: var(--color-icon-secondary);
+    cursor: grab;
+    opacity: 0;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  .column-selector__item:hover .column-selector__drag-handle {
+    opacity: 1;
+  }
+
+  .column-selector__item--dragging {
+    background: var(--color-bg-pressed);
+  }
+
+  .column-selector__item--dragging .column-selector__drag-handle {
+    opacity: 1;
+    cursor: grabbing;
+  }
+
+  .column-selector__item--over {
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset-inline: 0;
+      top: calc(-1 * var(--stroke-width-small));
+      height: var(--stroke-width-medium);
+      background: var(--color-icon);
+      border-radius: var(--stroke-width-small);
+    }
+  }
+
+  .column-selector__drop-indicator {
+    height: var(--stroke-width-medium);
+    background: var(--color-icon);
+    margin-inline: var(--spacer-3);
+  }
+}

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

@@ -1,7 +1,9 @@
 import type { SanitizedCollectionConfig } from 'payload';
 import React from 'react';
+import './index.css';
 export type Props = {
     readonly collectionSlug: SanitizedCollectionConfig['slug'];
+    readonly onClose?: () => void;
 };
 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;AAGrE,OAAO,KAAyB,MAAM,OAAO,CAAA;AAO7C,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;CAC3D,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA4D1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelector/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAe,MAAM,SAAS,CAAA;AAIrE,OAAO,KAAyE,MAAM,OAAO,CAAA;AAY7F,OAAO,aAAa,CAAA;AA8CpB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B,CAAA;AAkDD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsM1C,CAAA"}