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

package/src/View/Components/StyleVisualItem.js

@@ -1,14 +1,18 @@
-import * as React from 'react';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyleVisualItem = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
 /// <reference path="../../typings/.d.ts" />
-import { EnumExtensions } from '../../Utilities/Extensions/EnumExtensions';
-import { FontWeight, FontStyle } from '../../PredefinedConfig/Common/Enums';
-import StringExtensions from '../../Utilities/Extensions/StringExtensions';
-export class StyleVisualItem extends React.Component {
+const EnumExtensions_1 = require("../../Utilities/Extensions/EnumExtensions");
+const Enums_1 = require("../../PredefinedConfig/Common/Enums");
+const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
+class StyleVisualItem extends React.Component {
     render() {
         if (!this.props.Style) {
             return null;
         }
-        let styleText = StringExtensions.IsNotNullOrEmpty(this.props.Text)
+        let styleText = StringExtensions_1.default.IsNotNullOrEmpty(this.props.Text)
             ? this.props.Text
             : 'Style';
         let styleVisualisation;
@@ -19,9 +23,9 @@ export class StyleVisualItem extends React.Component {
             let backColorForStyle = this.props.Style.BackColor != undefined ? this.props.Style.BackColor : null;
             let foreColorForStyle = this.props.Style.ForeColor != undefined ? this.props.Style.ForeColor : 'black';
             let borderColorForStyle = this.props.Style.BorderColor != undefined ? this.props.Style.BorderColor : null;
-            let fontWeightForStyle = this.props.Style.FontWeight == FontWeight.Bold ? 'bold' : 'normal';
-            let fontStyleForStyle = this.props.Style.FontStyle == FontStyle.Italic ? 'italic' : 'normal';
-            let fontSizeForStyle = EnumExtensions.getCssFontSizeFromFontSizeEnum(this.props.Style.FontSize);
+            let fontWeightForStyle = this.props.Style.FontWeight == Enums_1.FontWeight.Bold ? 'bold' : 'normal';
+            let fontStyleForStyle = this.props.Style.FontStyle == Enums_1.FontStyle.Italic ? 'italic' : 'normal';
+            let fontSizeForStyle = EnumExtensions_1.EnumExtensions.getCssFontSizeFromFontSizeEnum(this.props.Style.FontSize);
             styleVisualisation = (React.createElement("div", { className: this.props.Style.BackColor != undefined ? '' : 'ab_white_grey_stripes', style: {
                     textAlign: 'center',
                     margin: '2px',
@@ -38,3 +42,4 @@ export class StyleVisualItem extends React.Component {
         return styleVisualisation;
     }
 }
+exports.StyleVisualItem = StyleVisualItem;

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

@@ -1,19 +1,25 @@
-import * as React from 'react';
-import { ValueOptionsTags, ValueSelector } from '../ValueSelector';
-import { useAdaptable } from '../../AdaptableContext';
-export const TagValueSelector = (props) => {
-    const { api } = useAdaptable();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagValueOptionsTags = exports.TagValueSelector = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const ValueSelector_1 = require("../ValueSelector");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const TagValueSelector = (props) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
     const getDefaultTags = () => {
         var _a;
         return (_a = api.internalApi.getAvailableTags()) !== null && _a !== void 0 ? _a : [];
     };
     const { availableTags = getDefaultTags(), selectedTags = [], onChange, singleSelect } = props;
-    return (React.createElement(ValueSelector, { options: availableTags, value: selectedTags.map((tag) => api.internalApi.getLabelForTag(tag)), singleSelect: singleSelect, allowReorder: false, onChange: (selectedTagsIds, selectedTagsMap) => {
+    return (React.createElement(ValueSelector_1.ValueSelector, { options: availableTags, value: selectedTags.map((tag) => api.internalApi.getLabelForTag(tag)), singleSelect: singleSelect, allowReorder: false, onChange: (selectedTagsIds, selectedTagsMap) => {
             onChange(selectedTagsIds.map((id) => selectedTagsMap.get(id)));
         }, selectionBoxPosition: 'top', toIdentifier: (tag) => api.internalApi.getLabelForTag(tag), toLabel: (tag) => api.internalApi.getLabelForTag(tag), noSelectionLabel: singleSelect ? 'Select a tag' : 'You have not selected any tags.', xSelectedLabel: singleSelect ? () => 'Selected tag:' : () => 'Selected tags:' }));
 };
-export const TagValueOptionsTags = (props) => {
+exports.TagValueSelector = TagValueSelector;
+const TagValueOptionsTags = (props) => {
     const { tags = [] } = props;
-    const { api } = useAdaptable();
-    return (React.createElement(ValueOptionsTags, { options: tags, value: tags.map((tag) => api.internalApi.getValueForTag(tag)), toIdentifier: (tag) => api.internalApi.getValueForTag(tag), toLabel: (tag) => api.internalApi.getLabelForTag(tag), allowWrap: true, readOnly: true }));
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    return (React.createElement(ValueSelector_1.ValueOptionsTags, { options: tags, value: tags.map((tag) => api.internalApi.getValueForTag(tag)), toIdentifier: (tag) => api.internalApi.getValueForTag(tag), toLabel: (tag) => api.internalApi.getLabelForTag(tag), allowWrap: true, readOnly: true }));
 };
+exports.TagValueOptionsTags = TagValueOptionsTags;

package/src/View/Components/ToolPanel/AdaptableToolPanel.js

@@ -1,26 +1,30 @@
-import * as React from 'react';
-import kebabCase from 'lodash/kebabCase';
-import * as ToolPanelRedux from '../../../Redux/ActionsReducers/ToolPanelRedux';
-import * as SystemRedux from '../../../Redux/ActionsReducers/SystemRedux';
-import { connect } from 'react-redux';
-import { Flex } from 'rebass';
-import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
-import { Icon } from '../../../components/icons';
-import { CheckBox } from '../../../components/CheckBox';
-import DropdownButton from '../../../components/DropdownButton';
-import { ALL_TOOL_PANELS, } from '../../../PredefinedConfig/Common/Types';
-import SimpleButton from '../../../components/SimpleButton';
-import { ButtonConfigure } from '../Buttons/ButtonConfigure';
-import { renderWithAdaptableContext } from '../../renderWithAdaptableContext';
-import { ToolPanelWrapper } from './ToolPanelWrapper';
-import { ToolPanelConfigView } from './ToolPanelPopup';
-import { createUuid } from '../../../components/utils/uuid';
-import { ToolPanelModuleId } from '../../../Utilities/Constants/ModuleConstants';
-import HelpBlock from '../../../components/HelpBlock';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAdaptableToolPanelAgGridComponent = exports.ConnectedAdaptableToolPanel = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
+const ToolPanelRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ToolPanelRedux"));
+const SystemRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/SystemRedux"));
+const react_redux_1 = require("react-redux");
+const rebass_1 = require("rebass");
+const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
+const icons_1 = require("../../../components/icons");
+const CheckBox_1 = require("../../../components/CheckBox");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
+const Types_1 = require("../../../PredefinedConfig/Common/Types");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const ButtonConfigure_1 = require("../Buttons/ButtonConfigure");
+const renderWithAdaptableContext_1 = require("../../renderWithAdaptableContext");
+const ToolPanelWrapper_1 = require("./ToolPanelWrapper");
+const ToolPanelPopup_1 = require("./ToolPanelPopup");
+const uuid_1 = require("../../../components/utils/uuid");
+const ModuleConstants_1 = require("../../../Utilities/Constants/ModuleConstants");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const preventDefault = (e) => e.preventDefault();
 const AdaptableToolPanelComponent = (props) => {
     var _a;
-    const toolPanelsGlyph = React.createElement(Icon, { name: 'align-justify' });
+    const toolPanelsGlyph = React.createElement(icons_1.Icon, { name: 'align-justify' });
     const entitlementService = props.api.internalApi.getEntitlementService();
     const moduleService = props.api.internalApi.getModuleService();
     const adaptableOptions = props.api.optionsApi.getAdaptableOptions();
@@ -28,7 +32,7 @@ const AdaptableToolPanelComponent = (props) => {
     const settingsPanelOptions = adaptableOptions.settingsPanelOptions;
     if (entitlementService.isModuleHiddenEntitlement('ToolPanel')) {
         // do NOT show any toolPanel content if the required entitlements are missing
-        return (React.createElement(HelpBlock, { mt: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } }, "Not enough rights"));
+        return (React.createElement(HelpBlock_1.default, { mt: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } }, "Not enough rights"));
     }
     const availableModuleItems = props.MainMenuItems.filter((menuItem) => menuItem.isVisible);
     const availableModules = availableModuleItems.map((menuItem) => menuItem.module);
@@ -44,7 +48,7 @@ const AdaptableToolPanelComponent = (props) => {
         !entitlementService.isModuleHiddenEntitlement('OpenFin')) {
         availableModules.push('OpenFin');
     }
-    const availableModuleToolPanels = ALL_TOOL_PANELS.filter((moduleToolPanel) => ArrayExtensions.ContainsItem(availableModules, moduleToolPanel));
+    const availableModuleToolPanels = Types_1.ALL_TOOL_PANELS.filter((moduleToolPanel) => ArrayExtensions_1.default.ContainsItem(availableModules, moduleToolPanel));
     const onStateChange = (toolPanel, visibilityMode) => {
         if (visibilityMode === 'expanded') {
             props.onExpandToolPanel(toolPanel);
@@ -55,7 +59,7 @@ const AdaptableToolPanelComponent = (props) => {
     };
     const isToolPanelModuleConfigurable = props.api.internalApi
         .getModuleService()
-        .getModuleById(ToolPanelModuleId)
+        .getModuleById(ModuleConstants_1.ToolPanelModuleId)
         .isModuleEditable();
     const visibleToolPanels = [];
     const visibleToolPanelControls = ((_a = props.ToolPanels) !== null && _a !== void 0 ? _a : []).map((toolPanelDefinition) => {
@@ -65,14 +69,14 @@ const AdaptableToolPanelComponent = (props) => {
         const customToolPanel = props.api.toolPanelApi.getCustomToolPanelByName(toolPanelDefinition.Name);
         if (customToolPanel) {
             visibleToolPanels.push(customToolPanel.name);
-            return (React.createElement(ToolPanelWrapper, { key: customToolPanel.name, customToolPanel: customToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(customToolPanel.name, state) }));
+            return (React.createElement(ToolPanelWrapper_1.ToolPanelWrapper, { key: customToolPanel.name, customToolPanel: customToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(customToolPanel.name, state) }));
         }
         // 2. check if it's an available module toolPanel
         if (availableModuleToolPanels.some((module) => module === toolPanelDefinition.Name)) {
             // assertion is safe as if just checked it in the if clause
             const moduleToolPanel = toolPanelDefinition.Name;
             visibleToolPanels.push(moduleToolPanel);
-            return (React.createElement(ToolPanelWrapper, { key: moduleToolPanel, adaptableToolPanel: moduleToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(moduleToolPanel, state) }));
+            return (React.createElement(ToolPanelWrapper_1.ToolPanelWrapper, { key: moduleToolPanel, adaptableToolPanel: moduleToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(moduleToolPanel, state) }));
         }
     });
     const renderToolPanelDropdowns = () => {
@@ -86,7 +90,7 @@ const AdaptableToolPanelComponent = (props) => {
                     ' ',
                     "\u00A0\u00A0",
                     React.createElement("b", null, 'Tool Panels'),
-                    renderToolPanelConfigureButton(ToolPanelConfigView.ToolPanels))),
+                    renderToolPanelConfigureButton(ToolPanelPopup_1.ToolPanelConfigView.ToolPanels))),
             },
         ];
         const isItemVisible = (panelItem) => visibleToolPanels.includes(panelItem);
@@ -96,7 +100,7 @@ const AdaptableToolPanelComponent = (props) => {
                 onClick: () => {
                     onSetToolPanelVisibility(toolPanel, !isVisible);
                 },
-                label: (React.createElement(CheckBox, { className: "ab-dd-checkbox", variant: "agGrid", my: 0, as: "div", value: toolPanel, key: toolPanel, checked: isVisible, onMouseDown: preventDefault }, toolPanel)),
+                label: (React.createElement(CheckBox_1.CheckBox, { className: "ab-dd-checkbox", variant: "agGrid", my: 0, as: "div", value: toolPanel, key: toolPanel, checked: isVisible, onMouseDown: preventDefault }, toolPanel)),
             };
         };
         // 1. process custom tool panels
@@ -119,7 +123,7 @@ const AdaptableToolPanelComponent = (props) => {
             }
             return 0;
         });
-        return (React.createElement(DropdownButton, { variant: "text", tone: "none", collapseOnItemClick: false, key: 'dropdown-toolpanels', id: 'dropdown-toolpanels', className: "ab-ToolPanel__toolbars", columns: ['label'], items: toolpanelItems, tooltip: "Manage Tool Panels" }, toolPanelsGlyph));
+        return (React.createElement(DropdownButton_1.default, { variant: "text", tone: "none", collapseOnItemClick: false, key: 'dropdown-toolpanels', id: 'dropdown-toolpanels', className: "ab-ToolPanel__toolbars", columns: ['label'], items: toolpanelItems, tooltip: "Manage Tool Panels" }, toolPanelsGlyph));
     };
     const renderToolPanelButtons = () => {
         const toolPanelButtons = [];
@@ -133,7 +137,7 @@ const AdaptableToolPanelComponent = (props) => {
             toolPanelButtons.push(moduleButtons.map((x) => {
                 let menuItem = props.MainMenuItems.find((y) => y.isVisible && y.module == x);
                 if (menuItem) {
-                    return (React.createElement(SimpleButton, { "data-name": menuItem.module, key: menuItem.label, icon: menuItem.icon, tone: "none", variant: "text", className: `ab-ToolPanel__Home__${kebabCase(menuItem.label)}`, tooltip: menuItem.label, onClick: () => props.onClick(menuItem.reduxAction), accessLevel: 'Full' }));
+                    return (React.createElement(SimpleButton_1.default, { "data-name": menuItem.module, key: menuItem.label, icon: menuItem.icon, tone: "none", variant: "text", className: `ab-ToolPanel__Home__${(0, kebabCase_1.default)(menuItem.label)}`, tooltip: menuItem.label, onClick: () => props.onClick(menuItem.reduxAction), accessLevel: 'Full' }));
                 }
             }));
         }
@@ -159,8 +163,8 @@ const AdaptableToolPanelComponent = (props) => {
             const disabled = button.disabled && button.disabled(button, toolPanelContext);
             const buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text';
             const buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none';
-            const uniqueKey = buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : createUuid();
-            return (React.createElement(SimpleButton, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
+            const uniqueKey = buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : (0, uuid_1.createUuid)();
+            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${(0, kebabCase_1.default)(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
         });
     };
     const onSetColumnVisibility = (name) => {
@@ -185,22 +189,22 @@ const AdaptableToolPanelComponent = (props) => {
         const moduleParams = initialTab
             ? { source: 'Other', config: { initialTab } }
             : undefined;
-        return (React.createElement(ButtonConfigure, { iconSize: 16, tone: "none", marginLeft: 2, className: "ab-ToolPanel__configure-button", tooltip: 'Configure ToolPanels', onClick: () => {
+        return (React.createElement(ButtonConfigure_1.ButtonConfigure, { iconSize: 16, tone: "none", marginLeft: 2, className: "ab-ToolPanel__configure-button", tooltip: 'Configure ToolPanels', onClick: () => {
                 props.api.internalApi.showSettingsPanel('ToolPanel', moduleParams);
             } }));
     };
     const toolPanelButtons = renderToolPanelButtons();
-    return (React.createElement(Flex, { className: "ab-ToolPanel", "data-name": "adaptable-tool-panel", flexDirection: "column", justifyContent: "center", padding: 2, style: {
+    return (React.createElement(rebass_1.Flex, { className: "ab-ToolPanel", "data-name": "adaptable-tool-panel", flexDirection: "column", justifyContent: "center", padding: 2, style: {
             width: '100%',
             // Cannot have the with of the parent, on windows, when you have scrollbars
             // the inner-width is smaller
             // minWidth: 'var(--ab-cmp-toolpanel__width)',
         } },
-        React.createElement(Flex, { className: "ab-ToolPanel__header", flexDirection: "row", justifyContent: "left", padding: 1, flexWrap: "wrap", style: { width: '100%' } },
+        React.createElement(rebass_1.Flex, { className: "ab-ToolPanel__header", flexDirection: "row", justifyContent: "left", padding: 1, flexWrap: "wrap", style: { width: '100%' } },
             isToolPanelModuleConfigurable && renderToolPanelDropdowns(),
             toolPanelButtons,
             isToolPanelModuleConfigurable && renderToolPanelConfigureButton()),
-        Boolean(props.api.toolPanelApi.getCustomToolPanelButtons().length) && (React.createElement(Flex, { className: "ab-ToolPanel__header__buttons", flexDirection: "row", justifyContent: "left", padding: 1, flexWrap: "wrap" }, renderCustomToolPanelButtons())),
+        Boolean(props.api.toolPanelApi.getCustomToolPanelButtons().length) && (React.createElement(rebass_1.Flex, { className: "ab-ToolPanel__header__buttons", flexDirection: "row", justifyContent: "left", padding: 1, flexWrap: "wrap" }, renderCustomToolPanelButtons())),
         visibleToolPanelControls));
 };
 function mapStateToProps(state) {
@@ -222,18 +226,18 @@ function mapDispatchToProps(dispatch) {
         onCollapseToolPanel: (toolPanel) => dispatch(ToolPanelRedux.ToolPanelCollapseToolPanel(toolPanel)),
     };
 }
-export const ConnectedAdaptableToolPanel = connect(mapStateToProps, mapDispatchToProps)(AdaptableToolPanelComponent);
+exports.ConnectedAdaptableToolPanel = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(AdaptableToolPanelComponent);
 const toolPanelContainerStyle = {
     width: '100%',
     overflow: 'auto',
 };
-export const getAdaptableToolPanelAgGridComponent = (adaptable) => {
+const getAdaptableToolPanelAgGridComponent = (adaptable) => {
     function getContainerId() {
         return 'adaptable-tool-panel_' + adaptable.adaptableOptions.adaptableId;
     }
     if (adaptable.variant === 'react') {
         return () => {
-            const content = renderWithAdaptableContext(React.createElement(ConnectedAdaptableToolPanel, { api: adaptable.api, teamSharingActivated: false }), adaptable);
+            const content = (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(exports.ConnectedAdaptableToolPanel, { api: adaptable.api, teamSharingActivated: false }), adaptable);
             return (React.createElement("div", { id: getContainerId(), className: 'ag-adaptable-panel', style: toolPanelContainerStyle }, content));
         };
     }
@@ -248,7 +252,7 @@ export const getAdaptableToolPanelAgGridComponent = (adaptable) => {
                 //@ts-ignore
                 this.gui.style[key] = toolPanelContainerStyle[key];
             });
-            this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(React.createElement(ConnectedAdaptableToolPanel, { api: api, teamSharingActivated: false }), adaptable), this.gui);
+            this.unmountReactRoot = adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(exports.ConnectedAdaptableToolPanel, { api: api, teamSharingActivated: false }), adaptable), this.gui);
         }
         getGui() {
             if (!this.gui) {
@@ -265,3 +269,4 @@ export const getAdaptableToolPanelAgGridComponent = (adaptable) => {
         }
     };
 };
+exports.getAdaptableToolPanelAgGridComponent = getAdaptableToolPanelAgGridComponent;

package/src/View/Components/ToolPanel/CustomToolPanelContent.js

@@ -1,18 +1,22 @@
-import * as React from 'react';
-import { useLayoutEffect, useRef, useState } from 'react';
-import { useAdaptable } from '../../AdaptableContext';
-import { createUuid } from '../../../components/utils/uuid';
-import SimpleButton from '../../../components/SimpleButton';
-import kebabCase from 'lodash/kebabCase';
-export const CustomToolPanelContent = (props) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomToolPanelContent = 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 uuid_1 = require("../../../components/utils/uuid");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
+const CustomToolPanelContent = (props) => {
     var _a;
     const { customToolPanel } = props;
-    const { api } = useAdaptable();
-    const contentsDivDomRef = useRef();
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const contentsDivDomRef = (0, react_1.useRef)();
     const contentsDivId = `ab-ToolPanel__${customToolPanel.name}__contents`;
     const buttonsDivId = `ab-ToolPanel__${customToolPanel.name}__buttons`;
-    const [contentsHTML, setContentsHTML] = useState('');
-    useLayoutEffect(() => {
+    const [contentsHTML, setContentsHTML] = (0, react_1.useState)('');
+    (0, react_1.useLayoutEffect)(() => {
         const element = contentsDivDomRef.current;
         if (hasCustomRenderFn(customToolPanel)) {
             const customRenderContext = {
@@ -65,9 +69,10 @@ export const CustomToolPanelContent = (props) => {
             const disabled = button.disabled && button.disabled(button, toolPanelContext);
             const buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text';
             const buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none';
-            const uniqueKey = buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : createUuid();
-            return (React.createElement(SimpleButton, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
+            const uniqueKey = buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : (0, uuid_1.createUuid)();
+            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${(0, kebabCase_1.default)(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
         })))));
 };
+exports.CustomToolPanelContent = CustomToolPanelContent;
 const hasCustomRenderFn = (customToolPanel) => customToolPanel.render;
 const hasCustomFrameworkComponent = (customToolPanel) => customToolPanel.frameworkComponent;

package/src/View/Components/ToolPanel/ToolPanelPopup.js

@@ -1,17 +1,21 @@
-import * as React from 'react';
-import { connect } from 'react-redux';
-import * as ToolPanelRedux from '../../../Redux/ActionsReducers/ToolPanelRedux';
-import { PopupPanel } from '../Popups/AdaptablePopup/PopupPanel';
-import Radio from '../../../components/Radio';
-import { ALL_TOOL_PANELS, } from '../../../PredefinedConfig/Common/Types';
-import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
-import { ModuleValueSelector } from '../ModuleValueSelector';
-import { Tabs } from '../../../components/Tabs';
-export var ToolPanelConfigView;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolPanelPopup = exports.ToolPanelConfigView = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const ToolPanelRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ToolPanelRedux"));
+const PopupPanel_1 = require("../Popups/AdaptablePopup/PopupPanel");
+const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
+const Types_1 = require("../../../PredefinedConfig/Common/Types");
+const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
+const ModuleValueSelector_1 = require("../ModuleValueSelector");
+const Tabs_1 = require("../../../components/Tabs");
+var ToolPanelConfigView;
 (function (ToolPanelConfigView) {
     ToolPanelConfigView["Buttons"] = "Buttons";
     ToolPanelConfigView["ToolPanels"] = "ToolPanels";
-})(ToolPanelConfigView || (ToolPanelConfigView = {}));
+})(ToolPanelConfigView = exports.ToolPanelConfigView || (exports.ToolPanelConfigView = {}));
 class ToolPanelPopupComponent extends React.Component {
     constructor(props) {
         var _a, _b, _c;
@@ -25,7 +29,7 @@ class ToolPanelPopupComponent extends React.Component {
         const entitlementService = this.props.api.internalApi.getEntitlementService();
         // 1. process module buttons
         const selectedModuleButtons = [];
-        if (ArrayExtensions.IsNotNullOrEmpty(this.props.ToolPanelState.ModuleButtons)) {
+        if (ArrayExtensions_1.default.IsNotNullOrEmpty(this.props.ToolPanelState.ModuleButtons)) {
             this.props.ToolPanelState.ModuleButtons.forEach((module) => {
                 let menuItem = this.props.GridState.SettingPanelModuleMenuItems.find((m) => m.module == module);
                 if (menuItem === null || menuItem === void 0 ? void 0 : menuItem.isVisible) {
@@ -48,7 +52,7 @@ class ToolPanelPopupComponent extends React.Component {
             !entitlementService.isModuleHiddenEntitlement('OpenFin')) {
             availableModules.push('OpenFin');
         }
-        const availableModuleToolPanels = ALL_TOOL_PANELS.filter((moduleToolPanel) => ArrayExtensions.ContainsItem(availableModules, moduleToolPanel));
+        const availableModuleToolPanels = Types_1.ALL_TOOL_PANELS.filter((moduleToolPanel) => ArrayExtensions_1.default.ContainsItem(availableModules, moduleToolPanel));
         const availableCustomToolPanels = this.props.api.toolPanelApi
             .getCustomToolPanels()
             .map((customToolPanel) => customToolPanel.name);
@@ -66,16 +70,16 @@ class ToolPanelPopupComponent extends React.Component {
             }
             return false;
         };
-        return (React.createElement(PopupPanel, { headerText: "ToolPanel", glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
-            React.createElement(Tabs, { "data-name": 'toolPanelPopup-component', className: "ab-ToolPanelPopup", value: this.state.ToolPanelConfigView, style: { height: '100%' }, onValueChange: (value) => this.setState({ ToolPanelConfigView: value }) },
-                React.createElement(Tabs.Tab, { value: ToolPanelConfigView.ToolPanels },
-                    React.createElement(Radio, { margin: 0, value: ToolPanelConfigView.ToolPanels, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.ToolPanels, tabIndex: -1 }, "Tool Panels")),
-                React.createElement(Tabs.Tab, { value: ToolPanelConfigView.Buttons },
-                    React.createElement(Radio, { margin: 0, value: ToolPanelConfigView.Buttons, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.Buttons, tabIndex: -1 }, "Module Buttons")),
-                React.createElement(Tabs.Content, { value: ToolPanelConfigView.ToolPanels, style: { flex: 1, overflow: 'auto' } },
-                    React.createElement(ModuleValueSelector, { options: availableToolPanels, value: selectedToolPanels, noSelectionLabel: 'No selected Tool Panel', xSelectedLabel: () => `Visible ToolPanels:`, onChange: (selectedValues) => this.onToolPanelToolPanelsChanged(selectedValues), disabled: isToolPanelReadOnly })),
-                React.createElement(Tabs.Content, { value: ToolPanelConfigView.Buttons, style: { flex: 1, overflow: 'auto' } },
-                    React.createElement(ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', xSelectedLabel: () => `Visible Module Buttons:`, isOptionDisabled: isModuleCheckboxDisabled, disabled: isToolPanelReadOnly, onChange: (selectedValues) => this.props.onToolPanelSetModuleButtons(selectedValues) })))));
+        return (React.createElement(PopupPanel_1.PopupPanel, { headerText: "Tool Panel", glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
+            React.createElement(Tabs_1.Tabs, { "data-name": 'toolPanelPopup-component', className: "ab-ToolPanelPopup", value: this.state.ToolPanelConfigView, style: { height: '100%' }, onValueChange: (value) => this.setState({ ToolPanelConfigView: value }) },
+                React.createElement(Tabs_1.Tabs.Tab, { value: ToolPanelConfigView.ToolPanels },
+                    React.createElement(Radio_1.default, { margin: 0, value: ToolPanelConfigView.ToolPanels, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.ToolPanels, tabIndex: -1 }, "Tool Panels")),
+                React.createElement(Tabs_1.Tabs.Tab, { value: ToolPanelConfigView.Buttons },
+                    React.createElement(Radio_1.default, { margin: 0, value: ToolPanelConfigView.Buttons, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.Buttons, tabIndex: -1 }, "Module Buttons")),
+                React.createElement(Tabs_1.Tabs.Content, { value: ToolPanelConfigView.ToolPanels, style: { flex: 1, overflow: 'auto' } },
+                    React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: availableToolPanels, value: selectedToolPanels, noSelectionLabel: 'No selected Tool Panel', xSelectedLabel: () => `Visible Tool Panels:`, onChange: (selectedValues) => this.onToolPanelToolPanelsChanged(selectedValues), disabled: isToolPanelReadOnly })),
+                React.createElement(Tabs_1.Tabs.Content, { value: ToolPanelConfigView.Buttons, style: { flex: 1, overflow: 'auto' } },
+                    React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', xSelectedLabel: () => `Visible Module Buttons:`, isOptionDisabled: isModuleCheckboxDisabled, disabled: isToolPanelReadOnly, onChange: (selectedValues) => this.props.onToolPanelSetModuleButtons(selectedValues) })))));
     }
     onShowGridPropertiesChanged(event) {
         let e = event.target;
@@ -110,4 +114,4 @@ function mapDispatchToProps(dispatch) {
         onToolPanelSetToolPanels: (toolPanels) => dispatch(ToolPanelRedux.ToolPanelSetToolPanels(toolPanels)),
     };
 }
-export let ToolPanelPopup = connect(mapStateToProps, mapDispatchToProps)(ToolPanelPopupComponent);
+exports.ToolPanelPopup = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(ToolPanelPopupComponent);

package/src/View/Components/ToolPanel/ToolPanelWrapper.d.ts

@@ -2,7 +2,7 @@
 import { AdaptableToolPanel } from '../../../PredefinedConfig/Common/Types';
 import { CustomToolPanel } from '../../../AdaptableOptions/ToolPanelOptions';
 import { ToolPanelVisibilityMode } from '../../../PredefinedConfig/ToolPanelState';
-export declare type ToolPanelWrapperProps = {
+export type ToolPanelWrapperProps = {
     adaptableToolPanel: AdaptableToolPanel;
     customToolPanel?: undefined;
     visibilityMode: ToolPanelVisibilityMode;

package/src/View/Components/ToolPanel/ToolPanelWrapper.js

@@ -1,15 +1,19 @@
-import * as React from 'react';
-import { useAdaptable } from '../../AdaptableContext';
-import { AdaptableViewPanelFactory } from '../../AdaptableViewFactory';
-import { CustomToolPanelContent } from './CustomToolPanelContent';
-import { Box } from 'rebass';
-import * as ToolPanelRedux from '../../../Redux/ActionsReducers/ToolPanelRedux';
-import { PanelToolPanel } from '../Panels/PanelToolPanel';
-import * as PopupRedux from '../../../Redux/ActionsReducers/PopupRedux';
-import { ToolPanelModuleId } from '../../../Utilities/Constants/ModuleConstants';
-export const ToolPanelWrapper = (props) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolPanelWrapper = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const AdaptableContext_1 = require("../../AdaptableContext");
+const AdaptableViewFactory_1 = require("../../AdaptableViewFactory");
+const CustomToolPanelContent_1 = require("./CustomToolPanelContent");
+const rebass_1 = require("rebass");
+const ToolPanelRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ToolPanelRedux"));
+const PanelToolPanel_1 = require("../Panels/PanelToolPanel");
+const PopupRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/PopupRedux"));
+const ModuleConstants_1 = require("../../../Utilities/Constants/ModuleConstants");
+const ToolPanelWrapper = (props) => {
     const { adaptableToolPanel, customToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: onVisibilityModeChange, } = props;
-    const { api } = useAdaptable();
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
     const getToolPanelConfiguration = () => {
         var _a;
         if (adaptableToolPanel) {
@@ -19,7 +23,7 @@ export const ToolPanelWrapper = (props) => {
             const moduleInfo = api.internalApi
                 .getModuleService()
                 .getModuleInfoByModule(adaptableToolPanel);
-            const ModuleToolPanel = AdaptableViewPanelFactory.get(adaptableToolPanel);
+            const ModuleToolPanel = AdaptableViewFactory_1.AdaptableViewPanelFactory.get(adaptableToolPanel);
             return [
                 adaptableToolPanel,
                 moduleInfo.FriendlyName,
@@ -32,7 +36,7 @@ export const ToolPanelWrapper = (props) => {
             return [
                 customToolPanel.name,
                 (_a = customToolPanel === null || customToolPanel === void 0 ? void 0 : customToolPanel.title) !== null && _a !== void 0 ? _a : customToolPanel.name,
-                React.createElement(CustomToolPanelContent, { customToolPanel: customToolPanel }),
+                React.createElement(CustomToolPanelContent_1.CustomToolPanelContent, { customToolPanel: customToolPanel }),
             ];
         }
     };
@@ -46,10 +50,10 @@ export const ToolPanelWrapper = (props) => {
         toolPanelName !== 'Glue42';
     const isToolPanelModuleConfigurable = api.internalApi
         .getModuleService()
-        .getModuleById(ToolPanelModuleId)
+        .getModuleById(ModuleConstants_1.ToolPanelModuleId)
         .isModuleEditable();
-    return (React.createElement(React.Fragment, null, toolPanelContent && (React.createElement(Box, { marginTop: 1, className: `ab-ToolPanel__container ab-ToolPanel__container--${toolPanelName}` },
-        React.createElement(PanelToolPanel, { className: `ab-ToolPanel__${toolPanelName}`, "data-name": `ab-ToolPanel__${toolPanelName}`, headerText: toolPanelHeader, disabled: !isToolPanelModuleConfigurable, onMinimiseChanged: () => {
+    return (React.createElement(React.Fragment, null, toolPanelContent && (React.createElement(rebass_1.Box, { marginTop: 1, className: `ab-ToolPanel__container ab-ToolPanel__container--${toolPanelName}` },
+        React.createElement(PanelToolPanel_1.PanelToolPanel, { className: `ab-ToolPanel__${toolPanelName}`, "data-name": `ab-ToolPanel__${toolPanelName}`, headerText: toolPanelHeader, disabled: !isToolPanelModuleConfigurable, onMinimiseChanged: () => {
                 onVisibilityModeChange(isMinimised ? 'expanded' : 'collapsed');
             }, isMinimised: isMinimised, onConfigure: isConfigurable
                 ? () => {
@@ -63,3 +67,4 @@ export const ToolPanelWrapper = (props) => {
                 }
                 : null, onClose: () => api.internalApi.dispatchReduxAction(ToolPanelRedux.ToolPanelHideToolPanel(toolPanelName)) }, isMinimised ? null : toolPanelContent)))));
 };
+exports.ToolPanelWrapper = ToolPanelWrapper;

package/src/View/Components/ValueSelector/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-export declare type ValueSelectorProps<OPTION_TYPE, ID_TYPE extends number | string> = {
+export type ValueSelectorProps<OPTION_TYPE, ID_TYPE extends number | string> = {
     options: OPTION_TYPE[];
     value: ID_TYPE[];
     onChange: (selected: ID_TYPE[], selectedMap: Map<ID_TYPE, OPTION_TYPE>) => void;
@@ -33,7 +33,7 @@ export declare namespace ValueSelector {
         allowReorder: boolean;
     };
 }
-declare type ValueOptionsTagsProps<OPTION_TYPE, ID_TYPE extends number | string> = {
+type ValueOptionsTagsProps<OPTION_TYPE, ID_TYPE extends number | string> = {
     style?: React.CSSProperties;
     options: OPTION_TYPE[];
     value: ID_TYPE[];