@adaptabletools/adaptable 21.2.2-canary.0 → 22.0.0-canary.1

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { NewScopeComponent, renderScopeSummary } from '../../Components/NewScopeComponent';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN } from './constants';
-import { Box } from 'rebass';
 export const renderFormatColumnScopeSummary = (data) => {
     return renderScopeSummary(data.Scope, {
         scopeWholeRow: 'Matching rows will be formatted',
@@ -13,9 +12,6 @@ export const renderFormatColumnScopeSummary = (data) => {
 export const FormatColumnScopeWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
     return (React.createElement(React.Fragment, null,
-        React.createElement(Box, { "data-name": 'scope-heading', style: {
-                borderRadius: `var(--ab__border-radius)`,
-            }, padding: 2, backgroundColor: `var(--ab-color-primarylight)` }, "Scope"),
         React.createElement(NewScopeComponent, { descriptions: {
                 rowScope: 'Format all columns in the row',
                 columnScope: 'Select columns to format',

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

@@ -1,32 +1,32 @@
 import * as React from 'react';
-import { Box, Flex, Text } from 'rebass';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { CheckBox } from '../../../components/CheckBox';
-import { Tabs } from '../../../components/Tabs';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Tag } from '../../../components/Tag';
 import { ToggleGroup } from '../../../components/Toggle/ToggleGroup';
 import { Toggle } from '../../../components/Toggle/Toggle';
 import Radio, { RadioGroup } from '../../../components/Radio';
+import { Box, Flex } from '../../../components/Flex';
+import { Card } from '../../../components/Card';
 export const renderFormatColumnSettingsSummary = (data) => {
-    return (React.createElement(Box, { padding: 2 },
-        React.createElement(Text, null,
+    return (React.createElement(Box, { className: "twa:p-2" },
+        React.createElement(Box, null,
             "Cell alignment ",
-            React.createElement(Tag, null, data.CellAlignment ?? 'Default')),
-        React.createElement(Text, { mt: 3 },
+            React.createElement(Tag, null, data.CellAlignment ?? 'default')),
+        React.createElement(Box, { className: "twa:mt-3" },
             "Data Rows ",
-            React.createElement(Tag, null, data.RowScope?.ExcludeDataRows ? 'No' : 'Yes')),
+            React.createElement(Tag, null, data.RowScope?.ExcludeDataRows ? 'no' : 'yes')),
         ' ',
-        React.createElement(Text, { mt: 3 },
+        React.createElement(Box, { className: "twa:mt-3" },
             "Group Rows ",
-            React.createElement(Tag, null, data.RowScope?.ExcludeGroupRows ? 'No' : 'Yes')),
-        React.createElement(Text, { mt: 3 },
+            React.createElement(Tag, null, data.RowScope?.ExcludeGroupRows ? 'no' : 'yes')),
+        React.createElement(Box, { className: "twa:mt-3" },
             "Summary Rows ",
-            React.createElement(Tag, null, data.RowScope?.ExcludeSummaryRows ? 'No' : 'Yes')),
-        React.createElement(Text, { mt: 3 },
+            React.createElement(Tag, null, data.RowScope?.ExcludeSummaryRows ? 'no' : 'yes')),
+        React.createElement(Box, { className: "twa:mt-3" },
             "Total Rows ",
-            React.createElement(Tag, null, data.RowScope?.ExcludeTotalRows ? 'No' : 'Yes')),
-        React.createElement(Text, { mt: 3 },
+            React.createElement(Tag, null, data.RowScope?.ExcludeTotalRows ? 'no' : 'yes')),
+        React.createElement(Box, { className: "twa:mt-3" },
             "Apply on Column Groups:",
             ' ',
             React.createElement(Tag, null, !data.ColumnGroupScope || data.ColumnGroupScope === 'Both'
@@ -78,9 +78,9 @@ export const FormatColumnSettingsWizardSection = (props) => {
             },
         });
     };
-    return (React.createElement(Tabs, null,
-        React.createElement(Tabs.Tab, null, "Settings"),
-        React.createElement(Tabs.Content, null,
+    return (React.createElement(Card, null,
+        React.createElement(Card.Title, null, "Settings"),
+        React.createElement(Card.Body, null,
             React.createElement(Flex, { flexDirection: "row" },
                 React.createElement(FormLayout, null,
                     React.createElement(FormRow, { label: "Cell Alignment" },
@@ -96,17 +96,17 @@ export const FormatColumnSettingsWizardSection = (props) => {
                                     : onCellAlignmentSelectChanged(null) }))),
                     data.Target === 'cell' && (React.createElement(React.Fragment, null,
                         React.createElement(FormRow, { label: "Exclude Data Rows:" },
-                            React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
-                                React.createElement(CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, mr: 2 }))),
+                            React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
+                                React.createElement(CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, className: "twa:mr-2" }))),
                         React.createElement(FormRow, { label: "Exclude Group Rows:" },
-                            React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
-                                React.createElement(CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, mr: 2 }))),
+                            React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
+                                React.createElement(CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, className: "twa:mr-2" }))),
                         React.createElement(FormRow, { label: "Exclude Row Summaries:" },
-                            React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
-                                React.createElement(CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, mr: 2 }))),
+                            React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
+                                React.createElement(CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, className: "twa:mr-2" }))),
                         React.createElement(FormRow, { label: "Exclude Total Rows:" },
-                            React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
-                                React.createElement(CheckBox, { "data-name": "exclude-total-rows-checkbox", checked: data.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, mr: 2 }))))),
+                            React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
+                                React.createElement(CheckBox, { "data-name": "exclude-total-rows-checkbox", checked: data.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, className: "twa:mr-2" }))))),
                     React.createElement(FormRow, { label: "Apply on Column Group:" },
                         React.createElement(RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
                                 props.onChange({
@@ -114,7 +114,7 @@ export const FormatColumnSettingsWizardSection = (props) => {
                                     ColumnGroupScope: columnGroupScope,
                                 });
                             } },
-                            React.createElement(Radio, { marginLeft: 1, value: "Both" }, "Always"),
-                            React.createElement(Radio, { marginLeft: 4, value: "Expanded" }, "Expanded"),
-                            React.createElement(Radio, { marginLeft: 4, value: "Collapsed" }, "Collapsed"))))))));
+                            React.createElement(Radio, { className: "twa:ml-1", value: "Both" }, "Always"),
+                            React.createElement(Radio, { className: "twa:ml-4", value: "Expanded" }, "Expanded"),
+                            React.createElement(Radio, { className: "twa:ml-4", value: "Collapsed" }, "Collapsed"))))))));
 };

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { Text } from 'rebass';
 import { convertAdaptableStyleToCSS } from '../../../Utilities/Helpers/StyleHelper';
 import { StyleComponent } from '../../Components/StyleComponent';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import UIHelper from '../../UIHelper';
+import { Box } from '../../../components/Flex';
 export const isFormatColumnStyleValid = (data, api) => {
     if (data.Style &&
         UIHelper.IsEmptyStyle(data.Style) &&
@@ -27,7 +27,7 @@ export const renderFormatColumnStyleWizardSummary = (data) => {
     return renderFormatColumnStyleSummary(data, api);
 };
 export const renderFormatColumnStyleSummary = (data, api) => {
-    return (React.createElement(Text, { className: "ab-FormatPreview", padding: 2, style: toStyle(data) }, "Preview result"));
+    return (React.createElement(Box, { className: "ab-FormatPreview twa:p-2", style: toStyle(data) }, "Preview result"));
 };
 export function FormatColumnStyleWizardSection(props) {
     const { data, api } = useOnePageAdaptableWizardContext();

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Tabs } from '../../../components/Tabs';
-import { Flex } from 'rebass';
 import { TypeRadio } from '../../Wizard/TypeRadio';
+import { Flex } from '../../../components/Flex';
 export const renderFormatColumnTargetSummary = (data) => {
     if (!data.Target || data.Target === 'cell') {
         return 'Column Cells';
@@ -22,7 +22,7 @@ export const FormatColumnTargetWizardSection = (props) => {
         });
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs, { mb: 3 },
+        React.createElement(Tabs, { className: "twa:mb-3" },
             React.createElement(Tabs.Tab, null, "Target"),
             React.createElement(Tabs.Content, null,
                 React.createElement(Flex, { flexDirection: "column" },

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { Box, Flex } from 'rebass';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
 import { FormatColumnScopeWizardSection, renderFormatColumnScopeSummary, } from './FormatColumnScopeWizardSection';
@@ -18,6 +17,7 @@ import { FormatColumnRuleWizardSection } from './FormatColumnRuleWizardSection';
 import { DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN } from './constants';
 import { isObjectEmpty } from '../../../Utilities/Extensions/ObjectExtensions';
 import { FormatColumnTargetWizardSection, renderFormatColumnTargetSummary, } from './FormatColumnTargetWizardSection';
+import { Box, Flex } from '../../../components/Flex';
 const adjustDisplayFormat = (fc, api) => {
     const formatColumn = { ...fc };
     let formatDataType = getFormatDisplayTypeForScope(formatColumn.Scope, api);
@@ -91,14 +91,14 @@ export function FormatColumnWizard(props) {
         }
         props.onFinishWizard(formatColumn);
     };
-    return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: formatColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, modal: props.modal, data: formatColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Scope',
                 details: 'Select which Columns will be formatted',
                 isValid: isScopeValid,
                 renderSummary: renderFormatColumnScopeSummary,
                 render: () => {
-                    return (React.createElement(Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
+                    return (React.createElement(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
                         React.createElement(FormatColumnScopeWizardSection, { onChange: setFormatColumn })));
                 },
             },
@@ -107,7 +107,7 @@ export function FormatColumnWizard(props) {
                 details: 'Select which Columns Elements will be formatted',
                 renderSummary: renderFormatColumnTargetSummary,
                 render: () => {
-                    return (React.createElement(Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
+                    return (React.createElement(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
                         React.createElement(FormatColumnTargetWizardSection, { onChange: setFormatColumn })));
                 },
             },
@@ -130,7 +130,7 @@ export function FormatColumnWizard(props) {
                 isValid: isFormatColumnStyleValid,
                 renderSummary: renderFormatColumnStyleWizardSummary,
                 render: () => {
-                    return (React.createElement(Box, { padding: 2 },
+                    return (React.createElement(Box, { className: "twa:p-2" },
                         React.createElement(FormatColumnStyleWizardSection, { onChange: setFormatColumn })));
                 },
             },
@@ -147,7 +147,7 @@ export function FormatColumnWizard(props) {
                 details: 'Set Additional Properties',
                 renderSummary: renderFormatColumnSettingsSummary,
                 render: () => {
-                    return (React.createElement(Box, { padding: 2 },
+                    return (React.createElement(Box, { className: "twa:p-2" },
                         React.createElement(FormatColumnSettingsWizardSection, { onChange: setFormatColumn })));
                 },
             },
@@ -155,7 +155,7 @@ export function FormatColumnWizard(props) {
                 details: 'Select Format Column Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(ObjectTagsWizardSection, { onChange: setFormatColumn }))),
                 renderSummary: renderObjectTagsSummary,
             },
@@ -163,7 +163,7 @@ export function FormatColumnWizard(props) {
             {
                 details: 'Review the Format Column',
                 render: () => {
-                    return (React.createElement(Box, { padding: 2 },
+                    return (React.createElement(Box, { className: "twa:p-2" },
                         React.createElement(OnePageWizardSummary, null)));
                 },
                 title: 'Summary',

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { Box } from 'rebass';
 import Input from '../../../components/Input';
 import ErrorBox from '../../../components/ErrorBox';
 import Radio from '../../../components/Radio';
@@ -13,6 +12,7 @@ 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';
 const options = [
     { value: 'number', label: 'Number' },
     { value: 'text', label: 'Text' },
@@ -20,20 +20,20 @@ const options = [
     { value: 'boolean', label: 'Boolean' },
 ];
 export const renderFreeTextColumnSummary = (data) => {
-    return (React.createElement(Box, { fontSize: 2 },
+    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, { mt: 3 },
+        data.FriendlyName ? (React.createElement(Box, { className: "twa:mt-3" },
             "Column Name: ",
             React.createElement(Tag, null, data.FriendlyName ?? data.ColumnId))) : null,
-        React.createElement(Box, { mt: 3 },
+        React.createElement(Box, { className: "twa:mt-3" },
             "Data Type: ",
             React.createElement(Tag, null, data.FreeTextColumnSettings.DataType)),
-        data.DefaultValue !== undefined ? (React.createElement(Box, { mt: 3 },
+        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, { mt: 3 },
+        data.TextEditor !== undefined ? (React.createElement(Box, { className: "twa:mt-3" },
             "Editor Type: ",
             React.createElement(Tag, null, data.TextEditor))) : null));
 };
@@ -132,7 +132,7 @@ export const FreeTextColumnSettingsWizardSection = (props) => {
                         setColumnNameFocused(false);
                     }, value: ColumnNameFocused ? data.FriendlyName || '' : data.FriendlyName || data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, type: "text", placeholder: "Enter a name", onChange: (e) => handleColumnNameChange(e) })),
             React.createElement(FormRow, { label: "Data Type" },
-                React.createElement(Box, { style: { maxWidth: 500 } },
+                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({
@@ -141,7 +141,7 @@ export const FreeTextColumnSettingsWizardSection = (props) => {
                     });
                 } })) : (React.createElement(AdaptableInput, { "data-name": "column-default-value", value: data.FreeTextColumnSettings.DataType === 'date' && data.DefaultValue
                     ? parseToISO(data.DefaultValue, Pattern) || ''
-                    : data.DefaultValue || '', style: { width: '100%', maxWidth: 500 }, type: data.FreeTextColumnSettings.DataType === 'number'
+                    : data.DefaultValue || '', className: "twa:w-full twa:max-w-[500px]", type: data.FreeTextColumnSettings.DataType === 'number'
                     ? 'number'
                     : data.FreeTextColumnSettings.DataType === 'date'
                         ? 'date'
@@ -152,9 +152,9 @@ export const FreeTextColumnSettingsWizardSection = (props) => {
                     }) })),
             ' ',
             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), marginRight: 2 }, "Inline 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, { mt: 2, mb: 2 }, ErrorMessage)) : null,
-        React.createElement(Box, { mt: 2 },
+        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 }))));
 };

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { Box } from 'rebass';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
 import { FreeTextColumnSettingsWizardSection, isValidFreeTextColumn, renderFreeTextColumnSummary, } from './FreeTextColumnSettingsWizardSection';
@@ -9,6 +8,7 @@ import * as FreeTextColumnRedux from '../../../Redux/ActionsReducers/FreeTextCol
 import { useDispatch, useSelector } from 'react-redux';
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
 import { useAdaptable } from '../../AdaptableContext';
+import { Box } from '../../../components/Flex';
 export const FreeTextColumnWizard = (props) => {
     const adaptable = useAdaptable();
     const allFreeTextColumns = useSelector((state) => state.FreeTextColumn.FreeTextColumns);
@@ -38,7 +38,7 @@ export const FreeTextColumnWizard = (props) => {
                 details: 'Configure the Free Text Column',
                 isValid: isValidFreeTextColumn,
                 render: () => {
-                    return (React.createElement(Box, { padding: 2 },
+                    return (React.createElement(Box, { className: "twa:p-2" },
                         React.createElement(FreeTextColumnSettingsWizardSection, { isEdit: Boolean(props.data), onChange: setFreeTextColumn })));
                 },
             },
@@ -46,7 +46,7 @@ export const FreeTextColumnWizard = (props) => {
                 details: 'Select Free Text Column Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(ObjectTagsWizardSection, { onChange: setFreeTextColumn }))),
                 renderSummary: renderObjectTagsSummary,
             },
@@ -55,7 +55,7 @@ export const FreeTextColumnWizard = (props) => {
                 details: 'Review the Free Text Column',
                 renderSummary: renderFreeTextColumnSummary,
                 render: () => {
-                    return (React.createElement(Box, { padding: 2 },
+                    return (React.createElement(Box, { className: "twa:p-2" },
                         React.createElement(OnePageWizardSummary, null)));
                 },
                 title: 'Summary',

package/src/View/GridFilter/GridFilterExpressionEditor.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
-import { Box, Flex } from 'rebass';
 import { ExpressionEditor } from '../../components/ExpressionEditor';
 import { NamedQueryContext, } from '../../components/ExpressionEditor/NamedQueryContext';
 import SimpleButton from '../../components/SimpleButton';
@@ -11,6 +10,7 @@ import { IsNotNullOrEmpty, IsNullOrEmpty } from '../../Utilities/Extensions/Stri
 import Helper from '../../Utilities/Helpers/Helper';
 import { useAdaptable } from '../AdaptableContext';
 import { useGridFilterOptionsForExpressionEditorProps } from './useGridFilterOptionsForExpressionEditor';
+import { Box, Flex } from '../../components/Flex';
 export const GridFilterExpressionEditor = (props) => {
     const dispatch = useDispatch();
     const { api } = useAdaptable();
@@ -87,15 +87,15 @@ export const GridFilterExpressionEditor = (props) => {
                 setNamedQuery(newQuery);
             },
         } },
-        React.createElement(Flex, { height: "100%", flexDirection: "column" },
+        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", padding: 1, alignItems: "center" },
-                props.onDismiss && (React.createElement(SimpleButton, { margin: 1, variant: "text", "data-name": "action-close", onClick: () => {
+            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, { flex: 1 }),
+                React.createElement(Box, { className: "twa:flex-1" }),
                 React.createElement(SimpleButton, { disabled: actionsDisabled, onClick: handleSaveQuery, icon: "save" }, "Save Query"),
-                React.createElement(SimpleButton, { variant: "raised", tone: "accent", "data-name": "action-run", margin: 1, icon: "play", onClick: () => {
+                React.createElement(SimpleButton, { variant: "raised", tone: "accent", "data-name": "action-run", className: "twa:m-1", icon: "play", onClick: () => {
                         if (namedQuery) {
                             onAddNamedQuery({
                                 Name: namedQuery.Name,

package/src/View/GridFilter/GridFilterPopup.js

@@ -1,44 +1,35 @@
 import * as React from 'react';
-import { Flex } from 'rebass';
-import DropdownButton from '../../components/DropdownButton';
-import FieldWrap from '../../components/FieldWrap';
-import FormLayout, { FormRow } from '../../components/FormLayout';
-import Input from '../../components/Input';
-import Panel from '../../components/Panel';
-import StringExtensions from '../../Utilities/Extensions/StringExtensions';
-import { ButtonClear } from '../Components/Buttons/ButtonClear';
-import { ButtonExpand } from '../Components/Buttons/ButtonExpand';
-import { ButtonInvalid } from '../Components/Buttons/ButtonInvalid';
-import { ButtonPause } from '../Components/Buttons/ButtonPause';
-import { ButtonPlay } from '../Components/Buttons/ButtonPlay';
-import { ButtonSave } from '../Components/Buttons/ButtonSave';
-import { ButtonUnsuspend } from '../Components/Buttons/ButtonUnsuspend';
-import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
-import { NamedQuerySelector } from './NamedQuerySelector';
 import { useGridFilterExpressionEditor } from './useGridFilterExpressionEditor';
+import { GridFilterPopupUI } from './GridFilterPopupUI';
 export const GridFilterPopup = () => {
-    const { cachedQueries, expression, setExpression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, namedQueries, availableColumns, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, gridFilterHelpPage, gridFilterLinkDisabled, isReadOnly, } = useGridFilterExpressionEditor();
-    const handleEnter = (e) => {
-        if (e.key === 'Enter') {
-            runQuery();
-        }
-    };
-    const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === 'ReadOnly';
-    return (React.createElement(PopupPanel, { className: "ab-GridFilter", headerText: "Grid Filter", glyphicon: "grid-filter", infoLink: gridFilterHelpPage, infoLinkDisabled: gridFilterLinkDisabled },
-        React.createElement(Panel, { bodyProps: { height: '100%' }, height: "100%" },
-            React.createElement(FormLayout, null,
-                React.createElement(FormRow, { label: "Expression" },
-                    React.createElement(FieldWrap, { marginRight: 1, width: "100%" },
-                        React.createElement(ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", marginLeft: 1 }),
-                        React.createElement(Input, { onKeyDown: handleEnter, disabled: disabled, type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (x) => setExpression(x.target.value), style: { fontFamily: 'monospace', fontSize: 12 } }),
-                        isExpressionValid && (React.createElement(ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || expression == '' || expression == gridFilter?.Expression, marginRight: 1 })),
-                        gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", marginRight: 1 })),
-                        ' ',
-                        StringExtensions.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))),
-                React.createElement(FormRow, { label: "" },
-                    React.createElement(Flex, { justifyContent: "space-around" },
-                        React.createElement(ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression == '', variant: "text", tone: "neutral", marginRight: 1 }, "Save"),
-                        isSuspended ? (React.createElement(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }, "Resume")) : (React.createElement(ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }, "Suspend")),
-                        React.createElement(DropdownButton, { disabled: disabled, variant: "text", items: availableColumns, marginRight: 1, tooltip: "Pick Columns", icon: "list", iconPosition: "start" }, "Columns"),
-                        React.createElement(NamedQuerySelector, { disabled: disabled, namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) }, "Named Queries")))))));
+    const hookData = useGridFilterExpressionEditor();
+    // Create callback handlers
+    const handleExpressionChange = (value) => {
+        hookData.setExpression(value);
+    };
+    const handleRunQuery = (expression) => {
+        hookData.runQuery(expression);
+    };
+    const handleClearQuery = () => {
+        hookData.clearQuery();
+    };
+    const handleSaveQuery = () => {
+        hookData.saveQuery();
+    };
+    const handleSuspend = () => {
+        hookData.suspendGridFilter();
+    };
+    const handleUnsuspend = () => {
+        hookData.unSuspendGridFilter();
+    };
+    const handleExpand = () => {
+        hookData.onExpand();
+    };
+    const handleSelectNamedQuery = (query) => {
+        handleRunQuery(query);
+    };
+    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 }));
 };

package/src/View/GridFilter/GridFilterPopupUI/index.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { NamedQuery, CachedQuery } from '../../../AdaptableState/NamedQueryState';
+/**
+ * Column item for the dropdown menu
+ */
+export interface ColumnItem {
+    /** Column identifier */
+    columnId: string;
+    /** Display label for the column */
+    label: string;
+    /** Callback when column is selected */
+    onClick: () => void;
+}
+/**
+ * Props for the GridFilterPopupUI component.
+ * This is a pure presentation component that receives all data and callbacks as props.
+ */
+export interface GridFilterPopupUIProps {
+    /** Current filter expression value */
+    expression: string;
+    /** Whether the current expression is valid */
+    isExpressionValid: boolean;
+    /** Whether the current expression matches a named query */
+    isExpressionNamedQuery: boolean;
+    /** Whether the grid filter is currently suspended */
+    isSuspended: boolean;
+    /** Whether the grid filter is read only */
+    isReadOnly: boolean;
+    /** Available columns for the dropdown menu */
+    availableColumns: ColumnItem[];
+    /** List of saved named queries */
+    namedQueries: NamedQuery[];
+    /** List of recently used cached queries */
+    cachedQueries: CachedQuery[];
+    /** Current grid filter expression (may differ from input expression) */
+    currentGridFilterExpression?: string;
+    /** Header text for the popup panel */
+    headerText: string;
+    /** Icon name for the popup panel */
+    glyphicon: string;
+    /** Help page URL for the info link */
+    infoLink?: string;
+    /** Whether the info link should be disabled */
+    infoLinkDisabled?: boolean;
+    /** Called when the expression input value changes */
+    onExpressionChange: (value: string) => void;
+    /** Called when the query should be executed */
+    onRunQuery: (expression?: string) => void;
+    /** Called when the clear button is clicked */
+    onClearQuery: () => void;
+    /** Called when the save button is clicked */
+    onSaveQuery: () => void;
+    /** Called when the suspend button is clicked */
+    onSuspend: () => void;
+    /** Called when the unsuspend/resume button is clicked */
+    onUnsuspend: () => void;
+    /** Called when the expand button is clicked */
+    onExpand: () => void;
+    /** Called when a named query is selected */
+    onSelectNamedQuery: (query: string) => void;
+    /** Called when setting the grid filter expression directly */
+    onSetGridFilterExpression: (query: string) => void;
+    /** Access level for grid filter operations */
+    gridFilterAccessLevel: 'ReadOnly' | 'Hidden' | 'Full';
+    /** Access level for named query operations */
+    namedQueryAccessLevel: 'ReadOnly' | 'Hidden' | 'Full';
+}
+export declare const GridFilterPopupUI: (props: GridFilterPopupUIProps) => React.JSX.Element;

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import DropdownButton from '../../../components/DropdownButton';
+import FieldWrap from '../../../components/FieldWrap';
+import Input from '../../../components/Input';
+import Panel from '../../../components/Panel';
+import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
+import { ButtonClear } from '../../Components/Buttons/ButtonClear';
+import { ButtonExpand } from '../../Components/Buttons/ButtonExpand';
+import { ButtonInvalid } from '../../Components/Buttons/ButtonInvalid';
+import { ButtonPause } from '../../Components/Buttons/ButtonPause';
+import { ButtonPlay } from '../../Components/Buttons/ButtonPlay';
+import { ButtonSave } from '../../Components/Buttons/ButtonSave';
+import { ButtonUnsuspend } from '../../Components/Buttons/ButtonUnsuspend';
+import { PopupPanel } from '../../Components/Popups/AdaptablePopup/PopupPanel';
+import { NamedQuerySelector } from './../NamedQuerySelector';
+import { Box, Flex } from '../../../components/Flex';
+export const GridFilterPopupUI = (props) => {
+    const { expression, isExpressionValid, isExpressionNamedQuery, isSuspended, isReadOnly, availableColumns, namedQueries, cachedQueries, currentGridFilterExpression, headerText, glyphicon, infoLink, infoLinkDisabled, onExpressionChange, onRunQuery, onClearQuery, onSaveQuery, onSuspend, onUnsuspend, onExpand, onSelectNamedQuery, onSetGridFilterExpression, gridFilterAccessLevel, namedQueryAccessLevel, } = props;
+    const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === 'ReadOnly';
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            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")))))));
+};