@adaptabletools/adaptable-cjs 22.1.1-canary.1 → 23.0.0-canary.0

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnsSection = exports.ColumnsSectionSummary = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const InfiniteTable_1 = require("../../../../components/InfiniteTable");
 const React = tslib_1.__importStar(require("react"));
 const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
@@ -23,10 +24,7 @@ const isPivotLayout_1 = require("../../../../Utilities/isPivotLayout");
 const Flex_1 = require("../../../../components/Flex");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const Radio_1 = tslib_1.__importStar(require("../../../../components/Radio"));
-const PropertyOrderText = (props) => (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 PropertyOrderText = (props) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-bold twa:text-2", children: props.children }));
 const columnTypes = {
     default: {
         defaultFlex: 1,
@@ -90,12 +88,9 @@ const ColumnsSectionSummary = () => {
                 align: 'center',
                 render: (params) => {
                     if (!params.data?.sortOrder?.sort) {
-                        return React.createElement(React.Fragment, null);
+                        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
                     }
-                    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 ?? '')));
+                    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: params.data?.sortOrder?.sort === 'Asc' ? 'arrow-up-long' : 'arrow-down-long' }), ' ', (0, jsx_runtime_1.jsx)(PropertyOrderText, { children: params.data?.sortOrder?.index ?? '' })] }));
                 },
             },
             filter: {
@@ -105,9 +100,9 @@ const ColumnsSectionSummary = () => {
                 minWidth: 50,
                 render: (params) => {
                     if (!params.data?.filter) {
-                        return React.createElement(React.Fragment, null);
+                        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
                     }
-                    return React.createElement(CheckBox_1.CheckBox, { checked: true });
+                    return (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: true });
                 },
             },
             group: {
@@ -117,11 +112,9 @@ const ColumnsSectionSummary = () => {
                 align: 'center',
                 render: (params) => {
                     if (!params.data.grouping) {
-                        return React.createElement(React.Fragment, null);
+                        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
                     }
-                    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)));
+                    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:m-0 twa:mr-1", checked: true }), (0, jsx_runtime_1.jsx)(PropertyOrderText, { children: params.data?.grouping })] }));
                 },
             },
         };
@@ -133,8 +126,7 @@ const ColumnsSectionSummary = () => {
             minHeight: tableHeight,
         },
     };
-    return (React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "columnId" },
-        React.createElement(InfiniteTable_1.InfiniteTableGrid, { columnTypes: columnTypes, rowHeight: rowHeight, columnHeaderHeight: headerHeight, domProps: tableDOMProps, columns: columns })));
+    return ((0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: data, primaryKey: "columnId", children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { columnTypes: columnTypes, rowHeight: rowHeight, columnHeaderHeight: headerHeight, domProps: tableDOMProps, columns: columns }) }));
 };
 exports.ColumnsSectionSummary = ColumnsSectionSummary;
 const isSelectionColumn = (columnId) => columnId === GeneralConstants_1.AG_GRID_SELECTION_COLUMN;
@@ -155,17 +147,13 @@ const ColumnRow = (props) => {
     const isSelectionCol = isSelectionColumn(props.column.columnId);
     const { column } = props;
     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 || isSelectionCol, onClick: (event) => {
-                    event.stopPropagation();
-                }, checked: visible }),
-            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 twa:flex twa:items-center" },
-                "Column Group: ",
-                props.column.columnGroup.friendlyName)) : null)));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": props.column.columnId, className: "twa:flex-1", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-Layout-Wizard__ColumnRow__Header twa:my-1", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": column.columnId, onChange: (checked) => {
+                        props.onColumnVisibilityChange(column.columnId, checked);
+                    }, disabled: column.hideable === false || isRowGroupColumn || isSelectionCol, onClick: (event) => {
+                        event.stopPropagation();
+                    }, onFocus: () => {
+                        props.onCheckboxFocus?.(column.columnId);
+                    }, checked: visible }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:mx-2", alignItems: "center", "data-name": "column-label", children: initialHeader }), props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1 twa:flex twa:items-center", children: ["Column Group: ", props.column.columnGroup.friendlyName] })) : null] }) }));
 };
 const ColumnsSection = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -390,100 +378,95 @@ const ColumnsSection = (props) => {
             .map((col) => col.columnId)
         : currentOrder.map((col) => col.columnId);
     const visibleIdsCurrentlyDisplayed = visibleIds.filter((colId) => currentlyDisplayedColumnIds.includes(colId));
-    return (React.createElement(Tabs_1.Tabs, { className: "twa:h-full" },
-        React.createElement(Tabs_1.Tabs.Tab, null, "Columns"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(Flex_1.Box, { className: "twa:gap-2 twa:overflow-hidden twa:grid twa:grid-cols-2 twa:h-full" },
-                React.createElement(Flex_1.Box, { className: "twa:gap-2 twa:focus:outline-none twa:flex-1 twa:max-h-full twa:overflow-hidden", "data-name": "columns-container", tabIndex: -1, onKeyDown: (event) => {
-                        const scrollIntoView = (columnId) => {
-                            const el = event.currentTarget.querySelector(`[data-id="${columnId}"]`);
-                            el?.scrollIntoView({ block: 'nearest' });
-                        };
-                        if (event.key === 'ArrowDown') {
-                            event.preventDefault();
-                            event.stopPropagation();
-                            const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
-                            if (index === -1) {
-                                return;
-                            }
-                            const nextColumnId = currentlyDisplayedColumnIds[index + 1];
-                            const nextColumn = colIdToCol[nextColumnId];
-                            if (nextColumn) {
-                                setSelectedColumnId(nextColumn.columnId);
-                                scrollIntoView(nextColumn.columnId);
-                            }
-                        }
-                        if (event.key === 'ArrowUp') {
-                            event.preventDefault();
-                            event.stopPropagation();
-                            const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
-                            if (index === -1) {
-                                return;
-                            }
-                            const previousColumnId = currentlyDisplayedColumnIds[index - 1];
-                            const previousColumn = colIdToCol[previousColumnId];
-                            if (previousColumn) {
-                                setSelectedColumnId(previousColumn.columnId);
-                                scrollIntoView(previousColumn.columnId);
-                            }
-                        }
-                        if (event.key === ' ') {
-                            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 twa:h-full twa:overflow-hidden" },
-                        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, { className: "twa:overflow-y-auto", toIdentifier: (option) => `${option.columnId}`, isOptionDraggable: (option) => {
-                                return option.moveable;
-                            }, optionClassName: (option) => {
-                                const baseCls = 'ab-Layout-Wizard__ColumnRow twa:cursor-pointer twa:rounded-standard';
-                                if (selectedColumnId !== option.columnId) {
-                                    return baseCls;
+    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:h-full", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Columns" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:gap-2 twa:overflow-hidden twa:grid twa:grid-cols-2 twa:h-full", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:gap-2 twa:focus:outline-none twa:flex-1 twa:max-h-full twa:overflow-hidden", "data-name": "columns-container", tabIndex: -1, onKeyDown: (event) => {
+                                const scrollIntoView = (columnId) => {
+                                    const el = event.currentTarget.querySelector(`[data-id="${columnId}"]`);
+                                    el?.scrollIntoView({ block: 'nearest' });
+                                    const input = el?.querySelector('input[type="checkbox"]');
+                                    input?.focus();
+                                };
+                                if (event.key === 'ArrowDown') {
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                    const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
+                                    if (index === -1) {
+                                        return;
+                                    }
+                                    const nextColumnId = currentlyDisplayedColumnIds[index + 1];
+                                    const nextColumn = colIdToCol[nextColumnId];
+                                    if (nextColumn) {
+                                        setSelectedColumnId(nextColumn.columnId);
+                                        scrollIntoView(nextColumn.columnId);
+                                    }
                                 }
-                                return (0, clsx_1.default)(baseCls, 'twa:after:border-accent twa:relative twa:after:border-2 twa:after:rounded-standard twa:after:pointer-events-none twa:after:inset-0 twa:after:absolute twa:after:bg-accent/15');
-                            }, order: currentOrder, onOptionClick: (option, event) => {
-                                if (event.ctrlKey || option.columnId === selectedColumnId) {
-                                    setSelectedColumnId(null);
+                                if (event.key === 'ArrowUp') {
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                    const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
+                                    if (index === -1) {
+                                        return;
+                                    }
+                                    const previousColumnId = currentlyDisplayedColumnIds[index - 1];
+                                    const previousColumn = colIdToCol[previousColumnId];
+                                    if (previousColumn) {
+                                        setSelectedColumnId(previousColumn.columnId);
+                                        scrollIntoView(previousColumn.columnId);
+                                    }
                                 }
-                                else {
-                                    setSelectedColumnId(option.columnId);
+                                if (event.key === ' ') {
+                                    const target = event.target;
+                                    if (target.tagName === 'INPUT' &&
+                                        target.type === 'checkbox') {
+                                        return;
+                                    }
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                    const selectedColumn = colIdToCol[selectedColumnId];
+                                    if (!selectedColumn) {
+                                        return;
+                                    }
+                                    const visible = isColumnVisible({ columnId: selectedColumnId, layout });
+                                    handleColumnVisibilityChange(selectedColumnId, !visible);
                                 }
-                            }, 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))));
+                            }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:h-full twa:overflow-hidden twa:p-1", children: [(0, jsx_runtime_1.jsx)(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: "twa:w-full twa:border-none twa:p-1" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)('twa:font-bold', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard'), children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: currentlyDisplayedColumnIds.length
+                                                ? currentlyDisplayedColumnIds.length === visibleIdsCurrentlyDisplayed.length
+                                                    ? true
+                                                    : visibleIdsCurrentlyDisplayed.length
+                                                        ? null
+                                                        : false
+                                                : false, onChange: (checked) => {
+                                                handleColumnVisibilityChange(currentlyDisplayedColumnIds, checked);
+                                            }, children: "Select All" }) }), (0, jsx_runtime_1.jsx)(ReorderDraggable_1.ReorderDraggable, { className: "twa:overflow-y-auto", toIdentifier: (option) => `${option.columnId}`, isOptionDraggable: (option) => {
+                                            return option.moveable;
+                                        }, optionClassName: (option) => {
+                                            const baseCls = 'ab-Layout-Wizard__ColumnRow twa:cursor-pointer twa:rounded-standard';
+                                            if (selectedColumnId !== option.columnId) {
+                                                return baseCls;
+                                            }
+                                            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);
+                                                const row = event.target.closest?.(`[data-id="${option.columnId}"]`);
+                                                const input = row?.querySelector('input[type="checkbox"]');
+                                                input?.focus();
+                                            }
+                                        }, renderOption: (option) => {
+                                            return ((0, jsx_runtime_1.jsx)(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange, onPinChange: handlePinChange, onCheckboxFocus: setSelectedColumnId, layout: layout, column: option }));
+                                        }, onChange: handleColumnsChange })] }) }), currentOrderIds.length ? ((0, jsx_runtime_1.jsx)(ColumnPropertiesEditor, { column: selectedColumnId && currentOrderIds.includes(selectedColumnId)
+                                ? 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-3 twa:mb-0 twa:w-full twa:h-[0.5px] twa:bg-inputborder/50 twa:border-none" }));
+const hr = ((0, jsx_runtime_1.jsx)("hr", { className: "twa:my-3 twa:mb-0 twa:w-full twa:h-[0.5px] twa:bg-input-border/50 twa:border-none" }));
 const 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"))));
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)(baseCls, 'twa:border-input-border twa:grid twa:place-items-center twa:border-dashed twa:border-2'), children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:items-center twa:justify-center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-text-on-primarydark ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Icon", children: (0, jsx_runtime_1.jsx)(icons_1.NaturallySizedIcon, { name: "inspector", style: { stroke: 'currentColor', fill: 'none', strokeWidth: 2 } }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-4 twa:font-bold ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Title", children: "No Column Selected" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-3 twa:opacity-80 ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Description", children: "Select a Column to view and edit its properties" })] }) }));
     }
     const { column } = props;
     const columnWidth = props.layout.ColumnSizing?.[column.columnId]?.Width;
@@ -495,78 +478,39 @@ const ColumnPropertiesEditor = (props) => {
     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:max-h-full twa:overflow-hidden twa:flex twa:flex-col') },
-        React.createElement(Flex_1.Box, { className: "twa:px-4 twa:pt-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.Box, { className: "twa:px-4 twa:flex-1 twa:overflow-y-auto twa:pb-3" },
-            React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:mt-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)", disabled: props.column.isGeneratedSelectionColumn, 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, { key: label, 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))))))));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, clsx_1.default)(baseCls, 'ab-Layout-Wizard__ColumnPropertiesEditor__Container twa:border-none twa:bg-defaultbackground twa:shadow-md', 'twa:max-h-full twa:overflow-hidden twa:flex twa:flex-col'), children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:px-4 twa:pt-4", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-5 twa:font-bold twa:leading-relaxed ab-Layout-Wizard__ColumnPropertiesEditor__Title", children: ["Column Settings: ", column.friendlyName] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-3 twa:opacity-80 twa:flex twa:flex-row twa:gap-1 twa:items-center", children: ["Column ID:", ' ', (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:bg-primarydark/20 twa:text-text-on-primarydark twa:px-1 twa:py-0.5 twa:rounded-standard", children: column.columnId })] }), props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1", children: ["Column Group: ", props.column.columnGroup.friendlyName] })) : null] }), hr, (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:px-4 twa:flex-1 twa:overflow-y-auto twa:pb-3", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:mt-3", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-1", children: ["Header", (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input twa:w-full", placeholder: "Custom name (optional)", disabled: props.column.isGeneratedSelectionColumn, onChange: () => {
+                                            props.onColumnNameChange(props.column.columnId, event.target.value);
+                                        }, value: customHeader })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:grid twa:grid-cols-[1fr_1fr] twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Width:" }), " ", (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Flex:" }), (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column width", disabled: resizable === false, onChange: (event) => {
+                                            let value = parseFloat(event.target.value);
+                                            value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                                            props.onColumnWidthChange(props.column.columnId, value);
+                                        }, value: columnWidth ?? '' }), (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-flex", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column flex", disabled: resizable === false, onChange: (event) => {
+                                            let value = parseFloat(event.target.value);
+                                            value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                                            props.onColumnFlexChange(props.column.columnId, value);
+                                        }, value: columnFlex ?? '' }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Min Width:" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Max Width:" }), (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-min-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column min width", disabled: resizable === false, onChange: (event) => {
+                                            let value = parseFloat(event.target.value);
+                                            value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                                            props.onColumnMinWidthChange(props.column.columnId, value);
+                                        }, value: minWidth ?? '' }), (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-max-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column max width", disabled: resizable === false, onChange: (event) => {
+                                            let value = parseFloat(event.target.value);
+                                            value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                                            props.onColumnMaxWidthChange(props.column.columnId, value);
+                                        }, value: maxWidth ?? '' })] }), "Pinning:", (0, jsx_runtime_1.jsxs)(Radio_1.RadioGroup, { value: columnPinning || 'None', name: "columnPinning", orientation: "horizontal", variant: "text-only", className: Radio_1.radioGroupStyling.horizontalTextOnly, onRadioChange: (columnPinning) => {
+                                    props.onPinChange(column.columnId, columnPinning === 'None' ? null : columnPinning);
+                                }, children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { value: "left", children: "Left" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: "None", children: "None" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: "right", children: "Right" })] })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-5" }), hr, (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:my-3", children: "Column Attributes" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)({
+                                    'twa:bg-primarylight': 'the bg color',
+                                    'twa:gap-2 twa:flex twa:flex-col': 'layout configuration for small screens',
+                                    'twa:lg:gap-3 twa:lg:grid twa:md:grid-cols-[1fr_1fr]': 'layout configuration for normal screens',
+                                    'twa:p-5 twa:rounded-standard': true,
+                                }), children: [
+                                    { label: 'Aggregatable', checked: props.column.aggregatable },
+                                    { label: 'Filterable', checked: props.column.filterable },
+                                    { label: 'Groupable', checked: props.column.groupable },
+                                    { label: 'Moveable', checked: props.column.moveable },
+                                    { label: 'Pivotable', checked: props.column.pivotable },
+                                    { label: 'Sortable', checked: props.column.sortable },
+                                ].map(({ label, checked }) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: (0, clsx_1.default)({
+                                        'twa:rounded-standard twa:gap-2': true,
+                                    }), children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:size-5", children: checked ? ((0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "check", className: "twa:text-success" })) : ((0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "close", className: "twa:text-error" })) }), label] }, label))) })] })] })] }));
 };

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterSection = exports.FilterSectionSummary = exports.isColumnFiltersValid = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const getLayoutFilterViewItems_1 = require("../../../../Strategy/Utilities/Layout/getLayoutFilterViewItems");
 const ModuleConstants = tslib_1.__importStar(require("../../../../Utilities/Constants/ModuleConstants"));
@@ -26,7 +27,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(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"))));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: fitlerViewItems.values.length ? (fitlerViewItems.values.map((value) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mb-1 twa:mr-1", children: value }, value)))) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Column Filters" })) }));
 };
 exports.FilterSectionSummary = FilterSectionSummary;
 const FilterSection = (props) => {
@@ -46,41 +47,35 @@ const FilterSection = (props) => {
             ColumnFilters: layoutFilters.map((layoutFilter) => layoutFilter.ColumnId === columnFilter.ColumnId ? { ...columnFilter } : layoutFilter),
         });
     }, [layout.ColumnFilters]);
-    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, { 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({
-                                ...layout,
-                                ColumnFilters: [
-                                    ...layoutFilters,
-                                    {
-                                        ColumnId: option,
-                                        Predicates: [],
-                                    },
-                                ],
-                            });
-                        } }))),
-            layoutFilters?.length > 0 && (React.createElement(Flex_1.Box, { className: "twa:p-0", as: "ul" }, layoutFilters.map((columnFilter) => {
-                const moduleItems = filterModule.toView(columnFilter).items;
-                const column = adaptable.api.columnApi.getColumnWithColumnId(columnFilter.ColumnId);
-                const columnGroupItems = column?.columnGroup && column.columnGroup.groupCount > 1
-                    ? [{ name: 'Column Group', values: [column.columnGroup.friendlyName] }]
-                    : [];
-                const items = [
-                    moduleItems[0],
-                    ...columnGroupItems,
-                    ...moduleItems.slice(1),
-                    {
-                        name: 'Column Filter',
-                        view: (React.createElement(LayoutColumnFilter_1.LayoutColumnFilter, { columnFilter: columnFilter, onColumnFilterChange: (columnFilter) => {
-                                handlePredicateEdit(columnFilter);
-                            } })),
-                    },
-                ];
-                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 }));
-            }))))));
+    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:h-full", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Column Filters" }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Content, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.default, { className: "twa:mb-2", children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Add Column Filter", children: (0, jsx_runtime_1.jsx)(ColumnSelector_1.ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), placeholder: "Select Column to create Filter", onChange: (option) => {
+                                    props.onChange({
+                                        ...layout,
+                                        ColumnFilters: [
+                                            ...layoutFilters,
+                                            {
+                                                ColumnId: option,
+                                                Predicates: [],
+                                            },
+                                        ],
+                                    });
+                                } }) }) }), layoutFilters?.length > 0 && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-0", as: "ul", children: layoutFilters.map((columnFilter) => {
+                            const moduleItems = filterModule.toView(columnFilter).items;
+                            const column = adaptable.api.columnApi.getColumnWithColumnId(columnFilter.ColumnId);
+                            const columnGroupItems = column?.columnGroup && column.columnGroup.groupCount > 1
+                                ? [{ name: 'Column Group', values: [column.columnGroup.friendlyName] }]
+                                : [];
+                            const items = [
+                                moduleItems[0],
+                                ...columnGroupItems,
+                                ...moduleItems.slice(1),
+                                {
+                                    name: 'Column Filter',
+                                    view: ((0, jsx_runtime_1.jsx)(LayoutColumnFilter_1.LayoutColumnFilter, { columnFilter: columnFilter, onColumnFilterChange: (columnFilter) => {
+                                            handlePredicateEdit(columnFilter);
+                                        } })),
+                                },
+                            ];
+                            return ((0, jsx_runtime_1.jsx)(AdaptableObjectList_1.AdaptableObjectListItemView, { module: filterModule, abObject: columnFilter, entityType: "Column Filter", showActions: true, showEditButton: false, items: items, onDelete: () => handleDelete(columnFilter) }, columnFilter.ColumnId));
+                        }) }))] })] }));
 };
 exports.FilterSection = FilterSection;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridFilterSection = exports.GridFilterSectionSummary = exports.isGridFiltersValid = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
@@ -22,7 +23,7 @@ const isGridFiltersValid = (layout, api) => {
 exports.isGridFiltersValid = isGridFiltersValid;
 const GridFilterSectionSummary = () => {
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    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')));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mb-1 twa:mr-1", children: layout?.GridFilter?.Expression ?? 'No Grid Filter' }) }));
 };
 exports.GridFilterSectionSummary = GridFilterSectionSummary;
 const GridFilterSection = (props) => {
@@ -30,7 +31,7 @@ const GridFilterSection = (props) => {
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const initialData = React.useMemo(() => api.internalApi.getQueryPreviewData(), []);
     const expressionEditorProps = (0, useGridFilterOptionsForExpressionEditor_1.useGridFilterOptionsForExpressionEditorProps)();
-    const expressionEditorContent = (React.createElement(ExpressionEditor_1.ExpressionEditor, { ...expressionEditorProps, allowSaveNamedQuery: false, type: 'boolean', module: ModuleConstants_1.GridFilterModuleId, value: layout?.GridFilter?.Expression ?? '', onChange: (expression) => {
+    const expressionEditorContent = ((0, jsx_runtime_1.jsx)(ExpressionEditor_1.ExpressionEditor, { ...expressionEditorProps, allowSaveNamedQuery: false, type: 'boolean', module: ModuleConstants_1.GridFilterModuleId, value: layout?.GridFilter?.Expression ?? '', onChange: (expression) => {
             props.onChange({
                 ...layout,
                 GridFilter: {
@@ -39,6 +40,6 @@ const GridFilterSection = (props) => {
                 },
             });
         }, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }));
-    return React.createElement("div", null, expressionEditorContent);
+    return (0, jsx_runtime_1.jsx)("div", { children: expressionEditorContent });
 };
 exports.GridFilterSection = GridFilterSection;

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { AdaptableColumn } from '../../../../AdaptableState/Common/AdaptableColumn';
+import { AggregationColumnValue, TableAggregationColumns } from '../../../../AdaptableState/Common/AggregationColumns';
+export declare const ParameterizedAggFuncPicker: React.FunctionComponent<{
+    column: AdaptableColumn;
+    aggValue?: AggregationColumnValue;
+    aggregationColumnsMap: Record<string, string>;
+    numberColumns: AdaptableColumn[];
+    aggregationEntries: TableAggregationColumns;
+    onChangeEntries: (entries: TableAggregationColumns) => void;
+    availableAggregationFunctions?: string[];
+}>;