@payloadcms/ui 4.0.0-internal.5b1e7cd → 4.0.0-internal.5f0cd13

package/dist/elements/ColumnSelector/index.js

@@ -1,63 +1,318 @@
 'use client';
 
-import { jsx as _jsx } from "react/jsx-runtime";
-import { fieldIsHiddenOrDisabled, fieldIsID } from 'payload/shared';
-import React, { useId, useMemo } from 'react';
-import { FieldLabel } from '../../fields/FieldLabel/index.js';
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import { fieldIsHiddenOrDisabled, fieldIsID, isFieldDisabled } from 'payload/shared';
+import React, { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { AlignJustifiedIcon } from '../../icons/AlignJustified/index.js';
+import { SearchIcon } from '../../icons/Search/index.js';
+import { XIcon } from '../../icons/X/index.js';
 import { useEditDepth } from '../../providers/EditDepth/index.js';
 import { useTableColumns } from '../../providers/TableColumns/index.js';
-import { PillSelector } from '../PillSelector/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { Button } from '../Button/index.js';
+import { DraggableSortable } from '../DraggableSortable/index.js';
+import { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js';
+import { Switch } from '../Switch/index.js';
+import './index.css';
+const baseClass = 'column-selector';
+/**
+ * Parses a nested field label and returns segments for rendering.
+ * - For deeply nested paths (more than 3 segments), truncates to [First, "...", Last]
+ */
+function parseNestedLabel(label) {
+  if (!label.includes(' > ')) {
+    return [label];
+  }
+  const segments = label.split(' > ');
+  if (segments.length <= 3) {
+    return segments;
+  }
+  // For deep nesting, show: First / ... / Last
+  return [segments[0], '...', segments[segments.length - 1]];
+}
+const NestedLabel = ({
+  label
+}) => {
+  const segments = parseNestedLabel(label);
+  if (segments.length === 1) {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: segments[0]
+    });
+  }
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: segments.map((segment, index) => /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [index > 0 && /*#__PURE__*/_jsx("span", {
+        className: `${baseClass}__separator`,
+        children: "/"
+      }), segment]
+    }, index))
+  });
+};
+const ColumnItem = t0 => {
+  const $ = _c(16);
+  const {
+    id,
+    active,
+    labelText,
+    onToggle
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  let t1;
+  if ($[0] !== id) {
+    t1 = {
+      id
+    };
+    $[0] = id;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const {
+    attributes,
+    isDragging,
+    isOver,
+    isSorting,
+    listeners,
+    setNodeRef,
+    transform
+  } = useDraggableSortable(t1);
+  const t2 = !active && `${baseClass}__item--inactive`;
+  const t3 = isDragging && `${baseClass}__item--dragging`;
+  const t4 = isOver && isSorting && !isDragging && `${baseClass}__item--over`;
+  let t5;
+  if ($[2] !== t2 || $[3] !== t3 || $[4] !== t4) {
+    t5 = [`${baseClass}__item`, t2, t3, t4].filter(Boolean);
+    $[2] = t2;
+    $[3] = t3;
+    $[4] = t4;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  const t6 = t5.join(" ");
+  const t7 = isDragging ? undefined : transform;
+  let t8;
+  if ($[6] !== active || $[7] !== attributes || $[8] !== labelText || $[9] !== listeners || $[10] !== onToggle || $[11] !== setNodeRef || $[12] !== t || $[13] !== t6 || $[14] !== t7) {
+    t8 = _jsxs("div", {
+      "aria-label": labelText,
+      className: t6,
+      ref: setNodeRef,
+      style: {
+        transform: t7,
+        ...attributes.style
+      },
+      ...attributes,
+      children: [_jsx("span", {
+        "aria-label": t("general:dragToReorder"),
+        className: `${baseClass}__drag-handle`,
+        ...listeners,
+        children: _jsx(AlignJustifiedIcon, {
+          size: 16
+        })
+      }), _jsx("span", {
+        className: `${baseClass}__item-label`,
+        children: _jsx(NestedLabel, {
+          label: labelText
+        })
+      }), _jsx(Switch, {
+        checked: active,
+        onChange: onToggle
+      })]
+    });
+    $[6] = active;
+    $[7] = attributes;
+    $[8] = labelText;
+    $[9] = listeners;
+    $[10] = onToggle;
+    $[11] = setNodeRef;
+    $[12] = t;
+    $[13] = t6;
+    $[14] = t7;
+    $[15] = t8;
+  } else {
+    t8 = $[15];
+  }
+  return t8;
+};
 export const ColumnSelector = ({
-  collectionSlug
+  collectionSlug,
+  onClose
 }) => {
   const {
     columns,
     moveColumn,
     toggleColumn
   } = useTableColumns();
+  const {
+    i18n,
+    t
+  } = useTranslation();
   const uuid = useId();
   const editDepth = useEditDepth();
-  const filteredColumns = useMemo(() => columns?.filter(col => !(fieldIsHiddenOrDisabled(col.field) && !fieldIsID(col.field)) && !col?.field?.admin?.disableListColumn), [columns]);
-  const pills = useMemo(() => {
-    return filteredColumns ? filteredColumns.map((col_0, i) => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const containerRef = useRef(null);
+  const [lockedWidth, setLockedWidth] = useState(null);
+  // Lock the width when search starts to prevent layout shift
+  useLayoutEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
+    if (searchQuery && lockedWidth === null) {
+      // Capture width when search starts
+      setLockedWidth(containerRef.current.offsetWidth);
+    } else if (!searchQuery && lockedWidth !== null) {
+      // Release width lock when search is cleared
+      setLockedWidth(null);
+    }
+  }, [searchQuery, lockedWidth]);
+  const filteredColumns = useMemo(() => columns?.filter(col => !(fieldIsHiddenOrDisabled(col.field) && !fieldIsID(col.field)) && !isFieldDisabled(col.field, 'column')), [columns]);
+  const columnItems = useMemo(() => {
+    if (!filteredColumns) {
+      return {
+        all: [],
+        hidden: [],
+        shown: []
+      };
+    }
+    const items = filteredColumns.map((col_0, i) => {
       const {
         accessor,
         active,
         field
       } = col_0;
-      const label = 'labelWithPrefix' in field && field.labelWithPrefix !== undefined ? field.labelWithPrefix : 'label' in field && field.label !== undefined ? field.label : 'name' in field && field.name !== undefined ? field.name : undefined;
+      const label = 'labelWithPrefix' in field && field.labelWithPrefix !== undefined ? field.labelWithPrefix : 'label' in field && field.label !== undefined ? field.label : 'name' in field && field.name !== undefined ? field.name : accessor;
+      const labelText = typeof label === 'string' ? label : getTranslation(label, i18n);
       return {
-        name: accessor,
-        key: `${collectionSlug}-${accessor}-${i}${editDepth ? `-${editDepth}-` : ''}${uuid}`,
-        Label: /*#__PURE__*/_jsx(FieldLabel, {
-          label: label,
-          unstyled: true
-        }),
-        selected: active
+        id: `${collectionSlug}-${accessor}-${i}${editDepth ? `-${editDepth}-` : ''}${uuid}`,
+        accessor,
+        active,
+        index: i,
+        label,
+        labelText
       };
-    }) : null;
-  }, [collectionSlug, editDepth, filteredColumns, uuid]);
-  if (!pills) {
+    });
+    // Filter by search query
+    const filtered = searchQuery ? items.filter(item => item.labelText.toLowerCase().includes(searchQuery.toLowerCase())) : items;
+    return {
+      all: items,
+      hidden: filtered.filter(item_0 => !item_0.active),
+      shown: filtered.filter(item_1 => item_1.active)
+    };
+  }, [collectionSlug, editDepth, filteredColumns, i18n, searchQuery, uuid]);
+  const handleDragEnd = useCallback(({
+    moveFromIndex,
+    moveToIndex
+  }) => {
+    if (moveFromIndex === moveToIndex) {
+      return;
+    }
+    // All shown items first, then all hidden items
+    const allItems = [...columnItems.shown, ...columnItems.hidden];
+    const shownCount = columnItems.shown.length;
+    const fromItem = allItems[moveFromIndex];
+    const toItem = allItems[moveToIndex];
+    if (!fromItem || !toItem) {
+      return;
+    }
+    // Determine if crossing sections
+    const fromIsShown = moveFromIndex < shownCount;
+    const toIsShown = moveToIndex < shownCount;
+    if (fromIsShown !== toIsShown) {
+      // Cross-section move: just toggle the column's active state (show/hide)
+      void toggleColumn(fromItem.accessor);
+      // Don't reorder when crossing sections - the toggle handles the change
+      return;
+    }
+    // Same-section move: perform the reorder
+    void moveColumn({
+      fromIndex: fromItem.index,
+      toIndex: toItem.index
+    });
+  }, [columnItems.shown, columnItems.hidden, moveColumn, toggleColumn]);
+  if (!filteredColumns) {
     return null;
   }
-  return /*#__PURE__*/_jsx(PillSelector, {
-    draggable: {
-      onDragEnd: ({
-        moveFromIndex,
-        moveToIndex
-      }) => {
-        void moveColumn({
-          fromIndex: moveFromIndex,
-          toIndex: moveToIndex
-        });
-      }
-    },
-    onClick: ({
-      pill
-    }) => {
-      void toggleColumn(pill.name);
-    },
-    pills: pills
+  // Combined IDs: shown items first, then hidden items
+  const allIds = [...columnItems.shown, ...columnItems.hidden].map(item_2 => item_2.id);
+  const containerStyle = lockedWidth ? {
+    '--column-selector-locked-width': `${lockedWidth}px`
+  } : undefined;
+  return /*#__PURE__*/_jsxs("div", {
+    className: baseClass,
+    "data-popup-prevent-close": true,
+    "data-width-locked": lockedWidth ? 'true' : undefined,
+    ref: containerRef,
+    style: containerStyle,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__header`,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: `${baseClass}__title`,
+        children: t('general:editColumns')
+      }), onClose && /*#__PURE__*/_jsx(Button, {
+        "aria-label": t('general:close'),
+        buttonStyle: "ghost",
+        className: `${baseClass}__close`,
+        icon: /*#__PURE__*/_jsx(XIcon, {
+          size: 24
+        }),
+        onClick: onClose
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__search`,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__search-bar`,
+        children: [/*#__PURE__*/_jsx(SearchIcon, {
+          size: 24
+        }), /*#__PURE__*/_jsx("input", {
+          "aria-label": t('general:searchColumns'),
+          className: `${baseClass}__search-input`,
+          onChange: e => setSearchQuery(e.target.value),
+          placeholder: t('general:searchColumns'),
+          type: "text",
+          value: searchQuery
+        })]
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__content`,
+      children: /*#__PURE__*/_jsxs(DraggableSortable, {
+        ids: allIds,
+        onDragEnd: handleDragEnd,
+        children: [columnItems.shown.length === 0 && columnItems.hidden.length === 0 && searchQuery && /*#__PURE__*/_jsx("div", {
+          className: `${baseClass}__no-results`,
+          children: t('general:noMatchesFound')
+        }), columnItems.shown.length > 0 && /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__section`,
+          children: [/*#__PURE__*/_jsx("div", {
+            className: `${baseClass}__section-header`,
+            children: t('general:shownInTable')
+          }), columnItems.shown.map(item_3 => /*#__PURE__*/_jsx(ColumnItem, {
+            active: item_3.active,
+            id: item_3.id,
+            labelText: item_3.labelText,
+            onToggle: () => {
+              void toggleColumn(item_3.accessor);
+            }
+          }, item_3.id))]
+        }), columnItems.hidden.length > 0 && /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__section`,
+          children: [/*#__PURE__*/_jsx("div", {
+            className: `${baseClass}__section-header`,
+            children: t('general:notShownInTable')
+          }), columnItems.hidden.map(item_4 => /*#__PURE__*/_jsx(ColumnItem, {
+            active: item_4.active,
+            id: item_4.id,
+            labelText: item_4.labelText,
+            onToggle: () => {
+              void toggleColumn(item_4.accessor);
+            }
+          }, item_4.id))]
+        })]
+      })
+    })]
   });
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["fieldIsHiddenOrDisabled","fieldIsID","React","useId","useMemo","FieldLabel","useEditDepth","useTableColumns","PillSelector","ColumnSelector","collectionSlug","columns","moveColumn","toggleColumn","uuid","editDepth","filteredColumns","filter","col","field","admin","disableListColumn","pills","map","i","accessor","active","label","labelWithPrefix","undefined","name","key","Label","_jsx","unstyled","selected","draggable","onDragEnd","moveFromIndex","moveToIndex","fromIndex","toIndex","onClick","pill"],"sources":["../../../src/elements/ColumnSelector/index.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedCollectionConfig, StaticLabel } from 'payload'\n\nimport { fieldIsHiddenOrDisabled, fieldIsID } from 'payload/shared'\nimport React, { useId, useMemo } from 'react'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTableColumns } from '../../providers/TableColumns/index.js'\nimport { PillSelector, type SelectablePill } from '../PillSelector/index.js'\n\nexport type Props = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\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  const filteredColumns = useMemo(\n    () =>\n      columns?.filter(\n        (col) =>\n          !(fieldIsHiddenOrDisabled(col.field) && !fieldIsID(col.field)) &&\n          !col?.field?.admin?.disableListColumn,\n      ),\n    [columns],\n  )\n\n  const pills: SelectablePill[] = useMemo(() => {\n    return filteredColumns\n      ? filteredColumns.map((col, i) => {\n          const { accessor, active, field } = col\n\n          const label =\n            'labelWithPrefix' in field && field.labelWithPrefix !== undefined\n              ? field.labelWithPrefix\n              : 'label' in field && field.label !== undefined\n                ? field.label\n                : 'name' in field && field.name !== undefined\n                  ? field.name\n                  : undefined\n\n          return {\n            name: accessor,\n            key: `${collectionSlug}-${accessor}-${i}${editDepth ? `-${editDepth}-` : ''}${uuid}`,\n            Label: <FieldLabel label={label as StaticLabel} unstyled />,\n            selected: active,\n          } as SelectablePill\n        })\n      : null\n  }, [collectionSlug, editDepth, filteredColumns, uuid])\n\n  if (!pills) {\n    return null\n  }\n\n  return (\n    <PillSelector\n      draggable={{\n        onDragEnd: ({ moveFromIndex, moveToIndex }) => {\n          void moveColumn({\n            fromIndex: moveFromIndex,\n            toIndex: moveToIndex,\n          })\n        },\n      }}\n      onClick={({ pill }) => {\n        void toggleColumn(pill.name)\n      }}\n      pills={pills}\n    />\n  )\n}\n"],"mappings":"AAAA;;;AAGA,SAASA,uBAAuB,EAAEC,SAAS,QAAQ;AACnD,OAAOC,KAAA,IAASC,KAAK,EAAEC,OAAO,QAAQ;AAEtC,SAASC,UAAU,QAAQ;AAC3B,SAASC,YAAY,QAAQ;AAC7B,SAASC,eAAe,QAAQ;AAChC,SAASC,YAAY,QAA6B;AAMlD,OAAO,MAAMC,cAAA,GAAkCA,CAAC;EAAEC;AAAc,CAAE;EAChE,MAAM;IAAEC,OAAO;IAAEC,UAAU;IAAEC;EAAY,CAAE,GAAGN,eAAA;EAE9C,MAAMO,IAAA,GAAOX,KAAA;EACb,MAAMY,SAAA,GAAYT,YAAA;EAElB,MAAMU,eAAA,GAAkBZ,OAAA,CACtB,MACEO,OAAA,EAASM,MAAA,CACNC,GAAA,IACC,EAAElB,uBAAA,CAAwBkB,GAAA,CAAIC,KAAK,KAAK,CAAClB,SAAA,CAAUiB,GAAA,CAAIC,KAAK,MAC5D,CAACD,GAAA,EAAKC,KAAA,EAAOC,KAAA,EAAOC,iBAAA,GAE1B,CAACV,OAAA,CAAQ;EAGX,MAAMW,KAAA,GAA0BlB,OAAA,CAAQ;IACtC,OAAOY,eAAA,GACHA,eAAA,CAAgBO,GAAG,CAAC,CAACL,KAAA,EAAKM,CAAA;MACxB,MAAM;QAAEC,QAAQ;QAAEC,MAAM;QAAEP;MAAK,CAAE,GAAGD,KAAA;MAEpC,MAAMS,KAAA,GACJ,qBAAqBR,KAAA,IAASA,KAAA,CAAMS,eAAe,KAAKC,SAAA,GACpDV,KAAA,CAAMS,eAAe,GACrB,WAAWT,KAAA,IAASA,KAAA,CAAMQ,KAAK,KAAKE,SAAA,GAClCV,KAAA,CAAMQ,KAAK,GACX,UAAUR,KAAA,IAASA,KAAA,CAAMW,IAAI,KAAKD,SAAA,GAChCV,KAAA,CAAMW,IAAI,GACVD,SAAA;MAEV,OAAO;QACLC,IAAA,EAAML,QAAA;QACNM,GAAA,EAAK,GAAGrB,cAAA,IAAkBe,QAAA,IAAYD,CAAA,GAAIT,SAAA,GAAY,IAAIA,SAAA,GAAY,GAAG,KAAKD,IAAA,EAAM;QACpFkB,KAAA,eAAOC,IAAA,CAAC5B,UAAA;UAAWsB,KAAA,EAAOA,KAAA;UAAsBO,QAAQ;;QACxDC,QAAA,EAAUT;MACZ;IACF,KACA;EACN,GAAG,CAAChB,cAAA,EAAgBK,SAAA,EAAWC,eAAA,EAAiBF,IAAA,CAAK;EAErD,IAAI,CAACQ,KAAA,EAAO;IACV,OAAO;EACT;EAEA,oBACEW,IAAA,CAACzB,YAAA;IACC4B,SAAA,EAAW;MACTC,SAAA,EAAWA,CAAC;QAAEC,aAAa;QAAEC;MAAW,CAAE;QACxC,KAAK3B,UAAA,CAAW;UACd4B,SAAA,EAAWF,aAAA;UACXG,OAAA,EAASF;QACX;MACF;IACF;IACAG,OAAA,EAASA,CAAC;MAAEC;IAAI,CAAE;MAChB,KAAK9B,YAAA,CAAa8B,IAAA,CAAKb,IAAI;IAC7B;IACAR,KAAA,EAAOA;;AAGb","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","fieldIsHiddenOrDisabled","fieldIsID","isFieldDisabled","React","useCallback","useId","useLayoutEffect","useMemo","useRef","useState","AlignJustifiedIcon","SearchIcon","XIcon","useEditDepth","useTableColumns","useTranslation","Button","DraggableSortable","useDraggableSortable","Switch","baseClass","parseNestedLabel","label","includes","segments","split","length","NestedLabel","_jsx","_Fragment","map","segment","index","_jsxs","Fragment","className","ColumnItem","t0","$","id","active","labelText","onToggle","t","t1","attributes","isDragging","isOver","isSorting","listeners","setNodeRef","transform","t2","t3","t4","t5","filter","Boolean","t6","join","t7","undefined","t8","ref","style","children","size","checked","onChange","ColumnSelector","collectionSlug","onClose","columns","moveColumn","toggleColumn","i18n","uuid","editDepth","searchQuery","setSearchQuery","containerRef","lockedWidth","setLockedWidth","current","offsetWidth","filteredColumns","col","field","columnItems","all","hidden","shown","items","i","accessor","labelWithPrefix","name","filtered","item","toLowerCase","handleDragEnd","moveFromIndex","moveToIndex","allItems","shownCount","fromItem","toItem","fromIsShown","toIsShown","fromIndex","toIndex","allIds","containerStyle","buttonStyle","icon","onClick","e","target","value","placeholder","type","ids","onDragEnd"],"sources":["../../../src/elements/ColumnSelector/index.tsx"],"sourcesContent":["'use client'\n\nimport type { SanitizedCollectionConfig, StaticLabel } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { fieldIsHiddenOrDisabled, fieldIsID, isFieldDisabled } from 'payload/shared'\nimport React, { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { AlignJustifiedIcon } from '../../icons/AlignJustified/index.js'\nimport { SearchIcon } from '../../icons/Search/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTableColumns } from '../../providers/TableColumns/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js'\nimport { Switch } from '../Switch/index.js'\nimport './index.css'\n\nconst baseClass = 'column-selector'\n\n/**\n * Parses a nested field label and returns segments for rendering.\n * - For deeply nested paths (more than 3 segments), truncates to [First, \"...\", Last]\n */\nfunction parseNestedLabel(label: string): string[] {\n  if (!label.includes(' > ')) {\n    return [label]\n  }\n\n  const segments = label.split(' > ')\n\n  if (segments.length <= 3) {\n    return segments\n  }\n\n  // For deep nesting, show: First / ... / Last\n  return [segments[0], '...', segments[segments.length - 1]]\n}\n\ntype NestedLabelProps = {\n  readonly label: string\n}\n\nconst NestedLabel: React.FC<NestedLabelProps> = ({ label }) => {\n  const segments = parseNestedLabel(label)\n\n  if (segments.length === 1) {\n    return <>{segments[0]}</>\n  }\n\n  return (\n    <>\n      {segments.map((segment, index) => (\n        <React.Fragment key={index}>\n          {index > 0 && <span className={`${baseClass}__separator`}>/</span>}\n          {segment}\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n\nexport type Props = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n  readonly onClose?: () => void\n}\n\ntype ColumnItemProps = {\n  readonly active: boolean\n  readonly id: string\n  readonly labelText: string\n  readonly onToggle: () => void\n}\n\nconst ColumnItem: React.FC<ColumnItemProps> = ({ id, active, labelText, onToggle }) => {\n  const { t } = useTranslation()\n  const { attributes, isDragging, isOver, isSorting, listeners, setNodeRef, transform } =\n    useDraggableSortable({\n      id,\n    })\n\n  return (\n    <div\n      aria-label={labelText}\n      className={[\n        `${baseClass}__item`,\n        !active && `${baseClass}__item--inactive`,\n        isDragging && `${baseClass}__item--dragging`,\n        isOver && isSorting && !isDragging && `${baseClass}__item--over`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      ref={setNodeRef}\n      style={{\n        // Keep item in place while dragging - don't apply transform\n        transform: isDragging ? undefined : transform,\n        ...attributes.style,\n      }}\n      {...attributes}\n    >\n      <span\n        aria-label={t('general:dragToReorder')}\n        className={`${baseClass}__drag-handle`}\n        {...listeners}\n      >\n        <AlignJustifiedIcon size={16} />\n      </span>\n      <span className={`${baseClass}__item-label`}>\n        <NestedLabel label={labelText} />\n      </span>\n      <Switch checked={active} onChange={onToggle} />\n    </div>\n  )\n}\n\nexport const ColumnSelector: React.FC<Props> = ({ collectionSlug, onClose }) => {\n  const { columns, moveColumn, toggleColumn } = useTableColumns()\n  const { i18n, t } = useTranslation()\n\n  const uuid = useId()\n  const editDepth = useEditDepth()\n  const [searchQuery, setSearchQuery] = useState('')\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [lockedWidth, setLockedWidth] = useState<null | number>(null)\n\n  // Lock the width when search starts to prevent layout shift\n  useLayoutEffect(() => {\n    if (!containerRef.current) {\n      return\n    }\n\n    if (searchQuery && lockedWidth === null) {\n      // Capture width when search starts\n      setLockedWidth(containerRef.current.offsetWidth)\n    } else if (!searchQuery && lockedWidth !== null) {\n      // Release width lock when search is cleared\n      setLockedWidth(null)\n    }\n  }, [searchQuery, lockedWidth])\n\n  const filteredColumns = useMemo(\n    () =>\n      columns?.filter(\n        (col) =>\n          !(fieldIsHiddenOrDisabled(col.field) && !fieldIsID(col.field)) &&\n          !isFieldDisabled(col.field, 'column'),\n      ),\n    [columns],\n  )\n\n  const columnItems = useMemo(() => {\n    if (!filteredColumns) {\n      return { all: [], hidden: [], shown: [] }\n    }\n\n    const items = filteredColumns.map((col, i) => {\n      const { accessor, active, field } = col\n\n      const label =\n        'labelWithPrefix' in field && field.labelWithPrefix !== undefined\n          ? field.labelWithPrefix\n          : 'label' in field && field.label !== undefined\n            ? field.label\n            : 'name' in field && field.name !== undefined\n              ? field.name\n              : accessor\n\n      const labelText =\n        typeof label === 'string' ? label : getTranslation(label as StaticLabel, i18n)\n\n      return {\n        id: `${collectionSlug}-${accessor}-${i}${editDepth ? `-${editDepth}-` : ''}${uuid}`,\n        accessor,\n        active,\n        index: i,\n        label,\n        labelText,\n      }\n    })\n\n    // Filter by search query\n    const filtered = searchQuery\n      ? items.filter((item) => item.labelText.toLowerCase().includes(searchQuery.toLowerCase()))\n      : items\n\n    return {\n      all: items,\n      hidden: filtered.filter((item) => !item.active),\n      shown: filtered.filter((item) => item.active),\n    }\n  }, [collectionSlug, editDepth, filteredColumns, i18n, searchQuery, uuid])\n\n  const handleDragEnd = useCallback(\n    ({ moveFromIndex, moveToIndex }: { moveFromIndex: number; moveToIndex: number }) => {\n      if (moveFromIndex === moveToIndex) {\n        return\n      }\n\n      // All shown items first, then all hidden items\n      const allItems = [...columnItems.shown, ...columnItems.hidden]\n      const shownCount = columnItems.shown.length\n      const fromItem = allItems[moveFromIndex]\n      const toItem = allItems[moveToIndex]\n\n      if (!fromItem || !toItem) {\n        return\n      }\n\n      // Determine if crossing sections\n      const fromIsShown = moveFromIndex < shownCount\n      const toIsShown = moveToIndex < shownCount\n\n      if (fromIsShown !== toIsShown) {\n        // Cross-section move: just toggle the column's active state (show/hide)\n        void toggleColumn(fromItem.accessor)\n        // Don't reorder when crossing sections - the toggle handles the change\n        return\n      }\n\n      // Same-section move: perform the reorder\n      void moveColumn({\n        fromIndex: fromItem.index,\n        toIndex: toItem.index,\n      })\n    },\n    [columnItems.shown, columnItems.hidden, moveColumn, toggleColumn],\n  )\n\n  if (!filteredColumns) {\n    return null\n  }\n\n  // Combined IDs: shown items first, then hidden items\n  const allIds = [...columnItems.shown, ...columnItems.hidden].map((item) => item.id)\n\n  const containerStyle = lockedWidth\n    ? ({ '--column-selector-locked-width': `${lockedWidth}px` } as React.CSSProperties)\n    : undefined\n\n  return (\n    <div\n      className={baseClass}\n      data-popup-prevent-close\n      data-width-locked={lockedWidth ? 'true' : undefined}\n      ref={containerRef}\n      style={containerStyle}\n    >\n      <div className={`${baseClass}__header`}>\n        <span className={`${baseClass}__title`}>{t('general:editColumns')}</span>\n        {onClose && (\n          <Button\n            aria-label={t('general:close')}\n            buttonStyle=\"ghost\"\n            className={`${baseClass}__close`}\n            icon={<XIcon size={24} />}\n            onClick={onClose}\n          />\n        )}\n      </div>\n      <div className={`${baseClass}__search`}>\n        <div className={`${baseClass}__search-bar`}>\n          <SearchIcon size={24} />\n          <input\n            aria-label={t('general:searchColumns')}\n            className={`${baseClass}__search-input`}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            placeholder={t('general:searchColumns')}\n            type=\"text\"\n            value={searchQuery}\n          />\n        </div>\n      </div>\n      <div className={`${baseClass}__content`}>\n        <DraggableSortable ids={allIds} onDragEnd={handleDragEnd}>\n          {columnItems.shown.length === 0 && columnItems.hidden.length === 0 && searchQuery && (\n            <div className={`${baseClass}__no-results`}>{t('general:noMatchesFound')}</div>\n          )}\n          {columnItems.shown.length > 0 && (\n            <div className={`${baseClass}__section`}>\n              <div className={`${baseClass}__section-header`}>{t('general:shownInTable')}</div>\n              {columnItems.shown.map((item) => (\n                <ColumnItem\n                  active={item.active}\n                  id={item.id}\n                  key={item.id}\n                  labelText={item.labelText}\n                  onToggle={() => {\n                    void toggleColumn(item.accessor)\n                  }}\n                />\n              ))}\n            </div>\n          )}\n          {columnItems.hidden.length > 0 && (\n            <div className={`${baseClass}__section`}>\n              <div className={`${baseClass}__section-header`}>{t('general:notShownInTable')}</div>\n              {columnItems.hidden.map((item) => (\n                <ColumnItem\n                  active={item.active}\n                  id={item.id}\n                  key={item.id}\n                  labelText={item.labelText}\n                  onToggle={() => {\n                    void toggleColumn(item.accessor)\n                  }}\n                />\n              ))}\n            </div>\n          )}\n        </DraggableSortable>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnsButton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAExD,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;CAC3D,CAAA;AAID,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAwBtD,CAAA"}

package/dist/elements/ColumnsButton/index.js

@@ -0,0 +1,79 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { Button } from '../Button/index.js';
+import { ColumnSelector } from '../ColumnSelector/index.js';
+import { Popup } from '../Popup/index.js';
+const baseClass = 'columns-button';
+export const ColumnsButton = t0 => {
+  const $ = _c(7);
+  const {
+    collectionSlug
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  let t1;
+  if ($[0] !== collectionSlug) {
+    t1 = t2 => {
+      const {
+        close
+      } = t2;
+      return _jsx(ColumnSelector, {
+        collectionSlug,
+        onClose: close
+      });
+    };
+    $[0] = collectionSlug;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== t) {
+    t2 = t3 => {
+      const {
+        active,
+        ...props
+      } = t3;
+      return _jsx(Button, {
+        ...props,
+        buttonStyle: "secondary",
+        className: `${baseClass}__button`,
+        icon: _jsx(ChevronIcon, {
+          direction: "down",
+          size: 16
+        }),
+        selected: active,
+        size: "medium",
+        children: t("general:columns")
+      });
+    };
+    $[2] = t;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t1 || $[5] !== t2) {
+    t3 = _jsx(Popup, {
+      className: baseClass,
+      horizontalAlign: "right",
+      render: t1,
+      renderButton: t2,
+      theme: "auto",
+      verticalAlign: "bottom"
+    });
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","useTranslation","Button","ColumnSelector","Popup","baseClass","ColumnsButton","t0","$","collectionSlug","t","t1","t2","close","_jsx","onClose","t3","active","props","buttonStyle","className","icon","direction","size","children","horizontalAlign","render","verticalAlign"],"sources":["../../../src/elements/ColumnsButton/index.tsx"],"sourcesContent":["'use client'\n\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { Popup } from '../Popup/index.js'\n\nexport type ColumnsButtonProps = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n}\n\nconst baseClass = 'columns-button'\n\nexport const ColumnsButton: React.FC<ColumnsButtonProps> = ({ collectionSlug }) => {\n  const { t } = useTranslation()\n\n  return (\n    <Popup\n      className={baseClass}\n      horizontalAlign=\"right\"\n      render={({ close }) => <ColumnSelector collectionSlug={collectionSlug} onClose={close} />}\n      renderButton={({ active, ...props }) => (\n        <Button\n          {...props}\n          buttonStyle=\"secondary\"\n          className={`${baseClass}__button`}\n          icon={<ChevronIcon direction=\"down\" size={16} />}\n          selected={active}\n          size=\"medium\"\n        >\n          {t('general:columns')}\n        </Button>\n      )}\n      theme=\"auto\"\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,OAAOC,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,cAAc,QAAQ;AAC/B,SAASC,KAAK,QAAQ;AAMtB,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,aAAA,GAA8CC,EAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EAAC;IAAAW;EAAA,IAAAF,EAAkB;EAC5E;IAAAG;EAAA,IAAcT,cAAA;EAAA,IAAAU,EAAA;EAAA,IAAAH,CAAA,QAAAC,cAAA;IAMFE,EAAA,GAAAC,EAAA;MAAC;QAAAC;MAAA,IAAAD,EAAS;MAAA,OAAKE,IAAA,CAAAX,cAAA;QAAAM,cAAA;QAAAM,OAAA,EAAyDF;MAAA,C;;;;;;;;;IAClED,EAAA,GAAAI,EAAA;MAAC;QAAAC,MAAA;QAAA,GAAAC;MAAA,IAAAF,EAAoB;MAAA,OACjCF,IAAA,CAAAZ,MAAA;QAAA,GACMgB,KAAK;QAAAC,WAAA,EACG;QAAAC,SAAA,EACD,GAAAf,SAAA,UAAsB;QAAAgB,IAAA,EAC3BP,IAAA,CAAAd,WAAA;UAAAsB,SAAA,EAAuB;UAAAC,IAAA;QAAA,C;kBACnBN,MAAA;QAAAM,IAAA,EACL;QAAAC,QAAA,EAEJd,CAAA,CAAE;MAAA,C;;;;;;;;;IAbTM,EAAA,GAAAF,IAAA,CAAAV,KAAA;MAAAgB,SAAA,EAAAf,SAAA;MAAAoB,eAAA,EAEkB;MAAAC,MAAA,EACRf,E;oBACMC,E;aAYR;MAAAe,aAAA,EACQ;IAAA,C;;;;;;;SAjBhBX,E;CAoBJ","ignoreList":[]}

package/dist/elements/Combobox/index.css

@@ -0,0 +1,52 @@
+@layer payload-default {
+  .combobox__content {
+    display: flex;
+    flex-direction: column;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .combobox__search-wrapper {
+    display: none;
+    padding-top: var(--popup-padding);
+    padding-bottom: calc(var(--base) * 0.5);
+    border-bottom: 1px solid var(--border-default);
+    margin-bottom: calc(var(--base) * 0.5);
+  }
+
+  .combobox__search-wrapper--no-results {
+    border-bottom: none;
+    margin-bottom: 0;
+  }
+
+  .combobox__search-input {
+    width: 100%;
+    background: var(--bg-default-secondary);
+    color: var(--text-default);
+    border: none;
+    border-radius: var(--button-radius);
+    padding: calc(var(--base) * 0.25) calc(var(--base) * 0.5);
+    outline: none;
+    box-shadow: none;
+  }
+
+  .combobox__search-input::placeholder {
+    color: var(--text-default-tertiary);
+  }
+
+  .combobox__search-input:focus,
+  .combobox__search-input:focus-visible {
+    background: var(--bg-default-secondary-hover);
+    outline: none;
+    border: none;
+    box-shadow: none;
+  }
+
+  .combobox__entry {
+    cursor: pointer;
+  }
+}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { PopupProps } from '../Popup/index.js';
-import './index.scss';
+import './index.css';
 /**
  * @internal
  * @experimental

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Combobox/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAGnD,OAAO,cAAc,CAAA;AAIrB;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,wDAAwD;IACxD,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,QAAQ,CAAC,CAAA;AAE3C;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAoG5C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Combobox/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAGnD,OAAO,aAAa,CAAA;AAIpB;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,wDAAwD;IACxD,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,QAAQ,CAAC,CAAA;AAE3C;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAoG5C,CAAA"}

package/dist/elements/Combobox/index.js

@@ -3,7 +3,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo, useRef, useState } from 'react';
 import { Popup, PopupList } from '../Popup/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'combobox';
 /**
  * A wrapper on top of Popup + PopupList.ButtonGroup that adds search functionality.

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","useRef","useState","Popup","PopupList","baseClass","Combobox","props","entries","minEntriesForSearch","onSelect","onToggleClose","onToggleOpen","searchPlaceholder","popupProps","searchValue","setSearchValue","isOpenRef","searchInputRef","filteredEntries","search","toLowerCase","filter","entry","name","includes","showSearch","length","hasResults","handleToggleOpen","useCallback","active","current","setTimeout","focus","handleToggleClose","_jsx","className","render","close","_jsxs","onChange","e","target","value","placeholder","ref","type","ButtonGroup","map","index","handleClick","onClick","onKeyDown","key","preventDefault","role","tabIndex","Component"],"sources":["../../../src/elements/Combobox/index.tsx"],"sourcesContent":["'use client'\nimport React, { useMemo, useRef, useState } from 'react'\n\nimport type { PopupProps } from '../Popup/index.js'\n\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.scss'\n\nconst baseClass = 'combobox'\n\n/**\n * @internal\n * @experimental\n */\nexport type ComboboxEntry = {\n  Component: React.ReactNode\n  name: string\n}\n\n/**\n * @internal\n * @experimental\n */\nexport type ComboboxProps = {\n  entries: ComboboxEntry[]\n  /** Minimum number of entries required to show search */\n  minEntriesForSearch?: number\n  onSelect?: (entry: ComboboxEntry) => void\n  searchPlaceholder?: string\n} & Omit<PopupProps, 'children' | 'render'>\n\n/**\n * A wrapper on top of Popup + PopupList.ButtonGroup that adds search functionality.\n *\n * @internal - this component may be removed or receive breaking changes in minor releases.\n * @experimental\n */\nexport const Combobox: React.FC<ComboboxProps> = (props) => {\n  const {\n    entries,\n    minEntriesForSearch = 8,\n    onSelect,\n    onToggleClose,\n    onToggleOpen,\n    searchPlaceholder = 'Search...',\n    ...popupProps\n  } = props\n  const [searchValue, setSearchValue] = useState('')\n  const isOpenRef = useRef(false)\n  const searchInputRef = useRef<HTMLInputElement>(null)\n\n  const filteredEntries = useMemo(() => {\n    if (!searchValue) {\n      return entries\n    }\n    const search = searchValue.toLowerCase()\n    return entries.filter((entry) => entry.name.toLowerCase().includes(search))\n  }, [entries, searchValue])\n\n  const showSearch = entries.length >= minEntriesForSearch\n  const hasResults = filteredEntries.length > 0\n\n  const handleToggleOpen = React.useCallback(\n    (active: boolean) => {\n      isOpenRef.current = active\n      if (active && showSearch) {\n        setTimeout(() => {\n          searchInputRef.current?.focus()\n        }, 100)\n      }\n      onToggleOpen?.(active)\n    },\n    [showSearch, onToggleOpen],\n  )\n\n  const handleToggleClose = React.useCallback(() => {\n    isOpenRef.current = false\n    setSearchValue('')\n    onToggleClose?.()\n  }, [onToggleClose])\n\n  return (\n    <Popup\n      {...popupProps}\n      className={`${baseClass} ${popupProps.className || ''}`}\n      onToggleClose={handleToggleClose}\n      onToggleOpen={handleToggleOpen}\n      render={({ close }) => (\n        <div className={`${baseClass}__content`}>\n          {showSearch && (\n            <div\n              className={`${baseClass}__search-wrapper${!hasResults ? ` ${baseClass}__search-wrapper--no-results` : ''}`}\n            >\n              <input\n                aria-label={searchPlaceholder}\n                className={`${baseClass}__search-input`}\n                onChange={(e) => setSearchValue(e.target.value)}\n                placeholder={searchPlaceholder}\n                ref={searchInputRef}\n                type=\"text\"\n                value={searchValue}\n              />\n            </div>\n          )}\n          <PopupList.ButtonGroup>\n            {filteredEntries.map((entry, index) => {\n              const handleClick = () => {\n                if (onSelect) {\n                  onSelect(entry)\n                }\n                close()\n              }\n\n              return (\n                <div\n                  className={`${baseClass}__entry`}\n                  data-popup-prevent-close\n                  key={`${entry.name}-${index}`}\n                  onClick={handleClick}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter' || e.key === ' ') {\n                      e.preventDefault()\n                      handleClick()\n                    }\n                  }}\n                  role=\"menuitem\"\n                  tabIndex={0}\n                >\n                  {entry.Component}\n                </div>\n              )\n            })}\n          </PopupList.ButtonGroup>\n        </div>\n      )}\n    />\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAIjD,SAASC,KAAK,EAAEC,SAAS,QAAQ;AACjC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAuBlB;;;;;;AAMA,OAAO,MAAMC,QAAA,GAAqCC,KAAA;EAChD,MAAM;IACJC,OAAO;IACPC,mBAAA,GAAsB,CAAC;IACvBC,QAAQ;IACRC,aAAa;IACbC,YAAY;IACZC,iBAAA,GAAoB,WAAW;IAC/B,GAAGC;EAAA,CACJ,GAAGP,KAAA;EACJ,MAAM,CAACQ,WAAA,EAAaC,cAAA,CAAe,GAAGd,QAAA,CAAS;EAC/C,MAAMe,SAAA,GAAYhB,MAAA,CAAO;EACzB,MAAMiB,cAAA,GAAiBjB,MAAA,CAAyB;EAEhD,MAAMkB,eAAA,GAAkBnB,OAAA,CAAQ;IAC9B,IAAI,CAACe,WAAA,EAAa;MAChB,OAAOP,OAAA;IACT;IACA,MAAMY,MAAA,GAASL,WAAA,CAAYM,WAAW;IACtC,OAAOb,OAAA,CAAQc,MAAM,CAAEC,KAAA,IAAUA,KAAA,CAAMC,IAAI,CAACH,WAAW,GAAGI,QAAQ,CAACL,MAAA;EACrE,GAAG,CAACZ,OAAA,EAASO,WAAA,CAAY;EAEzB,MAAMW,UAAA,GAAalB,OAAA,CAAQmB,MAAM,IAAIlB,mBAAA;EACrC,MAAMmB,UAAA,GAAaT,eAAA,CAAgBQ,MAAM,GAAG;EAE5C,MAAME,gBAAA,GAAmB9B,KAAA,CAAM+B,WAAW,CACvCC,MAAA;IACCd,SAAA,CAAUe,OAAO,GAAGD,MAAA;IACpB,IAAIA,MAAA,IAAUL,UAAA,EAAY;MACxBO,UAAA,CAAW;QACTf,cAAA,CAAec,OAAO,EAAEE,KAAA;MAC1B,GAAG;IACL;IACAtB,YAAA,GAAemB,MAAA;EACjB,GACA,CAACL,UAAA,EAAYd,YAAA,CAAa;EAG5B,MAAMuB,iBAAA,GAAoBpC,KAAA,CAAM+B,WAAW,CAAC;IAC1Cb,SAAA,CAAUe,OAAO,GAAG;IACpBhB,cAAA,CAAe;IACfL,aAAA;EACF,GAAG,CAACA,aAAA,CAAc;EAElB,oBACEyB,IAAA,CAACjC,KAAA;IACE,GAAGW,UAAU;IACduB,SAAA,EAAW,GAAGhC,SAAA,IAAaS,UAAA,CAAWuB,SAAS,IAAI,IAAI;IACvD1B,aAAA,EAAewB,iBAAA;IACfvB,YAAA,EAAciB,gBAAA;IACdS,MAAA,EAAQA,CAAC;MAAEC;IAAK,CAAE,kBAChBC,KAAA,CAAC;MAAIH,SAAA,EAAW,GAAGhC,SAAA,WAAoB;iBACpCqB,UAAA,iBACCU,IAAA,CAAC;QACCC,SAAA,EAAW,GAAGhC,SAAA,mBAA4B,CAACuB,UAAA,GAAa,IAAIvB,SAAA,8BAAuC,GAAG,IAAI;kBAE1G,aAAA+B,IAAA,CAAC;UACC,cAAYvB,iBAAA;UACZwB,SAAA,EAAW,GAAGhC,SAAA,gBAAyB;UACvCoC,QAAA,EAAWC,CAAA,IAAM1B,cAAA,CAAe0B,CAAA,CAAEC,MAAM,CAACC,KAAK;UAC9CC,WAAA,EAAahC,iBAAA;UACbiC,GAAA,EAAK5B,cAAA;UACL6B,IAAA,EAAK;UACLH,KAAA,EAAO7B;;uBAIbqB,IAAA,CAAChC,SAAA,CAAU4C,WAAW;kBACnB7B,eAAA,CAAgB8B,GAAG,CAAC,CAAC1B,OAAA,EAAO2B,KAAA;UAC3B,MAAMC,WAAA,GAAcA,CAAA;YAClB,IAAIzC,QAAA,EAAU;cACZA,QAAA,CAASa,OAAA;YACX;YACAgB,KAAA;UACF;UAEA,oBACEH,IAAA,CAAC;YACCC,SAAA,EAAW,GAAGhC,SAAA,SAAkB;YAChC,0BAAwB;YAExB+C,OAAA,EAASD,WAAA;YACTE,SAAA,EAAYX,GAAA;cACV,IAAIA,GAAA,CAAEY,GAAG,KAAK,WAAWZ,GAAA,CAAEY,GAAG,KAAK,KAAK;gBACtCZ,GAAA,CAAEa,cAAc;gBAChBJ,WAAA;cACF;YACF;YACAK,IAAA,EAAK;YACLC,QAAA,EAAU;sBAETlC,OAAA,CAAMmC;aAXF,GAAGnC,OAAA,CAAMC,IAAI,IAAI0B,KAAA,EAAO;QAcnC;;;;AAMZ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useMemo","useRef","useState","Popup","PopupList","baseClass","Combobox","props","entries","minEntriesForSearch","onSelect","onToggleClose","onToggleOpen","searchPlaceholder","popupProps","searchValue","setSearchValue","isOpenRef","searchInputRef","filteredEntries","search","toLowerCase","filter","entry","name","includes","showSearch","length","hasResults","handleToggleOpen","useCallback","active","current","setTimeout","focus","handleToggleClose","_jsx","className","render","close","_jsxs","onChange","e","target","value","placeholder","ref","type","ButtonGroup","map","index","handleClick","onClick","onKeyDown","key","preventDefault","role","tabIndex","Component"],"sources":["../../../src/elements/Combobox/index.tsx"],"sourcesContent":["'use client'\nimport React, { useMemo, useRef, useState } from 'react'\n\nimport type { PopupProps } from '../Popup/index.js'\n\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.css'\n\nconst baseClass = 'combobox'\n\n/**\n * @internal\n * @experimental\n */\nexport type ComboboxEntry = {\n  Component: React.ReactNode\n  name: string\n}\n\n/**\n * @internal\n * @experimental\n */\nexport type ComboboxProps = {\n  entries: ComboboxEntry[]\n  /** Minimum number of entries required to show search */\n  minEntriesForSearch?: number\n  onSelect?: (entry: ComboboxEntry) => void\n  searchPlaceholder?: string\n} & Omit<PopupProps, 'children' | 'render'>\n\n/**\n * A wrapper on top of Popup + PopupList.ButtonGroup that adds search functionality.\n *\n * @internal - this component may be removed or receive breaking changes in minor releases.\n * @experimental\n */\nexport const Combobox: React.FC<ComboboxProps> = (props) => {\n  const {\n    entries,\n    minEntriesForSearch = 8,\n    onSelect,\n    onToggleClose,\n    onToggleOpen,\n    searchPlaceholder = 'Search...',\n    ...popupProps\n  } = props\n  const [searchValue, setSearchValue] = useState('')\n  const isOpenRef = useRef(false)\n  const searchInputRef = useRef<HTMLInputElement>(null)\n\n  const filteredEntries = useMemo(() => {\n    if (!searchValue) {\n      return entries\n    }\n    const search = searchValue.toLowerCase()\n    return entries.filter((entry) => entry.name.toLowerCase().includes(search))\n  }, [entries, searchValue])\n\n  const showSearch = entries.length >= minEntriesForSearch\n  const hasResults = filteredEntries.length > 0\n\n  const handleToggleOpen = React.useCallback(\n    (active: boolean) => {\n      isOpenRef.current = active\n      if (active && showSearch) {\n        setTimeout(() => {\n          searchInputRef.current?.focus()\n        }, 100)\n      }\n      onToggleOpen?.(active)\n    },\n    [showSearch, onToggleOpen],\n  )\n\n  const handleToggleClose = React.useCallback(() => {\n    isOpenRef.current = false\n    setSearchValue('')\n    onToggleClose?.()\n  }, [onToggleClose])\n\n  return (\n    <Popup\n      {...popupProps}\n      className={`${baseClass} ${popupProps.className || ''}`}\n      onToggleClose={handleToggleClose}\n      onToggleOpen={handleToggleOpen}\n      render={({ close }) => (\n        <div className={`${baseClass}__content`}>\n          {showSearch && (\n            <div\n              className={`${baseClass}__search-wrapper${!hasResults ? ` ${baseClass}__search-wrapper--no-results` : ''}`}\n            >\n              <input\n                aria-label={searchPlaceholder}\n                className={`${baseClass}__search-input`}\n                onChange={(e) => setSearchValue(e.target.value)}\n                placeholder={searchPlaceholder}\n                ref={searchInputRef}\n                type=\"text\"\n                value={searchValue}\n              />\n            </div>\n          )}\n          <PopupList.ButtonGroup>\n            {filteredEntries.map((entry, index) => {\n              const handleClick = () => {\n                if (onSelect) {\n                  onSelect(entry)\n                }\n                close()\n              }\n\n              return (\n                <div\n                  className={`${baseClass}__entry`}\n                  data-popup-prevent-close\n                  key={`${entry.name}-${index}`}\n                  onClick={handleClick}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter' || e.key === ' ') {\n                      e.preventDefault()\n                      handleClick()\n                    }\n                  }}\n                  role=\"menuitem\"\n                  tabIndex={0}\n                >\n                  {entry.Component}\n                </div>\n              )\n            })}\n          </PopupList.ButtonGroup>\n        </div>\n      )}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}