@adaptabletools/adaptable 23.0.0-canary.6 → 23.0.0-canary.8

package/src/View/Layout/Wizard/sections/ColumnsSection.js

@@ -1,15 +1,19 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { DataSource, InfiniteTableGrid, } from '../../../../components/InfiniteTable';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import Input from '../../../../components/Input';
+import { cn } from '../../../../lib/utils';
 import { Card } from '../../../../components/Card';
+import Radio, { RadioGroup, radioGroupStyling } from '../../../../components/Radio';
+import { ColumnTag, Tag } from '../../../../components/Tag';
+import { CollapsibleWizardCard, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../../Wizard/CollapsibleWizardCard';
+import { ColumnPinningWizardCard, ColumnSizingWizardCard } from './columnLayoutCards';
+import { ColumnSortingWizardCard } from './SortSection';
 import { isValidOrderForColumnGroups, } from '../../../../AdaptableState/Common/AdaptableColumn';
 import { useAdaptable } from '../../../AdaptableContext';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { columnFilter } from './Utilities';
 import { Icon, NaturallySizedIcon } from '../../../../components/icons';
 import { CheckBox } from '../../../../components/CheckBox';
-import { clamp } from '../../../../Utilities/Helpers/Helper';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { generateAutoRowGroupColumnForColumn, generateAutoRowGroupSingleColumn, generateAutoTreeSingleColumn, generateSelectionColumn, isAutoRowGroupColumn, } from '../../../../Api/Implementation/ColumnApiImpl';
 import { ReorderDraggable } from '../../../Components/ReorderDraggable';
@@ -18,111 +22,18 @@ import { sortColumnIdsByOrder } from '../../../../layout-manager/src/sortColumnI
 import { AG_GRID_GROUPED_COLUMN, AG_GRID_SELECTION_COLUMN, } from '../../../../Utilities/Constants/GeneralConstants';
 import { isPivotLayout } from '../../../../Utilities/isPivotLayout';
 import { Box, Flex } from '../../../../components/Flex';
-import clsx from 'clsx';
-import Radio, { RadioGroup, radioGroupStyling } from '../../../../components/Radio';
-const PropertyOrderText = (props) => (_jsx(Box, { className: "twa:font-bold twa:text-2", children: props.children }));
-const columnTypes = {
-    default: {
-        defaultFlex: 1,
-    },
-};
-export const ColumnsSectionSummary = () => {
+import { applyColumnPinChange, applyColumnSizingFieldChange, applyColumnSortChange, COLUMN_PINNING_OPTIONS, COLUMN_SORT_OPTIONS, getColumnSortSelection, getExplicitSizingDisplayValues, } from './columnLayoutHelpers';
+import { getLayoutWizardInitialExpandedCardId, isColumnsSectionConfigured, } from './layoutWizardAccordionHelpers';
+import { getLayoutWizardOrderedColumns, LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from './layoutWizardColumns';
+import { getTableColumnsSummaryGroups, TABLE_COLUMNS_WIZARD_SUBSECTION_LABELS, } from '../../../../Strategy/Utilities/Layout/columnsSummaryHelpers';
+import { renderSummaryStringTags } from '../../../Wizard/SummaryColorTag';
+export const ColumnsSectionSummary = (props) => {
     const adaptable = useAdaptable();
-    const { data: layout } = useOnePageAdaptableWizardContext();
-    const rowHeight = 40;
-    const headerHeight = 40;
-    const ColumnIds = layout.TableColumns || layout.PivotColumns || [];
-    const tableHeight = headerHeight + clamp(rowHeight * ColumnIds.length, 100, 360);
-    const data = React.useMemo(() => {
-        return ColumnIds.map((columnId) => {
-            if (adaptable.api.columnApi.isPivotResultColumn(columnId) ||
-                adaptable.api.columnApi.isAutoRowGroupColumn(columnId) ||
-                adaptable.api.columnApi.isSelectionColumn(columnId)) {
-                return null;
-            }
-            const friendlyName = adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout);
-            const header = layout.ColumnHeaders?.[columnId] ?? '';
-            const columnWidth = layout.ColumnSizing?.[columnId]?.Width;
-            const columnPinning = layout.ColumnPinning?.[columnId];
-            let agg = (layout.TableAggregationColumns || []).find((agg) => agg.ColumnId === columnId)?.AggFunc;
-            agg = typeof agg === 'object' ? agg.type : agg;
-            const sortIndex = (layout?.ColumnSorts ?? []).findIndex((sort) => sort.ColumnId === columnId);
-            const sortOrder = sortIndex != -1
-                ? {
-                    index: sortIndex + 1,
-                    sort: layout.ColumnSorts[sortIndex]?.SortOrder ?? null,
-                }
-                : {};
-            let grouping = layout.RowGroupedColumns?.indexOf?.(columnId);
-            grouping = grouping != -1 ? grouping + 1 : null;
-            const filter = layout.ColumnFilters?.find((colFilter) => colFilter.ColumnId === columnId);
-            return {
-                columnId,
-                agg,
-                friendlyName,
-                header,
-                columnWidth,
-                columnPinning,
-                sortOrder,
-                grouping,
-                filter,
-            };
-        }).filter(Boolean);
-    }, [layout]);
-    const columns = React.useMemo(() => {
-        return {
-            name: { header: 'Name', field: 'friendlyName', minWidth: 100 },
-            header: { header: 'Header', field: 'header', minWidth: 120 },
-            colId: { header: 'ID', field: 'columnId' },
-            agg: { header: 'Agg', field: 'agg', minWidth: 70 },
-            width: { header: 'Width', field: 'columnWidth', minWidth: 70 },
-            pin: { header: 'Pin', field: 'columnPinning', minWidth: 80 },
-            sort: {
-                header: 'Sort',
-                field: 'sortOrder',
-                minWidth: 50,
-                align: 'center',
-                render: (params) => {
-                    if (!params.data?.sortOrder?.sort) {
-                        return _jsx(_Fragment, {});
-                    }
-                    return (_jsxs(Flex, { children: [_jsx(Icon, { name: params.data?.sortOrder?.sort === 'Asc' ? 'arrow-up-long' : 'arrow-down-long' }), ' ', _jsx(PropertyOrderText, { children: params.data?.sortOrder?.index ?? '' })] }));
-                },
-            },
-            filter: {
-                header: 'Filter',
-                field: 'filter',
-                align: 'center',
-                minWidth: 50,
-                render: (params) => {
-                    if (!params.data?.filter) {
-                        return _jsx(_Fragment, {});
-                    }
-                    return _jsx(CheckBox, { checked: true });
-                },
-            },
-            group: {
-                header: 'Group',
-                minWidth: 50,
-                field: 'columnGroupping',
-                align: 'center',
-                render: (params) => {
-                    if (!params.data.grouping) {
-                        return _jsx(_Fragment, {});
-                    }
-                    return (_jsxs(Flex, { children: [_jsx(CheckBox, { className: "twa:m-0 twa:mr-1", checked: true }), _jsx(PropertyOrderText, { children: params.data?.grouping })] }));
-                },
-            },
-        };
-    }, []);
-    const tableDOMProps = {
-        style: {
-            height: '100%',
-            minWidth: '10rem',
-            minHeight: tableHeight,
-        },
-    };
-    return (_jsx(DataSource, { data: data, primaryKey: "columnId", children: _jsx(InfiniteTableGrid, { columnTypes: columnTypes, rowHeight: rowHeight, columnHeaderHeight: headerHeight, domProps: tableDOMProps, columns: columns }) }));
+    const { data: contextLayout } = useOnePageAdaptableWizardContext();
+    const layout = props.layout ?? contextLayout;
+    const groups = getTableColumnsSummaryGroups(layout, adaptable.api, TABLE_COLUMNS_WIZARD_SUBSECTION_LABELS);
+    // Wizard summary lists every column — no truncation (settings panel uses truncateColumnSummaryValues).
+    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-3", children: groups.map(({ label, values, emptyLabel }) => (_jsxs(Box, { children: [_jsx(Box, { className: "twa:text-xs twa:font-medium twa:mb-1", children: label }), values.length ? renderSummaryStringTags(values) : _jsx(Tag, { children: emptyLabel })] }, label))) }));
 };
 const isSelectionColumn = (columnId) => columnId === AG_GRID_SELECTION_COLUMN;
 const isColumnVisible = (options) => {
@@ -142,13 +53,13 @@ const ColumnRow = (props) => {
     const isSelectionCol = isSelectionColumn(props.column.columnId);
     const { column } = props;
     const visible = isColumnVisible({ columnId: column.columnId, layout: props.layout });
-    return (_jsx(Box, { "data-name": props.column.columnId, className: "twa:flex-1", children: _jsxs(Flex, { className: "ab-Layout-Wizard__ColumnRow__Header twa:my-1", children: [_jsx(CheckBox, { "data-name": column.columnId, onChange: (checked) => {
+    return (_jsx(Box, { "data-name": props.column.columnId, className: "twa:flex-1", children: _jsxs(Flex, { className: "ab-Layout-Wizard__ColumnRow__Header twa:min-h-0", children: [_jsx(CheckBox, { "data-name": column.columnId, onChange: (checked) => {
                         props.onColumnVisibilityChange(column.columnId, checked);
                     }, disabled: column.hideable === false || isRowGroupColumn || isSelectionCol, onClick: (event) => {
                         event.stopPropagation();
                     }, onFocus: () => {
                         props.onCheckboxFocus?.(column.columnId);
-                    }, checked: visible }), _jsx(Flex, { className: "twa:mx-2", alignItems: "center", "data-name": "column-label", children: initialHeader }), props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (_jsxs(Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1 twa:flex twa:items-center", children: ["Column Group: ", props.column.columnGroup.friendlyName] })) : null] }) }));
+                    }, checked: visible }), _jsx(Flex, { className: "twa:mx-1.5 twa:text-3", alignItems: "center", "data-name": "column-label", children: initialHeader }), props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (_jsxs(Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-1.5 twa:py-0 twa:px-1 twa:flex twa:items-center twa:text-3", children: ["Column Group: ", props.column.columnGroup.friendlyName] })) : null] }) }));
 };
 export const ColumnsSection = (props) => {
     const adaptable = useAdaptable();
@@ -302,15 +213,6 @@ export const ColumnsSection = (props) => {
             ColumnVisibility,
         });
     };
-    const handlePinChange = (columnId, pinning) => {
-        onChange({
-            ...layout,
-            ColumnPinning: {
-                ...layout.ColumnPinning,
-                [columnId]: pinning,
-            },
-        });
-    };
     const handleColumnNameChange = (columnId, headerName) => {
         onChange({
             ...layout,
@@ -320,47 +222,19 @@ export const ColumnsSection = (props) => {
             },
         });
     };
-    const handleColumnWidthChange = (columnId, width) => {
-        const ColumnSizing = { ...layout.ColumnSizing };
-        const colSizingForCol = { ...ColumnSizing[columnId] };
-        delete colSizingForCol.Flex;
-        colSizingForCol.Width = width;
-        ColumnSizing[columnId] = colSizingForCol;
-        onChange({
-            ...layout,
-            ColumnSizing,
-        });
+    const resolveDefaultWidth = React.useCallback((columnId) => adaptable.getDefaultColumnWidthForCol(columnId), [adaptable]);
+    const handlePinChange = (columnId, pinning) => {
+        onChange(applyColumnPinChange(layout, columnId, pinning));
     };
-    const handleColumnFlexChange = (columnId, flex) => {
-        const ColumnSizing = { ...layout.ColumnSizing };
-        const colSizingForCol = { ...ColumnSizing[columnId] };
-        delete colSizingForCol.Width;
-        colSizingForCol.Flex = flex;
-        ColumnSizing[columnId] = colSizingForCol;
-        onChange({
-            ...layout,
-            ColumnSizing,
-        });
+    const handleColumnSizingChange = (columnId, field, value) => {
+        onChange(applyColumnSizingFieldChange(layout, columnId, field, value, resolveDefaultWidth));
     };
-    const handleColumnMinWidthChange = (columnId, minWidth) => {
-        const ColumnSizing = { ...layout.ColumnSizing };
-        const colSizingForCol = { ...ColumnSizing[columnId] };
-        colSizingForCol.MinWidth = minWidth;
-        ColumnSizing[columnId] = colSizingForCol;
-        onChange({
-            ...layout,
-            ColumnSizing,
-        });
+    const handleSortChange = (columnId, sortOrder) => {
+        onChange(applyColumnSortChange(layout, columnId, sortOrder));
     };
-    const handleColumnMaxWidthChange = (columnId, maxWidth) => {
-        const ColumnSizing = { ...layout.ColumnSizing };
-        const colSizingForCol = { ...ColumnSizing[columnId] };
-        colSizingForCol.MaxWidth = maxWidth;
-        ColumnSizing[columnId] = colSizingForCol;
-        onChange({
-            ...layout,
-            ColumnSizing,
-        });
+    const parseNumberInput = (value) => {
+        const parsed = parseFloat(value);
+        return typeof parsed === 'number' && !isNaN(parsed) ? parsed : undefined;
     };
     const visibleIds = layout.TableColumns.filter((colId) => {
         return (layout.ColumnVisibility?.[colId] !== false &&
@@ -373,138 +247,143 @@ export const ColumnsSection = (props) => {
             .map((col) => col.columnId)
         : currentOrder.map((col) => col.columnId);
     const visibleIdsCurrentlyDisplayed = visibleIds.filter((colId) => currentlyDisplayedColumnIds.includes(colId));
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [_jsx(Box, { className: "twa:text-4 twa:font-medium twa:shrink-0", children: "Columns" }), _jsx(Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-w-0 twa:text-xs twa:opacity-70 twa:font-normal twa:gap-0.5", children: _jsx(Box, { children: "Drag to reorder and use checkboxes to show or hide columns; click a column to edit in right side panel" }) })] }), _jsxs(Box, { className: "twa:flex-1 twa:min-h-0 twa:p-2 twa:gap-2 twa:overflow-hidden twa:grid twa:grid-cols-2", children: [_jsx(Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: _jsx(Box, { className: "twa:gap-2 twa:focus:outline-none twa:flex-1 twa:max-h-full twa:overflow-hidden twa:h-full", "data-name": "columns-container", tabIndex: -1, onKeyDown: (event) => {
-                                    const scrollIntoView = (columnId) => {
-                                        const el = event.currentTarget.querySelector(`[data-id="${columnId}"]`);
-                                        el?.scrollIntoView({ block: 'nearest' });
-                                        const input = el?.querySelector('input[type="checkbox"]');
-                                        input?.focus();
-                                    };
-                                    if (event.key === 'ArrowDown') {
-                                        event.preventDefault();
-                                        event.stopPropagation();
-                                        const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
-                                        if (index === -1) {
-                                            return;
-                                        }
-                                        const nextColumnId = currentlyDisplayedColumnIds[index + 1];
-                                        const nextColumn = colIdToCol[nextColumnId];
-                                        if (nextColumn) {
-                                            setSelectedColumnId(nextColumn.columnId);
-                                            scrollIntoView(nextColumn.columnId);
+    const layoutSupportedFeatures = adaptable.api.layoutApi.internalApi.getLayoutSupportedFeatures();
+    const initialExpandedCardId = getLayoutWizardInitialExpandedCardId(props.layoutWizardMode, 'order', isColumnsSectionConfigured(layout));
+    const { bindCard, hasExpandedCard, expandedFillsSpace } = useWizardCardAccordion(initialExpandedCardId);
+    const orderSummaryColumnIds = layout.TableColumns ?? [];
+    const orderSummary = orderSummaryColumnIds.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: orderSummaryColumnIds.map((columnId) => (_jsx(ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout) }, columnId))) })) : (_jsx(Tag, { children: "No columns" }));
+    return (_jsxs(Box, { className: getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), children: [_jsx(CollapsibleWizardCard, { ...bindCard('order', { fillAvailable: true }), surface: "panel", "data-name": "column-order", title: "Visibility and Order", help: "Drag to reorder, use checkboxes to show or hide columns; click a column to inspect", collapsedHelp: "", compactSummary: renderCompactColumnTags(orderSummaryColumnIds, (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout), { emptyLabel: 'No columns' }), summary: orderSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:flex twa:flex-col twa:p-1 twa:overflow-y-hidden", children: _jsxs(Box, { className: "twa:flex-1 twa:min-h-0 twa:gap-2 twa:grid twa:grid-cols-2", children: [_jsx(Card, { className: "twa:h-full twa:min-h-0 twa:flex twa:flex-col", children: _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:px-1 twa:pt-1 twa:overflow-y-hidden", children: _jsx(Box, { className: "twa:gap-2 twa:focus:outline-none twa:flex-1 twa:max-h-full twa:h-full", "data-name": "columns-container", tabIndex: -1, onKeyDown: (event) => {
+                                        const scrollIntoView = (columnId) => {
+                                            const el = event.currentTarget.querySelector(`[data-id="${columnId}"]`);
+                                            el?.scrollIntoView({ block: 'nearest' });
+                                            const input = el?.querySelector('input[type="checkbox"]');
+                                            input?.focus();
+                                        };
+                                        if (event.key === 'ArrowDown') {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
+                                            if (index === -1) {
+                                                return;
+                                            }
+                                            const nextColumnId = currentlyDisplayedColumnIds[index + 1];
+                                            const nextColumn = colIdToCol[nextColumnId];
+                                            if (nextColumn) {
+                                                setSelectedColumnId(nextColumn.columnId);
+                                                scrollIntoView(nextColumn.columnId);
+                                            }
                                         }
-                                    }
-                                    if (event.key === 'ArrowUp') {
-                                        event.preventDefault();
-                                        event.stopPropagation();
-                                        const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
-                                        if (index === -1) {
-                                            return;
+                                        if (event.key === 'ArrowUp') {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
+                                            if (index === -1) {
+                                                return;
+                                            }
+                                            const previousColumnId = currentlyDisplayedColumnIds[index - 1];
+                                            const previousColumn = colIdToCol[previousColumnId];
+                                            if (previousColumn) {
+                                                setSelectedColumnId(previousColumn.columnId);
+                                                scrollIntoView(previousColumn.columnId);
+                                            }
                                         }
-                                        const previousColumnId = currentlyDisplayedColumnIds[index - 1];
-                                        const previousColumn = colIdToCol[previousColumnId];
-                                        if (previousColumn) {
-                                            setSelectedColumnId(previousColumn.columnId);
-                                            scrollIntoView(previousColumn.columnId);
+                                        if (event.key === ' ') {
+                                            const target = event.target;
+                                            if (target.tagName === 'INPUT' &&
+                                                target.type === 'checkbox') {
+                                                return;
+                                            }
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            const selectedColumn = colIdToCol[selectedColumnId];
+                                            if (!selectedColumn) {
+                                                return;
+                                            }
+                                            const visible = isColumnVisible({ columnId: selectedColumnId, layout });
+                                            handleColumnVisibilityChange(selectedColumnId, !visible);
                                         }
-                                    }
-                                    if (event.key === ' ') {
-                                        const target = event.target;
-                                        if (target.tagName === 'INPUT' &&
-                                            target.type === 'checkbox') {
-                                            return;
-                                        }
-                                        event.preventDefault();
-                                        event.stopPropagation();
-                                        const selectedColumn = colIdToCol[selectedColumnId];
-                                        if (!selectedColumn) {
-                                            return;
-                                        }
-                                        const visible = isColumnVisible({ columnId: selectedColumnId, layout });
-                                        handleColumnVisibilityChange(selectedColumnId, !visible);
-                                    }
-                                }, children: _jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:h-full twa:overflow-hidden twa:p-1", children: [_jsx(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: "twa:w-full twa:p-1" }), _jsx(Box, { className: clsx('twa:font-bold', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard'), children: _jsx(CheckBox, { checked: currentlyDisplayedColumnIds.length
-                                                    ? currentlyDisplayedColumnIds.length === visibleIdsCurrentlyDisplayed.length
-                                                        ? true
-                                                        : visibleIdsCurrentlyDisplayed.length
-                                                            ? null
-                                                            : false
-                                                    : false, onChange: (checked) => {
-                                                    handleColumnVisibilityChange(currentlyDisplayedColumnIds, checked);
-                                                }, children: "Select All" }) }), _jsx(ReorderDraggable, { className: "twa:overflow-y-auto", toIdentifier: (option) => `${option.columnId}`, isOptionDraggable: (option) => {
-                                                return option.moveable;
-                                            }, optionClassName: (option) => {
-                                                const baseCls = 'ab-Layout-Wizard__ColumnRow twa:cursor-pointer twa:rounded-standard';
-                                                if (selectedColumnId !== option.columnId) {
-                                                    return baseCls;
-                                                }
-                                                return clsx(baseCls, 'twa:after:border-accent twa:relative twa:after:border-2 twa:after:rounded-standard twa:after:pointer-events-none twa:after:inset-0 twa:after:absolute twa:after:bg-accent/15');
-                                            }, order: currentOrder, onOptionClick: (option, event) => {
-                                                if (event.ctrlKey || option.columnId === selectedColumnId) {
-                                                    setSelectedColumnId(null);
-                                                }
-                                                else {
-                                                    setSelectedColumnId(option.columnId);
-                                                    const row = event.target.closest?.(`[data-id="${option.columnId}"]`);
-                                                    const input = row?.querySelector('input[type="checkbox"]');
-                                                    input?.focus();
-                                                }
-                                            }, renderOption: (option) => {
-                                                return (_jsx(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange, onPinChange: handlePinChange, onCheckboxFocus: setSelectedColumnId, layout: layout, column: option }));
-                                            }, onChange: handleColumnsChange })] }) }) }) }), currentOrderIds.length ? (_jsx(ColumnPropertiesEditor, { column: selectedColumnId && currentOrderIds.includes(selectedColumnId)
-                            ? colIdToCol[selectedColumnId] ?? null
-                            : null, layout: layout, onPinChange: handlePinChange, onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange })) : null] })] }));
+                                    }, children: _jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-1.5 twa:h-full", children: [_jsxs(Flex, { alignItems: "center", className: cn(LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, 'twa:font-bold twa:shrink-0', 'twa:border-b twa:border-primarydark/30 twa:pb-1'), children: [_jsx(CheckBox, { className: "twa:shrink-0", checked: currentlyDisplayedColumnIds.length
+                                                            ? currentlyDisplayedColumnIds.length ===
+                                                                visibleIdsCurrentlyDisplayed.length
+                                                                ? true
+                                                                : visibleIdsCurrentlyDisplayed.length
+                                                                    ? null
+                                                                    : false
+                                                            : false, onChange: (checked) => {
+                                                            handleColumnVisibilityChange(currentlyDisplayedColumnIds, checked);
+                                                        }, children: "Select All" }), _jsx(Box, { className: "twa:flex-1 twa:min-w-0" }), _jsx(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS })] }), _jsx(ReorderDraggable, { className: "twa:flex-1 twa:min-h-0 twa:overflow-y-auto", toIdentifier: (option) => `${option.columnId}`, isOptionDraggable: (option) => {
+                                                    return option.moveable;
+                                                }, optionClassName: (option) => {
+                                                    const baseCls = 'ab-Layout-Wizard__ColumnRow twa:cursor-pointer twa:rounded-standard';
+                                                    if (selectedColumnId !== option.columnId) {
+                                                        return baseCls;
+                                                    }
+                                                    return cn(baseCls, 'twa:after:border-accent twa:relative twa:after:border-2 twa:after:rounded-standard twa:after:pointer-events-none twa:after:inset-0 twa:after:absolute twa:after:bg-accent/15');
+                                                }, order: currentOrder, onOptionClick: (option, event) => {
+                                                    if (event.ctrlKey || option.columnId === selectedColumnId) {
+                                                        setSelectedColumnId(null);
+                                                    }
+                                                    else {
+                                                        setSelectedColumnId(option.columnId);
+                                                        const row = event.target.closest?.(`[data-id="${option.columnId}"]`);
+                                                        const input = row?.querySelector('input[type="checkbox"]');
+                                                        input?.focus();
+                                                    }
+                                                }, renderOption: (option) => {
+                                                    return (_jsx(ColumnRow, { onColumnVisibilityChange: handleColumnVisibilityChange, onCheckboxFocus: setSelectedColumnId, layout: layout, column: option }));
+                                                }, onChange: handleColumnsChange })] }) }) }) }), currentOrderIds.length ? (_jsx(ColumnPropertiesEditor, { column: selectedColumnId && currentOrderIds.includes(selectedColumnId)
+                                ? colIdToCol[selectedColumnId] ?? null
+                                : null, layout: layout, columnSortsEnabled: layoutSupportedFeatures.ColumnSorts, resolveDefaultWidth: resolveDefaultWidth, onColumnNameChange: handleColumnNameChange, onPinChange: handlePinChange, onColumnSizingChange: handleColumnSizingChange, onSortChange: handleSortChange, parseNumberInput: parseNumberInput })) : null] }) }), _jsx(ColumnPinningWizardCard, { layout: layout, onChange: onChange, bindCard: bindCard }), _jsx(ColumnSizingWizardCard, { layout: layout, onChange: onChange, bindCard: bindCard }), layoutSupportedFeatures.ColumnSorts ? (_jsx(ColumnSortingWizardCard, { layout: layout, onChange: onChange, bindCard: bindCard })) : null] }));
 };
 const hr = (_jsx("hr", { className: "twa:my-3 twa:mb-0 twa:w-full twa:h-[0.5px] twa:bg-input-border/50 twa:border-none" }));
+const columnInspectorLabelClass = 'twa:text-3 twa:opacity-70 twa:shrink-0';
+const columnInspectorInputClass = 'ab-Layout-Wizard__ColumnPropertiesEditor__Input twa:!min-h-0 twa:text-3 twa:min-w-0 twa:flex-1';
 const ColumnPropertiesEditor = (props) => {
     const adaptable = useAdaptable();
     const baseCls = 'ab-Layout-Wizard__ColumnPropertiesEditor twa:border twa:rounded-standard';
     if (!props.column) {
-        return (_jsx(Box, { className: clsx(baseCls, 'twa:border-input-border twa:grid twa:place-items-center twa:border-dashed twa:border-2'), children: _jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:items-center twa:justify-center", children: [_jsx(Box, { className: "twa:text-muted-foreground ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Icon", children: _jsx(NaturallySizedIcon, { name: "inspector", style: { stroke: 'currentColor', fill: 'none', strokeWidth: 2 } }) }), _jsx(Box, { className: "twa:text-4 twa:font-bold ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Title", children: "No Column Selected" }), _jsx(Box, { className: "twa:text-3 twa:opacity-80 ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Description", children: "Select a Column to view and edit its properties" })] }) }));
+        return (_jsx(Box, { className: cn(baseCls, 'twa:border-input-border twa:grid twa:place-items-center twa:border-dashed twa:border-2'), children: _jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:items-center twa:justify-center", children: [_jsx(Box, { className: "twa:text-muted-foreground ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Icon", children: _jsx(NaturallySizedIcon, { name: "inspector", style: { stroke: 'currentColor', fill: 'none', strokeWidth: 2 } }) }), _jsx(Box, { className: "twa:text-4 twa:font-bold ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Title", children: "No Column Selected" }), _jsx(Box, { className: "twa:text-3 twa:opacity-80 ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Description", children: "Select a Column to view and edit its properties" })] }) }));
     }
     const { column } = props;
-    const columnWidth = props.layout.ColumnSizing?.[column.columnId]?.Width;
-    const columnFlex = props.layout.ColumnSizing?.[column.columnId]?.Flex;
-    const minWidth = props.layout.ColumnSizing?.[column.columnId]?.MinWidth;
-    const maxWidth = props.layout.ColumnSizing?.[column.columnId]?.MaxWidth;
-    const resizable = column.resizable !== false;
-    // column pinning
-    const columnPinning = props.layout.ColumnPinning?.[props.column.columnId] || 'None';
     const initialHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(props.column.columnId, props.layout);
     const customHeader = props.layout.ColumnHeaders?.[props.column.columnId] ?? initialHeader;
-    return (_jsxs(Box, { className: clsx(baseCls, 'ab-Layout-Wizard__ColumnPropertiesEditor__Container twa:border-none twa:bg-background twa:shadow-md', 'twa:max-h-full twa:overflow-hidden twa:flex twa:flex-col'), children: [_jsxs(Box, { className: "twa:px-4 twa:pt-4", children: [_jsxs(Box, { className: "twa:text-5 twa:font-bold twa:leading-relaxed ab-Layout-Wizard__ColumnPropertiesEditor__Title", children: ["Column Settings: ", column.friendlyName] }), _jsxs(Box, { className: "twa:text-3 twa:opacity-80 twa:flex twa:flex-row twa:gap-1 twa:items-center", children: ["Column ID:", ' ', _jsx(Box, { className: "twa:bg-primarydark/20 twa:text-muted-foreground twa:px-1 twa:py-0.5 twa:rounded-standard", children: column.columnId })] }), props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (_jsxs(Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1", children: ["Column Group: ", props.column.columnGroup.friendlyName] })) : null] }), hr, _jsxs(Box, { className: "twa:px-4 twa:flex-1 twa:overflow-y-auto twa:pb-3", children: [_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:mt-3", children: [_jsxs(Flex, { flexDirection: "column", className: "twa:gap-1", children: ["Header", _jsx(Input, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input twa:w-full", placeholder: "Custom name (optional)", disabled: props.column.isGeneratedSelectionColumn, onChange: () => {
+    const sizing = props.layout.ColumnSizing?.[column.columnId];
+    const displayValues = getExplicitSizingDisplayValues(column.columnId, sizing, props.resolveDefaultWidth);
+    const resizable = column.resizable !== false;
+    const columnPinning = props.layout.ColumnPinning?.[column.columnId];
+    const currentPin = columnPinning === 'left' || columnPinning === 'right' ? columnPinning : 'None';
+    const currentSort = getColumnSortSelection(props.layout, column.columnId);
+    const columnVisible = isColumnVisible({ columnId: column.columnId, layout: props.layout });
+    const orderedColumnIds = getLayoutWizardOrderedColumns(adaptable, props.layout).map((col) => col.columnId);
+    const positionIndex = orderedColumnIds.indexOf(column.columnId);
+    const position = columnVisible && positionIndex >= 0 ? String(positionIndex + 1) : '';
+    const inspectorFieldGridClass = 'twa:grid twa:grid-cols-[max-content_1fr_max-content_1fr] twa:gap-x-2 twa:gap-y-2 twa:items-center';
+    return (_jsxs(Box, { className: cn(baseCls, 'ab-Layout-Wizard__ColumnPropertiesEditor__Container twa:border-none twa:bg-background twa:shadow-md', 'twa:max-h-full twa:min-h-0 twa:overflow-hidden twa:flex twa:flex-col'), children: [_jsxs(Box, { className: "twa:px-4 twa:pt-4", children: [_jsxs(Box, { className: "twa:text-3 twa:font-medium twa:leading-snug ab-Layout-Wizard__ColumnPropertiesEditor__Title", children: ["Column Settings: ", column.friendlyName] }), _jsxs(Box, { className: "twa:mt-3 twa:text-3 twa:opacity-80 twa:flex twa:flex-row twa:gap-1 twa:items-center", children: ["Column ID:", ' ', _jsx(Box, { className: "twa:bg-primarydark/20 twa:text-muted-foreground twa:px-1 twa:py-0.5 twa:rounded-standard", children: column.columnId })] }), _jsxs(Box, { className: "twa:mt-1 twa:text-3 twa:opacity-80 twa:flex twa:flex-row twa:gap-1 twa:items-center", children: ["Data Type:", ' ', _jsx(Box, { className: "twa:bg-primarydark/20 twa:text-muted-foreground twa:px-1 twa:py-0.5 twa:rounded-standard", children: column.dataType })] }), props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (_jsxs(Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1", children: ["Column Group: ", props.column.columnGroup.friendlyName] })) : null] }), hr, _jsxs(Box, { className: "twa:px-4 twa:flex-1 twa:overflow-y-auto twa:pb-3 twa:mt-3", children: [_jsx(Box, { className: "twa:text-3 twa:font-medium twa:mb-2", children: "Column Properties" }), _jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-3 twa:p-3 twa:rounded-standard twa:bg-background twa:border twa:border-foreground/10", children: [_jsxs(Box, { className: inspectorFieldGridClass, children: [_jsx(Box, { className: columnInspectorLabelClass, children: "Header" }), _jsx(Input, { "data-name": "column-header", className: cn(columnInspectorInputClass, 'twa:col-span-3'), placeholder: "Custom name (optional)", disabled: props.column.isGeneratedSelectionColumn, onChange: (event) => {
                                             props.onColumnNameChange(props.column.columnId, event.target.value);
-                                        }, value: customHeader })] }), _jsxs(Box, { className: "twa:grid twa:grid-cols-[1fr_1fr] twa:gap-2", children: [_jsx(Box, { children: "Width:" }), " ", _jsx(Box, { children: "Flex:" }), _jsx(Input, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column width", disabled: resizable === false, onChange: (event) => {
-                                            let value = parseFloat(event.target.value);
-                                            value = typeof value === 'number' && !isNaN(value) ? value : void 0;
-                                            props.onColumnWidthChange(props.column.columnId, value);
-                                        }, value: columnWidth ?? '' }), _jsx(Input, { "data-name": "column-flex", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column flex", disabled: resizable === false, onChange: (event) => {
-                                            let value = parseFloat(event.target.value);
-                                            value = typeof value === 'number' && !isNaN(value) ? value : void 0;
-                                            props.onColumnFlexChange(props.column.columnId, value);
-                                        }, value: columnFlex ?? '' }), _jsx(Box, { children: "Min Width:" }), _jsx(Box, { children: "Max Width:" }), _jsx(Input, { "data-name": "column-min-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column min width", disabled: resizable === false, onChange: (event) => {
-                                            let value = parseFloat(event.target.value);
-                                            value = typeof value === 'number' && !isNaN(value) ? value : void 0;
-                                            props.onColumnMinWidthChange(props.column.columnId, value);
-                                        }, value: minWidth ?? '' }), _jsx(Input, { "data-name": "column-max-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column max width", disabled: resizable === false, onChange: (event) => {
-                                            let value = parseFloat(event.target.value);
-                                            value = typeof value === 'number' && !isNaN(value) ? value : void 0;
-                                            props.onColumnMaxWidthChange(props.column.columnId, value);
-                                        }, value: maxWidth ?? '' })] }), "Pinning:", _jsxs(RadioGroup, { value: columnPinning || 'None', name: "columnPinning", orientation: "horizontal", variant: "text-only", className: radioGroupStyling.horizontalTextOnly, onRadioChange: (columnPinning) => {
-                                    props.onPinChange(column.columnId, columnPinning === 'None' ? null : columnPinning);
-                                }, children: [_jsx(Radio, { value: "left", children: "Left" }), _jsx(Radio, { value: "None", children: "None" }), _jsx(Radio, { value: "right", children: "Right" })] })] }), _jsx(Box, { className: "twa:mt-5" }), hr, _jsxs(Box, { children: [_jsx(Box, { className: "twa:my-3", children: "Column Attributes" }), _jsx(Box, { className: clsx({
-                                    'twa:bg-primarylight': 'the bg color',
-                                    'twa:gap-2 twa:flex twa:flex-col': 'layout configuration for small screens',
-                                    'twa:lg:gap-3 twa:lg:grid twa:md:grid-cols-[1fr_1fr]': 'layout configuration for normal screens',
-                                    'twa:p-5 twa:rounded-standard': true,
-                                }), children: [
-                                    { label: 'Aggregatable', checked: props.column.aggregatable },
-                                    { label: 'Filterable', checked: props.column.filterable },
-                                    { label: 'Groupable', checked: props.column.groupable },
-                                    { label: 'Moveable', checked: props.column.moveable },
-                                    { label: 'Pivotable', checked: props.column.pivotable },
-                                    { label: 'Sortable', checked: props.column.sortable },
-                                ].map(({ label, checked }) => (_jsxs(Flex, { alignItems: "center", className: clsx({
-                                        'twa:rounded-standard twa:gap-2': true,
-                                    }), children: [_jsx(Box, { className: "twa:size-5", children: checked ? (_jsx(Icon, { name: "check", className: "twa:text-success" })) : (_jsx(Icon, { name: "close", className: "twa:text-error" })) }), label] }, label))) })] })] })] }));
+                                        }, value: customHeader }), _jsx(Box, { className: columnInspectorLabelClass, children: "Width" }), _jsx(Input, { "data-name": `column-width-${column.columnId}`, className: columnInspectorInputClass, type: "number", placeholder: "\u2014", disabled: !resizable, onChange: (event) => {
+                                            props.onColumnSizingChange(column.columnId, 'width', props.parseNumberInput(event.target.value));
+                                        }, value: displayValues.width ?? '' }), _jsx(Box, { className: columnInspectorLabelClass, children: "Flex" }), _jsx(Input, { "data-name": `column-flex-${column.columnId}`, className: columnInspectorInputClass, type: "number", placeholder: "\u2014", disabled: !resizable, onChange: (event) => {
+                                            props.onColumnSizingChange(column.columnId, 'flex', props.parseNumberInput(event.target.value));
+                                        }, value: displayValues.flex ?? '' }), _jsx(Box, { className: columnInspectorLabelClass, children: "Min" }), _jsx(Input, { "data-name": `column-min-width-${column.columnId}`, className: columnInspectorInputClass, type: "number", placeholder: "\u2014", disabled: !resizable, onChange: (event) => {
+                                            props.onColumnSizingChange(column.columnId, 'minWidth', props.parseNumberInput(event.target.value));
+                                        }, value: displayValues.minWidth ?? '' }), _jsx(Box, { className: columnInspectorLabelClass, children: "Max" }), _jsx(Input, { "data-name": `column-max-width-${column.columnId}`, className: columnInspectorInputClass, type: "number", placeholder: "\u2014", disabled: !resizable, onChange: (event) => {
+                                            props.onColumnSizingChange(column.columnId, 'maxWidth', props.parseNumberInput(event.target.value));
+                                        }, value: displayValues.maxWidth ?? '' })] }), _jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [_jsx(Box, { className: columnInspectorLabelClass, children: "Pinning" }), _jsx(RadioGroup, { orientation: "horizontal", variant: "text-only", className: radioGroupStyling.horizontalTextOnly, value: currentPin, name: `inspector-pinning-${column.columnId}`, onRadioChange: (value) => {
+                                            props.onPinChange(column.columnId, value === 'None' ? null : value);
+                                        }, children: COLUMN_PINNING_OPTIONS.map((option) => (_jsx(Radio, { value: option.value, "data-value": option.value, "data-name": `pinning-${column.columnId}-${option.value}`, children: option.label }, option.value))) })] }), props.columnSortsEnabled ? (_jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [_jsx(Box, { className: columnInspectorLabelClass, children: "Sorting" }), _jsx(RadioGroup, { orientation: "horizontal", variant: "text-only", className: radioGroupStyling.horizontalTextOnly, value: currentSort, name: `inspector-sorting-${column.columnId}`, onRadioChange: (value) => {
+                                            props.onSortChange(column.columnId, value);
+                                        }, children: COLUMN_SORT_OPTIONS.map((option) => (_jsx(Radio, { value: option.value, disabled: !column.sortable, "data-name": `inspector-sorting-${column.columnId}-${option.value}`, children: option.label }, option.value))) })] })) : null, _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Box, { className: columnInspectorLabelClass, children: "Position" }), _jsx(Box, { className: "twa:text-3", children: position || '—' })] }), _jsx(Box, { className: "twa:grid twa:grid-cols-3 twa:gap-2 twa:pt-2 twa:border-t twa:border-foreground/10", children: [
+                                    { label: 'Hideable', checked: column.hideable },
+                                    { label: 'Editable', checked: !column.readOnly },
+                                    { label: 'Queryable', checked: column.queryable },
+                                    { label: 'Exportable', checked: column.exportable },
+                                    { label: 'Sortable', checked: column.sortable },
+                                    { label: 'Aggregatable', checked: column.aggregatable },
+                                    { label: 'Filterable', checked: column.filterable },
+                                    { label: 'Groupable', checked: column.groupable },
+                                    { label: 'Moveable', checked: column.moveable },
+                                    { label: 'Pivotable', checked: column.pivotable },
+                                    { label: 'Calculated', checked: column.isCalculatedColumn },
+                                    { label: 'Free Text', checked: column.isFreeTextColumn },
+                                ].map(({ label, checked }) => (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1.5 twa:min-w-0", children: [_jsx(Box, { className: "twa:size-4 twa:shrink-0", children: checked ? (_jsx(Icon, { name: "check", className: "twa:text-success" })) : (_jsx(Icon, { name: "close", className: "twa:text-destructive" })) }), _jsx(Box, { className: "twa:text-3 twa:truncate", children: label })] }, label))) })] })] })] }));
 };

package/src/View/Layout/Wizard/sections/PivotAggregationsSection.d.ts

@@ -1,9 +1,12 @@
 import * as React from 'react';
 import { PivotLayout } from '../../../../../types';
 export declare const isPivotAggregationsSectionValid: (data: PivotLayout) => true | string;
-export declare const PivotAggregationsSectionSummary: React.FunctionComponent;
+export declare const PivotAggregationsSectionSummary: React.FunctionComponent<{
+    layout?: PivotLayout;
+}>;
 interface PivotAggregationsSectionProps {
     onChange: (data: PivotLayout) => void;
+    layoutWizardMode?: 'create' | 'edit';
 }
 export declare const PivotAggregationsSection: React.FunctionComponent<PivotAggregationsSectionProps>;
 export {};