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

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

@@ -2,35 +2,51 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormatColumnSettingsWizardSection = exports.renderFormatColumnSettingsSummary = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Tag_1 = require("../../../components/Tag");
 const Radio_1 = tslib_1.__importStar(require("../../../components/Radio"));
 const Flex_1 = require("../../../components/Flex");
-const Tabs_1 = require("../../../components/Tabs");
+const Card_1 = require("../../../components/Card");
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const TypeRadio_1 = require("../../Wizard/TypeRadio");
 const renderFormatColumnSettingsSummary = (data) => {
-    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-        React.createElement(Flex_1.Box, { className: "twa:mt-3" },
-            "Name ",
-            React.createElement(Tag_1.Tag, null, data.Name)),
-        React.createElement(Flex_1.Box, { className: "twa:mt-3" },
-            "Target",
-            ' ',
-            React.createElement(Tag_1.Tag, null, !data.Target || data.Target === 'cell' ? 'Column Cells' : 'Column Header')),
-        ' ',
-        React.createElement(Flex_1.Box, { className: "twa:mt-3" },
-            "Apply on Column Groups:",
-            ' ',
-            React.createElement(Tag_1.Tag, null, !data.ColumnGroupScope || data.ColumnGroupScope === 'Both'
-                ? 'Always'
-                : data.ColumnGroupScope))));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:p-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: ["Name ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.Name })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: ["Target", ' ', (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: !data.Target || data.Target === 'cell' ? 'Column Cells' : 'Column Header' })] }), ' ', (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: ["Apply on Column Groups:", ' ', (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: !data.ColumnGroupScope || data.ColumnGroupScope === 'Both'
+                            ? 'Always'
+                            : data.ColumnGroupScope })] })] }));
 };
 exports.renderFormatColumnSettingsSummary = renderFormatColumnSettingsSummary;
 const FormatColumnSettingsWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.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
@@ -46,37 +62,11 @@ const FormatColumnSettingsWizardSection = (props) => {
         });
     };
     const behaviourSpellingVariant = api.internalApi.getCorrectEnglishVariant('Behaviour');
-    return (React.createElement(Flex_1.Flex, { flexDirection: "column", style: { height: '100%' } },
-        React.createElement(Tabs_1.Tabs, { className: "twa:mb-3" },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(Flex_1.Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout_1.default, { className: "twa:max-w-[300px] twa:w-full" },
-                        React.createElement(FormLayout_1.FormRow, { label: "Name" },
-                            React.createElement(Input_1.default, { className: "twa:w-full", "data-name": "format-column-name", onChange: onNameChange, value: data?.Name ?? '' })))))),
-        React.createElement(Tabs_1.Tabs, { className: "twa:mb-3" },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Target"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(Flex_1.Flex, { flexDirection: "column" },
-                    React.createElement(TypeRadio_1.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_1.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_1.Tabs, null,
-            React.createElement(Tabs_1.Tabs.Tab, null,
-                "Column Group ",
-                behaviourSpellingVariant,
-                " "),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(Flex_1.Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout_1.default, null,
-                        React.createElement(FormLayout_1.FormRow, { label: "Apply on Column Group:" },
-                            React.createElement(Radio_1.RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
-                                    props.onChange({
-                                        ...data,
-                                        ColumnGroupScope: columnGroupScope,
-                                    });
-                                } },
-                                React.createElement(Radio_1.default, { className: "twa:ml-1", value: "Both" }, "Always"),
-                                React.createElement(Radio_1.default, { className: "twa:ml-4", value: "Expanded" }, "When Expanded"),
-                                React.createElement(Radio_1.default, { className: "twa:ml-4", value: "Collapsed" }, "When Collapsed")))))))));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Format Column" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { ref: nameInputRef, className: "twa:max-w-[300px] twa:w-full", "data-name": "format-column-name", onChange: onNameChange, value: data?.Name ?? '' }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Target" }), (0, jsx_runtime_1.jsx)(Flex_1.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)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { "data-name": "target-column-cell", text: 'Column Cells', description: "", checked: currentTarget === 'cell', onClick: () => handleTargetChange('cell') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { "data-name": "target-column-header", text: 'Column Header', description: "", checked: currentTarget === 'columnHeader', onClick: () => handleTargetChange('columnHeader') })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:font-medium", children: ["Column Group ", behaviourSpellingVariant] }), (0, jsx_runtime_1.jsx)(Flex_1.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" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Radio_1.RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
+                                props.onChange({
+                                    ...data,
+                                    ColumnGroupScope: columnGroupScope,
+                                });
+                            }, children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:ml-1", value: "Both", children: "Always" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:ml-4", value: "Expanded", children: "When Expanded" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:ml-4", value: "Collapsed", children: "When Collapsed" })] }) })] })] }));
 };
 exports.FormatColumnSettingsWizardSection = FormatColumnSettingsWizardSection;

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderFormatColumnStyleSummary = exports.renderFormatColumnStyleWizardSummary = exports.isFormatColumnStyleValid = void 0;
 exports.FormatColumnStyleWizardSection = FormatColumnStyleWizardSection;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const StyleHelper_1 = require("../../../Utilities/Helpers/StyleHelper");
 const StyleComponent_1 = require("../../Components/StyleComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
@@ -34,12 +34,12 @@ const renderFormatColumnStyleWizardSummary = (data) => {
 };
 exports.renderFormatColumnStyleWizardSummary = renderFormatColumnStyleWizardSummary;
 const renderFormatColumnStyleSummary = (data, api) => {
-    return (React.createElement(Flex_1.Box, { className: "ab-FormatPreview twa:p-2", style: toStyle(data) }, "Preview result"));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-FormatPreview twa:p-2", style: toStyle(data), children: "Preview result" }));
 };
 exports.renderFormatColumnStyleSummary = renderFormatColumnStyleSummary;
 function FormatColumnStyleWizardSection(props) {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(StyleComponent_1.StyleComponent, { headless: true, api: api, Style: data.Style ?? {}, UpdateStyle: (Style) => {
+    return ((0, jsx_runtime_1.jsx)(StyleComponent_1.StyleComponent, { headless: true, api: api, Style: data.Style ?? {}, UpdateStyle: (Style) => {
             props.onChange({ ...data, Style });
         } }));
 }

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

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormatColumnWizard = FormatColumnWizard;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Helper_1 = require("../../../Utilities/Helpers/Helper");
-const FormatColumnColumnScopeWizardSection_1 = require("./FormatColumnColumnScopeWizardSection");
-const FormatColumnRowScopeWizardSection_1 = require("./FormatColumnRowScopeWizardSection");
+const FormatColumnScopeWizardSection_1 = require("./FormatColumnScopeWizardSection");
 const FormatColumnStyleWizardSection_1 = require("./FormatColumnStyleWizardSection");
 const FormatColumnFormatWizardSection_1 = require("./FormatColumnFormatWizardSection");
 const AdaptableContext_1 = require("../../AdaptableContext");
@@ -121,7 +121,7 @@ function FormatColumnWizard(props) {
         }
         props.onFinishWizard(formatColumn);
     };
-    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, modal: props.modal, data: formatColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.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',
@@ -136,27 +136,16 @@ function FormatColumnWizard(props) {
                 },
                 renderSummary: FormatColumnSettingsWizardSection_1.renderFormatColumnSettingsSummary,
                 render: () => {
-                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                        React.createElement(FormatColumnSettingsWizardSection_1.FormatColumnSettingsWizardSection, { onChange: setFormatColumn })));
+                    return (0, jsx_runtime_1.jsx)(FormatColumnSettingsWizardSection_1.FormatColumnSettingsWizardSection, { onChange: setFormatColumn });
                 },
             },
             {
-                title: 'Columns',
-                details: 'Select which Columns will be formatted',
+                title: 'Scope',
+                details: 'Select which Columns and Rows will be formatted',
                 isValid: NewScopeComponent_1.isScopeValid,
-                renderSummary: FormatColumnColumnScopeWizardSection_1.renderFormatColumnScopeSummary,
+                renderSummary: FormatColumnScopeWizardSection_1.renderFormatColumnScopeSummary,
                 render: () => {
-                    return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
-                        React.createElement(FormatColumnColumnScopeWizardSection_1.FormatColumnScopeWizardSection, { onChange: setFormatColumn })));
-                },
-            },
-            {
-                title: 'Rows',
-                details: 'Select which Rows will be formatted',
-                renderSummary: FormatColumnRowScopeWizardSection_1.renderFormatColumnRowScopeSummary,
-                render: () => {
-                    return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
-                        React.createElement(FormatColumnRowScopeWizardSection_1.FormatColumnRowScopeWizardSection, { onChange: setFormatColumn })));
+                    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full", children: (0, jsx_runtime_1.jsx)(FormatColumnScopeWizardSection_1.FormatColumnScopeWizardSection, { onChange: setFormatColumn }) }));
                 },
             },
             {
@@ -169,7 +158,7 @@ function FormatColumnWizard(props) {
                 title: 'Condition',
                 details: 'Build a Rule when the Format Column should be applied',
                 render: () => {
-                    return (React.createElement(FormatColumnRuleWizardSection_1.FormatColumnRuleWizardSection, { onChange: setFormatColumn, defaultPredicateId: constants_1.DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN }));
+                    return ((0, jsx_runtime_1.jsx)(FormatColumnRuleWizardSection_1.FormatColumnRuleWizardSection, { onChange: setFormatColumn, defaultPredicateId: constants_1.DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN }));
                 },
             },
             {
@@ -178,8 +167,7 @@ function FormatColumnWizard(props) {
                 isValid: FormatColumnStyleWizardSection_1.isFormatColumnStyleValid,
                 renderSummary: FormatColumnStyleWizardSection_1.renderFormatColumnStyleWizardSummary,
                 render: () => {
-                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                        React.createElement(FormatColumnStyleWizardSection_1.FormatColumnStyleWizardSection, { onChange: setFormatColumn })));
+                    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(FormatColumnStyleWizardSection_1.FormatColumnStyleWizardSection, { onChange: setFormatColumn }) }));
                 },
             },
             {
@@ -187,23 +175,21 @@ function FormatColumnWizard(props) {
                 details: 'Provide a Display Format',
                 renderSummary: (data) => (0, FormatColumnFormatWizardSection_1.renderFormatColumnFormatSummary)(data),
                 render: () => {
-                    return React.createElement(FormatColumnFormatWizardSection_1.FormatColumnFormatWizardSection, { onChange: setFormatColumn });
+                    return (0, jsx_runtime_1.jsx)(FormatColumnFormatWizardSection_1.FormatColumnFormatWizardSection, { onChange: setFormatColumn });
                 },
             },
             {
                 details: 'Select Format Column Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                    React.createElement(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setFormatColumn }))),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setFormatColumn }) })),
                 renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
             },
             '-',
             {
                 details: 'Review the Format Column',
                 render: () => {
-                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                        React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));
+                    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageWizardSummary, {}) }));
                 },
                 title: 'Summary',
             },

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FreeTextColumnSettingsWizardSection = exports.isValidFreeTextColumn = exports.renderFreeTextColumnSummary = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
@@ -15,8 +15,8 @@ const FormatHelper_1 = require("../../../Utilities/Helpers/FormatHelper");
 const DateHelper_1 = require("../../../Utilities/Helpers/DateHelper");
 const Tag_1 = require("../../../components/Tag");
 const SpecialColumnSettingsWizardStep_1 = require("../../SpecialColumnSettingsWizardStep");
-const Select_1 = require("../../../components/Select");
 const Flex_1 = require("../../../components/Flex");
+const NewSelect_1 = require("../../../components/NewSelect");
 const options = [
     { value: 'number', label: 'Number' },
     { value: 'text', label: 'Text' },
@@ -24,22 +24,7 @@ const options = [
     { value: 'boolean', label: 'Boolean' },
 ];
 const renderFreeTextColumnSummary = (data) => {
-    return (React.createElement(Flex_1.Box, { className: "twa:text-2" },
-        React.createElement(Flex_1.Box, null,
-            "Column Identifier: ",
-            React.createElement(Tag_1.Tag, null, data.ColumnId)),
-        data.FriendlyName ? (React.createElement(Flex_1.Box, { className: "twa:mt-3" },
-            "Column Name: ",
-            React.createElement(Tag_1.Tag, null, data.FriendlyName ?? data.ColumnId))) : null,
-        React.createElement(Flex_1.Box, { className: "twa:mt-3" },
-            "Data Type: ",
-            React.createElement(Tag_1.Tag, null, data.FreeTextColumnSettings.DataType)),
-        data.DefaultValue !== undefined ? (React.createElement(Flex_1.Box, { className: "twa:mt-3" },
-            "Default Value: ",
-            React.createElement(Tag_1.Tag, null, data.DefaultValue))) : null,
-        data.TextEditor !== undefined ? (React.createElement(Flex_1.Box, { className: "twa:mt-3" },
-            "Editor Type: ",
-            React.createElement(Tag_1.Tag, null, data.TextEditor))) : null));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Column Identifier: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.ColumnId })] }), data.FriendlyName ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: ["Column Name: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.FriendlyName ?? data.ColumnId })] })) : null, (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: ["Data Type: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.FreeTextColumnSettings.DataType })] }), data.DefaultValue !== undefined ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: ["Default Value: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.DefaultValue })] })) : null, data.TextEditor !== undefined ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: ["Editor Type: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.TextEditor })] })) : null] }));
 };
 exports.renderFreeTextColumnSummary = renderFreeTextColumnSummary;
 const isValidFreeTextColumn = (data, api) => {
@@ -127,41 +112,23 @@ const FreeTextColumnSettingsWizardSection = (props) => {
             },
         });
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(FormLayout_1.default, null,
-            React.createElement(FormLayout_1.FormRow, { label: "Column Name" },
-                React.createElement(Input_1.default, { "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(FormLayout_1.FormRow, { label: "Column Header" },
-                React.createElement(Input_1.default, { "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(FormLayout_1.FormRow, { label: "Data Type" },
-                React.createElement(Flex_1.Box, { className: "twa:max-w-[500px]" },
-                    React.createElement(Select_1.Select, { "data-name": "column-type-dropdown", options: options, placeholder: "Select Data Type", value: data.FreeTextColumnSettings.DataType, onChange: (value) => handleDataTypeChange(value) }))),
-            React.createElement(FormLayout_1.FormRow, { label: "Default Value" }, data.FreeTextColumnSettings.DataType === 'boolean' ? (React.createElement(CheckBox_1.CheckBox, { "data-name": "column-default-value-checkbox", checked: !!data.DefaultValue, onChange: (DefaultValue) => {
-                    props.onChange({
-                        ...data,
-                        DefaultValue,
-                    });
-                } })) : (React.createElement(AdaptableInput_1.default, { "data-name": "column-default-value", value: data.FreeTextColumnSettings.DataType === 'date' && data.DefaultValue
-                    ? (0, DateHelper_1.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(FormLayout_1.FormRow, { label: "Header Tooltip" },
-                React.createElement(Input_1.default, { "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(FormLayout_1.FormRow, { label: "Cell Editor" },
-                React.createElement(Radio_1.default, { "data-name": "inline-editor", value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), className: "twa:mr-2" }, "Inline Editor"),
-                React.createElement(Radio_1.default, { "data-name": "large-editor", value: "Large", checked: data.TextEditor == 'Large', onChange: (_, e) => onDynamicSelectChanged(e) }, "Large Editor")))),
-        ErrorMessage ? React.createElement(ErrorBox_1.default, { className: "twa:my-2" }, ErrorMessage) : null,
-        React.createElement(Flex_1.Box, { className: "twa:mt-2" },
-            React.createElement(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: true, settings: data.FreeTextColumnSettings, onChange: handleSpecialColumnSettingsChange }))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Column Name", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "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) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Column Header", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "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) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Data Type", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[500px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "column-type-dropdown", className: "twa:w-full", items: options, placeholder: "Select Data Type", value: data.FreeTextColumnSettings.DataType, onValueChange: (value) => handleDataTypeChange(value) }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Default Value", children: data.FreeTextColumnSettings.DataType === 'boolean' ? ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "column-default-value-checkbox", checked: !!data.DefaultValue, onChange: (DefaultValue) => {
+                                props.onChange({
+                                    ...data,
+                                    DefaultValue,
+                                });
+                            } })) : ((0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { "data-name": "column-default-value", value: data.FreeTextColumnSettings.DataType === 'date' && data.DefaultValue
+                                ? (0, DateHelper_1.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) })) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Header Tooltip", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "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' && ((0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Cell Editor", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "inline-editor", value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), className: "twa:mr-2", children: "Inline Editor" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "large-editor", value: "Large", checked: data.TextEditor == 'Large', onChange: (_, e) => onDynamicSelectChanged(e), children: "Large Editor" })] }))] }), ErrorMessage ? (0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:my-2", children: ErrorMessage }) : null, (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-2", children: (0, jsx_runtime_1.jsx)(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: true, settings: data.FreeTextColumnSettings, onChange: handleSpecialColumnSettingsChange }) })] }));
 };
 exports.FreeTextColumnSettingsWizardSection = FreeTextColumnSettingsWizardSection;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FreeTextColumnWizard = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Helper_1 = require("../../../Utilities/Helpers/Helper");
@@ -36,22 +36,20 @@ const FreeTextColumnWizard = (props) => {
         }
         props.onFinishWizard(freeTextColumn);
     };
-    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: freeTextColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: freeTextColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Configure the Free Text Column',
                 isValid: FreeTextColumnSettingsWizardSection_1.isValidFreeTextColumn,
                 render: () => {
-                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                        React.createElement(FreeTextColumnSettingsWizardSection_1.FreeTextColumnSettingsWizardSection, { isEdit: Boolean(props.data), onChange: setFreeTextColumn })));
+                    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(FreeTextColumnSettingsWizardSection_1.FreeTextColumnSettingsWizardSection, { isEdit: Boolean(props.data), onChange: setFreeTextColumn }) }));
                 },
             },
             {
                 details: 'Select Free Text Column Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                    React.createElement(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setFreeTextColumn }))),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setFreeTextColumn }) })),
                 renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
             },
             '-',
@@ -59,8 +57,7 @@ const FreeTextColumnWizard = (props) => {
                 details: 'Review the Free Text Column',
                 renderSummary: FreeTextColumnSettingsWizardSection_1.renderFreeTextColumnSummary,
                 render: () => {
-                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                        React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));
+                    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageWizardSummary, {}) }));
                 },
                 title: 'Summary',
             },

package/src/View/GridFilter/GridFilterExpressionEditor.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridFilterExpressionEditor = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const ExpressionEditor_1 = require("../../components/ExpressionEditor");
@@ -89,30 +90,22 @@ const GridFilterExpressionEditor = (props) => {
     };
     const expressionEditorProps = (0, useGridFilterOptionsForExpressionEditor_1.useGridFilterOptionsForExpressionEditorProps)();
     const actionsDisabled = !isExpressionValid || (0, StringExtensions_1.IsNullOrEmpty)(expression) || hasNamedQueryError;
-    return (React.createElement(NamedQueryContext_1.NamedQueryContext.Provider, { value: {
+    return ((0, jsx_runtime_1.jsx)(NamedQueryContext_1.NamedQueryContext.Provider, { value: {
             namedQuery: namedQuery,
             setNamedQuery: (newQuery) => {
                 setNamedQuery(newQuery);
             },
-        } },
-        React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full" },
-            React.createElement(ExpressionEditor_1.ExpressionEditor, { ...expressionEditorProps, type: 'boolean', module: ModuleConstants_1.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_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-1" },
-                props.onDismiss && (React.createElement(SimpleButton_1.default, { className: "twa:m-1", variant: "text", "data-name": "action-close", onClick: () => {
-                        props.onDismiss();
-                    } }, "CLOSE")),
-                React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
-                React.createElement(SimpleButton_1.default, { disabled: actionsDisabled, onClick: handleSaveQuery, icon: "save" }, "Save Query"),
-                React.createElement(SimpleButton_1.default, { "data-name": "action-clear", onClick: onClearExpression, icon: "close", disabled: (0, StringExtensions_1.IsNullOrEmpty)(expression), className: "twa:ml-1" }, "Clear Query"),
-                React.createElement(SimpleButton_1.default, { 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: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full", children: [(0, jsx_runtime_1.jsx)(ExpressionEditor_1.ExpressionEditor, { ...expressionEditorProps, type: 'boolean', module: ModuleConstants_1.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 }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-1", children: [props.onDismiss && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: "twa:m-1", variant: "text", "data-name": "action-close", onClick: () => {
+                                props.onDismiss();
+                            }, children: "CLOSE" })), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: actionsDisabled, onClick: handleSaveQuery, icon: "save", children: "Save Query" }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "action-clear", onClick: onClearExpression, icon: "close", disabled: (0, StringExtensions_1.IsNullOrEmpty)(expression), className: "twa:ml-1", children: "Clear Query" }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { 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" })] })] }) }));
 };
 exports.GridFilterExpressionEditor = GridFilterExpressionEditor;

package/src/View/GridFilter/GridFilterPopup.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridFilterPopup = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const useGridFilterExpressionEditor_1 = require("./useGridFilterExpressionEditor");
 const GridFilterPopupUI_1 = require("./GridFilterPopupUI");
 const GridFilterPopup = () => {
@@ -35,6 +34,6 @@ const GridFilterPopup = () => {
     const handleSetGridFilterExpression = (query) => {
         hookData.setGridFilterExpression(query);
     };
-    return (React.createElement(GridFilterPopupUI_1.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 ((0, jsx_runtime_1.jsx)(GridFilterPopupUI_1.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 }));
 };
 exports.GridFilterPopup = GridFilterPopup;

package/src/View/GridFilter/GridFilterPopupUI/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridFilterPopupUI = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
 const FieldWrap_1 = tslib_1.__importDefault(require("../../../components/FieldWrap"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
@@ -27,22 +27,6 @@ const GridFilterPopupUI = (props) => {
             onRunQuery();
         }
     };
-    return (React.createElement(PopupPanel_1.PopupPanel, { className: "ab-GridFilter", headerText: headerText, glyphicon: glyphicon, infoLink: infoLink, infoLinkDisabled: infoLinkDisabled },
-        React.createElement(Panel_1.default, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
-            React.createElement(Panel_1.default.FlexBody, null,
-                React.createElement(Flex_1.Box, { className: "twa:grid twa:gap-3 twa:grid-cols-[auto_1fr] twa:items-center" },
-                    "Expression:",
-                    React.createElement(FieldWrap_1.default, { className: "twa:mr-1 twa:w-full" },
-                        React.createElement(ButtonExpand_1.ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }),
-                        React.createElement(Input_1.default, { onKeyDown: handleKeyDown, disabled: disabled, type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (e) => onExpressionChange(e.target.value), className: "twa:font-mono twa:text-2" }),
-                        isExpressionValid && (React.createElement(ButtonPlay_1.ButtonPlay, { onClick: () => onRunQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "accent", disabled: disabled || expression === '' || expression === currentGridFilterExpression, className: "twa:mr-1" })),
-                        currentGridFilterExpression && !isExpressionValid && (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", className: "twa:mr-1" })),
-                        ' ',
-                        StringExtensions_1.default.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => onClearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel }))),
-                    React.createElement(Flex_1.Flex, { justifyContent: "space-around", className: "twa:col-start-2" },
-                        React.createElement(ButtonSave_1.ButtonSave, { onClick: () => onSaveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression === '', variant: "text", tone: "neutral", className: "twa:mr-1" }, "Save"),
-                        isSuspended ? (React.createElement(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => onUnsuspend(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1" }, "Resume")) : (React.createElement(ButtonPause_1.ButtonPause, { onClick: () => onSuspend(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1" }, "Suspend")),
-                        React.createElement(DropdownButton_1.default, { disabled: disabled, variant: "text", items: availableColumns, className: "twa:mr-1", tooltip: "Pick Columns", icon: "list", iconPosition: "start" }, "Columns"),
-                        React.createElement(NamedQuerySelector_1.NamedQuerySelector, { disabled: disabled, namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: currentGridFilterExpression, onSelect: (query) => onSelectNamedQuery(query), setGridFilterExpression: (query) => onSetGridFilterExpression(query) }, "Named Queries")))))));
+    return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { className: "ab-GridFilter", headerText: headerText, glyphicon: glyphicon, infoLink: infoLink, infoLinkDisabled: infoLinkDisabled, children: (0, jsx_runtime_1.jsx)(Panel_1.default, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: (0, jsx_runtime_1.jsx)(Panel_1.default.FlexBody, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:grid twa:gap-3 twa:grid-cols-[auto_1fr] twa:items-center", children: ["Expression:", (0, jsx_runtime_1.jsxs)(FieldWrap_1.default, { className: "twa:mr-1 twa:w-full", children: [(0, jsx_runtime_1.jsx)(ButtonExpand_1.ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }), (0, jsx_runtime_1.jsx)(Input_1.default, { onKeyDown: handleKeyDown, disabled: disabled, type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (e) => onExpressionChange(e.target.value), className: "twa:font-mono twa:text-2" }), isExpressionValid && ((0, jsx_runtime_1.jsx)(ButtonPlay_1.ButtonPlay, { onClick: () => onRunQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "accent", disabled: disabled || expression === '' || expression === currentGridFilterExpression, className: "twa:mr-1" })), currentGridFilterExpression && !isExpressionValid && ((0, jsx_runtime_1.jsx)(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", className: "twa:mr-1" })), ' ', StringExtensions_1.default.IsNotNullOrEmpty(expression) && ((0, jsx_runtime_1.jsx)(ButtonClear_1.ButtonClear, { onClick: () => onClearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel }))] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { justifyContent: "space-around", className: "twa:col-start-2", children: [(0, jsx_runtime_1.jsx)(ButtonSave_1.ButtonSave, { onClick: () => onSaveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression === '', variant: "text", tone: "neutral", className: "twa:mr-1", children: "Save" }), isSuspended ? ((0, jsx_runtime_1.jsx)(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => onUnsuspend(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1", children: "Resume" })) : ((0, jsx_runtime_1.jsx)(ButtonPause_1.ButtonPause, { onClick: () => onSuspend(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1", children: "Suspend" })), (0, jsx_runtime_1.jsx)(DropdownButton_1.default, { disabled: disabled, variant: "text", items: availableColumns, className: "twa:mr-1", tooltip: "Pick Columns", icon: "list", iconPosition: "start", children: "Columns" }), (0, jsx_runtime_1.jsx)(NamedQuerySelector_1.NamedQuerySelector, { disabled: disabled, namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: currentGridFilterExpression, onSelect: (query) => onSelectNamedQuery(query), setGridFilterExpression: (query) => onSetGridFilterExpression(query), children: "Named Queries" })] })] }) }) }) }));
 };
 exports.GridFilterPopupUI = GridFilterPopupUI;

package/src/View/GridFilter/GridFilterStatusbar.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridFilterStatusbar = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_redux_1 = require("react-redux");
 const GridFilterStatusbar = (props) => {
     const queryMaxLength = 15;
@@ -15,6 +14,6 @@ const GridFilterStatusbar = (props) => {
         text = query.substring(0, queryMaxLength - 3) + '...';
         popover = query;
     }
-    return React.createElement(React.Fragment, null, text ?? 'No Query');
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: text ?? 'No Query' });
 };
 exports.GridFilterStatusbar = GridFilterStatusbar;