@adaptabletools/adaptable 21.2.2-canary.0 → 22.0.0-canary.1

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

@@ -1,30 +1,28 @@
 import { DataSource, InfiniteTableGrid, } from '../../../../components/InfiniteTable';
 import * as React from 'react';
-import { Box, Flex, Text } from 'rebass';
-import DropdownButton from '../../../../components/DropdownButton';
-import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import Input from '../../../../components/Input';
-import SimpleButton from '../../../../components/SimpleButton';
 import { Tabs } from '../../../../components/Tabs';
-import { Tag } from '../../../../components/Tag';
 import { isValidOrderForColumnGroups, } from '../../../../AdaptableState/Common/AdaptableColumn';
 import { useAdaptable } from '../../../AdaptableContext';
-import { renderSelectionSection } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { columnFilter } from './Utilities';
 import { Icon, NaturallySizedIcon } from '../../../../components/icons';
 import { CheckBox } from '../../../../components/CheckBox';
 import { clamp } from '../../../../Utilities/Helpers/Helper';
-import { ColumnLabels } from '../Components/ColumnLabels';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
-import { generateAutoRowGroupColumnForColumn, generateAutoRowGroupSingleColumn, generateAutoTreeSingleColumn, } from '../../../../Api/Implementation/ColumnApiImpl';
+import { generateAutoRowGroupColumnForColumn, generateAutoRowGroupSingleColumn, generateAutoTreeSingleColumn, isAutoRowGroupColumn, } from '../../../../Api/Implementation/ColumnApiImpl';
 import { ReorderDraggable } from '../../../Components/ReorderDraggable';
 import { AdaptableFormControlTextClear } from '../../../Components/Forms/AdaptableFormControlTextClear';
 import { sortColumnIdsByOrder } from '../../../../layout-manager/src/sortColumnIdsByOrder';
-import HelpBlock from '../../../../components/HelpBlock';
 import { AG_GRID_GROUPED_COLUMN, AG_GRID_SELECTION_COLUMN, } from '../../../../Utilities/Constants/GeneralConstants';
 import { isPivotLayout } from '../../../../Utilities/isPivotLayout';
-const PropertyOrderText = (props) => (React.createElement(Text, { fontWeight: 600, fontSize: 2 }, props.children));
+import { Box, Flex } from '../../../../components/Flex';
+import clsx from 'clsx';
+import Radio, { RadioGroup, radioGroupStyling } from '../../../../components/Radio';
+const PropertyOrderText = (props) => (React.createElement(Box, { className: "twa:font-bold twa:text-2" }, props.children));
+// we want to make sure tailwind generates this class
+// as for now it's not used anywhere yet
+const _cls = 'twa:text-text-on-defaultbackground';
 const columnTypes = {
     default: {
         defaultFlex: 1,
@@ -118,7 +116,7 @@ export const ColumnsSectionSummary = () => {
                         return React.createElement(React.Fragment, null);
                     }
                     return (React.createElement(Flex, null,
-                        React.createElement(CheckBox, { margin: 0, mr: 1, checked: true }),
+                        React.createElement(CheckBox, { className: "twa:m-0 twa:mr-1", checked: true }),
                         React.createElement(PropertyOrderText, null, params.data?.grouping)));
                 },
             },
@@ -134,93 +132,38 @@ export const ColumnsSectionSummary = () => {
     return (React.createElement(DataSource, { data: data, primaryKey: "columnId" },
         React.createElement(InfiniteTableGrid, { columnTypes: columnTypes, rowHeight: rowHeight, columnHeaderHeight: headerHeight, domProps: tableDOMProps, columns: columns })));
 };
+const isColumnVisible = (options) => {
+    const { columnId, layout } = options;
+    const isRowGroupColumn = isAutoRowGroupColumn(columnId);
+    const visible = (!isPivotLayout(layout) &&
+        layout.TableColumns.includes(columnId) &&
+        layout.ColumnVisibility?.[columnId] !== false) ||
+        isRowGroupColumn;
+    return visible;
+};
 const ColumnRow = (props) => {
-    const [isExpanded, setIsExpanded] = React.useState(false);
     const adaptable = useAdaptable();
     const initialHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(props.column.columnId, props.layout);
-    const isRowGroupColumn = adaptable.api.columnApi.isAutoRowGroupColumn(props.column.columnId);
-    const customHeader = props.layout.ColumnHeaders?.[props.column.columnId] ?? initialHeader;
-    // column pinning
-    const columnPinning = props.layout.ColumnPinning?.[props.column.columnId] || 'None';
-    const pinningOptions = [
-        { value: 'None', label: 'None', onClick: () => props.onPinChange(props.column.columnId, null) },
-        {
-            value: 'left',
-            label: 'Left',
-            onClick: () => props.onPinChange(props.column.columnId, 'left'),
-        },
-        {
-            value: 'right',
-            label: 'Right',
-            onClick: () => props.onPinChange(props.column.columnId, 'right'),
-        },
-    ];
+    const isRowGroupColumn = isAutoRowGroupColumn(props.column.columnId);
     const { column } = props;
-    // width
-    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;
-    const visible = (!isPivotLayout(props.layout) &&
-        props.layout.TableColumns.includes(column.columnId) &&
-        props.layout.ColumnVisibility?.[column.columnId] !== false) ||
-        isRowGroupColumn;
-    return (React.createElement(Box, { "data-name": props.column.columnId, className: "ab-Layout-Wizard__ColumnRow" },
-        React.createElement(Flex, { className: "ab-Layout-Wizard__ColumnRow__Header", mt: 1, mb: 1, onClick: () => setIsExpanded(!isExpanded) },
+    const visible = isColumnVisible({ columnId: column.columnId, layout: props.layout });
+    return (React.createElement(Box, { "data-name": props.column.columnId, className: "twa:flex-1" },
+        React.createElement(Flex, { className: "ab-Layout-Wizard__ColumnRow__Header twa:my-1" },
             React.createElement(CheckBox, { "data-name": column.columnId, onChange: (checked) => {
                     props.onColumnVisibilityChange(column.columnId, checked);
                 }, disabled: column.hideable === false || isRowGroupColumn, onClick: (event) => {
                     event.stopPropagation();
                 }, checked: visible }),
-            React.createElement(Flex, { ml: 2, mr: 2, alignItems: "center", "data-name": "column-label" }, initialHeader),
-            props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(Box, { className: "ab-Layout-Wizard__ColumnRow__Title", ml: 2, mr: 2, padding: 1 },
+            React.createElement(Flex, { className: "twa:mx-2", alignItems: "center", "data-name": "column-label" }, initialHeader),
+            props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1" },
                 "Column Group: ",
-                props.column.columnGroup.friendlyName)) : null,
-            React.createElement(Flex, { mr: 2 },
-                React.createElement(ColumnLabels, { showTitle: false, sortable: props.column.sortable, filterable: props.column.filterable, pivotable: props.column.pivotable, moveable: props.column.moveable, groupable: props.column.groupable, aggregatable: props.column.aggregatable })),
-            React.createElement(Box, { flex: 1 }),
-            React.createElement(SimpleButton, { "data-name": "expand-collapse", "data-value": isExpanded ? 'expanded' : 'collapsed', ml: 10, padding: 0, iconSize: 24, variant: "text", onClick: () => setIsExpanded(!isExpanded), icon: isExpanded ? 'triangle-up' : 'triangle-down' })),
-        isExpanded && (React.createElement(Box, { className: "ab-Layout-Wizard__ColumnRow__Expanded-Container", mb: 2, padding: 2, mt: 2 },
-            React.createElement(Flex, { mb: 2 },
-                React.createElement(FormLayout, { width: "100%", mr: 3 },
-                    React.createElement(FormRow, { label: "ColumnId" },
-                        React.createElement(Tag, null, props.column.columnId)),
-                    React.createElement(FormRow, { label: "Header" },
-                        React.createElement(Input, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnRow__Input", placeholder: "Custom name (optional)", onChange: () => {
-                                props.onColumnNameChange(props.column.columnId, event.target.value);
-                            }, value: customHeader })),
-                    React.createElement(FormRow, { label: "Width" },
-                        React.createElement(Input, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnRow__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 ?? '' })),
-                    React.createElement(FormRow, { label: "Flex" },
-                        React.createElement(Input, { "data-name": "column-flex", className: "ab-Layout-Wizard__ColumnRow__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 ?? '' })),
-                    React.createElement(FormRow, { label: "Min Width" },
-                        React.createElement(Input, { "data-name": "column-min-width", className: "ab-Layout-Wizard__ColumnRow__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 ?? '' })),
-                    React.createElement(FormRow, { label: "Max Width" },
-                        React.createElement(Input, { "data-name": "column-max-width", className: "ab-Layout-Wizard__ColumnRow__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 ?? '' })),
-                    React.createElement(FormRow, { label: "Pinning" },
-                        React.createElement(DropdownButton, { "data-name": "column-pinning", columns: ['label'], items: pinningOptions }, pinningOptions.find((option) => option.value === columnPinning).label))))))));
+                props.column.columnGroup.friendlyName)) : null)));
 };
 export const ColumnsSection = (props) => {
     const adaptable = useAdaptable();
     const { data: layout } = useOnePageAdaptableWizardContext();
     const [searchInputValue, setSearchInputValue] = React.useState('');
+    const [selectedColumnId, setSelectedColumnId] = React.useState(null);
     let hasSelectionColumn = false;
     const allColumns = adaptable.api.columnApi
         .getUIAvailableColumns()
@@ -279,6 +222,7 @@ export const ColumnsSection = (props) => {
             return columnFilter(col, searchInputValue);
         })
         : ColumnOrderAllColumns;
+    const currentOrderIds = currentOrder.map((col) => col.columnId);
     const handleColumnsChange = (newColumns) => {
         if (searchInputValue) {
             // there's a search in-place
@@ -312,18 +256,26 @@ export const ColumnsSection = (props) => {
         });
     };
     const handleColumnVisibilityChange = (columnId, visible) => {
+        const columnIdArray = Array.isArray(columnId) ? columnId : [columnId];
+        const columnIdSet = new Set(columnIdArray);
         const ColumnVisibility = { ...layout.ColumnVisibility };
         let TableColumns = [...layout.TableColumns];
         if (visible) {
-            delete ColumnVisibility[columnId];
+            columnIdArray.forEach((colId) => {
+                delete ColumnVisibility[colId];
+            });
         }
         else {
-            ColumnVisibility[columnId] = false;
+            columnIdArray.forEach((colId) => {
+                ColumnVisibility[colId] = false;
+            });
         }
         const columnIds = ColumnOrderAllColumns.map((col) => col.columnId);
         const idsToIndexes = new Map(columnIds.map((colId, index) => [colId, index]));
         const columnOrderSet = new Set(TableColumns);
-        if (!columnOrderSet.has(columnId)) {
+        const currentColumnIdsAreIncluded = columnIdArray.every((colId) => columnOrderSet.has(colId));
+        if (!currentColumnIdsAreIncluded) {
+            const biggestIndex = Math.max(...columnIdArray.map((colId) => idsToIndexes.get(colId)));
             TableColumns = columnIds.filter((colId) => {
                 const isCurrent = columnOrderSet.has(colId);
                 if (isCurrent) {
@@ -331,9 +283,9 @@ export const ColumnsSection = (props) => {
                 }
                 // include all columns past the current column order
                 // that reach until the index of the currently checked column
-                const shouldInclude = idsToIndexes.get(colId) <= idsToIndexes.get(columnId);
+                const shouldInclude = idsToIndexes.get(colId) <= biggestIndex;
                 if (shouldInclude) {
-                    if (colId !== columnId && visible) {
+                    if (!columnIdSet.has(colId) && visible) {
                         // this is a column that's between the current column order limit
                         // and the currently checked column
                         // so we need to include it in order
@@ -415,56 +367,179 @@ export const ColumnsSection = (props) => {
             adaptable.api.columnApi.isSelectionColumn(colId) === false &&
             !adaptable.api.columnApi.internalApi.isAlwaysHiddenColumn(colId));
     });
-    const toLabel = (colId) => adaptable.api.columnApi.getFriendlyNameForColumnId(colId, layout);
-    const toIdentifier = (colId) => colId;
+    const currentlyDisplayedColumnIds = searchInputValue
+        ? currentOrder
+            .filter((col) => currentOrderIds.includes(col.columnId))
+            .map((col) => col.columnId)
+        : currentOrder.map((col) => col.columnId);
+    const visibleIdsCurrentlyDisplayed = visibleIds.filter((colId) => currentlyDisplayedColumnIds.includes(colId));
     return (React.createElement(Tabs, null,
         React.createElement(Tabs.Tab, null, "Columns"),
-        React.createElement(Tabs.Content, { style: { overflow: 'hidden' } },
-            React.createElement(Flex, { mt: 2, mb: 3 },
-                React.createElement(ColumnLabels, { flexDirection: "row", showBoth: false, labels: {
-                        Sortable: 'Sortable',
-                        Filterable: 'Filterable',
-                        Aggregatable: 'Aggregatable',
-                        Groupable: 'Groupable',
-                        Moveable: 'Moveable',
-                        Pivotable: 'Pivotable',
-                    }, sortable: true, filterable: true, moveable: true, pivotable: true, groupable: true, aggregatable: true })),
-            React.createElement(Flex, { mb: 1, alignItems: "center", flexDirection: "row" },
-                React.createElement(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", style: { border: 0, margin: 3, width: '100%' } }),
-                React.createElement(Box, { flex: 1 })),
-            React.createElement(HelpBlock, { mb: 1, fontSize: 2, display: 'flex', "data-name": "column-help", alignItems: 'center' },
-                React.createElement(Box, null,
-                    React.createElement(NaturallySizedIcon, { name: "info" })),
-                React.createElement(Text, { ml: 1 }, "Expand each Column to set Width, Pinnning and a custom Header")),
-            React.createElement(ReorderDraggable, { toIdentifier: (option) => `${option.columnId}`, isOptionDraggable: (option) => {
-                    return option.moveable;
-                }, order: currentOrder, renderOption: (option) => {
-                    return (React.createElement(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange, onPinChange: handlePinChange, layout: layout, column: option }));
-                }, onChange: handleColumnsChange }),
-            renderSelectionSection({
-                options: visibleIds,
-                value: visibleIds,
-                toLabel,
-                toIdentifier,
-                isOptionDisabled: (colId) => adaptable.api.columnApi.isAutoRowGroupColumn(colId) ||
-                    adaptable.api.columnApi.getColumnWithColumnId(colId)?.hideable === false,
-                xSelectedLabel: () => {
-                    return `Selected Columns:`;
-                },
-                noSelectionLabel: `No Columns Selected`,
-                onChange: handleColumnsChange,
-                onSelectAll: () => {
-                    onChange({
-                        ...layout,
-                        ColumnVisibility: {},
-                        TableColumns: ColumnOrderAllColumns.map((col) => col.columnId),
-                    });
-                },
-                onClear: () => {
-                    handleColumnsChange([]);
-                },
-                onClearOption: (colId) => {
-                    handleColumnVisibilityChange(colId, false);
-                },
-            }))));
+        React.createElement(Tabs.Content, { className: "twa:overflow-hidden" },
+            React.createElement(Box, { className: "twa:grid twa:grid-cols-2 twa:gap-2 twa:focus:outline-none", "data-name": "columns-container", tabIndex: -1, onKeyDown: (event) => {
+                    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);
+                        }
+                    }
+                    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);
+                        }
+                    }
+                    if (event.key === ' ') {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        const selectedColumn = colIdToCol[selectedColumnId];
+                        if (!selectedColumn) {
+                            return;
+                        }
+                        const visible = isColumnVisible({ columnId: selectedColumnId, layout });
+                        handleColumnVisibilityChange(selectedColumnId, !visible);
+                    }
+                } },
+                React.createElement(Box, { className: "twa:flex twa:flex-col twa:gap-2" },
+                    React.createElement(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: "twa:w-full twa:border-none twa:p-1" }),
+                    React.createElement(Box, { className: clsx('twa:font-bold', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard') },
+                        React.createElement(CheckBox, { checked: currentlyDisplayedColumnIds.length
+                                ? currentlyDisplayedColumnIds.length === visibleIdsCurrentlyDisplayed.length
+                                    ? true
+                                    : visibleIdsCurrentlyDisplayed.length
+                                        ? null
+                                        : false
+                                : false, onChange: (checked) => {
+                                handleColumnVisibilityChange(currentlyDisplayedColumnIds, checked);
+                            } }, "Select All")),
+                    React.createElement(ReorderDraggable, { toIdentifier: (option) => `${option.columnId}`, isOptionDraggable: (option) => {
+                            return option.moveable;
+                        }, optionClassName: (option) => {
+                            const baseCls = 'ab-Layout-Wizard__ColumnRow twa:cursor-pointer twa:rounded-standard';
+                            if (selectedColumnId !== option.columnId) {
+                                return baseCls;
+                            }
+                            return clsx(baseCls, 'twa:after:border-accent twa:relative twa:after:border-2 twa:after:rounded-standard twa:after:pointer-events-none twa:after:inset-0 twa:after:absolute twa:after:bg-accent/15');
+                        }, order: currentOrder, onOptionClick: (option, event) => {
+                            if (event.ctrlKey || option.columnId === selectedColumnId) {
+                                setSelectedColumnId(null);
+                            }
+                            else {
+                                setSelectedColumnId(option.columnId);
+                            }
+                        }, renderOption: (option) => {
+                            return (React.createElement(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange, onPinChange: handlePinChange, layout: layout, column: option }));
+                        }, onChange: handleColumnsChange })),
+                currentOrderIds.length ? (React.createElement(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))));
+};
+const hr = React.createElement("hr", { className: "twa:my-2 twa:h-[0.5px] twa:bg-inputborder/50 twa:border-none" });
+const ColumnPropertiesEditor = (props) => {
+    const adaptable = useAdaptable();
+    const baseCls = 'ab-Layout-Wizard__ColumnPropertiesEditor twa:border twa:rounded-standard';
+    if (!props.column) {
+        return (React.createElement(Box, { className: clsx(baseCls, 'twa:border-inputborder twa:grid twa:place-items-center twa:border-dashed twa:border-2') },
+            React.createElement(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:items-center twa:justify-center" },
+                React.createElement(Box, { className: "twa:text-text-on-primarydark ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Icon" },
+                    React.createElement(NaturallySizedIcon, { name: "inspector", style: { stroke: 'currentColor', fill: 'none', strokeWidth: 2 } })),
+                React.createElement(Box, { className: "twa:text-4 twa:font-bold ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Title" }, "No Column Selected"),
+                React.createElement(Box, { className: "twa:text-3 twa:opacity-80 ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Description" }, "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 (React.createElement(Box, { className: clsx(baseCls, 'ab-Layout-Wizard__ColumnPropertiesEditor__Container twa:border-none twa:bg-defaultbackground twa:shadow-md twa:p-4') },
+        React.createElement(Box, { className: "twa:text-5 twa:font-bold twa:leading-relaxed ab-Layout-Wizard__ColumnPropertiesEditor__Title" },
+            "Column Settings: ",
+            column.friendlyName),
+        React.createElement(Box, { className: "twa:text-3 twa:opacity-80 twa:flex twa:flex-row twa:gap-1 twa:items-center" },
+            "Column ID:",
+            ' ',
+            React.createElement(Box, { className: "twa:bg-primarydark/20 twa:text-text-on-primarydark twa:px-1 twa:py-0.5 twa:rounded-standard" }, column.columnId)),
+        props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1" },
+            "Column Group: ",
+            props.column.columnGroup.friendlyName)) : null,
+        hr,
+        React.createElement(Flex, { flexDirection: "column", className: "twa:gap-3" },
+            React.createElement(Flex, { flexDirection: "column", className: "twa:gap-1" },
+                "Header",
+                React.createElement(Input, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input twa:w-full", placeholder: "Custom name (optional)", onChange: () => {
+                        props.onColumnNameChange(props.column.columnId, event.target.value);
+                    }, value: customHeader })),
+            React.createElement(Box, { className: "twa:grid twa:grid-cols-[1fr_1fr] twa:gap-2" },
+                React.createElement(Box, null, "Width:"),
+                " ",
+                React.createElement(Box, null, "Flex:"),
+                React.createElement(Input, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column width", disabled: resizable === false, onChange: (event) => {
+                        let value = parseFloat(event.target.value);
+                        value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                        props.onColumnWidthChange(props.column.columnId, value);
+                    }, value: columnWidth ?? '' }),
+                React.createElement(Input, { "data-name": "column-flex", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column flex", disabled: resizable === false, onChange: (event) => {
+                        let value = parseFloat(event.target.value);
+                        value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                        props.onColumnFlexChange(props.column.columnId, value);
+                    }, value: columnFlex ?? '' }),
+                React.createElement(Box, null, "Min Width:"),
+                React.createElement(Box, null, "Max Width:"),
+                React.createElement(Input, { "data-name": "column-min-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column min width", disabled: resizable === false, onChange: (event) => {
+                        let value = parseFloat(event.target.value);
+                        value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                        props.onColumnMinWidthChange(props.column.columnId, value);
+                    }, value: minWidth ?? '' }),
+                React.createElement(Input, { "data-name": "column-max-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column max width", disabled: resizable === false, onChange: (event) => {
+                        let value = parseFloat(event.target.value);
+                        value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                        props.onColumnMaxWidthChange(props.column.columnId, value);
+                    }, value: maxWidth ?? '' })),
+            "Pinning:",
+            React.createElement(RadioGroup, { value: columnPinning || 'None', name: "columnPinning", orientation: "horizontal", variant: "text-only", className: radioGroupStyling.horizontalTextOnly, onRadioChange: (columnPinning) => {
+                    props.onPinChange(column.columnId, columnPinning === 'None' ? null : columnPinning);
+                } },
+                React.createElement(Radio, { value: "left" }, "Left"),
+                React.createElement(Radio, { value: "None" }, "None"),
+                React.createElement(Radio, { value: "right" }, "Right"))),
+        React.createElement(Box, { className: "twa:mt-5" }),
+        hr,
+        React.createElement(Box, null,
+            React.createElement(Box, { className: "twa:my-3" }, "Column Attributes"),
+            React.createElement(Box, { className: clsx({
+                    'twa:bg-primarylight': 'the bg color',
+                    'twa:gap-2 twa:flex twa:flex-col': 'layout configuration for small screens',
+                    'twa:lg:gap-3 twa:lg:grid twa:md:grid-cols-[1fr_1fr]': 'layout configuration for normal screens',
+                    'twa:p-5 twa:rounded-standard': true,
+                }) }, [
+                { 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 }) => (React.createElement(Flex, { alignItems: "center", className: clsx({
+                    'twa:rounded-standard twa:gap-2': true,
+                }) },
+                React.createElement(Box, { className: "twa:size-5" }, checked ? (React.createElement(Icon, { name: "check", className: "twa:text-success" })) : (React.createElement(Icon, { name: "close", className: "twa:text-error" }))),
+                label)))))));
 };

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box } from 'rebass';
 import { getLayoutFilterViewItems } from '../../../../Strategy/Utilities/Layout/getLayoutFilterViewItems';
 import * as ModuleConstants from '../../../../Utilities/Constants/ModuleConstants';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
@@ -10,6 +9,7 @@ import { AdaptableObjectListItemView } from '../../../Components/AdaptableObject
 import { ColumnSelector } from '../../../Components/Selectors/ColumnSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { LayoutColumnFilter } from '../../../Components/ColumnFilter/LayoutColumnFilter';
+import { Box } from '../../../../components/Flex';
 export const isColumnFiltersValid = (layout) => {
     const invalidColumnFilters = (layout.ColumnFilters ?? [])?.filter((columnFilter) => !columnFilter?.Predicates[0]?.PredicateId);
     if (invalidColumnFilters.length > 0) {
@@ -21,7 +21,7 @@ export const FilterSectionSummary = () => {
     const { data: layout } = useOnePageAdaptableWizardContext();
     const adaptable = useAdaptable();
     const fitlerViewItems = getLayoutFilterViewItems(layout, adaptable.api);
-    return (React.createElement(Box, null, fitlerViewItems.values.length ? (fitlerViewItems.values.map((value) => (React.createElement(Tag, { key: value, mb: 1, mr: 1 }, value)))) : (React.createElement(Tag, null, "No Column Filters"))));
+    return (React.createElement(Box, null, fitlerViewItems.values.length ? (fitlerViewItems.values.map((value) => (React.createElement(Tag, { key: value, className: "twa:mb-1 twa:mr-1" }, value)))) : (React.createElement(Tag, null, "No Column Filters"))));
 };
 export const FilterSection = (props) => {
     const adaptable = useAdaptable();
@@ -40,10 +40,10 @@ export const FilterSection = (props) => {
             ColumnFilters: layoutFilters.map((layoutFilter) => layoutFilter.ColumnId === columnFilter.ColumnId ? { ...columnFilter } : layoutFilter),
         });
     }, [layout.ColumnFilters]);
-    return (React.createElement(Tabs, { style: { height: '100%' } },
+    return (React.createElement(Tabs, { className: "twa:h-full" },
         React.createElement(Tabs.Tab, null, "Column Filters"),
         React.createElement(Tabs.Content, null,
-            React.createElement(FormLayout, { mb: 2 },
+            React.createElement(FormLayout, { className: "twa:mb-2" },
                 React.createElement(FormRow, { label: "Add Column Filter" },
                     React.createElement(ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), placeholder: "Select Column to create Filter", onChange: (option) => {
                             props.onChange({
@@ -57,7 +57,7 @@ export const FilterSection = (props) => {
                                 ],
                             });
                         } }))),
-            layoutFilters?.length > 0 && (React.createElement(Box, { p: 0, as: "ul" }, layoutFilters.map((columnFilter) => {
+            layoutFilters?.length > 0 && (React.createElement(Box, { className: "twa:p-0", as: "ul" }, layoutFilters.map((columnFilter) => {
                 const items = [
                     ...filterModule.toView(columnFilter).items,
                     {
@@ -68,6 +68,5 @@ export const FilterSection = (props) => {
                     },
                 ];
                 return (React.createElement(AdaptableObjectListItemView, { module: filterModule, abObject: columnFilter, entityType: "Column Filter", showActions: true, showEditButton: false, items: items, onDelete: () => handleDelete(columnFilter), key: columnFilter.ColumnId }));
-            }))),
-            ' ')));
+            }))))));
 };

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box } from 'rebass';
 import { useAdaptable } from '../../../AdaptableContext';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { Tag } from '../../../../components/Tag';
@@ -7,6 +6,7 @@ import { ExpressionEditor } from '../../../../components/ExpressionEditor';
 import { GridFilterModuleId } from '../../../../Utilities/Constants/ModuleConstants';
 import StringExtensions from '../../../../Utilities/Extensions/StringExtensions';
 import { useGridFilterOptionsForExpressionEditorProps } from '../../../GridFilter/useGridFilterOptionsForExpressionEditor';
+import { Box } from '../../../../components/Flex';
 export const isGridFiltersValid = (layout, api) => {
     const expression = layout?.GridFilter?.Expression;
     if (StringExtensions.IsNullOrEmpty(expression)) {
@@ -17,7 +17,7 @@ export const isGridFiltersValid = (layout, api) => {
 };
 export const GridFilterSectionSummary = () => {
     const { data: layout } = useOnePageAdaptableWizardContext();
-    return (React.createElement(Box, null, React.createElement(Tag, { mb: 1, mr: 1 }, layout?.GridFilter?.Expression ?? 'No Grid Filter')));
+    return (React.createElement(Box, null, React.createElement(Tag, { className: "twa:mb-1 twa:mr-1" }, layout?.GridFilter?.Expression ?? 'No Grid Filter')));
 };
 export const GridFilterSection = (props) => {
     const { api } = useAdaptable();

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box, Flex, Text } from 'rebass';
 import { CheckBox } from '../../../../components/CheckBox';
 import DropdownButton from '../../../../components/DropdownButton';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
@@ -13,6 +12,7 @@ import { columnFilter } from './Utilities';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import StringExtensions from '../../../../Utilities/Extensions/StringExtensions';
 import { Select } from '../../../../components/Select';
+import { Box, Flex } from '../../../../components/Flex';
 const PivotColumnRow = (props) => {
     const adaptable = useAdaptable();
     const aggValue = (props.layout.PivotAggregationColumns || []).find((x) => x.ColumnId === props.column.columnId)?.AggFunc;
@@ -171,19 +171,18 @@ const PivotColumnRow = (props) => {
     }));
     return (React.createElement(Box, { "data-name": props.column.columnId, className: "ab-Layout-Wizard__ColumnRow" },
         React.createElement(Flex, { alignItems: "flex-start" },
-            React.createElement(Flex, { flex: "0 0 auto", alignItems: "center" },
-                React.createElement(Flex, { minWidth: 80 }, props.column.friendlyName),
-                aggValue && (React.createElement(DropdownButton, { columns: ['label'], items: aggOptions, ml: 2 }, currentAggFnName)),
-                currentAggFnName === WEIGHTED_AVERAGE_AGG_FN_NAME && (React.createElement(Flex, { backgroundColor: "primary", ml: 3, alignItems: "center" },
-                    React.createElement(Text, null, "Weight"),
+            React.createElement(Flex, { className: "twa:flex-[0_0_auto]", alignItems: "center" },
+                React.createElement(Flex, { className: "twa:min-w-[80px]" }, props.column.friendlyName),
+                aggValue && (React.createElement(DropdownButton, { columns: ['label'], items: aggOptions, className: "twa:ml-2" }, currentAggFnName)),
+                currentAggFnName === WEIGHTED_AVERAGE_AGG_FN_NAME && (React.createElement(Flex, { className: "twa:bg-primary twa:ml-3", alignItems: "center" },
+                    React.createElement(Box, null, "Weight"),
                     ' ',
-                    React.createElement(DropdownButton, { columns: ['label'], items: numericColumnsOptions, ml: 2 }, weightName))),
-                aggValue && (React.createElement(Flex, { backgroundColor: "primary", ml: 3, alignItems: "center" },
-                    React.createElement(Text, null, "Total"),
+                    React.createElement(DropdownButton, { columns: ['label'], items: numericColumnsOptions, className: "twa:ml-2" }, weightName))),
+                aggValue && (React.createElement(Flex, { className: "twa:bg-primary twa:ml-3", alignItems: "center" },
+                    React.createElement(Box, null, "Total"),
                     ' ',
-                    React.createElement(DropdownButton, { columns: ['label'], items: totalOptions, ml: 2 }, currentTotal)))),
-            hasPivotSpecificTotals && (React.createElement(Flex, { ml: 2, pl: 2, flexWrap: "wrap", flex: "1 1 auto", alignItems: "center", style: {
-                    minWidth: '200px',
+                    React.createElement(DropdownButton, { columns: ['label'], items: totalOptions, className: "twa:ml-2" }, currentTotal)))),
+            hasPivotSpecificTotals && (React.createElement(Flex, { className: "twa:ml-2 twa:pl-2 twa:flex-[1_1_auto] twa:min-w-[200px]", flexWrap: "wrap", alignItems: "center", style: {
                     borderLeft: '1px solid var(--ab-color-text-on-primary)',
                     rowGap: '8px',
                     columnGap: '12px',
@@ -201,7 +200,7 @@ const PivotColumnRow = (props) => {
                                 ? 'After'
                                 : 'Off';
                 return (React.createElement(Flex, { key: pivotColId, alignItems: "center" },
-                    React.createElement(Text, { mr: 1 },
+                    React.createElement(Box, { className: "twa:mr-1" },
                         adaptable.api.columnApi.getFriendlyNameForColumnId(pivotColId),
                         ":"),
                     React.createElement(DropdownButton, { columns: ['label'], items: pivotTotalOptions.map((opt) => ({
@@ -334,7 +333,7 @@ export const PivotAggregationsSection = (props) => {
                                 });
                             }, isClearable: true })),
                     React.createElement(FormRow, { label: 'Pivot Grand Total' },
-                        React.createElement(Select, { style: { width: 160 }, options: ['before', 'after'].map((position) => {
+                        React.createElement(Select, { className: "twa:w-[160px]", options: ['before', 'after'].map((position) => {
                                 return {
                                     label: StringExtensions.CapitaliseFirstLetter(position),
                                     value: position,
@@ -355,8 +354,6 @@ export const PivotAggregationsSection = (props) => {
                                 ...layout,
                                 PivotColumnTotal: value,
                             });
-                        }, isClearable: true })) : (React.createElement(Text, { marginLeft: 1, style: { fontStyle: 'italic' } }, isPivotColumnTotalEnabled))))),
-            React.createElement(ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => (React.createElement(PivotColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap, numberColumns: numberColumns })), options: sortedAggregableColumns, value: (layout.PivotAggregationColumns || []).map((col) => col.ColumnId), allowReorder: true, xSelectedLabel: () => {
-                    return `Active aggregations:`;
-                }, onChange: handleColumnsSelectionChange }))));
+                        }, isClearable: true })) : (React.createElement(Box, { className: "twa:ml-1 twa:italic" }, isPivotColumnTotalEnabled))))),
+            React.createElement(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => (React.createElement(PivotColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap, numberColumns: numberColumns })), options: sortedAggregableColumns, value: (layout.PivotAggregationColumns || []).map((col) => col.ColumnId), allowReorder: true, onChange: handleColumnsSelectionChange }))));
 };