@adaptabletools/adaptable 16.2.4 → 17.0.0-canary.0

package/src/View/Components/Panels/FilterFormPanel.js

@@ -1,41 +1,36 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterFormPanel = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const Enums_1 = require("../../../PredefinedConfig/Common/Enums");
-const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
-const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-class FilterFormPanel extends React.Component {
+import * as React from 'react';
+import { Flex } from 'rebass';
+import { ColumnMenuTab } from '../../../PredefinedConfig/Common/Enums';
+import Panel from '../../../components/Panel';
+import Radio from '../../../components/Radio';
+import SimpleButton from '../../../components/SimpleButton';
+export class FilterFormPanel extends React.Component {
     render() {
-        const header = (React.createElement(rebass_1.Flex, { alignItems: "center", flexDirection: "row", style: { width: '100%' } },
-            this.props.IsAlwaysFilter ? (React.createElement(rebass_1.Flex, { flex: 6, marginRight: 2 }, "Filter")) : (React.createElement(rebass_1.Flex, { flex: 6, flexDirection: "column" },
-                React.createElement(rebass_1.Flex, null,
-                    React.createElement(rebass_1.Flex, { flex: 6 },
-                        React.createElement(Radio_1.default, { value: "Menu", checked: this.props.ColumnMenuTab == Enums_1.ColumnMenuTab.Menu, onChange: () => this.onSelectMenu() }, "Menu")),
-                    React.createElement(rebass_1.Flex, { flex: 6 },
-                        React.createElement(Radio_1.default, { value: "Filter", checked: this.props.ColumnMenuTab == Enums_1.ColumnMenuTab.Filter, onChange: () => this.onSelectFilter() }, "Filter"))))),
+        const header = (React.createElement(Flex, { alignItems: "center", flexDirection: "row", style: { width: '100%' } },
+            this.props.IsAlwaysFilter ? (React.createElement(Flex, { flex: 6, marginRight: 2 }, "Filter")) : (React.createElement(Flex, { flex: 6, flexDirection: "column" },
+                React.createElement(Flex, null,
+                    React.createElement(Flex, { flex: 6 },
+                        React.createElement(Radio, { value: "Menu", checked: this.props.ColumnMenuTab == ColumnMenuTab.Menu, onChange: () => this.onSelectMenu() }, "Menu")),
+                    React.createElement(Flex, { flex: 6 },
+                        React.createElement(Radio, { value: "Filter", checked: this.props.ColumnMenuTab == ColumnMenuTab.Filter, onChange: () => this.onSelectFilter() }, "Filter"))))),
             this.props.clearFilterButton &&
-                this.props.ColumnMenuTab == Enums_1.ColumnMenuTab.Filter &&
+                this.props.ColumnMenuTab == ColumnMenuTab.Filter &&
                 this.props.clearFilterButton,
             this.props.saveButton &&
-                this.props.ColumnMenuTab == Enums_1.ColumnMenuTab.Filter &&
+                this.props.ColumnMenuTab == ColumnMenuTab.Filter &&
                 this.props.saveButton));
-        return (React.createElement(rebass_1.Flex, { flexDirection: "column" },
-            React.createElement(Panel_1.default, { className: "ab-FilterFormPanel", header: header, headerProps: { padding: 1 }, style: Object.assign(Object.assign({}, this.props.style), { flex: 1 }), bodyProps: { padding: 0, style: { maxHeight: '50vh' } }, bodyScroll: true, borderRadius: 0, border: "none" }, this.props.children),
-            this.props.autoApplyFilter ? null : (React.createElement(rebass_1.Flex, { flex: "none", flexDirection: "row", padding: 1, justifyContent: "flex-end" },
-                React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", disabled: this.props.applyFilterButtonDisabled, onClick: () => this.onApplyFilterClicked() }, "Apply Filter")))));
+        return (React.createElement(Flex, { flexDirection: "column" },
+            React.createElement(Panel, { className: "ab-FilterFormPanel", header: header, headerProps: { padding: 1 }, style: Object.assign(Object.assign({}, this.props.style), { flex: 1 }), bodyProps: { padding: 0, style: { maxHeight: '50vh' } }, bodyScroll: true, borderRadius: 0, border: "none" }, this.props.children),
+            this.props.autoApplyFilter ? null : (React.createElement(Flex, { flex: "none", flexDirection: "row", padding: 1, justifyContent: "flex-end" },
+                React.createElement(SimpleButton, { variant: "raised", tone: "accent", disabled: this.props.applyFilterButtonDisabled, onClick: () => this.onApplyFilterClicked() }, "Apply Filter")))));
     }
     onApplyFilterClicked() {
-        this.props.onFilterApplied();
+        this.props.onColumnFilterApplied();
     }
     onSelectMenu() {
-        this.props.ColumnMenuTabChanged(Enums_1.ColumnMenuTab.Menu);
+        this.props.ColumnMenuTabChanged(ColumnMenuTab.Menu);
     }
     onSelectFilter() {
-        this.props.ColumnMenuTabChanged(Enums_1.ColumnMenuTab.Filter);
+        this.props.ColumnMenuTabChanged(ColumnMenuTab.Filter);
     }
 }
-exports.FilterFormPanel = FilterFormPanel;

package/src/View/Components/Panels/PanelDashboard/index.js

@@ -1,16 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PanelDashboard = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const Dashboard_1 = require("../../../../components/Dashboard");
-class PanelDashboard extends React.Component {
+import * as React from 'react';
+import { DashboardToolbar as DashboardToolbarUI } from '../../../../components/Dashboard';
+export class PanelDashboard extends React.Component {
     render() {
         const { headerText, showConfigureButton, showCloseButton, onConfigure, onClose, accessLevel, children, } = this.props;
-        return (React.createElement(Dashboard_1.DashboardToolbar, { title: headerText, onConfigure: onConfigure, showConfigure: showConfigureButton, showClose: showCloseButton, onClose: onClose, accessLevel: accessLevel }, children));
+        return (React.createElement(DashboardToolbarUI, { title: headerText, onConfigure: onConfigure, showConfigure: showConfigureButton, showClose: showCloseButton, onClose: onClose, accessLevel: accessLevel }, children));
     }
 }
-exports.PanelDashboard = PanelDashboard;
 PanelDashboard.defaultProps = {
     showConfigureButton: true,
     showCloseButton: true,

package/src/View/Components/Panels/PanelFooter.js

@@ -1,15 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PanelFooter = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const PanelFooter = (props) => {
+import * as React from 'react';
+import { Flex, Box } from 'rebass';
+import SimpleButton from '../../../components/SimpleButton';
+export const PanelFooter = (props) => {
     var _a, _b;
-    return (React.createElement(rebass_1.Flex, { className: "ab-Panel__Footer", flexDirection: "row", padding: 1, backgroundColor: "primary", alignItems: "center" },
-        React.createElement(SimpleButton_1.default, { margin: 1, variant: "text", "data-name": "action-cancel", onClick: props.onCancel, disabled: props.cancelDisabled }, (_a = props.cancelText) !== null && _a !== void 0 ? _a : 'CANCEL'),
-        React.createElement(rebass_1.Box, { flex: 1 }),
-        React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", "data-name": "action-finish", margin: 1, onClick: props.onAccept, disabled: props.acceptDisabled }, (_b = props.cancelText) !== null && _b !== void 0 ? _b : 'Finish')));
+    return (React.createElement(Flex, { className: "ab-Panel__Footer", flexDirection: "row", padding: 1, backgroundColor: "primary", alignItems: "center" },
+        React.createElement(SimpleButton, { margin: 1, variant: "text", "data-name": "action-cancel", onClick: props.onCancel, disabled: props.cancelDisabled }, (_a = props.cancelText) !== null && _a !== void 0 ? _a : 'CANCEL'),
+        React.createElement(Box, { flex: 1 }),
+        React.createElement(SimpleButton, { variant: "raised", tone: "accent", "data-name": "action-finish", margin: 1, onClick: props.onAccept, disabled: props.acceptDisabled }, (_b = props.cancelText) !== null && _b !== void 0 ? _b : 'Finish')));
 };
-exports.PanelFooter = PanelFooter;

package/src/View/Components/Panels/PanelToolPanel/index.js

@@ -1,27 +1,23 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PanelToolPanel = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const Panel_1 = tslib_1.__importDefault(require("../../../../components/Panel"));
-const ButtonClose_1 = require("../../Buttons/ButtonClose");
-const ButtonConfigure_1 = require("../../Buttons/ButtonConfigure");
-const ButtonMinimise_1 = require("../../Buttons/ButtonMinimise");
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
-const ButtonMaximise_1 = require("../../Buttons/ButtonMaximise");
-class PanelToolPanel extends React.Component {
+import { __rest } from "tslib";
+import * as React from 'react';
+import Panel from '../../../../components/Panel';
+import { ButtonClose } from '../../Buttons/ButtonClose';
+import { ButtonConfigure } from '../../Buttons/ButtonConfigure';
+import { ButtonMinimise } from '../../Buttons/ButtonMinimise';
+import { Flex } from 'rebass';
+import join from '../../../../components/utils/join';
+import { ButtonMaximise } from '../../Buttons/ButtonMaximise';
+export class PanelToolPanel extends React.Component {
     render() {
-        const _a = this.props, { useDefaultPanelStyle, isMinimised, onMinimiseChanged, headerText, onClose, onConfigure } = _a, props = tslib_1.__rest(_a, ["useDefaultPanelStyle", "isMinimised", "onMinimiseChanged", "headerText", "onClose", "onConfigure"]);
+        const _a = this.props, { useDefaultPanelStyle, isMinimised, onMinimiseChanged, headerText, onClose, onConfigure } = _a, props = __rest(_a, ["useDefaultPanelStyle", "isMinimised", "onMinimiseChanged", "headerText", "onClose", "onConfigure"]);
         let header = (React.createElement(React.Fragment, null,
-            !isMinimised ? (React.createElement(ButtonMinimise_1.ButtonMinimise, { className: "ab-ToolPanelPanel__header-minimise", onClick: () => onMinimiseChanged(), marginRight: 1 })) : (React.createElement(ButtonMaximise_1.ButtonMaximise, { className: "ab-ToolPanelPanel__header-maximise", onClick: () => onMinimiseChanged(), marginRight: 1 })),
-            React.createElement(rebass_1.Flex, { className: "ab-ToolPanelPanel__header-text", flex: 1, alignItems: "center", marginLeft: 0 }, headerText),
-            onConfigure && (React.createElement(ButtonConfigure_1.ButtonConfigure, { iconSize: 16, marginLeft: 1, className: "ab-ToolPanelPanel__header-configure-button", tooltip: 'Configure ' + headerText, onClick: () => onConfigure() })),
-            onClose && (React.createElement(ButtonClose_1.ButtonClose, { marginLeft: 0, className: "ab-ToolPanelPanel__header-close-button", tooltip: 'Close ' + headerText, onClick: () => onClose(), disabled: props.disabled }))));
-        return (React.createElement(Panel_1.default, Object.assign({ border: "var(--ab-cmp-toolpanelpanel__border)" }, props, { className: (0, join_1.default)('ab-ToolPanelPanel', props.className), header: header, style: Object.assign({ color: 'var(--ab-cmp-toolpanelpanel__color)', fill: 'var(--ab-cmp-toolpanelpanel__fill)' }, props.style), headerProps: Object.assign(Object.assign({}, props.headerProps), { alignItems: 'stretch', style: Object.assign({ padding: 'var(--ab-cmp-toolpanelpanel_header__padding)', background: 'var(--ab-cmp-toolpanelpanel_header__background)', color: 'var(--ab-cmp-toolpanelpanel_header__color)', fill: 'var(--ab-cmp-toolpanelpanel_header__fill)' }, (props.headerProps ? props.headerProps.style : null)) }), bodyProps: Object.assign(Object.assign({}, props.bodyProps), { style: Object.assign(Object.assign({ padding: 'var(--ab-cmp-dashboardpanel_body__padding)', background: 'var(--ab-cmp-dashboardpanel_body__background)' }, (props.bodyProps ? props.bodyProps.style : null)), { display: 'flex', flexDirection: 'column' }) }) })));
+            !isMinimised ? (React.createElement(ButtonMinimise, { className: "ab-ToolPanelPanel__header-minimise", onClick: () => onMinimiseChanged(), marginRight: 1 })) : (React.createElement(ButtonMaximise, { className: "ab-ToolPanelPanel__header-maximise", onClick: () => onMinimiseChanged(), marginRight: 1 })),
+            React.createElement(Flex, { className: "ab-ToolPanelPanel__header-text", flex: 1, alignItems: "center", marginLeft: 0 }, headerText),
+            onConfigure && (React.createElement(ButtonConfigure, { iconSize: 16, marginLeft: 1, className: "ab-ToolPanelPanel__header-configure-button", tooltip: 'Configure ' + headerText, onClick: () => onConfigure() })),
+            onClose && (React.createElement(ButtonClose, { marginLeft: 0, className: "ab-ToolPanelPanel__header-close-button", tooltip: 'Close ' + headerText, onClick: () => onClose(), disabled: props.disabled }))));
+        return (React.createElement(Panel, Object.assign({ border: "var(--ab-cmp-toolpanelpanel__border)" }, props, { className: join('ab-ToolPanelPanel', props.className), header: header, style: Object.assign({ color: 'var(--ab-cmp-toolpanelpanel__color)', fill: 'var(--ab-cmp-toolpanelpanel__fill)' }, props.style), headerProps: Object.assign(Object.assign({}, props.headerProps), { alignItems: 'stretch', style: Object.assign({ padding: 'var(--ab-cmp-toolpanelpanel_header__padding)', background: 'var(--ab-cmp-toolpanelpanel_header__background)', color: 'var(--ab-cmp-toolpanelpanel_header__color)', fill: 'var(--ab-cmp-toolpanelpanel_header__fill)' }, (props.headerProps ? props.headerProps.style : null)) }), bodyProps: Object.assign(Object.assign({}, props.bodyProps), { style: Object.assign(Object.assign({ padding: 'var(--ab-cmp-dashboardpanel_body__padding)', background: 'var(--ab-cmp-dashboardpanel_body__background)' }, (props.bodyProps ? props.bodyProps.style : null)), { display: 'flex', flexDirection: 'column' }) }) })));
     }
 }
-exports.PanelToolPanel = PanelToolPanel;
 PanelToolPanel.defaultProps = {
     headerText: '',
     onClose: null,

package/src/View/Components/Panels/PanelWithButton.js

@@ -1,32 +1,27 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PanelWithButton = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
-const rebass_1 = require("rebass");
-const icons_1 = require("../../../components/icons");
-const ButtonInfo_1 = require("../Buttons/ButtonInfo");
+import * as React from 'react';
+import SimpleButton from '../../../components/SimpleButton';
+import Panel from '../../../components/Panel';
+import { Flex, Box } from 'rebass';
+import { allIcons } from '../../../components/icons';
+import { ButtonInfo } from '../Buttons/ButtonInfo';
 //We cannot destructure this.props using the react way in typescript which is a real pain as you
 //need to transfer props individually as a consequence
 //let { buttonContent, ...other } = this.props
-class PanelWithButton extends React.Component {
+export class PanelWithButton extends React.Component {
     render() {
         let { buttonContent } = this.props;
-        const IconCmp = icons_1.allIcons[this.props.glyphicon];
-        let header = (React.createElement(rebass_1.Flex, { alignItems: "center", width: "100%" },
-            React.createElement(rebass_1.Flex, { alignItems: "center" },
+        const IconCmp = allIcons[this.props.glyphicon];
+        let header = (React.createElement(Flex, { alignItems: "center", width: "100%" },
+            React.createElement(Flex, { alignItems: "center" },
                 this.props.glyphicon != null && (IconCmp ? React.createElement(IconCmp, null) : null),
-                React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-before" }),
+                React.createElement(Box, { marginRight: 2, "data-name": "space-before" }),
                 this.props.headerText,
-                React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-after" }),
-                this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
+                React.createElement(Box, { marginRight: 2, "data-name": "space-after" }),
+                this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
                     ) }))),
-            React.createElement(rebass_1.Box, { style: { flex: 1 } }),
-            buttonContent ? (React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", disabled: this.props.buttonDisabled, onClick: () => (this.props.buttonClick ? this.props.buttonClick() : null) }, buttonContent)) : null,
+            React.createElement(Box, { style: { flex: 1 } }),
+            buttonContent ? (React.createElement(SimpleButton, { variant: "raised", tone: "accent", disabled: this.props.buttonDisabled, onClick: () => (this.props.buttonClick ? this.props.buttonClick() : null) }, buttonContent)) : null,
             this.props.button ? React.cloneElement(this.props.button) : null));
-        return (React.createElement(Panel_1.default, { flex: 1, className: this.props.className, bodyScroll: this.props.bodyScroll != null ? this.props.bodyScroll : true, bodyProps: this.props.bodyProps, variant: this.props.variant || 'primary', header: header, headerProps: this.props.headerProps, style: this.props.style, borderRadius: (this.props.borderRadius || 'none'), border: (this.props.border || 'none') }, this.props.children));
+        return (React.createElement(Panel, { flex: 1, className: this.props.className, bodyScroll: this.props.bodyScroll != null ? this.props.bodyScroll : true, bodyProps: this.props.bodyProps, variant: this.props.variant || 'primary', header: header, headerProps: this.props.headerProps, style: this.props.style, borderRadius: (this.props.borderRadius || 'none'), border: (this.props.border || 'none') }, this.props.children));
     }
 }
-exports.PanelWithButton = PanelWithButton;

package/src/View/Components/Panels/PanelWithImage.js

@@ -1,38 +1,34 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PanelWithImage = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const styled_components_1 = require("styled-components");
-const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
-const rebass_1 = require("rebass");
-const icons_1 = require("../../../components/icons");
-const ButtonInfo_1 = require("../Buttons/ButtonInfo");
+import * as React from 'react';
+import { withTheme } from 'styled-components';
+import NewPanel from '../../../components/Panel';
+import { Box, Flex } from 'rebass';
+import { allIcons } from '../../../components/icons';
+import { ButtonInfo } from '../Buttons/ButtonInfo';
 //We cannot destructure this.props using the react way in typescript which is a real pain as you
 //need to transfer props individually as a consequence
 //let { buttonContent, ...other } = this.props
 class PanelWithImageCmp extends React.Component {
     render() {
         var _a;
-        const IconCmp = icons_1.allIcons[(this.props.icon || this.props.glyphicon)];
+        const IconCmp = allIcons[(this.props.icon || this.props.glyphicon)];
         const headerStyle = {};
         if (this.props.headerColor) {
             headerStyle.color = this.props.headerColor;
             headerStyle.fill = this.props.headerColor;
         }
-        let headerRow = (React.createElement(rebass_1.Flex, { flex: 1 },
-            React.createElement(rebass_1.Flex, { alignItems: "center" },
-                React.createElement(rebass_1.Flex, { minHeight: 15, alignItems: "center", style: headerStyle },
+        let headerRow = (React.createElement(Flex, { flex: 1 },
+            React.createElement(Flex, { alignItems: "center" },
+                React.createElement(Flex, { minHeight: 15, alignItems: "center", style: headerStyle },
                     IconCmp ? React.createElement(IconCmp, null) : null,
-                    React.createElement(rebass_1.Box, { marginRight: 2 }), (_a = this.props.header) !== null && _a !== void 0 ? _a : '',
-                    React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-after" }),
-                    this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
+                    React.createElement(Box, { marginRight: 2 }), (_a = this.props.header) !== null && _a !== void 0 ? _a : '',
+                    React.createElement(Box, { marginRight: 2, "data-name": "space-after" }),
+                    this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
                         ) }))),
-                React.createElement(rebass_1.Box, { flex: 1 }),
+                React.createElement(Box, { flex: 1 }),
                 this.props.button && React.cloneElement(this.props.button))));
-        return (React.createElement(Panel_1.default, { flex: this.props.flex, header: headerRow, variant: this.props.variant, style: this.props.style, bodyScroll: this.props.bodyScroll !== undefined ? this.props.bodyScroll : true, border: "none", borderRadius: this.props.borderRadius || 'none', bodyProps: Object.assign({ padding: 0 }, this.props.bodyProps) }, this.props.children));
+        return (React.createElement(NewPanel, { flex: this.props.flex, header: headerRow, variant: this.props.variant, style: this.props.style, bodyScroll: this.props.bodyScroll !== undefined ? this.props.bodyScroll : true, border: "none", borderRadius: this.props.borderRadius || 'none', bodyProps: Object.assign({ padding: 0 }, this.props.bodyProps) }, this.props.children));
     }
 }
 // apparently it's very hard to type `withTheme()` result in typescript
 // @ts-ignore
-exports.PanelWithImage = (0, styled_components_1.withTheme)(PanelWithImageCmp);
+export const PanelWithImage = withTheme(PanelWithImageCmp);

package/src/View/Components/Panels/PanelWithRow.js

@@ -1,21 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PanelWithRow = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
+import * as React from 'react';
+import { Flex, Text } from 'rebass';
+import Panel from '../../../components/Panel';
 // We cannot destructure this.props using the react way in typescript which is a real pain as you
 // need to transfer props individually as a consequence
 // let { buttonContent, ...other } = this.props
-class PanelWithRow extends React.Component {
+export class PanelWithRow extends React.Component {
     render() {
-        const headerItems = this.props.colItems.map((colItem, index) => (React.createElement(rebass_1.Text, { key: colItem.key || colItem.Content || index, fontWeight: "bold", fontSize: 'var(--ab-font-size-3)', paddingLeft: 1, paddingRight: 1, style: {
+        const headerItems = this.props.colItems.map((colItem, index) => (React.createElement(Text, { key: colItem.key || colItem.Content || index, fontWeight: "bold", fontSize: 'var(--ab-font-size-3)', paddingLeft: 1, paddingRight: 1, style: {
                 flex: colItem.Size,
             } }, colItem.Content)));
-        const header = (React.createElement(rebass_1.Flex, { alignItems: this.props.headerAlign || 'center', style: { width: '100%' } }, headerItems));
+        const header = (React.createElement(Flex, { alignItems: this.props.headerAlign || 'center', style: { width: '100%' } }, headerItems));
         return (React.createElement("div", { style: this.props.style, className: this.props.className },
-            React.createElement(Panel_1.default, { bodyScroll: true, header: header, border: this.props.border, bodyProps: this.props.bodyProps }, this.props.children)));
+            React.createElement(Panel, { bodyScroll: true, header: header, border: this.props.border, bodyProps: this.props.bodyProps }, this.props.children)));
     }
 }
-exports.PanelWithRow = PanelWithRow;

package/src/View/Components/Panels/PanelWithTwoButtons.js

@@ -1,20 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PanelWithTwoButtons = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
-const rebass_1 = require("rebass");
+import * as React from 'react';
+import Panel from '../../../components/Panel';
+import { Flex } from 'rebass';
 //We cannot destructure this.props using the react way in typescript which is a real pain as you
 //need to transfer props individually as a consequence
 //let { buttonContent, ...other } = this.props
-class PanelWithTwoButtons extends React.Component {
+export class PanelWithTwoButtons extends React.Component {
     render() {
-        let header = (React.createElement(rebass_1.Flex, { alignItems: "center", width: "100%" },
-            React.createElement(rebass_1.Flex, { flex: 1 }, this.props.headerText),
+        let header = (React.createElement(Flex, { alignItems: "center", width: "100%" },
+            React.createElement(Flex, { flex: 1 }, this.props.headerText),
             this.props.secondButton,
             this.props.firstButton));
-        return (React.createElement(Panel_1.default, Object.assign({}, this.props, { header: header }), this.props.children));
+        return (React.createElement(Panel, Object.assign({}, this.props, { header: header }), this.props.children));
     }
 }
-exports.PanelWithTwoButtons = PanelWithTwoButtons;

package/src/View/Components/Panels/ToolPanelSettingsPanel.js

@@ -1,18 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolPanelSettingsPanel = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const icons_1 = require("../../../components/icons");
-const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
+import * as React from 'react';
+import { Icon } from '../../../components/icons';
+import Panel from '../../../components/Panel';
 //We cannot destructure this.props using the react way in typescript which is a real pain as you
 //need to transfer props individually as a consequence
 //let { buttonContent, ...other } = this.props
-class ToolPanelSettingsPanel extends React.Component {
+export class ToolPanelSettingsPanel extends React.Component {
     render() {
         let header = (React.createElement("span", { style: { verticalAlign: 'middle' } },
             ' ',
-            React.createElement(icons_1.Icon, { name: 'spanner' }),
+            React.createElement(Icon, { name: 'spanner' }),
             " ",
             React.createElement("span", null, "Settings"),
             this.props.button &&
@@ -25,7 +21,6 @@ class ToolPanelSettingsPanel extends React.Component {
                         boxShadow: 'none',
                     },
                 })));
-        return (React.createElement(Panel_1.default, { header: header, style: { margin: '0px', padding: '0px' } }, this.props.children));
+        return (React.createElement(Panel, { header: header, style: { margin: '0px', padding: '0px' } }, this.props.children));
     }
 }
-exports.ToolPanelSettingsPanel = ToolPanelSettingsPanel;

package/src/View/Components/PermittedValuesSelector/PermitedValuesSelector.js

@@ -1,27 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PermitedValuesSelector = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const OverlayTrigger_1 = tslib_1.__importDefault(require("../../../components/OverlayTrigger"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const AdaptableContext_1 = require("../../AdaptableContext");
-const ListBoxFilterForm_1 = require("../FilterForm/ListBoxFilterForm");
-const PermitedValuesSelector = (props) => {
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import OverlayTrigger from '../../../components/OverlayTrigger';
+import SimpleButton from '../../../components/SimpleButton';
+import { useAdaptable } from '../../AdaptableContext';
+import { ListBoxFilterForm } from '../FilterForm/ListBoxFilterForm';
+export const PermitedValuesSelector = (props) => {
     var _a, _b, _c;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     const columnId = props.columnId;
     const column = adaptable.api.columnApi.getColumnWithColumnId(columnId);
-    const distinctValues = ((_a = adaptable.api.gridApi.internalApi.getDistinctDisplayValuesForColumn(columnId)) !== null && _a !== void 0 ? _a : []).map((value) => { var _a; return ({ value: value, label: value.toString ? (_a = value.toString) === null || _a === void 0 ? void 0 : _a.call(value) : value }); });
+    const distinctValues = ((_a = adaptable.api.gridApi.internalApi.getDistinctDisplayValuesForColumn(columnId)) !== null && _a !== void 0 ? _a : []).map((value) => { var _a; return ({ value: value, label: (value === null || value === void 0 ? void 0 : value.toString) ? (_a = value.toString) === null || _a === void 0 ? void 0 : _a.call(value) : value }); });
     const predicateInputs = (_b = props.predicate.Inputs) !== null && _b !== void 0 ? _b : [];
     const isClearDisabled = ((_c = predicateInputs === null || predicateInputs === void 0 ? void 0 : predicateInputs.filter) === null || _c === void 0 ? void 0 : _c.call(predicateInputs, (item) => item !== undefined || item !== null || item !== '').length) === 0;
-    const popupContent = (React.createElement(rebass_1.Flex, { className: "ab-PermitedValuesSelector__PopupContent", padding: 1, flexDirection: "column" },
-        React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { currentColumn: column, columns: [], columnDistinctValues: distinctValues, dataType: column.dataType, uiSelectedColumnValues: props.predicate.Inputs, useAgGridStyle: true, onColumnValueSelectedChange: (list) => props.onPredicateValuesChange(list) })));
-    return (React.createElement(rebass_1.Box, { className: "ab-PermitedValuesSelector", mt: 2 },
-        React.createElement(rebass_1.Box, { flex: 1 },
-            React.createElement(OverlayTrigger_1.default, { render: () => popupContent },
-                React.createElement(SimpleButton_1.default, { width: "100%", mb: 2 }, (predicateInputs === null || predicateInputs === void 0 ? void 0 : predicateInputs.join(', ')) || 'No Selected values'))),
-        React.createElement(SimpleButton_1.default, { disabled: isClearDisabled, onClick: () => props.onPredicateValuesChange([]) }, "Clear Values")));
+    const popupContent = (React.createElement(Flex, { className: "ab-PermitedValuesSelector__PopupContent", padding: 1, flexDirection: "column" },
+        React.createElement(ListBoxFilterForm, { currentColumn: column, columns: [], columnDistinctValues: distinctValues, dataType: column.dataType, uiSelectedColumnValues: props.predicate.Inputs, useAgGridStyle: true, onColumnValueSelectedChange: (list) => props.onPredicateValuesChange(list) })));
+    return (React.createElement(Box, { className: "ab-PermitedValuesSelector", mt: 2 },
+        React.createElement(Box, { flex: 1 },
+            React.createElement(OverlayTrigger, { render: () => popupContent },
+                React.createElement(SimpleButton, { width: "100%", mb: 2 }, (predicateInputs === null || predicateInputs === void 0 ? void 0 : predicateInputs.join(', ')) || 'No Selected values'))),
+        React.createElement(SimpleButton, { disabled: isClearDisabled, onClick: () => props.onPredicateValuesChange([]) }, "Clear Values")));
 };
-exports.PermitedValuesSelector = PermitedValuesSelector;

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

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PermitedValuesSelector = void 0;
-var PermitedValuesSelector_1 = require("./PermitedValuesSelector");
-Object.defineProperty(exports, "PermitedValuesSelector", { enumerable: true, get: function () { return PermitedValuesSelector_1.PermitedValuesSelector; } });
+export { PermitedValuesSelector } from './PermitedValuesSelector';

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

@@ -1,18 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableLoadingScreen = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
-const rebass_1 = require("rebass");
-class AdaptableLoadingScreen extends React.Component {
+import * as React from 'react';
+import Dialog from '../../../components/Dialog';
+import { Box } from 'rebass';
+export class AdaptableLoadingScreen extends React.Component {
     render() {
-        return (React.createElement(Dialog_1.default, { modal: true, isOpen: this.props.showLoadingScreen, onDismiss: this.props.onClose, showCloseButton: false, style: {
+        return (React.createElement(Dialog, { modal: true, isOpen: this.props.showLoadingScreen, onDismiss: this.props.onClose, showCloseButton: false, style: {
                 minHeight: 'auto',
             } },
-            React.createElement(rebass_1.Box, { padding: 3 },
+            React.createElement(Box, { padding: 3 },
                 React.createElement("h4", null, "Initialising Grid"),
                 React.createElement("p", null, "Retrieving your settings and setting up the grid..."))));
     }
 }
-exports.AdaptableLoadingScreen = AdaptableLoadingScreen;

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

@@ -1,26 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptablePopup = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const GeneralConstants = tslib_1.__importStar(require("../../../../Utilities/Constants/GeneralConstants"));
-const TopBar_1 = tslib_1.__importDefault(require("./TopBar"));
-const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
-const Navigation_1 = require("./Navigation");
-const PopupContext_1 = tslib_1.__importDefault(require("./PopupContext"));
-const AdaptablePopupBody_1 = require("./AdaptablePopupBody");
-const DefaultSettingsPanel_1 = require("../../../../Utilities/Defaults/DefaultSettingsPanel");
-const AdaptableContext_1 = require("../../../AdaptableContext");
-const CustomSettingsPanelView_1 = require("./CustomSettingsPanelView");
-const useMenuItems_1 = require("./useMenuItems");
-const AdaptablePopupDialog_1 = require("./AdaptablePopupDialog");
-const AdaptablePopup = (props) => {
+import * as React from 'react';
+import { Flex } from 'rebass';
+import * as GeneralConstants from '../../../../Utilities/Constants/GeneralConstants';
+import TopBar from './TopBar';
+import join from '../../../../components/utils/join';
+import { Navigation } from './Navigation';
+import PopupContext from './PopupContext';
+import { AdaptablePopupBody } from './AdaptablePopupBody';
+import { STANDALONE_MODULE_POPUPS } from '../../../../Utilities/Defaults/DefaultSettingsPanel';
+import { useAdaptable } from '../../../AdaptableContext';
+import { CustomSettingsPanelView } from './CustomSettingsPanelView';
+import { useMenuItems } from './useMenuItems';
+import { AdaptablePopupDialog } from './AdaptablePopupDialog';
+export const AdaptablePopup = (props) => {
     var _a, _b, _c;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
     const settingsPanelTitle = adaptable.api.internalApi.getModuleFriendlyName('SettingsPanel');
-    const menuItems = (0, useMenuItems_1.useMenuItems)();
+    const menuItems = useMenuItems();
     const isWindowModal = settingsPanelOptions.popupType === 'window';
     const modalContainer = (_b = (_a = adaptable.adaptableOptions) === null || _a === void 0 ? void 0 : _a.containerOptions) === null || _b === void 0 ? void 0 : _b.modalContainer;
     let friendlyName = null;
@@ -46,7 +42,7 @@ const AdaptablePopup = (props) => {
     if (customSettingsPanel) {
         friendlyName = customSettingsPanel.name;
         activeItem = customSettingsPanel.name;
-        moduleViewContent = React.createElement(CustomSettingsPanelView_1.CustomSettingsPanelView, { settingsPanel: customSettingsPanel });
+        moduleViewContent = React.createElement(CustomSettingsPanelView, { settingsPanel: customSettingsPanel });
     }
     else {
         const module = props.api.internalApi.getModuleService().getModuleById(componentModule);
@@ -57,24 +53,23 @@ const AdaptablePopup = (props) => {
         friendlyName = moduleInfo.FriendlyName;
         isStandalone =
             moduleInfo &&
-                (DefaultSettingsPanel_1.STANDALONE_MODULE_POPUPS.includes(moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.ModuleName) ||
+                (STANDALONE_MODULE_POPUPS.includes(moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.ModuleName) ||
                     (props.componentName && props.componentName !== (moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.Popup)));
         activeItem = moduleInfo.ModuleName;
-        moduleViewContent = (React.createElement(AdaptablePopupBody_1.AdaptablePopupBody, { api: props.api, module: module, componentName: props.componentName, moduleParams: props.moduleParams, onClearParams: props.onClearParams, onHide: props.onHide }));
+        moduleViewContent = (React.createElement(AdaptablePopupBody, { api: props.api, module: module, componentName: props.componentName, moduleParams: props.moduleParams, onClearParams: props.onClearParams, onHide: props.onHide }));
     }
     const baseClassName = 'ab-Adaptable-Popup';
-    const className = (0, join_1.default)(baseClassName, `${baseClassName}--${isWindowModal ? 'window' : 'modal'}`, isStandalone ? `${baseClassName}--action-popup` : `${baseClassName}--settings-popup`);
-    return (React.createElement(PopupContext_1.default.Provider, { value: {
+    const className = join(baseClassName, `${baseClassName}--${isWindowModal ? 'window' : 'modal'}`, isStandalone ? `${baseClassName}--action-popup` : `${baseClassName}--settings-popup`);
+    return (React.createElement(PopupContext.Provider, { value: {
             hidePopup: () => {
                 if (props.onHide) {
                     props.onHide();
                 }
             },
         } },
-        React.createElement(AdaptablePopupDialog_1.AdaptablePopupDialog, { dataName: componentModule, baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer },
-            !isStandalone && React.createElement(TopBar_1.default, { icon: settingsPanelOptions.icon }, settingsPanelTitle),
-            React.createElement(rebass_1.Flex, { flexDirection: "row", flex: "1 1 0", style: { minHeight: 0 }, className: accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '' },
-                !isStandalone && (React.createElement(Navigation_1.Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })),
-                React.createElement(rebass_1.Flex, { flex: 1, className: "ab-Adaptable-Popup__Body" }, moduleViewContent)))));
+        React.createElement(AdaptablePopupDialog, { dataName: componentModule, baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer },
+            !isStandalone && React.createElement(TopBar, { icon: settingsPanelOptions.icon }, settingsPanelTitle),
+            React.createElement(Flex, { flexDirection: "row", flex: "1 1 0", style: { minHeight: 0 }, className: accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '' },
+                !isStandalone && (React.createElement(Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })),
+                React.createElement(Flex, { flex: 1, className: "ab-Adaptable-Popup__Body" }, moduleViewContent)))));
 };
-exports.AdaptablePopup = AdaptablePopup;

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

@@ -1,14 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptablePopupBody = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const UIHelper_1 = require("../../../UIHelper");
-const AdaptableViewFactory_1 = require("../../../AdaptableViewFactory");
-const AdaptablePopupModuleView_1 = require("./AdaptablePopupModuleView");
-const AdaptablePopupBody = (props) => {
+import * as React from 'react';
+import { UIHelper } from '../../../UIHelper';
+import { AdaptableViewFactory } from '../../../AdaptableViewFactory';
+import { AdaptablePopupModuleView } from './AdaptablePopupModuleView';
+export const AdaptablePopupBody = (props) => {
     var _a;
-    const modalContainer = UIHelper_1.UIHelper.getModalContainer(props.api.optionsApi.getAdaptableOptions(), document);
+    const modalContainer = UIHelper.getModalContainer(props.api.optionsApi.getAdaptableOptions(), document);
     const moduleName = props.module.moduleInfo.ModuleName;
     const accessLevel = props.api.internalApi
         .getEntitlementService()
@@ -30,9 +26,8 @@ const AdaptablePopupBody = (props) => {
         api: props.api,
         moduleInfo,
     };
-    const BodyComponent = (AdaptableViewFactory_1.AdaptableViewFactory === null || AdaptableViewFactory_1.AdaptableViewFactory === void 0 ? void 0 : AdaptableViewFactory_1.AdaptableViewFactory[(_a = props === null || props === void 0 ? void 0 : props.componentName) !== null && _a !== void 0 ? _a : moduleInfo.Popup]) || AdaptablePopupModuleView_1.AdaptablePopupModuleView;
+    const BodyComponent = (AdaptableViewFactory === null || AdaptableViewFactory === void 0 ? void 0 : AdaptableViewFactory[(_a = props === null || props === void 0 ? void 0 : props.componentName) !== null && _a !== void 0 ? _a : moduleInfo.Popup]) || AdaptablePopupModuleView;
     // key is to make sure state is reset between views
     // most of the views use the `AdaptablePopupModuleView` component
     return React.createElement(BodyComponent, Object.assign({ key: props === null || props === void 0 ? void 0 : props.componentName, module: props.module }, moduleProps));
 };
-exports.AdaptablePopupBody = AdaptablePopupBody;