@adaptabletools/adaptable 22.0.0-canary.0 → 22.0.0-canary.2

package/src/Utilities/Services/ModuleService.js

@@ -1,6 +1,7 @@
 import Helper from '../Helpers/Helper';
 import { AgGridRequiredModulesDocsLink, HOST_URL_DOCS, } from '../Constants/DocumentationLinkConstants';
 export class ModuleService {
+    adaptableApi;
     constructor(adaptableApi) {
         this.adaptableApi = adaptableApi;
         this.adaptableApi = adaptableApi;
@@ -105,84 +106,83 @@ export class ModuleService {
     }
     getModuleDocumentationPageByModule(adaptableModule) {
         let url = `${HOST_URL_DOCS}/`;
-        let learnUrl = url + 'guide/';
         switch (adaptableModule) {
             case 'Alert':
-                return learnUrl + 'handbook-alerting';
+                return url + 'handbook-alerting';
             case 'BulkUpdate':
                 return url + 'handbook-editing-bulk-update';
             case 'CalculatedColumn':
-                return learnUrl + 'handbook-calculated-column';
+                return url + 'handbook-calculated-column';
             case 'CellSummary':
-                return learnUrl + 'handbook-summarising';
+                return url + 'handbook-summarising';
             case 'Charting':
-                return learnUrl + 'handbook-charts';
+                return url + 'handbook-charts';
             case 'ColumnFilter':
-                return learnUrl + 'handbook-column-filter';
+                return url + 'handbook-column-filter';
             case 'ColumnInfo':
-                return learnUrl + 'dev-guide-column-grid-column-info';
+                return url + 'dev-guide-column-grid-column-info';
             case 'Comment':
-                return learnUrl + 'handbook-comments';
+                return url + 'handbook-comments';
             case 'CustomSort':
-                return learnUrl + 'handbook-custom-sorting';
+                return url + 'handbook-custom-sorting';
             case 'Dashboard':
-                return learnUrl + 'ui-dashboard';
+                return url + 'ui-dashboard';
             case 'DataChangeHistory':
-                return learnUrl + 'handbook-monitoring-data-change-history';
+                return url + 'handbook-monitoring-data-change-history';
             case 'DataImport':
-                return learnUrl + 'handbook-importing';
+                return url + 'handbook-importing';
             case 'DataSet':
-                return learnUrl + 'handbook-data-sets';
+                return url + 'handbook-data-sets';
             case 'Export':
-                return learnUrl + 'handbook-exporting';
+                return url + 'handbook-exporting';
             case 'Fdc3':
-                return learnUrl + 'handbook-fdc3';
+                return url + 'handbook-fdc3';
             case 'FlashingCell':
-                return learnUrl + 'handbook-flashing-cell';
+                return url + 'handbook-flashing-cell';
             case 'FormatColumn':
-                return learnUrl + 'handbook-column-formatting';
+                return url + 'handbook-column-formatting';
             case 'FreeTextColumn':
-                return learnUrl + 'handbook-freetext-column';
+                return url + 'handbook-freetext-column';
             case 'GridFilter':
-                return learnUrl + 'handbook-grid-filter';
+                return url + 'handbook-grid-filter';
             case 'GridInfo':
-                return learnUrl + 'dev-guide-column-grid-column-info';
+                return url + 'dev-guide-column-grid-column-info';
             case 'Layout':
-                return learnUrl + 'handbook-layouts';
+                return url + 'handbook-layouts';
             case 'NamedQuery':
-                return learnUrl + 'handbook-named-queries';
+                return url + 'handbook-named-queries';
             case 'Note':
-                return learnUrl + 'handbook-notes';
+                return url + 'handbook-notes';
             case 'PlusMinus':
-                return learnUrl + 'handbook-editing-plus-minus';
+                return url + 'handbook-editing-plus-minus';
             case 'QuickSearch':
-                return learnUrl + 'handbook-quick-search';
+                return url + 'handbook-quick-search';
             case 'Schedule':
-                return learnUrl + 'handbook-scheduling';
+                return url + 'handbook-scheduling';
             case 'SettingsPanel':
-                return learnUrl + 'ui-settings-panel';
+                return url + 'ui-settings-panel';
             case 'Shortcut':
-                return learnUrl + 'handbook-editing-shortcut';
+                return url + 'handbook-editing-shortcut';
             case 'SmartEdit':
-                return learnUrl + 'handbook-editing-smart-edit';
+                return url + 'handbook-editing-smart-edit';
             case 'StateManagement':
-                return learnUrl + 'dev-guide-adaptable-state-management';
+                return url + 'dev-guide-adaptable-state-management';
             case 'StatusBar':
-                return learnUrl + 'ui-status-bar';
+                return url + 'ui-status-bar';
             case 'StyledColumn':
-                return learnUrl + 'handbook-styled-column-overview';
+                return url + 'handbook-styled-column-overview';
             case 'SystemStatus':
-                return learnUrl + 'handbook-system-status-message';
+                return url + 'handbook-system-status-message';
             case 'TeamSharing':
-                return learnUrl + 'handbook-team-sharing';
+                return url + 'handbook-team-sharing';
             case 'Theme':
-                return learnUrl + 'handbook-theming';
+                return url + 'handbook-theming';
             case 'ToolPanel':
-                return learnUrl + 'ui-tool-panel';
+                return url + 'ui-tool-panel';
             case 'IPushPull':
-                return learnUrl + 'integrations-ipushpull';
+                return url + 'integrations-ipushpull';
             case 'OpenFin':
-                return learnUrl + 'integrations-openfin';
+                return url + 'integrations-openfin';
             default:
                 return 'good';
         }

package/src/Utilities/Services/QueryLanguageService.js

@@ -9,13 +9,14 @@ import { scalarExpressionFunctions } from '../ExpressionFunctions/scalarExpressi
 import { getTypedKeys } from '../Extensions/TypeExtensions';
 import { AggregatedScalarLiveValue } from './AggregatedScalarLiveValue';
 export class QueryLanguageService {
+    adaptableApi;
+    cacheBooleanValidation = new Map();
+    cacheObservableValidation = new Map();
+    cacheAggregatedBooleanValidation = new Map();
+    cacheAggregatedScalarValidation = new Map();
+    cacheModuleSpecificExpressionFunctions = new Map();
     constructor(adaptableApi) {
         this.adaptableApi = adaptableApi;
-        this.cacheBooleanValidation = new Map();
-        this.cacheObservableValidation = new Map();
-        this.cacheAggregatedBooleanValidation = new Map();
-        this.cacheAggregatedScalarValidation = new Map();
-        this.cacheModuleSpecificExpressionFunctions = new Map();
     }
     evaluateBooleanExpression(expression, module, rowNode, evalContext) {
         if (expression == undefined) {

package/src/Utilities/Services/RowFormService.js

@@ -1,4 +1,5 @@
 export class RowFormService {
+    adaptableApi;
     constructor(adaptableApi) {
         this.adaptableApi = adaptableApi;
         if (adaptableApi.optionsApi.getRowFormOptions().autoHandle) {

package/src/Utilities/Services/RowSummaryService.js

@@ -10,15 +10,12 @@ import isEqual from 'lodash/isEqual';
  * The logic is extracted here to make it easier to follow
  */
 export class RowSummaryService {
+    api;
+    cachedCellSummary = new Map();
+    previousRowSummaries;
+    previousLayout;
     constructor(api) {
         this.api = api;
-        this.cachedCellSummary = new Map();
-        this._throttleAcumulatedColumnsThatChanged = new Set();
-        /**
-         *
-         * @param colId optional to evaluate only one column
-         */
-        this._throttledEvaluateRowSummary = throttle(this.evaluateRowSummary, 300);
     }
     onAdaptableReady() {
         this.rowSummariesSubscriptions();
@@ -66,12 +63,18 @@ export class RowSummaryService {
             this.throttledEvaluateRowSummary();
         });
     }
+    _throttleAcumulatedColumnsThatChanged = new Set();
     throttledEvaluateRowSummary(reason) {
         if (reason) {
             reason.columnIds.forEach((col) => this._throttleAcumulatedColumnsThatChanged.add(col));
         }
         this._throttledEvaluateRowSummary(reason);
     }
+    /**
+     *
+     * @param colId optional to evaluate only one column
+     */
+    _throttledEvaluateRowSummary = throttle(this.evaluateRowSummary, 300);
     evaluateRowSummary(reason) {
         if (this._throttleAcumulatedColumnsThatChanged.size > 0) {
             const columnIds = Array.from(this._throttleAcumulatedColumnsThatChanged.values());

package/src/Utilities/Services/TeamSharingService.js

@@ -1,9 +1,11 @@
 import { createUuid } from '../../AdaptableState/Uuid';
 import ObjectFactory from '../ObjectFactory';
 export class TeamSharingService {
+    adaptableApi;
+    dismissedNotifications = [];
+    updateCheckTimerId;
     constructor(adaptableApi) {
         this.adaptableApi = adaptableApi;
-        this.dismissedNotifications = [];
         const teamSharingOptions = adaptableApi.optionsApi.getTeamSharingOptions();
         if (teamSharingOptions.updateInterval > 0) {
             // convert minutes to millis

package/src/Utilities/Services/ThemeService.js

@@ -1,14 +1,8 @@
 export class ThemeService {
+    api;
+    unsubscribe = () => { };
+    styleSheetObject;
     constructor(api) {
-        this.unsubscribe = () => { };
-        this.onThemeChanged = () => {
-            let currentTheme = this.api.themeApi.getCurrentThemeObject();
-            currentTheme = this.mapOsTheme(currentTheme);
-            this.applyNewThemeVariables(currentTheme);
-            // this needs to be called after variables are set
-            // as it may show the warning for a custom/runtime theme
-            this.showMissingThemeFiles(currentTheme);
-        };
         this.api = api;
         this.subscribe();
         if (!this.styleSheetObject) {
@@ -33,6 +27,14 @@ export class ThemeService {
             prefferedColorSchemeUnsubscribe();
         };
     }
+    onThemeChanged = () => {
+        let currentTheme = this.api.themeApi.getCurrentThemeObject();
+        currentTheme = this.mapOsTheme(currentTheme);
+        this.applyNewThemeVariables(currentTheme);
+        // this needs to be called after variables are set
+        // as it may show the warning for a custom/runtime theme
+        this.showMissingThemeFiles(currentTheme);
+    };
     applyNewThemeVariables(theme) {
         const variables = theme.CSSVariables;
         if (!variables || Object.keys(variables).length === 0) {

package/src/Utilities/Services/ValidationService.js

@@ -4,6 +4,7 @@ import { AlertModuleId } from '../Constants/ModuleConstants';
 import { SERVER_VALIDATION_HEADER, SERVER_VALIDATION_MESSAGE_TYPE, } from '../Constants/GeneralConstants';
 import { errorOnce } from '../../agGrid/AdaptableLogger';
 export class ValidationService {
+    adaptableApi;
     constructor(adaptableApi) {
         this.adaptableApi = adaptableApi;
         this.adaptableApi = adaptableApi;

package/src/Utilities/createAgStatusPanelComponent.js

@@ -19,6 +19,9 @@ export const createAgStatusPanelComponent = (component, adaptable, context) => {
         };
     }
     return class StatusBarRenderer {
+        params;
+        eGui;
+        unmountReactRoot;
         init(params) {
             this.params = params;
             this.eGui = document.createElement('div');

package/src/View/BulkUpdate/BulkUpdateViewPanel.js

@@ -13,6 +13,7 @@ import { connect } from 'react-redux';
 import { Flex } from '../../components/Flex';
 import clsx from 'clsx';
 class BulkUpdateViewPanelComponent extends React.Component {
+    cleanupEvent;
     constructor(props) {
         super(props);
         this.state = {

package/src/View/CalculatedColumn/CalculatedColumnSummary.js

@@ -9,14 +9,6 @@ import { CalculatedColumnWizard } from './Wizard/CalculatedColumnWizard';
 export class CalculatedColumnSummaryComponent extends React.Component {
     constructor(props) {
         super(props);
-        this.onFinishWizard = (calculatedColumn) => {
-            this.props.onEdit(calculatedColumn);
-            this.setState({
-                editedAdaptableObject: null,
-                wizardStartIndex: 0,
-                wizardStatus: WizardStatus.None,
-            });
-        };
         this.state = UIHelper.getEmptyConfigState();
     }
     render() {
@@ -44,6 +36,14 @@ export class CalculatedColumnSummaryComponent extends React.Component {
             wizardStatus: WizardStatus.None,
         });
     }
+    onFinishWizard = (calculatedColumn) => {
+        this.props.onEdit(calculatedColumn);
+        this.setState({
+            editedAdaptableObject: null,
+            wizardStartIndex: 0,
+            wizardStatus: WizardStatus.None,
+        });
+    };
 }
 function mapStateToProps(state) {
     return {

package/src/View/CellSummary/CellSummaryViewPanel.js

@@ -10,6 +10,7 @@ import { connect } from 'react-redux';
 import { Select } from '../../components/Select';
 import { Flex } from '../../components/Flex';
 class CellSummaryViewPanelComponent extends React.Component {
+    cleanupEvent;
     constructor(props) {
         super(props);
     }

package/src/View/Components/Buttons/ButtonBase/index.js

@@ -7,6 +7,15 @@ const Glyphicon = ({ glyph, style }) => {
 };
 const baseClassName = 'ab-Button twa:text-current';
 export class ButtonBase extends React.Component {
+    static defaultProps = {
+        overrideDisableButton: false,
+        toolTipAndText: '',
+        glyph: '',
+        displayMode: 'Glyph+Text',
+        transformGlyph: false,
+        accessLevel: 'Full',
+        showDefaultStyle: false,
+    };
     render() {
         let isDisabled;
         isDisabled = this.props.accessLevel == 'Hidden';
@@ -59,12 +68,3 @@ export class ButtonBase extends React.Component {
         return hideToolTip ? button : buttonwithtooltip;
     }
 }
-ButtonBase.defaultProps = {
-    overrideDisableButton: false,
-    toolTipAndText: '',
-    glyph: '',
-    displayMode: 'Glyph+Text',
-    transformGlyph: false,
-    accessLevel: 'Full',
-    showDefaultStyle: false,
-};

package/src/View/Components/Buttons/EntityListActionButtons.js

@@ -10,6 +10,24 @@ const stopPropagation = (e) => {
     e.stopPropagation();
 };
 export class EntityListActionButtons extends React.Component {
+    static defaultProps = {
+        // Adaptable: null,
+        suspendableObject: null,
+        showEdit: true,
+        showDelete: true,
+        showShare: false,
+        showSuspend: false,
+        overrideDisableEdit: false,
+        overrideDisableDelete: false,
+        overrideDisableClone: false,
+        overrideDisableShare: false,
+        confirmDeleteAction: null,
+        entityType: '',
+        accessLevel: 'Full',
+        editSize: 'xsmall',
+        deleteSize: 'xsmall',
+        shareSize: 'xsmall',
+    };
     render() {
         const { justifyContent } = this.props;
         const justifyContentClassName = clsx({
@@ -25,21 +43,3 @@ export class EntityListActionButtons extends React.Component {
             this.props.showSuspend && this.props.suspendableObject && (React.createElement(SuspendToggleButton, { className: `twa:ml-[2px] twa:align-self-center`, onSuspend: this.props.onSuspend, onUnSuspend: this.props.onUnSuspend, suspendableObject: this.props.suspendableObject, disabled: this.props.accessLevel == 'ReadOnly' }))));
     }
 }
-EntityListActionButtons.defaultProps = {
-    // Adaptable: null,
-    suspendableObject: null,
-    showEdit: true,
-    showDelete: true,
-    showShare: false,
-    showSuspend: false,
-    overrideDisableEdit: false,
-    overrideDisableDelete: false,
-    overrideDisableClone: false,
-    overrideDisableShare: false,
-    confirmDeleteAction: null,
-    entityType: '',
-    accessLevel: 'Full',
-    editSize: 'xsmall',
-    deleteSize: 'xsmall',
-    shareSize: 'xsmall',
-};

package/src/View/Components/ColumnFilter/components/FloatingFilterValues.js

@@ -204,7 +204,7 @@ export const FloatingFilterValues = (props) => {
                     ...(props.value?.length
                         ? {
                             valueContainer: {
-                                fontWeight: 'var(--ab-cmp-quickfilter-selected-options-text__font-weight)',
+                                fontWeight: 'var(--ab-cmp-floatingfilter-selected-options-text__font-weight)',
                             },
                         }
                         : {}),

package/src/View/Components/ExpressionWizard.js

@@ -9,11 +9,6 @@ import { Flex } from '../../components/Flex';
 export class ExpressionWizard extends React.Component {
     constructor(props) {
         super(props);
-        this.handleCustomExpressionChange = (expression) => {
-            this.setState({
-                expression,
-            }, () => this.props.updateGoBackState());
-        };
         this.state = {
             // this is realy horrible but its only way to use the Expression Wizard for both Report (that has Query) and Format Column (that has Rule)
             // once we move to the new Wizard we can remove this monstrosity
@@ -43,6 +38,11 @@ export class ExpressionWizard extends React.Component {
                 .getQueryLanguageService()
                 .validateBoolean(this.state.expression, NamedQueryModuleId).isValid);
     }
+    handleCustomExpressionChange = (expression) => {
+        this.setState({
+            expression,
+        }, () => this.props.updateGoBackState());
+    };
     canNext() {
         if (this.isValidExpression() == false) {
             return false;

package/src/View/Components/Panels/PanelDashboard/index.js

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import { DashboardToolbar as DashboardToolbarUI } from '../../../../components/Dashboard';
 export class PanelDashboard extends React.Component {
+    static defaultProps = {
+        showConfigureActionButton: true,
+        showCloseActionButton: true,
+        headerText: 'Module',
+        onClose: null,
+        onConfigure: null,
+        accessLevel: 'Full',
+    };
     render() {
         const { headerText, showConfigureActionButton, showCloseActionButton, onConfigure, onClose, accessLevel, children, } = this.props;
         return (React.createElement(DashboardToolbarUI, { title: headerText, onConfigure: onConfigure, showConfigure: showConfigureActionButton, showClose: showCloseActionButton, onClose: onClose, accessLevel: accessLevel }, children));
     }
 }
-PanelDashboard.defaultProps = {
-    showConfigureActionButton: true,
-    showCloseActionButton: true,
-    headerText: 'Module',
-    onClose: null,
-    onConfigure: null,
-    accessLevel: 'Full',
-};

package/src/View/Components/Panels/PanelToolPanel/index.js

@@ -7,6 +7,13 @@ import { ButtonMaximise } from '../../Buttons/ButtonMaximise';
 import { twMerge } from '../../../../twMerge';
 import { Flex } from '../../../../components/Flex';
 export class PanelToolPanel extends React.Component {
+    static defaultProps = {
+        headerText: '',
+        onClose: null,
+        onConfigure: null,
+        onMinimiseChanged: null,
+        isMinimised: true,
+    };
     render() {
         const { useDefaultPanelStyle, isMinimised, onMinimiseChanged, headerText, onClose, onConfigure, ...props } = this.props;
         let header = (React.createElement(React.Fragment, null,
@@ -38,10 +45,3 @@ export class PanelToolPanel extends React.Component {
             } }));
     }
 }
-PanelToolPanel.defaultProps = {
-    headerText: '',
-    onClose: null,
-    onConfigure: null,
-    onMinimiseChanged: null,
-    isMinimised: true,
-};

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

@@ -222,6 +222,8 @@ export const getAdaptableToolPanelAgGridComponent = (adaptable) => {
         };
     }
     return class AdaptableToolPanelAgGridComponent {
+        gui;
+        unmountReactRoot;
         init(params) {
             const api = adaptable.api;
             this.gui = document.createElement('div');

package/src/View/CustomSort/CustomSortSummary.js

@@ -16,19 +16,6 @@ import { CustomSortWizard } from './Wizard/CustomSortWizard';
 export class CustomSortSummaryComponent extends React.Component {
     constructor(props) {
         super(props);
-        this.onFinishWizard = (customSort) => {
-            if (this.props.CustomSorts.find((x) => x.ColumnId == customSort.ColumnId)) {
-                this.props.onEditCustomSort(customSort);
-            }
-            else {
-                this.props.onAddCustomSort(customSort);
-            }
-            this.setState({
-                editedAdaptableObject: null,
-                wizardStartIndex: 0,
-                wizardStatus: WizardStatus.None,
-            });
-        };
         this.state = UIHelper.getEmptyConfigState();
     }
     render() {
@@ -76,6 +63,19 @@ export class CustomSortSummaryComponent extends React.Component {
             wizardStatus: WizardStatus.None,
         });
     }
+    onFinishWizard = (customSort) => {
+        if (this.props.CustomSorts.find((x) => x.ColumnId == customSort.ColumnId)) {
+            this.props.onEditCustomSort(customSort);
+        }
+        else {
+            this.props.onAddCustomSort(customSort);
+        }
+        this.setState({
+            editedAdaptableObject: null,
+            wizardStartIndex: 0,
+            wizardStatus: WizardStatus.None,
+        });
+    };
     canFinishWizard() {
         let customSort = this.state.editedAdaptableObject;
         return (StringExtensions.IsNotNullOrEmpty(customSort.ColumnId) &&

package/src/View/FormatColumn/FormatColumnSummary.js

@@ -15,19 +15,6 @@ import { FormatColumnWizard } from './Wizard/FormatColumnWizard';
 export class FormatColumnSummaryComponent extends React.Component {
     constructor(props) {
         super(props);
-        this.onFinishWizard = (formatColumn) => {
-            if (this.props.FormatColumns.find((x) => x.Uuid == formatColumn.Uuid)) {
-                this.props.onEditFormatColumn(formatColumn);
-            }
-            else {
-                this.props.onAddFormatColumn(formatColumn);
-            }
-            this.setState({
-                editedAdaptableObject: null,
-                wizardStartIndex: 0,
-                wizardStatus: WizardStatus.None,
-            });
-        };
         this.state = UIHelper.getEmptyConfigState();
     }
     render() {
@@ -70,6 +57,19 @@ export class FormatColumnSummaryComponent extends React.Component {
             wizardStatus: WizardStatus.None,
         });
     }
+    onFinishWizard = (formatColumn) => {
+        if (this.props.FormatColumns.find((x) => x.Uuid == formatColumn.Uuid)) {
+            this.props.onEditFormatColumn(formatColumn);
+        }
+        else {
+            this.props.onAddFormatColumn(formatColumn);
+        }
+        this.setState({
+            editedAdaptableObject: null,
+            wizardStartIndex: 0,
+            wizardStatus: WizardStatus.None,
+        });
+    };
     canFinishWizard() {
         let formatColumn = this.state.editedAdaptableObject;
         return formatColumn.Scope != undefined && UIHelper.IsNotEmptyStyle(formatColumn.Style);

package/src/View/FreeTextColumn/FreeTextColumnSummary.js

@@ -15,19 +15,6 @@ import { FreeTextColumnWizard } from './Wizard/FreeTextColumnWizard';
 export class FreeTextColumnSummaryComponent extends React.Component {
     constructor(props) {
         super(props);
-        this.onFinishWizard = (FreeTextColumn) => {
-            if (this.props.FreeTextColumns.find((x) => x.ColumnId == FreeTextColumn.ColumnId)) {
-                this.props.onEditFreeTextColumn(FreeTextColumn);
-            }
-            else {
-                this.props.onAddFreeTextColumn(FreeTextColumn);
-            }
-            this.setState({
-                editedAdaptableObject: null,
-                wizardStartIndex: 0,
-                wizardStatus: WizardStatus.None,
-            });
-        };
         this.state = UIHelper.getEmptyConfigState();
     }
     render() {
@@ -68,6 +55,19 @@ export class FreeTextColumnSummaryComponent extends React.Component {
             wizardStatus: WizardStatus.None,
         });
     }
+    onFinishWizard = (FreeTextColumn) => {
+        if (this.props.FreeTextColumns.find((x) => x.ColumnId == FreeTextColumn.ColumnId)) {
+            this.props.onEditFreeTextColumn(FreeTextColumn);
+        }
+        else {
+            this.props.onAddFreeTextColumn(FreeTextColumn);
+        }
+        this.setState({
+            editedAdaptableObject: null,
+            wizardStartIndex: 0,
+            wizardStatus: WizardStatus.None,
+        });
+    };
     canFinishWizard() {
         let FreeTextColumn = this.state.editedAdaptableObject;
         return StringExtensions.IsNotNullOrEmpty(FreeTextColumn.ColumnId);

package/src/View/SmartEdit/SmartEditViewPanel.js

@@ -13,6 +13,7 @@ import { connect } from 'react-redux';
 import { Select } from '../../components/Select';
 import { Flex } from '../../components/Flex';
 class SmartEditViewPanelComponent extends React.Component {
+    cleanupEvent;
     constructor(props) {
         super(props);
         this.state = {

package/src/View/Theme/ThemePopup.js

@@ -11,22 +11,6 @@ import { Icon } from '../../components/icons';
 import { ThemeSelector } from './ThemeSelector';
 import { Box } from '../../components/Flex';
 class ThemePopupComponent extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.handleCreateNewTheme = (variant) => {
-            let nthItem = this.props.UserThemes.length + 1;
-            let name = 'Custom-Theme-' + nthItem;
-            // make sure it is unique
-            while (this.props.UserThemes.some((theme) => theme.Name === name)) {
-                nthItem++;
-                name = 'Custom-Theme-' + nthItem;
-            }
-            const newTheme = ObjectFactory.CreateEmptyTheme(name);
-            newTheme.Variant = variant;
-            this.props.api.themeApi.addUserTheme(newTheme);
-            this.props.api.themeApi.loadTheme(newTheme.Name);
-        };
-    }
     render() {
         const isCustomTheme = this.props.api.themeApi
             .getUserThemes()
@@ -59,6 +43,19 @@ class ThemePopupComponent extends React.Component {
     onChangeTheme(value) {
         this.props.SelectTheme(value);
     }
+    handleCreateNewTheme = (variant) => {
+        let nthItem = this.props.UserThemes.length + 1;
+        let name = 'Custom-Theme-' + nthItem;
+        // make sure it is unique
+        while (this.props.UserThemes.some((theme) => theme.Name === name)) {
+            nthItem++;
+            name = 'Custom-Theme-' + nthItem;
+        }
+        const newTheme = ObjectFactory.CreateEmptyTheme(name);
+        newTheme.Variant = variant;
+        this.props.api.themeApi.addUserTheme(newTheme);
+        this.props.api.themeApi.loadTheme(newTheme.Name);
+    };
 }
 function mapStateToProps(state, ownProps) {
     return {