@adaptabletools/adaptable 16.2.4 → 17.0.0-canary.1

package/src/View/GridFilter/NamedQuerySelector.js

@@ -0,0 +1,50 @@
+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)));
+};
+export const NamedQuerySelector = (props) => {
+    var _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(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.IsNotNullOrEmpty(props.cachedQueries)
+        ? props.cachedQueries
+            .slice(-3)
+            .reverse()
+            .map((item) => ({
+            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.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, { mt: 2, header: "Recent Grid Filters" },
+                        React.createElement(Flex, { flexDirection: "column" }, cachedQueries.map((cachedQuery, index) => {
+                            return (React.createElement(SimpleButton, { mb: 2, variant: "text", key: index, onClick: cachedQuery.onClick }, cachedQuery.label));
+                        }))))) : null),
+        ] },
+        React.createElement(SimpleButton, { disabled: props.disabled, variant: "text", icon: "folder-open" }, props.children))) : (React.createElement(ButtonOpen, { tooltip: "Load Named Query", disabled: true }));
+};

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { CachedQuery } from '../../PredefinedConfig/NamedQueryState';
+export declare const useGridFilterExpressionEditor: () => {
+    namedQueryModuleAccessLevel: import("../../types").AccessLevel;
+    cachedQueries: CachedQuery[];
+    expression: string;
+    setExpression: React.Dispatch<React.SetStateAction<string>>;
+    isExpressionNamedQuery: boolean;
+    isExpressionValid: boolean;
+    isSuspended: boolean;
+    gridFilter: import("../../types").GridFilter;
+    isAdaptableReady: boolean;
+    namedQueries: import("../../types").NamedQuery[];
+    onAddCachedQuery: (cachedQuery: CachedQuery) => void;
+    availableColumns: any[];
+    runQuery: (newExpression?: string) => void;
+    clearQuery: () => void;
+    onExpand: () => void;
+    saveQuery: () => void;
+    suspendGridFilter: () => void;
+    unSuspendGridFilter: () => void;
+    setGridFilterExpression: (expression: string) => void;
+    gridFilterAccessLevel: import("../../types").AccessLevel;
+};

package/src/View/GridFilter/useGridFilterExpressionEditor.js

@@ -0,0 +1,123 @@
+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 = useAdaptable();
+    const dispatch = useDispatch();
+    const gridFilter = useSelector((state) => {
+        var _a;
+        return (_a = state.Layout.Layouts.find((l) => l.Name == state.Layout.CurrentLayout)) === null || _a === void 0 ? void 0 : _a.GridFilter;
+    });
+    const [isAdaptableReady, setIsAdaptableReady] = React.useState(false);
+    const [expression, setExpression] = React.useState(() => {
+        return adaptable.api.gridFilterApi.getCurrentGridFilterExpression();
+    });
+    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));
+    };
+    React.useEffect(() => {
+        adaptable.api.eventApi.on('AdaptableReady', () => {
+            setIsAdaptableReady(true);
+        });
+    }, []);
+    React.useEffect(() => {
+        if ((gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression) != expression) {
+            setExpression(gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression);
+        }
+    }, [gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression]);
+    const isExpressionValid = expression == '' ||
+        adaptable.api.internalApi
+            .getQueryLanguageService()
+            .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: () => setExpression(expression + `[${col.columnId}]`),
+        };
+    });
+    const clearQuery = () => {
+        adaptable.api.gridFilterApi.clearGridFilter();
+        setExpression('');
+    };
+    const runQuery = (newExpression = 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, NamedQueryModuleId).isValid) {
+            return;
+        }
+        if (StringExtensions.IsNotNullOrEmpty(expression)) {
+            let cachedQuery = {
+                expression: expression,
+                time: new Date(),
+            };
+            if (cachedQuery) {
+                onAddCachedQuery(cachedQuery);
+            }
+        }
+        adaptable.api.gridFilterApi.setGridFilterExpression(newExpression);
+    };
+    const gridFilterAccessLevel = React.useMemo(() => {
+        return adaptable.api.internalApi
+            .getEntitlementService()
+            .getEntitlementAccessLevelForModule(GridFilterModuleId);
+    }, []);
+    const namedQueryModuleAccessLevel = adaptable.api.internalApi
+        .getEntitlementService()
+        .getEntitlementAccessLevelForModule(NamedQueryModuleId);
+    const onShowNamedQueries = (value, popup) => dispatch(PopupRedux.PopupShowScreen(NamedQueryModuleId, popup, {
+        action: 'New',
+        source: 'Other',
+        value,
+    }));
+    const saveQuery = () => {
+        const namedqueryPopuName = adaptable.api.internalApi
+            .getModuleService()
+            .getModuleById(NamedQueryModuleId).moduleInfo.Popup;
+        onShowNamedQueries(expression, namedqueryPopuName);
+    };
+    const suspendGridFilter = () => {
+        adaptable.api.gridFilterApi.suspendGridFilter();
+    };
+    const unSuspendGridFilter = () => {
+        adaptable.api.gridFilterApi.unSuspendGridFilter();
+    };
+    return {
+        namedQueryModuleAccessLevel,
+        cachedQueries,
+        expression,
+        setExpression,
+        isExpressionNamedQuery,
+        isExpressionValid,
+        isSuspended,
+        gridFilter,
+        isAdaptableReady,
+        namedQueries,
+        onAddCachedQuery,
+        availableColumns,
+        runQuery,
+        clearQuery,
+        onExpand: () => adaptable.api.gridFilterApi.openExpressionEditorForGridFilter(expression),
+        saveQuery,
+        suspendGridFilter,
+        unSuspendGridFilter,
+        setGridFilterExpression: (expression) => {
+            adaptable.api.gridFilterApi.setGridFilterExpression(expression);
+        },
+        gridFilterAccessLevel,
+    };
+};

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

@@ -0,0 +1,4 @@
+export declare const useGridFilterOptionsForExpressionEditorProps: () => {
+    showQueryBuilder: boolean;
+    showExpressionEditor: boolean;
+};

package/src/View/GridFilter/useGridFilterOptionsForExpressionEditor.js

@@ -0,0 +1,27 @@
+import { useAdaptable } from '../AdaptableContext';
+export const useGridFilterOptionsForExpressionEditorProps = () => {
+    const adaptable = useAdaptable();
+    const gridfilterOptions = adaptable.api.optionsApi.getGridFilterOptions();
+    switch (gridfilterOptions.availableFilterEditors) {
+        case 'Both':
+            return {
+                showQueryBuilder: true,
+                showExpressionEditor: true,
+            };
+        case 'QueryBuilder':
+            return {
+                showQueryBuilder: true,
+                showExpressionEditor: false,
+            };
+        case 'ExpressionEditor':
+            return {
+                showQueryBuilder: false,
+                showExpressionEditor: true,
+            };
+        default:
+            return {
+                showQueryBuilder: true,
+                showExpressionEditor: true,
+            };
+    }
+};

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,

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

@@ -1,20 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridInfoPopup = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const version_1 = tslib_1.__importDefault(require("../../../../version"));
-const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
-const Tabs_1 = require("../../../components/Tabs");
-const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
-const Helper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/Helper"));
-const AdaptablePopover_1 = require("../../AdaptablePopover");
-const AdaptableObjectCollection_1 = require("../../Components/AdaptableObjectCollection");
-const AdaptableObjectRow_1 = require("../../Components/AdaptableObjectRow");
-const PopupPanel_1 = require("../../Components/Popups/AdaptablePopup/PopupPanel");
-const AdaptableObjectsSummary_1 = require("./AdaptableObjectsSummary");
-const GridInfoPopup = (props) => {
+import * as React from 'react';
+import { Flex } from 'rebass';
+import { version } from '../../../../package.json';
+import Panel from '../../../components/Panel';
+import { Tabs } from '../../../components/Tabs';
+import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
+import Helper from '../../../Utilities/Helpers/Helper';
+import { AdaptablePopover } from '../../AdaptablePopover';
+import { AdaptableObjectCollection } from '../../Components/AdaptableObjectCollection';
+import { AdaptableObjectRow } from '../../Components/AdaptableObjectRow';
+import { PopupPanel } from '../../Components/Popups/AdaptablePopup/PopupPanel';
+import { AdaptableObjectsSummary } from './AdaptableObjectsSummary';
+export const GridInfoPopup = (props) => {
     const CreateGridSummaries = (colItems) => {
         var _a;
         const returnRows = [];
@@ -27,35 +23,37 @@ const GridInfoPopup = (props) => {
         const freeTextColumns = props.api.freeTextColumnApi
             .getFreeTextColumns()
             .map((c) => c.ColumnId);
-        const columnFilterDescription = props.api.filterApi.internalApi.columnFiltersToString(props.api.filterApi.getColumnFilters());
-        const sorts = ArrayExtensions_1.default.IsNotNullOrEmpty(props.api.gridApi.getColumnSorts())
+        const columnFilterDescription = props.api.columnFilterApi.internalApi.columnFiltersToString(props.api.columnFilterApi.getColumnFilters());
+        const gridFilterExpression = props.api.gridFilterApi.getCurrentGridFilterExpression();
+        const sorts = ArrayExtensions.IsNotNullOrEmpty(props.api.gridApi.getColumnSorts())
             ? props.api.gridApi.getColumnSorts().map((gs) => {
                 return props.api.columnApi.getFriendlyNameForColumnId(gs.ColumnId) + ': ' + gs.SortOrder;
             })
             : null;
         const selectedRowInfo = props.api.gridApi.getSelectedRowInfo();
         if ((_a = props.api.optionsApi.getUserInterfaceOptions()) === null || _a === void 0 ? void 0 : _a.showAdapTableVersion) {
-            returnRows.push(createReadOnlyColItem(colItems, 'AdapTable Version', version_1.default));
+            returnRows.push(createReadOnlyColItem(colItems, 'AdapTable Version', version));
         }
-        returnRows.push(createReadOnlyColItem(colItems, 'Sorted Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None'));
+        returnRows.push(createReadOnlyColItem(colItems, 'Sorted Columns', ArrayExtensions.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None'));
         returnRows.push(createReadOnlyColItem(colItems, 'Column Filters', columnFilterDescription));
+        returnRows.push(createReadOnlyColItem(colItems, 'Grid Filter', gridFilterExpression));
         returnRows.push(createReadOnlyColItem(colItems, 'All Rows', props.api.gridApi.getRowCount()));
         returnRows.push(createReadOnlyColItem(colItems, 'Visible Rows', props.api.gridApi.getVisibleRowCount()));
         returnRows.push(createReadOnlyColItem(colItems, 'Selected Rows', selectedRowInfo === null || selectedRowInfo === void 0 ? void 0 : selectedRowInfo.gridRows.length));
         returnRows.push(createReadOnlyColItem(colItems, 'Visible Selected Rows', selectedRowInfo === null || selectedRowInfo === void 0 ? void 0 : selectedRowInfo.gridRows.filter((gr) => { var _a; return ((_a = gr.rowNode) === null || _a === void 0 ? void 0 : _a.displayed) == true; }).length));
         returnRows.push(createReadOnlyColItem(colItems, 'All Columns', props.api.gridApi.getColumnCount()));
         returnRows.push(createReadOnlyColItem(colItems, 'Visible Columns', props.api.gridApi.getVisibleColumnCount()));
-        returnRows.push(createReadOnlyColItem(colItems, 'Calculated Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(calcColumns) ? calcColumns : 'None'));
-        returnRows.push(createReadOnlyColItem(colItems, 'Free Text Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(freeTextColumns) ? freeTextColumns : 'None'));
-        returnRows.push(createReadOnlyColItem(colItems, 'Action Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(actionColumns) ? actionColumns : 'None'));
+        returnRows.push(createReadOnlyColItem(colItems, 'Calculated Columns', ArrayExtensions.IsNotNullOrEmpty(calcColumns) ? calcColumns : 'None'));
+        returnRows.push(createReadOnlyColItem(colItems, 'Free Text Columns', ArrayExtensions.IsNotNullOrEmpty(freeTextColumns) ? freeTextColumns : 'None'));
+        returnRows.push(createReadOnlyColItem(colItems, 'Action Columns', ArrayExtensions.IsNotNullOrEmpty(actionColumns) ? actionColumns : 'None'));
         return returnRows;
     };
     const createReadOnlyColItem = (colItems, item1, item2, item3) => {
-        let rowColItems = Helper_1.default.cloneObject(colItems);
+        let rowColItems = Helper.cloneObject(colItems);
         rowColItems[0].Content = item1;
         rowColItems[1].Content = item2;
         if (item3) {
-            let infoButton = React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: null, bodyText: [item3] });
+            let infoButton = React.createElement(AdaptablePopover, { headerText: null, bodyText: [item3] });
             rowColItems[2].Content = infoButton;
         }
         return rowColItems;
@@ -65,18 +63,17 @@ const GridInfoPopup = (props) => {
         { Content: 'Value', Size: 7 },
     ];
     let gridSummaries = CreateGridSummaries(propValueColItems).map((x, index) => {
-        return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: index, colItems: x });
+        return React.createElement(AdaptableObjectRow, { key: index, colItems: x });
     });
     const baseClassName = 'ab-GridInfo';
-    return (React.createElement(PopupPanel_1.PopupPanel, { className: baseClassName, headerText: 'Grid Info', glyphicon: 'info' },
-        React.createElement(rebass_1.Flex, { flexDirection: "column", flex: 1, height: "100%" },
-            React.createElement(Panel_1.default, { flex: 1 },
-                React.createElement(Tabs_1.Tabs, null,
-                    React.createElement(Tabs_1.Tabs.Tab, null, "Info"),
-                    React.createElement(Tabs_1.Tabs.Tab, null, "Objects"),
-                    React.createElement(Tabs_1.Tabs.Content, null,
-                        React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { margin: 2, colItems: propValueColItems, items: gridSummaries })),
-                    React.createElement(Tabs_1.Tabs.Content, null,
-                        React.createElement(AdaptableObjectsSummary_1.AdaptableObjectsSummary, null)))))));
+    return (React.createElement(PopupPanel, { className: baseClassName, headerText: 'Grid Info', glyphicon: 'info' },
+        React.createElement(Flex, { flexDirection: "column", flex: 1, height: "100%" },
+            React.createElement(Panel, { flex: 1 },
+                React.createElement(Tabs, null,
+                    React.createElement(Tabs.Tab, null, "Grid Summary"),
+                    React.createElement(Tabs.Tab, null, "Config"),
+                    React.createElement(Tabs.Content, null,
+                        React.createElement(AdaptableObjectCollection, { margin: 2, colItems: propValueColItems, items: gridSummaries })),
+                    React.createElement(Tabs.Content, null,
+                        React.createElement(AdaptableObjectsSummary, null)))))));
 };
-exports.GridInfoPopup = GridInfoPopup;

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

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./GridInfoPopup"), exports);
+export * from './GridInfoPopup';

package/src/View/KeyHint.js

@@ -1,10 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KeyHint = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const KeyHint = (props) => {
-    return React.createElement(rebass_1.Text, Object.assign({ fontSize: 1, color: "inputcolor" }, props));
+import * as React from 'react';
+import { Text } from 'rebass';
+export const KeyHint = (props) => {
+    return React.createElement(Text, Object.assign({ fontSize: 1, color: "inputcolor" }, props));
 };
-exports.KeyHint = KeyHint;

package/src/View/Layout/EditCurrentLayoutButton.js

@@ -1,15 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EditCurrentLayoutButton = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
-const AdaptableContext_1 = require("../AdaptableContext");
-const EditCurrentLayoutButton = () => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+import * as React from 'react';
+import SimpleButton from '../../components/SimpleButton';
+import { useAdaptable } from '../AdaptableContext';
+export const EditCurrentLayoutButton = () => {
+    const adaptable = useAdaptable();
     const handleClick = React.useCallback(() => {
         adaptable.api.layoutApi.showLayoutEditor();
     }, []);
-    return React.createElement(SimpleButton_1.default, { ml: 1, variant: "text", iconSize: 15, icon: "edit", onClick: handleClick });
+    return React.createElement(SimpleButton, { ml: 1, variant: "text", iconSize: 15, icon: "edit", onClick: handleClick });
 };
-exports.EditCurrentLayoutButton = EditCurrentLayoutButton;

package/src/View/Layout/LayoutCloneButton.js

@@ -1,16 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LayoutCloneButton = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
-const AdaptableContext_1 = require("../AdaptableContext");
-const LayoutCloneButton = ({ data, accessLevel }) => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+import * as React from 'react';
+import SimpleButton from '../../components/SimpleButton';
+import { useAdaptable } from '../AdaptableContext';
+export const LayoutCloneButton = ({ data, accessLevel }) => {
+    const adaptable = useAdaptable();
     const isDisabled = accessLevel === 'ReadOnly';
     const handleClick = React.useCallback(() => {
         adaptable.api.layoutApi.showLayoutEditor(data.Name, 'Clone');
     }, []);
-    return React.createElement(SimpleButton_1.default, { onClick: handleClick, disabled: isDisabled, variant: "text", icon: "clone" });
+    return React.createElement(SimpleButton, { onClick: handleClick, disabled: isDisabled, variant: "text", icon: "clone" });
 };
-exports.LayoutCloneButton = LayoutCloneButton;

package/src/View/Layout/LayoutRadioSelector.js

@@ -1,12 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LayoutRadioSelector = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
-const AdaptableContext_1 = require("../AdaptableContext");
-const LayoutRadioSelector = ({ data }) => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+import * as React from 'react';
+import Radio from '../../components/Radio';
+import { useAdaptable } from '../AdaptableContext';
+export const LayoutRadioSelector = ({ data }) => {
+    const adaptable = useAdaptable();
     const currentLayout = adaptable.api.layoutApi.getCurrentLayout();
     const layouts = adaptable.api.layoutApi.getLayouts();
     const isDisabled = (layouts === null || layouts === void 0 ? void 0 : layouts.length) === 1;
@@ -14,6 +10,5 @@ const LayoutRadioSelector = ({ data }) => {
     const handleToggle = React.useCallback(() => {
         adaptable.api.layoutApi.setLayout(data.Name);
     }, [isSelected]);
-    return (React.createElement(Radio_1.default, { "data-name": "layout-select-button", "data-value": data.Name, disabled: isDisabled, checked: isSelected, onClick: handleToggle }));
+    return (React.createElement(Radio, { "data-name": "layout-select-button", "data-value": data.Name, disabled: isDisabled, checked: isSelected, onClick: handleToggle }));
 };
-exports.LayoutRadioSelector = LayoutRadioSelector;

package/src/View/Layout/LayoutStatusBarSubPanelPopover.js

@@ -1,17 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LayoutStatusBarSubPanelPopover = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const SelectList_1 = require("../../components/SelectList");
-const AdaptableContext_1 = require("../AdaptableContext");
-const LayoutStatusBarSubPanelPopover = () => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+import * as React from 'react';
+import { SelectList } from '../../components/SelectList';
+import { useAdaptable } from '../AdaptableContext';
+export const LayoutStatusBarSubPanelPopover = () => {
+    const adaptable = useAdaptable();
     const layouts = adaptable.api.layoutApi.getLayouts();
     const options = layouts.map((layout) => ({ label: layout.Name, value: layout.Uuid }));
     const handleChange = (option) => {
         adaptable.api.layoutApi.setLayout(option.label);
     };
-    return React.createElement(SelectList_1.SelectList, { options: options, onChange: handleChange });
+    return React.createElement(SelectList, { options: options, onChange: handleChange });
 };
-exports.LayoutStatusBarSubPanelPopover = LayoutStatusBarSubPanelPopover;

package/src/View/Layout/LayoutViewPanel.d.ts

@@ -15,5 +15,5 @@ declare class LayoutViewPanelComponent extends React.Component<LayoutViewPanelCo
     render(): any;
     private onSaveLayout;
 }
-export declare let LayoutViewPanelControl: import("react-redux").ConnectedComponent<typeof LayoutViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<LayoutViewPanelComponent> & LayoutViewPanelComponentProps, "api" | "accessLevel" | "moduleInfo" | "Layouts" | "viewType" | "onSelectLayout" | "onSaveLayout" | "CurrentDraftLayout" | "CanSave" | "CurrentLayoutName"> & LayoutViewPanelComponentProps>;
+export declare let LayoutViewPanelControl: import("react-redux").ConnectedComponent<typeof LayoutViewPanelComponent, import("react-redux").Omit<JSX.LibraryManagedAttributes<C, import("react-redux").GetProps<C>>, keyof LayoutViewPanelComponentProps> & LayoutViewPanelComponentProps>;
 export {};