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

package/src/View/TeamSharing/SharedEntityObjectView.js

@@ -1,27 +1,32 @@
-import * as React from 'react';
-import { Box, Flex } from 'rebass';
-import SimpleButton from '../../components/SimpleButton';
-import { Tag } from '../../components/Tag';
-import { useAdaptable } from '../AdaptableContext';
-import { AdaptableObjectListItem } from '../Components/AdaptableObjectList/AdaptableObjectList';
-export const SharedEntityTypeItemView = (props) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSharedEntityStaleDepsItemView = exports.getSharedEntityActiveStatusObjectView = exports.SharedEntityTypeItemView = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const Tag_1 = require("../../components/Tag");
+const AdaptableContext_1 = require("../AdaptableContext");
+const AdaptableObjectList_1 = require("../Components/AdaptableObjectList/AdaptableObjectList");
+const SharedEntityTypeItemView = (props) => {
     const [isExpanded, setIsExpanded] = React.useState(false);
-    const adaptable = useAdaptable();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const moduleName = props.data.Module;
     const module = adaptable.ModuleService.getModuleById(moduleName);
     const sharedObject = props.data.Entity;
     const item = module === null || module === void 0 ? void 0 : module.toView(sharedObject);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Flex, { mb: 2, mt: 2 },
-            React.createElement(Flex, { mr: 2, alignItems: "center" },
-                React.createElement(Tag, { style: { margin: 0 } }, props.data.Module)),
-            item ? (isExpanded ? (React.createElement(SimpleButton, { "data-name": "shared-entity-collapse-button", onClick: () => setIsExpanded(false), icon: "arrow-up" }, "Collapse")) : (React.createElement(SimpleButton, { "data-name": "shared-entity-expand-button", onClick: () => setIsExpanded(true), icon: "arrow-down" }, "Expand"))) : null),
-        isExpanded && item && (React.createElement(Box, { as: "ul", padding: 0, className: "ab-Shared-Entity-Shared-Object" },
-            React.createElement(AdaptableObjectListItem, { hideControls: true, data: item, module: module })))));
+        React.createElement(rebass_1.Flex, { mb: 2, mt: 2 },
+            React.createElement(rebass_1.Flex, { mr: 2, alignItems: "center" },
+                React.createElement(Tag_1.Tag, { style: { margin: 0 } }, props.data.Module)),
+            item ? (isExpanded ? (React.createElement(SimpleButton_1.default, { "data-name": "shared-entity-collapse-button", onClick: () => setIsExpanded(false), icon: "arrow-up" }, "Collapse")) : (React.createElement(SimpleButton_1.default, { "data-name": "shared-entity-expand-button", onClick: () => setIsExpanded(true), icon: "arrow-down" }, "Expand"))) : null),
+        isExpanded && item && (React.createElement(rebass_1.Box, { as: "ul", padding: 0, className: "ab-Shared-Entity-Shared-Object" },
+            React.createElement(AdaptableObjectList_1.AdaptableObjectListItem, { hideControls: true, data: item, module: module })))));
 };
-export const getSharedEntityActiveStatusObjectView = (isDependency) => (props) => {
+exports.SharedEntityTypeItemView = SharedEntityTypeItemView;
+const getSharedEntityActiveStatusObjectView = (isDependency) => (props) => {
     var _a, _b;
-    const adaptable = useAdaptable();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const activeEntries = adaptable.api.internalApi.getState().TeamSharing.ActiveSharedEntityMap;
     const sharedEntity = props.data;
     const isAdaptableObjectPresentInLocalState = !!adaptable.api.internalApi
@@ -42,11 +47,11 @@ export const getSharedEntityActiveStatusObjectView = (isDependency) => (props) =
             const newRevision = sharedEntity.Revision;
             let statusInfo = null;
             if (isUpToDateAndActive) {
-                statusInfo = (React.createElement(Box, { ml: 1, style: { color: 'var(--ab-color-success)' } },
+                statusInfo = (React.createElement(rebass_1.Box, { ml: 1, style: { color: 'var(--ab-color-success)' } },
                     React.createElement("b", null, "up-to-date")));
             }
             if (isStaleAndActive) {
-                statusInfo = (React.createElement(Box, { ml: 1, style: { color: 'var(--ab-color-warn)' } }, ` (Rev. ${newRevision} available)`));
+                statusInfo = (React.createElement(rebass_1.Box, { ml: 1, style: { color: 'var(--ab-color-warn)' } }, ` (Rev. ${newRevision} available)`));
             }
             activeInfo = activeRevision && (React.createElement(React.Fragment, null,
                 activeRevision &&
@@ -61,10 +66,11 @@ export const getSharedEntityActiveStatusObjectView = (isDependency) => (props) =
     }
     const sharedValue = `by ${sharedEntity.UserName} at ${new Date(sharedEntity.Timestamp).toLocaleString()}`;
     return (React.createElement(React.Fragment, null,
-        !isDependency && React.createElement(Tag, null, sharedValue),
-        activeInfo && React.createElement(Tag, null, activeInfo)));
+        !isDependency && React.createElement(Tag_1.Tag, null, sharedValue),
+        activeInfo && React.createElement(Tag_1.Tag, null, activeInfo)));
 };
-export const getSharedEntityStaleDepsItemView = (staleDependencies) => () => {
+exports.getSharedEntityActiveStatusObjectView = getSharedEntityActiveStatusObjectView;
+const getSharedEntityStaleDepsItemView = (staleDependencies) => () => {
     let staleDepsString = 'Shared entity has';
     if ((staleDependencies === null || staleDependencies === void 0 ? void 0 : staleDependencies.length) === 1) {
         staleDepsString += ` one (${staleDependencies[0].Module}) stale dependency`;
@@ -72,6 +78,7 @@ export const getSharedEntityStaleDepsItemView = (staleDependencies) => () => {
     else {
         staleDepsString += ` ${staleDependencies.length} stale dependencies`;
     }
-    return (React.createElement(Tag, null,
-        React.createElement(Box, { ml: 1, style: { color: 'var(--ab-color-warn)' } }, staleDepsString)));
+    return (React.createElement(Tag_1.Tag, null,
+        React.createElement(rebass_1.Box, { ml: 1, style: { color: 'var(--ab-color-warn)' } }, staleDepsString)));
 };
+exports.getSharedEntityStaleDepsItemView = getSharedEntityStaleDepsItemView;

package/src/View/TeamSharing/TeamSharingApplyButton.js

@@ -1,10 +1,15 @@
-import * as React from 'react';
-import SimpleButton from '../../components/SimpleButton';
-import { useAdaptable } from '../AdaptableContext';
-export const TeamSharingApplyButton = (props) => {
-    const adaptable = useAdaptable();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TeamSharingApplyButton = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const TeamSharingApplyButton = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const handleImport = React.useCallback(() => {
         adaptable.api.teamSharingApi.importSharedEntry(props.data);
     }, []);
-    return (React.createElement(SimpleButton, { "data-name": "shared-entity-apply-button", onClick: handleImport, variant: "text", tooltip: "Import", icon: "import-export" }));
+    return (React.createElement(SimpleButton_1.default, { "data-name": "shared-entity-apply-button", onClick: handleImport, variant: "text", tooltip: "Import", icon: "import-export" }));
 };
+exports.TeamSharingApplyButton = TeamSharingApplyButton;

package/src/View/Theme/ThemeEditor.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AccessLevel } from '../../types';
-export declare type FieldType = 'color' | 'number' | 'text';
+export type FieldType = 'color' | 'number' | 'text';
 export interface ThemeEditorProps {
     theme: string;
     accessLevel: AccessLevel;

package/src/View/Theme/ThemeEditor.js

@@ -1,13 +1,17 @@
-import * as React from 'react';
-import FormLayout, { FormRow } from '../../components/FormLayout';
-import { useAdaptable } from '../AdaptableContext';
-import AdaptableInput from '../Components/AdaptableInput';
-import throttle from 'lodash/throttle';
-import SimpleButton from '../../components/SimpleButton';
-import { Box, Flex, Text } from 'rebass';
-import Panel from '../../components/Panel';
-import { Field } from './ThemeField';
-import { VariantSelector } from './VariantSelector';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeEditor = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const AdaptableInput_1 = tslib_1.__importDefault(require("../Components/AdaptableInput"));
+const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const rebass_1 = require("rebass");
+const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
+const ThemeField_1 = require("./ThemeField");
+const VariantSelector_1 = require("./VariantSelector");
 const fields = [
     {
         name: 'Primary Color',
@@ -70,9 +74,9 @@ const fields = [
         variable: '--ab-color-text-on-defaultbackground',
     },
 ];
-export const ThemeEditor = (props) => {
+const ThemeEditor = (props) => {
     var _a, _b;
-    const adaptable = useAdaptable();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const allThemes = adaptable.api.themeApi.getUserThemes();
     const disabled = props.accessLevel === 'ReadOnly';
     const [currentThemeObject, setCurrentThemeObject] = React.useState(() => {
@@ -103,7 +107,7 @@ export const ThemeEditor = (props) => {
         };
     }, []);
     const handleNameDescriptionChangeThrottled = React.useMemo(() => {
-        return throttle((key, value) => {
+        return (0, throttle_1.default)((key, value) => {
             const theme = adaptable.api.themeApi.getCurrentThemeObject();
             const newTheme = Object.assign(Object.assign({}, theme), { [key]: value });
             adaptable.api.themeApi.editTheme(newTheme);
@@ -136,21 +140,21 @@ export const ThemeEditor = (props) => {
     const nameHasChanged = currentThemeObject.Name !== props.theme;
     const nameIsNotUnique = allThemes.some((theme) => theme.Uuid !== currentThemeObject.Uuid && currentThemeObject.Name === theme.Name);
     const saveNameDisabled = !nameHasChanged || nameIsNotUnique || currentThemeObject.Name === '';
-    return (React.createElement(Panel, { header: React.createElement(Flex, { alignItems: "center", width: "100%" },
-            React.createElement(Box, { flex: 1 }, " Edit Custom Theme"),
-            React.createElement(SimpleButton, { "data-name": "delete", disabled: props.accessLevel !== 'Full', icon: "delete", onClick: handleDeleteTheme, variant: "text" })) },
-        React.createElement(FormLayout, null,
-            React.createElement(FormRow, { label: "Theme Name" },
-                React.createElement(AdaptableInput, { mr: 2, onChange: (event) => setCurrentThemeObject(Object.assign(Object.assign({}, currentThemeObject), { Name: event.target.value.replace(/ /g, '-') })), value: (_a = currentThemeObject.Name) !== null && _a !== void 0 ? _a : '' }),
-                React.createElement(SimpleButton, { onClick: handleSaveName, disabled: saveNameDisabled, icon: "save" }),
-                React.createElement(Text, { fontSize: 2, marginTop: 1 }, "The name cannot contain spaces."),
-                nameIsNotUnique && (React.createElement(Text, { fontSize: 2, color: "var(--ab-color-error)" }, "Name must be unique."))),
-            React.createElement(FormRow, { label: "Description" },
-                React.createElement(AdaptableInput, { onChange: (event) => handleDescriptionChange('Description', event.target.value), value: (_b = currentThemeObject === null || currentThemeObject === void 0 ? void 0 : currentThemeObject.Description) !== null && _b !== void 0 ? _b : '' })),
-            React.createElement(FormRow, { label: "Variant" },
-                React.createElement(VariantSelector, { onChange: handleVariantChange, theme: currentThemeObject })),
+    return (React.createElement(Panel_1.default, { header: React.createElement(rebass_1.Flex, { alignItems: "center", width: "100%" },
+            React.createElement(rebass_1.Box, { flex: 1 }, " Edit Custom Theme"),
+            React.createElement(SimpleButton_1.default, { "data-name": "delete", disabled: props.accessLevel !== 'Full', icon: "delete", onClick: handleDeleteTheme, variant: "text" })) },
+        React.createElement(FormLayout_1.default, null,
+            React.createElement(FormLayout_1.FormRow, { label: "Theme Name" },
+                React.createElement(AdaptableInput_1.default, { mr: 2, onChange: (event) => setCurrentThemeObject(Object.assign(Object.assign({}, currentThemeObject), { Name: event.target.value.replace(/ /g, '-') })), value: (_a = currentThemeObject.Name) !== null && _a !== void 0 ? _a : '' }),
+                React.createElement(SimpleButton_1.default, { onClick: handleSaveName, disabled: saveNameDisabled, icon: "save" }),
+                React.createElement(rebass_1.Text, { fontSize: 2, marginTop: 1 }, "The name cannot contain spaces."),
+                nameIsNotUnique && (React.createElement(rebass_1.Text, { fontSize: 2, color: "var(--ab-color-error)" }, "Name must be unique."))),
+            React.createElement(FormLayout_1.FormRow, { label: "Description" },
+                React.createElement(AdaptableInput_1.default, { onChange: (event) => handleDescriptionChange('Description', event.target.value), value: (_b = currentThemeObject === null || currentThemeObject === void 0 ? void 0 : currentThemeObject.Description) !== null && _b !== void 0 ? _b : '' })),
+            React.createElement(FormLayout_1.FormRow, { label: "Variant" },
+                React.createElement(VariantSelector_1.VariantSelector, { onChange: handleVariantChange, theme: currentThemeObject })),
             fields.map((field) => {
-                return (React.createElement(Field, { disabled: disabled, key: field.name, type: field.type, name: field.name, value: valuesFromTheme[field.variable], variable: field.variable, onChange: (val) => {
+                return (React.createElement(ThemeField_1.Field, { disabled: disabled, key: field.name, type: field.type, name: field.name, value: valuesFromTheme[field.variable], variable: field.variable, onChange: (val) => {
                         // needs a fresh copy
                         const currentThemeObject = adaptable.api.themeApi.getCurrentThemeObject();
                         let newTheme = null;
@@ -166,3 +170,4 @@ export const ThemeEditor = (props) => {
                     } }));
             }))));
 };
+exports.ThemeEditor = ThemeEditor;

package/src/View/Theme/ThemeEditorWindow.js

@@ -1,10 +1,15 @@
-import * as React from 'react';
-import { Box } from 'rebass';
-import { useAdaptable } from '../AdaptableContext';
-import { ThemePopup } from './ThemePopup';
-export const ThemeEditorWindow = () => {
-    const adaptable = useAdaptable();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeEditorWindow = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const AdaptableContext_1 = require("../AdaptableContext");
+const ThemePopup_1 = require("./ThemePopup");
+const ThemeEditorWindow = () => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const moduleInfo = adaptable.ModuleService.getModuleInfoByModule('Theme');
-    return (React.createElement(Box, { p: 2 },
-        React.createElement(ThemePopup, { hideShowInWindow: true, moduleInfo: moduleInfo, api: adaptable.api })));
+    return (React.createElement(rebass_1.Box, { p: 2 },
+        React.createElement(ThemePopup_1.ThemePopup, { hideShowInWindow: true, moduleInfo: moduleInfo, api: adaptable.api })));
 };
+exports.ThemeEditorWindow = ThemeEditorWindow;

package/src/View/Theme/ThemeField.js

@@ -1,35 +1,40 @@
-import * as React from 'react';
-import throttle from 'lodash/throttle';
-import { useAdaptable } from '../AdaptableContext';
-import { getVariableColor } from '../../Utilities/Helpers/StyleHelper';
-import { FormRow } from '../../components/FormLayout';
-import SimpleButton from '../../components/SimpleButton';
-import { Flex } from 'rebass';
-import { ColorPicker } from '../../components/ColorPicker';
-import AdaptableInput from '../Components/AdaptableInput';
-export const Field = (props) => {
-    const adaptable = useAdaptable();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Field = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const StyleHelper_1 = require("../../Utilities/Helpers/StyleHelper");
+const FormLayout_1 = require("../../components/FormLayout");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const rebass_1 = require("rebass");
+const ColorPicker_1 = require("../../components/ColorPicker");
+const AdaptableInput_1 = tslib_1.__importDefault(require("../Components/AdaptableInput"));
+const Field = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     let input = null;
     let value = props.value;
     const throttledOnChange = React.useMemo(() => {
-        return throttle((value) => {
+        return (0, throttle_1.default)((value) => {
             props.onChange(value);
         }, 300);
     }, []);
     if (value === undefined) {
-        value = getVariableColor(`var(${props.variable})`);
+        value = (0, StyleHelper_1.getVariableColor)(`var(${props.variable})`);
     }
     switch (props.type) {
         case 'number':
-            input = (React.createElement(AdaptableInput, { disabled: props.disabled, type: "number", onChange: (event) => throttledOnChange(event.target.value), value: value }));
+            input = (React.createElement(AdaptableInput_1.default, { disabled: props.disabled, type: "number", onChange: (event) => throttledOnChange(event.target.value), value: value }));
             break;
         case 'color':
-            input = (React.createElement(ColorPicker, { disabled: props.disabled, includeAlpha: false, api: adaptable.api, value: value, onChange: (color) => throttledOnChange(color) }));
+            input = (React.createElement(ColorPicker_1.ColorPicker, { disabled: props.disabled, includeAlpha: false, api: adaptable.api, value: value, onChange: (color) => throttledOnChange(color) }));
             break;
     }
-    return (React.createElement(FormRow, { label: props.name },
-        React.createElement(Flex, null,
+    return (React.createElement(FormLayout_1.FormRow, { label: props.name },
+        React.createElement(rebass_1.Flex, null,
             input,
             ' ',
-            React.createElement(SimpleButton, { disabled: props.value === undefined, onClick: () => props.onChange(false) }, "Clear"))));
+            React.createElement(SimpleButton_1.default, { disabled: props.value === undefined, onClick: () => props.onChange(false) }, "Clear"))));
 };
+exports.Field = Field;

package/src/View/Theme/ThemePopup.js

@@ -1,14 +1,19 @@
-import * as React from 'react';
-import { connect } from 'react-redux';
-import * as ThemeRedux from '../../Redux/ActionsReducers/ThemeRedux';
-import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
-import FormLayout, { FormRow } from '../../components/FormLayout';
-import DropdownButton from '../../components/DropdownButton';
-import { ThemeEditor } from './ThemeEditor';
-import { Box } from 'rebass';
-import ObjectFactory from '../../Utilities/ObjectFactory';
-import SimpleButton from '../../components/SimpleButton';
-import { Icon } from '../../components/icons';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemePopup = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const ThemeRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ThemeRedux"));
+const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
+const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
+const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const ThemeEditor_1 = require("./ThemeEditor");
+const rebass_1 = require("rebass");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../Utilities/ObjectFactory"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const icons_1 = require("../../components/icons");
+const ThemeSelector_1 = require("./ThemeSelector");
 class ThemePopupComponent extends React.Component {
     constructor() {
         super(...arguments);
@@ -20,35 +25,18 @@ class ThemePopupComponent extends React.Component {
                 nthItem++;
                 name = 'Custom-Theme-' + nthItem;
             }
-            const newTheme = ObjectFactory.CreateEmptyTheme(name);
+            const newTheme = ObjectFactory_1.default.CreateEmptyTheme(name);
             newTheme.Variant = variant;
             this.props.api.themeApi.addUserTheme(newTheme);
             this.props.api.themeApi.loadTheme(newTheme.Name);
         };
     }
     render() {
-        const availableThemes = this.props.api.themeApi.getThemes();
-        const theme = this.props.api.themeApi.getCurrentThemeObject();
-        const currentThemeDescription = theme.Description || theme.Name;
-        const optionThemes = availableThemes.map((theme) => {
-            if (typeof theme === 'string') {
-                // protection against old state, which could be string
-                theme = {
-                    Name: theme,
-                    Description: theme,
-                };
-            }
-            return {
-                value: theme.Name,
-                label: theme.Description,
-                onClick: () => this.onChangeTheme(theme.Name),
-            };
-        });
         const isCustomTheme = this.props.api.themeApi
             .getUserThemes()
             .some((theme) => theme.Name === this.props.CurrentTheme);
         const disabled = this.props.accessLevel === 'ReadOnly';
-        const newButton = (React.createElement(DropdownButton, { ml: 2, disabled: disabled, tone: "accent", variant: "raised", columns: ['label'], items: [
+        const newButton = (React.createElement(DropdownButton_1.default, { ml: 2, disabled: disabled, tone: "accent", variant: "raised", columns: ['label'], items: [
                 {
                     label: 'Dark',
                     onClick: () => this.handleCreateNewTheme('dark'),
@@ -58,18 +46,19 @@ class ThemePopupComponent extends React.Component {
                     onClick: () => this.handleCreateNewTheme('light'),
                 },
             ] },
-            React.createElement(Icon, { name: "plus" }),
+            React.createElement(icons_1.Icon, { name: "plus" }),
             " New"));
-        return (React.createElement(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), button: React.createElement(React.Fragment, null,
-                !this.props.hideShowInWindow && (React.createElement(SimpleButton, { icon: "open-in-new", onClick: () => {
+        return (React.createElement(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), button: React.createElement(React.Fragment, null,
+                !this.props.hideShowInWindow && (React.createElement(SimpleButton_1.default, { icon: "open-in-new", onClick: () => {
                         this.props.api.themeApi.internalApi.openInWindow();
                     } })),
                 newButton) },
-            React.createElement(FormLayout, null,
-                React.createElement(FormRow, { label: "Current Theme:" },
-                    React.createElement(DropdownButton, { "data-name": "select-theme-dropdown", columns: ['label'], style: { width: '50%', minWidth: 200 }, placeholder: "Select theme", value: this.props.CurrentTheme, items: optionThemes, accessLevel: this.props.accessLevel }, currentThemeDescription))),
-            isCustomTheme && (React.createElement(Box, { mt: 3 },
-                React.createElement(ThemeEditor, { accessLevel: this.props.accessLevel, theme: this.props.CurrentTheme })))));
+            React.createElement(FormLayout_1.default, null,
+                React.createElement(FormLayout_1.FormRow, { label: "Current Theme:" },
+                    React.createElement(rebass_1.Box, { maxWidth: 150 },
+                        React.createElement(ThemeSelector_1.ThemeSelector, null)))),
+            isCustomTheme && (React.createElement(rebass_1.Box, { mt: 3 },
+                React.createElement(ThemeEditor_1.ThemeEditor, { accessLevel: this.props.accessLevel, theme: this.props.CurrentTheme })))));
     }
     onChangeTheme(value) {
         this.props.SelectTheme(value);
@@ -86,4 +75,4 @@ function mapDispatchToProps(dispatch) {
         SelectTheme: (newTheme) => dispatch(ThemeRedux.ThemeSelect(newTheme)),
     };
 }
-export let ThemePopup = connect(mapStateToProps, mapDispatchToProps)(ThemePopupComponent);
+exports.ThemePopup = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(ThemePopupComponent);

package/src/View/Theme/ThemeSelector.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { SelectProps } from '../../components/Select';
+export declare const ThemeSelector: React.FunctionComponent<{
+    size?: SelectProps<any>['size'];
+}>;

package/src/View/Theme/ThemeSelector.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeSelector = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const Select_1 = require("../../components/Select");
+const ThemeRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ThemeRedux"));
+const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
+const AdaptableContext_1 = require("../AdaptableContext");
+const ThemeSelector = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const availableThemes = adaptable.api.themeApi.getThemes();
+    const disabled = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(ModuleConstants_1.ThemeModuleId) === 'ReadOnly';
+    const optionThemes = availableThemes.map((theme) => {
+        if (typeof theme === 'string') {
+            // protection against old state, which could be string
+            theme = {
+                Name: theme,
+                Description: theme,
+            };
+        }
+        return {
+            value: theme.Name,
+            label: theme.Description,
+        };
+    });
+    const theme = adaptable.api.themeApi.getCurrentThemeObject();
+    return (React.createElement(Select_1.Select, { "data-name": "select-theme-dropdown", options: optionThemes, value: theme.Name, disabled: disabled, size: props.size, onChange: (themeName) => {
+            dispatch(ThemeRedux.ThemeSelect(themeName));
+        } }));
+};
+exports.ThemeSelector = ThemeSelector;

package/src/View/Theme/ThemeStatusbar.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ThemeStatusbar: () => JSX.Element;

package/src/View/Theme/ThemeStatusbar.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeStatusbar = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const rebass_1 = require("rebass");
+const ThemeSelector_1 = require("./ThemeSelector");
+const ThemeStatusbar = () => {
+    return (react_1.default.createElement(rebass_1.Box, { onClick: (event) => {
+            event.stopPropagation();
+        } },
+        react_1.default.createElement(ThemeSelector_1.ThemeSelector, { size: "small" })));
+};
+exports.ThemeStatusbar = ThemeStatusbar;

package/src/View/Theme/ThemeViewPanel.d.ts

@@ -1,16 +1,5 @@
+/// <reference types="react" />
 import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
-import * as ThemeRedux from '../../Redux/ActionsReducers/ThemeRedux';
-import { AdaptableTheme } from '../../PredefinedConfig/ThemeState';
-import * as React from 'react';
 export interface ThemeViewPanelComponentProps extends ViewPanelProps {
-    onSelectTheme: (theme: string) => ThemeRedux.ThemeSelectAction;
-    SystemThemes: any[];
-    UserThemes: AdaptableTheme[];
-    CurrentTheme: string;
 }
-declare class ThemeViewPanelComponent extends React.Component<ThemeViewPanelComponentProps, {}> {
-    render(): any;
-    private onSelectTheme;
-}
-export declare const ThemeViewPanelControl: import("react-redux").ConnectedComponent<typeof ThemeViewPanelComponent, any>;
-export {};
+export declare const ThemeViewPanelControl: (props: ThemeViewPanelComponentProps) => JSX.Element;

package/src/View/Theme/ThemeViewPanel.js

@@ -1,55 +1,14 @@
-import * as ThemeRedux from '../../Redux/ActionsReducers/ThemeRedux';
-import * as React from 'react';
-import join from '../../components/utils/join';
-import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
-import DropdownButton from '../../components/DropdownButton';
-import { connect } from 'react-redux';
-class ThemeViewPanelComponent extends React.Component {
-    render() {
-        var _a, _b, _c, _d;
-        const allThemes = (_c = (_b = (_a = this.props.api) === null || _a === void 0 ? void 0 : _a.themeApi) === null || _b === void 0 ? void 0 : _b.getThemes) === null || _c === void 0 ? void 0 : _c.call(_b);
-        let themes = allThemes.map((theme, index) => {
-            if (typeof theme === 'string') {
-                // protection against old state, which could be string
-                theme = {
-                    Name: theme,
-                    Description: theme,
-                };
-            }
-            return {
-                label: theme.Description,
-                onClick: () => this.onSelectTheme(theme),
-            };
-        });
-        const currentThemeObj = allThemes.find((theme) => theme.Name === this.props.CurrentTheme);
-        const currentThemeDescription = (_d = currentThemeObj === null || currentThemeObj === void 0 ? void 0 : currentThemeObj.Description) !== null && _d !== void 0 ? _d : this.props.CurrentTheme;
-        const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        const dropDownStyle = this.props.viewType === 'Toolbar'
-            ? {
-                maxWidth: '25rem',
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                fontSize: 'small',
-            }
-            : { minWidth: '100%', fontSize: 'small' };
-        return (React.createElement("div", { className: join(this.props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Theme__wrap`) },
-            React.createElement(DropdownButton, { className: `ab-${elementType}__Theme__select`, style: dropDownStyle, items: themes, columns: ['label'], accessLevel: this.props.accessLevel }, currentThemeDescription)));
-    }
-    onSelectTheme(theme) {
-        this.props.onSelectTheme(theme.Name);
-    }
-}
-function mapStateToProps(state, ownProps) {
-    return {
-        SystemThemes: state.Theme.SystemThemes,
-        CurrentTheme: state.Theme.CurrentTheme,
-        UserThemes: state.Theme.UserThemes,
-    };
-}
-function mapDispatchToProps(dispatch) {
-    return {
-        onSelectTheme: (theme) => dispatch(ThemeRedux.ThemeSelect(theme)),
-    };
-}
-export const ThemeViewPanelControl = connect(mapStateToProps, mapDispatchToProps)(ThemeViewPanelComponent);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeViewPanelControl = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
+const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
+const ThemeSelector_1 = require("./ThemeSelector");
+const ThemeViewPanelControl = (props) => {
+    const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
+    return (React.createElement("div", { className: (0, join_1.default)(props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Theme__wrap`) },
+        React.createElement(ThemeSelector_1.ThemeSelector, null)));
+};
+exports.ThemeViewPanelControl = ThemeViewPanelControl;

package/src/View/Theme/VariantSelector.js

@@ -1,10 +1,14 @@
-import * as React from 'react';
-import DropdownButton from '../../components/DropdownButton';
-import SimpleButton from '../../components/SimpleButton';
-import { useAdaptable } from '../AdaptableContext';
-export const VariantSelector = (props) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VariantSelector = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const VariantSelector = (props) => {
     var _a;
-    const adaptable = useAdaptable();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const systemTemes = adaptable.api.themeApi.getSystemThemes();
     const options = systemTemes.map((theme) => ({
         label: theme.Description,
@@ -15,6 +19,7 @@ export const VariantSelector = (props) => {
         ? (_a = options.find((theme) => theme.value === props.theme.Variant)) === null || _a === void 0 ? void 0 : _a.label
         : 'Select a theme';
     return (React.createElement(React.Fragment, null,
-        React.createElement(DropdownButton, { mr: 2, columns: ['label'], items: options }, label),
-        React.createElement(SimpleButton, { onClick: () => props.onChange(null), disabled: !props.theme.Variant, icon: "delete" })));
+        React.createElement(DropdownButton_1.default, { mr: 2, columns: ['label'], items: options }, label),
+        React.createElement(SimpleButton_1.default, { onClick: () => props.onChange(null), disabled: !props.theme.Variant, icon: "delete" })));
 };
+exports.VariantSelector = VariantSelector;

package/src/View/UIHelper.d.ts

@@ -29,7 +29,7 @@ export declare const ORANGE: string;
 export declare function getHexForName(name: string): string;
 export declare function getDefaultColors(): string[];
 export declare function getEmptyConfigState(): EditableConfigEntityState;
-export declare function getDescriptionForDataType(dataType: AdaptableColumnDataType): "string" | "number" | "date";
+export declare function getDescriptionForDataType(dataType: AdaptableColumnDataType): "number" | "string" | "date";
 export declare function getPlaceholderForDataType(dataType: AdaptableColumnDataType): "Enter Value" | "Enter Number" | "Enter Date";
 export declare function getModalContainer(adaptableOptions: AdaptableOptions, document: Document): HTMLElement;
 export declare function IsEmptyStyle(style: AdaptableStyle): boolean;