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

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

@@ -4,31 +4,29 @@ exports.ColumnsSection = exports.ColumnsSectionSummary = void 0;
 const tslib_1 = require("tslib");
 const InfiniteTable_1 = require("../../../../components/InfiniteTable");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
 const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
 const Tabs_1 = require("../../../../components/Tabs");
-const Tag_1 = require("../../../../components/Tag");
 const AdaptableColumn_1 = require("../../../../AdaptableState/Common/AdaptableColumn");
 const AdaptableContext_1 = require("../../../AdaptableContext");
-const ValueSelector_1 = require("../../../Components/ValueSelector");
 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 ColumnLabels_1 = require("../Components/ColumnLabels");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
 const ColumnApiImpl_1 = require("../../../../Api/Implementation/ColumnApiImpl");
 const ReorderDraggable_1 = require("../../../Components/ReorderDraggable");
 const AdaptableFormControlTextClear_1 = require("../../../Components/Forms/AdaptableFormControlTextClear");
 const sortColumnIdsByOrder_1 = require("../../../../layout-manager/src/sortColumnIdsByOrder");
-const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
 const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
 const isPivotLayout_1 = require("../../../../Utilities/isPivotLayout");
-const PropertyOrderText = (props) => (React.createElement(rebass_1.Text, { fontWeight: 600, fontSize: 2 }, props.children));
+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) => (React.createElement(Flex_1.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,
@@ -94,7 +92,7 @@ const ColumnsSectionSummary = () => {
                     if (!params.data?.sortOrder?.sort) {
                         return React.createElement(React.Fragment, null);
                     }
-                    return (React.createElement(rebass_1.Flex, null,
+                    return (React.createElement(Flex_1.Flex, null,
                         React.createElement(icons_1.Icon, { name: params.data?.sortOrder?.sort === 'Asc' ? 'arrow-up-long' : 'arrow-down-long' }),
                         ' ',
                         React.createElement(PropertyOrderText, null, params.data?.sortOrder?.index ?? '')));
@@ -121,8 +119,8 @@ const ColumnsSectionSummary = () => {
                     if (!params.data.grouping) {
                         return React.createElement(React.Fragment, null);
                     }
-                    return (React.createElement(rebass_1.Flex, null,
-                        React.createElement(CheckBox_1.CheckBox, { margin: 0, mr: 1, checked: true }),
+                    return (React.createElement(Flex_1.Flex, null,
+                        React.createElement(CheckBox_1.CheckBox, { className: "twa:m-0 twa:mr-1", checked: true }),
                         React.createElement(PropertyOrderText, null, params.data?.grouping)));
                 },
             },
@@ -139,93 +137,38 @@ const ColumnsSectionSummary = () => {
         React.createElement(InfiniteTable_1.InfiniteTableGrid, { columnTypes: columnTypes, rowHeight: rowHeight, columnHeaderHeight: headerHeight, domProps: tableDOMProps, columns: columns })));
 };
 exports.ColumnsSectionSummary = ColumnsSectionSummary;
+const isColumnVisible = (options) => {
+    const { columnId, layout } = options;
+    const isRowGroupColumn = (0, ColumnApiImpl_1.isAutoRowGroupColumn)(columnId);
+    const visible = (!(0, isPivotLayout_1.isPivotLayout)(layout) &&
+        layout.TableColumns.includes(columnId) &&
+        layout.ColumnVisibility?.[columnId] !== false) ||
+        isRowGroupColumn;
+    return visible;
+};
 const ColumnRow = (props) => {
-    const [isExpanded, setIsExpanded] = React.useState(false);
     const adaptable = (0, AdaptableContext_1.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 = (0, ColumnApiImpl_1.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 = (!(0, isPivotLayout_1.isPivotLayout)(props.layout) &&
-        props.layout.TableColumns.includes(column.columnId) &&
-        props.layout.ColumnVisibility?.[column.columnId] !== false) ||
-        isRowGroupColumn;
-    return (React.createElement(rebass_1.Box, { "data-name": props.column.columnId, className: "ab-Layout-Wizard__ColumnRow" },
-        React.createElement(rebass_1.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(Flex_1.Box, { "data-name": props.column.columnId, className: "twa:flex-1" },
+        React.createElement(Flex_1.Flex, { className: "ab-Layout-Wizard__ColumnRow__Header twa:my-1" },
             React.createElement(CheckBox_1.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(rebass_1.Flex, { ml: 2, mr: 2, alignItems: "center", "data-name": "column-label" }, initialHeader),
-            props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(rebass_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Title", ml: 2, mr: 2, padding: 1 },
+            React.createElement(Flex_1.Flex, { className: "twa:mx-2", alignItems: "center", "data-name": "column-label" }, initialHeader),
+            props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(Flex_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1" },
                 "Column Group: ",
-                props.column.columnGroup.friendlyName)) : null,
-            React.createElement(rebass_1.Flex, { mr: 2 },
-                React.createElement(ColumnLabels_1.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(rebass_1.Box, { flex: 1 }),
-            React.createElement(SimpleButton_1.default, { "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(rebass_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Expanded-Container", mb: 2, padding: 2, mt: 2 },
-            React.createElement(rebass_1.Flex, { mb: 2 },
-                React.createElement(FormLayout_1.default, { width: "100%", mr: 3 },
-                    React.createElement(FormLayout_1.FormRow, { label: "ColumnId" },
-                        React.createElement(Tag_1.Tag, null, props.column.columnId)),
-                    React.createElement(FormLayout_1.FormRow, { label: "Header" },
-                        React.createElement(Input_1.default, { "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(FormLayout_1.FormRow, { label: "Width" },
-                        React.createElement(Input_1.default, { "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(FormLayout_1.FormRow, { label: "Flex" },
-                        React.createElement(Input_1.default, { "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(FormLayout_1.FormRow, { label: "Min Width" },
-                        React.createElement(Input_1.default, { "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(FormLayout_1.FormRow, { label: "Max Width" },
-                        React.createElement(Input_1.default, { "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(FormLayout_1.FormRow, { label: "Pinning" },
-                        React.createElement(DropdownButton_1.default, { "data-name": "column-pinning", columns: ['label'], items: pinningOptions }, pinningOptions.find((option) => option.value === columnPinning).label))))))));
+                props.column.columnGroup.friendlyName)) : null)));
 };
 const ColumnsSection = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const [searchInputValue, setSearchInputValue] = React.useState('');
+    const [selectedColumnId, setSelectedColumnId] = React.useState(null);
     let hasSelectionColumn = false;
     const allColumns = adaptable.api.columnApi
         .getUIAvailableColumns()
@@ -284,6 +227,7 @@ const ColumnsSection = (props) => {
             return (0, Utilities_1.columnFilter)(col, searchInputValue);
         })
         : ColumnOrderAllColumns;
+    const currentOrderIds = currentOrder.map((col) => col.columnId);
     const handleColumnsChange = (newColumns) => {
         if (searchInputValue) {
             // there's a search in-place
@@ -317,18 +261,26 @@ 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) {
@@ -336,9 +288,9 @@ 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
@@ -420,57 +372,180 @@ 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_1.Tabs, null,
         React.createElement(Tabs_1.Tabs.Tab, null, "Columns"),
-        React.createElement(Tabs_1.Tabs.Content, { style: { overflow: 'hidden' } },
-            React.createElement(rebass_1.Flex, { mt: 2, mb: 3 },
-                React.createElement(ColumnLabels_1.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(rebass_1.Flex, { mb: 1, alignItems: "center", flexDirection: "row" },
-                React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", style: { border: 0, margin: 3, width: '100%' } }),
-                React.createElement(rebass_1.Box, { flex: 1 })),
-            React.createElement(HelpBlock_1.default, { mb: 1, fontSize: 2, display: 'flex', "data-name": "column-help", alignItems: 'center' },
-                React.createElement(rebass_1.Box, null,
-                    React.createElement(icons_1.NaturallySizedIcon, { name: "info" })),
-                React.createElement(rebass_1.Text, { ml: 1 }, "Expand each Column to set Width, Pinnning and a custom Header")),
-            React.createElement(ReorderDraggable_1.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 }),
-            (0, ValueSelector_1.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_1.Tabs.Content, { className: "twa:overflow-hidden" },
+            React.createElement(Flex_1.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(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2" },
+                    React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: "twa:w-full twa:border-none twa:p-1" }),
+                    React.createElement(Flex_1.Box, { className: (0, clsx_1.default)('twa:font-bold', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard') },
+                        React.createElement(CheckBox_1.CheckBox, { checked: currentlyDisplayedColumnIds.length
+                                ? currentlyDisplayedColumnIds.length === visibleIdsCurrentlyDisplayed.length
+                                    ? true
+                                    : visibleIdsCurrentlyDisplayed.length
+                                        ? null
+                                        : false
+                                : false, onChange: (checked) => {
+                                handleColumnVisibilityChange(currentlyDisplayedColumnIds, checked);
+                            } }, "Select All")),
+                    React.createElement(ReorderDraggable_1.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 (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);
+                            }
+                            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))));
 };
 exports.ColumnsSection = ColumnsSection;
+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 = (0, AdaptableContext_1.useAdaptable)();
+    const baseCls = 'ab-Layout-Wizard__ColumnPropertiesEditor twa:border twa:rounded-standard';
+    if (!props.column) {
+        return (React.createElement(Flex_1.Box, { className: (0, clsx_1.default)(baseCls, 'twa:border-inputborder twa:grid twa:place-items-center twa:border-dashed twa:border-2') },
+            React.createElement(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:items-center twa:justify-center" },
+                React.createElement(Flex_1.Box, { className: "twa:text-text-on-primarydark ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Icon" },
+                    React.createElement(icons_1.NaturallySizedIcon, { name: "inspector", style: { stroke: 'currentColor', fill: 'none', strokeWidth: 2 } })),
+                React.createElement(Flex_1.Box, { className: "twa:text-4 twa:font-bold ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Title" }, "No Column Selected"),
+                React.createElement(Flex_1.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(Flex_1.Box, { className: (0, clsx_1.default)(baseCls, 'ab-Layout-Wizard__ColumnPropertiesEditor__Container twa:border-none twa:bg-defaultbackground twa:shadow-md twa:p-4') },
+        React.createElement(Flex_1.Box, { className: "twa:text-5 twa:font-bold twa:leading-relaxed ab-Layout-Wizard__ColumnPropertiesEditor__Title" },
+            "Column Settings: ",
+            column.friendlyName),
+        React.createElement(Flex_1.Box, { className: "twa:text-3 twa:opacity-80 twa:flex twa:flex-row twa:gap-1 twa:items-center" },
+            "Column ID:",
+            ' ',
+            React.createElement(Flex_1.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(Flex_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1" },
+            "Column Group: ",
+            props.column.columnGroup.friendlyName)) : null,
+        hr,
+        React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3" },
+            React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-1" },
+                "Header",
+                React.createElement(Input_1.default, { "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(Flex_1.Box, { className: "twa:grid twa:grid-cols-[1fr_1fr] twa:gap-2" },
+                React.createElement(Flex_1.Box, null, "Width:"),
+                " ",
+                React.createElement(Flex_1.Box, null, "Flex:"),
+                React.createElement(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 ?? '' }),
+                React.createElement(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 ?? '' }),
+                React.createElement(Flex_1.Box, null, "Min Width:"),
+                React.createElement(Flex_1.Box, null, "Max Width:"),
+                React.createElement(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 ?? '' }),
+                React.createElement(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:",
+            React.createElement(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);
+                } },
+                React.createElement(Radio_1.default, { value: "left" }, "Left"),
+                React.createElement(Radio_1.default, { value: "None" }, "None"),
+                React.createElement(Radio_1.default, { value: "right" }, "Right"))),
+        React.createElement(Flex_1.Box, { className: "twa:mt-5" }),
+        hr,
+        React.createElement(Flex_1.Box, null,
+            React.createElement(Flex_1.Box, { className: "twa:my-3" }, "Column Attributes"),
+            React.createElement(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,
+                }) }, [
+                { 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_1.Flex, { alignItems: "center", className: (0, clsx_1.default)({
+                    'twa:rounded-standard twa:gap-2': true,
+                }) },
+                React.createElement(Flex_1.Box, { className: "twa:size-5" }, checked ? (React.createElement(icons_1.Icon, { name: "check", className: "twa:text-success" })) : (React.createElement(icons_1.Icon, { name: "close", className: "twa:text-error" }))),
+                label)))))));
+};

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterSection = exports.FilterSectionSummary = exports.isColumnFiltersValid = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const getLayoutFilterViewItems_1 = require("../../../../Strategy/Utilities/Layout/getLayoutFilterViewItems");
 const ModuleConstants = tslib_1.__importStar(require("../../../../Utilities/Constants/ModuleConstants"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
@@ -14,6 +13,7 @@ const AdaptableObjectList_1 = require("../../../Components/AdaptableObjectList/A
 const ColumnSelector_1 = require("../../../Components/Selectors/ColumnSelector");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const LayoutColumnFilter_1 = require("../../../Components/ColumnFilter/LayoutColumnFilter");
+const Flex_1 = require("../../../../components/Flex");
 const isColumnFiltersValid = (layout) => {
     const invalidColumnFilters = (layout.ColumnFilters ?? [])?.filter((columnFilter) => !columnFilter?.Predicates[0]?.PredicateId);
     if (invalidColumnFilters.length > 0) {
@@ -26,7 +26,7 @@ const FilterSectionSummary = () => {
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const fitlerViewItems = (0, getLayoutFilterViewItems_1.getLayoutFilterViewItems)(layout, adaptable.api);
-    return (React.createElement(rebass_1.Box, null, fitlerViewItems.values.length ? (fitlerViewItems.values.map((value) => (React.createElement(Tag_1.Tag, { key: value, mb: 1, mr: 1 }, value)))) : (React.createElement(Tag_1.Tag, null, "No Column Filters"))));
+    return (React.createElement(Flex_1.Box, null, fitlerViewItems.values.length ? (fitlerViewItems.values.map((value) => (React.createElement(Tag_1.Tag, { key: value, className: "twa:mb-1 twa:mr-1" }, value)))) : (React.createElement(Tag_1.Tag, null, "No Column Filters"))));
 };
 exports.FilterSectionSummary = FilterSectionSummary;
 const FilterSection = (props) => {
@@ -46,10 +46,10 @@ const FilterSection = (props) => {
             ColumnFilters: layoutFilters.map((layoutFilter) => layoutFilter.ColumnId === columnFilter.ColumnId ? { ...columnFilter } : layoutFilter),
         });
     }, [layout.ColumnFilters]);
-    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+    return (React.createElement(Tabs_1.Tabs, { className: "twa:h-full" },
         React.createElement(Tabs_1.Tabs.Tab, null, "Column Filters"),
         React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(FormLayout_1.default, { mb: 2 },
+            React.createElement(FormLayout_1.default, { className: "twa:mb-2" },
                 React.createElement(FormLayout_1.FormRow, { label: "Add Column Filter" },
                     React.createElement(ColumnSelector_1.ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), placeholder: "Select Column to create Filter", onChange: (option) => {
                             props.onChange({
@@ -63,7 +63,7 @@ const FilterSection = (props) => {
                                 ],
                             });
                         } }))),
-            layoutFilters?.length > 0 && (React.createElement(rebass_1.Box, { p: 0, as: "ul" }, layoutFilters.map((columnFilter) => {
+            layoutFilters?.length > 0 && (React.createElement(Flex_1.Box, { className: "twa:p-0", as: "ul" }, layoutFilters.map((columnFilter) => {
                 const items = [
                     ...filterModule.toView(columnFilter).items,
                     {
@@ -74,7 +74,6 @@ const FilterSection = (props) => {
                     },
                 ];
                 return (React.createElement(AdaptableObjectList_1.AdaptableObjectListItemView, { module: filterModule, abObject: columnFilter, entityType: "Column Filter", showActions: true, showEditButton: false, items: items, onDelete: () => handleDelete(columnFilter), key: columnFilter.ColumnId }));
-            }))),
-            ' ')));
+            }))))));
 };
 exports.FilterSection = FilterSection;

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridFilterSection = exports.GridFilterSectionSummary = exports.isGridFiltersValid = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const Tag_1 = require("../../../../components/Tag");
@@ -11,6 +10,7 @@ const ExpressionEditor_1 = require("../../../../components/ExpressionEditor");
 const ModuleConstants_1 = require("../../../../Utilities/Constants/ModuleConstants");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
 const useGridFilterOptionsForExpressionEditor_1 = require("../../../GridFilter/useGridFilterOptionsForExpressionEditor");
+const Flex_1 = require("../../../../components/Flex");
 const isGridFiltersValid = (layout, api) => {
     const expression = layout?.GridFilter?.Expression;
     if (StringExtensions_1.default.IsNullOrEmpty(expression)) {
@@ -22,7 +22,7 @@ const isGridFiltersValid = (layout, api) => {
 exports.isGridFiltersValid = isGridFiltersValid;
 const GridFilterSectionSummary = () => {
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(rebass_1.Box, null, React.createElement(Tag_1.Tag, { mb: 1, mr: 1 }, layout?.GridFilter?.Expression ?? 'No Grid Filter')));
+    return (React.createElement(Flex_1.Box, null, React.createElement(Tag_1.Tag, { className: "twa:mb-1 twa:mr-1" }, layout?.GridFilter?.Expression ?? 'No Grid Filter')));
 };
 exports.GridFilterSectionSummary = GridFilterSectionSummary;
 const GridFilterSection = (props) => {