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

package/src/View/FormatColumn/Wizard/FormatColumnRuleWizardSection.js

@@ -1,25 +1,16 @@
-import * as React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { EntityRulesEditor } from '../../Components/EntityRulesEditor';
 import HelpBlock from '../../../components/HelpBlock';
 export function FormatColumnRuleWizardSection(props) {
     const { data, api, moduleInfo } = useOnePageAdaptableWizardContext();
     if (data.Target && data.Target === 'columnHeader') {
-        return (React.createElement(HelpBlock, { className: "twa:mt-3" }, "Conditions cannot be applied if the Target of the Format Column is Column Header"));
+        return (_jsx(HelpBlock, { className: "twa:mt-3", children: "Conditions cannot be applied if the Target of the Format Column is Column Header" }));
     }
-    return (React.createElement(EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: props.defaultPredicateId, predicateDefs: api.formatColumnApi.internalApi.getFormatColumnDefsForScope(data.Scope), getPredicateDefsForColId: (colId) => api.formatColumnApi.internalApi.getFormatColumnDefsForScope({ ColumnIds: [colId] }), showNoRule: true, showBoolean: true, showAggregation: false, showObservable: false, showQueryBuilder: true, showPredicate: !api.columnScopeApi.scopeIsAll(data.Scope), data: data, onChange: (formatColumn) => props.onChange(formatColumn), descriptions: {
+    return (_jsx(EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: props.defaultPredicateId, predicateDefs: api.formatColumnApi.internalApi.getFormatColumnDefsForScope(data.Scope), getPredicateDefsForColId: (colId) => api.formatColumnApi.internalApi.getFormatColumnDefsForScope({ ColumnIds: [colId] }), showNoRule: true, showBoolean: true, showAggregation: false, showObservable: false, showQueryBuilder: true, showPredicate: !api.columnScopeApi.scopeIsAll(data.Scope), data: data, onChange: (formatColumn) => props.onChange(formatColumn), descriptions: {
             selectPredicate: 'Create a Format Column Rule - to be applied when data changes',
-            useBooleanQuery: (React.createElement(React.Fragment, null,
-                "Use an BooleanQuery if ",
-                React.createElement("i", null, "Scope"),
-                " is 'All Columns' - so any data change may be evaluated in a complex BooleanExpression")),
-            useObservableQuery: (React.createElement(React.Fragment, null,
-                "Use an ObservableQuery if ",
-                React.createElement("i", null, "Scope"),
-                " is 'All Columns' - so any data change may be evaluated in a complex ObservableExpression")),
-            useAggregationQuery: (React.createElement(React.Fragment, null,
-                "Use an AggregatedBooleanQuery if ",
-                React.createElement("i", null, "Scope"),
-                " is 'All Columns' - so any data change may be evaluated in a complex AggregatedBooleanExpression")),
+            useBooleanQuery: (_jsxs(_Fragment, { children: ["Use an BooleanQuery if ", _jsx("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex BooleanExpression"] })),
+            useObservableQuery: (_jsxs(_Fragment, { children: ["Use an ObservableQuery if ", _jsx("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex ObservableExpression"] })),
+            useAggregationQuery: (_jsxs(_Fragment, { children: ["Use an AggregatedBooleanQuery if ", _jsx("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex AggregatedBooleanExpression"] })),
         } }));
 }

package/src/View/FormatColumn/Wizard/FormatColumnScopeWizardSection.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NewScopeComponent, renderScopeSummary } from '../../Components/NewScopeComponent';
+import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { isScopeColumnIds } from '../../../AdaptableState/Common/ColumnScope';
+import { Box, Flex } from '../../../components/Flex';
+import FormLayout, { FormRow } from '../../../components/FormLayout';
+import { CheckBox } from '../../../components/CheckBox';
+import { Tag } from '../../../components/Tag';
+const FORMAT_COLUMN_ROW_KINDS = ['Data', 'Group', 'Summary', 'Total'];
+const ROW_KIND_LABELS = {
+    Data: 'Data (leaf) rows',
+    Group: 'Group rows',
+    Summary: 'Summary rows',
+    Total: 'Total rows',
+};
+const ROW_KIND_EXCLUDE_KEY = {
+    Data: 'ExcludeDataRows',
+    Group: 'ExcludeGroupRows',
+    Summary: 'ExcludeSummaryRows',
+    Total: 'ExcludeTotalRows',
+};
+/**
+ * Missing flags default to "include" — matches the long-standing
+ * Format Column row-scope semantics.
+ */
+const isRowKindIncluded = (data, kind) => {
+    return !data.RowScope?.[ROW_KIND_EXCLUDE_KEY[kind]];
+};
+const collectIncludedRowKinds = (data) => {
+    return FORMAT_COLUMN_ROW_KINDS.filter((k) => isRowKindIncluded(data, k));
+};
+export const renderFormatColumnScopeSummary = (data) => {
+    const showRows = data.Target === 'cell';
+    const includedKinds = collectIncludedRowKinds(data);
+    const allKinds = includedKinds.length === 4;
+    return (_jsxs(Box, { className: "twa:pr-2 twa:py-2", children: [_jsx(Box, { children: renderScopeSummary(data.Scope, {
+                    scopeWholeRow: 'Matching rows will be formatted',
+                    scopeColumns: 'Cells in selected columns will be formatted',
+                    scopeDataTypes: 'Cells in columns with these Data Types will be formatted',
+                }) }), showRows && (_jsxs(Box, { className: "twa:mt-3", children: ["Rows:", ' ', allKinds ? (_jsx(Tag, { children: "All" })) : includedKinds.length === 0 ? (_jsx(Tag, { children: "None" })) : (includedKinds.map((k) => (_jsx(Tag, { className: "twa:mr-1", children: k }, k))))] }))] }));
+};
+// ---------------------------------------------------------------------------
+// Section
+// ---------------------------------------------------------------------------
+export const FormatColumnScopeWizardSection = (props) => {
+    const { data, api } = useOnePageAdaptableWizardContext();
+    const handleScopeChange = (Scope) => {
+        const newData = { ...data, Scope };
+        const wholeRow = api.columnScopeApi.scopeIsAll(Scope);
+        if (newData.Rule?.Predicates?.length) {
+            if (wholeRow) {
+                // if scope is whole row, a predicate cannot be present, so we set the rule
+                // to be a boolean expression
+                delete newData.Rule.Predicates;
+                newData.Rule.BooleanExpression = '';
+            }
+            else {
+                const validPredicateIds = new Set(api.formatColumnApi.internalApi
+                    .getFormatColumnDefsForScope(Scope)
+                    .map((def) => def.id));
+                newData.Rule = {
+                    Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
+                        // if there are more than 1 column, then we must eliminate the IN/NotIn predicates
+                        // TODO: this should NOT be required, but the ColumnValueSelector does NOT support creatable values right now
+                        if (isScopeColumnIds(Scope) && Scope.ColumnIds.length > 1) {
+                            return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
+                        }
+                        return true;
+                    }),
+                };
+            }
+        }
+        props.onChange(newData);
+    };
+    const handleRowKindChange = (kind, include) => {
+        props.onChange({
+            ...data,
+            RowScope: {
+                ...data.RowScope,
+                [ROW_KIND_EXCLUDE_KEY[kind]]: !include,
+            },
+        });
+    };
+    const showRowToggles = data.Target === 'cell';
+    return (_jsxs(Flex, { flexDirection: "column", style: { height: '100%' }, children: [_jsxs(Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:border-b-text-on-defaultbackground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "Which Columns the Format Column will be applied to" })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto", children: _jsx(NewScopeComponent, { descriptions: {
+                                rowScope: 'Format all columns in the row',
+                                columnScope: 'Select columns to format',
+                            }, scope: data.Scope, updateScope: handleScopeChange }) })] }), showRowToggles && (_jsxs(Box, { className: "twa:border-t twa:border-border twa:px-2 twa:py-3 twa:shrink-0", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-3 twa:pb-2 twa:mb-3 twa:flex-wrap twa:border-b twa:border-b-text-on-defaultbackground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Rows" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Which kinds of Rows the Format Column will be applied to" })] }), _jsx(Flex, { flexDirection: "row", className: "twa:gap-6 twa:flex-wrap", children: [
+                            FORMAT_COLUMN_ROW_KINDS.slice(0, 2),
+                            FORMAT_COLUMN_ROW_KINDS.slice(2),
+                        ].map((rowKindGroup, groupIndex) => (_jsx(Box, { className: "twa:flex-1 twa:min-w-[220px]", children: _jsx(FormLayout, { sizes: ['180px', '1fr'], children: rowKindGroup.map((kind) => (_jsx(FormRow, { label: `${ROW_KIND_LABELS[kind]}:`, children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsx(CheckBox, { "data-name": `include-${kind.toLowerCase()}-rows-checkbox`, className: "twa:mr-2", checked: isRowKindIncluded(data, kind), onChange: (checked) => handleRowKindChange(kind, checked) }) }) }, kind))) }) }, groupIndex))) })] }))] }));
+};

package/src/View/FormatColumn/Wizard/FormatColumnSettingsWizardSection.js

@@ -1,31 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Tag } from '../../../components/Tag';
 import Radio, { RadioGroup } from '../../../components/Radio';
 import { Box, Flex } from '../../../components/Flex';
-import { Tabs } from '../../../components/Tabs';
+import { Card } from '../../../components/Card';
 import Input from '../../../components/Input';
 import { TypeRadio } from '../../Wizard/TypeRadio';
 export const renderFormatColumnSettingsSummary = (data) => {
-    return (React.createElement(Box, { className: "twa:p-2" },
-        React.createElement(Box, { className: "twa:mt-3" },
-            "Name ",
-            React.createElement(Tag, null, data.Name)),
-        React.createElement(Box, { className: "twa:mt-3" },
-            "Target",
-            ' ',
-            React.createElement(Tag, null, !data.Target || data.Target === 'cell' ? 'Column Cells' : 'Column Header')),
-        ' ',
-        React.createElement(Box, { className: "twa:mt-3" },
-            "Apply on Column Groups:",
-            ' ',
-            React.createElement(Tag, null, !data.ColumnGroupScope || data.ColumnGroupScope === 'Both'
-                ? 'Always'
-                : data.ColumnGroupScope))));
+    return (_jsxs(Box, { className: "twa:p-2", children: [_jsxs(Box, { className: "twa:mt-3", children: ["Name ", _jsx(Tag, { children: data.Name })] }), _jsxs(Box, { className: "twa:mt-3", children: ["Target", ' ', _jsx(Tag, { children: !data.Target || data.Target === 'cell' ? 'Column Cells' : 'Column Header' })] }), ' ', _jsxs(Box, { className: "twa:mt-3", children: ["Apply on Column Groups:", ' ', _jsx(Tag, { children: !data.ColumnGroupScope || data.ColumnGroupScope === 'Both'
+                            ? 'Always'
+                            : data.ColumnGroupScope })] })] }));
 };
 export const FormatColumnSettingsWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
+    const nameInputRef = React.useRef(null);
+    // When the wizard is opened for a brand-new Format Column (no Name yet),
+    // park the cursor in the Name input so the user can start typing.
+    //
+    // We have to fight three earlier focus calls:
+    //   1. <Dialog> focuses itself on mount via useAutoFocus.
+    //   2. OnePageWizards focuses its section-nav pill in a useEffect.
+    //   3. The same wizard effect re-fires when its ResizeObserver-driven
+    //      `width` state updates (a tick or two after mount).
+    //
+    // Two animation frames takes us past (3); a small setTimeout fallback
+    // re-asserts focus in case layout thrashes again.
+    React.useEffect(() => {
+        if (data?.Name) {
+            return;
+        }
+        const focusName = () => nameInputRef.current?.focus();
+        let innerRaf = 0;
+        const outerRaf = requestAnimationFrame(() => {
+            innerRaf = requestAnimationFrame(focusName);
+        });
+        const fallbackTimer = window.setTimeout(focusName, 150);
+        return () => {
+            cancelAnimationFrame(outerRaf);
+            cancelAnimationFrame(innerRaf);
+            window.clearTimeout(fallbackTimer);
+        };
+    }, []);
     const currentTarget = data.Target ? data.Target : 'cell';
     const handleTargetChange = (target) => {
         // Update the formatColumn object
@@ -41,36 +57,10 @@ export const FormatColumnSettingsWizardSection = (props) => {
         });
     };
     const behaviourSpellingVariant = api.internalApi.getCorrectEnglishVariant('Behaviour');
-    return (React.createElement(Flex, { flexDirection: "column", style: { height: '100%' } },
-        React.createElement(Tabs, { className: "twa:mb-3" },
-            React.createElement(Tabs.Tab, null, "Settings"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout, { className: "twa:max-w-[300px] twa:w-full" },
-                        React.createElement(FormRow, { label: "Name" },
-                            React.createElement(Input, { className: "twa:w-full", "data-name": "format-column-name", onChange: onNameChange, value: data?.Name ?? '' })))))),
-        React.createElement(Tabs, { className: "twa:mb-3" },
-            React.createElement(Tabs.Tab, null, "Target"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(Flex, { flexDirection: "column" },
-                    React.createElement(TypeRadio, { "data-name": "target-column-cell", text: 'Column Cells', description: "Column Cells are styled and formatted", checked: currentTarget === 'cell', onClick: () => handleTargetChange('cell') }),
-                    React.createElement(TypeRadio, { "data-name": "target-column-header", text: 'Column Header', description: "The Column Header is styled (Note: Conditions are not available for Column Headers)", checked: currentTarget === 'columnHeader', onClick: () => handleTargetChange('columnHeader') })))),
-        React.createElement(Tabs, null,
-            React.createElement(Tabs.Tab, null,
-                "Column Group ",
-                behaviourSpellingVariant,
-                " "),
-            React.createElement(Tabs.Content, null,
-                React.createElement(Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout, null,
-                        React.createElement(FormRow, { label: "Apply on Column Group:" },
-                            React.createElement(RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
-                                    props.onChange({
-                                        ...data,
-                                        ColumnGroupScope: columnGroupScope,
-                                    });
-                                } },
-                                React.createElement(Radio, { className: "twa:ml-1", value: "Both" }, "Always"),
-                                React.createElement(Radio, { className: "twa:ml-4", value: "Expanded" }, "When Expanded"),
-                                React.createElement(Radio, { className: "twa:ml-4", value: "Collapsed" }, "When Collapsed")))))))));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Format Column" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { ref: nameInputRef, className: "twa:max-w-[300px] twa:w-full", "data-name": "format-column-name", onChange: onNameChange, value: data?.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Target" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[700px]", children: "Choose whether Format Column applies to Column Cells or Column Header (latter doesn't support Conditions)" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(TypeRadio, { "data-name": "target-column-cell", text: 'Column Cells', description: "", checked: currentTarget === 'cell', onClick: () => handleTargetChange('cell') }), _jsx(TypeRadio, { "data-name": "target-column-header", text: 'Column Header', description: "", checked: currentTarget === 'columnHeader', onClick: () => handleTargetChange('columnHeader') })] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsxs(Box, { className: "twa:font-medium", children: ["Column Group ", behaviourSpellingVariant] }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose when the Format Column is applied to the Column Group" })] }), _jsx(Card.Body, { children: _jsxs(RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
+                                props.onChange({
+                                    ...data,
+                                    ColumnGroupScope: columnGroupScope,
+                                });
+                            }, children: [_jsx(Radio, { className: "twa:ml-1", value: "Both", children: "Always" }), _jsx(Radio, { className: "twa:ml-4", value: "Expanded", children: "When Expanded" }), _jsx(Radio, { className: "twa:ml-4", value: "Collapsed", children: "When Collapsed" })] }) })] })] }));
 };

package/src/View/FormatColumn/Wizard/FormatColumnStyleWizardSection.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { convertAdaptableStyleToCSS } from '../../../Utilities/Helpers/StyleHelper';
 import { StyleComponent } from '../../Components/StyleComponent';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
@@ -27,11 +27,11 @@ export const renderFormatColumnStyleWizardSummary = (data) => {
     return renderFormatColumnStyleSummary(data, api);
 };
 export const renderFormatColumnStyleSummary = (data, api) => {
-    return (React.createElement(Box, { className: "ab-FormatPreview twa:p-2", style: toStyle(data) }, "Preview result"));
+    return (_jsx(Box, { className: "ab-FormatPreview twa:p-2", style: toStyle(data), children: "Preview result" }));
 };
 export function FormatColumnStyleWizardSection(props) {
     const { data, api } = useOnePageAdaptableWizardContext();
-    return (React.createElement(StyleComponent, { headless: true, api: api, Style: data.Style ?? {}, UpdateStyle: (Style) => {
+    return (_jsx(StyleComponent, { headless: true, api: api, Style: data.Style ?? {}, UpdateStyle: (Style) => {
             props.onChange({ ...data, Style });
         } }));
 }

package/src/View/FormatColumn/Wizard/FormatColumnWizard.js

@@ -1,9 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useState } from 'react';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
-import { FormatColumnScopeWizardSection, renderFormatColumnScopeSummary, } from './FormatColumnColumnScopeWizardSection';
-import { FormatColumnRowScopeWizardSection, renderFormatColumnRowScopeSummary, } from './FormatColumnRowScopeWizardSection';
+import { FormatColumnScopeWizardSection, renderFormatColumnScopeSummary, } from './FormatColumnScopeWizardSection';
 import { FormatColumnStyleWizardSection, isFormatColumnStyleValid, renderFormatColumnStyleWizardSummary, } from './FormatColumnStyleWizardSection';
 import { FormatColumnFormatWizardSection, getFormatDisplayTypeForScope, renderFormatColumnFormatSummary, } from './FormatColumnFormatWizardSection';
 import { useAdaptable } from '../../AdaptableContext';
@@ -117,7 +117,7 @@ export function FormatColumnWizard(props) {
         }
         props.onFinishWizard(formatColumn);
     };
-    return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, modal: props.modal, data: formatColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, modal: props.modal, data: formatColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Enter Name and other Properties',
@@ -132,27 +132,16 @@ export function FormatColumnWizard(props) {
                 },
                 renderSummary: renderFormatColumnSettingsSummary,
                 render: () => {
-                    return (React.createElement(Box, { className: "twa:p-2" },
-                        React.createElement(FormatColumnSettingsWizardSection, { onChange: setFormatColumn })));
+                    return _jsx(FormatColumnSettingsWizardSection, { onChange: setFormatColumn });
                 },
             },
             {
-                title: 'Columns',
-                details: 'Select which Columns will be formatted',
+                title: 'Scope',
+                details: 'Select which Columns and Rows will be formatted',
                 isValid: isScopeValid,
                 renderSummary: renderFormatColumnScopeSummary,
                 render: () => {
-                    return (React.createElement(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
-                        React.createElement(FormatColumnScopeWizardSection, { onChange: setFormatColumn })));
-                },
-            },
-            {
-                title: 'Rows',
-                details: 'Select which Rows will be formatted',
-                renderSummary: renderFormatColumnRowScopeSummary,
-                render: () => {
-                    return (React.createElement(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
-                        React.createElement(FormatColumnRowScopeWizardSection, { onChange: setFormatColumn })));
+                    return (_jsx(Flex, { flexDirection: "column", className: "twa:h-full", children: _jsx(FormatColumnScopeWizardSection, { onChange: setFormatColumn }) }));
                 },
             },
             {
@@ -165,7 +154,7 @@ export function FormatColumnWizard(props) {
                 title: 'Condition',
                 details: 'Build a Rule when the Format Column should be applied',
                 render: () => {
-                    return (React.createElement(FormatColumnRuleWizardSection, { onChange: setFormatColumn, defaultPredicateId: DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN }));
+                    return (_jsx(FormatColumnRuleWizardSection, { onChange: setFormatColumn, defaultPredicateId: DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN }));
                 },
             },
             {
@@ -174,8 +163,7 @@ export function FormatColumnWizard(props) {
                 isValid: isFormatColumnStyleValid,
                 renderSummary: renderFormatColumnStyleWizardSummary,
                 render: () => {
-                    return (React.createElement(Box, { className: "twa:p-2" },
-                        React.createElement(FormatColumnStyleWizardSection, { onChange: setFormatColumn })));
+                    return (_jsx(Box, { className: "twa:p-2", children: _jsx(FormatColumnStyleWizardSection, { onChange: setFormatColumn }) }));
                 },
             },
             {
@@ -183,23 +171,21 @@ export function FormatColumnWizard(props) {
                 details: 'Provide a Display Format',
                 renderSummary: (data) => renderFormatColumnFormatSummary(data),
                 render: () => {
-                    return React.createElement(FormatColumnFormatWizardSection, { onChange: setFormatColumn });
+                    return _jsx(FormatColumnFormatWizardSection, { onChange: setFormatColumn });
                 },
             },
             {
                 details: 'Select Format Column Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(ObjectTagsWizardSection, { onChange: setFormatColumn }))),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(ObjectTagsWizardSection, { onChange: setFormatColumn }) })),
                 renderSummary: renderObjectTagsSummary,
             },
             '-',
             {
                 details: 'Review the Format Column',
                 render: () => {
-                    return (React.createElement(Box, { className: "twa:p-2" },
-                        React.createElement(OnePageWizardSummary, null)));
+                    return (_jsx(Box, { className: "twa:p-2", children: _jsx(OnePageWizardSummary, {}) }));
                 },
                 title: 'Summary',
             },

package/src/View/FreeTextColumn/Wizard/FreeTextColumnSettingsWizardSection.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import Input from '../../../components/Input';
 import ErrorBox from '../../../components/ErrorBox';
@@ -11,8 +11,8 @@ import { DateFormatter } from '../../../Utilities/Helpers/FormatHelper';
 import { parseToISO } from '../../../Utilities/Helpers/DateHelper';
 import { Tag } from '../../../components/Tag';
 import { SpecialColumnSettingsWizardStep } from '../../SpecialColumnSettingsWizardStep';
-import { Select } from '../../../components/Select';
 import { Box } from '../../../components/Flex';
+import { SingleSelect } from '../../../components/NewSelect';
 const options = [
     { value: 'number', label: 'Number' },
     { value: 'text', label: 'Text' },
@@ -20,22 +20,7 @@ const options = [
     { value: 'boolean', label: 'Boolean' },
 ];
 export const renderFreeTextColumnSummary = (data) => {
-    return (React.createElement(Box, { className: "twa:text-2" },
-        React.createElement(Box, null,
-            "Column Identifier: ",
-            React.createElement(Tag, null, data.ColumnId)),
-        data.FriendlyName ? (React.createElement(Box, { className: "twa:mt-3" },
-            "Column Name: ",
-            React.createElement(Tag, null, data.FriendlyName ?? data.ColumnId))) : null,
-        React.createElement(Box, { className: "twa:mt-3" },
-            "Data Type: ",
-            React.createElement(Tag, null, data.FreeTextColumnSettings.DataType)),
-        data.DefaultValue !== undefined ? (React.createElement(Box, { className: "twa:mt-3" },
-            "Default Value: ",
-            React.createElement(Tag, null, data.DefaultValue))) : null,
-        data.TextEditor !== undefined ? (React.createElement(Box, { className: "twa:mt-3" },
-            "Editor Type: ",
-            React.createElement(Tag, null, data.TextEditor))) : null));
+    return (_jsxs(Box, { className: "twa:text-2", children: [_jsxs(Box, { children: ["Column Identifier: ", _jsx(Tag, { children: data.ColumnId })] }), data.FriendlyName ? (_jsxs(Box, { className: "twa:mt-3", children: ["Column Name: ", _jsx(Tag, { children: data.FriendlyName ?? data.ColumnId })] })) : null, _jsxs(Box, { className: "twa:mt-3", children: ["Data Type: ", _jsx(Tag, { children: data.FreeTextColumnSettings.DataType })] }), data.DefaultValue !== undefined ? (_jsxs(Box, { className: "twa:mt-3", children: ["Default Value: ", _jsx(Tag, { children: data.DefaultValue })] })) : null, data.TextEditor !== undefined ? (_jsxs(Box, { className: "twa:mt-3", children: ["Editor Type: ", _jsx(Tag, { children: data.TextEditor })] })) : null] }));
 };
 export const isValidFreeTextColumn = (data, api) => {
     const columns = api.columnApi.getUIAvailableColumns();
@@ -121,40 +106,22 @@ export const FreeTextColumnSettingsWizardSection = (props) => {
             },
         });
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(FormLayout, null,
-            React.createElement(FormRow, { label: "Column Name" },
-                React.createElement(Input, { "data-name": "column-id", autoFocus: !inEdit, value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, disabled: inEdit, type: "text", placeholder: "Enter a Column Name", onChange: (e) => handleColumnIdChange(e) })),
-            React.createElement(FormRow, { label: "Column Header" },
-                React.createElement(Input, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
-                        setColumnNameFocused(true);
-                    }, onBlur: () => {
-                        setColumnNameFocused(false);
-                    }, value: ColumnNameFocused ? data.FriendlyName || '' : data.FriendlyName || data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, type: "text", placeholder: "Enter a Column Header (optional)", onChange: (e) => handleColumnNameChange(e) })),
-            React.createElement(FormRow, { label: "Data Type" },
-                React.createElement(Box, { className: "twa:max-w-[500px]" },
-                    React.createElement(Select, { "data-name": "column-type-dropdown", options: options, placeholder: "Select Data Type", value: data.FreeTextColumnSettings.DataType, onChange: (value) => handleDataTypeChange(value) }))),
-            React.createElement(FormRow, { label: "Default Value" }, data.FreeTextColumnSettings.DataType === 'boolean' ? (React.createElement(CheckBox, { "data-name": "column-default-value-checkbox", checked: !!data.DefaultValue, onChange: (DefaultValue) => {
-                    props.onChange({
-                        ...data,
-                        DefaultValue,
-                    });
-                } })) : (React.createElement(AdaptableInput, { "data-name": "column-default-value", value: data.FreeTextColumnSettings.DataType === 'date' && data.DefaultValue
-                    ? parseToISO(data.DefaultValue, Pattern) || ''
-                    : data.DefaultValue || '', className: "twa:w-full twa:max-w-[500px]", type: data.FreeTextColumnSettings.DataType === 'number'
-                    ? 'number'
-                    : data.FreeTextColumnSettings.DataType === 'date'
-                        ? 'date'
-                        : 'text', placeholder: "Enter a default value (optional)", onChange: (e) => handleDefaultValueChange(e) }))),
-            React.createElement(FormRow, { label: "Header Tooltip" },
-                React.createElement(Input, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: data.FreeTextColumnSettings?.HeaderToolTip || '', onChange: (e) => handleSpecialColumnSettingsChange({
-                        HeaderToolTip: e.target.value,
-                    }) })),
-            ' ',
-            data.FreeTextColumnSettings.DataType == 'text' && (React.createElement(FormRow, { label: "Cell Editor" },
-                React.createElement(Radio, { "data-name": "inline-editor", value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), className: "twa:mr-2" }, "Inline Editor"),
-                React.createElement(Radio, { "data-name": "large-editor", value: "Large", checked: data.TextEditor == 'Large', onChange: (_, e) => onDynamicSelectChanged(e) }, "Large Editor")))),
-        ErrorMessage ? React.createElement(ErrorBox, { className: "twa:my-2" }, ErrorMessage) : null,
-        React.createElement(Box, { className: "twa:mt-2" },
-            React.createElement(SpecialColumnSettingsWizardStep, { isEditable: true, settings: data.FreeTextColumnSettings, onChange: handleSpecialColumnSettingsChange }))));
+    return (_jsxs(_Fragment, { children: [_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Column Name", children: _jsx(Input, { "data-name": "column-id", autoFocus: !inEdit, value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, disabled: inEdit, type: "text", placeholder: "Enter a Column Name", onChange: (e) => handleColumnIdChange(e) }) }), _jsx(FormRow, { label: "Column Header", children: _jsx(Input, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
+                                setColumnNameFocused(true);
+                            }, onBlur: () => {
+                                setColumnNameFocused(false);
+                            }, value: ColumnNameFocused ? data.FriendlyName || '' : data.FriendlyName || data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, type: "text", placeholder: "Enter a Column Header (optional)", onChange: (e) => handleColumnNameChange(e) }) }), _jsx(FormRow, { label: "Data Type", children: _jsx(Box, { className: "twa:max-w-[500px]", children: _jsx(SingleSelect, { "data-name": "column-type-dropdown", className: "twa:w-full", items: options, placeholder: "Select Data Type", value: data.FreeTextColumnSettings.DataType, onValueChange: (value) => handleDataTypeChange(value) }) }) }), _jsx(FormRow, { label: "Default Value", children: data.FreeTextColumnSettings.DataType === 'boolean' ? (_jsx(CheckBox, { "data-name": "column-default-value-checkbox", checked: !!data.DefaultValue, onChange: (DefaultValue) => {
+                                props.onChange({
+                                    ...data,
+                                    DefaultValue,
+                                });
+                            } })) : (_jsx(AdaptableInput, { "data-name": "column-default-value", value: data.FreeTextColumnSettings.DataType === 'date' && data.DefaultValue
+                                ? parseToISO(data.DefaultValue, Pattern) || ''
+                                : data.DefaultValue || '', className: "twa:w-full twa:max-w-[500px]", type: data.FreeTextColumnSettings.DataType === 'number'
+                                ? 'number'
+                                : data.FreeTextColumnSettings.DataType === 'date'
+                                    ? 'date'
+                                    : 'text', placeholder: "Enter a default value (optional)", onChange: (e) => handleDefaultValueChange(e) })) }), _jsx(FormRow, { label: "Header Tooltip", children: _jsx(Input, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: data.FreeTextColumnSettings?.HeaderToolTip || '', onChange: (e) => handleSpecialColumnSettingsChange({
+                                HeaderToolTip: e.target.value,
+                            }) }) }), ' ', data.FreeTextColumnSettings.DataType == 'text' && (_jsxs(FormRow, { label: "Cell Editor", children: [_jsx(Radio, { "data-name": "inline-editor", value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), className: "twa:mr-2", children: "Inline Editor" }), _jsx(Radio, { "data-name": "large-editor", value: "Large", checked: data.TextEditor == 'Large', onChange: (_, e) => onDynamicSelectChanged(e), children: "Large Editor" })] }))] }), ErrorMessage ? _jsx(ErrorBox, { className: "twa:my-2", children: ErrorMessage }) : null, _jsx(Box, { className: "twa:mt-2", children: _jsx(SpecialColumnSettingsWizardStep, { isEditable: true, settings: data.FreeTextColumnSettings, onChange: handleSpecialColumnSettingsChange }) })] }));
 };

package/src/View/FreeTextColumn/Wizard/FreeTextColumnWizard.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
@@ -32,22 +32,20 @@ export const FreeTextColumnWizard = (props) => {
         }
         props.onFinishWizard(freeTextColumn);
     };
-    return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: freeTextColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: freeTextColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Configure the Free Text Column',
                 isValid: isValidFreeTextColumn,
                 render: () => {
-                    return (React.createElement(Box, { className: "twa:p-2" },
-                        React.createElement(FreeTextColumnSettingsWizardSection, { isEdit: Boolean(props.data), onChange: setFreeTextColumn })));
+                    return (_jsx(Box, { className: "twa:p-2", children: _jsx(FreeTextColumnSettingsWizardSection, { isEdit: Boolean(props.data), onChange: setFreeTextColumn }) }));
                 },
             },
             {
                 details: 'Select Free Text Column Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(ObjectTagsWizardSection, { onChange: setFreeTextColumn }))),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(ObjectTagsWizardSection, { onChange: setFreeTextColumn }) })),
                 renderSummary: renderObjectTagsSummary,
             },
             '-',
@@ -55,8 +53,7 @@ export const FreeTextColumnWizard = (props) => {
                 details: 'Review the Free Text Column',
                 renderSummary: renderFreeTextColumnSummary,
                 render: () => {
-                    return (React.createElement(Box, { className: "twa:p-2" },
-                        React.createElement(OnePageWizardSummary, null)));
+                    return (_jsx(Box, { className: "twa:p-2", children: _jsx(OnePageWizardSummary, {}) }));
                 },
                 title: 'Summary',
             },

package/src/View/GridFilter/GridFilterExpressionEditor.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 import { ExpressionEditor } from '../../components/ExpressionEditor';
@@ -85,29 +86,21 @@ export const GridFilterExpressionEditor = (props) => {
     };
     const expressionEditorProps = useGridFilterOptionsForExpressionEditorProps();
     const actionsDisabled = !isExpressionValid || IsNullOrEmpty(expression) || hasNamedQueryError;
-    return (React.createElement(NamedQueryContext.Provider, { value: {
+    return (_jsx(NamedQueryContext.Provider, { value: {
             namedQuery: namedQuery,
             setNamedQuery: (newQuery) => {
                 setNamedQuery(newQuery);
             },
-        } },
-        React.createElement(Flex, { flexDirection: "column", className: "twa:h-full" },
-            React.createElement(ExpressionEditor, { ...expressionEditorProps, type: 'boolean', module: GridFilterModuleId, value: expression, onChange: (expression) => setExpression(expression), initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }),
-            React.createElement(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-1" },
-                props.onDismiss && (React.createElement(SimpleButton, { className: "twa:m-1", variant: "text", "data-name": "action-close", onClick: () => {
-                        props.onDismiss();
-                    } }, "CLOSE")),
-                React.createElement(Box, { className: "twa:flex-1" }),
-                React.createElement(SimpleButton, { disabled: actionsDisabled, onClick: handleSaveQuery, icon: "save" }, "Save Query"),
-                React.createElement(SimpleButton, { "data-name": "action-clear", onClick: onClearExpression, icon: "close", disabled: IsNullOrEmpty(expression), className: "twa:ml-1" }, "Clear Query"),
-                React.createElement(SimpleButton, { variant: "raised", tone: "accent", "data-name": "action-run", className: "twa:m-1", icon: "play", onClick: () => {
-                        if (namedQuery) {
-                            onAddNamedQuery({
-                                Name: namedQuery.Name,
-                                BooleanExpression: expression,
-                            });
-                        }
-                        onRunQuery(expression);
-                        props?.onDismiss?.();
-                    }, disabled: actionsDisabled }, "Apply Grid Filter")))));
+        }, children: _jsxs(Flex, { flexDirection: "column", className: "twa:h-full", children: [_jsx(ExpressionEditor, { ...expressionEditorProps, type: 'boolean', module: GridFilterModuleId, value: expression, onChange: (expression) => setExpression(expression), initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-1", children: [props.onDismiss && (_jsx(SimpleButton, { className: "twa:m-1", variant: "text", "data-name": "action-close", onClick: () => {
+                                props.onDismiss();
+                            }, children: "CLOSE" })), _jsx(Box, { className: "twa:flex-1" }), _jsx(SimpleButton, { disabled: actionsDisabled, onClick: handleSaveQuery, icon: "save", children: "Save Query" }), _jsx(SimpleButton, { "data-name": "action-clear", onClick: onClearExpression, icon: "close", disabled: IsNullOrEmpty(expression), className: "twa:ml-1", children: "Clear Query" }), _jsx(SimpleButton, { variant: "raised", tone: "accent", "data-name": "action-run", className: "twa:m-1", icon: "play", onClick: () => {
+                                if (namedQuery) {
+                                    onAddNamedQuery({
+                                        Name: namedQuery.Name,
+                                        BooleanExpression: expression,
+                                    });
+                                }
+                                onRunQuery(expression);
+                                props?.onDismiss?.();
+                            }, disabled: actionsDisabled, children: "Apply Grid Filter" })] })] }) }));
 };

package/src/View/GridFilter/GridFilterPopup.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useGridFilterExpressionEditor } from './useGridFilterExpressionEditor';
 import { GridFilterPopupUI } from './GridFilterPopupUI';
 export const GridFilterPopup = () => {
@@ -31,5 +31,5 @@ export const GridFilterPopup = () => {
     const handleSetGridFilterExpression = (query) => {
         hookData.setGridFilterExpression(query);
     };
-    return (React.createElement(GridFilterPopupUI, { expression: hookData.expression, isExpressionValid: hookData.isExpressionValid, isExpressionNamedQuery: hookData.isExpressionNamedQuery, isSuspended: hookData.isSuspended, isReadOnly: hookData.isReadOnly, availableColumns: hookData.availableColumns, namedQueries: hookData.namedQueries, cachedQueries: hookData.cachedQueries, currentGridFilterExpression: hookData.gridFilter?.Expression, headerText: "Grid Filter", glyphicon: "grid-filter", infoLink: hookData.gridFilterHelpPage, infoLinkDisabled: hookData.gridFilterLinkDisabled, onExpressionChange: handleExpressionChange, onRunQuery: handleRunQuery, onClearQuery: handleClearQuery, onSaveQuery: handleSaveQuery, onSuspend: handleSuspend, onUnsuspend: handleUnsuspend, onExpand: handleExpand, onSelectNamedQuery: handleSelectNamedQuery, onSetGridFilterExpression: handleSetGridFilterExpression, gridFilterAccessLevel: hookData.gridFilterAccessLevel, namedQueryAccessLevel: hookData.namedQueryModuleAccessLevel }));
+    return (_jsx(GridFilterPopupUI, { expression: hookData.expression, isExpressionValid: hookData.isExpressionValid, isExpressionNamedQuery: hookData.isExpressionNamedQuery, isSuspended: hookData.isSuspended, isReadOnly: hookData.isReadOnly, availableColumns: hookData.availableColumns, namedQueries: hookData.namedQueries, cachedQueries: hookData.cachedQueries, currentGridFilterExpression: hookData.gridFilter?.Expression, headerText: "Grid Filter", glyphicon: "grid-filter", infoLink: hookData.gridFilterHelpPage, infoLinkDisabled: hookData.gridFilterLinkDisabled, onExpressionChange: handleExpressionChange, onRunQuery: handleRunQuery, onClearQuery: handleClearQuery, onSaveQuery: handleSaveQuery, onSuspend: handleSuspend, onUnsuspend: handleUnsuspend, onExpand: handleExpand, onSelectNamedQuery: handleSelectNamedQuery, onSetGridFilterExpression: handleSetGridFilterExpression, gridFilterAccessLevel: hookData.gridFilterAccessLevel, namedQueryAccessLevel: hookData.namedQueryModuleAccessLevel }));
 };