@adaptabletools/adaptable 17.0.0-canary.3 → 17.0.0-canary.5

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

@@ -1,23 +1,29 @@
-import * as React from 'react';
-import { Text } from 'rebass';
-import { Tabs } from '../../../components/Tabs';
-import { Tag } from '../../../components/Tag';
-import { NewColumnSelector } from '../../Components/ColumnSelector';
-import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-export const renderCustomSortColumn = (data) => {
-    const { api } = useOnePageAdaptableWizardContext();
-    return (React.createElement(Text, { pr: 2, py: 2, fontSize: 2 },
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomSortColumnWizardSection = exports.isValidCustomSortColumn = exports.renderCustomSortColumn = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const Tabs_1 = require("../../../components/Tabs");
+const Tag_1 = require("../../../components/Tag");
+const ColumnSelector_1 = require("../../Components/ColumnSelector");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const renderCustomSortColumn = (data) => {
+    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    return (React.createElement(rebass_1.Text, { pr: 2, py: 2, fontSize: 2 },
         "Custom sort column: ",
-        React.createElement(Tag, null, api.columnApi.getFriendlyNameForColumnId(data.ColumnId))));
+        React.createElement(Tag_1.Tag, null, api.columnApi.getFriendlyNameForColumnId(data.ColumnId))));
 };
-export const isValidCustomSortColumn = (data) => {
+exports.renderCustomSortColumn = renderCustomSortColumn;
+const isValidCustomSortColumn = (data) => {
     if (!data.ColumnId) {
         return 'You have to select a Column for Custom Sort';
     }
     return true;
 };
-export const CustomSortColumnWizardSection = (props) => {
-    const { data, api } = useOnePageAdaptableWizardContext();
+exports.isValidCustomSortColumn = isValidCustomSortColumn;
+const CustomSortColumnWizardSection = (props) => {
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const sortableCols = React.useMemo(() => {
         const sortableColumns = api.columnApi.getSortableColumns();
         const customSorts = api.customSortApi.getCustomSorts();
@@ -36,10 +42,11 @@ export const CustomSortColumnWizardSection = (props) => {
             });
         });
     }, []);
-    return (React.createElement(Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs.Tab, null, "Column"),
-        React.createElement(Tabs.Content, null,
-            React.createElement(NewColumnSelector, { availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Column"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(ColumnSelector_1.NewColumnSelector, { availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
                     props.onChange(Object.assign(Object.assign({}, data), { SortedValues: [], ColumnId: ids[0] }));
                 }, allowReorder: false }))));
 };
+exports.CustomSortColumnWizardSection = CustomSortColumnWizardSection;

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

@@ -1,6 +1,10 @@
-import * as React from 'react';
-import { WizardSummaryPage } from '../../Components/WizardSummaryPage';
-export class CustomSortSummaryWizard extends React.Component {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomSortSummaryWizard = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const WizardSummaryPage_1 = require("../../Components/WizardSummaryPage");
+class CustomSortSummaryWizard extends React.Component {
     constructor(props) {
         super(props);
     }
@@ -12,7 +16,7 @@ export class CustomSortSummaryWizard extends React.Component {
             },
             { Key: 'Values', Value: this.props.data.SortedValues.join(', ') },
         ];
-        return (React.createElement(WizardSummaryPage, { KeyValuePairs: keyValuePairs, header: this.props.moduleInfo.FriendlyName }));
+        return (React.createElement(WizardSummaryPage_1.WizardSummaryPage, { KeyValuePairs: keyValuePairs, header: this.props.moduleInfo.FriendlyName }));
     }
     canNext() {
         return true;
@@ -29,3 +33,4 @@ export class CustomSortSummaryWizard extends React.Component {
         return 1;
     }
 }
+exports.CustomSortSummaryWizard = CustomSortSummaryWizard;

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

@@ -1,33 +1,39 @@
-import * as React from 'react';
-import { useMemo, useEffect, useState } from 'react';
-import { Text } from 'rebass';
-import { Loader } from '../../../components/Loader';
-import { Tabs } from '../../../components/Tabs';
-import join from '../../../components/utils/join';
-import { runIfNotResolvedIn } from '../../../Utilities/runIfNotResolvedIn';
-import { sortWithOrderArray } from '../../../Utilities/sortWithOrder';
-import { ValueOptionsTags, ValueSelector } from '../../Components/ValueSelector';
-import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-export const isValidCustomSortOrder = (data) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomSortValuesWizardSection = exports.renderCustomSortValuesSummary = exports.isValidCustomSortOrder = 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 Loader_1 = require("../../../components/Loader");
+const Tabs_1 = require("../../../components/Tabs");
+const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
+const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
+const sortWithOrder_1 = require("../../../Utilities/sortWithOrder");
+const ValueSelector_1 = require("../../Components/ValueSelector");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const isValidCustomSortOrder = (data) => {
     if (!data.SortedValues || !data.SortedValues.length) {
         return 'You have to specify at least one value for Custom Sort order';
     }
     return true;
 };
-export const renderCustomSortValuesSummary = (data) => {
-    return data.SortedValues.length ? (React.createElement(Text, { fontSize: 2 },
-        React.createElement(ValueOptionsTags, { options: data.SortedValues, value: data.SortedValues, toIdentifier: (x) => `${x}`, toLabel: (x) => `${x}`, allowWrap: true, readOnly: true }))) : null;
+exports.isValidCustomSortOrder = isValidCustomSortOrder;
+const renderCustomSortValuesSummary = (data) => {
+    return data.SortedValues.length ? (React.createElement(rebass_1.Text, { fontSize: 2 },
+        React.createElement(ValueSelector_1.ValueOptionsTags, { options: data.SortedValues, value: data.SortedValues, toIdentifier: (x) => `${x}`, toLabel: (x) => `${x}`, allowWrap: true, readOnly: true }))) : null;
 };
-export const CustomSortValuesWizardSection = (props) => {
-    const { data, api } = useOnePageAdaptableWizardContext();
-    const [distinctValues, setDistinctValues] = useState([]);
-    const [isDistinctValuesLoading, setIsDistinctValuesLoading] = useState(false);
-    useEffect(() => {
+exports.renderCustomSortValuesSummary = renderCustomSortValuesSummary;
+const CustomSortValuesWizardSection = (props) => {
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const [distinctValues, setDistinctValues] = (0, react_1.useState)([]);
+    const [isDistinctValuesLoading, setIsDistinctValuesLoading] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
         let isMounted = true;
         (async () => {
             // for sync and very fast resolving promises does not make sense to show a loader
             setDistinctValues([]);
-            const newValues = await runIfNotResolvedIn(api.gridApi.internalApi.getDistinctCustomSortDisplayValuesForColumn(data.ColumnId), () => isMounted && setIsDistinctValuesLoading(true));
+            const newValues = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(api.gridApi.internalApi.getDistinctCustomSortDisplayValuesForColumn(data.ColumnId), () => isMounted && setIsDistinctValuesLoading(true));
             if (!isMounted) {
                 return;
             }
@@ -38,7 +44,7 @@ export const CustomSortValuesWizardSection = (props) => {
             isMounted = false;
         };
     }, [data.ColumnId]);
-    const sortedValuesMap = useMemo(() => {
+    const sortedValuesMap = (0, react_1.useMemo)(() => {
         if (!data.SortedValues || !data.SortedValues.length) {
             return new Map();
         }
@@ -50,20 +56,21 @@ export const CustomSortValuesWizardSection = (props) => {
     const allowReorder = React.useCallback((option) => {
         return sortedValuesMap.has(option);
     }, [sortedValuesMap]);
-    const options = useMemo(() => {
-        return sortWithOrderArray(distinctValues, data.SortedValues, {
+    const options = (0, react_1.useMemo)(() => {
+        return (0, sortWithOrder_1.sortWithOrderArray)(distinctValues, data.SortedValues, {
             sortUnorderedItems: false,
         });
     }, [allowReorder, distinctValues, data.SortedValues]);
     const baseClassName = 'ab-CustomSortWizard__SortOrder';
-    const className = join(baseClassName, isDistinctValuesLoading && `${baseClassName}--loading`);
-    return (React.createElement(Tabs, { style: { height: '100%' }, className: className },
-        React.createElement(Tabs.Tab, null, "Sort Order"),
-        React.createElement(Tabs.Content, null,
-            isDistinctValuesLoading && React.createElement(Loader, null, "Loading"),
-            React.createElement(ValueSelector, { toIdentifier: (x) => `${x}`, toLabel: (x) => `${x}`, options: options, value: data.SortedValues, allowReorder: allowReorder, xSelectedLabel: () => {
+    const className = (0, join_1.default)(baseClassName, isDistinctValuesLoading && `${baseClassName}--loading`);
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' }, className: className },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Sort Order"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            isDistinctValuesLoading && React.createElement(Loader_1.Loader, null, "Loading"),
+            React.createElement(ValueSelector_1.ValueSelector, { toIdentifier: (x) => `${x}`, toLabel: (x) => `${x}`, options: options, value: data.SortedValues, allowReorder: allowReorder, xSelectedLabel: () => {
                     return `Your Sort Order:`;
                 }, onChange: (SortedValues) => {
                     props.onChange(Object.assign(Object.assign({}, data), { SortedValues }));
                 } }))));
 };
+exports.CustomSortValuesWizardSection = CustomSortValuesWizardSection;

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: 'Specify Custom Sort order - drag selected items to modify order',
-                isValid: isValidCustomSortOrder,
-                renderSummary: renderCustomSortValuesSummary,
-                render: () => (React.createElement(Box, { padding: 2, style: { height: '100%' } },
-                    React.createElement(CustomSortValuesWizardSection, { onChange: setCustomSort }))),
+                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);