@adaptabletools/adaptable 12.1.7 → 12.2.0-canary.0

package/src/View/Components/Popups/AdaptablePopup/Navigation.js

@@ -35,7 +35,7 @@ const Navigation = (props) => {
     useGlobalEvent_1.useGlobalEvent('keydown', handleKeyPress);
     return (React.createElement("nav", { className: "ab-Adaptable-Popup__Navigation" },
         React.createElement("ul", { className: "ab-Adaptable-Popup__Navigation__List" }, props.menuItems.map((menuItem, index) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             const baseClassName = 'ab-Adaptable-Popup__Navigation__List__Item';
             if (menuItem === '-') {
                 return React.createElement("li", { key: `separator-${index}`, className: `${baseClassName}__Separator` });
@@ -46,7 +46,7 @@ const Navigation = (props) => {
             return (React.createElement("li", { className: className, key: menuItem.label },
                 React.createElement("button", { type: "button", className: `${baseClassName}__Button`, onClick: () => {
                         dispatch(menuItem.reduxAction);
-                    } },
+                    }, "data-name": (_e = menuItem.module) !== null && _e !== void 0 ? _e : menuItem.label },
                     menuItem.icon && (React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: menuItem.icon, iconClassName: `${baseClassName}__Icon` })),
                     customIcon && React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: customIcon }),
                     menuItem.label)));

package/src/View/Components/Popups/AdaptablePopup/PopupPanel.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 export interface PanelWithButtonProps {
     buttonClick?: () => void;
+    className?: string;
     button?: React.ReactElement<any>;
     headerText: string;
     glyphicon?: string;

package/src/View/Components/Popups/AdaptablePopup/PopupPanel.js

@@ -4,11 +4,12 @@ exports.PopupPanel = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
+const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
 const ButtonInfo_1 = require("../../Buttons/ButtonInfo");
 const Noop = () => React.createElement(React.Fragment, null);
 const PopupPanel = (props) => {
     const baseClassName = 'ab-Adaptable-Popup__Panel';
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", flex: "1 1 0", className: baseClassName, width: "100%" },
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column", flex: "1 1 0", className: join_1.default(props.className, baseClassName) },
         React.createElement("div", { className: `${baseClassName}__Header` },
             React.createElement(rebass_1.Flex, { alignItems: "center" },
                 React.createElement(rebass_1.Box, { marginRight: 0, "data-name": "space-before" }),

package/src/View/Components/Popups/AdaptableToaster.js

@@ -11,19 +11,14 @@ const showToast = (props) => {
     // leak where the api is still kept around in memory by the toaster
     let api = props.api;
     const off = api.eventApi.on('AdaptableDestroy', () => {
-        Toastify_1.toast.dismiss(toastId);
+        Toastify_1.toast.dismiss();
         api = null;
     });
     const adaptableOptions = props.api.internalApi.getAdaptableOptions();
     const toastProps = ObjectFactory_1.default.CreateToastOptions(adaptableOptions.notificationsOptions, {
         containerId: adaptableOptions.adaptableId,
         onClose: () => {
-            if (api) {
-                off();
-                if (!api.isDestroyed()) {
-                    api.internalApi.hidePopupAlert();
-                }
-            }
+            off();
         },
     });
     const content = (React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, adaptableAlert: props.adaptableAlert, onClose: () => {

package/src/View/Components/Popups/WindowPopups/windowFactory.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
 import { WindowPopupChildProps } from './WindowPopups';
-export declare const WINDOW_LAYOUT_EDITOR = "WINDOW_LAYOUT_EDITOR";
 export declare const WINDOW_QUERY_EDITOR = "WINDOW_QUERY_EDITOR";
 export declare const windowFactory: Record<string, React.FunctionComponent<WindowPopupChildProps>>;

package/src/View/Components/Popups/WindowPopups/windowFactory.js

@@ -1,11 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.windowFactory = exports.WINDOW_QUERY_EDITOR = exports.WINDOW_LAYOUT_EDITOR = void 0;
-const LayoutEditorStandalonePopup_1 = require("../../../Layout/LayoutEditorStandalonePopup");
+exports.windowFactory = exports.WINDOW_QUERY_EDITOR = void 0;
 const ExpandedQueryPopup_1 = require("../../../Query/ExpandedQueryPopup");
-exports.WINDOW_LAYOUT_EDITOR = 'WINDOW_LAYOUT_EDITOR';
 exports.WINDOW_QUERY_EDITOR = 'WINDOW_QUERY_EDITOR';
 exports.windowFactory = {
-    [exports.WINDOW_LAYOUT_EDITOR]: LayoutEditorStandalonePopup_1.LayoutEditorStandalonePopup,
     [exports.WINDOW_QUERY_EDITOR]: ExpandedQueryPopup_1.ExpandedQueryPopup,
 };

package/src/View/Components/ValueSelector/index.js

@@ -42,6 +42,7 @@ function ValueSelector(props) {
     var _a;
     const { options, value, filter, onChange, allowReorder, singleSelect, toLabel, toListLabel, toIdentifier, noSelectionLabel, clearSelectionLabel, showSelectedOnlyLabel, showFilterInput, xSelectedLabel, selectionBoxPosition = 'bottom', onShowSelectedOnlyChange, isOptionDisabled, disabled, } = props;
     const [searchInputValue, setSearchInputValue] = React.useState('');
+    const baseClassName = 'ab-ValueSelector';
     const preparedToLabel = toListLabel !== null && toListLabel !== void 0 ? toListLabel : toLabel;
     const [selectedOnly, doSetSelectedOnly] = react_1.useState(false);
     const setSelectedOnly = react_1.useCallback((selectedOnly) => {
@@ -65,7 +66,7 @@ function ValueSelector(props) {
         const label = !allowReorder ? preparedToLabel(option) : null;
         const reorderable = typeof allowReorder === 'function' ? allowReorder(option) : allowReorder;
         const renderNode = (props, dragHandleProps) => {
-            return (React.createElement(rebass_1.Flex, Object.assign({ alignItems: "center", mt: index ? 1 : 0, key: identifier, backgroundColor: 'primary', padding: 2, "data-index": index, "data-id": identifier, "data-name": "option" }, props, { style: Object.assign({ borderRadius: 'var(--ab__border-radius)' }, props === null || props === void 0 ? void 0 : props.style) }),
+            return (React.createElement(rebass_1.Flex, Object.assign({ className: `${baseClassName}__option`, alignItems: "center", mt: index ? 1 : 0, key: identifier, backgroundColor: 'primary', padding: 2, "data-index": index, "data-id": identifier, "data-name": "option" }, props),
                 React.createElement(rebass_1.Flex, { flex: 1, flexDirection: "row", alignItems: "center" },
                     reorderable ? (React.createElement(rebass_1.Box, Object.assign({ mr: 3 }, dragHandleProps),
                         React.createElement(icons_1.Icon, { name: "drag", style: { cursor: 'grab' } }))) : null,
@@ -94,7 +95,7 @@ function ValueSelector(props) {
         }));
     };
     const renderSelectionSection = () => {
-        const selectionBox = (React.createElement(rebass_1.Box, { fontSize: 2, style: { whiteSpace: 'nowrap', flex: 'none' } }, !value.length ? (React.createElement(React.Fragment, null, noSelectionLabel !== null && noSelectionLabel !== void 0 ? noSelectionLabel : 'No selected options',
+        const selectionBox = (React.createElement(rebass_1.Box, { fontSize: 2 }, !value.length ? (React.createElement(React.Fragment, null, noSelectionLabel !== null && noSelectionLabel !== void 0 ? noSelectionLabel : 'No selected options',
             !singleSelect ? (React.createElement(SimpleButton_1.default, { px: 1, disabled: disabled, variant: "text", style: { textDecoration: 'underline', display: 'inline-block' }, onClick: () => {
                     options.forEach((option) => {
                         selectedMap.set(toIdentifier(option), option);
@@ -108,15 +109,13 @@ function ValueSelector(props) {
             xSelectedLabel
                 ? xSelectedLabel(value.length)
                 : `Your selected ${value.length} ${value.length > 1 ? 'options' : 'option'}.`))));
-        return (React.createElement(rebass_1.Box, { mt: selectionBoxPosition === 'bottom' ? 3 : 0, mb: selectionBoxPosition === 'top' ? 3 : 0 },
+        return (React.createElement(rebass_1.Box, { className: `${baseClassName}__header`, mt: selectionBoxPosition === 'bottom' ? 3 : 0, mb: selectionBoxPosition === 'top' ? 3 : 0 },
             selectionBox,
             React.createElement(ValueOptionsTags, { options: options, value: value, selectedMap: selectedMap, toLabel: toLabel, toIdentifier: toIdentifier, onClearOption: notifyChange, readOnly: disabled })));
     };
     const showOnlySelectedCheckbox = (React.createElement(CheckBox_1.CheckBox, { disabled: !value.length, checked: selectedOnly, onChange: setSelectedOnly }, showSelectedOnlyLabel !== null && showSelectedOnlyLabel !== void 0 ? showSelectedOnlyLabel : 'Show Selected Only'));
     const showSelectedOnlyPosition = (_a = props.showSelectedOnlyPosition) !== null && _a !== void 0 ? _a : 'floating';
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", flex: 1, className: "ab-ValueSelector", style: {
-            overflow: 'hidden',
-        } },
+    return (React.createElement(rebass_1.Flex, { className: baseClassName, flexDirection: "column", flex: 1 },
         React.createElement(rebass_1.Flex, { mb: 1 },
             showFilterInput && filter ? (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", style: { flex: 1, border: 0, margin: 3 } })) : (React.createElement(rebass_1.Box, { flex: 1 })),
             showSelectedOnlyPosition === 'top' && React.createElement(rebass_1.Box, { ml: 20 }, showOnlySelectedCheckbox)),
@@ -144,19 +143,9 @@ function ValueSelector(props) {
                 });
                 notifyChange();
             } },
-            React.createElement(rebass_1.Flex, { flexDirection: "column", flex: 1, style: { overflow: 'auto' } },
-                showSelectedOnlyPosition === 'floating' && (React.createElement(rebass_1.Box, { style: {
-                        position: 'sticky',
-                        top: 0,
-                        zIndex: 10000,
-                    } },
-                    React.createElement(rebass_1.Box, { mr: 1, mt: 1, px: 2, "data-name": "show-selected-only", style: {
-                            position: 'absolute',
-                            top: 0,
-                            right: 0,
-                            borderRadius: 'var(--ab__border-radius)',
-                            overflow: 'hidden',
-                        }, fontSize: 2, backgroundColor: "defaultbackground" }, showOnlySelectedCheckbox))),
+            React.createElement(rebass_1.Flex, { className: `${baseClassName}__body`, flexDirection: "column", flex: 1, style: { overflow: 'auto' } },
+                showSelectedOnlyPosition === 'floating' && (React.createElement(rebass_1.Box, { className: `${baseClassName}__show-selected-only-checkbox` },
+                    React.createElement(rebass_1.Box, { className: `${baseClassName}__show-selected-only-checkbox__text`, "data-name": "show-selected-only", backgroundColor: "defaultbackground" }, showOnlySelectedCheckbox))),
                 React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, (droppableProvided) => {
                     return (React.createElement("div", Object.assign({ ref: droppableProvided.innerRef }, droppableProvided.droppableProps),
                         options

package/src/View/CustomSort/CustomSortSummary.js

@@ -53,7 +53,7 @@ class CustomSortSummaryComponent extends React.Component {
         else {
             customSortRow = (React.createElement(ModuleDetail_1.ModuleDetail, { key: this.props.moduleInfo.FriendlyName, item1: React.createElement(ModuleProfile_1.ModuleProfile, { moduleInfo: this.props.moduleInfo }), item2: this.getCustomSortedValues(customSort), configEnity: customSort, moduleInfo: this.props.moduleInfo, onEdit: () => this.onEdit(customSort), showEdit: customSort != undefined, onShare: (config) => this.props.onShare(customSort, config), showShare: this.props.teamSharingActivated, onDelete: CustomSortRedux.CustomSortDelete(customSort), showBold: true, accessLevel: this.props.accessLevel }));
         }
-        return (React.createElement("div", null,
+        return (React.createElement(React.Fragment, null,
             customSortRow,
             this.state.editedAdaptableObject && (React.createElement(CustomSortWizard_1.CustomSortWizard, { isNew: this.state.wizardStatus === EditableConfigEntityState_1.WizardStatus.New, moduleInfo: this.props.moduleInfo, data: this.state.editedAdaptableObject, configEntities: this.props.CustomSorts, onCloseWizard: () => this.onCloseWizard(), onFinishWizard: this.onFinishWizard }))));
     }

package/src/View/Dashboard/DashboardPopup.js

@@ -72,18 +72,19 @@ class DashboardPopupComponent extends React.Component {
         };
         return (React.createElement(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
             React.createElement(rebass_1.Flex, { flex: 1, height: "100%", flexDirection: "column" },
-                areDashboardSettingsVisible && (React.createElement(Panel_1.default, { header: 'Dashboard Views', style: { height: 'auto', overflow: 'visible' }, variant: "default", borderRadius: "none", marginLeft: 2, marginRight: 2 },
-                    React.createElement(rebass_1.Flex, null,
-                        React.createElement(CheckBox_1.CheckBox, { mr: 3, className: `${baseClassName}__Checkbox__collapsed-check`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse"),
-                        ' ',
-                        this.props.api.internalApi.getAdaptableOptions().dashboardOptions.canFloat && (React.createElement(CheckBox_1.CheckBox, { mr: 3, className: `${baseClassName}__Checkbox__collapsed-check`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
-                        ' ',
-                        React.createElement(CheckBox_1.CheckBox, { className: `${baseClassName}__Checkbox__hidden-check`, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden")))),
-                React.createElement(Panel_1.default, { header: 'Dashboard Contents', style: { borderBottom: '1px solid var(--ab-color-primary)' }, variant: "default", borderRadius: "none", marginTop: 4, marginLeft: 2, marginRight: 2 },
-                    React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, "data-name": "dashboard-configuration-select" },
+                areDashboardSettingsVisible && (React.createElement(Panel_1.default, { header: 'Dashboard Views', style: { height: 'auto', overflow: 'visible' }, variant: "default", borderRadius: "none" },
+                    React.createElement(CheckBox_1.CheckBox, { mr: 3, "data-name": "collapse", className: `${baseClassName}__settings-option`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse"),
+                    ' ',
+                    this.props.api.internalApi.getAdaptableOptions().dashboardOptions.canFloat && (React.createElement(CheckBox_1.CheckBox, { mr: 3, "data-name": "floating", className: `${baseClassName}__settings-option`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
+                    ' ',
+                    React.createElement(CheckBox_1.CheckBox, { "data-name": "hidden", className: `${baseClassName}__settings-option`, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden"))),
+                React.createElement(Panel_1.default, { header: 'Dashboard Contents', style: { borderBottom: '1px solid var(--ab-color-primary)' }, variant: "default", borderRadius: "none", marginTop: 4 },
+                    React.createElement(rebass_1.Flex, { className: `${baseClassName}__contents-selector`, flexDirection: "row", padding: 2 },
                         React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Toolbars, checked: this.state.DashboardConfigView == DashboardConfigView.Toolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Toolbars"),
                         React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Buttons, checked: this.state.DashboardConfigView == DashboardConfigView.Buttons, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Buttons")),
-                    React.createElement(rebass_1.Box, { className: `${baseClassName}__Module-Selector`, style: { minHeight: 0, flex: '1 1 0' }, padding: 2 },
+                    React.createElement(rebass_1.Box, { className: `${baseClassName}__Module-Selector`, "data-name": this.state.DashboardConfigView === DashboardConfigView.Toolbars
+                            ? 'toolbars'
+                            : 'buttons', style: { minHeight: 0, flex: '1 1 0' }, padding: 2 },
                         this.state.DashboardConfigView == DashboardConfigView.Toolbars && (React.createElement(DashboardManager_1.default, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
                         this.state.DashboardConfigView == DashboardConfigView.Buttons && (React.createElement(ModuleValueSelector_1.ModuleValueSelector, { disabled: isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', isOptionDisabled: isModuleCheckboxDisabled, xSelectedLabel: () => `Visible Module Buttons:`, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) })))))));
     }

package/src/View/Export/ExportViewPanel.d.ts

@@ -13,7 +13,6 @@ export interface ExportViewPanelComponentProps extends ViewPanelProps {
     onEditReport: (popup: string) => PopupRedux.PopupShowScreenAction;
     onNewReportSchedule: (reportSchedule: ReportSchedule) => PopupRedux.PopupShowScreenAction;
     Columns: AdaptableColumn[];
-    Reports: Report[] | undefined;
     CurrentReport: string | undefined;
     CurrentDestination: ExportDestination | string | undefined;
 }
@@ -25,5 +24,5 @@ declare class ExportViewPanelComponent extends React.Component<ExportViewPanelCo
     private isCustomDestination;
     private onNewReportSchedule;
 }
-export declare let ExportViewPanelControl: import("react-redux").ConnectedComponent<typeof ExportViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<ExportViewPanelComponent> & ExportViewPanelComponentProps, "api" | "accessLevel" | "CurrentReport" | "moduleInfo" | "Columns" | "viewType" | "onApplyExport" | "onSelectReport" | "onSelectDestination" | "onNewReport" | "onEditReport" | "onNewReportSchedule" | "Reports" | "CurrentDestination">>;
+export declare let ExportViewPanelControl: import("react-redux").ConnectedComponent<typeof ExportViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<ExportViewPanelComponent> & ExportViewPanelComponentProps, "api" | "accessLevel" | "CurrentReport" | "moduleInfo" | "Columns" | "viewType" | "onApplyExport" | "onSelectReport" | "onSelectDestination" | "onNewReport" | "onEditReport" | "onNewReportSchedule" | "CurrentDestination">>;
 export {};

package/src/View/Export/ExportViewPanel.js

@@ -78,12 +78,12 @@ class ExportViewPanelComponent extends React.Component {
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(rebass_1.Flex, { style: { gap: 5 }, flexDirection: "row", className: `ab-${elementType}__Export__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             React.createElement(rebass_1.Flex, { flex: 1 },
-                React.createElement(DropdownButton_1.default, { disabled: allReportNames.length == 0, style: { width: '100%', fontSize: 'small' }, items: reportItems, columns: ['label'], className: `ab-${elementType}__Export__select`, onClear: () => this.onSelectedReportChanged(null), showClearButton: !!currentReport, variant: "outlined", marginRight: 2 }, currentReportId)),
+                React.createElement(DropdownButton_1.default, { disabled: allReportNames.length == 0, width: "100%", fontSize: "small", items: reportItems, columns: ['label'], className: `ab-${elementType}__Export__select`, onClear: () => this.onSelectedReportChanged(null), showClearButton: !!currentReport, variant: "outlined", marginRight: 2 }, currentReportId)),
             React.createElement(rebass_1.Flex, { flex: 1 },
-                React.createElement(DropdownButton_1.default, { disabled: currentReportId === constants_1.SELECT_REPORT_STRING, style: { width: '100%', fontSize: 'small' }, items: destinationItems, columns: ['label'], className: `ab-${elementType}__Export__export`, onClear: () => this.onSelectedDestinationChanged(null), showClearButton: !!currentDestination, variant: "outlined", marginRight: 2 }, currentDestinationId)),
+                React.createElement(DropdownButton_1.default, { disabled: currentReportId === constants_1.SELECT_REPORT_STRING, width: "100%", fontSize: "small", items: destinationItems, columns: ['label'], className: `ab-${elementType}__Export__export`, onClear: () => this.onSelectedDestinationChanged(null), showClearButton: !!currentDestination, variant: "outlined", marginRight: 2 }, currentDestinationId)),
             React.createElement(rebass_1.Flex, { className: join_1.default(accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Export__controls`), style: { width: '100%' } },
                 React.createElement(ButtonExport_1.ButtonExport, { onClick: () => onApplyExport(), tooltip: "Export Report", className: `ab-${elementType}__Export__export`, disabled: currentReport == null || currentDestination == null }),
-                React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => this.props.onEditReport(this.props.moduleInfo.Popup), tooltip: "Edit Report", className: `ab-${elementType}__Export__edit`, disabled: currentReport == null || currentReport.ReportColumnScope == 'CustomColumns', accessLevel: accessLevel }),
+                React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => this.props.onEditReport(this.props.moduleInfo.Popup), tooltip: "Edit Report", className: `ab-${elementType}__Export__edit`, disabled: currentReport == null || this.props.api.exportApi.isCustomReport(currentReport), accessLevel: accessLevel }),
                 React.createElement(ButtonNew_1.ButtonNew, { variant: "text", className: `ab-${elementType}__Export__new`, tone: "neutral", children: null, onClick: () => this.props.onNewReport(this.props.moduleInfo.Popup), tooltip: "Create New Report", accessLevel: accessLevel }),
                 React.createElement(ButtonDelete_1.ButtonDelete, { tooltip: "Delete Report", className: `ab-${elementType}__Export__delete`, disabled: currentReport == null, ConfirmAction: ExportRedux.ReportDelete(currentReport), ConfirmationMsg: deleteMessage, ConfirmationTitle: 'Delete Report', accessLevel: accessLevel }),
                 this.props.api.internalApi
@@ -97,10 +97,7 @@ class ExportViewPanelComponent extends React.Component {
         this.props.onSelectDestination(destination);
     }
     getAllReportNames() {
-        return [
-            ...this.props.api.exportApi.getAvailableSystemReports(),
-            ...this.props.Reports.map((r) => r.Name),
-        ];
+        return [...this.props.api.exportApi.getAllReports().map((r) => r.Name)];
     }
     isCustomDestination(destination) {
         var _a;
@@ -116,7 +113,6 @@ function mapStateToProps(state) {
     return {
         CurrentReport: state.Export.CurrentReport,
         CurrentDestination: state.Export.CurrentDestination,
-        Reports: state.Export.Reports,
     };
 }
 function mapDispatchToProps(dispatch) {

package/src/View/Export/Wizard/ReportColumnTypeWizard.d.ts

@@ -1,7 +1,6 @@
-import { Report } from '../../../PredefinedConfig/ExportState';
+import { Report, ReportColumnScope } from '../../../PredefinedConfig/ExportState';
 import * as React from 'react';
 import { AdaptableWizardStep, AdaptableWizardStepProps } from '../../Wizard/Interface/IAdaptableWizard';
-import { ReportColumnScope } from '../../../PredefinedConfig/Common/Enums';
 export interface ReportColumnTypeWizardProps extends AdaptableWizardStepProps<Report> {
 }
 export interface ReportColumnsWizardState {

package/src/View/Export/Wizard/ReportColumnTypeWizard.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReportColumnTypeWizard = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const Enums_1 = require("../../../PredefinedConfig/Common/Enums");
 const WizardPanel_1 = tslib_1.__importDefault(require("../../../components/WizardPanel"));
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const rebass_1 = require("rebass");
@@ -20,52 +19,52 @@ class ReportColumnTypeWizard extends React.Component {
             React.createElement(WizardPanel_1.default, null,
                 React.createElement(rebass_1.Flex, { flexDirection: "column", padding: 2 },
                     React.createElement(HelpBlock_1.default, { marginBottom: 1 }, "All columns in the datasource will be included in the Report, whether visible or not at time of export"),
-                    React.createElement(Radio_1.default, { value: "All", checked: this.state.ReportColumnScope == Enums_1.ReportColumnScope.AllColumns, onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "All Columns"),
+                    React.createElement(Radio_1.default, { value: "All", checked: this.state.ReportColumnScope == 'AllColumns', onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "All Columns"),
                     ' ',
                     React.createElement(HelpBlock_1.default, { marginBottom: 1 }, "Only columns that are visible at the time the Report is exported will be included"),
-                    React.createElement(Radio_1.default, { value: "Visible", checked: this.state.ReportColumnScope == Enums_1.ReportColumnScope.VisibleColumns, onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "Visible Columns Only"),
+                    React.createElement(Radio_1.default, { value: "Visible", checked: this.state.ReportColumnScope == 'VisibleColumns', onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "Visible Columns Only"),
                     ' ',
                     React.createElement(HelpBlock_1.default, { marginBottom: 1 }, "Only selected columns (which you will choose in the next step) will be exported - whether visible or not"),
-                    React.createElement(Radio_1.default, { value: "Bespoke", marginRight: 3, checked: this.state.ReportColumnScope == Enums_1.ReportColumnScope.ScopeColumns, onChange: (_, e) => this.onScopeSelectChanged(e) }, "Bespoke Columns"),
+                    React.createElement(Radio_1.default, { value: "Bespoke", marginRight: 3, checked: this.state.ReportColumnScope == 'ScopeColumns', onChange: (_, e) => this.onScopeSelectChanged(e) }, "Bespoke Columns"),
                     ' '))));
     }
     onScopeSelectChanged(event) {
         let e = event.target;
         if (e.value == 'All') {
             this.setState({
-                ReportColumnScope: Enums_1.ReportColumnScope.AllColumns,
+                ReportColumnScope: 'AllColumns',
                 SelectedColumnValues: [],
             }, () => this.props.updateGoBackState());
         }
         else if (e.value == 'Visible') {
             this.setState({
-                ReportColumnScope: Enums_1.ReportColumnScope.VisibleColumns,
+                ReportColumnScope: 'VisibleColumns',
                 SelectedColumnValues: [],
             }, () => this.props.updateGoBackState());
         }
         else {
             this.setState({
-                ReportColumnScope: Enums_1.ReportColumnScope.ScopeColumns,
+                ReportColumnScope: 'ScopeColumns',
             }, () => this.props.updateGoBackState());
         }
     }
     canNext() {
-        return (this.state.ReportColumnScope == Enums_1.ReportColumnScope.AllColumns ||
-            this.state.ReportColumnScope == Enums_1.ReportColumnScope.VisibleColumns ||
-            this.state.ReportColumnScope == Enums_1.ReportColumnScope.ScopeColumns);
+        return (this.state.ReportColumnScope == 'AllColumns' ||
+            this.state.ReportColumnScope == 'VisibleColumns' ||
+            this.state.ReportColumnScope == 'ScopeColumns');
     }
     canBack() {
         return true;
     }
     next() {
         this.props.data.ReportColumnScope = this.state.ReportColumnScope;
-        if (this.state.ReportColumnScope != Enums_1.ReportColumnScope.ScopeColumns) {
+        if (this.state.ReportColumnScope != 'ScopeColumns') {
             this.props.data.Scope = undefined;
         }
     }
     back() { }
     getIndexStepIncrement() {
-        return this.state.ReportColumnScope == Enums_1.ReportColumnScope.ScopeColumns ? 1 : 2;
+        return this.state.ReportColumnScope == 'ScopeColumns' ? 1 : 2;
     }
     getIndexStepDecrement() {
         return 1;

package/src/View/Export/Wizard/ReportRowTypeWizard.d.ts

@@ -1,7 +1,6 @@
-import { Report } from '../../../PredefinedConfig/ExportState';
+import { Report, ReportRowScope } from '../../../PredefinedConfig/ExportState';
 import * as React from 'react';
 import { AdaptableWizardStep, AdaptableWizardStepProps } from '../../Wizard/Interface/IAdaptableWizard';
-import { ReportRowScope } from '../../../PredefinedConfig/Common/Enums';
 export interface ReportRowTypeWizardProps extends AdaptableWizardStepProps<Report> {
 }
 export interface ReportRowsWizardState {

package/src/View/Export/Wizard/ReportRowTypeWizard.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReportRowTypeWizard = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const Enums_1 = require("../../../PredefinedConfig/Common/Enums");
 const WizardPanel_1 = tslib_1.__importDefault(require("../../../components/WizardPanel"));
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const rebass_1 = require("rebass");
@@ -20,55 +19,55 @@ class ReportRowTypeWizard extends React.Component {
             React.createElement(WizardPanel_1.default, null,
                 React.createElement(rebass_1.Flex, { flexDirection: "column", padding: 2 },
                     React.createElement(HelpBlock_1.default, { marginBottom: 1 }, "All rows in the datasource will be included in the report, whether visible or not at time of export."),
-                    React.createElement(Radio_1.default, { value: "All", checked: this.state.ReportRowScope == Enums_1.ReportRowScope.AllRows, onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "All Rows"),
+                    React.createElement(Radio_1.default, { value: "All", checked: this.state.ReportRowScope == 'AllRows', onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "All Rows"),
                     ' ',
                     React.createElement(HelpBlock_1.default, { marginBottom: 1 }, "Only rows that are visible at the time the Report is exported will be included in the Export"),
-                    React.createElement(Radio_1.default, { value: "Visible", checked: this.state.ReportRowScope == Enums_1.ReportRowScope.VisibleRows, onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "Visible Rows Only"),
+                    React.createElement(Radio_1.default, { value: "Visible", checked: this.state.ReportRowScope == 'VisibleRows', onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "Visible Rows Only"),
                     ' ',
                     React.createElement(HelpBlock_1.default, { marginBottom: 1 }, "Only the rows which match the Query (built in next step) will be exported - whether visible or not."),
-                    React.createElement(Radio_1.default, { value: "Expression", checked: this.state.ReportRowScope == Enums_1.ReportRowScope.ExpressionRows, onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "By Query - built by you in next step"),
+                    React.createElement(Radio_1.default, { value: "Expression", checked: this.state.ReportRowScope == 'ExpressionRows', onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "By Query - built by you in next step"),
                     ' '))));
     }
     onScopeSelectChanged(event) {
         let e = event.target;
         if (e.value == 'All') {
             this.setState({
-                ReportRowScope: Enums_1.ReportRowScope.AllRows,
+                ReportRowScope: 'AllRows',
                 SelectedColumnValues: [],
             }, () => this.props.updateGoBackState());
         }
         else if (e.value == 'Visible') {
             this.setState({
-                ReportRowScope: Enums_1.ReportRowScope.VisibleRows,
+                ReportRowScope: 'VisibleRows',
                 SelectedColumnValues: [],
             }, () => this.props.updateGoBackState());
         }
         else {
             this.setState({
-                ReportRowScope: Enums_1.ReportRowScope.ExpressionRows,
+                ReportRowScope: 'ExpressionRows',
             }, () => this.props.updateGoBackState());
         }
     }
     canNext() {
-        return (this.state.ReportRowScope == Enums_1.ReportRowScope.AllRows ||
-            this.state.ReportRowScope == Enums_1.ReportRowScope.VisibleRows ||
-            this.state.ReportRowScope == Enums_1.ReportRowScope.ExpressionRows);
+        return (this.state.ReportRowScope == 'AllRows' ||
+            this.state.ReportRowScope == 'VisibleRows' ||
+            this.state.ReportRowScope == 'ExpressionRows');
     }
     canBack() {
         return true;
     }
     next() {
         this.props.data.ReportRowScope = this.state.ReportRowScope;
-        if (this.props.data.Query && this.state.ReportRowScope != Enums_1.ReportRowScope.ExpressionRows) {
+        if (this.props.data.Query && this.state.ReportRowScope != 'ExpressionRows') {
             this.props.data.Query = undefined;
         }
     }
     back() { }
     getIndexStepIncrement() {
-        return this.state.ReportRowScope == Enums_1.ReportRowScope.ExpressionRows ? 1 : 2;
+        return this.state.ReportRowScope == 'ExpressionRows' ? 1 : 2;
     }
     getIndexStepDecrement() {
-        return this.props.data.ReportColumnScope == Enums_1.ReportColumnScope.ScopeColumns ? 1 : 2;
+        return this.props.data.ReportColumnScope == 'ScopeColumns' ? 1 : 2;
     }
 }
 exports.ReportRowTypeWizard = ReportRowTypeWizard;

package/src/View/Export/Wizard/ReportRowsWizardSection.js

@@ -19,7 +19,7 @@ const isValidReportRowsQuery = (report) => {
 };
 exports.isValidReportRowsQuery = isValidReportRowsQuery;
 const renderReportRowsSummary = (report) => {
-    var _a;
+    const { api } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     return (React.createElement(rebass_1.Box, { fontSize: 2 },
         report.ReportRowScope === 'AllRows' ? (React.createElement(React.Fragment, null,
             "Include ",
@@ -30,8 +30,9 @@ const renderReportRowsSummary = (report) => {
             React.createElement("b", null, "only visible Rows"),
             " in the Report")) : null,
         report.ReportRowScope === 'ExpressionRows' ? (React.createElement(React.Fragment, null,
-            "Include Rows matching the query: ",
-            React.createElement(Tag_1.Tag, null, (_a = report.Query) === null || _a === void 0 ? void 0 : _a.BooleanExpression))) : null));
+            "Include Rows matching the query:",
+            ' ',
+            React.createElement(Tag_1.Tag, null, api.internalApi.getAdaptableQueryExpressionText(report.Query)))) : null));
 };
 exports.renderReportRowsSummary = renderReportRowsSummary;
 const ReportRowsWizardSection = (props) => {

package/src/View/Export/Wizard/ReportSettingsWizard.js

@@ -9,7 +9,6 @@ const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const rebass_1 = require("rebass");
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
-const Enums_1 = require("../../../PredefinedConfig/Common/Enums");
 class ReportSettingsWizard extends React.Component {
     constructor(props) {
         super(props);
@@ -56,7 +55,7 @@ class ReportSettingsWizard extends React.Component {
         return 1;
     }
     getIndexStepDecrement() {
-        return this.props.data.ReportRowScope == Enums_1.ReportRowScope.ExpressionRows ? 1 : 2;
+        return this.props.data.ReportRowScope == 'ExpressionRows' ? 1 : 2;
     }
 }
 exports.ReportSettingsWizard = ReportSettingsWizard;

package/src/View/Filter/FilterViewPanel.js

@@ -8,23 +8,40 @@ const ActiveFiltersPanel_1 = require("./ActiveFiltersPanel");
 const rebass_1 = require("rebass");
 const ArrayExtensions_1 = require("../../Utilities/Extensions/ArrayExtensions");
 const AdaptablePopover_1 = require("../AdaptablePopover");
+const ButtonClear_1 = require("../Components/Buttons/ButtonClear");
 const CheckBox_1 = require("../../components/CheckBox");
 const react_redux_1 = require("react-redux");
 const LayoutRedux_1 = require("../../Redux/ActionsReducers/LayoutRedux");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
 class FilterViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
     }
     render() {
+        var _a, _b, _c, _d;
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
+        const showClearButton = (_b = (_a = this.props.api.internalApi.getAdaptableOptions()) === null || _a === void 0 ? void 0 : _a.filterOptions) === null || _b === void 0 ? void 0 : _b.showClearFilterButton;
+        const showSuspendFilterButton = (_d = (_c = this.props.api.internalApi.getAdaptableOptions()) === null || _c === void 0 ? void 0 : _c.filterOptions) === null || _d === void 0 ? void 0 : _d.showSuspendFilterButton;
+        const isAtLeastOneFilterActive = this.props.api.filterApi.getActiveColumnFilters().length > 0;
+        const isAtLeastOneFilter = this.props.api.filterApi.getColumnFilters().length > 0;
+        const handleSuspendUnsuspendAll = () => {
+            if (isAtLeastOneFilterActive) {
+                this.props.api.filterApi.suspendAllColumnFilters();
+            }
+            else {
+                this.props.api.filterApi.unSuspendAllColumnFilters();
+            }
+        };
         return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(rebass_1.Flex, null, ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && (React.createElement(AdaptablePopover_1.AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [React.createElement(ActiveFiltersPanel_1.ActiveFiltersPanel, null)], 
-                //  tooltipText={'Show Filter Details'}
-                useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 }))),
+            React.createElement(rebass_1.Flex, null,
+                ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && (React.createElement(AdaptablePopover_1.AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [React.createElement(ActiveFiltersPanel_1.ActiveFiltersPanel, null)], useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })),
+                showClearButton && (React.createElement(ButtonClear_1.ButtonClear, { className: `ab-${elementType}__Filter__clear`, marginLeft: 1, marginBottom: 0, marginRight: 1, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel' }, this.props.viewType === 'ToolPanel' && 'Clear')),
+                showSuspendFilterButton && (React.createElement(SimpleButton_1.default, { className: join_1.default(`ab-${elementType}__Filter__suspend-button`, isAtLeastOneFilterActive && `ab-${elementType}__Filter__suspend-all`, !isAtLeastOneFilterActive && `ab-${elementType}__Filter__un-suspend-all`), disabled: !isAtLeastOneFilter, onClick: handleSuspendUnsuspendAll, tone: isAtLeastOneFilterActive ? 'neutral' : 'success', variant: "text", icon: isAtLeastOneFilterActive ? 'pause' : 'play', accessLevel: this.props.accessLevel }))),
             React.createElement(rebass_1.Flex, { alignItems: "center" }, this.props.api.filterApi.isQuickFilterAvailable() && (React.createElement(CheckBox_1.CheckBox, { className: `ab-${elementType}__Filter__active-check`, disabled: this.props.accessLevel === 'ReadOnly' ||
                     this.props.api.internalApi.isGridInPivotMode(), marginTop: 0, marginBottom: 0, fontSize: 2, padding: 1, checked: this.props.IsQuickFilterVisible, onChange: (checked) => {
                     checked ? this.props.onShowQuickFilterBar() : this.props.onHideQuickFilterBar();
-                } }, "Show Quick Filter")))));
+                } }, "Quick Filter")))));
     }
     onClearFilters() {
         this.props.api.filterApi.clearColumnFilters();

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

@@ -378,7 +378,7 @@ const FormatColumnFormatWizardSection = (props) => {
         update({ DisplayFormat });
     };
     const Type = data.DisplayFormat && data.DisplayFormat.Formatter;
-    const customScopedFormatters = customDisplayFormatters.filter((displayFormatter) => adaptable.api.scopeApi.isScopeInScope(displayFormatter.scope, data.Scope));
+    const customScopedFormatters = customDisplayFormatters.filter((displayFormatter) => adaptable.api.scopeApi.isScopeInScope(data.Scope, displayFormatter.scope));
     if (Type === 'NumberFormatter') {
         return renderNumberFormat(data, update, setFormatOption, customScopedFormatters, formatColumnApi);
     }

package/src/View/GridInfo/AdaptableObjectsSummary.js

@@ -4,13 +4,15 @@ 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 = react_redux_1.useSelector((state) => state);
     const adaptable = AdaptableContext_1.useAdaptable();
     const modules = adaptable.ModuleService.getModuleCollection();
-    return (React.createElement(React.Fragment, null, [...modules].map(([moduleName, module]) => {
+    const baseClassName = 'ab-AdaptableObjectsSummary';
+    return (React.createElement(rebass_1.Box, { className: baseClassName }, [...modules].map(([moduleName, module]) => {
         var _a;
         if (!module.isModuleAvailable()) {
             return null;
@@ -19,8 +21,8 @@ const AdaptableObjectsSummary = () => {
         if (!(items === null || items === void 0 ? void 0 : items.length)) {
             return null;
         }
-        return (React.createElement("div", { key: module.moduleInfo.ModuleName },
-            React.createElement("b", null, module.moduleInfo.FriendlyName),
+        return (React.createElement(rebass_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 === null || items === void 0 ? void 0 : items.length) && React.createElement(AdaptableObjectList_1.AdaptableObjectList, { items: items, module: module })));
     })));
 };

package/src/View/GridInfo/AdaptableOptionsComponent.js

@@ -91,7 +91,7 @@ const OptionContainerComponent = (props) => {
         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: `options-container-${name}`, variant: "default", headerText: label, headerProps: {
+    return (React.createElement(PanelWithButton_1.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.js

@@ -102,17 +102,16 @@ const GridInfoPopup = (props) => {
         return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: index, colItems: x });
     });
     const showRadioButtons = [showGridSummary, showAdaptableOptions, showColumnInfo, showAdaptableObjects].filter((item) => item).length > 1;
-    return (React.createElement(PopupPanel_1.PopupPanel, { headerText: 'Grid Info', glyphicon: 'info' },
-        React.createElement(rebass_1.Flex, { marginBottom: 2, padding: 3 }, showRadioButtons && (React.createElement(React.Fragment, null,
-            showGridSummary && (React.createElement(Radio_1.default, { "data-name": "radioButton-GridSummary", marginRight: 3, value: "GridSummary", checked: state.ActiveTab == 'GridSummary', onChange: (_, e) => onShowGridSummaryChanged('GridSummary') }, "Summary")),
+    const baseClassName = 'ab-GridInfo';
+    return (React.createElement(PopupPanel_1.PopupPanel, { className: baseClassName, headerText: 'Grid Info', glyphicon: 'info' },
+        React.createElement(rebass_1.Flex, { className: `${baseClassName}__header`, marginBottom: 2, padding: 3 }, showRadioButtons && (React.createElement(React.Fragment, null,
+            showGridSummary && (React.createElement(Radio_1.default, { className: `${baseClassName}__option-radio`, "data-name": "radioButton-GridSummary", marginRight: 3, value: "GridSummary", checked: state.ActiveTab == 'GridSummary', onChange: (_, e) => onShowGridSummaryChanged('GridSummary') }, "Summary")),
             showAdaptableOptions && (React.createElement(Radio_1.default, { "data-name": "radioButton-AdaptableOptions", marginRight: 3, value: "AdaptableOptions", checked: state.ActiveTab == 'AdaptableOptions', onChange: (_, e) => onShowGridSummaryChanged('AdaptableOptions') }, "Options")),
             showColumnInfo && (React.createElement(Radio_1.default, { "data-name": "radioButton-Column", marginRight: 3, value: "Column", checked: state.ActiveTab == 'ColumnInfo', onChange: (_, e) => onShowGridSummaryChanged('ColumnInfo') }, "Columns")),
             showAdaptableObjects && (React.createElement(Radio_1.default, { "data-name": "radioButton-Column", value: "Column", checked: state.ActiveTab == 'AdaptableObjectsSummary', onChange: (_, e) => onShowGridSummaryChanged('AdaptableObjectsSummary') }, "Objects"))))),
-        state.ActiveTab == 'GridSummary' && (React.createElement(rebass_1.Box, { margin: 2 },
-            React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { colItems: propValueColItems, items: gridSummaries }))),
+        state.ActiveTab == 'GridSummary' && (React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { margin: 2, colItems: propValueColItems, items: gridSummaries })),
         state.ActiveTab == 'AdaptableOptions' && React.createElement(AdaptableOptionsComponent_1.AdaptableOptionsComponent, { api: props.api }),
-        state.ActiveTab == 'ColumnInfo' && (React.createElement("div", null,
-            React.createElement(ColumnInfoComponent_1.ColumnInfoComponent, { api: props.api, teamSharingActivated: props.teamSharingActivated, column: state.CurrentColumn }))),
+        state.ActiveTab == 'ColumnInfo' && (React.createElement(ColumnInfoComponent_1.ColumnInfoComponent, { api: props.api, teamSharingActivated: props.teamSharingActivated, column: state.CurrentColumn })),
         state.ActiveTab === 'AdaptableObjectsSummary' && React.createElement(AdaptableObjectsSummary_1.AdaptableObjectsSummary, null)));
 };
 exports.GridInfoPopup = GridInfoPopup;