@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.1

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 }));
 };

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import DropdownButton from '../../../components/DropdownButton';
 import FieldWrap from '../../../components/FieldWrap';
 import Input from '../../../components/Input';
@@ -23,21 +23,5 @@ export const GridFilterPopupUI = (props) => {
             onRunQuery();
         }
     };
-    return (React.createElement(PopupPanel, { className: "ab-GridFilter", headerText: headerText, glyphicon: glyphicon, infoLink: infoLink, infoLinkDisabled: infoLinkDisabled },
-        React.createElement(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
-            React.createElement(Panel.FlexBody, null,
-                React.createElement(Box, { className: "twa:grid twa:gap-3 twa:grid-cols-[auto_1fr] twa:items-center" },
-                    "Expression:",
-                    React.createElement(FieldWrap, { className: "twa:mr-1 twa:w-full" },
-                        React.createElement(ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }),
-                        React.createElement(Input, { 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, { onClick: () => onRunQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "accent", disabled: disabled || expression === '' || expression === currentGridFilterExpression, className: "twa:mr-1" })),
-                        currentGridFilterExpression && !isExpressionValid && (React.createElement(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", className: "twa:mr-1" })),
-                        ' ',
-                        StringExtensions.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear, { onClick: () => onClearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel }))),
-                    React.createElement(Flex, { justifyContent: "space-around", className: "twa:col-start-2" },
-                        React.createElement(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, { onClick: () => onUnsuspend(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1" }, "Resume")) : (React.createElement(ButtonPause, { onClick: () => onSuspend(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1" }, "Suspend")),
-                        React.createElement(DropdownButton, { disabled: disabled, variant: "text", items: availableColumns, className: "twa:mr-1", tooltip: "Pick Columns", icon: "list", iconPosition: "start" }, "Columns"),
-                        React.createElement(NamedQuerySelector, { disabled: disabled, namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: currentGridFilterExpression, onSelect: (query) => onSelectNamedQuery(query), setGridFilterExpression: (query) => onSetGridFilterExpression(query) }, "Named Queries")))))));
+    return (_jsx(PopupPanel, { className: "ab-GridFilter", headerText: headerText, glyphicon: glyphicon, infoLink: infoLink, infoLinkDisabled: infoLinkDisabled, children: _jsx(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: _jsx(Panel.FlexBody, { children: _jsxs(Box, { className: "twa:grid twa:gap-3 twa:grid-cols-[auto_1fr] twa:items-center", children: ["Expression:", _jsxs(FieldWrap, { className: "twa:mr-1 twa:w-full", children: [_jsx(ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }), _jsx(Input, { 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 && (_jsx(ButtonPlay, { onClick: () => onRunQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "accent", disabled: disabled || expression === '' || expression === currentGridFilterExpression, className: "twa:mr-1" })), currentGridFilterExpression && !isExpressionValid && (_jsx(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", className: "twa:mr-1" })), ' ', StringExtensions.IsNotNullOrEmpty(expression) && (_jsx(ButtonClear, { onClick: () => onClearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel }))] }), _jsxs(Flex, { justifyContent: "space-around", className: "twa:col-start-2", children: [_jsx(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 ? (_jsx(ButtonUnsuspend, { onClick: () => onUnsuspend(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1", children: "Resume" })) : (_jsx(ButtonPause, { onClick: () => onSuspend(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1", children: "Suspend" })), _jsx(DropdownButton, { disabled: disabled, variant: "text", items: availableColumns, className: "twa:mr-1", tooltip: "Pick Columns", icon: "list", iconPosition: "start", children: "Columns" }), _jsx(NamedQuerySelector, { disabled: disabled, namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: currentGridFilterExpression, onSelect: (query) => onSelectNamedQuery(query), setGridFilterExpression: (query) => onSetGridFilterExpression(query), children: "Named Queries" })] })] }) }) }) }));
 };

package/src/View/GridFilter/GridFilterStatusbar.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useSelector } from 'react-redux';
 export const GridFilterStatusbar = (props) => {
     const queryMaxLength = 15;
@@ -11,5 +11,5 @@ export const GridFilterStatusbar = (props) => {
         text = query.substring(0, queryMaxLength - 3) + '...';
         popover = query;
     }
-    return React.createElement(React.Fragment, null, text ?? 'No Query');
+    return _jsx(_Fragment, { children: text ?? 'No Query' });
 };

package/src/View/GridFilter/GridFilterViewPanel.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 clsx from 'clsx';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import FieldWrap from '../../components/FieldWrap';
@@ -20,43 +20,33 @@ const QueryViewPanelComponent = (props) => {
     }
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
     const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === ACCESS_LEVEL_READ_ONLY;
-    const buttonExpand = (React.createElement(ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }));
+    const buttonExpand = (_jsx(ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }));
     const renderExpressionLabel = () => {
-        const baseClasses = 'twa:font-mono twa:text-s twa:py-2 twa:px-2 twa:overflow-hidden twa:text-ellipsis twa:whitespace-nowrap twa:bg-defaultbackground twa:text-text-on-defaultbackground twa:rounded twa:cursor-pointer twa:leading-4 twa:flex twa:items-center';
+        const baseClasses = 'twa:font-mono twa:text-s twa:py-2 twa:px-2 twa:overflow-hidden twa:text-ellipsis twa:whitespace-nowrap twa:bg-defaultbackground twa:text-foreground twa:rounded twa:cursor-pointer twa:leading-4 twa:flex twa:items-center';
         const placeholderClasses = 'twa:text-gray-400 twa:italic';
         const labelClassName = clsx(baseClasses, {
             [placeholderClasses]: !expression,
         });
-        const expressionLabel = (React.createElement(Tooltip, { label: expression || 'Click to edit Grid Filter' },
-            React.createElement(Box, { className: clsx('twa:flex-1 twa:h-full twa:min-w-0', labelClassName), "data-name": "grid-filter-input", onClick: onExpand }, expression || 'Grid Filter...')));
-        return (React.createElement(FieldWrap, { className: "twa:flex-1 twa:min-w-0 twa:min-h-input twa:overflow-visible" },
-            buttonExpand,
-            expressionLabel,
-            gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter" }))));
+        const expressionLabel = (_jsx(Tooltip, { label: expression || 'Click to edit Grid Filter', children: _jsx(Box, { className: clsx('twa:flex-1 twa:h-full twa:min-w-0', labelClassName), "data-name": "grid-filter-input", onClick: onExpand, children: expression || 'Grid Filter...' }) }));
+        return (_jsxs(FieldWrap, { className: "twa:flex-1 twa:min-w-0 twa:min-h-input twa:overflow-visible", children: [buttonExpand, expressionLabel, gridFilter && !isExpressionValid && (_jsx(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter" }))] }));
     };
     const hasExpression = StringExtensions.IsNotNullOrEmpty(expression);
     const hasActiveGridFilter = gridFilter != null && hasExpression;
     const hasNamedQueries = namedQueries && namedQueries.length > 0;
-    const clearButton = hasExpression ? (React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral" })) : null;
-    const saveButton = hasExpression ? (React.createElement(ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: isReadOnly || gridFilterAccessLevel === ACCESS_LEVEL_READ_ONLY || !isExpressionValid || isExpressionNamedQuery, variant: "text", tone: "neutral" })) : null;
-    const suspendButton = hasActiveGridFilter ? (React.createElement(ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral" })) : null;
-    const unSuspendButton = hasActiveGridFilter ? (React.createElement(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral" })) : null;
-    const namedQuerySelector = hasNamedQueries ? (React.createElement(NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) })) : null;
+    const clearButton = hasExpression ? (_jsx(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral" })) : null;
+    const saveButton = hasExpression ? (_jsx(ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: isReadOnly || gridFilterAccessLevel === ACCESS_LEVEL_READ_ONLY || !isExpressionValid || isExpressionNamedQuery, variant: "text", tone: "neutral" })) : null;
+    const suspendButton = hasActiveGridFilter ? (_jsx(ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral" })) : null;
+    const unSuspendButton = hasActiveGridFilter ? (_jsx(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral" })) : null;
+    const namedQuerySelector = hasNamedQueries ? (_jsx(NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) })) : null;
     const renderButtons = () => {
-        return (React.createElement(React.Fragment, null,
-            clearButton,
-            isSuspended ? unSuspendButton : suspendButton,
-            saveButton,
-            namedQuerySelector));
+        return (_jsxs(_Fragment, { children: [clearButton, isSuspended ? unSuspendButton : suspendButton, saveButton, namedQuerySelector] }));
     };
     const isToolbar = props.viewType === 'Toolbar';
-    return (React.createElement(Flex, { flexDirection: isToolbar ? 'row' : 'column', className: clsx(`ab-${elementType}__Query__wrap`, {
+    return (_jsxs(Flex, { flexDirection: isToolbar ? 'row' : 'column', className: clsx(`ab-${elementType}__Query__wrap`, {
             'twa:w-[500px]': isToolbar,
-        }) },
-        React.createElement(Flex, { className: clsx({ 'twa:flex-1 twa:min-w-0': isToolbar }) }, renderExpressionLabel()),
-        React.createElement(Flex, { className: clsx('twa:flex-shrink-0', {
-                'twa:pl-1': isToolbar,
-                'twa:pt-1': !isToolbar,
-            }) }, renderButtons())));
+        }), children: [_jsx(Flex, { className: clsx({ 'twa:flex-1 twa:min-w-0': isToolbar }), children: renderExpressionLabel() }), _jsx(Flex, { className: clsx('twa:flex-shrink-0', {
+                    'twa:pl-1': isToolbar,
+                    'twa:pt-1': !isToolbar,
+                }), children: renderButtons() })] }));
 };
 export const GridFilterPanelControl = QueryViewPanelComponent;

package/src/View/GridFilter/GridFilterWindowPopup.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { GridFilterExpressionEditor } from './GridFilterExpressionEditor';
 export const GridFilterWindowPopup = (props) => {
-    return (React.createElement(GridFilterExpressionEditor, { expression: props.popupProps.value, onDismiss: props.onDismiss }));
+    return (_jsx(GridFilterExpressionEditor, { expression: props.popupProps.value, onDismiss: props.onDismiss }));
 };