@adaptabletools/adaptable-cjs 23.0.0-canary.0 → 23.0.0-canary.10

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

@@ -3,17 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnsSection = exports.ColumnsSectionSummary = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const InfiniteTable_1 = require("../../../../components/InfiniteTable");
 const React = tslib_1.__importStar(require("react"));
 const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
-const Tabs_1 = require("../../../../components/Tabs");
+const utils_1 = require("../../../../lib/utils");
+const Card_1 = require("../../../../components/Card");
+const Radio_1 = tslib_1.__importStar(require("../../../../components/Radio"));
+const Tag_1 = require("../../../../components/Tag");
+const CollapsibleWizardCard_1 = require("../../../Wizard/CollapsibleWizardCard");
+const columnLayoutCards_1 = require("./columnLayoutCards");
+const SortSection_1 = require("./SortSection");
 const AdaptableColumn_1 = require("../../../../AdaptableState/Common/AdaptableColumn");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const Utilities_1 = require("./Utilities");
 const icons_1 = require("../../../../components/icons");
 const CheckBox_1 = require("../../../../components/CheckBox");
-const Helper_1 = require("../../../../Utilities/Helpers/Helper");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
 const ColumnApiImpl_1 = require("../../../../Api/Implementation/ColumnApiImpl");
 const ReorderDraggable_1 = require("../../../Components/ReorderDraggable");
@@ -22,111 +26,18 @@ const sortColumnIdsByOrder_1 = require("../../../../layout-manager/src/sortColum
 const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
 const isPivotLayout_1 = require("../../../../Utilities/isPivotLayout");
 const Flex_1 = require("../../../../components/Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
-const Radio_1 = tslib_1.__importStar(require("../../../../components/Radio"));
-const PropertyOrderText = (props) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-bold twa:text-2", children: props.children }));
-const columnTypes = {
-    default: {
-        defaultFlex: 1,
-    },
-};
-const ColumnsSectionSummary = () => {
+const columnLayoutHelpers_1 = require("./columnLayoutHelpers");
+const layoutWizardAccordionHelpers_1 = require("./layoutWizardAccordionHelpers");
+const layoutWizardColumns_1 = require("./layoutWizardColumns");
+const columnsSummaryHelpers_1 = require("../../../../Strategy/Utilities/Layout/columnsSummaryHelpers");
+const SummaryColorTag_1 = require("../../../Wizard/SummaryColorTag");
+const ColumnsSectionSummary = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const rowHeight = 40;
-    const headerHeight = 40;
-    const ColumnIds = layout.TableColumns || layout.PivotColumns || [];
-    const tableHeight = headerHeight + (0, Helper_1.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 (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-                    }
-                    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: params.data?.sortOrder?.sort === 'Asc' ? 'arrow-up-long' : 'arrow-down-long' }), ' ', (0, jsx_runtime_1.jsx)(PropertyOrderText, { children: params.data?.sortOrder?.index ?? '' })] }));
-                },
-            },
-            filter: {
-                header: 'Filter',
-                field: 'filter',
-                align: 'center',
-                minWidth: 50,
-                render: (params) => {
-                    if (!params.data?.filter) {
-                        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-                    }
-                    return (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: true });
-                },
-            },
-            group: {
-                header: 'Group',
-                minWidth: 50,
-                field: 'columnGroupping',
-                align: 'center',
-                render: (params) => {
-                    if (!params.data.grouping) {
-                        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-                    }
-                    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:m-0 twa:mr-1", checked: true }), (0, jsx_runtime_1.jsx)(PropertyOrderText, { children: params.data?.grouping })] }));
-                },
-            },
-        };
-    }, []);
-    const tableDOMProps = {
-        style: {
-            height: '100%',
-            minWidth: '10rem',
-            minHeight: tableHeight,
-        },
-    };
-    return ((0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: data, primaryKey: "columnId", children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { columnTypes: columnTypes, rowHeight: rowHeight, columnHeaderHeight: headerHeight, domProps: tableDOMProps, columns: columns }) }));
+    const { data: contextLayout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const layout = props.layout ?? contextLayout;
+    const groups = (0, columnsSummaryHelpers_1.getTableColumnsSummaryGroups)(layout, adaptable.api, columnsSummaryHelpers_1.TABLE_COLUMNS_WIZARD_SUBSECTION_LABELS);
+    // Wizard summary lists every column — no truncation (settings panel uses truncateColumnSummaryValues).
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3", children: groups.map(({ label, values, emptyLabel }) => ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:font-medium twa:mb-1", children: label }), values.length ? (0, SummaryColorTag_1.renderSummaryStringTags)(values) : (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: emptyLabel })] }, label))) }));
 };
 exports.ColumnsSectionSummary = ColumnsSectionSummary;
 const isSelectionColumn = (columnId) => columnId === GeneralConstants_1.AG_GRID_SELECTION_COLUMN;
@@ -147,13 +58,13 @@ const ColumnRow = (props) => {
     const isSelectionCol = isSelectionColumn(props.column.columnId);
     const { column } = props;
     const visible = isColumnVisible({ columnId: column.columnId, layout: props.layout });
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": props.column.columnId, className: "twa:flex-1", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-Layout-Wizard__ColumnRow__Header twa:my-1", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": column.columnId, onChange: (checked) => {
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": props.column.columnId, className: "twa:flex-1", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-Layout-Wizard__ColumnRow__Header twa:min-h-0", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.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 }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:mx-2", alignItems: "center", "data-name": "column-label", children: initialHeader }), props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? ((0, jsx_runtime_1.jsxs)(Flex_1.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 }), (0, jsx_runtime_1.jsx)(Flex_1.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 ? ((0, jsx_runtime_1.jsxs)(Flex_1.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] }) }));
 };
 const ColumnsSection = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -194,7 +105,7 @@ const ColumnsSection = (props) => {
         if (layout.RowGroupDisplayType === 'single') {
             allColumns.unshift((0, ColumnApiImpl_1.generateAutoRowGroupSingleColumn)());
         }
-        else {
+        else if (layout.RowGroupDisplayType === 'multi') {
             [...layout.RowGroupedColumns].reverse().forEach((col) => {
                 const groupCol = (0, ColumnApiImpl_1.generateAutoRowGroupColumnForColumn)(adaptable.api.columnApi.getColumnWithColumnId(col));
                 allColumns.unshift(groupCol);
@@ -307,15 +218,6 @@ const ColumnsSection = (props) => {
             ColumnVisibility,
         });
     };
-    const handlePinChange = (columnId, pinning) => {
-        onChange({
-            ...layout,
-            ColumnPinning: {
-                ...layout.ColumnPinning,
-                [columnId]: pinning,
-            },
-        });
-    };
     const handleColumnNameChange = (columnId, headerName) => {
         onChange({
             ...layout,
@@ -325,47 +227,19 @@ 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((0, columnLayoutHelpers_1.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((0, columnLayoutHelpers_1.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((0, columnLayoutHelpers_1.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 &&
@@ -378,139 +252,144 @@ const ColumnsSection = (props) => {
             .map((col) => col.columnId)
         : currentOrder.map((col) => col.columnId);
     const visibleIdsCurrentlyDisplayed = visibleIds.filter((colId) => currentlyDisplayedColumnIds.includes(colId));
-    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:h-full", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Columns" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:gap-2 twa:overflow-hidden twa:grid twa:grid-cols-2 twa:h-full", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:gap-2 twa:focus:outline-none twa:flex-1 twa:max-h-full twa:overflow-hidden", "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;
-                                    }
-                                    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);
-                                }
-                            }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:h-full twa:overflow-hidden twa:p-1", children: [(0, jsx_runtime_1.jsx)(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: "twa:w-full twa:border-none twa:p-1" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)('twa:font-bold', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard'), children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: currentlyDisplayedColumnIds.length
-                                                ? currentlyDisplayedColumnIds.length === visibleIdsCurrentlyDisplayed.length
-                                                    ? true
-                                                    : visibleIdsCurrentlyDisplayed.length
-                                                        ? null
-                                                        : false
-                                                : false, onChange: (checked) => {
-                                                handleColumnVisibilityChange(currentlyDisplayedColumnIds, checked);
-                                            }, children: "Select All" }) }), (0, jsx_runtime_1.jsx)(ReorderDraggable_1.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;
+    const layoutSupportedFeatures = adaptable.api.layoutApi.internalApi.getLayoutSupportedFeatures();
+    const initialExpandedCardId = (0, layoutWizardAccordionHelpers_1.getLayoutWizardInitialExpandedCardId)(props.layoutWizardMode, 'order', (0, layoutWizardAccordionHelpers_1.isColumnsSectionConfigured)(layout));
+    const { bindCard, hasExpandedCard, expandedFillsSpace } = (0, CollapsibleWizardCard_1.useWizardCardAccordion)(initialExpandedCardId);
+    const orderSummaryColumnIds = layout.TableColumns ?? [];
+    const orderSummary = orderSummaryColumnIds.length ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", className: "twa:gap-1", children: orderSummaryColumnIds.map((columnId) => ((0, jsx_runtime_1.jsx)(Tag_1.ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout) }, columnId))) })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No columns" }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, CollapsibleWizardCard_1.getWizardAccordionSectionClassName)(hasExpandedCard, expandedFillsSpace), children: [(0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.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: (0, CollapsibleWizardCard_1.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: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-0 twa:gap-2 twa:grid twa:grid-cols-2", children: [(0, jsx_runtime_1.jsx)(Card_1.Card, { className: "twa:h-full twa:min-h-0 twa:flex twa:flex-col", children: (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:px-1 twa:pt-1 twa:overflow-y-hidden", children: (0, jsx_runtime_1.jsx)(Flex_1.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);
                                             }
-                                            return (0, clsx_1.default)(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);
+                                        }
+                                        if (event.key === 'ArrowUp') {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
+                                            if (index === -1) {
+                                                return;
                                             }
-                                            else {
-                                                setSelectedColumnId(option.columnId);
-                                                const row = event.target.closest?.(`[data-id="${option.columnId}"]`);
-                                                const input = row?.querySelector('input[type="checkbox"]');
-                                                input?.focus();
+                                            const previousColumnId = currentlyDisplayedColumnIds[index - 1];
+                                            const previousColumn = colIdToCol[previousColumnId];
+                                            if (previousColumn) {
+                                                setSelectedColumnId(previousColumn.columnId);
+                                                scrollIntoView(previousColumn.columnId);
                                             }
-                                        }, renderOption: (option) => {
-                                            return ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)(ColumnPropertiesEditor, { column: selectedColumnId && currentOrderIds.includes(selectedColumnId)
+                                        }
+                                        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: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-1.5 twa:h-full", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: (0, utils_1.cn)(layoutWizardColumns_1.LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, 'twa:font-bold twa:shrink-0', 'twa:border-b twa:border-primarydark/30 twa:pb-1'), children: [(0, jsx_runtime_1.jsx)(CheckBox_1.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" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-w-0" }), (0, jsx_runtime_1.jsx)(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: layoutWizardColumns_1.LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS })] }), (0, jsx_runtime_1.jsx)(ReorderDraggable_1.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 (0, utils_1.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 ((0, jsx_runtime_1.jsx)(ColumnRow, { onColumnVisibilityChange: handleColumnVisibilityChange, onCheckboxFocus: setSelectedColumnId, layout: layout, column: option }));
+                                                }, onChange: handleColumnsChange })] }) }) }) }), currentOrderIds.length ? ((0, jsx_runtime_1.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] }) })] }));
+                                : null, layout: layout, columnSortsEnabled: layoutSupportedFeatures.ColumnSorts, resolveDefaultWidth: resolveDefaultWidth, onColumnNameChange: handleColumnNameChange, onPinChange: handlePinChange, onColumnSizingChange: handleColumnSizingChange, onSortChange: handleSortChange, parseNumberInput: parseNumberInput })) : null] }) }), (0, jsx_runtime_1.jsx)(columnLayoutCards_1.ColumnPinningWizardCard, { layout: layout, onChange: onChange, bindCard: bindCard }), (0, jsx_runtime_1.jsx)(columnLayoutCards_1.ColumnSizingWizardCard, { layout: layout, onChange: onChange, bindCard: bindCard }), layoutSupportedFeatures.ColumnSorts ? ((0, jsx_runtime_1.jsx)(SortSection_1.ColumnSortingWizardCard, { layout: layout, onChange: onChange, bindCard: bindCard })) : null] }));
 };
 exports.ColumnsSection = ColumnsSection;
 const hr = ((0, jsx_runtime_1.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 = (0, AdaptableContext_1.useAdaptable)();
     const baseCls = 'ab-Layout-Wizard__ColumnPropertiesEditor twa:border twa:rounded-standard';
     if (!props.column) {
-        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)(baseCls, 'twa:border-input-border twa:grid twa:place-items-center twa:border-dashed twa:border-2'), children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:items-center twa:justify-center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-text-on-primarydark ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Icon", children: (0, jsx_runtime_1.jsx)(icons_1.NaturallySizedIcon, { name: "inspector", style: { stroke: 'currentColor', fill: 'none', strokeWidth: 2 } }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-4 twa:font-bold ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Title", children: "No Column Selected" }), (0, jsx_runtime_1.jsx)(Flex_1.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 ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, utils_1.cn)(baseCls, 'twa:border-input-border twa:grid twa:place-items-center twa:border-dashed twa:border-2'), children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:items-center twa:justify-center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-muted-foreground ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Icon", children: (0, jsx_runtime_1.jsx)(icons_1.NaturallySizedIcon, { name: "inspector", style: { stroke: 'currentColor', fill: 'none', strokeWidth: 2 } }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-4 twa:font-bold ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Title", children: "No Column Selected" }), (0, jsx_runtime_1.jsx)(Flex_1.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 ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, clsx_1.default)(baseCls, 'ab-Layout-Wizard__ColumnPropertiesEditor__Container twa:border-none twa:bg-defaultbackground twa:shadow-md', 'twa:max-h-full twa:overflow-hidden twa:flex twa:flex-col'), children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:px-4 twa:pt-4", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-5 twa:font-bold twa:leading-relaxed ab-Layout-Wizard__ColumnPropertiesEditor__Title", children: ["Column Settings: ", column.friendlyName] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-3 twa:opacity-80 twa:flex twa:flex-row twa:gap-1 twa:items-center", children: ["Column ID:", ' ', (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:bg-primarydark/20 twa:text-text-on-primarydark twa:px-1 twa:py-0.5 twa:rounded-standard", children: column.columnId })] }), props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1", children: ["Column Group: ", props.column.columnGroup.friendlyName] })) : null] }), hr, (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:px-4 twa:flex-1 twa:overflow-y-auto twa:pb-3", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:mt-3", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-1", children: ["Header", (0, jsx_runtime_1.jsx)(Input_1.default, { "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 = (0, columnLayoutHelpers_1.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 = (0, columnLayoutHelpers_1.getColumnSortSelection)(props.layout, column.columnId);
+    const columnVisible = isColumnVisible({ columnId: column.columnId, layout: props.layout });
+    const orderedColumnIds = (0, layoutWizardColumns_1.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 ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.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: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:px-4 twa:pt-4", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-3 twa:font-medium twa:leading-snug ab-Layout-Wizard__ColumnPropertiesEditor__Title", children: ["Column Settings: ", column.friendlyName] }), (0, jsx_runtime_1.jsxs)(Flex_1.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:", ' ', (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:bg-primarydark/20 twa:text-muted-foreground twa:px-1 twa:py-0.5 twa:rounded-standard", children: column.columnId })] }), (0, jsx_runtime_1.jsxs)(Flex_1.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:", ' ', (0, jsx_runtime_1.jsx)(Flex_1.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 ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1", children: ["Column Group: ", props.column.columnGroup.friendlyName] })) : null] }), hr, (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:px-4 twa:flex-1 twa:overflow-y-auto twa:pb-3 twa:mt-3", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-3 twa:font-medium twa:mb-2", children: "Column Properties" }), (0, jsx_runtime_1.jsxs)(Flex_1.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: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: inspectorFieldGridClass, children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: columnInspectorLabelClass, children: "Header" }), (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-header", className: (0, utils_1.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 })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:grid twa:grid-cols-[1fr_1fr] twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Width:" }), " ", (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Flex:" }), (0, jsx_runtime_1.jsx)(Input_1.default, { "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 ?? '' }), (0, jsx_runtime_1.jsx)(Input_1.default, { "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 ?? '' }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Min Width:" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Max Width:" }), (0, jsx_runtime_1.jsx)(Input_1.default, { "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 ?? '' }), (0, jsx_runtime_1.jsx)(Input_1.default, { "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:", (0, jsx_runtime_1.jsxs)(Radio_1.RadioGroup, { value: columnPinning || 'None', name: "columnPinning", orientation: "horizontal", variant: "text-only", className: Radio_1.radioGroupStyling.horizontalTextOnly, onRadioChange: (columnPinning) => {
-                                    props.onPinChange(column.columnId, columnPinning === 'None' ? null : columnPinning);
-                                }, children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { value: "left", children: "Left" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: "None", children: "None" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: "right", children: "Right" })] })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-5" }), hr, (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:my-3", children: "Column Attributes" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)({
-                                    '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 }) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: (0, clsx_1.default)({
-                                        'twa:rounded-standard twa:gap-2': true,
-                                    }), children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:size-5", children: checked ? ((0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "check", className: "twa:text-success" })) : ((0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "close", className: "twa:text-error" })) }), label] }, label))) })] })] })] }));
+                                        }, value: customHeader }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: columnInspectorLabelClass, children: "Width" }), (0, jsx_runtime_1.jsx)(Input_1.default, { "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 ?? '' }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: columnInspectorLabelClass, children: "Flex" }), (0, jsx_runtime_1.jsx)(Input_1.default, { "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 ?? '' }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: columnInspectorLabelClass, children: "Min" }), (0, jsx_runtime_1.jsx)(Input_1.default, { "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 ?? '' }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: columnInspectorLabelClass, children: "Max" }), (0, jsx_runtime_1.jsx)(Input_1.default, { "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 ?? '' })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: columnInspectorLabelClass, children: "Pinning" }), (0, jsx_runtime_1.jsx)(Radio_1.RadioGroup, { orientation: "horizontal", variant: "text-only", className: Radio_1.radioGroupStyling.horizontalTextOnly, value: currentPin, name: `inspector-pinning-${column.columnId}`, onRadioChange: (value) => {
+                                            props.onPinChange(column.columnId, value === 'None' ? null : value);
+                                        }, children: columnLayoutHelpers_1.COLUMN_PINNING_OPTIONS.map((option) => ((0, jsx_runtime_1.jsx)(Radio_1.default, { value: option.value, "data-value": option.value, "data-name": `pinning-${column.columnId}-${option.value}`, children: option.label }, option.value))) })] }), props.columnSortsEnabled ? ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: columnInspectorLabelClass, children: "Sorting" }), (0, jsx_runtime_1.jsx)(Radio_1.RadioGroup, { orientation: "horizontal", variant: "text-only", className: Radio_1.radioGroupStyling.horizontalTextOnly, value: currentSort, name: `inspector-sorting-${column.columnId}`, onRadioChange: (value) => {
+                                            props.onSortChange(column.columnId, value);
+                                        }, children: columnLayoutHelpers_1.COLUMN_SORT_OPTIONS.map((option) => ((0, jsx_runtime_1.jsx)(Radio_1.default, { value: option.value, disabled: !column.sortable, "data-name": `inspector-sorting-${column.columnId}-${option.value}`, children: option.label }, option.value))) })] })) : null, (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: columnInspectorLabelClass, children: "Position" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-3", children: position || '—' })] }), (0, jsx_runtime_1.jsx)(Flex_1.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 }) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1.5 twa:min-w-0", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:size-4 twa:shrink-0", children: checked ? ((0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "check", className: "twa:text-success" })) : ((0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "close", className: "twa:text-destructive" })) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-3 twa:truncate", children: label })] }, label))) })] })] })] }));
 };