pne-ui 4.4.0 → 4.5.0-rc.1

package/README.md

@@ -690,6 +690,66 @@ remount. В controlled-режиме lifetime принадлежит consumer: е
 экрана, consumer сам должен очистить его при navigation/remount. Строковое представление applied scope остаётся
 в памяти библиотеки и не выводится в DOM/storage.
 
+#### Настройка колонок
+
+Пользовательский состав колонок для одного view таблицы. Библиотека не знает, где хранится настройка:
+consumer передаёт загруженное значение и колбэк сохранения, а получает упорядоченный список видимых колонок.
+
+- Каталог — массив `PneTableColumnOption` (`id`, текстовый `label`, `defaultVisible`) в порядке по умолчанию.
+  `id` стабилен и не зависит от языка и позиции; поля consumer-типа (например, `render`) сохраняются
+  в `visibleColumns`.
+- Значение `PneTableColumnSettingsValue` — `visibleColumnIds` в порядке отображения и `hiddenColumnIds`.
+  Колонки каталога, отсутствующие в обоих списках, считаются новыми и показываются; неизвестные `id`
+  отбрасываются; значение без видимых колонок заменяется умолчанием.
+- `usePneTableColumnSettings({columns, value, onSave})` сверяет значение с каталогом и владеет состоянием
+  окна. Для нескольких view создавайте по одному хуку на view.
+- `PneTableColumnSettingsAction` — кнопка вызова (`variant='icon'` для слота `actions` селектора view,
+  `variant='button'` для широкой панели). `PneTableColumnSettingsDialog` — модальное окно: поиск, один
+  чеклист по каталогу, «Reset to default», «Cancel», «Save». Последняя видимая колонка не снимается.
+- Видимые колонки переставляются перетаскиванием за отдельную ручку (мышь, клавиатура: Space, стрелки,
+  Space; тач без задержки). Ручки показываются только у видимых колонок и только без активного поиска;
+  `reorderable={false}` отключает перестановку. Скрытые колонки идут в конце списка без ручек.
+- `onSave` получает нормализованное значение. Окно закрывается после resolve; при reject остаётся открытым
+  с черновиком, сообщение об ошибке показывает consumer.
+- Служебные колонки (выбор строки, действия) в каталог не входят: рендерьте их рядом с `visibleColumns`.
+
+```tsx
+const columns = [
+    {id: 'id', label: 'ID'},
+    {id: 'name', label: 'Name'},
+    {id: 'email', label: 'Email', defaultVisible: false},
+] as const satisfies readonly PneTableColumnOption[]
+
+const settings = usePneTableColumnSettings({
+    columns,
+    value: storedValue,            // PneTableColumnSettingsValue | undefined
+    onSave: value => api.save(value),
+})
+
+<PneTable<Row>
+    autoTestId="items"
+    data={rows}
+    toolbar={<PneTableToolbar
+        aria-label="Items table controls"
+        persistent={<PneTableColumnSettingsAction autoTestId="items" onClick={settings.openDialog}/>}
+    />}
+    createTableHeader={() => <PneTableRow>
+        {settings.visibleColumns.map(column => (
+            <PneHeaderTableCell key={column.id}>{column.label}</PneHeaderTableCell>
+        ))}
+    </PneTableRow>}
+    createRow={row => <PneTableRow key={row.id}>
+        {settings.visibleColumns.map(column => (
+            <PneTableCell key={column.id}>{row[column.id]}</PneTableCell>
+        ))}
+    </PneTableRow>}
+/>
+<PneTableColumnSettingsDialog {...settings.dialogProps} autoTestId="items"/>
+```
+
+Ключи локализации задаются в библиотеке с английским `defaultValue`: `pneTable.columnSettings.action`,
+`.title`, `.search`, `.reset`, `.cancel`, `.save`, `.noMatches`, `.lastVisible`, `.reorder` (с `{{name}}`).
+
 ### SearchUI и SearchUIFilters
 
 Передавайте стабильный несекретный `autoTestId` как Selenium scope поискового интерфейса. Если prop не задан,
@@ -869,6 +929,11 @@ assertEquals("true", enabled.getAttribute("aria-pressed"));
 | Пустой результат | `[data-autotest="empty-state"]` | Наличие существующей empty row |
 | Загрузка | Semantic `table` | `aria-busy="true|false"` |
 | Активная сортировка | `th[aria-sort="ascending"], th[aria-sort="descending"]` | Значение `aria-sort` |
+| Кнопка настройки колонок | `[data-autotest="column-settings"][data-autotest-value="<scope>"]` | Native button `disabled`; `<scope>` задаёт consumer через `autoTestId` |
+| Окно настройки колонок | `[data-autotest="column-settings-dialog"][data-autotest-value="<scope>"]` | Существование `role="dialog"`; внутри `column-settings-search`, `column-settings-reset`, `column-settings-cancel`, `column-settings-save` |
+| Колонка в окне настройки | `input[data-autotest="column-settings-option"][data-autotest-value="<columnId>"]` | Native `checked`, `disabled`; порядок в DOM = порядок отображения, скрытые в конце |
+| Ручка перестановки колонки | `button[data-autotest="column-settings-reorder"][data-autotest-value="<columnId>"]` | Есть только у видимых колонок без активного поиска; keyboard: Space, ArrowUp/ArrowDown, Space |
+| Пустой поиск по колонкам | `[data-autotest="column-settings-empty"]` | Наличие строки |
 
 Внутри каждого `pagination/top|bottom` уже существуют:
 

package/cjs/component/table/column-settings/PneTableColumnSettingsAction.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { SxProps, Theme } from '@mui/material';
+export declare const COLUMN_SETTINGS_ACTION_AUTOTEST_ID = "column-settings";
+export type PneTableColumnSettingsActionProps = {
+    /** Opens the column settings dialog. */
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * `icon` renders a 40px icon button with a tooltip and fits the
+     * `PneTableViewSelector` actions slot. `button` renders an outlined text
+     * button with the icon for wide layouts. Defaults to `icon`.
+     */
+    variant?: 'icon' | 'button';
+    /** Accessible name and visible text; defaults to the localized "Table settings". */
+    label?: string;
+    disabled?: boolean;
+    /** Stable, non-secret instance identifier used to scope Selenium locators. */
+    autoTestId?: string;
+    sx?: SxProps<Theme>;
+};
+/**
+ * Entry point to the column settings dialog. Place it in the table toolbar or
+ * in the view selector `actions` slot next to the view it configures.
+ */
+declare const PneTableColumnSettingsAction: React.ForwardRefExoticComponent<PneTableColumnSettingsActionProps & React.RefAttributes<HTMLButtonElement>>;
+export default PneTableColumnSettingsAction;

package/cjs/component/table/column-settings/PneTableColumnSettingsAction.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COLUMN_SETTINGS_ACTION_AUTOTEST_ID = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const SettingsOutlined_1 = tslib_1.__importDefault(require("@mui/icons-material/SettingsOutlined"));
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const PneButton_1 = tslib_1.__importDefault(require("../../PneButton"));
+const AutoTestAttribute_1 = require("../../AutoTestAttribute");
+exports.COLUMN_SETTINGS_ACTION_AUTOTEST_ID = 'column-settings';
+const iconButtonSx = {
+    borderRadius: '4px',
+    height: '40px',
+    padding: '8px',
+    width: '40px',
+};
+/**
+ * Entry point to the column settings dialog. Place it in the table toolbar or
+ * in the view selector `actions` slot next to the view it configures.
+ */
+const PneTableColumnSettingsAction = (0, react_1.forwardRef)(function PneTableColumnSettingsAction(props, ref) {
+    const { autoTestId, disabled = false, label, onClick, sx, variant = 'icon', } = props;
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const resolvedLabel = label ?? t('pneTable.columnSettings.action', { defaultValue: 'Table settings' });
+    if (variant === 'button') {
+        return react_1.default.createElement(PneButton_1.default, { ...(0, AutoTestAttribute_1.createAutoTestAttributes)(exports.COLUMN_SETTINGS_ACTION_AUTOTEST_ID, autoTestId), disabled: disabled, onClick: onClick, pneStyle: 'outlined', ref: ref, startIcon: react_1.default.createElement(SettingsOutlined_1.default, null), sx: sx }, resolvedLabel);
+    }
+    return react_1.default.createElement(material_1.Tooltip, { enterDelay: 300, enterNextDelay: 300, title: resolvedLabel },
+        react_1.default.createElement("span", null,
+            react_1.default.createElement(material_1.IconButton, { ...(0, AutoTestAttribute_1.createAutoTestAttributes)(exports.COLUMN_SETTINGS_ACTION_AUTOTEST_ID, autoTestId), "aria-label": resolvedLabel, disabled: disabled, onClick: onClick, ref: ref, size: 'small', sx: [
+                    iconButtonSx,
+                    ...(Array.isArray(sx) ? sx : [sx]),
+                ] },
+                react_1.default.createElement(SettingsOutlined_1.default, { sx: { height: '16px', width: '16px' } }))));
+});
+exports.default = PneTableColumnSettingsAction;
+//# sourceMappingURL=PneTableColumnSettingsAction.js.map

package/cjs/component/table/column-settings/PneTableColumnSettingsAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PneTableColumnSettingsAction.js","sourceRoot":"","sources":["../../../../src/component/table/column-settings/PneTableColumnSettingsAction.tsx"],"names":[],"mappings":";;;;AAAA,uDAAuC;AACvC,oGAAuE;AACvE,4CAAiE;AACjE,iDAA4C;AAC5C,wEAAuC;AACvC,+DAAgE;AAEnD,QAAA,kCAAkC,GAAG,iBAAiB,CAAA;AAmBnE,MAAM,YAAY,GAAmB;IACjC,YAAY,EAAE,KAAK;IACnB,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,KAAK;IACd,KAAK,EAAE,MAAM;CAChB,CAAA;AAED;;;GAGG;AACH,MAAM,4BAA4B,GAAG,IAAA,kBAAU,EAC3C,SAAS,4BAA4B,CAAC,KAAK,EAAE,GAAG;IAC5C,MAAM,EACF,UAAU,EACV,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,OAAO,EACP,EAAE,EACF,OAAO,GAAG,MAAM,GACnB,GAAG,KAAK,CAAA;IACT,MAAM,EAAC,CAAC,EAAC,GAAG,IAAA,8BAAc,GAAE,CAAA;IAC5B,MAAM,aAAa,GAAG,KAAK,IAAI,CAAC,CAAC,gCAAgC,EAAE,EAAC,YAAY,EAAE,gBAAgB,EAAC,CAAC,CAAA;IAEpG,IAAI,OAAO,KAAK,QAAQ,EAAE,CAAC;QACvB,OAAO,8BAAC,mBAAS,OACT,IAAA,4CAAwB,EAAC,0CAAkC,EAAE,UAAU,CAAC,EAC5E,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAC,UAAU,EACnB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,8BAAC,0BAAoB,OAAE,EAClC,EAAE,EAAE,EAAE,IAEL,aAAa,CACN,CAAA;IAChB,CAAC;IAED,OAAO,8BAAC,kBAAO,IACX,UAAU,EAAE,GAAG,EACf,cAAc,EAAE,GAAG,EACnB,KAAK,EAAE,aAAa;QAEpB;YACI,8BAAC,qBAAU,OACH,IAAA,4CAAwB,EAAC,0CAAkC,EAAE,UAAU,CAAC,gBAChE,aAAa,EACzB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE;oBACA,YAAY;oBACZ,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;iBACrC;gBAED,8BAAC,0BAAoB,IAAC,EAAE,EAAE,EAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAC,GAAG,CACnD,CACV,CACD,CAAA;AACd,CAAC,CACJ,CAAA;AAED,kBAAe,4BAA4B,CAAA"}

package/cjs/component/table/column-settings/PneTableColumnSettingsDialog.d.ts

@@ -0,0 +1,48 @@
+import React, { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material';
+import type { PneTableColumnOption, PneTableColumnSettingsValue } from './types';
+export declare const COLUMN_SETTINGS_DIALOG_AUTOTEST_ID = "column-settings-dialog";
+export declare const COLUMN_SETTINGS_SEARCH_AUTOTEST_ID = "column-settings-search";
+export declare const COLUMN_SETTINGS_OPTION_AUTOTEST_ID = "column-settings-option";
+export declare const COLUMN_SETTINGS_REORDER_AUTOTEST_ID = "column-settings-reorder";
+export declare const COLUMN_SETTINGS_EMPTY_AUTOTEST_ID = "column-settings-empty";
+export declare const COLUMN_SETTINGS_RESET_AUTOTEST_ID = "column-settings-reset";
+export declare const COLUMN_SETTINGS_CANCEL_AUTOTEST_ID = "column-settings-cancel";
+export declare const COLUMN_SETTINGS_SAVE_AUTOTEST_ID = "column-settings-save";
+export type PneTableColumnSettingsDialogProps<TColumn extends PneTableColumnOption = PneTableColumnOption> = {
+    open: boolean;
+    /** Called on Cancel, on the close button, on backdrop/Escape, and after a successful save. */
+    onClose: () => void;
+    /** Column catalog of the configured table view, in default display order. */
+    columns: readonly TColumn[];
+    /** Stored preference; `undefined` or `null` means the catalog defaults. */
+    value?: PneTableColumnSettingsValue | null;
+    /**
+     * Receives the normalized draft on Save. The dialog closes once the returned
+     * promise resolves. A rejected promise keeps the dialog open with the draft
+     * intact; reporting that failure to the user is the caller's job.
+     */
+    onSave: (value: PneTableColumnSettingsValue) => void | Promise<void>;
+    /** Stable, non-secret instance identifier used to scope Selenium locators. */
+    autoTestId?: string;
+    /** Defaults to the localized "Table settings". */
+    title?: ReactNode;
+    /** Set to false to drop the search field for short catalogs. Defaults to true. */
+    searchable?: boolean;
+    /**
+     * Lets the user drag visible columns into a new display order. Grips are
+     * shown only for visible columns and only while the list is not filtered.
+     * Defaults to true.
+     */
+    reorderable?: boolean;
+    containerSx?: SxProps<Theme>;
+};
+/**
+ * Modal editor for the visible column set of one table view: a searchable
+ * checklist over the catalog with drag reordering of visible columns,
+ * "Reset to default", "Cancel" and "Save". The draft is created when the
+ * dialog opens and discarded when it closes, so a reopened dialog always
+ * starts from the current `value`.
+ */
+declare const PneTableColumnSettingsDialog: <TColumn extends PneTableColumnOption = PneTableColumnOption>(props: PneTableColumnSettingsDialogProps<TColumn>) => React.JSX.Element | null;
+export default PneTableColumnSettingsDialog;

package/cjs/component/table/column-settings/PneTableColumnSettingsDialog.js

@@ -0,0 +1,213 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COLUMN_SETTINGS_SAVE_AUTOTEST_ID = exports.COLUMN_SETTINGS_CANCEL_AUTOTEST_ID = exports.COLUMN_SETTINGS_RESET_AUTOTEST_ID = exports.COLUMN_SETTINGS_EMPTY_AUTOTEST_ID = exports.COLUMN_SETTINGS_REORDER_AUTOTEST_ID = exports.COLUMN_SETTINGS_OPTION_AUTOTEST_ID = exports.COLUMN_SETTINGS_SEARCH_AUTOTEST_ID = exports.COLUMN_SETTINGS_DIALOG_AUTOTEST_ID = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const material_1 = require("@mui/material");
+const DragIndicator_1 = tslib_1.__importDefault(require("@mui/icons-material/DragIndicator"));
+const dnd_1 = require("@hello-pangea/dnd");
+const react_i18next_1 = require("react-i18next");
+const PneModal_1 = tslib_1.__importDefault(require("../../PneModal"));
+const PneModalActions_1 = tslib_1.__importDefault(require("../../PneModalActions"));
+const PneButton_1 = tslib_1.__importDefault(require("../../PneButton"));
+const PneCheckbox_1 = require("../../PneCheckbox");
+const PneTextField_1 = tslib_1.__importDefault(require("../../PneTextField"));
+const AutoTestAttribute_1 = require("../../AutoTestAttribute");
+const useImmediateTouchSensor_1 = tslib_1.__importDefault(require("../../non-abstract-entity-selector/useImmediateTouchSensor"));
+const resolveColumnSettings_1 = require("./resolveColumnSettings");
+exports.COLUMN_SETTINGS_DIALOG_AUTOTEST_ID = 'column-settings-dialog';
+exports.COLUMN_SETTINGS_SEARCH_AUTOTEST_ID = 'column-settings-search';
+exports.COLUMN_SETTINGS_OPTION_AUTOTEST_ID = 'column-settings-option';
+exports.COLUMN_SETTINGS_REORDER_AUTOTEST_ID = 'column-settings-reorder';
+exports.COLUMN_SETTINGS_EMPTY_AUTOTEST_ID = 'column-settings-empty';
+exports.COLUMN_SETTINGS_RESET_AUTOTEST_ID = 'column-settings-reset';
+exports.COLUMN_SETTINGS_CANCEL_AUTOTEST_ID = 'column-settings-cancel';
+exports.COLUMN_SETTINGS_SAVE_AUTOTEST_ID = 'column-settings-save';
+const DROPPABLE_ID = 'pne-table-column-settings';
+/** Mouse, keyboard and immediate touch dragging on the dedicated grip. */
+const reorderSensors = [dnd_1.useMouseSensor, dnd_1.useKeyboardSensor, useImmediateTouchSensor_1.default];
+const listSx = {
+    maxHeight: '320px',
+    overflowY: 'auto',
+    padding: 0,
+};
+const itemSx = {
+    alignItems: 'stretch',
+    display: 'flex',
+    padding: 0,
+};
+const itemButtonSx = {
+    borderRadius: '4px',
+    flex: 1,
+    minHeight: '40px',
+    minWidth: 0,
+    paddingBottom: '2px',
+    paddingLeft: '4px',
+    paddingRight: '8px',
+    paddingTop: '2px',
+};
+const gripSx = {
+    borderRadius: '4px',
+    cursor: 'grab',
+    flexShrink: 0,
+    minHeight: '40px',
+    padding: 0,
+    width: '32px',
+    '@media (pointer: coarse)': { width: '44px' },
+    '&.Mui-focusVisible': {
+        outline: '2px solid',
+        outlineColor: 'primary.main',
+        outlineOffset: -2,
+    },
+};
+const normalizeSearch = (value) => value.trim().toLocaleLowerCase();
+const ColumnSettingsForm = (props) => {
+    const { autoTestId, columns, containerSx, onClose, onSave, reorderable = true, searchable = true, title, value, } = props;
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const initial = (0, react_1.useMemo)(() => (0, resolveColumnSettings_1.resolvePneTableColumnSettings)(columns, value), [columns, value]);
+    const [draft, setDraft] = (0, react_1.useState)(initial.value);
+    const [search, setSearch] = (0, react_1.useState)('');
+    const [saving, setSaving] = (0, react_1.useState)(false);
+    const mountedRef = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(() => () => {
+        mountedRef.current = false;
+    }, []);
+    const resolvedDraft = (0, react_1.useMemo)(() => (0, resolveColumnSettings_1.resolvePneTableColumnSettings)(columns, draft), [columns, draft]);
+    const items = (0, react_1.useMemo)(() => [
+        ...resolvedDraft.visibleColumns.map(column => ({ column, visible: true })),
+        ...resolvedDraft.hiddenColumns.map(column => ({ column, visible: false })),
+    ], [resolvedDraft]);
+    const normalizedSearch = normalizeSearch(search);
+    const filtering = normalizedSearch !== '';
+    const filteredItems = filtering
+        ? items.filter(item => normalizeSearch(item.column.label).includes(normalizedSearch))
+        : items;
+    const lastVisibleId = resolvedDraft.visibleColumns.length === 1
+        ? resolvedDraft.visibleColumns[0].id
+        : null;
+    const visibleCount = resolvedDraft.visibleColumns.length;
+    const dragEnabled = reorderable && !saving && !filtering && visibleCount > 1;
+    const toggle = (id) => {
+        setDraft(current => {
+            const visible = current.visibleColumnIds.includes(id);
+            if (visible) {
+                if (current.visibleColumnIds.length <= 1) {
+                    return current;
+                }
+                return {
+                    visibleColumnIds: current.visibleColumnIds.filter(columnId => columnId !== id),
+                    hiddenColumnIds: [...current.hiddenColumnIds, id],
+                };
+            }
+            return {
+                visibleColumnIds: [...current.visibleColumnIds, id],
+                hiddenColumnIds: current.hiddenColumnIds.filter(columnId => columnId !== id),
+            };
+        });
+    };
+    const handleDragEnd = (result) => {
+        const { destination, source } = result;
+        if (!destination || destination.droppableId !== DROPPABLE_ID) {
+            return;
+        }
+        // Visible columns occupy the leading list slots in draft order, so list
+        // indices map onto visibleColumnIds; hidden rows are not a valid target.
+        const target = Math.min(destination.index, visibleCount - 1);
+        if (source.index >= visibleCount || target === source.index) {
+            return;
+        }
+        setDraft(current => {
+            const visible = [...current.visibleColumnIds];
+            const [moved] = visible.splice(source.index, 1);
+            visible.splice(target, 0, moved);
+            return { ...current, visibleColumnIds: visible };
+        });
+    };
+    const handleReset = () => {
+        setDraft((0, resolveColumnSettings_1.createDefaultPneTableColumnSettings)(columns));
+    };
+    const handleSave = async () => {
+        if (saving) {
+            return;
+        }
+        setSaving(true);
+        try {
+            await onSave(resolvedDraft.value);
+            if (mountedRef.current) {
+                setSaving(false);
+            }
+            onClose();
+        }
+        catch {
+            // The consumer reports the failure; the draft stays editable.
+            if (mountedRef.current) {
+                setSaving(false);
+            }
+        }
+    };
+    const actionLabel = t('pneTable.columnSettings.title', { defaultValue: 'Table settings' });
+    const searchLabel = t('pneTable.columnSettings.search', { defaultValue: 'Search columns' });
+    const lastVisibleHint = t('pneTable.columnSettings.lastVisible', {
+        defaultValue: 'At least one column stays visible',
+    });
+    return react_1.default.createElement(PneModal_1.default, { ...(0, AutoTestAttribute_1.createAutoTestAttributes)(exports.COLUMN_SETTINGS_DIALOG_AUTOTEST_ID, autoTestId), actions: react_1.default.createElement(PneModalActions_1.default, { leading: react_1.default.createElement(PneButton_1.default, { ...(0, AutoTestAttribute_1.createAutoTestAttributes)(exports.COLUMN_SETTINGS_RESET_AUTOTEST_ID), disabled: saving || resolvedDraft.isDefault, onClick: handleReset, pneStyle: 'outlined' }, t('pneTable.columnSettings.reset', { defaultValue: 'Reset to default' })), primary: react_1.default.createElement(PneButton_1.default, { ...(0, AutoTestAttribute_1.createAutoTestAttributes)(exports.COLUMN_SETTINGS_SAVE_AUTOTEST_ID), disabled: saving, onClick: () => {
+                    void handleSave();
+                } }, t('pneTable.columnSettings.save', { defaultValue: 'Save' })), secondary: react_1.default.createElement(PneButton_1.default, { ...(0, AutoTestAttribute_1.createAutoTestAttributes)(exports.COLUMN_SETTINGS_CANCEL_AUTOTEST_ID), disabled: saving, onClick: onClose, pneStyle: 'outlined' }, t('pneTable.columnSettings.cancel', { defaultValue: 'Cancel' })) }), containerSx: [
+            { maxWidth: '100%', width: '480px' },
+            ...(Array.isArray(containerSx) ? containerSx : [containerSx]),
+        ], onClose: () => {
+            if (!saving) {
+                onClose();
+            }
+        }, open: true, title: title ?? actionLabel },
+        react_1.default.createElement(material_1.Box, { sx: { display: 'flex', flexDirection: 'column', gap: '12px' } },
+            searchable ? react_1.default.createElement(PneTextField_1.default, { autoComplete: 'off', fullWidth: true, label: searchLabel, onChange: event => setSearch(event.target.value), slotProps: {
+                    htmlInput: (0, AutoTestAttribute_1.createAutoTestAttributes)(exports.COLUMN_SETTINGS_SEARCH_AUTOTEST_ID),
+                }, type: 'search', value: search }) : null,
+            react_1.default.createElement(dnd_1.DragDropContext, { enableDefaultSensors: false, onDragEnd: handleDragEnd, sensors: reorderSensors },
+                react_1.default.createElement(dnd_1.Droppable, { droppableId: DROPPABLE_ID, isDropDisabled: !dragEnabled }, droppable => react_1.default.createElement(material_1.List, { ...droppable.droppableProps, "aria-label": actionLabel, dense: true, ref: droppable.innerRef, sx: listSx },
+                    filteredItems.map(({ column, visible }, index) => {
+                        const locked = visible && column.id === lastVisibleId;
+                        const labelId = `pne-column-settings-${column.id}`;
+                        const draggable = dragEnabled && visible;
+                        const reorderLabel = t('pneTable.columnSettings.reorder', {
+                            name: column.label,
+                            defaultValue: 'Reorder {{name}}',
+                        });
+                        return react_1.default.createElement(dnd_1.Draggable
+                        // The grip is a real button; without this the library refuses to lift from it.
+                        , { 
+                            // The grip is a real button; without this the library refuses to lift from it.
+                            disableInteractiveElementBlocking: true, draggableId: column.id, index: index, isDragDisabled: !draggable, key: column.id }, provided => react_1.default.createElement(material_1.ListItem, { ...provided.draggableProps, ref: provided.innerRef, style: provided.draggableProps.style, sx: itemSx },
+                            react_1.default.createElement(material_1.ListItemButton, { dense: true, disabled: saving || locked, onClick: () => toggle(column.id), sx: itemButtonSx, title: locked ? lastVisibleHint : undefined },
+                                react_1.default.createElement(material_1.ListItemIcon, { sx: { minWidth: '36px' } },
+                                    react_1.default.createElement(PneCheckbox_1.PneCheckbox, { checked: visible, disabled: saving || locked, disableRipple: true, edge: 'start', slotProps: {
+                                            input: {
+                                                ...(0, AutoTestAttribute_1.createAutoTestAttributes)(exports.COLUMN_SETTINGS_OPTION_AUTOTEST_ID, column.id),
+                                                'aria-labelledby': labelId,
+                                            },
+                                        }, tabIndex: -1 })),
+                                react_1.default.createElement(material_1.ListItemText, { id: labelId, primary: column.label, slotProps: { primary: { noWrap: true } } })),
+                            draggable && provided.dragHandleProps ? react_1.default.createElement(material_1.IconButton, { ...provided.dragHandleProps, ...(0, AutoTestAttribute_1.createAutoTestAttributes)(exports.COLUMN_SETTINGS_REORDER_AUTOTEST_ID, column.id), "aria-label": reorderLabel, disableRipple: true, style: { touchAction: 'none' }, sx: gripSx, type: 'button' },
+                                react_1.default.createElement(DragIndicator_1.default, { fontSize: 'small' })) : null));
+                    }),
+                    droppable.placeholder,
+                    filteredItems.length === 0 ? react_1.default.createElement(material_1.ListItem, { ...(0, AutoTestAttribute_1.createAutoTestAttributes)(exports.COLUMN_SETTINGS_EMPTY_AUTOTEST_ID), sx: { justifyContent: 'center', minHeight: '40px' } },
+                        react_1.default.createElement(material_1.Typography, { color: 'text.secondary', variant: 'body2' }, t('pneTable.columnSettings.noMatches', { defaultValue: 'No columns match' }))) : null)))));
+};
+/**
+ * Modal editor for the visible column set of one table view: a searchable
+ * checklist over the catalog with drag reordering of visible columns,
+ * "Reset to default", "Cancel" and "Save". The draft is created when the
+ * dialog opens and discarded when it closes, so a reopened dialog always
+ * starts from the current `value`.
+ */
+const PneTableColumnSettingsDialog = (props) => {
+    const { open, ...formProps } = props;
+    if (!open) {
+        return null;
+    }
+    return react_1.default.createElement(ColumnSettingsForm, { ...formProps });
+};
+exports.default = PneTableColumnSettingsDialog;
+//# sourceMappingURL=PneTableColumnSettingsDialog.js.map

package/cjs/component/table/column-settings/PneTableColumnSettingsDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PneTableColumnSettingsDialog.js","sourceRoot":"","sources":["../../../../src/component/table/column-settings/PneTableColumnSettingsDialog.tsx"],"names":[],"mappings":"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"}

package/cjs/component/table/column-settings/resolveColumnSettings.d.ts

@@ -0,0 +1,22 @@
+import type { PneTableColumnOption, PneTableColumnSettingsValue, PneTableResolvedColumnSettings } from './types';
+/**
+ * Throws on a catalog that cannot be configured: empty or with duplicate IDs.
+ * Column identity belongs to the consumer, so silent de-duplication would hide a bug.
+ */
+export declare const assertPneTableColumnCatalog: (columns: readonly PneTableColumnOption[]) => void;
+/** Default value for a catalog: `defaultVisible !== false` columns in catalog order, the rest hidden. */
+export declare const createDefaultPneTableColumnSettings: (columns: readonly PneTableColumnOption[]) => PneTableColumnSettingsValue;
+/**
+ * Applies a stored value to the current catalog:
+ *
+ * - IDs unknown to the catalog are dropped;
+ * - visible columns keep their stored order;
+ * - catalog columns absent from both stored lists are new since the save and
+ *   are appended as visible, in catalog order;
+ * - a value that leaves nothing visible falls back to the catalog defaults.
+ *
+ * `undefined` means "never configured" and yields the defaults.
+ */
+export declare const resolvePneTableColumnSettings: <TColumn extends PneTableColumnOption>(columns: readonly TColumn[], value: PneTableColumnSettingsValue | null | undefined) => PneTableResolvedColumnSettings<TColumn>;
+/** Structural equality of two normalized values; hidden order is irrelevant. */
+export declare const isSamePneTableColumnSettings: (left: PneTableColumnSettingsValue, right: PneTableColumnSettingsValue) => boolean;

package/cjs/component/table/column-settings/resolveColumnSettings.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isSamePneTableColumnSettings = exports.resolvePneTableColumnSettings = exports.createDefaultPneTableColumnSettings = exports.assertPneTableColumnCatalog = void 0;
+const uniqueIds = (ids) => {
+    const seen = new Set();
+    const result = [];
+    for (const id of ids) {
+        if (!seen.has(id)) {
+            seen.add(id);
+            result.push(id);
+        }
+    }
+    return result;
+};
+const sameIds = (left, right) => left.length === right.length && left.every((id, index) => id === right[index]);
+/**
+ * Throws on a catalog that cannot be configured: empty or with duplicate IDs.
+ * Column identity belongs to the consumer, so silent de-duplication would hide a bug.
+ */
+const assertPneTableColumnCatalog = (columns) => {
+    if (columns.length === 0) {
+        throw new Error('PneTable column settings: the column catalog must not be empty');
+    }
+    const seen = new Set();
+    for (const column of columns) {
+        if (seen.has(column.id)) {
+            throw new Error(`PneTable column settings: duplicate column ID "${column.id}"`);
+        }
+        seen.add(column.id);
+    }
+};
+exports.assertPneTableColumnCatalog = assertPneTableColumnCatalog;
+/** Default value for a catalog: `defaultVisible !== false` columns in catalog order, the rest hidden. */
+const createDefaultPneTableColumnSettings = (columns) => ({
+    visibleColumnIds: columns.filter(column => column.defaultVisible !== false).map(column => column.id),
+    hiddenColumnIds: columns.filter(column => column.defaultVisible === false).map(column => column.id),
+});
+exports.createDefaultPneTableColumnSettings = createDefaultPneTableColumnSettings;
+/**
+ * Applies a stored value to the current catalog:
+ *
+ * - IDs unknown to the catalog are dropped;
+ * - visible columns keep their stored order;
+ * - catalog columns absent from both stored lists are new since the save and
+ *   are appended as visible, in catalog order;
+ * - a value that leaves nothing visible falls back to the catalog defaults.
+ *
+ * `undefined` means "never configured" and yields the defaults.
+ */
+const resolvePneTableColumnSettings = (columns, value) => {
+    (0, exports.assertPneTableColumnCatalog)(columns);
+    const byId = new Map(columns.map(column => [column.id, column]));
+    const defaults = (0, exports.createDefaultPneTableColumnSettings)(columns);
+    const resolveIds = (source) => {
+        const visible = uniqueIds(source.visibleColumnIds).filter(id => byId.has(id));
+        const visibleSet = new Set(visible);
+        const hidden = uniqueIds(source.hiddenColumnIds)
+            .filter(id => byId.has(id) && !visibleSet.has(id));
+        const known = new Set([...visible, ...hidden]);
+        const added = columns.filter(column => !known.has(column.id)).map(column => column.id);
+        return {
+            visibleColumnIds: [...visible, ...added],
+            hiddenColumnIds: hidden,
+        };
+    };
+    let resolved = value ? resolveIds(value) : defaults;
+    if (resolved.visibleColumnIds.length === 0) {
+        resolved = defaults;
+    }
+    const hiddenSet = new Set(resolved.hiddenColumnIds);
+    return {
+        visibleColumns: resolved.visibleColumnIds.map(id => byId.get(id)),
+        hiddenColumns: columns.filter(column => hiddenSet.has(column.id)),
+        value: resolved,
+        isDefault: sameIds(resolved.visibleColumnIds, defaults.visibleColumnIds)
+            && sameIds([...resolved.hiddenColumnIds].sort(), [...defaults.hiddenColumnIds].sort()),
+    };
+};
+exports.resolvePneTableColumnSettings = resolvePneTableColumnSettings;
+/** Structural equality of two normalized values; hidden order is irrelevant. */
+const isSamePneTableColumnSettings = (left, right) => sameIds(left.visibleColumnIds, right.visibleColumnIds)
+    && sameIds([...left.hiddenColumnIds].sort(), [...right.hiddenColumnIds].sort());
+exports.isSamePneTableColumnSettings = isSamePneTableColumnSettings;
+//# sourceMappingURL=resolveColumnSettings.js.map

package/cjs/component/table/column-settings/resolveColumnSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveColumnSettings.js","sourceRoot":"","sources":["../../../../src/component/table/column-settings/resolveColumnSettings.ts"],"names":[],"mappings":"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"}

package/cjs/component/table/column-settings/types.d.ts

@@ -0,0 +1,37 @@
+/** Stable, non-secret column identifier owned by the consumer; never an index or a translated label. */
+export type PneTableColumnId = string;
+/**
+ * One entry of a table column catalog. The catalog lists every column a
+ * consumer can render for a given table view, in the default display order.
+ */
+export type PneTableColumnOption = {
+    id: PneTableColumnId;
+    /** Plain-text label used by the settings dialog for display and search; keep it equal to the header text. */
+    label: string;
+    /** Whether the column is shown before the user configures anything. Defaults to `true`. */
+    defaultVisible?: boolean;
+};
+/**
+ * Persisted user preference for one table view. The consumer stores it as-is
+ * and passes it back; the library never inspects where it lives.
+ */
+export type PneTableColumnSettingsValue = {
+    /** Column IDs the user keeps visible, in display order. */
+    visibleColumnIds: readonly PneTableColumnId[];
+    /**
+     * Column IDs the user explicitly hid. Catalog columns absent from both lists
+     * are new since the value was saved and are shown by default.
+     */
+    hiddenColumnIds: readonly PneTableColumnId[];
+};
+/** Catalog-aware result of applying a stored value to the current column catalog. */
+export type PneTableResolvedColumnSettings<TColumn extends PneTableColumnOption> = {
+    /** Catalog columns to render, in display order. Never empty for a non-empty catalog. */
+    visibleColumns: readonly TColumn[];
+    /** Catalog columns currently hidden, in catalog order. */
+    hiddenColumns: readonly TColumn[];
+    /** Normalized value that references only existing catalog columns. */
+    value: PneTableColumnSettingsValue;
+    /** True when `value` equals the catalog defaults. */
+    isDefault: boolean;
+};

package/cjs/component/table/column-settings/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/cjs/component/table/column-settings/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/component/table/column-settings/types.ts"],"names":[],"mappings":""}

package/cjs/component/table/column-settings/usePneTableColumnSettings.d.ts

@@ -0,0 +1,34 @@
+import type { PneTableColumnId, PneTableColumnOption, PneTableColumnSettingsValue } from './types';
+import type { PneTableColumnSettingsDialogProps } from './PneTableColumnSettingsDialog';
+export type UsePneTableColumnSettingsParams<TColumn extends PneTableColumnOption> = {
+    /** Column catalog of the configured table view, in default display order. */
+    columns: readonly TColumn[];
+    /** Stored preference owned by the consumer; `undefined` or `null` means the catalog defaults. */
+    value?: PneTableColumnSettingsValue | null;
+    /** Persists the normalized value. Reject to keep the dialog open; report the failure yourself. */
+    onSave: (value: PneTableColumnSettingsValue) => void | Promise<void>;
+};
+export type UsePneTableColumnSettingsResult<TColumn extends PneTableColumnOption> = {
+    /** Catalog columns to render, in display order. */
+    visibleColumns: readonly TColumn[];
+    /** Catalog columns currently hidden, in catalog order. */
+    hiddenColumns: readonly TColumn[];
+    /** Normalized current value after catalog reconciliation. */
+    value: PneTableColumnSettingsValue;
+    /** True when the current value equals the catalog defaults. */
+    isDefault: boolean;
+    isVisible: (columnId: PneTableColumnId) => boolean;
+    /** Dialog visibility. */
+    open: boolean;
+    openDialog: () => void;
+    closeDialog: () => void;
+    /** Spread into `PneTableColumnSettingsDialog`. */
+    dialogProps: Pick<PneTableColumnSettingsDialogProps<TColumn>, 'columns' | 'onClose' | 'onSave' | 'open' | 'value'>;
+};
+/**
+ * Reconciles a stored column preference with the catalog and owns the dialog
+ * open state. Storage stays with the consumer: pass the loaded `value` and an
+ * `onSave` that writes it back.
+ */
+declare const usePneTableColumnSettings: <TColumn extends PneTableColumnOption>(params: UsePneTableColumnSettingsParams<TColumn>) => UsePneTableColumnSettingsResult<TColumn>;
+export default usePneTableColumnSettings;