@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.1

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { DataSource, InfiniteTableGrid, } from '../../../../components/InfiniteTable';
 import * as React from 'react';
 import Input from '../../../../components/Input';
@@ -19,10 +20,7 @@ import { isPivotLayout } from '../../../../Utilities/isPivotLayout';
 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 PropertyOrderText = (props) => (_jsx(Box, { className: "twa:font-bold twa:text-2", children: props.children }));
 const columnTypes = {
     default: {
         defaultFlex: 1,
@@ -86,12 +84,9 @@ export const ColumnsSectionSummary = () => {
                 align: 'center',
                 render: (params) => {
                     if (!params.data?.sortOrder?.sort) {
-                        return React.createElement(React.Fragment, null);
+                        return _jsx(_Fragment, {});
                     }
-                    return (React.createElement(Flex, null,
-                        React.createElement(Icon, { name: params.data?.sortOrder?.sort === 'Asc' ? 'arrow-up-long' : 'arrow-down-long' }),
-                        ' ',
-                        React.createElement(PropertyOrderText, null, params.data?.sortOrder?.index ?? '')));
+                    return (_jsxs(Flex, { children: [_jsx(Icon, { name: params.data?.sortOrder?.sort === 'Asc' ? 'arrow-up-long' : 'arrow-down-long' }), ' ', _jsx(PropertyOrderText, { children: params.data?.sortOrder?.index ?? '' })] }));
                 },
             },
             filter: {
@@ -101,9 +96,9 @@ export const ColumnsSectionSummary = () => {
                 minWidth: 50,
                 render: (params) => {
                     if (!params.data?.filter) {
-                        return React.createElement(React.Fragment, null);
+                        return _jsx(_Fragment, {});
                     }
-                    return React.createElement(CheckBox, { checked: true });
+                    return _jsx(CheckBox, { checked: true });
                 },
             },
             group: {
@@ -113,11 +108,9 @@ export const ColumnsSectionSummary = () => {
                 align: 'center',
                 render: (params) => {
                     if (!params.data.grouping) {
-                        return React.createElement(React.Fragment, null);
+                        return _jsx(_Fragment, {});
                     }
-                    return (React.createElement(Flex, null,
-                        React.createElement(CheckBox, { className: "twa:m-0 twa:mr-1", checked: true }),
-                        React.createElement(PropertyOrderText, null, params.data?.grouping)));
+                    return (_jsxs(Flex, { children: [_jsx(CheckBox, { className: "twa:m-0 twa:mr-1", checked: true }), _jsx(PropertyOrderText, { children: params.data?.grouping })] }));
                 },
             },
         };
@@ -129,8 +122,7 @@ export const ColumnsSectionSummary = () => {
             minHeight: tableHeight,
         },
     };
-    return (React.createElement(DataSource, { data: data, primaryKey: "columnId" },
-        React.createElement(InfiniteTableGrid, { columnTypes: columnTypes, rowHeight: rowHeight, columnHeaderHeight: headerHeight, domProps: tableDOMProps, columns: columns })));
+    return (_jsx(DataSource, { data: data, primaryKey: "columnId", children: _jsx(InfiniteTableGrid, { columnTypes: columnTypes, rowHeight: rowHeight, columnHeaderHeight: headerHeight, domProps: tableDOMProps, columns: columns }) }));
 };
 const isSelectionColumn = (columnId) => columnId === AG_GRID_SELECTION_COLUMN;
 const isColumnVisible = (options) => {
@@ -150,17 +142,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(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 || isSelectionCol, onClick: (event) => {
-                    event.stopPropagation();
-                }, checked: visible }),
-            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 twa:flex twa:items-center" },
-                "Column Group: ",
-                props.column.columnGroup.friendlyName)) : null)));
+    return (_jsx(Box, { "data-name": props.column.columnId, className: "twa:flex-1", children: _jsxs(Flex, { className: "ab-Layout-Wizard__ColumnRow__Header twa:my-1", children: [_jsx(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 }), _jsx(Flex, { className: "twa:mx-2", alignItems: "center", "data-name": "column-label", children: initialHeader }), props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (_jsxs(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] }) }));
 };
 export const ColumnsSection = (props) => {
     const adaptable = useAdaptable();
@@ -385,99 +373,94 @@ export const ColumnsSection = (props) => {
             .map((col) => col.columnId)
         : currentOrder.map((col) => col.columnId);
     const visibleIdsCurrentlyDisplayed = visibleIds.filter((colId) => currentlyDisplayedColumnIds.includes(colId));
-    return (React.createElement(Tabs, { className: "twa:h-full" },
-        React.createElement(Tabs.Tab, null, "Columns"),
-        React.createElement(Tabs.Content, null,
-            React.createElement(Box, { className: "twa:gap-2 twa:overflow-hidden twa:grid twa:grid-cols-2 twa:h-full" },
-                React.createElement(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(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:h-full twa:overflow-hidden" },
-                        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, { 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 (_jsxs(Tabs, { className: "twa:h-full", children: [_jsx(Tabs.Tab, { children: "Columns" }), _jsx(Tabs.Content, { children: _jsxs(Box, { className: "twa:gap-2 twa:overflow-hidden twa:grid twa:grid-cols-2 twa:h-full", children: [_jsx(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 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);
+                                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: _jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:h-full twa:overflow-hidden twa:p-1", children: [_jsx(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: "twa:w-full twa:border-none twa:p-1" }), _jsx(Box, { className: clsx('twa:font-bold', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard'), children: _jsx(CheckBox, { checked: currentlyDisplayedColumnIds.length
+                                                ? currentlyDisplayedColumnIds.length === visibleIdsCurrentlyDisplayed.length
+                                                    ? true
+                                                    : visibleIdsCurrentlyDisplayed.length
+                                                        ? null
+                                                        : false
+                                                : false, onChange: (checked) => {
+                                                handleColumnVisibilityChange(currentlyDisplayedColumnIds, checked);
+                                            }, children: "Select All" }) }), _jsx(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 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);
+                                                const row = event.target.closest?.(`[data-id="${option.columnId}"]`);
+                                                const input = row?.querySelector('input[type="checkbox"]');
+                                                input?.focus();
+                                            }
+                                        }, renderOption: (option) => {
+                                            return (_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 ? (_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] }) })] }));
 };
-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 = (_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 = 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"))));
+        return (_jsx(Box, { className: clsx(baseCls, 'twa:border-input-border twa:grid twa:place-items-center twa:border-dashed twa:border-2'), children: _jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:items-center twa:justify-center", children: [_jsx(Box, { className: "twa:text-text-on-primarydark ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Icon", children: _jsx(NaturallySizedIcon, { name: "inspector", style: { stroke: 'currentColor', fill: 'none', strokeWidth: 2 } }) }), _jsx(Box, { className: "twa:text-4 twa:font-bold ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Title", children: "No Column Selected" }), _jsx(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;
@@ -489,78 +472,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(Box, { className: clsx(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(Box, { className: "twa:px-4 twa:pt-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(Box, { className: "twa:px-4 twa:flex-1 twa:overflow-y-auto twa:pb-3" },
-            React.createElement(Flex, { flexDirection: "column", className: "twa:gap-3 twa:mt-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)", disabled: props.column.isGeneratedSelectionColumn, 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, { key: label, 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))))))));
+    return (_jsxs(Box, { className: clsx(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: [_jsxs(Box, { className: "twa:px-4 twa:pt-4", children: [_jsxs(Box, { className: "twa:text-5 twa:font-bold twa:leading-relaxed ab-Layout-Wizard__ColumnPropertiesEditor__Title", children: ["Column Settings: ", column.friendlyName] }), _jsxs(Box, { className: "twa:text-3 twa:opacity-80 twa:flex twa:flex-row twa:gap-1 twa:items-center", children: ["Column ID:", ' ', _jsx(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 ? (_jsxs(Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1", children: ["Column Group: ", props.column.columnGroup.friendlyName] })) : null] }), hr, _jsxs(Box, { className: "twa:px-4 twa:flex-1 twa:overflow-y-auto twa:pb-3", children: [_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:mt-3", children: [_jsxs(Flex, { flexDirection: "column", className: "twa:gap-1", children: ["Header", _jsx(Input, { "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 })] }), _jsxs(Box, { className: "twa:grid twa:grid-cols-[1fr_1fr] twa:gap-2", children: [_jsx(Box, { children: "Width:" }), " ", _jsx(Box, { children: "Flex:" }), _jsx(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 ?? '' }), _jsx(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 ?? '' }), _jsx(Box, { children: "Min Width:" }), _jsx(Box, { children: "Max Width:" }), _jsx(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 ?? '' }), _jsx(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:", _jsxs(RadioGroup, { value: columnPinning || 'None', name: "columnPinning", orientation: "horizontal", variant: "text-only", className: radioGroupStyling.horizontalTextOnly, onRadioChange: (columnPinning) => {
+                                    props.onPinChange(column.columnId, columnPinning === 'None' ? null : columnPinning);
+                                }, children: [_jsx(Radio, { value: "left", children: "Left" }), _jsx(Radio, { value: "None", children: "None" }), _jsx(Radio, { value: "right", children: "Right" })] })] }), _jsx(Box, { className: "twa:mt-5" }), hr, _jsxs(Box, { children: [_jsx(Box, { className: "twa:my-3", children: "Column Attributes" }), _jsx(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,
+                                }), 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 }) => (_jsxs(Flex, { alignItems: "center", className: clsx({
+                                        'twa:rounded-standard twa:gap-2': true,
+                                    }), children: [_jsx(Box, { className: "twa:size-5", children: checked ? (_jsx(Icon, { name: "check", className: "twa:text-success" })) : (_jsx(Icon, { name: "close", className: "twa:text-error" })) }), label] }, label))) })] })] })] }));
 };

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { getLayoutFilterViewItems } from '../../../../Strategy/Utilities/Layout/getLayoutFilterViewItems';
 import * as ModuleConstants from '../../../../Utilities/Constants/ModuleConstants';
@@ -21,7 +22,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, className: "twa:mb-1 twa:mr-1" }, value)))) : (React.createElement(Tag, null, "No Column Filters"))));
+    return (_jsx(Box, { children: fitlerViewItems.values.length ? (fitlerViewItems.values.map((value) => (_jsx(Tag, { className: "twa:mb-1 twa:mr-1", children: value }, value)))) : (_jsx(Tag, { children: "No Column Filters" })) }));
 };
 export const FilterSection = (props) => {
     const adaptable = useAdaptable();
@@ -40,40 +41,34 @@ export const FilterSection = (props) => {
             ColumnFilters: layoutFilters.map((layoutFilter) => layoutFilter.ColumnId === columnFilter.ColumnId ? { ...columnFilter } : layoutFilter),
         });
     }, [layout.ColumnFilters]);
-    return (React.createElement(Tabs, { className: "twa:h-full" },
-        React.createElement(Tabs.Tab, null, "Column Filters"),
-        React.createElement(Tabs.Content, null,
-            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({
-                                ...layout,
-                                ColumnFilters: [
-                                    ...layoutFilters,
-                                    {
-                                        ColumnId: option,
-                                        Predicates: [],
-                                    },
-                                ],
-                            });
-                        } }))),
-            layoutFilters?.length > 0 && (React.createElement(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, { columnFilter: columnFilter, onColumnFilterChange: (columnFilter) => {
-                                handlePredicateEdit(columnFilter);
-                            } })),
-                    },
-                ];
-                return (React.createElement(AdaptableObjectListItemView, { module: filterModule, abObject: columnFilter, entityType: "Column Filter", showActions: true, showEditButton: false, items: items, onDelete: () => handleDelete(columnFilter), key: columnFilter.ColumnId }));
-            }))))));
+    return (_jsxs(Tabs, { className: "twa:h-full", children: [_jsx(Tabs.Tab, { children: "Column Filters" }), _jsxs(Tabs.Content, { children: [_jsx(FormLayout, { className: "twa:mb-2", children: _jsx(FormRow, { label: "Add Column Filter", children: _jsx(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 && (_jsx(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: (_jsx(LayoutColumnFilter, { columnFilter: columnFilter, onColumnFilterChange: (columnFilter) => {
+                                            handlePredicateEdit(columnFilter);
+                                        } })),
+                                },
+                            ];
+                            return (_jsx(AdaptableObjectListItemView, { module: filterModule, abObject: columnFilter, entityType: "Column Filter", showActions: true, showEditButton: false, items: items, onDelete: () => handleDelete(columnFilter) }, columnFilter.ColumnId));
+                        }) }))] })] }));
 };

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useAdaptable } from '../../../AdaptableContext';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
@@ -17,14 +18,14 @@ export const isGridFiltersValid = (layout, api) => {
 };
 export const GridFilterSectionSummary = () => {
     const { data: layout } = useOnePageAdaptableWizardContext();
-    return (React.createElement(Box, null, React.createElement(Tag, { className: "twa:mb-1 twa:mr-1" }, layout?.GridFilter?.Expression ?? 'No Grid Filter')));
+    return (_jsx(Box, { children: _jsx(Tag, { className: "twa:mb-1 twa:mr-1", children: layout?.GridFilter?.Expression ?? 'No Grid Filter' }) }));
 };
 export const GridFilterSection = (props) => {
     const { api } = useAdaptable();
     const { data: layout } = useOnePageAdaptableWizardContext();
     const initialData = React.useMemo(() => api.internalApi.getQueryPreviewData(), []);
     const expressionEditorProps = useGridFilterOptionsForExpressionEditorProps();
-    const expressionEditorContent = (React.createElement(ExpressionEditor, { ...expressionEditorProps, allowSaveNamedQuery: false, type: 'boolean', module: GridFilterModuleId, value: layout?.GridFilter?.Expression ?? '', onChange: (expression) => {
+    const expressionEditorContent = (_jsx(ExpressionEditor, { ...expressionEditorProps, allowSaveNamedQuery: false, type: 'boolean', module: GridFilterModuleId, value: layout?.GridFilter?.Expression ?? '', onChange: (expression) => {
             props.onChange({
                 ...layout,
                 GridFilter: {
@@ -33,5 +34,5 @@ export 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 _jsx("div", { children: expressionEditorContent });
 };

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[];
+}>;

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import DropdownButton from '../../../../components/DropdownButton';
+import { getParameterizedAggregationDefinitionByAgGridName } from '../../../../Aggregation/ParameterizedAggregationRegistry';
+import { formatParameterizedArgSelectionLabel, getAdaptableAggFuncNamesForColumn, getParameterizedArgColumnLabel, resolveAggFuncValueFromWizardSelection, upsertColumnAggregationEntry, } from '../../../../Aggregation/parameterizedAggregationWizardHelpers';
+import { useAdaptable } from '../../../AdaptableContext';
+import { Box, Flex } from '../../../../components/Flex';
+export const ParameterizedAggFuncPicker = (props) => {
+    const adaptable = useAdaptable();
+    const adaptableAggFunctions = getAdaptableAggFuncNamesForColumn(props.column);
+    const availableAggregationFunctions = props.availableAggregationFunctions ?? props.column.availableAggregationFunctions ?? [];
+    const aggOptions = [
+        ...new Set([...availableAggregationFunctions, ...adaptableAggFunctions]),
+    ].map((fnName) => ({
+        label: fnName,
+        onClick: () => {
+            const aggFuncValue = resolveAggFuncValueFromWizardSelection(fnName);
+            props.onChangeEntries(upsertColumnAggregationEntry(props.aggregationEntries, props.column.columnId, aggFuncValue));
+        },
+    }));
+    const currentAggFnName = props.aggregationColumnsMap[props.column.columnId];
+    const parameterizedDefinition = currentAggFnName
+        ? getParameterizedAggregationDefinitionByAgGridName(currentAggFnName)
+        : undefined;
+    const numericColumnsOptions = props.numberColumns
+        .filter((col) => col.columnId !== props.column.columnId)
+        .map((col) => {
+        return {
+            label: col.friendlyName,
+            onClick: () => {
+                const definition = parameterizedDefinition;
+                if (!definition?.createDefinition) {
+                    return;
+                }
+                props.onChangeEntries(upsertColumnAggregationEntry(props.aggregationEntries, props.column.columnId, definition.createDefinition(col.columnId)));
+            },
+        };
+    });
+    const argSelectionLabel = formatParameterizedArgSelectionLabel(adaptable.api, props.column.columnId, props.aggValue);
+    if (!props.aggValue) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(DropdownButton, { columns: ['label'], items: aggOptions, className: "twa:ml-2", children: currentAggFnName }), parameterizedDefinition && (_jsxs(Flex, { className: "twa:bg-primary twa:ml-3", alignItems: "center", children: [_jsx(Box, { children: getParameterizedArgColumnLabel(currentAggFnName) }), ' ', _jsx(DropdownButton, { columns: ['label'], items: numericColumnsOptions, className: "twa:ml-2", children: argSelectionLabel })] }))] }));
+};

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { PivotLayout } from '../../../../../types';
-export declare const isPivotAggregationsSectionValid: (data: PivotLayout) => true | string;
+import { validatePivotLayoutAggregations } from '../../../../Aggregation/validateParameterizedAggregations';
+export declare const isPivotAggregationsSectionValid: typeof validatePivotLayoutAggregations;
 export declare const PivotAggregationsSectionSummary: React.FunctionComponent;
 interface PivotAggregationsSectionProps {
     onChange: (data: PivotLayout) => void;