@adaptabletools/adaptable 17.0.6 → 18.0.0-canary.1

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -1,25 +1,21 @@
-"use strict";
-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 DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
-const FieldWrap_1 = tslib_1.__importDefault(require("../../components/FieldWrap"));
-const icons_1 = require("../../components/icons");
-const Input_1 = tslib_1.__importDefault(require("../../components/Input"));
-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 NamedQuerySelector_1 = require("./NamedQuerySelector");
-const useGridFilterExpressionEditor_1 = require("./useGridFilterExpressionEditor");
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import StringExtensions from '../../Utilities/Extensions/StringExtensions';
+import DropdownButton from '../../components/DropdownButton';
+import FieldWrap from '../../components/FieldWrap';
+import Textarea from '../../components/Textarea';
+import { Icon } from '../../components/icons';
+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 { NamedQuerySelector } from './NamedQuerySelector';
+import { useGridFilterExpressionEditor } from './useGridFilterExpressionEditor';
 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)();
+    const { cachedQueries, expression, setExpression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, isAdaptableReady, namedQueries, availableColumns, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, isReadOnly, } = useGridFilterExpressionEditor();
     if (!isAdaptableReady) {
         return null;
     }
@@ -30,25 +26,59 @@ 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, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", marginLeft: 1 }));
     const renderTextInput = () => {
-        return props.viewType === 'Toolbar' ? (React.createElement(FieldWrap_1.default, { marginRight: 1, width: 500 },
+        return props.viewType === 'Toolbar' ? (React.createElement(FieldWrap, { marginRight: 1, width: 500, style: { overflow: 'visible' } },
             buttonExpand,
-            React.createElement(Input_1.default, { 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 === null || gridFilter === void 0 ? void 0 : gridFilter.Expression), marginRight: 1 })),
-            gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", marginRight: 1 })),
+            React.createElement(Box, { style: {
+                    position: 'relative',
+                    height: '100%',
+                }, flex: 1 },
+                React.createElement(Textarea, { "data-name": "grid-filter-input", autoResizeOnFocus: true, style: {
+                        left: 0,
+                        top: 0,
+                        right: 0,
+                        border: 0,
+                        position: 'absolute',
+                        resize: 'none',
+                        fontFamily: 'monospace',
+                        fontSize: 12,
+                        maxHeight: 52,
+                        height: 21,
+                        paddingTop: 7,
+                        zIndex: 100,
+                    }, placehoder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression })),
+            isExpressionValid && (React.createElement(ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || expression == '' || expression == (gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression), marginRight: 1 })),
+            gridFilter && !isExpressionValid && (React.createElement(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(FieldWrap_1.default, null,
+            StringExtensions.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))) : (React.createElement(FieldWrap, { width: "100%", overflow: "visible" },
             ' ',
             buttonExpand,
-            React.createElement(Input_1.default, { disabled: disabled, type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (x) => setExpression(x.target.value), style: { width: '100%' } })));
+            React.createElement(Box, { style: {
+                    position: 'relative',
+                    minHeight: 40,
+                    width: '100%',
+                }, flex: 1 },
+                React.createElement(Textarea, { "data-name": "grid-filter-input", autoResizeOnFocus: true, style: {
+                        left: 0,
+                        top: 0,
+                        right: 0,
+                        border: 0,
+                        position: 'absolute',
+                        resize: 'none',
+                        fontFamily: 'monospace',
+                        fontSize: 12,
+                        maxHeight: 60,
+                        paddingTop: 7,
+                        zIndex: 100,
+                    }, placehoder: "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: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
-    const namedQuerySelector = (React.createElement(NamedQuerySelector_1.NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter === null || gridFilter === void 0 ? void 0 : 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" },
-        React.createElement(icons_1.Icon, { name: 'list' })));
+    const saveButton = (React.createElement(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, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
+    const unSuspendButton = (React.createElement(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
+    const namedQuerySelector = (React.createElement(NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) }));
+    const columnsDropdown = (React.createElement(DropdownButton, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", items: availableColumns, marginRight: 1, tooltip: "Pick Columns" },
+        React.createElement(Icon, { name: 'list' })));
     const renderButtons = () => {
         return props.viewType === 'Toolbar' ? (React.createElement(React.Fragment, null,
             saveButton,
@@ -56,16 +86,16 @@ const QueryViewPanelComponent = (props) => {
             columnsDropdown,
             namedQuerySelector,
             ' ')) : (React.createElement(React.Fragment, null,
-            React.createElement(ButtonPlay_1.ButtonPlay, { onClick: () => runQuery(), tooltip: "Run Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || !isExpressionValid || expression == '' || expression == gridFilter, marginRight: 1 }),
+            React.createElement(ButtonPlay, { onClick: () => runQuery(), tooltip: "Run Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || !isExpressionValid || expression == '' || expression == gridFilter, marginRight: 1 }),
             ' ',
-            React.createElement(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, disabled: expression == '' }),
+            React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, disabled: expression == '' }),
             ' ',
             saveButton,
             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, null, renderTextInput()),
-        React.createElement(rebass_1.Flex, null, renderButtons())));
+    return (React.createElement(Flex, { onKeyDown: handleEnter, flexDirection: "row", className: `ab-${elementType}__Query__wrap`, flexWrap: props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+        React.createElement(Flex, { width: props.viewType === 'ToolPanel' ? '100%' : 'auto' }, renderTextInput()),
+        React.createElement(Flex, null, renderButtons())));
 };
-exports.GridFilterPanelControl = QueryViewPanelComponent;
+export const GridFilterPanelControl = QueryViewPanelComponent;

package/src/View/GridFilter/GridFilterWindowPopup.js

@@ -1,10 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridFilterWindowPopup = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const GridFilterExpressionEditor_1 = require("./GridFilterExpressionEditor");
-const GridFilterWindowPopup = (props) => {
-    return (React.createElement(GridFilterExpressionEditor_1.GridFilterExpressionEditor, { expression: props.popupProps.value, onDismiss: props.onDismiss }));
+import * as React from 'react';
+import { GridFilterExpressionEditor } from './GridFilterExpressionEditor';
+export const GridFilterWindowPopup = (props) => {
+    return (React.createElement(GridFilterExpressionEditor, { expression: props.popupProps.value, onDismiss: props.onDismiss }));
 };
-exports.GridFilterWindowPopup = GridFilterWindowPopup;

package/src/View/GridFilter/NamedQuerySelector.js

@@ -1,56 +1,50 @@
-"use strict";
-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"));
-const Tag_1 = require("../../components/Tag");
-const Enums_1 = require("../../PredefinedConfig/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 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),
-        React.createElement(Tag_1.Tag, null, props.expression)));
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import { Icon } from '../../components/icons';
+import Panel from '../../components/Panel';
+import SimpleButton from '../../components/SimpleButton';
+import { Tag } from '../../components/Tag';
+import { SortOrder } from '../../PredefinedConfig/Common/Enums';
+import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
+import { AdaptablePopover } from '../AdaptablePopover';
+import { ButtonOpen } from '../Components/Buttons/ButtonOpen';
+export const AvailableSearchLabel = (props) => {
+    return (React.createElement(Flex, { flexDirection: "column", textAlign: "start", width: "100%", justifyContent: "space-around" },
+        React.createElement(Box, { mb: 2, flex: 1 }, props.label),
+        React.createElement(Tag, null, props.expression)));
 };
-exports.AvailableSearchLabel = AvailableSearchLabel;
-const NamedQuerySelector = (props) => {
+export const NamedQuerySelector = (props) => {
     var _a;
-    const sortedNamedQueries = (_a = ArrayExtensions_1.default.sortArrayWithProperty(Enums_1.SortOrder.Asc, props.namedQueries, 'Name')) !== null && _a !== void 0 ? _a : [];
+    const sortedNamedQueries = (_a = ArrayExtensions.sortArrayWithProperty(SortOrder.Asc, props.namedQueries, 'Name')) !== null && _a !== void 0 ? _a : [];
     const availableSearches = sortedNamedQueries.map((expression) => {
         return {
-            label: (React.createElement(exports.AvailableSearchLabel, { label: expression.Name, expression: expression.BooleanExpression })),
-            icon: expression.BooleanExpression === props.currentQuery ? React.createElement(icons_1.Icon, { name: 'check' }) : null,
+            label: (React.createElement(AvailableSearchLabel, { label: expression.Name, expression: expression.BooleanExpression })),
+            icon: expression.BooleanExpression === props.currentQuery ? React.createElement(Icon, { name: 'check' }) : null,
             onClick: () => props.onSelect(expression.BooleanExpression),
         };
     });
-    const cachedQueries = ArrayExtensions_1.default.IsNotNullOrEmpty(props.cachedQueries)
+    const cachedQueries = ArrayExtensions.IsNotNullOrEmpty(props.cachedQueries)
         ? props.cachedQueries
             .slice(-3)
             .reverse()
             .map((item) => ({
-            label: (React.createElement(exports.AvailableSearchLabel, { label: `Grid Filter at ${item.time.toLocaleTimeString('en-US')}`, expression: item.expression })),
-            icon: React.createElement(icons_1.Icon, { name: 'history' }),
+            label: (React.createElement(AvailableSearchLabel, { label: `Grid Filter at ${item.time.toLocaleTimeString('en-US')}`, expression: item.expression })),
+            icon: React.createElement(Icon, { name: 'history' }),
             onClick: () => props.setGridFilterExpression(item.expression),
         }))
         : 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(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));
+    return ArrayExtensions.IsNotNullOrEmpty(cachedQueries) ||
+        ArrayExtensions.IsNotNullOrEmpty(availableSearches) ? (React.createElement(AdaptablePopover, { tooltipText: "Load Named Query", showIcon: false, popoverMinWidth: 300, bodyText: [
+            React.createElement(Flex, { justifyContent: "stretch", flexDirection: "column" },
+                React.createElement(Panel, { header: "Named Queries" },
+                    React.createElement(Flex, { flexDirection: "column" }, availableSearches.map((item, index) => {
+                        return (React.createElement(SimpleButton, { 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, { mt: 2, header: "Recent Grid Filters" },
+                        React.createElement(Flex, { flexDirection: "column" }, cachedQueries.map((cachedQuery, index) => {
+                            return (React.createElement(SimpleButton, { disabled: props.disabled, 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 }));
+        React.createElement(SimpleButton, { disabled: props.disabled, variant: "text", icon: "folder-open" }, props.children))) : (React.createElement(ButtonOpen, { tooltip: "Load Named Query", disabled: true }));
 };
-exports.NamedQuerySelector = NamedQuerySelector;

package/src/View/GridFilter/useGridFilterExpressionEditor.js

@@ -1,19 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGridFilterExpressionEditor = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_redux_1 = require("react-redux");
-const SystemRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/SystemRedux"));
-const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
-const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
-const AdaptableContext_1 = require("../AdaptableContext");
-const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
-const useGridFilterExpressionEditor = () => {
+import * as React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
+import { GridFilterModuleId, NamedQueryModuleId } from '../../Utilities/Constants/ModuleConstants';
+import StringExtensions from '../../Utilities/Extensions/StringExtensions';
+import { useAdaptable } from '../AdaptableContext';
+import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
+export const useGridFilterExpressionEditor = () => {
     var _a, _b, _c;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const dispatch = (0, react_redux_1.useDispatch)();
-    const currentLayout = (0, react_redux_1.useSelector)((state) => {
+    const adaptable = useAdaptable();
+    const dispatch = useDispatch();
+    const currentLayout = useSelector((state) => {
         return state.Layout.Layouts.find((l) => l.Name == state.Layout.CurrentLayout);
     });
     const isReadOnly = Boolean(currentLayout === null || currentLayout === void 0 ? void 0 : currentLayout.IsReadOnly);
@@ -22,8 +18,8 @@ const useGridFilterExpressionEditor = () => {
     const [expression, setExpression] = React.useState(() => {
         return adaptable.api.gridFilterApi.getCurrentGridFilterExpression();
     });
-    const namedQueries = (_a = (0, react_redux_1.useSelector)((state) => state.NamedQuery.NamedQueries)) !== null && _a !== void 0 ? _a : [];
-    const cachedQueries = (_b = (0, react_redux_1.useSelector)((state) => state.System.CachedQueries)) !== null && _b !== void 0 ? _b : [];
+    const namedQueries = (_a = useSelector((state) => state.NamedQuery.NamedQueries)) !== null && _a !== void 0 ? _a : [];
+    const cachedQueries = (_b = useSelector((state) => state.System.CachedQueries)) !== null && _b !== void 0 ? _b : [];
     const isSuspended = (_c = gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.IsSuspended) !== null && _c !== void 0 ? _c : false;
     const onAddCachedQuery = (cachedQuery) => {
         dispatch(SystemRedux.SystemCachedQueryAdd(cachedQuery));
@@ -44,14 +40,14 @@ const useGridFilterExpressionEditor = () => {
     const isExpressionValid = expression == '' ||
         adaptable.api.internalApi
             .getQueryLanguageService()
-            .validateBoolean(expression, ModuleConstants_1.NamedQueryModuleId).isValid;
+            .validateBoolean(expression, NamedQueryModuleId).isValid;
     const isExpressionNamedQuery = namedQueries.find((sq) => sq.BooleanExpression == expression) != null;
     let availableColumns = adaptable.api.columnApi.getColumns().map((col) => {
         return {
             label: col.friendlyName,
             onClick: () => {
                 // Bogdan - im sure there is a better way to do this check with fancy operators i dont know
-                const newExp = StringExtensions_1.default.IsNotNullOrEmpty(expression) ? expression : '';
+                const newExp = StringExtensions.IsNotNullOrEmpty(expression) ? expression : '';
                 setExpression(newExp + `[${col.columnId}]`);
             },
         };
@@ -61,18 +57,18 @@ const useGridFilterExpressionEditor = () => {
         setExpression('');
     };
     const runQuery = (newExpression = expression) => {
-        if (StringExtensions_1.default.IsNullOrEmpty(newExpression) &&
-            StringExtensions_1.default.IsNotNullOrEmpty(gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression)) {
+        if (StringExtensions.IsNullOrEmpty(newExpression) &&
+            StringExtensions.IsNotNullOrEmpty(gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression)) {
             // user pressed enter key with an empty input => clear existing current query
             adaptable.api.gridFilterApi.setGridFilterExpression('');
             return;
         }
         if (!adaptable.api.internalApi
             .getQueryLanguageService()
-            .validateBoolean(newExpression, ModuleConstants_1.NamedQueryModuleId).isValid) {
+            .validateBoolean(newExpression, NamedQueryModuleId).isValid) {
             return;
         }
-        if (StringExtensions_1.default.IsNotNullOrEmpty(expression)) {
+        if (StringExtensions.IsNotNullOrEmpty(expression)) {
             let cachedQuery = {
                 expression: expression,
                 time: new Date(),
@@ -86,12 +82,12 @@ const useGridFilterExpressionEditor = () => {
     const gridFilterAccessLevel = React.useMemo(() => {
         return adaptable.api.internalApi
             .getEntitlementService()
-            .getEntitlementAccessLevelForModule(ModuleConstants_1.GridFilterModuleId);
+            .getEntitlementAccessLevelForModule(GridFilterModuleId);
     }, []);
     const namedQueryModuleAccessLevel = adaptable.api.internalApi
         .getEntitlementService()
-        .getEntitlementAccessLevelForModule(ModuleConstants_1.NamedQueryModuleId);
-    const onShowNamedQueries = (value, popup) => dispatch(PopupRedux.PopupShowScreen(ModuleConstants_1.NamedQueryModuleId, popup, {
+        .getEntitlementAccessLevelForModule(NamedQueryModuleId);
+    const onShowNamedQueries = (value, popup) => dispatch(PopupRedux.PopupShowScreen(NamedQueryModuleId, popup, {
         action: 'New',
         source: 'Other',
         value,
@@ -99,7 +95,7 @@ const useGridFilterExpressionEditor = () => {
     const saveQuery = () => {
         const namedqueryPopuName = adaptable.api.internalApi
             .getModuleService()
-            .getModuleById(ModuleConstants_1.NamedQueryModuleId).moduleInfo.Popup;
+            .getModuleById(NamedQueryModuleId).moduleInfo.Popup;
         onShowNamedQueries(expression, namedqueryPopuName);
     };
     const suspendGridFilter = () => {
@@ -136,4 +132,3 @@ const useGridFilterExpressionEditor = () => {
         gridFilterLinkDisabled,
     };
 };
-exports.useGridFilterExpressionEditor = useGridFilterExpressionEditor;

package/src/View/GridFilter/useGridFilterOptionsForExpressionEditor.js

@@ -1,13 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGridFilterOptionsForExpressionEditorProps = void 0;
-const AdaptableContext_1 = require("../AdaptableContext");
-const useGridFilterOptionsForExpressionEditorProps = () => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+import { useAdaptable } from '../AdaptableContext';
+export const useGridFilterOptionsForExpressionEditorProps = () => {
+    const adaptable = useAdaptable();
     const gridFilterEditors = adaptable.api.optionsApi.getGridFilterOptions().availableFilterEditors;
     return {
         showQueryBuilder: gridFilterEditors.includes('QueryBuilder'),
         showExpressionEditor: gridFilterEditors.includes('ExpressionEditor'),
     };
 };
-exports.useGridFilterOptionsForExpressionEditorProps = useGridFilterOptionsForExpressionEditorProps;

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

@@ -1,18 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableObjectsSummary = 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 AdaptableContext_1 = require("../../AdaptableContext");
-const AdaptableObjectList_1 = require("../../Components/AdaptableObjectList");
-const AdaptableObjectsSummary = () => {
-    const state = (0, react_redux_1.useSelector)((state) => state);
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { Box } from 'rebass';
+import { useAdaptable } from '../../AdaptableContext';
+import { AdaptableObjectList } from '../../Components/AdaptableObjectList';
+export const AdaptableObjectsSummary = () => {
+    const state = useSelector((state) => state);
+    const adaptable = useAdaptable();
     const modules = adaptable.ModuleService.getModuleCollection();
     const baseClassName = 'ab-AdaptableObjectsSummary';
-    return (React.createElement(rebass_1.Box, { className: baseClassName }, [...modules].map(([moduleName, module]) => {
+    return (React.createElement(Box, { className: baseClassName }, [...modules].map(([moduleName, module]) => {
         var _a;
         if (!module.isModuleAvailable()) {
             return null;
@@ -21,9 +17,8 @@ const AdaptableObjectsSummary = () => {
         if (!(items === null || items === void 0 ? void 0 : 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(Box, { "data-name": module.moduleInfo.ModuleName, className: `${baseClassName}__module-list`, key: module.moduleInfo.ModuleName },
             React.createElement("b", { className: `${baseClassName}__header` }, module.moduleInfo.FriendlyName),
-            (items === null || items === void 0 ? void 0 : items.length) && React.createElement(AdaptableObjectList_1.AdaptableObjectList, { items: items, module: module })));
+            (items === null || items === void 0 ? void 0 : items.length) && React.createElement(AdaptableObjectList, { items: items, module: module })));
     })));
 };
-exports.AdaptableObjectsSummary = AdaptableObjectsSummary;

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

@@ -1,17 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableOptionsComponent = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("react");
-const PanelWithButton_1 = require("../../Components/Panels/PanelWithButton");
-const ButtonMinimise_1 = require("../../Components/Buttons/ButtonMinimise");
-const ButtonMaximise_1 = require("../../Components/Buttons/ButtonMaximise");
-const AdaptableObjectCollection_1 = require("../../Components/AdaptableObjectCollection");
-const AdaptableObjectRow_1 = require("../../Components/AdaptableObjectRow");
-const AdaptablePopover_1 = require("../../AdaptablePopover");
-const rebass_1 = require("rebass");
-const AdaptableOptionsComponent = (props) => {
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { PanelWithButton } from '../../Components/Panels/PanelWithButton';
+import { ButtonMinimise } from '../../Components/Buttons/ButtonMinimise';
+import { ButtonMaximise } from '../../Components/Buttons/ButtonMaximise';
+import { AdaptableObjectCollection } from '../../Components/AdaptableObjectCollection';
+import { AdaptableObjectRow } from '../../Components/AdaptableObjectRow';
+import { AdaptablePopover } from '../../AdaptablePopover';
+import { Box } from 'rebass';
+export const AdaptableOptionsComponent = (props) => {
     const { api } = props;
     const getAdaptableOptionsColItems = () => [
         { Content: 'Property', Size: 5 },
@@ -58,20 +54,20 @@ const AdaptableOptionsComponent = (props) => {
                 "(Default: ",
                 formatOptionValue(gridInfoOption.defaultValue),
                 ")"))) : (formattedOptionValue);
-        let infoButton = React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: null, bodyText: [gridInfoOption.description] });
+        let infoButton = React.createElement(AdaptablePopover, { headerText: null, bodyText: [gridInfoOption.description] });
         colItems[2].Content = infoButton;
         return colItems;
     };
     const buildGridInfoOptionComponentContainer = (containerContainerName, gridInfoOptionContainer) => {
         const gridInfoOptionComponents = gridInfoOptionContainer.items.map((gridInfoOption) => {
             const gridOptionColItems = buildGridInfoOptionEntry(gridInfoOption);
-            return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: `${gridInfoOption.name}`, colItems: gridOptionColItems });
+            return React.createElement(AdaptableObjectRow, { key: `${gridInfoOption.name}`, colItems: gridOptionColItems });
         });
-        return (React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { colItems: getAdaptableOptionsColItems(), items: gridInfoOptionComponents }));
+        return (React.createElement(AdaptableObjectCollection, { colItems: getAdaptableOptionsColItems(), items: gridInfoOptionComponents }));
     };
-    const [gridInfoOptions, setGridInfoOptions] = (0, react_1.useState)();
-    const [gridInfoContainerComponents, setGridInfoContainerComponents] = (0, react_1.useState)();
-    (0, react_1.useEffect)(() => {
+    const [gridInfoOptions, setGridInfoOptions] = useState();
+    const [gridInfoContainerComponents, setGridInfoContainerComponents] = useState();
+    useEffect(() => {
         const gridInfoOptions = api.internalApi.getMetamodelService().getGridInfoOptions();
         const gridInfoContainerComponentMap = new Map();
         gridInfoOptions.forEach((gridInfoOptionContainer, containerName) => {
@@ -80,18 +76,17 @@ const AdaptableOptionsComponent = (props) => {
         setGridInfoContainerComponents(gridInfoContainerComponentMap);
         setGridInfoOptions(gridInfoOptions);
     }, []);
-    const [expandedComponentContainer, setExpandedComponentContainer] = (0, react_1.useState)('');
-    return (React.createElement(rebass_1.Box, { className: "ab-AdaptableOptions", padding: 2, "data-name": "gridInfo-adaptableOptions-content" }, gridInfoOptions &&
+    const [expandedComponentContainer, setExpandedComponentContainer] = useState('');
+    return (React.createElement(Box, { className: "ab-AdaptableOptions", padding: 2, "data-name": "gridInfo-adaptableOptions-content" }, gridInfoOptions &&
         Array.from(gridInfoOptions.entries()).map(([containerName, container]) => (React.createElement(OptionContainerComponent, { key: containerName, name: containerName, label: container.containerLabel, viewMode: containerName === expandedComponentContainer ? 'expanded' : 'collapsed', onViewModeChange: (newViewMode) => setExpandedComponentContainer(newViewMode === 'expanded' ? containerName : '') }, gridInfoContainerComponents.get(containerName))))));
 };
-exports.AdaptableOptionsComponent = AdaptableOptionsComponent;
 const OptionContainerComponent = (props) => {
     const { viewMode, name, label, onViewModeChange, children } = props;
     const requestViewModeChange = () => {
         onViewModeChange(viewMode === 'expanded' ? 'collapsed' : 'expanded');
     };
-    const panelButton = viewMode === 'expanded' ? (React.createElement(ButtonMinimise_1.ButtonMinimise, { onClick: () => requestViewModeChange(), tooltip: `Hide ${label}` })) : (React.createElement(ButtonMaximise_1.ButtonMaximise, { onClick: () => requestViewModeChange(), tooltip: `Show ${label}` }));
-    return (React.createElement(PanelWithButton_1.PanelWithButton, { className: `ab-OptionsContainer options-container-${name}`, variant: "default", headerText: label, headerProps: {
+    const panelButton = viewMode === 'expanded' ? (React.createElement(ButtonMinimise, { onClick: () => requestViewModeChange(), tooltip: `Hide ${label}` })) : (React.createElement(ButtonMaximise, { onClick: () => requestViewModeChange(), tooltip: `Show ${label}` }));
+    return (React.createElement(PanelWithButton, { className: `ab-OptionsContainer options-container-${name}`, variant: "default", headerText: label, headerProps: {
             fontSize: 3,
             style: {
                 fontWeight: viewMode === 'expanded' ? 800 : 400,