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

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

@@ -4,7 +4,6 @@ exports.FreeTextColumnSettingsWizardSection = exports.isValidFreeTextColumn = ex
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const rebass_1 = require("rebass");
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
@@ -17,6 +16,7 @@ const DateHelper_1 = require("../../../Utilities/Helpers/DateHelper");
 const Tag_1 = require("../../../components/Tag");
 const SpecialColumnSettingsWizardStep_1 = require("../../SpecialColumnSettingsWizardStep");
 const Select_1 = require("../../../components/Select");
+const Flex_1 = require("../../../components/Flex");
 const options = [
     { value: 'number', label: 'Number' },
     { value: 'text', label: 'Text' },
@@ -24,20 +24,20 @@ const options = [
     { value: 'boolean', label: 'Boolean' },
 ];
 const renderFreeTextColumnSummary = (data) => {
-    return (React.createElement(rebass_1.Box, { fontSize: 2 },
-        React.createElement(rebass_1.Box, null,
+    return (React.createElement(Flex_1.Box, { className: "twa:text-2" },
+        React.createElement(Flex_1.Box, null,
             "Column Identifier: ",
             React.createElement(Tag_1.Tag, null, data.ColumnId)),
-        data.FriendlyName ? (React.createElement(rebass_1.Box, { mt: 3 },
+        data.FriendlyName ? (React.createElement(Flex_1.Box, { className: "twa:mt-3" },
             "Column Name: ",
             React.createElement(Tag_1.Tag, null, data.FriendlyName ?? data.ColumnId))) : null,
-        React.createElement(rebass_1.Box, { mt: 3 },
+        React.createElement(Flex_1.Box, { className: "twa:mt-3" },
             "Data Type: ",
             React.createElement(Tag_1.Tag, null, data.FreeTextColumnSettings.DataType)),
-        data.DefaultValue !== undefined ? (React.createElement(rebass_1.Box, { mt: 3 },
+        data.DefaultValue !== undefined ? (React.createElement(Flex_1.Box, { className: "twa:mt-3" },
             "Default Value: ",
             React.createElement(Tag_1.Tag, null, data.DefaultValue))) : null,
-        data.TextEditor !== undefined ? (React.createElement(rebass_1.Box, { mt: 3 },
+        data.TextEditor !== undefined ? (React.createElement(Flex_1.Box, { className: "twa:mt-3" },
             "Editor Type: ",
             React.createElement(Tag_1.Tag, null, data.TextEditor))) : null));
 };
@@ -138,7 +138,7 @@ 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(FormLayout_1.FormRow, { label: "Data Type" },
-                React.createElement(rebass_1.Box, { style: { maxWidth: 500 } },
+                React.createElement(Flex_1.Box, { className: "twa:max-w-[500px]" },
                     React.createElement(Select_1.Select, { "data-name": "column-type-dropdown", options: options, placeholder: "Select Data Type", value: data.FreeTextColumnSettings.DataType, onChange: (value) => handleDataTypeChange(value) }))),
             React.createElement(FormLayout_1.FormRow, { label: "Default Value" }, data.FreeTextColumnSettings.DataType === 'boolean' ? (React.createElement(CheckBox_1.CheckBox, { "data-name": "column-default-value-checkbox", checked: !!data.DefaultValue, onChange: (DefaultValue) => {
                     props.onChange({
@@ -147,7 +147,7 @@ const FreeTextColumnSettingsWizardSection = (props) => {
                     });
                 } })) : (React.createElement(AdaptableInput_1.default, { "data-name": "column-default-value", value: data.FreeTextColumnSettings.DataType === 'date' && data.DefaultValue
                     ? (0, DateHelper_1.parseToISO)(data.DefaultValue, Pattern) || ''
-                    : data.DefaultValue || '', 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'
@@ -158,10 +158,10 @@ const FreeTextColumnSettingsWizardSection = (props) => {
                     }) })),
             ' ',
             data.FreeTextColumnSettings.DataType == 'text' && (React.createElement(FormLayout_1.FormRow, { label: "Cell Editor" },
-                React.createElement(Radio_1.default, { "data-name": "inline-editor", value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), marginRight: 2 }, "Inline Editor"),
+                React.createElement(Radio_1.default, { "data-name": "inline-editor", value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), className: "twa:mr-2" }, "Inline Editor"),
                 React.createElement(Radio_1.default, { "data-name": "large-editor", value: "Large", checked: data.TextEditor == 'Large', onChange: (_, e) => onDynamicSelectChanged(e) }, "Large Editor")))),
-        ErrorMessage ? (React.createElement(ErrorBox_1.default, { mt: 2, mb: 2 }, ErrorMessage)) : null,
-        React.createElement(rebass_1.Box, { mt: 2 },
+        ErrorMessage ? React.createElement(ErrorBox_1.default, { className: "twa:my-2" }, ErrorMessage) : null,
+        React.createElement(Flex_1.Box, { className: "twa:mt-2" },
             React.createElement(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: true, settings: data.FreeTextColumnSettings, onChange: handleSpecialColumnSettingsChange }))));
 };
 exports.FreeTextColumnSettingsWizardSection = FreeTextColumnSettingsWizardSection;

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

@@ -4,7 +4,6 @@ exports.FreeTextColumnWizard = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const rebass_1 = require("rebass");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Helper_1 = require("../../../Utilities/Helpers/Helper");
 const FreeTextColumnSettingsWizardSection_1 = require("./FreeTextColumnSettingsWizardSection");
@@ -13,6 +12,7 @@ const FreeTextColumnRedux = tslib_1.__importStar(require("../../../Redux/Actions
 const react_redux_1 = require("react-redux");
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
 const AdaptableContext_1 = require("../../AdaptableContext");
+const Flex_1 = require("../../../components/Flex");
 const FreeTextColumnWizard = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const allFreeTextColumns = (0, react_redux_1.useSelector)((state) => state.FreeTextColumn.FreeTextColumns);
@@ -42,7 +42,7 @@ const FreeTextColumnWizard = (props) => {
                 details: 'Configure the Free Text Column',
                 isValid: FreeTextColumnSettingsWizardSection_1.isValidFreeTextColumn,
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                         React.createElement(FreeTextColumnSettingsWizardSection_1.FreeTextColumnSettingsWizardSection, { isEdit: Boolean(props.data), onChange: setFreeTextColumn })));
                 },
             },
@@ -50,7 +50,7 @@ const FreeTextColumnWizard = (props) => {
                 details: 'Select Free Text Column Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setFreeTextColumn }))),
                 renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
             },
@@ -59,7 +59,7 @@ const FreeTextColumnWizard = (props) => {
                 details: 'Review the Free Text Column',
                 renderSummary: FreeTextColumnSettingsWizardSection_1.renderFreeTextColumnSummary,
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                         React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));
                 },
                 title: 'Summary',

package/src/View/GridFilter/GridFilterExpressionEditor.js

@@ -4,7 +4,6 @@ exports.GridFilterExpressionEditor = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
-const rebass_1 = require("rebass");
 const ExpressionEditor_1 = require("../../components/ExpressionEditor");
 const NamedQueryContext_1 = require("../../components/ExpressionEditor/NamedQueryContext");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
@@ -15,6 +14,7 @@ const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions"
 const Helper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/Helper"));
 const AdaptableContext_1 = require("../AdaptableContext");
 const useGridFilterOptionsForExpressionEditor_1 = require("./useGridFilterOptionsForExpressionEditor");
+const Flex_1 = require("../../components/Flex");
 const GridFilterExpressionEditor = (props) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const { api } = (0, AdaptableContext_1.useAdaptable)();
@@ -91,15 +91,15 @@ const GridFilterExpressionEditor = (props) => {
                 setNamedQuery(newQuery);
             },
         } },
-        React.createElement(rebass_1.Flex, { height: "100%", flexDirection: "column" },
+        React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full" },
             React.createElement(ExpressionEditor_1.ExpressionEditor, { ...expressionEditorProps, type: 'boolean', module: ModuleConstants_1.GridFilterModuleId, value: expression, onChange: (expression) => setExpression(expression), initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }),
-            React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 1, alignItems: "center" },
-                props.onDismiss && (React.createElement(SimpleButton_1.default, { margin: 1, variant: "text", "data-name": "action-close", onClick: () => {
+            React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-1" },
+                props.onDismiss && (React.createElement(SimpleButton_1.default, { className: "twa:m-1", variant: "text", "data-name": "action-close", onClick: () => {
                         props.onDismiss();
                     } }, "CLOSE")),
-                React.createElement(rebass_1.Box, { flex: 1 }),
+                React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
                 React.createElement(SimpleButton_1.default, { disabled: actionsDisabled, onClick: handleSaveQuery, icon: "save" }, "Save Query"),
-                React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", "data-name": "action-run", margin: 1, icon: "play", onClick: () => {
+                React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", "data-name": "action-run", className: "twa:m-1", icon: "play", onClick: () => {
                         if (namedQuery) {
                             onAddNamedQuery({
                                 Name: namedQuery.Name,

package/src/View/GridFilter/GridFilterPopup.js

@@ -3,47 +3,38 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridFilterPopup = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
-const FieldWrap_1 = tslib_1.__importDefault(require("../../components/FieldWrap"));
-const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
-const Input_1 = tslib_1.__importDefault(require("../../components/Input"));
-const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
-const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
-const ButtonClear_1 = require("../Components/Buttons/ButtonClear");
-const ButtonExpand_1 = require("../Components/Buttons/ButtonExpand");
-const ButtonInvalid_1 = require("../Components/Buttons/ButtonInvalid");
-const ButtonPause_1 = require("../Components/Buttons/ButtonPause");
-const ButtonPlay_1 = require("../Components/Buttons/ButtonPlay");
-const ButtonSave_1 = require("../Components/Buttons/ButtonSave");
-const ButtonUnsuspend_1 = require("../Components/Buttons/ButtonUnsuspend");
-const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
-const NamedQuerySelector_1 = require("./NamedQuerySelector");
 const useGridFilterExpressionEditor_1 = require("./useGridFilterExpressionEditor");
+const GridFilterPopupUI_1 = require("./GridFilterPopupUI");
 const GridFilterPopup = () => {
-    const { cachedQueries, expression, setExpression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, namedQueries, availableColumns, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, gridFilterHelpPage, gridFilterLinkDisabled, isReadOnly, } = (0, useGridFilterExpressionEditor_1.useGridFilterExpressionEditor)();
-    const handleEnter = (e) => {
-        if (e.key === 'Enter') {
-            runQuery();
-        }
-    };
-    const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === 'ReadOnly';
-    return (React.createElement(PopupPanel_1.PopupPanel, { className: "ab-GridFilter", headerText: "Grid Filter", glyphicon: "grid-filter", infoLink: gridFilterHelpPage, infoLinkDisabled: gridFilterLinkDisabled },
-        React.createElement(Panel_1.default, { bodyProps: { height: '100%' }, height: "100%" },
-            React.createElement(FormLayout_1.default, null,
-                React.createElement(FormLayout_1.FormRow, { label: "Expression" },
-                    React.createElement(FieldWrap_1.default, { marginRight: 1, width: "100%" },
-                        React.createElement(ButtonExpand_1.ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", marginLeft: 1 }),
-                        React.createElement(Input_1.default, { 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_1.ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || expression == '' || expression == gridFilter?.Expression, marginRight: 1 })),
-                        gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", marginRight: 1 })),
-                        ' ',
-                        StringExtensions_1.default.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))),
-                React.createElement(FormLayout_1.FormRow, { label: "" },
-                    React.createElement(rebass_1.Flex, { justifyContent: "space-around" },
-                        React.createElement(ButtonSave_1.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_1.ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }, "Resume")) : (React.createElement(ButtonPause_1.ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }, "Suspend")),
-                        React.createElement(DropdownButton_1.default, { disabled: disabled, variant: "text", items: availableColumns, marginRight: 1, tooltip: "Pick Columns", icon: "list", iconPosition: "start" }, "Columns"),
-                        React.createElement(NamedQuerySelector_1.NamedQuerySelector, { disabled: disabled, namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) }, "Named Queries")))))));
+    const hookData = (0, useGridFilterExpressionEditor_1.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_1.GridFilterPopupUI, { expression: hookData.expression, isExpressionValid: hookData.isExpressionValid, isExpressionNamedQuery: hookData.isExpressionNamedQuery, isSuspended: hookData.isSuspended, isReadOnly: hookData.isReadOnly, availableColumns: hookData.availableColumns, namedQueries: hookData.namedQueries, cachedQueries: hookData.cachedQueries, currentGridFilterExpression: hookData.gridFilter?.Expression, headerText: "Grid Filter", glyphicon: "grid-filter", infoLink: hookData.gridFilterHelpPage, infoLinkDisabled: hookData.gridFilterLinkDisabled, onExpressionChange: handleExpressionChange, onRunQuery: handleRunQuery, onClearQuery: handleClearQuery, onSaveQuery: handleSaveQuery, onSuspend: handleSuspend, onUnsuspend: handleUnsuspend, onExpand: handleExpand, onSelectNamedQuery: handleSelectNamedQuery, onSetGridFilterExpression: handleSetGridFilterExpression, gridFilterAccessLevel: hookData.gridFilterAccessLevel, namedQueryAccessLevel: hookData.namedQueryModuleAccessLevel }));
 };
 exports.GridFilterPopup = GridFilterPopup;

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

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridFilterPanelControl = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
 const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
 const FieldWrap_1 = tslib_1.__importDefault(require("../../components/FieldWrap"));
@@ -18,6 +17,7 @@ const ButtonSave_1 = require("../Components/Buttons/ButtonSave");
 const ButtonUnsuspend_1 = require("../Components/Buttons/ButtonUnsuspend");
 const NamedQuerySelector_1 = require("./NamedQuerySelector");
 const useGridFilterExpressionEditor_1 = require("./useGridFilterExpressionEditor");
+const Flex_1 = require("../../components/Flex");
 const QueryViewPanelComponent = (props) => {
     const { cachedQueries, expression, setExpression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, isAdaptableReady, namedQueries, availableColumns, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, isReadOnly, } = (0, useGridFilterExpressionEditor_1.useGridFilterExpressionEditor)();
     if (!isAdaptableReady) {
@@ -31,14 +31,11 @@ const QueryViewPanelComponent = (props) => {
             runQuery();
         }
     };
-    const buttonExpand = (React.createElement(ButtonExpand_1.ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", marginLeft: 1 }));
+    const buttonExpand = (React.createElement(ButtonExpand_1.ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }));
     const renderTextInput = () => {
-        return props.viewType === 'Toolbar' ? (React.createElement(FieldWrap_1.default, { marginRight: 1, width: 500, style: { overflow: 'visible' } },
+        return props.viewType === 'Toolbar' ? (React.createElement(FieldWrap_1.default, { className: "twa:mr-1 twa:w-[500px] twa:overflow-visible" },
             buttonExpand,
-            React.createElement(rebass_1.Box, { style: {
-                    position: 'relative',
-                    height: '100%',
-                }, flex: 1 },
+            React.createElement(Flex_1.Box, { className: "twa:flex-1 twa:relative twa:h-full" },
                 React.createElement(Textarea_1.default, { "data-name": "grid-filter-input", autoResizeOnFocus: true, style: {
                         left: 0,
                         top: 0,
@@ -54,17 +51,13 @@ const QueryViewPanelComponent = (props) => {
                         overflow: 'hidden',
                         zIndex: 100,
                     }, placeholder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression })),
-            isExpressionValid && (React.createElement(ButtonPlay_1.ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || expression == '' || expression == gridFilter?.Expression, marginRight: 1 })),
-            gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", marginRight: 1 })),
+            isExpressionValid && (React.createElement(ButtonPlay_1.ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || expression == '' || expression == gridFilter?.Expression, className: "twa:mr-1" })),
+            gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", className: "twa:mr-1" })),
             ' ',
-            StringExtensions_1.default.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))) : (React.createElement(FieldWrap_1.default, { width: "100%", overflow: "visible" },
+            StringExtensions_1.default.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))) : (React.createElement(FieldWrap_1.default, { className: "twa:w-full twa:overflow-visible" },
             ' ',
             buttonExpand,
-            React.createElement(rebass_1.Box, { style: {
-                    position: 'relative',
-                    minHeight: 40,
-                    width: '100%',
-                }, flex: 1 },
+            React.createElement(Flex_1.Box, { className: "twa:flex-1 twa:relative twa:w-full twa:min-h-[40px]" },
                 React.createElement(Textarea_1.default, { "data-name": "grid-filter-input", autoResizeOnFocus: true, style: {
                         left: 0,
                         top: 0,
@@ -81,11 +74,11 @@ const QueryViewPanelComponent = (props) => {
                         overflow: 'hidden',
                     }, placeholder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression }))));
     };
-    const saveButton = (React.createElement(ButtonSave_1.ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression == '', variant: "text", tone: "neutral", marginRight: 1 }));
-    const suspendButton = (React.createElement(ButtonPause_1.ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
-    const unSuspendButton = (React.createElement(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
+    const saveButton = (React.createElement(ButtonSave_1.ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression == '', variant: "text", tone: "neutral", className: "twa:mr-1" }));
+    const suspendButton = (React.createElement(ButtonPause_1.ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1" }));
+    const unSuspendButton = (React.createElement(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1" }));
     const namedQuerySelector = (React.createElement(NamedQuerySelector_1.NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) }));
-    const columnsDropdown = (React.createElement(DropdownButton_1.default, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", items: availableColumns, marginRight: 1, tooltip: "Pick Columns" },
+    const columnsDropdown = (React.createElement(DropdownButton_1.default, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", items: availableColumns, className: "twa:mr-1", tooltip: "Pick Columns" },
         React.createElement(icons_1.Icon, { name: 'list' })));
     const renderButtons = () => {
         return props.viewType === 'Toolbar' ? (React.createElement(React.Fragment, null,
@@ -94,7 +87,7 @@ const QueryViewPanelComponent = (props) => {
             columnsDropdown,
             namedQuerySelector,
             ' ')) : (React.createElement(React.Fragment, null,
-            React.createElement(ButtonPlay_1.ButtonPlay, { "aria-label": 'Run Grid Filter', onClick: () => runQuery(), tooltip: "Run Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || !isExpressionValid || expression == '' || expression == gridFilter, marginRight: 1 }),
+            React.createElement(ButtonPlay_1.ButtonPlay, { "aria-label": 'Run Grid Filter', onClick: () => runQuery(), tooltip: "Run Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || !isExpressionValid || expression == '' || expression == gridFilter, className: "twa:mr-1" }),
             ' ',
             React.createElement(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, disabled: expression == '' }),
             ' ',
@@ -102,8 +95,8 @@ const QueryViewPanelComponent = (props) => {
             isSuspended ? unSuspendButton : suspendButton,
             namedQuerySelector));
     };
-    return (React.createElement(rebass_1.Flex, { onKeyDown: handleEnter, flexDirection: "row", className: `ab-${elementType}__Query__wrap`, flexWrap: props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-        React.createElement(rebass_1.Flex, { width: props.viewType === 'ToolPanel' ? '100%' : 'auto' }, renderTextInput()),
-        React.createElement(rebass_1.Flex, null, renderButtons())));
+    return (React.createElement(Flex_1.Flex, { onKeyDown: handleEnter, flexDirection: "row", className: `ab-${elementType}__Query__wrap`, flexWrap: props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+        React.createElement(Flex_1.Flex, { className: props.viewType === 'ToolPanel' ? 'twa:w-full' : 'twa:w-auto' }, renderTextInput()),
+        React.createElement(Flex_1.Flex, null, renderButtons())));
 };
 exports.GridFilterPanelControl = QueryViewPanelComponent;

package/src/View/GridFilter/NamedQuerySelector.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NamedQuerySelector = exports.AvailableSearchLabel = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const icons_1 = require("../../components/icons");
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
@@ -12,9 +11,10 @@ const Enums_1 = require("../../AdaptableState/Common/Enums");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
 const AdaptablePopover_1 = require("../AdaptablePopover");
 const ButtonOpen_1 = require("../Components/Buttons/ButtonOpen");
+const Flex_1 = require("../../components/Flex");
 const AvailableSearchLabel = (props) => {
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", textAlign: "start", width: "100%", justifyContent: "space-around" },
-        React.createElement(rebass_1.Box, { mb: 2, flex: 1 }, props.label),
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", justifyContent: "space-around", className: "twa:text-start twa:w-full" },
+        React.createElement(Flex_1.Box, { className: "twa:mb-2 twa:flex-1" }, props.label),
         React.createElement(Tag_1.Tag, null, props.expression)));
 };
 exports.AvailableSearchLabel = AvailableSearchLabel;
@@ -39,15 +39,15 @@ const NamedQuerySelector = (props) => {
         : null;
     return ArrayExtensions_1.default.IsNotNullOrEmpty(cachedQueries) ||
         ArrayExtensions_1.default.IsNotNullOrEmpty(availableSearches) ? (React.createElement(AdaptablePopover_1.AdaptablePopover, { tooltipText: "Load Named Query", showIcon: false, popoverMinWidth: 300, bodyText: [
-            React.createElement(rebass_1.Flex, { justifyContent: "stretch", flexDirection: "column" },
+            React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:justify-stretch" },
                 React.createElement(Panel_1.default, { header: "Named Queries" },
-                    React.createElement(rebass_1.Flex, { flexDirection: "column" }, availableSearches.map((item, index) => {
-                        return (React.createElement(SimpleButton_1.default, { mb: 2, variant: "text", key: index, onClick: item.onClick }, item.label));
+                    React.createElement(Flex_1.Flex, { flexDirection: "column" }, availableSearches.map((item, index) => {
+                        return (React.createElement(SimpleButton_1.default, { className: "twa:mb-2", variant: "text", key: index, onClick: item.onClick }, item.label));
                     }))),
                 cachedQueries ? (React.createElement(React.Fragment, null,
-                    React.createElement(Panel_1.default, { mt: 2, header: "Recent Grid Filters" },
-                        React.createElement(rebass_1.Flex, { flexDirection: "column" }, cachedQueries.map((cachedQuery, index) => {
-                            return (React.createElement(SimpleButton_1.default, { disabled: props.disabled, mb: 2, variant: "text", key: index, onClick: cachedQuery.onClick }, cachedQuery.label));
+                    React.createElement(Panel_1.default, { className: "twa:mt-2", header: "Recent Grid Filters" },
+                        React.createElement(Flex_1.Flex, { flexDirection: "column" }, cachedQueries.map((cachedQuery, index) => {
+                            return (React.createElement(SimpleButton_1.default, { disabled: props.disabled, className: "twa:mb-2", variant: "text", key: index, onClick: cachedQuery.onClick }, cachedQuery.label));
                         }))))) : null),
         ] },
         React.createElement(SimpleButton_1.default, { disabled: props.disabled, variant: "text", icon: "folder-open" }, props.children))) : (React.createElement(ButtonOpen_1.ButtonOpen, { tooltip: "Load Named Query", disabled: true }));

package/src/View/GridFilter/useGridFilterExpressionEditor.d.ts

@@ -13,7 +13,11 @@ export declare const useGridFilterExpressionEditor: () => {
     isAdaptableReady: boolean;
     namedQueries: import("../../types").NamedQuery[];
     onAddCachedQuery: (cachedQuery: CachedQuery) => void;
-    availableColumns: any[];
+    availableColumns: {
+        columnId: string;
+        label: string;
+        onClick: () => void;
+    }[];
     runQuery: (newExpression?: string) => void;
     clearQuery: () => void;
     onExpand: () => void;

package/src/View/GridFilter/useGridFilterExpressionEditor.js

@@ -44,8 +44,9 @@ const useGridFilterExpressionEditor = () => {
             .getQueryLanguageService()
             .validateBoolean(expression, ModuleConstants_1.NamedQueryModuleId).isValid;
     const isExpressionNamedQuery = namedQueries.find((sq) => sq.BooleanExpression == expression) != null;
-    let availableColumns = adaptable.api.columnApi.getColumns().map((col) => {
+    const availableColumns = adaptable.api.columnApi.getColumns().map((col) => {
         return {
+            columnId: col.columnId,
             label: col.friendlyName,
             onClick: () => {
                 // Bogdan - im sure there is a better way to do this check with fancy operators i dont know

package/src/View/GridInfo/GridInfoPopup/AdaptableObjectsSummary.d.ts

@@ -1,2 +1,4 @@
 import * as React from 'react';
-export declare const AdaptableObjectsSummary: React.FunctionComponent;
+export declare const AdaptableObjectsSummary: React.FunctionComponent<{
+    className?: string;
+}>;

package/src/View/GridInfo/GridInfoPopup/AdaptableObjectsSummary.js

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableObjectsSummary = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
+const Flex_1 = require("../../../components/Flex");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const AdaptableObjectList_1 = require("../../Components/AdaptableObjectList");
 const useRerender_1 = require("../../../components/utils/useRerender");
 const react_1 = require("react");
-const AdaptableObjectsSummary = () => {
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const AdaptableObjectsSummary = ({ className, }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const rerender = (0, useRerender_1.useRerender)();
     (0, react_1.useEffect)(() => {
@@ -16,7 +17,7 @@ const AdaptableObjectsSummary = () => {
     }, [adaptable]);
     const modules = adaptable.ModuleService.getModuleCollection();
     const baseClassName = 'ab-AdaptableObjectsSummary';
-    return (React.createElement(rebass_1.Box, { className: baseClassName }, [...modules].map(([moduleName, module]) => {
+    return (React.createElement(Flex_1.Box, { className: (0, clsx_1.default)(baseClassName, className) }, [...modules].map(([moduleName, module]) => {
         if (!module.isModuleVisible()) {
             return null;
         }
@@ -24,7 +25,7 @@ const AdaptableObjectsSummary = () => {
         if (!items?.length) {
             return null;
         }
-        return (React.createElement(rebass_1.Box, { "data-name": module.moduleInfo.ModuleName, className: `${baseClassName}__module-list`, key: module.moduleInfo.ModuleName },
+        return (React.createElement(Flex_1.Box, { "data-name": module.moduleInfo.ModuleName, className: `${baseClassName}__module-list`, key: module.moduleInfo.ModuleName },
             React.createElement("b", { className: `${baseClassName}__header` }, module.moduleInfo.FriendlyName),
             items?.length && React.createElement(AdaptableObjectList_1.AdaptableObjectList, { items: items, module: module })));
     })));