@adaptabletools/adaptable 16.2.4 → 17.0.0-canary.0

package/src/View/Components/StyleComponent.js

@@ -1,41 +1,37 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyleComponent = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const Enums_1 = require("../../PredefinedConfig/Common/Enums");
-const EnumExtensions_1 = require("../../Utilities/Extensions/EnumExtensions");
-const ColorPicker_1 = require("../../components/ColorPicker");
-const rebass_1 = require("rebass");
-const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
-const CheckBox_1 = require("../../components/CheckBox");
-const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
-const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
-const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
-const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
-const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
-const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
-const StylePreview_1 = require("../../components/StylePreview");
-const ToggleGroup_1 = require("../../components/Toggle/ToggleGroup");
-const Toggle_1 = require("../../components/Toggle/Toggle");
-const AdaptableInput_1 = tslib_1.__importDefault(require("./AdaptableInput"));
-class StyleComponent extends React.Component {
+import * as React from 'react';
+import { FontWeight, FontStyle, FontSize } from '../../PredefinedConfig/Common/Enums';
+import { EnumExtensions } from '../../Utilities/Extensions/EnumExtensions';
+import { ColorPicker } from '../../components/ColorPicker';
+import { Text, Flex, Box } from 'rebass';
+import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
+import { CheckBox } from '../../components/CheckBox';
+import Panel from '../../components/Panel';
+import HelpBlock from '../../components/HelpBlock';
+import FormLayout, { FormRow } from '../../components/FormLayout';
+import DropdownButton from '../../components/DropdownButton';
+import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
+import Radio from '../../components/Radio';
+import { StylePreview } from '../../components/StylePreview';
+import { ToggleGroup } from '../../components/Toggle/ToggleGroup';
+import { Toggle } from '../../components/Toggle/Toggle';
+import AdaptableInput from './AdaptableInput';
+export class StyleComponent extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
             componentStyle: this.props.Style,
-            ShowClassName: StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.Style.ClassName),
+            ShowClassName: StringExtensions.IsNotNullOrEmpty(this.props.Style.ClassName),
         };
     }
     static getDerivedStateFromProps(nextProps, prevState) {
         return {
             componentStyle: nextProps.Style,
-            ShowClassName: StringExtensions_1.StringExtensions.IsNotNullOrEmpty(nextProps.Style.ClassName),
+            ShowClassName: StringExtensions.IsNotNullOrEmpty(nextProps.Style.ClassName),
         };
     }
     render() {
         var _a, _b;
-        const Cmp = this.props.headless ? rebass_1.Box : Panel_1.default;
+        const Cmp = this.props.headless ? Box : Panel;
         const cmpProps = this.props.headless
             ? {}
             : {
@@ -47,16 +43,16 @@ class StyleComponent extends React.Component {
         const colourSpellingVariant = this.props.api.internalApi.getCorrectEnglishVariant('Colour');
         const coloursSpellingVariant = this.props.api.internalApi.getCorrectEnglishVariant('colours');
         let fontSizes = ['Default'];
-        fontSizes.push(...EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize));
+        fontSizes.push(...EnumExtensions.getNames(FontSize));
         return (React.createElement(Cmp, Object.assign({}, cmpProps, { className: "ab-StyleComponent" }),
-            ArrayExtensions_1.default.IsNotNullOrEmpty(styleClassNames) && (React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2 },
-                React.createElement(Radio_1.default, { "data-name": "show-class-name", value: "Predicate", checked: this.state.ShowClassName, onChange: (checked) => this.onShowClassNameChanged(checked) }, "Use Style Class Name"),
+            ArrayExtensions.IsNotNullOrEmpty(styleClassNames) && (React.createElement(Flex, { flexDirection: "row", padding: 2 },
+                React.createElement(Radio, { "data-name": "show-class-name", value: "Predicate", checked: this.state.ShowClassName, onChange: (checked) => this.onShowClassNameChanged(checked) }, "Use Style Class Name"),
                 ' ',
-                React.createElement(Radio_1.default, { "data-name": "create-style", marginLeft: 3, value: "Expression", checked: !this.state.ShowClassName, onChange: (checked) => this.onShowClassNameChanged(!checked) }, "Create Style"),
+                React.createElement(Radio, { "data-name": "create-style", marginLeft: 3, value: "Expression", checked: !this.state.ShowClassName, onChange: (checked) => this.onShowClassNameChanged(!checked) }, "Create Style"),
                 ' ')),
             this.state.ShowClassName ? (React.createElement("div", null,
-                React.createElement(HelpBlock_1.default, { fontSize: 2 }, 'Select a CSS Class Name'),
-                React.createElement(DropdownButton_1.default, { "data-name": "select-class-anme", margin: 3, placeholder: "Select", variant: "outlined", columns: ['label'], tone: "none", disabled: ArrayExtensions_1.default.IsNullOrEmpty(styleClassNames), style: {
+                React.createElement(HelpBlock, { fontSize: 2 }, 'Select a CSS Class Name'),
+                React.createElement(DropdownButton, { "data-name": "select-class-anme", margin: 3, placeholder: "Select", variant: "outlined", columns: ['label'], tone: "none", disabled: ArrayExtensions.IsNullOrEmpty(styleClassNames), style: {
                         minWidth: '15rem',
                         whiteSpace: 'nowrap',
                         overflow: 'hidden',
@@ -66,59 +62,59 @@ class StyleComponent extends React.Component {
                         label: item,
                         onClick: () => this.onStyleClassNameChanged(item),
                     })) }, this.state.componentStyle.ClassName),
-                React.createElement(rebass_1.Text, { color: 'var(--ab-color-warn)', style: { flex: 2 }, margin: 2 }, 'Please ensure that the styles listed are in the current stylesheet'))) : (React.createElement(rebass_1.Flex, { flexDirection: "column" },
-                React.createElement(rebass_1.Flex, { flex: 1 },
+                React.createElement(Text, { color: 'var(--ab-color-warn)', style: { flex: 2 }, margin: 2 }, 'Please ensure that the styles listed are in the current stylesheet'))) : (React.createElement(Flex, { flexDirection: "column" },
+                React.createElement(Flex, { flex: 1 },
                     React.createElement("div", null,
-                        React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 },
+                        React.createElement(HelpBlock, { fontSize: 2, marginTop: 2, marginBottom: 2 },
                             "Set ",
                             coloursSpellingVariant,
                             " by ticking a checkbox and selecting from the dropdown; leave unchecked to use cell's existing ",
                             coloursSpellingVariant),
-                        React.createElement(FormLayout_1.default, { columns: [1, 2] },
-                            React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-background-color", value: "existing", margin: 1, checked: !!this.state.componentStyle.BackColor, onChange: (checked) => this.onUseBackColorCheckChange(checked) },
+                        React.createElement(FormLayout, { columns: [1, 2] },
+                            React.createElement(FormRow, null,
+                                React.createElement(CheckBox, { "data-name": "set-background-color", value: "existing", margin: 1, checked: !!this.state.componentStyle.BackColor, onChange: (checked) => this.onUseBackColorCheckChange(checked) },
                                     "Back ",
                                     colourSpellingVariant),
-                                this.state.componentStyle.BackColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.BackColor, onChange: (x) => this.onBackColorSelectChange(x) })) : (React.createElement("span", null))),
-                            React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-foreground-color", margin: 1, value: "existing", checked: this.state.componentStyle.ForeColor ? true : false, onChange: (checked) => this.onUseForeColorCheckChange(checked) },
+                                this.state.componentStyle.BackColor != null ? (React.createElement(ColorPicker, { api: this.props.api, value: this.state.componentStyle.BackColor, onChange: (x) => this.onBackColorSelectChange(x) })) : (React.createElement("span", null))),
+                            React.createElement(FormRow, null,
+                                React.createElement(CheckBox, { "data-name": "set-foreground-color", margin: 1, value: "existing", checked: this.state.componentStyle.ForeColor ? true : false, onChange: (checked) => this.onUseForeColorCheckChange(checked) },
                                     "Fore ",
                                     colourSpellingVariant),
-                                this.state.componentStyle.ForeColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.ForeColor, onChange: (x) => this.onForeColorSelectChange(x) })) : (React.createElement("span", null))),
-                            React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-border-color", margin: 1, value: "existing", checked: this.state.componentStyle.BorderColor ? true : false, onChange: (checked) => this.onUseBorderColorCheckChange(checked) },
+                                this.state.componentStyle.ForeColor != null ? (React.createElement(ColorPicker, { api: this.props.api, value: this.state.componentStyle.ForeColor, onChange: (x) => this.onForeColorSelectChange(x) })) : (React.createElement("span", null))),
+                            React.createElement(FormRow, null,
+                                React.createElement(CheckBox, { "data-name": "set-border-color", margin: 1, value: "existing", checked: this.state.componentStyle.BorderColor ? true : false, onChange: (checked) => this.onUseBorderColorCheckChange(checked) },
                                     "Border ",
                                     colourSpellingVariant),
-                                this.state.componentStyle.BorderColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.BorderColor, onChange: (x) => this.onBorderColorSelectChange(x) })) : (React.createElement("span", null)))),
-                        React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Set the font properties of the Style"),
-                        React.createElement(FormLayout_1.default, null,
-                            React.createElement(FormLayout_1.FormRow, { label: "Font Style" },
-                                React.createElement(ToggleGroup_1.ToggleGroup, null,
-                                    React.createElement(Toggle_1.Toggle, { pressed: this.state.componentStyle.FontStyle == Enums_1.FontStyle.Italic, onPressedChange: (checked) => this.onFontStyleChange(checked), icon: "italic" }),
-                                    React.createElement(Toggle_1.Toggle, { pressed: this.state.componentStyle.FontWeight == Enums_1.FontWeight.Bold, onPressedChange: (checked) => this.onFontWeightChange(checked), icon: "bold" }))),
-                            React.createElement(FormLayout_1.FormRow, { label: "Text Decoration" },
-                                React.createElement(ToggleGroup_1.ToggleGroup, null,
-                                    React.createElement(Toggle_1.Toggle, { icon: "underline", pressed: this.state.componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'Underline' : 'None') }),
-                                    React.createElement(Toggle_1.Toggle, { icon: "strikethrough", pressed: this.state.componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
-                                    React.createElement(Toggle_1.Toggle, { icon: "overline", pressed: this.state.componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'Overline' : 'None') }))),
-                            React.createElement(FormLayout_1.FormRow, { label: "Font Size" }, !this.props.showFontSizeAs || this.props.showFontSizeAs === 'dropdown' ? (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center" },
-                                React.createElement(DropdownButton_1.default, { width: "100px", mr: 1, items: [
+                                this.state.componentStyle.BorderColor != null ? (React.createElement(ColorPicker, { api: this.props.api, value: this.state.componentStyle.BorderColor, onChange: (x) => this.onBorderColorSelectChange(x) })) : (React.createElement("span", null)))),
+                        React.createElement(HelpBlock, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Set the font properties of the Style"),
+                        React.createElement(FormLayout, null,
+                            React.createElement(FormRow, { label: "Font Style" },
+                                React.createElement(ToggleGroup, null,
+                                    React.createElement(Toggle, { pressed: this.state.componentStyle.FontStyle == FontStyle.Italic, onPressedChange: (checked) => this.onFontStyleChange(checked), icon: "italic" }),
+                                    React.createElement(Toggle, { pressed: this.state.componentStyle.FontWeight == FontWeight.Bold, onPressedChange: (checked) => this.onFontWeightChange(checked), icon: "bold" }))),
+                            React.createElement(FormRow, { label: "Text Decoration" },
+                                React.createElement(ToggleGroup, null,
+                                    React.createElement(Toggle, { icon: "underline", pressed: this.state.componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'Underline' : 'None') }),
+                                    React.createElement(Toggle, { icon: "strikethrough", pressed: this.state.componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
+                                    React.createElement(Toggle, { icon: "overline", pressed: this.state.componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'Overline' : 'None') }))),
+                            React.createElement(FormRow, { label: "Font Size" }, !this.props.showFontSizeAs || this.props.showFontSizeAs === 'dropdown' ? (React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
+                                React.createElement(DropdownButton, { width: "100px", mr: 1, items: [
                                         {
                                             value: '',
                                             label: 'Default',
                                             onClick: () => this.onFontSizeChange(''),
                                         },
-                                        ...EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize).map((enumName) => ({
+                                        ...EnumExtensions.getNames(FontSize).map((enumName) => ({
                                             value: enumName,
                                             label: enumName,
                                             onClick: () => this.onFontSizeChange(enumName),
                                         })),
-                                    ], columns: ['label'] }, (_b = (_a = this.state.componentStyle.FontSize) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : 'Default'))) : (React.createElement(rebass_1.Box, null, fontSizes.map((enumName) => {
-                                return (React.createElement(Radio_1.default, { onClick: () => this.onFontSizeChange(enumName), checked: (enumName == 'Default' && !this.state.componentStyle.FontSize) ||
+                                    ], columns: ['label'] }, (_b = (_a = this.state.componentStyle.FontSize) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : 'Default'))) : (React.createElement(Box, null, fontSizes.map((enumName) => {
+                                return (React.createElement(Radio, { onClick: () => this.onFontSizeChange(enumName), checked: (enumName == 'Default' && !this.state.componentStyle.FontSize) ||
                                         this.state.componentStyle.FontSize === enumName, mr: 3, key: enumName }, enumName));
                             })))),
-                            React.createElement(FormLayout_1.FormRow, { label: "Border Radius" },
-                                React.createElement(AdaptableInput_1.default, { width: "100px", type: "number", min: "0", value: this.state.componentStyle.BorderRadius, onChange: (event) => {
+                            React.createElement(FormRow, { label: "Border Radius" },
+                                React.createElement(AdaptableInput, { width: "100px", type: "number", min: "0", value: this.state.componentStyle.BorderRadius, onChange: (event) => {
                                         const number = Number(event.target.value);
                                         if (isNaN(number)) {
                                             this.onBorderRadiusChange(0);
@@ -127,9 +123,9 @@ class StyleComponent extends React.Component {
                                             this.onBorderRadiusChange(number);
                                         }
                                     } }))))))),
-            !this.props.hidePreview && (React.createElement(rebass_1.Box, null,
-                React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Preview"),
-                React.createElement(StylePreview_1.StylePreview, { styleObject: this.state.componentStyle })))));
+            !this.props.hidePreview && (React.createElement(Box, null,
+                React.createElement(HelpBlock, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Preview"),
+                React.createElement(StylePreview, { styleObject: this.state.componentStyle })))));
     }
     onShowClassNameChanged(checked) {
         // clear everything
@@ -175,7 +171,7 @@ class StyleComponent extends React.Component {
     }
     onUseFontSizeCheckChange(checked) {
         if (checked) {
-            this.state.componentStyle.FontSize = Enums_1.FontSize.Medium;
+            this.state.componentStyle.FontSize = FontSize.Medium;
         }
         else {
             delete this.state.componentStyle.FontSize;
@@ -196,7 +192,7 @@ class StyleComponent extends React.Component {
     }
     onFontWeightChange(checked) {
         if (checked) {
-            this.state.componentStyle.FontWeight = Enums_1.FontWeight.Bold;
+            this.state.componentStyle.FontWeight = FontWeight.Bold;
         }
         else {
             delete this.state.componentStyle.FontWeight;
@@ -205,7 +201,7 @@ class StyleComponent extends React.Component {
     }
     onFontStyleChange(checked) {
         if (checked) {
-            this.state.componentStyle.FontStyle = Enums_1.FontStyle.Italic;
+            this.state.componentStyle.FontStyle = FontStyle.Italic;
         }
         else {
             delete this.state.componentStyle.FontStyle;
@@ -234,4 +230,3 @@ class StyleComponent extends React.Component {
         this.props.UpdateStyle(this.state.componentStyle);
     }
 }
-exports.StyleComponent = StyleComponent;

package/src/View/Components/StyleVisualItem.js

@@ -1,18 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyleVisualItem = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+import * as React from 'react';
 /// <reference path="../../typings/.d.ts" />
-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 {
+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 {
     render() {
         if (!this.props.Style) {
             return null;
         }
-        let styleText = StringExtensions_1.default.IsNotNullOrEmpty(this.props.Text)
+        let styleText = StringExtensions.IsNotNullOrEmpty(this.props.Text)
             ? this.props.Text
             : 'Style';
         let styleVisualisation;
@@ -23,9 +19,9 @@ 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 == 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);
+            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);
             styleVisualisation = (React.createElement("div", { className: this.props.Style.BackColor != undefined ? '' : 'ab_white_grey_stripes', style: {
                     textAlign: 'center',
                     margin: '2px',
@@ -42,4 +38,3 @@ class StyleVisualItem extends React.Component {
         return styleVisualisation;
     }
 }
-exports.StyleVisualItem = StyleVisualItem;

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

@@ -1,25 +1,19 @@
-"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)();
+import * as React from 'react';
+import { ValueOptionsTags, ValueSelector } from '../ValueSelector';
+import { useAdaptable } from '../../AdaptableContext';
+export const TagValueSelector = (props) => {
+    const { api } = 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_1.ValueSelector, { options: availableTags, value: selectedTags.map((tag) => api.internalApi.getLabelForTag(tag)), singleSelect: singleSelect, allowReorder: false, onChange: (selectedTagsIds, selectedTagsMap) => {
+    return (React.createElement(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:' }));
 };
-exports.TagValueSelector = TagValueSelector;
-const TagValueOptionsTags = (props) => {
+export const TagValueOptionsTags = (props) => {
     const { tags = [] } = props;
-    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 }));
+    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 }));
 };
-exports.TagValueOptionsTags = TagValueOptionsTags;

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

@@ -23,7 +23,7 @@ interface AdaptableToolPanelProps {
     onExpandToolPanel: (toolPanel: AdaptableToolPanel | string) => ToolPanelRedux.ToolPanelExpandToolPanelAction;
     onCollapseToolPanel: (toolPanel: AdaptableToolPanel | string) => ToolPanelRedux.ToolPanelCollapseToolPanelAction;
 }
-export declare const ConnectedAdaptableToolPanel: import("react-redux").ConnectedComponent<(props: AdaptableToolPanelProps) => JSX.Element, import("react-redux").Omit<AdaptableToolPanelProps, "onClick" | "Columns" | "ModuleButtons" | "ToolPanels" | "MainMenuItems" | "onNewColumnListOrder" | "onShowToolPanel" | "onHideToolPanel" | "onExpandToolPanel" | "onCollapseToolPanel">>;
+export declare const ConnectedAdaptableToolPanel: import("react-redux").ConnectedComponent<(props: AdaptableToolPanelProps) => JSX.Element, import("react-redux").Omit<JSX.LibraryManagedAttributes<C, import("react-redux").GetProps<C>>, "onClick" | "Columns" | "ModuleButtons" | "ToolPanels" | "MainMenuItems" | "onNewColumnListOrder" | "onSetToolPanelVisibility" | "onShowToolPanel" | "onHideToolPanel" | "onExpandToolPanel" | "onCollapseToolPanel">>;
 export declare const getAdaptableToolPanelAgGridComponent: (adaptable: IAdaptable) => (() => JSX.Element) | {
     new (): {
         gui: HTMLElement;

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

@@ -1,30 +1,26 @@
-"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"));
+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';
 const preventDefault = (e) => e.preventDefault();
 const AdaptableToolPanelComponent = (props) => {
     var _a;
-    const toolPanelsGlyph = React.createElement(icons_1.Icon, { name: 'align-justify' });
+    const toolPanelsGlyph = React.createElement(Icon, { name: 'align-justify' });
     const entitlementService = props.api.internalApi.getEntitlementService();
     const moduleService = props.api.internalApi.getModuleService();
     const adaptableOptions = props.api.optionsApi.getAdaptableOptions();
@@ -32,7 +28,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_1.default, { mt: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } }, "Not enough rights"));
+        return (React.createElement(HelpBlock, { 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);
@@ -48,7 +44,7 @@ const AdaptableToolPanelComponent = (props) => {
         !entitlementService.isModuleHiddenEntitlement('OpenFin')) {
         availableModules.push('OpenFin');
     }
-    const availableModuleToolPanels = Types_1.ALL_TOOL_PANELS.filter((moduleToolPanel) => ArrayExtensions_1.default.ContainsItem(availableModules, moduleToolPanel));
+    const availableModuleToolPanels = ALL_TOOL_PANELS.filter((moduleToolPanel) => ArrayExtensions.ContainsItem(availableModules, moduleToolPanel));
     const onStateChange = (toolPanel, visibilityMode) => {
         if (visibilityMode === 'expanded') {
             props.onExpandToolPanel(toolPanel);
@@ -59,7 +55,7 @@ const AdaptableToolPanelComponent = (props) => {
     };
     const isToolPanelModuleConfigurable = props.api.internalApi
         .getModuleService()
-        .getModuleById(ModuleConstants_1.ToolPanelModuleId)
+        .getModuleById(ToolPanelModuleId)
         .isModuleEditable();
     const visibleToolPanels = [];
     const visibleToolPanelControls = ((_a = props.ToolPanels) !== null && _a !== void 0 ? _a : []).map((toolPanelDefinition) => {
@@ -69,14 +65,14 @@ const AdaptableToolPanelComponent = (props) => {
         const customToolPanel = props.api.toolPanelApi.getCustomToolPanelByName(toolPanelDefinition.Name);
         if (customToolPanel) {
             visibleToolPanels.push(customToolPanel.name);
-            return (React.createElement(ToolPanelWrapper_1.ToolPanelWrapper, { key: customToolPanel.name, customToolPanel: customToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(customToolPanel.name, state) }));
+            return (React.createElement(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_1.ToolPanelWrapper, { key: moduleToolPanel, adaptableToolPanel: moduleToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(moduleToolPanel, state) }));
+            return (React.createElement(ToolPanelWrapper, { key: moduleToolPanel, adaptableToolPanel: moduleToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(moduleToolPanel, state) }));
         }
     });
     const renderToolPanelDropdowns = () => {
@@ -90,7 +86,7 @@ const AdaptableToolPanelComponent = (props) => {
                     ' ',
                     "\u00A0\u00A0",
                     React.createElement("b", null, 'Tool Panels'),
-                    renderToolPanelConfigureButton(ToolPanelPopup_1.ToolPanelConfigView.ToolPanels))),
+                    renderToolPanelConfigureButton(ToolPanelConfigView.ToolPanels))),
             },
         ];
         const isItemVisible = (panelItem) => visibleToolPanels.includes(panelItem);
@@ -100,7 +96,7 @@ const AdaptableToolPanelComponent = (props) => {
                 onClick: () => {
                     onSetToolPanelVisibility(toolPanel, !isVisible);
                 },
-                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)),
+                label: (React.createElement(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
@@ -123,7 +119,7 @@ const AdaptableToolPanelComponent = (props) => {
             }
             return 0;
         });
-        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));
+        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));
     };
     const renderToolPanelButtons = () => {
         const toolPanelButtons = [];
@@ -137,7 +133,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_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' }));
+                    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' }));
                 }
             }));
         }
@@ -163,8 +159,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 : (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 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 onSetColumnVisibility = (name) => {
@@ -189,22 +185,22 @@ const AdaptableToolPanelComponent = (props) => {
         const moduleParams = initialTab
             ? { source: 'Other', config: { initialTab } }
             : undefined;
-        return (React.createElement(ButtonConfigure_1.ButtonConfigure, { iconSize: 16, tone: "none", marginLeft: 2, className: "ab-ToolPanel__configure-button", tooltip: 'Configure ToolPanels', onClick: () => {
+        return (React.createElement(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(rebass_1.Flex, { className: "ab-ToolPanel", "data-name": "adaptable-tool-panel", flexDirection: "column", justifyContent: "center", padding: 2, style: {
+    return (React.createElement(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(rebass_1.Flex, { className: "ab-ToolPanel__header", flexDirection: "row", justifyContent: "left", padding: 1, flexWrap: "wrap", style: { width: '100%' } },
+        React.createElement(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(rebass_1.Flex, { className: "ab-ToolPanel__header__buttons", flexDirection: "row", justifyContent: "left", padding: 1, flexWrap: "wrap" }, renderCustomToolPanelButtons())),
+        Boolean(props.api.toolPanelApi.getCustomToolPanelButtons().length) && (React.createElement(Flex, { className: "ab-ToolPanel__header__buttons", flexDirection: "row", justifyContent: "left", padding: 1, flexWrap: "wrap" }, renderCustomToolPanelButtons())),
         visibleToolPanelControls));
 };
 function mapStateToProps(state) {
@@ -226,18 +222,18 @@ function mapDispatchToProps(dispatch) {
         onCollapseToolPanel: (toolPanel) => dispatch(ToolPanelRedux.ToolPanelCollapseToolPanel(toolPanel)),
     };
 }
-exports.ConnectedAdaptableToolPanel = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(AdaptableToolPanelComponent);
+export const ConnectedAdaptableToolPanel = connect(mapStateToProps, mapDispatchToProps)(AdaptableToolPanelComponent);
 const toolPanelContainerStyle = {
     width: '100%',
     overflow: 'auto',
 };
-const getAdaptableToolPanelAgGridComponent = (adaptable) => {
+export const getAdaptableToolPanelAgGridComponent = (adaptable) => {
     function getContainerId() {
         return 'adaptable-tool-panel_' + adaptable.adaptableOptions.adaptableId;
     }
     if (adaptable.variant === 'react') {
         return () => {
-            const content = (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(exports.ConnectedAdaptableToolPanel, { api: adaptable.api, teamSharingActivated: false }), adaptable);
+            const content = renderWithAdaptableContext(React.createElement(ConnectedAdaptableToolPanel, { api: adaptable.api, teamSharingActivated: false }), adaptable);
             return (React.createElement("div", { id: getContainerId(), className: 'ag-adaptable-panel', style: toolPanelContainerStyle }, content));
         };
     }
@@ -252,7 +248,7 @@ const getAdaptableToolPanelAgGridComponent = (adaptable) => {
                 //@ts-ignore
                 this.gui.style[key] = toolPanelContainerStyle[key];
             });
-            this.unmountReactRoot = adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(exports.ConnectedAdaptableToolPanel, { api: api, teamSharingActivated: false }), adaptable), this.gui);
+            this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(React.createElement(ConnectedAdaptableToolPanel, { api: api, teamSharingActivated: false }), adaptable), this.gui);
         }
         getGui() {
             if (!this.gui) {
@@ -269,4 +265,3 @@ const getAdaptableToolPanelAgGridComponent = (adaptable) => {
         }
     };
 };
-exports.getAdaptableToolPanelAgGridComponent = getAdaptableToolPanelAgGridComponent;

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

@@ -1,22 +1,18 @@
-"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) => {
+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) => {
     var _a;
     const { customToolPanel } = props;
-    const { api } = (0, AdaptableContext_1.useAdaptable)();
-    const contentsDivDomRef = (0, react_1.useRef)();
+    const { api } = useAdaptable();
+    const contentsDivDomRef = useRef();
     const contentsDivId = `ab-ToolPanel__${customToolPanel.name}__contents`;
     const buttonsDivId = `ab-ToolPanel__${customToolPanel.name}__buttons`;
-    const [contentsHTML, setContentsHTML] = (0, react_1.useState)('');
-    (0, react_1.useLayoutEffect)(() => {
+    const [contentsHTML, setContentsHTML] = useState('');
+    useLayoutEffect(() => {
         const element = contentsDivDomRef.current;
         if (hasCustomRenderFn(customToolPanel)) {
             const customRenderContext = {
@@ -69,10 +65,9 @@ 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 : (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 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));
         })))));
 };
-exports.CustomToolPanelContent = CustomToolPanelContent;
 const hasCustomRenderFn = (customToolPanel) => customToolPanel.render;
 const hasCustomFrameworkComponent = (customToolPanel) => customToolPanel.frameworkComponent;

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

@@ -23,5 +23,5 @@ declare class ToolPanelPopupComponent extends React.Component<ToolPanelPopupComp
     onShowGridPropertiesChanged(event: React.FormEvent<any>): void;
     onToolPanelToolPanelsChanged(selectedValues: AdaptableToolPanels): void;
 }
-export declare let ToolPanelPopup: import("react-redux").ConnectedComponent<typeof ToolPanelPopupComponent, import("react-redux").Omit<React.ClassAttributes<ToolPanelPopupComponent> & ToolPanelPopupComponentProps, "key" | "ref" | "onSuspend" | "api" | "accessLevel" | "modalContainer" | "moduleInfo" | "popupParams" | "onClearPopupParams" | "teamSharingActivated" | "onClosePopup" | "onUnSuspend" | "ToolPanelState" | "GridState" | "onToolPanelSetModuleButtons" | "onToolPanelSetToolPanels">>;
+export declare let ToolPanelPopup: import("react-redux").ConnectedComponent<typeof ToolPanelPopupComponent, import("react-redux").Omit<JSX.LibraryManagedAttributes<C, import("react-redux").GetProps<C>>, keyof ToolPanelPopupComponentProps>>;
 export {};