@payloadcms/ui 4.0.0-internal.183b315 → 4.0.0-internal.1a2a79e

package/dist/elements/{ColumnSelector/index.js → ColumnSelection/Popup.js}

@@ -9,24 +9,20 @@ 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 { useTranslation } from '../../providers/Translation/index.js';
+import { matchesSearchQuery } from '../../utilities/matchesSearchQuery.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';
+import './Popup.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]
- *
- * A column label isn't guaranteed to be a string — a field can supply a React
- * element (custom `Label`) or a non-string translation object — so non-strings
- * are returned as a single segment rather than crashing on `.includes`.
  */
 function parseNestedLabel(label) {
-  if (typeof label !== 'string' || !label.includes(' > ')) {
+  if (!label.includes(' > ')) {
     return [label];
   }
   const segments = label.split(' > ');
@@ -55,7 +51,7 @@ const NestedLabel = ({
   });
 };
 const ColumnItem = t0 => {
-  const $ = _c(16);
+  const $ = _c(19);
   const {
     id,
     active,
@@ -81,6 +77,7 @@ const ColumnItem = t0 => {
     isOver,
     isSorting,
     listeners,
+    setActivatorNodeRef,
     setNodeRef,
     transform
   } = useDraggableSortable(t1);
@@ -100,19 +97,27 @@ const ColumnItem = t0 => {
   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) {
+  if ($[6] !== active || $[7] !== attributes || $[8] !== labelText || $[9] !== listeners || $[10] !== onToggle || $[11] !== setActivatorNodeRef || $[12] !== setNodeRef || $[13] !== t || $[14] !== t6 || $[15] !== t7) {
+    let t9;
+    if ($[17] !== t) {
+      t9 = t("general:dragToReorder");
+      $[17] = t;
+      $[18] = t9;
+    } else {
+      t9 = $[18];
+    }
     t8 = _jsxs("div", {
-      "aria-label": labelText,
       className: t6,
       ref: setNodeRef,
       style: {
         transform: t7,
         ...attributes.style
       },
-      ...attributes,
       children: [_jsx("span", {
-        "aria-label": t("general:dragToReorder"),
+        ...attributes,
+        "aria-label": `${t9}: ${labelText}`,
         className: `${baseClass}__drag-handle`,
+        ref: setActivatorNodeRef,
         ...listeners,
         children: _jsx(AlignJustifiedIcon, {
           size: 16
@@ -123,6 +128,7 @@ const ColumnItem = t0 => {
           label: labelText
         })
       }), _jsx(Switch, {
+        ariaLabel: labelText,
         checked: active,
         onChange: onToggle
       })]
@@ -132,29 +138,42 @@ const ColumnItem = t0 => {
     $[8] = labelText;
     $[9] = listeners;
     $[10] = onToggle;
-    $[11] = setNodeRef;
-    $[12] = t;
-    $[13] = t6;
-    $[14] = t7;
-    $[15] = t8;
+    $[11] = setActivatorNodeRef;
+    $[12] = setNodeRef;
+    $[13] = t;
+    $[14] = t6;
+    $[15] = t7;
+    $[16] = t8;
   } else {
-    t8 = $[15];
+    t8 = $[16];
   }
   return t8;
 };
-export const ColumnSelector = ({
+export const ColumnSelectionPopup = ({
   collectionSlug,
+  columns,
+  onChange,
   onClose
 }) => {
-  const {
-    columns,
-    moveColumn,
-    toggleColumn
-  } = useTableColumns();
   const {
     i18n,
     t
   } = useTranslation();
+  const toggleColumn = useCallback(column => {
+    onChange(columns.map(col => col.accessor === column ? {
+      ...col,
+      active: !col.active
+    } : col));
+  }, [columns, onChange]);
+  const moveColumn = useCallback(({
+    fromIndex,
+    toIndex
+  }) => {
+    const next = [...columns];
+    const [moved] = next.splice(fromIndex, 1);
+    next.splice(toIndex, 0, moved);
+    onChange(next);
+  }, [columns, onChange]);
   const uuid = useId();
   const editDepth = useEditDepth();
   const [searchQuery, setSearchQuery] = useState('');
@@ -173,7 +192,7 @@ export const ColumnSelector = ({
       setLockedWidth(null);
     }
   }, [searchQuery, lockedWidth]);
-  const filteredColumns = useMemo(() => columns?.filter(col => !(fieldIsHiddenOrDisabled(col.field) && !fieldIsID(col.field)) && !isFieldDisabled(col.field, 'column')), [columns]);
+  const filteredColumns = useMemo(() => columns?.filter(col_0 => !(fieldIsHiddenOrDisabled(col_0.field) && !fieldIsID(col_0.field)) && !isFieldDisabled(col_0.field, 'column')), [columns]);
   const columnItems = useMemo(() => {
     if (!filteredColumns) {
       return {
@@ -182,13 +201,13 @@ export const ColumnSelector = ({
         shown: []
       };
     }
-    const items = filteredColumns.map((col_0, i) => {
+    const items = filteredColumns.map((col_1, 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 : accessor;
+      } = col_1;
+      const label = 'labelWithPrefix' in field && field.labelWithPrefix !== undefined ? field.labelWithPrefix : 'label' in field && field.label !== undefined && field.label !== false ? field.label : 'name' in field && field.name !== undefined ? field.name : accessor;
       const labelText = typeof label === 'string' ? label : getTranslation(label, i18n);
       return {
         id: `${collectionSlug}-${accessor}-${i}${editDepth ? `-${editDepth}-` : ''}${uuid}`,
@@ -200,7 +219,10 @@ export const ColumnSelector = ({
       };
     });
     // Filter by search query
-    const filtered = searchQuery ? items.filter(item => item.labelText.toLowerCase().includes(searchQuery.toLowerCase())) : items;
+    const filtered = searchQuery ? items.filter(item => matchesSearchQuery({
+      label: item.labelText,
+      query: searchQuery
+    })) : items;
     return {
       all: items,
       hidden: filtered.filter(item_0 => !item_0.active),
@@ -253,7 +275,7 @@ export const ColumnSelector = ({
     style: containerStyle,
     children: [/*#__PURE__*/_jsxs("div", {
       className: `${baseClass}__header`,
-      children: [/*#__PURE__*/_jsx("span", {
+      children: [/*#__PURE__*/_jsx("h2", {
         className: `${baseClass}__title`,
         children: t('general:editColumns')
       }), onClose && /*#__PURE__*/_jsx(Button, {
@@ -265,6 +287,10 @@ export const ColumnSelector = ({
         }),
         onClick: onClose
       })]
+    }), /*#__PURE__*/_jsx("span", {
+      className: "sr-only",
+      id: `${uuid}-search-description`,
+      children: t('general:searchAutomatically')
     }), /*#__PURE__*/_jsx("div", {
       className: `${baseClass}__search`,
       children: /*#__PURE__*/_jsxs("div", {
@@ -272,6 +298,7 @@ export const ColumnSelector = ({
         children: [/*#__PURE__*/_jsx(SearchIcon, {
           size: 24
         }), /*#__PURE__*/_jsx("input", {
+          "aria-describedby": `${uuid}-search-description`,
           "aria-label": t('general:searchColumns'),
           className: `${baseClass}__search-input`,
           onChange: e => setSearchQuery(e.target.value),
@@ -290,7 +317,7 @@ export const ColumnSelector = ({
           children: t('general:noMatchesFound')
         }), columnItems.shown.length > 0 && /*#__PURE__*/_jsxs("div", {
           className: `${baseClass}__section`,
-          children: [/*#__PURE__*/_jsx("div", {
+          children: [/*#__PURE__*/_jsx("h3", {
             className: `${baseClass}__section-header`,
             children: t('general:shownInTable')
           }), columnItems.shown.map(item_3 => /*#__PURE__*/_jsx(ColumnItem, {
@@ -303,7 +330,7 @@ export const ColumnSelector = ({
           }, item_3.id))]
         }), columnItems.hidden.length > 0 && /*#__PURE__*/_jsxs("div", {
           className: `${baseClass}__section`,
-          children: [/*#__PURE__*/_jsx("div", {
+          children: [/*#__PURE__*/_jsx("h3", {
             className: `${baseClass}__section-header`,
             children: t('general:notShownInTable')
           }), columnItems.hidden.map(item_4 => /*#__PURE__*/_jsx(ColumnItem, {
@@ -319,4 +346,4 @@ export const ColumnSelector = ({
     })]
   });
 };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=Popup.js.map

package/dist/elements/ColumnSelection/Popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.js","names":["c","_c","getTranslation","fieldIsHiddenOrDisabled","fieldIsID","isFieldDisabled","React","useCallback","useId","useLayoutEffect","useMemo","useRef","useState","AlignJustifiedIcon","SearchIcon","XIcon","useEditDepth","useTranslation","matchesSearchQuery","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","setActivatorNodeRef","setNodeRef","transform","t2","t3","t4","t5","filter","Boolean","t6","join","t7","undefined","t8","t9","ref","style","children","size","ariaLabel","checked","onChange","ColumnSelectionPopup","collectionSlug","columns","onClose","i18n","toggleColumn","column","col","accessor","moveColumn","fromIndex","toIndex","next","moved","splice","uuid","editDepth","searchQuery","setSearchQuery","containerRef","lockedWidth","setLockedWidth","current","offsetWidth","filteredColumns","field","columnItems","all","hidden","shown","items","i","labelWithPrefix","name","filtered","item","query","handleDragEnd","moveFromIndex","moveToIndex","allItems","shownCount","fromItem","toItem","fromIsShown","toIsShown","allIds","containerStyle","buttonStyle","icon","onClick","e","target","value","placeholder","type","ids","onDragEnd"],"sources":["../../../src/elements/ColumnSelection/Popup.tsx"],"sourcesContent":["'use client'\n\nimport type { Column, 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 { useTranslation } from '../../providers/Translation/index.js'\nimport { matchesSearchQuery } from '../../utilities/matchesSearchQuery.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 './Popup.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 ColumnSelectionPopupProps = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n  readonly columns: Column[]\n  /** Called with the next column state whenever a column is toggled or reordered. */\n  readonly onChange: (columns: Column[]) => void\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 {\n    attributes,\n    isDragging,\n    isOver,\n    isSorting,\n    listeners,\n    setActivatorNodeRef,\n    setNodeRef,\n    transform,\n  } = useDraggableSortable({\n    id,\n  })\n\n  return (\n    <div\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    >\n      <span\n        {...attributes}\n        aria-label={`${t('general:dragToReorder')}: ${labelText}`}\n        className={`${baseClass}__drag-handle`}\n        ref={setActivatorNodeRef}\n        {...listeners}\n      >\n        <AlignJustifiedIcon size={16} />\n      </span>\n      <span className={`${baseClass}__item-label`}>\n        <NestedLabel label={labelText} />\n      </span>\n      <Switch ariaLabel={labelText} checked={active} onChange={onToggle} />\n    </div>\n  )\n}\n\nexport const ColumnSelectionPopup: React.FC<ColumnSelectionPopupProps> = ({\n  collectionSlug,\n  columns,\n  onChange,\n  onClose,\n}) => {\n  const { i18n, t } = useTranslation()\n\n  const toggleColumn = useCallback(\n    (column: string) => {\n      onChange(\n        columns.map((col) => (col.accessor === column ? { ...col, active: !col.active } : col)),\n      )\n    },\n    [columns, onChange],\n  )\n\n  const moveColumn = useCallback(\n    ({ fromIndex, toIndex }: { fromIndex: number; toIndex: number }) => {\n      const next = [...columns]\n      const [moved] = next.splice(fromIndex, 1)\n      next.splice(toIndex, 0, moved)\n      onChange(next)\n    },\n    [columns, onChange],\n  )\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 && field.label !== false\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) => matchesSearchQuery({ label: item.labelText, query: searchQuery }))\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        <h2 className={`${baseClass}__title`}>{t('general:editColumns')}</h2>\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      <span className=\"sr-only\" id={`${uuid}-search-description`}>\n        {t('general:searchAutomatically')}\n      </span>\n      <div className={`${baseClass}__search`}>\n        <div className={`${baseClass}__search-bar`}>\n          <SearchIcon size={24} />\n          <input\n            aria-describedby={`${uuid}-search-description`}\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              <h3 className={`${baseClass}__section-header`}>{t('general:shownInTable')}</h3>\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              <h3 className={`${baseClass}__section-header`}>{t('general:notShownInTable')}</h3>\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/ColumnSelection/index.d.ts

@@ -0,0 +1,10 @@
+import type { Column, SanitizedCollectionConfig } from 'payload';
+import React from 'react';
+export type ColumnSelectionButtonProps = {
+    readonly collectionSlug: SanitizedCollectionConfig['slug'];
+    readonly columns: Column[];
+    /** Called with the next column state whenever a column is toggled or reordered. */
+    readonly onChange: (columns: Column[]) => void;
+};
+export declare const ColumnSelectionButton: React.FC<ColumnSelectionButtonProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelection/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEhE,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAA;IAC1B,mFAAmF;IACnF,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAC/C,CAAA;AAID,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAqCtE,CAAA"}

package/dist/elements/ColumnSelection/index.js

@@ -0,0 +1,89 @@
+'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 { Popup } from '../Popup/index.js';
+import { ColumnSelectionPopup } from './Popup.js';
+const baseClass = 'columns-button';
+export const ColumnSelectionButton = t0 => {
+  const $ = _c(11);
+  const {
+    collectionSlug,
+    columns,
+    onChange
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  let t1;
+  if ($[0] !== collectionSlug || $[1] !== columns || $[2] !== onChange || $[3] !== t) {
+    let t2;
+    if ($[5] !== collectionSlug || $[6] !== columns || $[7] !== onChange) {
+      t2 = t3 => {
+        const {
+          close
+        } = t3;
+        return _jsx(ColumnSelectionPopup, {
+          collectionSlug,
+          columns,
+          onChange,
+          onClose: close
+        });
+      };
+      $[5] = collectionSlug;
+      $[6] = columns;
+      $[7] = onChange;
+      $[8] = t2;
+    } else {
+      t2 = $[8];
+    }
+    let t3;
+    if ($[9] !== t) {
+      t3 = t4 => {
+        const {
+          active,
+          ...props
+        } = t4;
+        return _jsx(Button, {
+          ...props,
+          buttonStyle: "secondary",
+          className: `${baseClass}__button`,
+          icon: _jsx(ChevronIcon, {
+            direction: active ? "up" : "down",
+            size: 16
+          }),
+          selected: active,
+          size: "medium",
+          children: t("general:columns")
+        });
+      };
+      $[9] = t;
+      $[10] = t3;
+    } else {
+      t3 = $[10];
+    }
+    t1 = _jsx(Popup, {
+      className: baseClass,
+      horizontalAlign: "right",
+      popupAriaLabel: t("general:columns"),
+      popupType: "dialog",
+      render: t2,
+      renderButton: t3,
+      theme: "auto",
+      verticalAlign: "bottom"
+    });
+    $[0] = collectionSlug;
+    $[1] = columns;
+    $[2] = onChange;
+    $[3] = t;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","useTranslation","Button","Popup","ColumnSelectionPopup","baseClass","ColumnSelectionButton","t0","$","collectionSlug","columns","onChange","t","t1","t2","t3","close","_jsx","onClose","t4","active","props","buttonStyle","className","icon","direction","size","children","horizontalAlign","popupAriaLabel","popupType","render","verticalAlign"],"sources":["../../../src/elements/ColumnSelection/index.tsx"],"sourcesContent":["'use client'\n\nimport type { Column, 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 { Popup } from '../Popup/index.js'\nimport { ColumnSelectionPopup } from './Popup.js'\n\nexport type ColumnSelectionButtonProps = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n  readonly columns: Column[]\n  /** Called with the next column state whenever a column is toggled or reordered. */\n  readonly onChange: (columns: Column[]) => void\n}\n\nconst baseClass = 'columns-button'\n\nexport const ColumnSelectionButton: React.FC<ColumnSelectionButtonProps> = ({\n  collectionSlug,\n  columns,\n  onChange,\n}) => {\n  const { t } = useTranslation()\n\n  return (\n    <Popup\n      className={baseClass}\n      horizontalAlign=\"right\"\n      popupAriaLabel={t('general:columns')}\n      popupType=\"dialog\"\n      render={({ close }) => (\n        <ColumnSelectionPopup\n          collectionSlug={collectionSlug}\n          columns={columns}\n          onChange={onChange}\n          onClose={close}\n        />\n      )}\n      renderButton={({ active, ...props }) => (\n        <Button\n          {...props}\n          buttonStyle=\"secondary\"\n          className={`${baseClass}__button`}\n          icon={<ChevronIcon direction={active ? 'up' : '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,KAAK,QAAQ;AACtB,SAASC,oBAAoB,QAAQ;AASrC,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,qBAAA,GAA8DC,EAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EAAC;IAAAW,cAAA;IAAAC,OAAA;IAAAC;EAAA,IAAAJ,EAI3E;EACC;IAAAK;EAAA,IAAcX,cAAA;EAAA,IAAAY,EAAA;EAAA,IAAAL,CAAA,QAAAC,cAAA,IAAAD,CAAA,QAAAE,OAAA,IAAAF,CAAA,QAAAG,QAAA,IAAAH,CAAA,QAAAI,CAAA;IAAA,IAAAE,EAAA;IAAA,IAAAN,CAAA,QAAAC,cAAA,IAAAD,CAAA,QAAAE,OAAA,IAAAF,CAAA,QAAAG,QAAA;MAQFG,EAAA,GAAAC,EAAA;QAAC;UAAAC;QAAA,IAAAD,EAAS;QAAA,OAChBE,IAAA,CAACb,oBAAA;UAAAK,cAAA;UAAAC,OAAA;UAAAC,QAAA;UAAAO,OAAA,EAIUF;;;;;;;;;;;;MAGCD,EAAA,GAAAI,EAAA;QAAC;UAAAC,MAAA;UAAA,GAAAC;QAAA,IAAAF,EAAoB;QAAA,OACjCF,IAAA,CAACf,MAAA;UAAA,GACKmB,KAAK;UAAAC,WAAA,EACG;UAAAC,SAAA,EACD,GAAGlB,SAAA,UAAmB;UAAAmB,IAAA,EAC3BP,IAAA,CAACjB,WAAA;YAAAyB,SAAA,EAAuBL,MAAA,OAAgB,GAAhB,MAAgB;YAAAM,IAAA,EAAc;;oBAClDN,MAAA;UAAAM,IAAA,EACL;UAAAC,QAAA,EAEJf,CAAA,CAAE;;;;;;;;IAtBTC,EAAA,GAAAI,IAAA,CAACd,KAAA;MAAAoB,SAAA,EACYlB,SAAA;MAAAuB,eAAA,EACK;MAAAC,cAAA,EACAjB,CAAA,CAAE;MAAAkB,SAAA,EACR;MAAAC,MAAA,EACFjB,E;oBAQMC,E;aAYR;MAAAiB,aAAA,EACQ;;;;;;;;;;SA1BhBnB,E;CA6BJ","ignoreList":[]}

package/dist/elements/Combobox/index.css

@@ -1,52 +1,136 @@
 @layer payload-default {
+  /* Content controls the minimum width, including when the viewport is narrower
+     than Popup's size presets. */
+  .popup.combobox > .popup__content {
+    min-width: 0;
+  }
+
+  /* The combobox supplies its own padding so the search bar can span the full
+     width and sit flush against its dividing border. */
+  .popup__scroll-container:has(> .combobox__content) {
+    padding: 0;
+    overflow: hidden;
+  }
+
   .combobox__content {
+    --combobox-min-width: calc(var(--spacer-6) * 6);
+    --combobox-available-width: calc(100vw - var(--spacer-3));
+
     display: flex;
     flex-direction: column;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
+    min-width: min(var(--combobox-min-width), var(--combobox-available-width));
+    max-height: inherit;
+  }
 
-    &::-webkit-scrollbar {
-      display: none;
-    }
+  /* Held steady while searching so the popup doesn't resize as entries filter out */
+  .combobox__content[data-width-locked] {
+    min-width: min(var(--combobox-locked-width), var(--combobox-available-width));
   }
 
-  .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 {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    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);
+  }
+
+  .combobox__search-bar {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    height: var(--spacer-4);
+    padding-inline-end: var(--spacer-2);
+    background: var(--color-bg-secondary);
+    border-radius: var(--button-radius);
+
+    &:focus-within {
+      outline: var(--accessibility-outline);
+      outline-offset: var(--accessibility-outline-offset);
+    }
   }
 
-  .combobox__search-wrapper--no-results {
-    border-bottom: none;
-    margin-bottom: 0;
+  .combobox__search-bar svg {
+    display: block;
+    flex-shrink: 0;
+    color: var(--color-icon-secondary);
   }
 
   .combobox__search-input {
-    width: 100%;
-    background: var(--bg-default-secondary);
-    color: var(--text-default);
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    padding: 0;
+    background: transparent;
     border: none;
-    border-radius: var(--button-radius);
-    padding: calc(var(--base) * 0.25) calc(var(--base) * 0.5);
-    outline: none;
-    box-shadow: 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,
+    &:focus-visible {
+      outline: none;
+      box-shadow: none;
+    }
   }
 
-  .combobox__search-input::placeholder {
-    color: var(--text-default-tertiary);
+  .combobox__entries {
+    min-height: 0;
+    padding-block: var(--spacer-2);
+    overflow-y: auto;
   }
 
-  .combobox__search-input:focus,
-  .combobox__search-input:focus-visible {
-    background: var(--bg-default-secondary-hover);
-    outline: none;
-    border: none;
-    box-shadow: none;
+  .popup__scroll-container:not(.popup__scroll-container--show-scrollbar)
+    > .combobox__content
+    > .combobox__entries {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 
   .combobox__entry {
     cursor: pointer;
+    display: flex;
+  }
+
+  .combobox__header {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    padding-block: var(--spacer-2);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  .combobox__footer {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    padding-block: var(--spacer-2);
+    border-top: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  .combobox__no-results {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: calc(var(--spacer-6) + var(--spacer-2));
+    padding-block: var(--spacer-2);
+    padding-inline: var(--spacer-3);
+    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-secondary);
   }
 }

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

@@ -17,10 +17,30 @@ export type ComboboxProps = {
     /** Accessible label for the list of entries */
     'aria-label'?: string;
     entries: ComboboxEntry[];
+    /**
+     * Pinned below the entries, outside the scroll area and unaffected by search.
+     * For actions that belong to the list as a whole, such as "create new".
+     */
+    footer?: (args: {
+        close: () => void;
+    }) => React.ReactNode;
+    /**
+     * Pinned above the search, outside the scroll area and unaffected by it. For
+     * the one entry the list is about, such as the item already selected.
+     */
+    header?: (args: {
+        close: () => void;
+    }) => React.ReactNode;
     /** Minimum number of entries required to show search */
     minEntriesForSearch?: number;
     onSelect?: (entry: ComboboxEntry) => void;
     searchPlaceholder?: string;
+    /**
+     * Whether to say so when a search matches nothing.
+     *
+     * Only shown for a nonempty query against a nonempty list.
+     */
+    showEmptyMessage?: boolean;
 } & Omit<PopupProps, 'children' | 'render'>;
 /**
  * A wrapper on top of Popup + PopupList.ButtonGroup that adds search functionality.

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,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,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,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,CAuG5C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Combobox/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiD,MAAM,OAAO,CAAA;AAErE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAMnD,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,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD,wDAAwD;IACxD,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,QAAQ,CAAC,CAAA;AAE3C;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6I5C,CAAA"}