@payloadcms/ui 4.0.0-internal.a0ef1b8 → 4.0.0-internal.add4c47

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

@@ -1 +1 @@
-{"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":[]}
+{"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              aria-label={t('general:dragToReorder')}\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                aria-label={t(isCollapsed ? 'general:expand' : 'general:collapse')}\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/ColumnSelection/Popup.d.ts

@@ -0,0 +1,12 @@
+import type { Column, SanitizedCollectionConfig } from 'payload';
+import React from 'react';
+import './Popup.css';
+export type ColumnSelectionPopupProps = {
+    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;
+    readonly onClose?: () => void;
+};
+export declare const ColumnSelectionPopup: React.FC<ColumnSelectionPopupProps>;
+//# sourceMappingURL=Popup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelection/Popup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,yBAAyB,EAAe,MAAM,SAAS,CAAA;AAI7E,OAAO,KAAyE,MAAM,OAAO,CAAA;AAY7F,OAAO,aAAa,CAAA;AA8CpB,MAAM,MAAM,yBAAyB,GAAG;IACtC,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;IAC9C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B,CAAA;AAkDD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA+NpE,CAAA"}

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 { 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 { matchesColumnSearch } from './matchesColumnSearch.js';
+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(' > ');
@@ -142,19 +138,31 @@ const ColumnItem = t0 => {
   }
   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 +181,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 +190,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 +208,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 => matchesColumnSearch({
+      labelText: item.labelText,
+      query: searchQuery
+    })) : items;
     return {
       all: items,
       hidden: filtered.filter(item_0 => !item_0.active),
@@ -319,4 +330,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","Button","DraggableSortable","useDraggableSortable","Switch","matchesColumnSearch","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","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 { 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 { matchesColumnSearch } from './matchesColumnSearch.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 { 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 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) =>\n          matchesColumnSearch({ labelText: item.labelText, query: searchQuery }),\n        )\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/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,CAmCtE,CAAA"}

package/dist/elements/{ColumnsButton → ColumnSelection}/index.js

@@ -6,35 +6,41 @@ 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';
+import { ColumnSelectionPopup } from './Popup.js';
 const baseClass = 'columns-button';
-export const ColumnsButton = t0 => {
-  const $ = _c(7);
+export const ColumnSelectionButton = t0 => {
+  const $ = _c(9);
   const {
-    collectionSlug
+    collectionSlug,
+    columns,
+    onChange
   } = t0;
   const {
     t
   } = useTranslation();
   let t1;
-  if ($[0] !== collectionSlug) {
+  if ($[0] !== collectionSlug || $[1] !== columns || $[2] !== onChange) {
     t1 = t2 => {
       const {
         close
       } = t2;
-      return _jsx(ColumnSelector, {
+      return _jsx(ColumnSelectionPopup, {
         collectionSlug,
+        columns,
+        onChange,
         onClose: close
       });
     };
     $[0] = collectionSlug;
-    $[1] = t1;
+    $[1] = columns;
+    $[2] = onChange;
+    $[3] = t1;
   } else {
-    t1 = $[1];
+    t1 = $[3];
   }
   let t2;
-  if ($[2] !== t) {
+  if ($[4] !== t) {
     t2 = t3 => {
       const {
         active,
@@ -53,13 +59,13 @@ export const ColumnsButton = t0 => {
         children: t("general:columns")
       });
     };
-    $[2] = t;
-    $[3] = t2;
+    $[4] = t;
+    $[5] = t2;
   } else {
-    t2 = $[3];
+    t2 = $[5];
   }
   let t3;
-  if ($[4] !== t1 || $[5] !== t2) {
+  if ($[6] !== t1 || $[7] !== t2) {
     t3 = _jsx(Popup, {
       className: baseClass,
       horizontalAlign: "right",
@@ -68,11 +74,11 @@ export const ColumnsButton = t0 => {
       theme: "auto",
       verticalAlign: "bottom"
     });
-    $[4] = t1;
-    $[5] = t2;
-    $[6] = t3;
+    $[6] = t1;
+    $[7] = t2;
+    $[8] = t3;
   } else {
-    t3 = $[6];
+    t3 = $[8];
   }
   return t3;
 };

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","close","_jsx","onClose","t3","active","props","buttonStyle","className","icon","direction","size","children","horizontalAlign","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      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;IAMFE,EAAA,GAAAC,EAAA;MAAC;QAAAC;MAAA,IAAAD,EAAS;MAAA,OAChBE,IAAA,CAAAZ,oBAAA;QAAAK,cAAA;QAAAC,OAAA;QAAAC,QAAA;QAAAM,OAAA,EAIWF;MAAA,C;;;;;;;;;;;IAGCD,EAAA,GAAAI,EAAA;MAAC;QAAAC,MAAA;QAAA,GAAAC;MAAA,IAAAF,EAAoB;MAAA,OACjCF,IAAA,CAAAd,MAAA;QAAA,GACMkB,KAAK;QAAAC,WAAA,EACG;QAAAC,SAAA,EACD,GAAAjB,SAAA,UAAsB;QAAAkB,IAAA,EAC3BP,IAAA,CAAAhB,WAAA;UAAAwB,SAAA,EAAwBL,MAAA,GAAS,OAAO;UAAAM,IAAA;QAAA,C;kBACpCN,MAAA;QAAAM,IAAA,EACL;QAAAC,QAAA,EAEJd,CAAA,CAAE;MAAA,C;;;;;;;;;IApBTM,EAAA,GAAAF,IAAA,CAAAb,KAAA;MAAAmB,SAAA,EAAAjB,SAAA;MAAAsB,eAAA,EAEkB;MAAAC,MAAA,EACRf,E;oBAQMC,E;aAYR;MAAAe,aAAA,EACQ;IAAA,C;;;;;;;SAxBhBX,E;CA2BJ","ignoreList":[]}

package/dist/elements/ColumnSelection/matchesColumnSearch.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Matches a column label against a search query. Single-character queries only
+ * match the start of a word, keeping single-letter searches low-noise; queries
+ * of two or more characters match anywhere in the label.
+ */
+export declare function matchesColumnSearch({ labelText, query, }: {
+    labelText: string;
+    query: string;
+}): boolean;
+//# sourceMappingURL=matchesColumnSearch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"matchesColumnSearch.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelection/matchesColumnSearch.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,KAAK,GACN,EAAE;IACD,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd,GAAG,OAAO,CAcV"}

package/dist/elements/ColumnSelection/matchesColumnSearch.js

@@ -0,0 +1,21 @@
+const WORD_SPLIT_REGEX = /[^\p{L}\p{N}]+/u;
+/**
+ * Matches a column label against a search query. Single-character queries only
+ * match the start of a word, keeping single-letter searches low-noise; queries
+ * of two or more characters match anywhere in the label.
+ */
+export function matchesColumnSearch({
+  labelText,
+  query
+}) {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (!normalizedQuery) {
+    return true;
+  }
+  const normalizedLabel = labelText.toLowerCase();
+  if (normalizedQuery.length === 1) {
+    return normalizedLabel.split(WORD_SPLIT_REGEX).some(word => word.startsWith(normalizedQuery));
+  }
+  return normalizedLabel.includes(normalizedQuery);
+}
+//# sourceMappingURL=matchesColumnSearch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"matchesColumnSearch.js","names":["WORD_SPLIT_REGEX","matchesColumnSearch","labelText","query","normalizedQuery","trim","toLowerCase","normalizedLabel","length","split","some","word","startsWith","includes"],"sources":["../../../src/elements/ColumnSelection/matchesColumnSearch.ts"],"sourcesContent":["const WORD_SPLIT_REGEX = /[^\\p{L}\\p{N}]+/u\n\n/**\n * Matches a column label against a search query. Single-character queries only\n * match the start of a word, keeping single-letter searches low-noise; queries\n * of two or more characters match anywhere in the label.\n */\nexport function matchesColumnSearch({\n  labelText,\n  query,\n}: {\n  labelText: string\n  query: string\n}): boolean {\n  const normalizedQuery = query.trim().toLowerCase()\n\n  if (!normalizedQuery) {\n    return true\n  }\n\n  const normalizedLabel = labelText.toLowerCase()\n\n  if (normalizedQuery.length === 1) {\n    return normalizedLabel.split(WORD_SPLIT_REGEX).some((word) => word.startsWith(normalizedQuery))\n  }\n\n  return normalizedLabel.includes(normalizedQuery)\n}\n"],"mappings":"AAAA,MAAMA,gBAAA,GAAmB;AAEzB;;;;;AAKA,OAAO,SAASC,oBAAoB;EAClCC,SAAS;EACTC;AAAK,CAIN;EACC,MAAMC,eAAA,GAAkBD,KAAA,CAAME,IAAI,GAAGC,WAAW;EAEhD,IAAI,CAACF,eAAA,EAAiB;IACpB,OAAO;EACT;EAEA,MAAMG,eAAA,GAAkBL,SAAA,CAAUI,WAAW;EAE7C,IAAIF,eAAA,CAAgBI,MAAM,KAAK,GAAG;IAChC,OAAOD,eAAA,CAAgBE,KAAK,CAACT,gBAAA,EAAkBU,IAAI,CAAEC,IAAA,IAASA,IAAA,CAAKC,UAAU,CAACR,eAAA;EAChF;EAEA,OAAOG,eAAA,CAAgBM,QAAQ,CAACT,eAAA;AAClC","ignoreList":[]}

package/dist/elements/ColumnSelection/matchesColumnSearch.spec.js

@@ -0,0 +1,87 @@
+import { describe, expect, it } from 'vitest';
+import { matchesColumnSearch } from './matchesColumnSearch.js';
+describe('matchesColumnSearch', () => {
+  it('matches everything when the query is empty', () => {
+    expect(matchesColumnSearch({
+      labelText: 'Published Date',
+      query: ''
+    })).toBe(true);
+  });
+  it('matches everything when the query is only whitespace', () => {
+    expect(matchesColumnSearch({
+      labelText: 'Published Date',
+      query: '   '
+    })).toBe(true);
+  });
+  describe('single-character queries', () => {
+    it('matches the start of the label', () => {
+      expect(matchesColumnSearch({
+        labelText: 'Published Date',
+        query: 'p'
+      })).toBe(true);
+    });
+    it('matches the start of a later word', () => {
+      expect(matchesColumnSearch({
+        labelText: 'Published Date',
+        query: 'd'
+      })).toBe(true);
+    });
+    it('matches the start of a word after a nested-label separator', () => {
+      expect(matchesColumnSearch({
+        labelText: 'Meta > Title',
+        query: 't'
+      })).toBe(true);
+    });
+    it('is case-insensitive', () => {
+      expect(matchesColumnSearch({
+        labelText: 'Published Date',
+        query: 'P'
+      })).toBe(true);
+    });
+    it('does not match a character in the middle of a word', () => {
+      expect(matchesColumnSearch({
+        labelText: 'Published Date',
+        query: 'u'
+      })).toBe(false);
+    });
+    it('returns false when no word starts with the character', () => {
+      expect(matchesColumnSearch({
+        labelText: 'Published Date',
+        query: 'z'
+      })).toBe(false);
+    });
+    it('matches the start of a non-Latin label', () => {
+      expect(matchesColumnSearch({
+        labelText: 'Пользователь',
+        query: 'п'
+      })).toBe(true);
+    });
+  });
+  describe('multi-character queries', () => {
+    it('matches a substring in the middle of the label', () => {
+      expect(matchesColumnSearch({
+        labelText: 'Published Date',
+        query: 'ish'
+      })).toBe(true);
+    });
+    it('matches across a word boundary', () => {
+      expect(matchesColumnSearch({
+        labelText: 'Published Date',
+        query: 'd da'
+      })).toBe(true);
+    });
+    it('is case-insensitive', () => {
+      expect(matchesColumnSearch({
+        labelText: 'Published Date',
+        query: 'DATE'
+      })).toBe(true);
+    });
+    it('returns false when the substring is not present', () => {
+      expect(matchesColumnSearch({
+        labelText: 'Published Date',
+        query: 'zzz'
+      })).toBe(false);
+    });
+  });
+});
+//# sourceMappingURL=matchesColumnSearch.spec.js.map

package/dist/elements/ColumnSelection/matchesColumnSearch.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"matchesColumnSearch.spec.js","names":["describe","expect","it","matchesColumnSearch","labelText","query","toBe"],"sources":["../../../src/elements/ColumnSelection/matchesColumnSearch.spec.ts"],"sourcesContent":["import { describe, expect, it } from 'vitest'\n\nimport { matchesColumnSearch } from './matchesColumnSearch.js'\n\ndescribe('matchesColumnSearch', () => {\n  it('matches everything when the query is empty', () => {\n    expect(matchesColumnSearch({ labelText: 'Published Date', query: '' })).toBe(true)\n  })\n\n  it('matches everything when the query is only whitespace', () => {\n    expect(matchesColumnSearch({ labelText: 'Published Date', query: '   ' })).toBe(true)\n  })\n\n  describe('single-character queries', () => {\n    it('matches the start of the label', () => {\n      expect(matchesColumnSearch({ labelText: 'Published Date', query: 'p' })).toBe(true)\n    })\n\n    it('matches the start of a later word', () => {\n      expect(matchesColumnSearch({ labelText: 'Published Date', query: 'd' })).toBe(true)\n    })\n\n    it('matches the start of a word after a nested-label separator', () => {\n      expect(matchesColumnSearch({ labelText: 'Meta > Title', query: 't' })).toBe(true)\n    })\n\n    it('is case-insensitive', () => {\n      expect(matchesColumnSearch({ labelText: 'Published Date', query: 'P' })).toBe(true)\n    })\n\n    it('does not match a character in the middle of a word', () => {\n      expect(matchesColumnSearch({ labelText: 'Published Date', query: 'u' })).toBe(false)\n    })\n\n    it('returns false when no word starts with the character', () => {\n      expect(matchesColumnSearch({ labelText: 'Published Date', query: 'z' })).toBe(false)\n    })\n\n    it('matches the start of a non-Latin label', () => {\n      expect(matchesColumnSearch({ labelText: 'Пользователь', query: 'п' })).toBe(true)\n    })\n  })\n\n  describe('multi-character queries', () => {\n    it('matches a substring in the middle of the label', () => {\n      expect(matchesColumnSearch({ labelText: 'Published Date', query: 'ish' })).toBe(true)\n    })\n\n    it('matches across a word boundary', () => {\n      expect(matchesColumnSearch({ labelText: 'Published Date', query: 'd da' })).toBe(true)\n    })\n\n    it('is case-insensitive', () => {\n      expect(matchesColumnSearch({ labelText: 'Published Date', query: 'DATE' })).toBe(true)\n    })\n\n    it('returns false when the substring is not present', () => {\n      expect(matchesColumnSearch({ labelText: 'Published Date', query: 'zzz' })).toBe(false)\n    })\n  })\n})\n"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,MAAM,EAAEC,EAAE,QAAQ;AAErC,SAASC,mBAAmB,QAAQ;AAEpCH,QAAA,CAAS,uBAAuB;EAC9BE,EAAA,CAAG,8CAA8C;IAC/CD,MAAA,CAAOE,mBAAA,CAAoB;MAAEC,SAAA,EAAW;MAAkBC,KAAA,EAAO;IAAG,IAAIC,IAAI,CAAC;EAC/E;EAEAJ,EAAA,CAAG,wDAAwD;IACzDD,MAAA,CAAOE,mBAAA,CAAoB;MAAEC,SAAA,EAAW;MAAkBC,KAAA,EAAO;IAAM,IAAIC,IAAI,CAAC;EAClF;EAEAN,QAAA,CAAS,4BAA4B;IACnCE,EAAA,CAAG,kCAAkC;MACnCD,MAAA,CAAOE,mBAAA,CAAoB;QAAEC,SAAA,EAAW;QAAkBC,KAAA,EAAO;MAAI,IAAIC,IAAI,CAAC;IAChF;IAEAJ,EAAA,CAAG,qCAAqC;MACtCD,MAAA,CAAOE,mBAAA,CAAoB;QAAEC,SAAA,EAAW;QAAkBC,KAAA,EAAO;MAAI,IAAIC,IAAI,CAAC;IAChF;IAEAJ,EAAA,CAAG,8DAA8D;MAC/DD,MAAA,CAAOE,mBAAA,CAAoB;QAAEC,SAAA,EAAW;QAAgBC,KAAA,EAAO;MAAI,IAAIC,IAAI,CAAC;IAC9E;IAEAJ,EAAA,CAAG,uBAAuB;MACxBD,MAAA,CAAOE,mBAAA,CAAoB;QAAEC,SAAA,EAAW;QAAkBC,KAAA,EAAO;MAAI,IAAIC,IAAI,CAAC;IAChF;IAEAJ,EAAA,CAAG,sDAAsD;MACvDD,MAAA,CAAOE,mBAAA,CAAoB;QAAEC,SAAA,EAAW;QAAkBC,KAAA,EAAO;MAAI,IAAIC,IAAI,CAAC;IAChF;IAEAJ,EAAA,CAAG,wDAAwD;MACzDD,MAAA,CAAOE,mBAAA,CAAoB;QAAEC,SAAA,EAAW;QAAkBC,KAAA,EAAO;MAAI,IAAIC,IAAI,CAAC;IAChF;IAEAJ,EAAA,CAAG,0CAA0C;MAC3CD,MAAA,CAAOE,mBAAA,CAAoB;QAAEC,SAAA,EAAW;QAAgBC,KAAA,EAAO;MAAI,IAAIC,IAAI,CAAC;IAC9E;EACF;EAEAN,QAAA,CAAS,2BAA2B;IAClCE,EAAA,CAAG,kDAAkD;MACnDD,MAAA,CAAOE,mBAAA,CAAoB;QAAEC,SAAA,EAAW;QAAkBC,KAAA,EAAO;MAAM,IAAIC,IAAI,CAAC;IAClF;IAEAJ,EAAA,CAAG,kCAAkC;MACnCD,MAAA,CAAOE,mBAAA,CAAoB;QAAEC,SAAA,EAAW;QAAkBC,KAAA,EAAO;MAAO,IAAIC,IAAI,CAAC;IACnF;IAEAJ,EAAA,CAAG,uBAAuB;MACxBD,MAAA,CAAOE,mBAAA,CAAoB;QAAEC,SAAA,EAAW;QAAkBC,KAAA,EAAO;MAAO,IAAIC,IAAI,CAAC;IACnF;IAEAJ,EAAA,CAAG,mDAAmD;MACpDD,MAAA,CAAOE,mBAAA,CAAoB;QAAEC,SAAA,EAAW;QAAkBC,KAAA,EAAO;MAAM,IAAIC,IAAI,CAAC;IAClF;EACF;AACF","ignoreList":[]}

package/dist/elements/Combobox/index.css

@@ -13,9 +13,9 @@
   .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);
+    padding-bottom: var(--spacer-2);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+    margin-bottom: var(--spacer-2);
   }
 
   .combobox__search-wrapper--no-results {
@@ -25,22 +25,22 @@
 
   .combobox__search-input {
     width: 100%;
-    background: var(--bg-default-secondary);
-    color: var(--text-default);
+    background: var(--color-bg-secondary);
+    color: var(--color-text);
     border: none;
     border-radius: var(--button-radius);
-    padding: calc(var(--base) * 0.25) calc(var(--base) * 0.5);
+    padding: var(--spacer-1) var(--spacer-2);
     outline: none;
     box-shadow: none;
   }
 
   .combobox__search-input::placeholder {
-    color: var(--text-default-tertiary);
+    color: var(--color-text-tertiary);
   }
 
   .combobox__search-input:focus,
   .combobox__search-input:focus-visible {
-    background: var(--bg-default-secondary-hover);
+    background: var(--color-bg-secondary-hover);
     outline: none;
     border: none;
     box-shadow: none;
@@ -48,5 +48,6 @@
 
   .combobox__entry {
     cursor: pointer;
+    display: flex;
   }
 }

package/dist/elements/ConfirmationModal/index.css

@@ -0,0 +1,7 @@
+@layer payload-default {
+  .confirmation-modal__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+  }
+}

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import './index.css';
 export type OnCancel = () => void;
 export type ConfirmationModalProps = {
     body: React.ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ConfirmationModal/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,MAAM,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAA;AAEjC,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACtC,CAAA;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBAuB9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ConfirmationModal/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAA;AAEjC,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACtC,CAAA;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBA2B9D"}

package/dist/elements/ConfirmationModal/index.js

@@ -3,6 +3,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { DialogBody, DialogCancel, DialogConfirm, DialogFooter, DialogHeader, DialogModal } from '../Dialog/index.js';
+import './index.css';
 export function ConfirmationModal(props) {
   const {
     body,
@@ -22,9 +23,12 @@ export function ConfirmationModal(props) {
       showClose: true,
       title: heading
     }), /*#__PURE__*/_jsx(DialogBody, {
-      children: typeof body === 'string' ? /*#__PURE__*/_jsx("p", {
-        children: body
-      }) : body
+      children: /*#__PURE__*/_jsx("div", {
+        className: "confirmation-modal__body",
+        children: typeof body === 'string' ? /*#__PURE__*/_jsx("p", {
+          children: body
+        }) : body
+      })
     }), /*#__PURE__*/_jsxs(DialogFooter, {
       children: [/*#__PURE__*/_jsx(DialogCancel, {
         label: cancelLabel,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","DialogBody","DialogCancel","DialogConfirm","DialogFooter","DialogHeader","DialogModal","ConfirmationModal","props","body","cancelLabel","className","confirmingLabel","confirmLabel","heading","modalSlug","onCancel","onConfirm","_jsxs","slug","_jsx","showClose","title","label","onClick","loadingLabel"],"sources":["../../../src/elements/ConfirmationModal/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport {\n  DialogBody,\n  DialogCancel,\n  DialogConfirm,\n  DialogFooter,\n  DialogHeader,\n  DialogModal,\n} from '../Dialog/index.js'\n\nexport type OnCancel = () => void\n\nexport type ConfirmationModalProps = {\n  body: React.ReactNode\n  cancelLabel?: string\n  className?: string\n  confirmingLabel?: string\n  confirmLabel?: string\n  heading: React.ReactNode\n  modalSlug: string\n  onCancel?: OnCancel\n  onConfirm: () => Promise<void> | void\n}\n\nexport function ConfirmationModal(props: ConfirmationModalProps) {\n  const {\n    body,\n    cancelLabel,\n    className,\n    confirmingLabel,\n    confirmLabel,\n    heading,\n    modalSlug,\n    onCancel,\n    onConfirm,\n  } = props\n\n  return (\n    <DialogModal className={className} slug={modalSlug}>\n      <DialogHeader showClose title={heading} />\n      <DialogBody>{typeof body === 'string' ? <p>{body}</p> : body}</DialogBody>\n      <DialogFooter>\n        <DialogCancel label={cancelLabel} onClick={onCancel} />\n        <DialogConfirm label={confirmLabel} loadingLabel={confirmingLabel} onClick={onConfirm} />\n      </DialogFooter>\n    </DialogModal>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,SACEC,UAAU,EACVC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,YAAY,EACZC,WAAW,QACN;AAgBP,OAAO,SAASC,kBAAkBC,KAA6B;EAC7D,MAAM;IACJC,IAAI;IACJC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC;EAAS,CACV,GAAGT,KAAA;EAEJ,oBACEU,KAAA,CAACZ,WAAA;IAAYK,SAAA,EAAWA,SAAA;IAAWQ,IAAA,EAAMJ,SAAA;4BACvCK,IAAA,CAACf,YAAA;MAAagB,SAAS;MAACC,KAAA,EAAOR;qBAC/BM,IAAA,CAACnB,UAAA;gBAAY,OAAOQ,IAAA,KAAS,wBAAWW,IAAA,CAAC;kBAAGX;WAAYA;qBACxDS,KAAA,CAACd,YAAA;8BACCgB,IAAA,CAAClB,YAAA;QAAaqB,KAAA,EAAOb,WAAA;QAAac,OAAA,EAASR;uBAC3CI,IAAA,CAACjB,aAAA;QAAcoB,KAAA,EAAOV,YAAA;QAAcY,YAAA,EAAcb,eAAA;QAAiBY,OAAA,EAASP;;;;AAIpF","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","DialogBody","DialogCancel","DialogConfirm","DialogFooter","DialogHeader","DialogModal","ConfirmationModal","props","body","cancelLabel","className","confirmingLabel","confirmLabel","heading","modalSlug","onCancel","onConfirm","_jsxs","slug","_jsx","showClose","title","label","onClick","loadingLabel"],"sources":["../../../src/elements/ConfirmationModal/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport {\n  DialogBody,\n  DialogCancel,\n  DialogConfirm,\n  DialogFooter,\n  DialogHeader,\n  DialogModal,\n} from '../Dialog/index.js'\nimport './index.css'\n\nexport type OnCancel = () => void\n\nexport type ConfirmationModalProps = {\n  body: React.ReactNode\n  cancelLabel?: string\n  className?: string\n  confirmingLabel?: string\n  confirmLabel?: string\n  heading: React.ReactNode\n  modalSlug: string\n  onCancel?: OnCancel\n  onConfirm: () => Promise<void> | void\n}\n\nexport function ConfirmationModal(props: ConfirmationModalProps) {\n  const {\n    body,\n    cancelLabel,\n    className,\n    confirmingLabel,\n    confirmLabel,\n    heading,\n    modalSlug,\n    onCancel,\n    onConfirm,\n  } = props\n\n  return (\n    <DialogModal className={className} slug={modalSlug}>\n      <DialogHeader showClose title={heading} />\n      <DialogBody>\n        <div className=\"confirmation-modal__body\">\n          {typeof body === 'string' ? <p>{body}</p> : body}\n        </div>\n      </DialogBody>\n      <DialogFooter>\n        <DialogCancel label={cancelLabel} onClick={onCancel} />\n        <DialogConfirm label={confirmLabel} loadingLabel={confirmingLabel} onClick={onConfirm} />\n      </DialogFooter>\n    </DialogModal>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,SACEC,UAAU,EACVC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,YAAY,EACZC,WAAW,QACN;AACP,OAAO;AAgBP,OAAO,SAASC,kBAAkBC,KAA6B;EAC7D,MAAM;IACJC,IAAI;IACJC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC;EAAS,CACV,GAAGT,KAAA;EAEJ,oBACEU,KAAA,CAACZ,WAAA;IAAYK,SAAA,EAAWA,SAAA;IAAWQ,IAAA,EAAMJ,SAAA;4BACvCK,IAAA,CAACf,YAAA;MAAagB,SAAS;MAACC,KAAA,EAAOR;qBAC/BM,IAAA,CAACnB,UAAA;gBACC,aAAAmB,IAAA,CAAC;QAAIT,SAAA,EAAU;kBACZ,OAAOF,IAAA,KAAS,wBAAWW,IAAA,CAAC;oBAAGX;aAAYA;;qBAGhDS,KAAA,CAACd,YAAA;8BACCgB,IAAA,CAAClB,YAAA;QAAaqB,KAAA,EAAOb,WAAA;QAAac,OAAA,EAASR;uBAC3CI,IAAA,CAACjB,aAAA;QAAcoB,KAAA,EAAOV,YAAA;QAAcY,YAAA,EAAcb,eAAA;QAAiBY,OAAA,EAASP;;;;AAIpF","ignoreList":[]}

package/dist/elements/CopyLocaleData/index.js

@@ -17,9 +17,9 @@ import { useRouter } from '../../providers/RouterAdapter/index.js';
 import { useRouteTransition } from '../../providers/RouteTransition/index.js';
 import { useServerFunctions } from '../../providers/ServerFunctions/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { DrawerHeader } from '../BulkUpload/Header/index.js';
 import { Button } from '../Button/index.js';
 import { Drawer } from '../Drawer/index.js';
+import { DrawerHeader } from '../DrawerHeader/index.js';
 import { PopupList } from '../Popup/index.js';
 import './index.css';
 const baseClass = 'copy-locale-data';