@adaptabletools/adaptable 17.0.0-canary.0 → 17.0.0-canary.10

package/src/View/CustomSort/Wizard/CustomSortWizard.js

@@ -1,33 +1,37 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { Box } from 'rebass';
-import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
-import { cloneObject } from '../../../Utilities/Helpers/Helper';
-import { CustomSortColumnWizardSection, isValidCustomSortColumn, renderCustomSortColumn, } from './CustomSortColumnWizardSection';
-import { CustomSortValuesWizardSection, isValidCustomSortOrder, renderCustomSortValuesSummary, } from './CustomSortValuesWizardSection';
-import ObjectFactory from '../../../Utilities/ObjectFactory';
-import { useDispatch, useSelector } from 'react-redux';
-import * as CustomSortRedux from '../../../Redux/ActionsReducers/CustomSortRedux';
-import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
-export const CustomSortWizard = (props) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomSortWizard = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const rebass_1 = require("rebass");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const Helper_1 = require("../../../Utilities/Helpers/Helper");
+const CustomSortColumnWizardSection_1 = require("./CustomSortColumnWizardSection");
+const CustomSortValuesWizardSection_1 = require("./CustomSortValuesWizardSection");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
+const react_redux_1 = require("react-redux");
+const CustomSortRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/CustomSortRedux"));
+const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
+const CustomSortWizard = (props) => {
     var _a, _b;
     let data = props.data;
-    const allCustomSorts = useSelector((state) => { var _a; return (_a = state.CustomSort) === null || _a === void 0 ? void 0 : _a.CustomSorts; });
+    const allCustomSorts = (0, react_redux_1.useSelector)((state) => { var _a; return (_a = state.CustomSort) === null || _a === void 0 ? void 0 : _a.CustomSorts; });
     if (((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Edit' && ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.column)) {
         data = allCustomSorts.find((x) => { var _a; return x.ColumnId == ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.column.columnId); });
     }
-    const [customSort, setCustomSort] = useState(() => {
+    const [customSort, setCustomSort] = (0, react_1.useState)(() => {
         var _a, _b;
         if (data) {
-            return cloneObject(data);
+            return (0, Helper_1.cloneObject)(data);
         }
-        const newData = ObjectFactory.CreateEmptyCustomSort();
+        const newData = ObjectFactory_1.default.CreateEmptyCustomSort();
         if ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.column) {
             newData.ColumnId = (_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.column.columnId;
         }
         return newData;
     });
-    const dispatch = useDispatch();
+    const dispatch = (0, react_redux_1.useDispatch)();
     const handleFinish = () => {
         if (data) {
             dispatch(CustomSortRedux.CustomSortEdit(customSort));
@@ -37,41 +41,42 @@ export const CustomSortWizard = (props) => {
         }
         props.onFinishWizard(customSort);
     };
-    return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: customSort, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: customSort, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
             {
-                isValid: isValidCustomSortColumn,
-                renderSummary: renderCustomSortColumn,
+                isValid: CustomSortColumnWizardSection_1.isValidCustomSortColumn,
+                renderSummary: CustomSortColumnWizardSection_1.renderCustomSortColumn,
                 details: 'Select a Column for Custom Sort',
                 render: () => {
-                    return (React.createElement(Box, { padding: 2, style: { height: '100%' } },
-                        React.createElement(CustomSortColumnWizardSection, { isNew: props.isNew, onChange: setCustomSort })));
+                    return (React.createElement(rebass_1.Box, { padding: 2, style: { height: '100%' } },
+                        React.createElement(CustomSortColumnWizardSection_1.CustomSortColumnWizardSection, { isNew: props.isNew, onChange: setCustomSort })));
                 },
                 title: 'Column',
             },
             {
                 title: 'Sort Order',
-                details: 'Select values to specify Custom Sort order - use "Drag to reorder" checkbox to modify order',
-                isValid: isValidCustomSortOrder,
-                renderSummary: renderCustomSortValuesSummary,
-                render: () => (React.createElement(Box, { padding: 2, style: { height: '100%' } },
-                    React.createElement(CustomSortValuesWizardSection, { onChange: setCustomSort }))),
+                details: 'Specify Custom Sort order - drag selected items to modify order',
+                isValid: CustomSortValuesWizardSection_1.isValidCustomSortOrder,
+                renderSummary: CustomSortValuesWizardSection_1.renderCustomSortValuesSummary,
+                render: () => (React.createElement(rebass_1.Box, { padding: 2, style: { height: '100%' } },
+                    React.createElement(CustomSortValuesWizardSection_1.CustomSortValuesWizardSection, { onChange: setCustomSort }))),
             },
             {
                 details: 'Select Custom Sort Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Box, { padding: 2 },
-                    React.createElement(ObjectTagsWizardSection, { onChange: setCustomSort }))),
-                renderSummary: renderObjectTagsSummary,
+                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                    React.createElement(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setCustomSort }))),
+                renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
             },
             '-',
             {
                 title: 'Summary',
                 details: 'Review your Custom Sort',
                 render: () => {
-                    return (React.createElement(Box, { padding: 2 },
-                        React.createElement(OnePageWizardSummary, null)));
+                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                        React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));
                 },
             },
         ] }));
 };
+exports.CustomSortWizard = CustomSortWizard;

package/src/View/Dashboard/CustomDashboardButton.js

@@ -1,10 +1,14 @@
-import * as React from 'react';
-import { useState } from 'react';
-import SimpleButton from '../../components/SimpleButton';
-import kebabCase from 'lodash/kebabCase';
-export const CustomDashboardButton = (props) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomDashboardButton = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
+const CustomDashboardButton = (props) => {
     const { button } = props;
-    const [componentRevision, setComponentRevision] = useState(1);
+    const [componentRevision, setComponentRevision] = (0, react_1.useState)(1);
     // TODO: variants of this mapping are present in several places (just search for api.internalApi.getStyleForButton() usages)
     // with the next opportunity we should abstract it
     const dashboardContext = {
@@ -21,7 +25,7 @@ export const CustomDashboardButton = (props) => {
         return null;
     }
     const disabled = button.disabled && button.disabled(button, dashboardContext);
-    return (React.createElement(SimpleButton, { key: buttonLabel, variant: buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text', tone: buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none', className: `ab-DashboardToolbar__Home__${kebabCase(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled || props.accessLevel == 'ReadOnly', onClick: () => {
+    return (React.createElement(SimpleButton_1.default, { key: buttonLabel, variant: buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text', tone: buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none', className: `ab-DashboardToolbar__Home__${(0, kebabCase_1.default)(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled || props.accessLevel == 'ReadOnly', onClick: () => {
             var _a;
             (_a = button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, button, dashboardContext);
             setTimeout(() => {
@@ -30,3 +34,4 @@ export const CustomDashboardButton = (props) => {
             }, 16);
         }, accessLevel: 'Full' }, buttonLabel));
 };
+exports.CustomDashboardButton = CustomDashboardButton;

package/src/View/Dashboard/CustomToolbar.js

@@ -1,19 +1,23 @@
-import * as React from 'react';
-import { useLayoutEffect, useRef, useState } from 'react';
-import { useAdaptable } from '../AdaptableContext';
-import { AdaptableButtonComponent } from '../Components/AdaptableButton';
-import { PanelDashboard } from '../Components/Panels/PanelDashboard';
-export const CustomToolbarCmp = (props) => {
-    const { api } = useAdaptable();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomToolbarWrapper = exports.CustomToolbarCmp = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const AdaptableContext_1 = require("../AdaptableContext");
+const AdaptableButton_1 = require("../Components/AdaptableButton");
+const PanelDashboard_1 = require("../Components/Panels/PanelDashboard");
+const CustomToolbarCmp = (props) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
     // dummy object which is used to force a re-render of the toolbar
-    const [componentRevision, setComponentRevision] = useState(1);
+    const [componentRevision, setComponentRevision] = (0, react_1.useState)(1);
     const renderContentContainerId = api.dashboardApi.internalApi.getCustomToolbarRenderContainerId(props.customToolbar.name);
-    const renderContentContainerRef = useRef(null);
-    const [renderedContentHTML, setRenderedContentHTML] = useState('');
+    const renderContentContainerRef = (0, react_1.useRef)(null);
+    const [renderedContentHTML, setRenderedContentHTML] = (0, react_1.useState)('');
     const buttonsContainerId = api.dashboardApi.internalApi.getCustomToolbarButtonsContainerId(props.customToolbar.name);
     const componentContainerId = api.dashboardApi.internalApi.getCustomToolbarComponentContainerId(props.customToolbar.name);
-    const componentContainerRef = useRef(null);
-    useLayoutEffect(() => {
+    const componentContainerRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
         const element = renderContentContainerRef.current;
         const adaptableApi = api;
         if (props.customToolbar.render) {
@@ -27,7 +31,7 @@ export const CustomToolbarCmp = (props) => {
             setRenderedContentHTML(html);
         }
     }, [componentRevision, props.dashboardRevision]);
-    useLayoutEffect(() => {
+    (0, react_1.useLayoutEffect)(() => {
         const element = renderContentContainerRef.current;
         const adaptableApi = api;
         // cleanup runs in a separate effect, this way it's executed only once on unmount
@@ -43,7 +47,7 @@ export const CustomToolbarCmp = (props) => {
             }
         };
     }, []);
-    useLayoutEffect(() => {
+    (0, react_1.useLayoutEffect)(() => {
         const containerElement = componentContainerRef.current;
         const adaptableApi = api;
         if (props.customToolbar.frameworkComponent) {
@@ -81,7 +85,7 @@ export const CustomToolbarCmp = (props) => {
             const disabled = button.disabled && button.disabled(button, dashboardContext);
             let buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'outlined';
             let buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'neutral';
-            return (React.createElement(AdaptableButtonComponent, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, variant: buttonVariant, tone: buttonTone, className: (buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || '', onClick: () => {
+            return (React.createElement(AdaptableButton_1.AdaptableButtonComponent, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, variant: buttonVariant, tone: buttonTone, className: (buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || '', onClick: () => {
                     button.onClick ? button.onClick(button, dashboardContext) : null;
                     setTimeout(() => {
                         // mutate state to force a re-rendering
@@ -91,9 +95,10 @@ export const CustomToolbarCmp = (props) => {
         }))),
         props.customToolbar.frameworkComponent && (React.createElement("div", { id: componentContainerId, ref: componentContainerRef, style: { minHeight: 22 }, className: `ab-CustomToolbar__component ab-CustomToolbar--${props.customToolbar.name}` }))));
 };
-export const CustomToolbarWrapper = (props) => {
-    const { api } = useAdaptable();
-    return (React.createElement(PanelDashboard, { headerText: props.customToolbar.title ? props.customToolbar.title : '', showConfigureButton: props.customToolbar.showConfigureButton != null &&
+exports.CustomToolbarCmp = CustomToolbarCmp;
+const CustomToolbarWrapper = (props) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    return (React.createElement(PanelDashboard_1.PanelDashboard, { headerText: props.customToolbar.title ? props.customToolbar.title : '', showConfigureButton: props.customToolbar.showConfigureButton != null &&
             props.customToolbar.showConfigureButton == true, showCloseButton: props.customToolbar.showCloseButton != null && props.customToolbar.showCloseButton == true, onConfigure: () => {
             const customToolbarConfiguredInfo = {
                 adaptableApi: api,
@@ -105,5 +110,6 @@ export const CustomToolbarWrapper = (props) => {
         }, accessLevel: api.internalApi
             .getEntitlementService()
             .getEntitlementAccessLevelForModule('Dashboard') },
-        React.createElement(CustomToolbarCmp, Object.assign({}, props))));
+        React.createElement(exports.CustomToolbarCmp, Object.assign({}, props))));
 };
+exports.CustomToolbarWrapper = CustomToolbarWrapper;

package/src/View/Dashboard/Dashboard.js

@@ -1,26 +1,30 @@
-import kebabCase from 'lodash/kebabCase';
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { Box } from 'rebass';
-import { Dashboard as DashboardUI, DashboardTab as DashboardTabUI, } from '../../components/Dashboard';
-import * as DashboardRedux from '../../Redux/ActionsReducers/DashboardRedux';
-import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
-import * as QuickSearchRedux from '../../Redux/ActionsReducers/QuickSearchRedux';
-import * as ModuleConstants from '../../Utilities/Constants/ModuleConstants';
-import { QuickSearchModuleId } from '../../Utilities/Constants/ModuleConstants';
-import { AdaptableViewPanelFactory } from '../AdaptableViewFactory';
-import { AdaptableButtonComponent } from '../Components/AdaptableButton';
-import { AdaptableIconComponent } from '../Components/AdaptableIconComponent';
-import { AdaptableFormControlTextClear } from '../Components/Forms/AdaptableFormControlTextClear';
-import { useQuickSearchDebounced } from '../QuickSearch/useQuickSearchDebounced';
-import UIHelper from '../UIHelper';
-import { CustomDashboardButton } from './CustomDashboardButton';
-import { CustomToolbarWrapper } from './CustomToolbar';
-import { DashboardToolbarFactory } from './DashboardToolbarFactory';
-import { PinnedDashboard } from './PinnedDashboard';
-import { ModuleToolbarWrapper } from './ModuleToolbarWrapper';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dashboard = void 0;
+const tslib_1 = require("tslib");
+const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const rebass_1 = require("rebass");
+const Dashboard_1 = require("../../components/Dashboard");
+const DashboardRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/DashboardRedux"));
+const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
+const QuickSearchRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/QuickSearchRedux"));
+const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
+const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
+const AdaptableViewFactory_1 = require("../AdaptableViewFactory");
+const AdaptableButton_1 = require("../Components/AdaptableButton");
+const AdaptableIconComponent_1 = require("../Components/AdaptableIconComponent");
+const AdaptableFormControlTextClear_1 = require("../Components/Forms/AdaptableFormControlTextClear");
+const useQuickSearchDebounced_1 = require("../QuickSearch/useQuickSearchDebounced");
+const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
+const CustomDashboardButton_1 = require("./CustomDashboardButton");
+const CustomToolbar_1 = require("./CustomToolbar");
+const DashboardToolbarFactory_1 = require("./DashboardToolbarFactory");
+const PinnedDashboard_1 = require("./PinnedDashboard");
+const ModuleToolbarWrapper_1 = require("./ModuleToolbarWrapper");
 const DashboardComponent = (props) => {
-    const [searchText, search] = useQuickSearchDebounced(props);
+    const [searchText, search] = (0, useQuickSearchDebounced_1.useQuickSearchDebounced)(props);
     const dashboardAccessLevel = props.api.internalApi
         .getEntitlementService()
         .getEntitlementAccessLevelForModule('Dashboard');
@@ -31,21 +35,21 @@ const DashboardComponent = (props) => {
             let customToolbar = customToolbars && customToolbars.find((ct) => ct.name == visibleToolbarName);
             if (customToolbar) {
                 if (dashboardAccessLevel != 'Hidden') {
-                    return (React.createElement(Box, { key: customToolbar.name, className: `ab-Dashboard__container ab-Dashboard__container--customToolbar` },
-                        React.createElement(CustomToolbarWrapper, { customToolbar: customToolbar, dashboardRevision: props.DashboardRevision })));
+                    return (React.createElement(rebass_1.Box, { key: customToolbar.name, className: `ab-Dashboard__container ab-Dashboard__container--customToolbar` },
+                        React.createElement(CustomToolbar_1.CustomToolbarWrapper, { customToolbar: customToolbar, dashboardRevision: props.DashboardRevision })));
                 }
             }
             else {
                 const moduleToolbarName = visibleToolbarName;
                 if (props.api.internalApi.getModuleService().isModuleAvailable(moduleToolbarName)) {
-                    let moduleToolbarView = AdaptableViewPanelFactory.get(moduleToolbarName);
+                    let moduleToolbarView = AdaptableViewFactory_1.AdaptableViewPanelFactory.get(moduleToolbarName);
                     if (moduleToolbarView) {
                         let moduleInfo = props.api.internalApi
                             .getModuleService()
                             .getModuleInfoByModule(moduleToolbarName);
-                        return (React.createElement(Box, { key: moduleToolbarName, className: `ab-Dashboard__container ab-Dashboard__container--${moduleToolbarName}` },
-                            React.createElement(ModuleToolbarWrapper, { moduleInfo: moduleInfo, accessLevel: dashboardAccessLevel },
-                                React.createElement(DashboardToolbarFactory, { toolbarName: moduleToolbarName }))));
+                        return (React.createElement(rebass_1.Box, { key: moduleToolbarName, className: `ab-Dashboard__container ab-Dashboard__container--${moduleToolbarName}` },
+                            React.createElement(ModuleToolbarWrapper_1.ModuleToolbarWrapper, { moduleInfo: moduleInfo, accessLevel: dashboardAccessLevel },
+                                React.createElement(DashboardToolbarFactory_1.DashboardToolbarFactory, { toolbarName: moduleToolbarName }))));
                     }
                     else {
                         props.api.logError('Cannot find Dashboard Control for ' + visibleToolbarName);
@@ -69,8 +73,8 @@ const DashboardComponent = (props) => {
                 var _a, _b, _c;
                 let menuItem = props.GridState.ModuleButtonMenuItems.find((y) => y.isVisible && y.module == x);
                 if (menuItem) {
-                    return (React.createElement(AdaptableButtonComponent, { "data-name": `dashboard-module-button-${(_a = menuItem.module) !== null && _a !== void 0 ? _a : 'custom-' + index}`, key: menuItem.label, variant: menuItem.module === 'SystemStatus' ? 'outlined' : 'text', tone: menuItem.module === 'SystemStatus' ? 'neutral' : 'none', className: `ab-DashboardToolbar__Home__${kebabCase(menuItem.label)}`, icon: menuItem.icon, tooltip: menuItem.label, disabled: props.accessLevel == 'ReadOnly', onClick: () => props.dispatch(menuItem.reduxAction), accessLevel: 'Full', style: menuItem.module === 'SystemStatus'
-                            ? Object.assign(Object.assign({}, UIHelper.getStyleForMessageType((_c = (_b = props.api.systemStatusApi.getCurrentSystemStatusMessageInfo()) === null || _b === void 0 ? void 0 : _b.statusType) !== null && _c !== void 0 ? _c : 'Success')), { border: 0 }) : {} }));
+                    return (React.createElement(AdaptableButton_1.AdaptableButtonComponent, { "data-name": `dashboard-module-button-${(_a = menuItem.module) !== null && _a !== void 0 ? _a : 'custom-' + index}`, key: menuItem.label, variant: menuItem.module === 'SystemStatus' ? 'outlined' : 'text', tone: menuItem.module === 'SystemStatus' ? 'neutral' : 'none', className: `ab-DashboardToolbar__Home__${(0, kebabCase_1.default)(menuItem.label)}`, icon: menuItem.icon, tooltip: menuItem.label, disabled: props.accessLevel == 'ReadOnly', onClick: () => props.dispatch(menuItem.reduxAction), accessLevel: 'Full', style: menuItem.module === 'SystemStatus'
+                            ? Object.assign(Object.assign({}, UIHelper_1.default.getStyleForMessageType((_c = (_b = props.api.systemStatusApi.getCurrentSystemStatusMessageInfo()) === null || _b === void 0 ? void 0 : _b.statusType) !== null && _c !== void 0 ? _c : 'Success')), { border: 0 }) : {} }));
                 }
             });
         }
@@ -82,23 +86,23 @@ const DashboardComponent = (props) => {
             .filter(Boolean);
         let customDashboardButtons = null;
         if (dashboardButtonsArray === null || dashboardButtonsArray === void 0 ? void 0 : dashboardButtonsArray.length) {
-            customDashboardButtons = dashboardButtonsArray.map((button, index) => (React.createElement(CustomDashboardButton, { key: `${button.label}-${index}`, button: button, api: props.api, accessLevel: props.accessLevel })));
+            customDashboardButtons = dashboardButtonsArray.map((button, index) => (React.createElement(CustomDashboardButton_1.CustomDashboardButton, { key: `${button.label}-${index}`, button: button, api: props.api, accessLevel: props.accessLevel })));
         }
         return customDashboardButtons;
     };
     const renderQuickSearch = () => {
-        return (React.createElement(Box, { ml: 2 },
-            React.createElement(AdaptableFormControlTextClear, { type: "text", placeholder: props.api.optionsApi.getQuickSearchOptions().quickSearchPlaceholder, className: "ab-DashboardToolbar__QuickSearch__text", value: searchText, OnTextChange: search, style: { width: 'auto' }, inputStyle: { width: '7rem' } })));
+        return (React.createElement(rebass_1.Box, { ml: 2 },
+            React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { type: "text", placeholder: props.api.optionsApi.getQuickSearchOptions().quickSearchPlaceholder, className: "ab-DashboardToolbar__QuickSearch__text", value: searchText, OnTextChange: search, style: { width: 'auto' }, inputStyle: { width: '7rem' } })));
     };
     let instanceName = props.api.internalApi.getToolbarTitle();
     let dashboardOptions = props.api.optionsApi.getDashboardOptions();
     const shouldRenderQuickSearchHeader = dashboardOptions.showQuickSearchInHeader &&
-        props.api.internalApi.getModuleService().getModuleById(QuickSearchModuleId).isModuleAvailable();
+        props.api.internalApi.getModuleService().getModuleById(ModuleConstants_1.QuickSearchModuleId).isModuleAvailable();
     const applicationIcon = props.api.optionsApi.getUserInterfaceOptions().applicationIcon;
     if (props.DashboardState.IsHidden) {
         return React.createElement("div", null);
     }
-    return (React.createElement(DashboardUI, { title: instanceName, canFloat: props.api.optionsApi.getDashboardOptions().canFloat, footer: React.createElement(PinnedDashboard, null), activeTabIndex: props.DashboardState.ActiveTabIndex, onActiveTabIndexChange: (ActiveTabIndex) => {
+    return (React.createElement(Dashboard_1.Dashboard, { title: instanceName, canFloat: props.api.optionsApi.getDashboardOptions().canFloat, footer: React.createElement(PinnedDashboard_1.PinnedDashboard, null), activeTabIndex: props.DashboardState.ActiveTabIndex, onActiveTabIndexChange: (ActiveTabIndex) => {
             props.onSetActiveTabIndex(ActiveTabIndex);
         }, collapsed: props.DashboardState.IsCollapsed, onCollapsedChange: (IsCollapsed) => {
             props.onSetIsCollapsed(IsCollapsed);
@@ -115,13 +119,13 @@ const DashboardComponent = (props) => {
                 props.onSetFloatingPosition(FloatingPositionCallback);
             }
         }, left: React.createElement(React.Fragment, null,
-            React.createElement(AdaptableIconComponent, { icon: applicationIcon, iconClassName: "ab-Dashboard__application-icon" }),
+            React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: applicationIcon, iconClassName: "ab-Dashboard__application-icon" }),
             dashboardOptions.buttonsLocation === 'left' && renderModuleButtons(),
             dashboardOptions.buttonsLocation === 'left' && renderDashboardButtons()), right: React.createElement(React.Fragment, null,
             dashboardOptions.buttonsLocation === 'right' && renderDashboardButtons(),
             dashboardOptions.buttonsLocation === 'right' && renderModuleButtons(),
             shouldRenderQuickSearchHeader && renderQuickSearch()), onShowDashboardPopup: props.onShowDashboardPopup }, props.DashboardState.Tabs &&
-        props.DashboardState.Tabs.map((tab, index) => (React.createElement(DashboardTabUI, { key: index, title: tab.Name }, renderTab(tab))))));
+        props.DashboardState.Tabs.map((tab, index) => (React.createElement(Dashboard_1.DashboardTab, { key: index, title: tab.Name }, renderTab(tab))))));
 };
 function mapStateToProps(state, ownProps) {
     return {
@@ -144,4 +148,4 @@ function mapDispatchToProps(dispatch) {
         onShowDashboardPopup: () => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.DashboardModuleId, 'DashboardPopup')),
     };
 }
-export let Dashboard = connect(mapStateToProps, mapDispatchToProps)(DashboardComponent);
+exports.Dashboard = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(DashboardComponent);

package/src/View/Dashboard/DashboardPopup.js

@@ -1,20 +1,24 @@
-import * as React from 'react';
-import { connect } from 'react-redux';
-import * as DashboardRedux from '../../Redux/ActionsReducers/DashboardRedux';
-import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
-import Radio from '../../components/Radio';
-import { Box, Flex } from 'rebass';
-import DashboardManagerUI from '../../components/Dashboard/DashboardManager';
-import { ModuleValueSelector } from '../Components/ModuleValueSelector';
-import { CheckBox } from '../../components/CheckBox';
-import Panel from '../../components/Panel';
-import { PinnedToolbarsSelector } from './PinnedToolbarsSelector';
-export var DashboardConfigView;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardPopup = exports.DashboardConfigView = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const DashboardRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/DashboardRedux"));
+const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
+const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
+const rebass_1 = require("rebass");
+const DashboardManager_1 = tslib_1.__importDefault(require("../../components/Dashboard/DashboardManager"));
+const ModuleValueSelector_1 = require("../Components/ModuleValueSelector");
+const CheckBox_1 = require("../../components/CheckBox");
+const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
+const PinnedToolbarsSelector_1 = require("./PinnedToolbarsSelector");
+var DashboardConfigView;
 (function (DashboardConfigView) {
     DashboardConfigView["Toolbars"] = "Toolbars";
     DashboardConfigView["Buttons"] = "Buttons";
     DashboardConfigView["PinnedToolbars"] = "PinnedToolbars";
-})(DashboardConfigView || (DashboardConfigView = {}));
+})(DashboardConfigView = exports.DashboardConfigView || (exports.DashboardConfigView = {}));
 class DashboardPopupComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -64,25 +68,25 @@ class DashboardPopupComponent extends React.Component {
             }
             return false;
         };
-        return (React.createElement(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
-            React.createElement(Flex, { flex: 1, height: "100%", flexDirection: "column" },
-                areDashboardSettingsVisible && (React.createElement(Panel, { header: 'Dashboard Modes', style: { height: 'auto', overflow: 'visible' }, variant: "default", borderRadius: "none" },
-                    React.createElement(CheckBox, { mr: 3, "data-name": "collapse", className: `${baseClassName}__settings-option`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse"),
+        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 Mode', 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) }, "Collapsed"),
                     ' ',
-                    this.props.api.optionsApi.getDashboardOptions().canFloat && (React.createElement(CheckBox, { mr: 3, "data-name": "floating", className: `${baseClassName}__settings-option`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
+                    this.props.api.optionsApi.getDashboardOptions().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) }, "Floating")),
                     ' ',
-                    React.createElement(CheckBox, { "data-name": "hidden", className: `${baseClassName}__settings-option`, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden"))),
-                React.createElement(Panel, { header: 'Dashboard Contents', style: { borderBottom: '1px solid var(--ab-color-primary)' }, variant: "default", borderRadius: "none", marginTop: 4 },
-                    React.createElement(Flex, { className: `${baseClassName}__contents-selector`, flexDirection: "row", padding: 2 },
-                        React.createElement(Radio, { marginLeft: 3, value: DashboardConfigView.Toolbars, checked: this.state.DashboardConfigView == DashboardConfigView.Toolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Toolbars"),
-                        React.createElement(Radio, { marginLeft: 3, value: DashboardConfigView.Buttons, checked: this.state.DashboardConfigView == DashboardConfigView.Buttons, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Buttons"),
-                        React.createElement(Radio, { marginLeft: 3, value: DashboardConfigView.PinnedToolbars, checked: this.state.DashboardConfigView == DashboardConfigView.PinnedToolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Pinned Toolbars")),
-                    React.createElement(Box, { className: `${baseClassName}__Module-Selector`, "data-name": this.state.DashboardConfigView === DashboardConfigView.Toolbars
+                    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) }, "Tabs & 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(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.PinnedToolbars, checked: this.state.DashboardConfigView == DashboardConfigView.PinnedToolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Pinned Toolbars")),
+                    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(DashboardManagerUI, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
-                        this.state.DashboardConfigView == DashboardConfigView.Buttons && (React.createElement(ModuleValueSelector, { disabled: isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', isOptionDisabled: isModuleCheckboxDisabled, xSelectedLabel: () => `Visible Module Buttons:`, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) })),
-                        this.state.DashboardConfigView === DashboardConfigView.PinnedToolbars && (React.createElement(PinnedToolbarsSelector, null)))))));
+                        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) })),
+                        this.state.DashboardConfigView === DashboardConfigView.PinnedToolbars && (React.createElement(PinnedToolbarsSelector_1.PinnedToolbarsSelector, null)))))));
     }
     onDashboardConfigViewChanged(event) {
         let e = event.target;
@@ -110,4 +114,4 @@ function mapDispatchToProps(dispatch) {
         onSetDashboardFloating: (isFloating) => dispatch(DashboardRedux.DashboardSetIsFloating(isFloating)),
     };
 }
-export let DashboardPopup = connect(mapStateToProps, mapDispatchToProps)(DashboardPopupComponent);
+exports.DashboardPopup = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(DashboardPopupComponent);

package/src/View/Dashboard/DashboardToolbarFactory.js

@@ -1,20 +1,23 @@
-import * as React from 'react';
-import { useSelector } from 'react-redux';
-import { ALL_MODULES } from '../../PredefinedConfig/Common/Types';
-import { useAdaptable } from '../AdaptableContext';
-import { AdaptableViewPanelFactory } from '../AdaptableViewFactory';
-import { CustomToolbarCmp } from './CustomToolbar';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardToolbarFactory = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const Types_1 = require("../../PredefinedConfig/Common/Types");
+const AdaptableContext_1 = require("../AdaptableContext");
+const AdaptableViewFactory_1 = require("../AdaptableViewFactory");
+const CustomToolbar_1 = require("./CustomToolbar");
 const SystemDashboardToolbarFactory = (props) => {
-    const adaptable = useAdaptable();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const moduleInfo = adaptable.api.internalApi
         .getModuleService()
         .getModuleInfoByModule(props.toolbarName);
     const accessLevel = adaptable.api.internalApi
         .getEntitlementService()
         .getEntitlementAccessLevelForModule(props.toolbarName);
-    const moduleToolbarView = AdaptableViewPanelFactory.get(props.toolbarName);
+    const moduleToolbarView = AdaptableViewFactory_1.AdaptableViewPanelFactory.get(props.toolbarName);
     if (!moduleToolbarView) {
-        console.log({ props });
         return React.createElement(React.Fragment, null, "adasdasdas");
     }
     const moduleToolbarElement = React.createElement(moduleToolbarView, {
@@ -26,20 +29,21 @@ const SystemDashboardToolbarFactory = (props) => {
     return moduleToolbarElement;
 };
 const CustomDashboardToolbarFactory = (props) => {
-    const revision = useSelector((state) => state.System.DashboardRevision);
-    const adaptable = useAdaptable();
+    const revision = (0, react_redux_1.useSelector)((state) => state.System.DashboardRevision);
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const customToolbars = adaptable.api.dashboardApi.getCustomToolbars();
     const customToolbar = customToolbars && customToolbars.find((ct) => ct.name == props.toolbarName);
     if (customToolbar) {
-        return React.createElement(CustomToolbarCmp, { customToolbar: customToolbar, dashboardRevision: revision });
+        return React.createElement(CustomToolbar_1.CustomToolbarCmp, { customToolbar: customToolbar, dashboardRevision: revision });
     }
     return React.createElement(React.Fragment, null);
 };
-export const DashboardToolbarFactory = (props) => {
-    if (ALL_MODULES.includes(props.toolbarName)) {
+const DashboardToolbarFactory = (props) => {
+    if (Types_1.ALL_MODULES.includes(props.toolbarName)) {
         return React.createElement(SystemDashboardToolbarFactory, { toolbarName: props.toolbarName });
     }
     else {
         return React.createElement(CustomDashboardToolbarFactory, { toolbarName: props.toolbarName });
     }
 };
+exports.DashboardToolbarFactory = DashboardToolbarFactory;

package/src/View/Dashboard/DashboardViewPanel.js

@@ -1,21 +1,25 @@
-import * as DashboardRedux from '../../Redux/ActionsReducers/DashboardRedux';
-import * as React from 'react';
-import { CheckBox } from '../../components/CheckBox';
-import { connect } from 'react-redux';
-import { Flex } from 'rebass';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardViewPanelControl = void 0;
+const tslib_1 = require("tslib");
+const DashboardRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/DashboardRedux"));
+const React = tslib_1.__importStar(require("react"));
+const CheckBox_1 = require("../../components/CheckBox");
+const react_redux_1 = require("react-redux");
+const rebass_1 = require("rebass");
 class DashboardViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
     }
     render() {
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__Dashboard__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+        return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Dashboard__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             ' ',
-            React.createElement(CheckBox, { className: `ab-${elementType}__Dashboard__collapsed-check`, marginTop: 0, fontSize: 2, padding: 1, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse"),
+            React.createElement(CheckBox_1.CheckBox, { className: `ab-${elementType}__Dashboard__collapsed-check`, marginTop: 0, fontSize: 2, padding: 1, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse"),
             '',
-            this.props.api.optionsApi.getDashboardOptions().canFloat && (React.createElement(CheckBox, { className: `ab-${elementType}__Dashboard__collapsed-check`, marginTop: 0, fontSize: 2, padding: 1, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
+            this.props.api.optionsApi.getDashboardOptions().canFloat && (React.createElement(CheckBox_1.CheckBox, { className: `ab-${elementType}__Dashboard__collapsed-check`, marginTop: 0, fontSize: 2, padding: 1, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
             ' ',
-            React.createElement(CheckBox, { className: `ab-${elementType}__Dashboard__hidden-check`, marginTop: 0, fontSize: 2, padding: 1, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden")));
+            React.createElement(CheckBox_1.CheckBox, { className: `ab-${elementType}__Dashboard__hidden-check`, marginTop: 0, fontSize: 2, padding: 1, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden")));
     }
 }
 function mapStateToProps(state, ownProps) {
@@ -32,4 +36,4 @@ function mapDispatchToProps(dispatch) {
         onSetDashboardFloating: (isFloating) => dispatch(DashboardRedux.DashboardSetIsFloating(isFloating)),
     };
 }
-export let DashboardViewPanelControl = connect(mapStateToProps, mapDispatchToProps)(DashboardViewPanelComponent);
+exports.DashboardViewPanelControl = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(DashboardViewPanelComponent);