@payloadcms/ui 4.0.0-internal.d28e9fb → 4.0.0-internal.d7d662c

package/dist/elements/Collapsible/provider.js

@@ -1,5 +1,6 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { createContext, use } from 'react';
 const Context = /*#__PURE__*/createContext({
@@ -8,28 +9,50 @@ const Context = /*#__PURE__*/createContext({
   isWithinCollapsible: undefined,
   toggle: () => {}
 });
-export const CollapsibleProvider = ({
-  children,
-  isCollapsed,
-  isWithinCollapsible = true,
-  toggle
-}) => {
+export const CollapsibleProvider = t0 => {
+  const $ = _c(8);
+  const {
+    children,
+    isCollapsed,
+    isWithinCollapsible: t1,
+    toggle
+  } = t0;
+  const isWithinCollapsible = t1 === undefined ? true : t1;
   const {
     isCollapsed: parentIsCollapsed,
     isVisible
   } = useCollapsible();
-  const contextValue = React.useMemo(() => {
-    return {
+  const t2 = isVisible && !parentIsCollapsed;
+  let t3;
+  if ($[0] !== isCollapsed || $[1] !== isWithinCollapsible || $[2] !== t2 || $[3] !== toggle) {
+    t3 = {
       isCollapsed,
-      isVisible: isVisible && !parentIsCollapsed,
+      isVisible: t2,
       isWithinCollapsible,
       toggle
     };
-  }, [isCollapsed, isWithinCollapsible, toggle, parentIsCollapsed, isVisible]);
-  return /*#__PURE__*/_jsx(Context, {
-    value: contextValue,
-    children: children
-  });
+    $[0] = isCollapsed;
+    $[1] = isWithinCollapsible;
+    $[2] = t2;
+    $[3] = toggle;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const contextValue = t3;
+  let t4;
+  if ($[5] !== children || $[6] !== contextValue) {
+    t4 = _jsx(Context, {
+      value: contextValue,
+      children
+    });
+    $[5] = children;
+    $[6] = contextValue;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  return t4;
 };
 export const useCollapsible = () => use(Context);
 //# sourceMappingURL=provider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"provider.js","names":["React","createContext","use","Context","isCollapsed","undefined","isVisible","isWithinCollapsible","toggle","CollapsibleProvider","children","parentIsCollapsed","useCollapsible","contextValue","useMemo","_jsx","value"],"sources":["../../../src/elements/Collapsible/provider.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, use } from 'react'\n\ntype ContextType = {\n  isCollapsed: boolean\n  isVisible: boolean\n  isWithinCollapsible: boolean\n  toggle: () => void\n}\n\nconst Context = createContext({\n  isCollapsed: undefined,\n  isVisible: undefined,\n  isWithinCollapsible: undefined,\n  toggle: () => {},\n} as ContextType)\n\nexport const CollapsibleProvider: React.FC<{\n  children?: React.ReactNode\n  isCollapsed?: boolean\n  isWithinCollapsible?: boolean\n  toggle: () => void\n}> = ({ children, isCollapsed, isWithinCollapsible = true, toggle }) => {\n  const { isCollapsed: parentIsCollapsed, isVisible } = useCollapsible()\n\n  const contextValue = React.useMemo((): ContextType => {\n    return {\n      isCollapsed,\n      isVisible: isVisible && !parentIsCollapsed,\n      isWithinCollapsible,\n      toggle,\n    }\n  }, [isCollapsed, isWithinCollapsible, toggle, parentIsCollapsed, isVisible])\n\n  return <Context value={contextValue}>{children}</Context>\n}\n\nexport const useCollapsible = (): ContextType => use(Context)\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,aAAa,EAAEC,GAAG,QAAQ;AAS1C,MAAMC,OAAA,gBAAUF,aAAA,CAAc;EAC5BG,WAAA,EAAaC,SAAA;EACbC,SAAA,EAAWD,SAAA;EACXE,mBAAA,EAAqBF,SAAA;EACrBG,MAAA,EAAQA,CAAA,MAAO;AACjB;AAEA,OAAO,MAAMC,mBAAA,GAKRA,CAAC;EAAEC,QAAQ;EAAEN,WAAW;EAAEG,mBAAA,GAAsB,IAAI;EAAEC;AAAM,CAAE;EACjE,MAAM;IAAEJ,WAAA,EAAaO,iBAAiB;IAAEL;EAAS,CAAE,GAAGM,cAAA;EAEtD,MAAMC,YAAA,GAAeb,KAAA,CAAMc,OAAO,CAAC;IACjC,OAAO;MACLV,WAAA;MACAE,SAAA,EAAWA,SAAA,IAAa,CAACK,iBAAA;MACzBJ,mBAAA;MACAC;IACF;EACF,GAAG,CAACJ,WAAA,EAAaG,mBAAA,EAAqBC,MAAA,EAAQG,iBAAA,EAAmBL,SAAA,CAAU;EAE3E,oBAAOS,IAAA,CAACZ,OAAA;IAAQa,KAAA,EAAOH,YAAA;cAAeH;;AACxC;AAEA,OAAO,MAAME,cAAA,GAAiBA,CAAA,KAAmBV,GAAA,CAAIC,OAAA","ignoreList":[]}
+{"version":3,"file":"provider.js","names":["c","_c","React","createContext","use","Context","isCollapsed","undefined","isVisible","isWithinCollapsible","toggle","CollapsibleProvider","t0","$","children","t1","parentIsCollapsed","useCollapsible","t2","t3","contextValue","t4","_jsx","value"],"sources":["../../../src/elements/Collapsible/provider.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, use } from 'react'\n\ntype ContextType = {\n  isCollapsed: boolean\n  isVisible: boolean\n  isWithinCollapsible: boolean\n  toggle: () => void\n}\n\nconst Context = createContext({\n  isCollapsed: undefined,\n  isVisible: undefined,\n  isWithinCollapsible: undefined,\n  toggle: () => {},\n})\n\nexport const CollapsibleProvider: React.FC<{\n  children?: React.ReactNode\n  isCollapsed?: boolean\n  isWithinCollapsible?: boolean\n  toggle: () => void\n}> = ({ children, isCollapsed, isWithinCollapsible = true, toggle }) => {\n  const { isCollapsed: parentIsCollapsed, isVisible } = useCollapsible()\n\n  const contextValue = React.useMemo((): ContextType => {\n    return {\n      isCollapsed,\n      isVisible: isVisible && !parentIsCollapsed,\n      isWithinCollapsible,\n      toggle,\n    }\n  }, [isCollapsed, isWithinCollapsible, toggle, parentIsCollapsed, isVisible])\n\n  return <Context value={contextValue}>{children}</Context>\n}\n\nexport const useCollapsible = (): ContextType => use(Context)\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,aAAa,EAAEC,GAAG,QAAQ;AAS1C,MAAMC,OAAA,gBAAUF,aAAA,CAAc;EAC5BG,WAAA,EAAaC,SAAA;EACbC,SAAA,EAAWD,SAAA;EACXE,mBAAA,EAAqBF,SAAA;EACrBG,MAAA,EAAQA,CAAA,MAAO;AACjB;AAEA,OAAO,MAAMC,mBAAA,GAKRC,EAAA;EAAA,MAAAC,CAAA,GAAAZ,EAAA;EAAC;IAAAa,QAAA;IAAAR,WAAA;IAAAG,mBAAA,EAAAM,EAAA;IAAAL;EAAA,IAAAE,EAA6D;EAApC,MAAAH,mBAAA,GAAAM,EAA0B,KAA1BR,SAA0B,GAA1B,IAA0B,GAA1BQ,EAA0B;EACvD;IAAAT,WAAA,EAAAU,iBAAA;IAAAR;EAAA,IAAsDS,cAAA;EAKvC,MAAAC,EAAA,GAAAV,SAAc,IAAd,CAAcQ,iBAAA;EAAA,IAAAG,EAAA;EAAA,IAAAN,CAAA,QAAAP,WAAA,IAAAO,CAAA,QAAAJ,mBAAA,IAAAI,CAAA,QAAAK,EAAA,IAAAL,CAAA,QAAAH,MAAA;IAFpBS,EAAA;MAAAb,WAAA;MAAAE,SAAA,EAEMU,EAAc;MAAAT,mBAAA;MAAAC;IAG3B;IAAAG,CAAA,MAAAP,WAAA;IAAAO,CAAA,MAAAJ,mBAAA;IAAAI,CAAA,MAAAK,EAAA;IAAAL,CAAA,MAAAH,MAAA;IAAAG,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EANF,MAAAO,YAAA,GACED,EAKA;EACyE,IAAAE,EAAA;EAAA,IAAAR,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAO,YAAA;IAEpEC,EAAA,GAAAC,IAAA,CAACjB,OAAA;MAAAkB,KAAA,EAAeH,YAAA;MAAAN;;;;;;;;SAAhBO,E;CACT;AAEA,OAAO,MAAMJ,cAAA,GAAiBA,CAAA,KAAmBb,GAAA,CAAIC,OAAA","ignoreList":[]}

package/dist/elements/ColumnSelection/Popup.css

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

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;AA0DD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAmOpE,CAAA"}

package/dist/elements/ColumnSelection/Popup.js

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