@adaptabletools/adaptable 23.1.0 → 24.0.0-canary.0

package/src/View/GridInfo/GridInfoPopup.js

@@ -0,0 +1,210 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
+import { ADAPTABLE_VERSION } from '../../EnvVars';
+import { AG_GRID_VERSION } from '../../agGrid/AgGridModulesAdapter';
+import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
+import Panel from '../../components/Panel';
+import { Tabs } from '../../components/Tabs';
+import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
+import { AdaptableObjectsSummary } from './AdaptableObjectsSummary';
+import { getDefaultAdaptableOptions } from '../../AdaptableOptions/DefaultAdaptableOptions';
+import { cn } from '../../lib/utils';
+const adaptableVersion = ADAPTABLE_VERSION;
+const agGridVersion = AG_GRID_VERSION;
+export const GridInfoPopup = (props) => {
+    const api = props.api;
+    const keyValuePairs = [];
+    const calcColumns = api.calculatedColumnApi
+        .getCalculatedColumns()
+        .map((c) => c.ColumnId);
+    const actionColumns = api.actionColumnApi
+        .getActionColumns()
+        .map((ac) => ac.columnId);
+    const freeTextColumns = api.freeTextColumnApi
+        .getFreeTextColumns()
+        .map((c) => c.ColumnId);
+    const columnFilterDescription = api.filterApi.columnFilterApi.columnFiltersToString(api.filterApi.columnFilterApi.getColumnFilters());
+    const gridFilterExpression = api.filterApi.gridFilterApi.getCurrentGridFilterExpression();
+    const sorts = ArrayExtensions.IsNotNullOrEmpty(props.api.gridApi.getColumnSorts())
+        ? api.gridApi.getColumnSorts().map((gs) => {
+            return api.columnApi.getFriendlyNameForColumnId(gs.ColumnId) + ': ' + gs.SortOrder;
+        })
+        : null;
+    const selectedRowInfo = api.gridApi.getSelectedRowInfo();
+    if (api.optionsApi.getUserInterfaceOptions()?.showAdapTableVersion) {
+        keyValuePairs.push({ Key: 'AdapTable Version', Value: adaptableVersion });
+    }
+    if (api.optionsApi.getUserInterfaceOptions()?.showAgGridVersion) {
+        keyValuePairs.push({ Key: 'AG Grid Version', Value: agGridVersion });
+    }
+    keyValuePairs.push({ Key: 'License Key', Value: api.optionsApi.getAdaptableOptions().licenseKey });
+    keyValuePairs.push({ Key: 'Sorted Columns', Value: ArrayExtensions.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None' });
+    keyValuePairs.push({ Key: 'Column Filters', Value: columnFilterDescription });
+    keyValuePairs.push({ Key: 'Grid Filter', Value: gridFilterExpression });
+    keyValuePairs.push({ Key: 'All Rows', Value: props.api.gridApi.getRowCount() });
+    keyValuePairs.push({ Key: 'Visible Rows', Value: props.api.gridApi.getVisibleRowCount() });
+    keyValuePairs.push({ Key: 'Selected Rows', Value: selectedRowInfo?.gridRows.length });
+    keyValuePairs.push({ Key: 'Visible Selected Rows', Value: selectedRowInfo?.gridRows.filter((gr) => gr.rowNode?.displayed == true).length });
+    keyValuePairs.push({ Key: 'All Columns', Value: props.api.gridApi.getColumnCount() });
+    keyValuePairs.push({ Key: 'Visible Columns', Value: props.api.gridApi.getVisibleColumnCount() });
+    keyValuePairs.push({ Key: 'Calculated Columns', Value: ArrayExtensions.IsNotNullOrEmpty(calcColumns)
+            ? ArrayExtensions.createCommaSeparatedString(calcColumns)
+            : 'None' });
+    keyValuePairs.push({ Key: 'Free Text Columns', Value: ArrayExtensions.IsNotNullOrEmpty(freeTextColumns)
+            ? ArrayExtensions.createCommaSeparatedString(freeTextColumns)
+            : 'None' });
+    keyValuePairs.push({ Key: 'Action Columns', Value: ArrayExtensions.IsNotNullOrEmpty(actionColumns)
+            ? ArrayExtensions.createCommaSeparatedString(actionColumns)
+            : 'None' });
+    const domProps = {
+        className: 'twa:flex-1 twa:min-h-0 twa:w-full',
+    };
+    keyValuePairs.map((keyValuePair) => {
+        return {
+            Key: keyValuePair.Key,
+            Value: keyValuePair.Value === 'Ignore' ? null : keyValuePair.Value,
+        };
+    })
+        .filter((x) => x.Value);
+    const columnsMap = {
+        Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
+        Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
+    };
+    const optionsColumnsMap = {
+        Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
+        Value: {
+            field: 'Value',
+            header: 'Value',
+            defaultFlex: 3,
+            render: ({ value }) => (_jsx("span", { style: {
+                    whiteSpace: 'pre-wrap',
+                    wordBreak: 'break-word',
+                    overflowWrap: 'anywhere',
+                    display: 'block',
+                    lineHeight: '18px',
+                    paddingTop: 4,
+                    paddingBottom: 4,
+                }, children: String(value ?? '') })),
+        },
+    };
+    const titleCase = (camel) => camel
+        .replace(/([a-z])([A-Z])/g, '$1 $2')
+        .replace(/^./, (c) => c.toUpperCase())
+        .replace(/\s./g, (c) => c.toUpperCase());
+    const ONE_LINE_MAX = 60;
+    const fnReplacer = (_k, val) => typeof val === 'function' ? '[Function]' : val;
+    const formatValuePart = (v) => {
+        if (typeof v === 'function')
+            return '[Function]';
+        if (v === undefined)
+            return 'undefined';
+        if (v === null)
+            return 'null';
+        if (typeof v === 'string')
+            return JSON.stringify(v);
+        if (Array.isArray(v) || typeof v === 'object') {
+            try {
+                const oneLine = JSON.stringify(v, fnReplacer);
+                if (oneLine !== undefined && oneLine.length <= ONE_LINE_MAX)
+                    return oneLine;
+                return JSON.stringify(v, fnReplacer, 2);
+            }
+            catch {
+                return String(v);
+            }
+        }
+        return String(v);
+    };
+    const displayValue = (v) => {
+        if (typeof v === 'function')
+            return '[Function]';
+        if (v === undefined)
+            return '(undefined)';
+        if (v === null)
+            return '(null)';
+        if (Array.isArray(v)) {
+            return formatValuePart(v);
+        }
+        if (typeof v === 'object') {
+            const entries = Object.entries(v).filter(([, val]) => val !== undefined);
+            if (entries.length === 0)
+                return '{}';
+            return entries.map(([k, val]) => `${k}: ${formatValuePart(val)}`).join('\n');
+        }
+        return String(v);
+    };
+    const gridOptionsSections = (() => {
+        const opts = api.optionsApi.getAdaptableOptions();
+        const defaults = getDefaultAdaptableOptions();
+        const baseRows = [];
+        const groupSections = [];
+        const isUserProvidedFunction = (groupKey, propKey, fn) => {
+            if (typeof fn !== 'function')
+                return false;
+            const defaultGroup = defaults[groupKey];
+            if (!defaultGroup || typeof defaultGroup !== 'object')
+                return true;
+            return defaultGroup[propKey] !== fn;
+        };
+        Object.keys(opts).forEach((key) => {
+            if (key === 'licenseKey' || key === 'initialState')
+                return;
+            const value = opts[key];
+            if (value == null)
+                return;
+            if (typeof value === 'object' && !Array.isArray(value)) {
+                const rows = Object.keys(value)
+                    .filter((sk) => {
+                    const sv = value[sk];
+                    if (sv == null)
+                        return false;
+                    if (typeof sv === 'function' && !isUserProvidedFunction(key, sk, sv)) {
+                        return false;
+                    }
+                    return true;
+                })
+                    .map((sk) => ({ Key: sk, Value: displayValue(value[sk]) }));
+                if (rows.length === 0)
+                    return;
+                groupSections.push({ title: titleCase(key), rows });
+            }
+            else {
+                if (typeof value === 'function' && defaults[key] === value)
+                    return;
+                baseRows.push({ Key: key, Value: displayValue(value) });
+            }
+        });
+        const sections = [];
+        if (baseRows.length > 0)
+            sections.push({ title: 'Base Properties', rows: baseRows });
+        sections.push(...groupSections);
+        return sections;
+    })();
+    const VALUE_CHARS_PER_LINE = 70;
+    const visualLineCount = (text) => {
+        if (!text)
+            return 1;
+        return text
+            .split('\n')
+            .reduce((acc, line) => acc + Math.max(1, Math.ceil(line.length / VALUE_CHARS_PER_LINE)), 0);
+    };
+    const calculateRowHeight = (row) => {
+        const lines = visualLineCount(String(row?.Value ?? ''));
+        if (lines <= 1)
+            return 32;
+        return lines * 18 + 12;
+    };
+    const sectionHeight = (rows) => {
+        const total = rows.reduce((acc, r) => acc + calculateRowHeight(r), 0);
+        return Math.min(total + 40, 400);
+    };
+    const enabledTabs = api.optionsApi.getSettingsPanelOptions()?.gridInfoTabs ??
+        ['Grid Options', 'Grid Summary', 'Grid State'];
+    const showSummary = enabledTabs.includes('Grid Summary');
+    const showState = enabledTabs.includes('Grid State');
+    const showOptions = enabledTabs.includes('Grid Options');
+    const baseClassName = 'ab-GridInfo';
+    return (_jsx(PopupPanel, { className: cn(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false, children: _jsx(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: _jsx(Panel.FlexBody, { children: _jsxs(Tabs, { className: "twa:flex-1 twa:min-h-0", children: [showSummary ? _jsx(Tabs.Tab, { children: "Grid Summary" }) : null, showState ? _jsx(Tabs.Tab, { children: "Grid State" }) : null, showOptions ? _jsx(Tabs.Tab, { children: "Grid Options" }) : null, showSummary ? (_jsx(Tabs.Content, { children: _jsx(DataSource, { data: keyValuePairs, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: domProps, columns: columnsMap }) }) })) : null, showState ? (_jsx(Tabs.Content, { children: _jsx(AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" }) })) : null, showOptions ? (_jsx(Tabs.Content, { children: _jsx("div", { className: "twa:min-h-0 twa:overflow-auto twa:p-2 twa:flex twa:flex-col twa:gap-4", children: gridOptionsSections.map((section) => (_jsxs("div", { children: [_jsx("h4", { className: "twa:font-semibold twa:mb-1", children: section.title }), _jsx(DataSource, { data: section.rows, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: {
+                                                    style: { height: sectionHeight(section.rows), width: '100%' },
+                                                }, rowHeight: (rowInfo) => calculateRowHeight(rowInfo.data), columns: optionsColumnsMap }) })] }, section.title))) }) })) : null] }) }) }) }));
+};

package/src/View/Layout/LayoutStatusBarSubPanelPopover.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useSelector } from 'react-redux';
 import { useAdaptable } from '../AdaptableContext';
 import { Box } from '../../components/Flex';
-import { SingleSelect } from '../../components/NewSelect';
+import { SingleSelect } from '../../components/Select';
 export const LayoutStatusbar = () => {
     const adaptable = useAdaptable();
     const layouts = adaptable.api.layoutApi.getLayouts();

package/src/View/Layout/LayoutViewPanel.d.ts

@@ -19,6 +19,7 @@ export declare const LayoutViewPanelControl: import("react-redux").ConnectedComp
     CurrentLayout: Layout;
     CurrentLayoutName: string;
     viewType: "Toolbar" | "ToolPanel";
+    toolbarPlacement?: "pinned" | "tabbed";
     api: import("../../types").AdaptableApi;
     accessLevel: import("../../types").AccessLevel;
     moduleInfo: import("../../Strategy/Interface/IModule").ModuleInfo;

package/src/View/Layout/LayoutViewPanel.js

@@ -15,7 +15,7 @@ import { isPivotLayout } from '../../Utilities/isPivotLayout';
 import { NewDropdownButton } from '../../components/DropdownButton';
 import { Icon } from '../../components/icons';
 import { Flex } from '../../components/Flex';
-import { SingleSelect } from '../../components/NewSelect';
+import { SingleSelect } from '../../components/Select';
 export const COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
 const LayoutViewPanelComponent = (props) => {
     const { Layouts, CurrentLayoutName, accessLevel, viewType, api, onSelectLayout, showMissingLayoutsError, } = props;

package/src/View/Layout/PivotDetailsPopoup.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
+import { resolveValueOrFunction } from '../../Utilities/Helpers/ValueOrFunctionHelper';
 import { useAdaptable } from '../AdaptableContext';
 const tableDOMProps = {
     style: {
@@ -22,19 +23,11 @@ export const PivotDetailsPopoup = (props) => {
     let data = rows;
     const columns = React.useMemo(() => {
         const getFriendlyName = (columnId) => adaptableApi.columnApi.getFriendlyNameForColumnId(columnId);
-        const pivotPreviewOptionColumn = adaptableApi.optionsApi.getLayoutOptions()?.pivotPreviewColumns;
-        let pivotPreviewExtraColumns = [];
-        if (typeof pivotPreviewOptionColumn === 'function') {
-            const pivotPreviewColumnsContext = {
-                layout: layout,
-                columnId: columnId,
-                ...adaptableApi.internalApi.buildBaseContext(),
-            };
-            pivotPreviewExtraColumns = pivotPreviewOptionColumn(pivotPreviewColumnsContext);
-        }
-        else if (Array.isArray(pivotPreviewOptionColumn)) {
-            pivotPreviewExtraColumns = pivotPreviewOptionColumn;
-        }
+        const pivotPreviewExtraColumns = resolveValueOrFunction(adaptableApi.optionsApi.getLayoutOptions()?.pivotPreviewColumns, {
+            layout,
+            columnId,
+            ...adaptableApi.internalApi.buildBaseContext(),
+        }) ?? [];
         let columns = {
             [primaryKey]: { field: primaryKey, header: getFriendlyName(primaryKey) },
         };

package/src/View/Layout/TransposedPopup.js

@@ -9,6 +9,7 @@ import { Box, Flex } from '../../components/Flex';
 import { ACCESS_LEVEL_HIDDEN } from '../../Utilities/Constants/GeneralConstants';
 import { ExportModuleId } from '../../Utilities/Constants/ModuleConstants';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
+import { resolveValueOrFunction } from '../../Utilities/Helpers/ValueOrFunctionHelper';
 const ADAPTABLE_CONTAINER_ID = 'transposed-adaptable-container';
 const AG_GRID_CONTAINER_ID = 'transposed-adaptable-ag-grid-container';
 const TRANSPOSED_FIRST_COLUMN_FIELD = '_transposed_column_value';
@@ -117,12 +118,10 @@ export const TransposedPopup = (props) => {
         if (!columnsToTranspose) {
             return allUIColumns;
         }
-        const columnIds = typeof columnsToTranspose === 'function'
-            ? columnsToTranspose({
-                ...adaptable.api.internalApi.buildBaseContext(),
-                columns: allUIColumns,
-            })
-            : columnsToTranspose;
+        const columnIds = resolveValueOrFunction(columnsToTranspose, {
+            ...adaptable.api.internalApi.buildBaseContext(),
+            columns: allUIColumns,
+        });
         return columnIds
             .map((c) => adaptable.api.columnApi.getColumnWithColumnId(c))
             .filter((col) => col != null);

package/src/View/Layout/Utilities/columnFilter.d.ts

@@ -0,0 +1,2 @@
+import { AdaptableColumn } from '../../../types';
+export declare const columnFilter: (column: AdaptableColumn, searchText: string) => boolean;

package/src/View/Layout/Utilities/columnLayoutHelpers.d.ts

@@ -0,0 +1,30 @@
+import type { ColumnSizingDefinition } from '../../../AdaptableState/LayoutState';
+import type { ColumnSort, Layout } from '../../../types';
+export declare const COLUMN_PINNING_OPTIONS: {
+    value: 'left' | 'right' | 'None';
+    label: string;
+}[];
+export declare const COLUMN_SORT_OPTIONS: {
+    value: ColumnSort['SortOrder'] | 'None';
+    label: string;
+}[];
+export type ColumnDefaultWidthResolver = (columnId: string) => number;
+export declare function getLayoutPinnedColumnIds(layout: Layout, side: 'left' | 'right'): string[];
+/** Whether this column has sizing stored in the Layout that differs from grid defaults. */
+export declare function hasExplicitLayoutSizing(columnId: string, sizing: ColumnSizingDefinition | undefined, resolveDefaultWidth?: ColumnDefaultWidthResolver): boolean;
+export declare function getLayoutExplicitSizedColumnIds(layout: Layout, resolveDefaultWidth?: ColumnDefaultWidthResolver): string[];
+export declare function formatColumnSizingBrief(columnId: string, sizing: ColumnSizingDefinition | undefined, resolveDefaultWidth?: ColumnDefaultWidthResolver): string;
+/** Width/flex values to show in the sizing editor (default grid widths are omitted). */
+export declare function getExplicitSizingDisplayValues(columnId: string, sizing: ColumnSizingDefinition | undefined, resolveDefaultWidth?: ColumnDefaultWidthResolver): {
+    width: number | undefined;
+    flex: number | undefined;
+    minWidth: number | undefined;
+    maxWidth: number | undefined;
+};
+export declare function formatColumnInspectorPinning(layout: Layout, columnId: string): string;
+export declare function formatColumnInspectorSizing(columnId: string, sizing: ColumnSizingDefinition | undefined, resolveDefaultWidth?: ColumnDefaultWidthResolver): string;
+export declare function formatColumnInspectorSorting(layout: Layout, columnId: string): string;
+export declare function getColumnSortSelection(layout: Layout, columnId: string): ColumnSort['SortOrder'] | 'None';
+export declare function applyColumnPinChange(layout: Layout, columnId: string, pinning: 'left' | 'right' | null): Layout;
+export declare function applyColumnSortChange(layout: Layout, columnId: string, sortOrder: ColumnSort['SortOrder'] | 'None'): Layout;
+export declare function applyColumnSizingFieldChange(layout: Layout, columnId: string, field: 'width' | 'flex' | 'minWidth' | 'maxWidth', value: number | undefined, resolveDefaultWidth: ColumnDefaultWidthResolver): Layout;

package/src/View/Layout/Utilities/layoutWizardAccordionHelpers.d.ts

@@ -0,0 +1,8 @@
+import { Layout, PivotLayout, TableLayout } from '../../../types';
+export declare function getLayoutWizardInitialExpandedCardId(layoutWizardMode: 'create' | 'edit' | undefined, firstCardId: string, isSectionConfigured: boolean): string | null;
+export declare function isColumnsSectionConfigured(layout: TableLayout): boolean;
+export declare function isRowGroupingSectionConfigured(layout: Layout): boolean;
+export declare function isPivotRowGroupingSectionConfigured(layout: PivotLayout): boolean;
+export declare function isTableAggregationsSectionConfigured(layout: TableLayout): boolean;
+export declare function isPivotAggregationsSectionConfigured(layout: PivotLayout): boolean;
+export declare function isPivotColumnsSectionConfigured(layout: PivotLayout): boolean;

package/src/View/Layout/Utilities/layoutWizardColumns.d.ts

@@ -0,0 +1,11 @@
+import { AdaptableColumn } from '../../../AdaptableState/Common/AdaptableColumn';
+import type { IAdaptable } from '../../../AdaptableInterfaces/IAdaptable';
+import type { Layout } from '../../../types';
+/** ValueSelector row sizing — matches Visibility and Order list rows. */
+export declare const LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS = "twa:!py-1 twa:!px-1.5";
+/** Compact list header — spacing between Select All, Show Selected Only, and search. */
+export declare const LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS = "twa:gap-4";
+/** Narrow search field (matches Visibility list column width, not full card width). */
+export declare const LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS = "twa:w-[12rem] twa:shrink-0 twa:min-w-0";
+/** Columns shown in Layout wizard column steps, in layout table order. */
+export declare function getLayoutWizardOrderedColumns(adaptable: IAdaptable, layout: Layout): AdaptableColumn[];

package/src/View/Layout/Utilities/layoutWizardColumns.js

@@ -0,0 +1,48 @@
+import { generateAutoRowGroupColumnForColumn, generateAutoRowGroupSingleColumn, generateAutoTreeSingleColumn, generateSelectionColumn, } from '../../../Api/Implementation/ColumnApiImpl';
+import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
+import { AG_GRID_GROUPED_COLUMN, AG_GRID_SELECTION_COLUMN } from '../../../Utilities/Constants/GeneralConstants';
+import { WIZARD_COLUMN_LIST_HEADER_CLASS, WIZARD_COLUMN_LIST_OPTION_CLASS, WIZARD_COLUMN_LIST_SEARCH_CLASS, } from '../../Wizard/wizardColumnListStyles';
+export const LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS = WIZARD_COLUMN_LIST_OPTION_CLASS;
+export const LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS = WIZARD_COLUMN_LIST_HEADER_CLASS;
+export const LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS = WIZARD_COLUMN_LIST_SEARCH_CLASS;
+export function getLayoutWizardOrderedColumns(adaptable, layout) {
+    const hasSelectionColumn = adaptable.api.columnApi
+        .getColumns()
+        .some((col) => col.isGeneratedSelectionColumn);
+    const allColumns = adaptable.api.columnApi
+        .getUIAvailableColumns()
+        .filter((col) => !col.isGeneratedRowGroupColumn)
+        .filter((col) => !col.isGeneratedPivotResultColumn)
+        .filter((col) => !col.isGeneratedSelectionColumn);
+    if (layout.RowGroupedColumns && layout.RowGroupedColumns.length > 0) {
+        if (layout.RowGroupDisplayType === 'single') {
+            allColumns.unshift(generateAutoRowGroupSingleColumn());
+        }
+        else if (layout.RowGroupDisplayType === 'multi') {
+            [...layout.RowGroupedColumns].reverse().forEach((col) => {
+                const groupCol = generateAutoRowGroupColumnForColumn(adaptable.api.columnApi.getColumnWithColumnId(col));
+                allColumns.unshift(groupCol);
+            });
+        }
+    }
+    if (adaptable.api.gridApi.isTreeDataGrid() &&
+        !allColumns.find((col) => col.columnId === AG_GRID_GROUPED_COLUMN)) {
+        allColumns.unshift(generateAutoTreeSingleColumn());
+    }
+    if (hasSelectionColumn) {
+        allColumns.unshift(generateSelectionColumn());
+    }
+    const colIdToCol = allColumns.reduce((acc, col) => {
+        if (col) {
+            acc[col.columnId] = col;
+        }
+        return acc;
+    }, {});
+    let tableColumns = layout.TableColumns ?? [];
+    if (hasSelectionColumn && !tableColumns.includes(AG_GRID_SELECTION_COLUMN)) {
+        tableColumns = [AG_GRID_SELECTION_COLUMN, ...tableColumns];
+    }
+    return ArrayExtensions.sortArrayWithOrder(allColumns.map((col) => col.columnId), tableColumns, { sortUnorderedItems: false })
+        .map((colId) => colIdToCol[colId])
+        .filter(Boolean);
+}

package/src/View/Layout/Wizard/getGridFilterPreview.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ExpressionPreview } from '../../../components/ExpressionEditor/ExpressionPreview';
-import { Tag } from '../../../components/Tag';
+import { ExpressionPreview } from '../../../components/aql/ExpressionEditor/ExpressionPreview';
+import { ExpressionTag } from '../../../components/Tag';
 export const getGridFilterViewItems = (layout) => {
     return {
         name: 'Grid Filter',
-        view: (_jsx(Tag, { children: _jsx(ExpressionPreview, { query: { BooleanExpression: layout.GridFilter?.Expression } }) })),
+        view: (_jsx(ExpressionTag, { children: _jsx(ExpressionPreview, { expression: layout.GridFilter?.Expression }) })),
     };
 };

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

@@ -1,22 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { ColumnTag, Tag } from '../../../../components/Tag';
+import { AccentTag, Tag } from '../../../../components/Tag';
 import { getDisplayAggFuncNames, } from '../../../../AdaptableState/Common/AggregationColumns';
 import { useAdaptable } from '../../../AdaptableContext';
 import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
-import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../../Wizard/CollapsibleWizardCard';
-import { getLayoutWizardInitialExpandedCardId, isTableAggregationsSectionConfigured, } from './layoutWizardAccordionHelpers';
-import { columnFilter } from './Utilities';
+import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactAccentTags, useWizardCardAccordion, } from '../../../Wizard/CollapsibleWizardCard';
+import { getLayoutWizardInitialExpandedCardId, isTableAggregationsSectionConfigured, } from '../../Utilities/layoutWizardAccordionHelpers';
+import { columnFilter } from '../../Utilities/columnFilter';
 import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { Card } from '../../../../components/Card';
 import { Box, Flex } from '../../../../components/Flex';
-import { SingleSelect } from '../../../../components/NewSelect';
-import { LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from './layoutWizardColumns';
+import { SingleSelect } from '../../../../components/Select';
+import { LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from '../../Utilities/layoutWizardColumns';
 import Radio, { RadioGroup } from '../../../../components/Radio';
 import { TypeRadio } from '../../../Wizard/TypeRadio';
-import { getTableAggregationSummaryValues } from '../../../../Strategy/Utilities/Layout/aggregationSummaryHelpers';
+import { getTableAggregationSummaryValues } from '../../../../View/ObjectItemViews/Layout/aggregationSummaryHelpers';
 import { renderSummaryStringTags } from '../../../Wizard/SummaryColorTag';
 const WEIGHTED_AVERAGE_AGG_FN_NAME = 'weightedAvg';
 export const GRAND_TOTAL_ROW_LABELS = {
@@ -222,7 +222,11 @@ export const AggregationsSection = (props) => {
     const aggregationEntries = layout.TableAggregationColumns || [];
     const initialExpandedCardId = getLayoutWizardInitialExpandedCardId(props.layoutWizardMode, 'columns', isTableAggregationsSectionConfigured(layout));
     const { bindCard, hasExpandedCard, expandedFillsSpace } = useWizardCardAccordion(initialExpandedCardId);
-    return (_jsxs(Box, { className: getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), children: [_jsx(CollapsibleWizardCard, { ...bindCard('columns', { fillAvailable: true }), surface: "panel", "data-name": "aggregation-columns", title: "Aggregation Columns", help: "Select a column and an aggregation function", collapsedHelp: "", compactSummary: renderCompactColumnTags(aggregationEntries.map(({ ColumnId }) => ColumnId), (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' }), summary: aggregationEntries.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: aggregationEntries.map(({ ColumnId, AggFunc }) => (_jsxs(ColumnTag, { children: [adaptable.api.columnApi.getFriendlyNameForColumnId(ColumnId), " (", getAggFuncSummaryLabel(ColumnId, AggFunc, aggregationColumnsMap), ")"] }, ColumnId))) })) : (_jsx(Tag, { children: "No columns" })), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", 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:px-1 twa:pt-0 twa:pb-0", children: _jsx(Box, { className: "twa:flex twa:flex-col twa:gap-1.5 twa:h-full twa:overflow-hidden twa:flex-1 twa:min-h-0", "data-name": "aggregation-columns-container", children: _jsx(ValueSelector, { compact: true, showFilterInput: true, filter: columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, optionLayout: "label-beside-checkbox", toggleSelectionOnRowClick: true, optionClassName: LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => (_jsx(ColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap, numberColumns: numberColumns })), options: sortedAggregableColumns, value: aggregationEntries.map((agg) => agg.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange }) }) }) }) }), _jsx(CollapsibleWizardCard, { ...bindCard('suppress-header'), surface: "panel", "data-name": "omit-aggregation-from-header", title: "Aggregation Column Header", help: "Set behaviour for aggregation function names", collapsedHelp: "Behaviour for aggregation function names", compactSummary: _jsx(Tag, { children: layout.SuppressAggFuncInHeader ? 'Hide Function Name in Header' : 'Show Function Name in Header' }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: layout.SuppressAggFuncInHeader ? 'Hide Function Name in Header' : 'Show Function Name in Header' }) }), children: _jsxs(RadioGroup, { orientation: "vertical", value: layout.SuppressAggFuncInHeader ?? false, onRadioChange: handleSuppressAggFuncInHeader, children: [_jsx(Radio, { value: false, children: "Show Aggregation function names" }), _jsx(Radio, { value: true, children: "Hide Aggregation function names" })] }) }), _jsx(CollapsibleWizardCard, { ...bindCard('grand-total'), surface: "panel", "data-name": "grand-total-row", title: "Grand Total Row", help: "Set position of the Grand Total Row in the grid", collapsedHelp: "Position of the Grand Total Row in the grid", compactSummary: _jsx(Tag, { children: getGrandTotalRowLabel(layout) }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: getGrandTotalRowLabel(layout) }) }), children: _jsx(RadioGroup, { orientation: "vertical", value: getGrandTotalRowKey(layout), onRadioChange: (key) => {
+    return (_jsxs(Box, { className: getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), children: [_jsx(CollapsibleWizardCard, { ...bindCard('columns', { fillAvailable: true }), surface: "panel", "data-name": "aggregation-columns", title: "Aggregation Columns", help: "Select a column and an aggregation function", collapsedHelp: "", compactSummary: renderCompactAccentTags(aggregationEntries.map(({ ColumnId }) => ColumnId), (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' }), summary: aggregationEntries.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: aggregationEntries.map(({ ColumnId, AggFunc }) => (_jsxs(AccentTag, { children: [adaptable.api.columnApi.getFriendlyNameForColumnId(ColumnId), " (", getAggFuncSummaryLabel(ColumnId, AggFunc, aggregationColumnsMap), ")"] }, ColumnId))) })) : (_jsx(Tag, { children: "No columns" })), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", 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:px-1 twa:pt-0 twa:pb-0", children: _jsx(Box, { className: "twa:flex twa:flex-col twa:gap-1.5 twa:h-full twa:overflow-hidden twa:flex-1 twa:min-h-0", "data-name": "aggregation-columns-container", children: _jsx(ValueSelector, { compact: true, showFilterInput: true, filter: columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, optionLayout: "label-beside-checkbox", toggleSelectionOnRowClick: true, optionClassName: LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => (_jsx(ColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap, numberColumns: numberColumns })), options: sortedAggregableColumns, value: aggregationEntries.map((agg) => agg.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange }) }) }) }) }), _jsx(CollapsibleWizardCard, { ...bindCard('suppress-header'), surface: "panel", "data-name": "omit-aggregation-from-header", title: "Aggregation Column Header", help: "Set behaviour for aggregation function names", collapsedHelp: "Behaviour for aggregation function names", compactSummary: _jsx(Tag, { children: layout.SuppressAggFuncInHeader
+                        ? 'Hide Function Name in Header'
+                        : 'Show Function Name in Header' }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: layout.SuppressAggFuncInHeader
+                            ? 'Hide Function Name in Header'
+                            : 'Show Function Name in Header' }) }), children: _jsxs(RadioGroup, { orientation: "vertical", value: layout.SuppressAggFuncInHeader ?? false, onRadioChange: handleSuppressAggFuncInHeader, children: [_jsx(Radio, { value: false, children: "Show Aggregation function names" }), _jsx(Radio, { value: true, children: "Hide Aggregation function names" })] }) }), _jsx(CollapsibleWizardCard, { ...bindCard('grand-total'), surface: "panel", "data-name": "grand-total-row", title: "Grand Total Row", help: "Set position of the Grand Total Row in the grid", collapsedHelp: "Position of the Grand Total Row in the grid", compactSummary: _jsx(Tag, { children: getGrandTotalRowLabel(layout) }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: getGrandTotalRowLabel(layout) }) }), children: _jsx(RadioGroup, { orientation: "vertical", value: getGrandTotalRowKey(layout), onRadioChange: (key) => {
                         props.onChange({
                             ...layout,
                             GrandTotalRow: key === 'off' ? null : key,

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

@@ -3,15 +3,15 @@ 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 Radio, { RadioGroup } from '../../../../components/Radio';
+import { AccentTag, Tag } from '../../../../components/Tag';
+import { CollapsibleWizardCard, getWizardAccordionSectionClassName, renderCompactAccentTags, 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 { columnFilter } from '../../Utilities/columnFilter';
 import { Icon, NaturallySizedIcon } from '../../../../components/icons';
 import { CheckBox } from '../../../../components/CheckBox';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
@@ -22,10 +22,10 @@ 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 { 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 { applyColumnPinChange, applyColumnSizingFieldChange, applyColumnSortChange, COLUMN_PINNING_OPTIONS, COLUMN_SORT_OPTIONS, getColumnSortSelection, getExplicitSizingDisplayValues, } from '../../Utilities/columnLayoutHelpers';
+import { getLayoutWizardInitialExpandedCardId, isColumnsSectionConfigured, } from '../../Utilities/layoutWizardAccordionHelpers';
+import { getLayoutWizardOrderedColumns, LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from '../../Utilities/layoutWizardColumns';
+import { getTableColumnsSummaryGroups, TABLE_COLUMNS_WIZARD_SUBSECTION_LABELS, } from '../../../../View/ObjectItemViews/Layout/columnsSummaryHelpers';
 import { renderSummaryStringTags } from '../../../Wizard/SummaryColorTag';
 export const ColumnsSectionSummary = (props) => {
     const adaptable = useAdaptable();
@@ -220,8 +220,8 @@ export const ColumnsSection = (props) => {
     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 orderSummary = orderSummaryColumnIds.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: orderSummaryColumnIds.map((columnId) => (_jsx(AccentTag, { 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: renderCompactAccentTags(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' });
@@ -337,9 +337,9 @@ const ColumnPropertiesEditor = (props) => {
                                             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) => {
+                                        }, 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", 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) => {
+                                        }, 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", 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 },