@adaptabletools/adaptable-cjs 19.2.4 → 20.0.0-canary.1

package/src/View/Components/ListBox/DualListBoxEditor.js

@@ -22,7 +22,7 @@ const listGroupItemStyle = {
     fontSize: 'small',
     padding: 'var(--ab-space-1)',
 };
-const ButtonDirection = (props) => (React.createElement(SimpleButton_1.default, Object.assign({}, props, { style: Object.assign({ whiteSpace: 'nowrap', justifyContent: 'center' }, props.style) })));
+const ButtonDirection = (props) => (React.createElement(SimpleButton_1.default, { ...props, style: { whiteSpace: 'nowrap', justifyContent: 'center', ...props.style } }));
 const DualListBoxEditor = (props) => {
     const [placeholder] = (0, react_1.useState)(() => {
         let placeholder = document.createElement('button');
@@ -32,7 +32,7 @@ const DualListBoxEditor = (props) => {
         return placeholder;
     });
     const refDraggedHTMLElement = (0, react_1.useRef)(null);
-    const refDraggedElement = (0, react_1.useRef)();
+    const refDraggedElement = (0, react_1.useRef)(null);
     const refOverHTMLElement = (0, react_1.useRef)(null);
     const refFirstSelected = (0, react_1.useRef)(null);
     const createAvailableValuesList = (availableValues, sortOrder) => {
@@ -60,7 +60,7 @@ const DualListBoxEditor = (props) => {
     const callbackRefs = (0, react_1.useRef)([]);
     const getProps = (0, useLatest_1.useLatest)(props);
     const setState = (newState, callback) => {
-        updateState(Object.assign(Object.assign({}, state), newState));
+        updateState({ ...state, ...newState });
         if (newState.SelectedValues && props.SelectedValues !== newState.SelectedValues) {
             getProps().onChange(newState.SelectedValues);
         }
@@ -495,7 +495,7 @@ const DualListBoxEditor = (props) => {
     });
     const headerFirstListBox = (React.createElement(ListBoxFilterSortComponent_1.ListBoxFilterSortComponent, { FilterValue: state.FilterValue, sortColumnValues: sortColumnValues, SortOrder: state.SortOrder, handleChangeFilterValue: handleChangeFilterValue }));
     const headerSecondListBox = (React.createElement(ListBoxFilterSortComponent_1.ListBoxFilterSortComponent, { FilterValue: state.SelectedValuesFilterValue, sortColumnValues: sortSelectedColumnValues, SortOrder: state.SelectedValuesSortOrder, handleChangeFilterValue: handleChangeSelectedValuesFilterValue }));
-    return (React.createElement(rebass_1.Flex, { alignItems: "stretch", flexDirection: "row", className: "ab-DualListBoxEditor", style: Object.assign(Object.assign({}, props.style), { maxHeight: '100%', width: '100%' }) },
+    return (React.createElement(rebass_1.Flex, { alignItems: "stretch", flexDirection: "row", className: "ab-DualListBoxEditor", style: { ...props.style, maxHeight: '100%', width: '100%' } },
         React.createElement(Panel_1.default, { header: props.HeaderAvailable, className: "ab-DualListBoxEditor__source", bodyProps: { padding: 0 }, marginRight: 2, style: { flex: '4 0 0%' }, bodyScroll: true },
             headerFirstListBox,
             React.createElement(SelectableList_1.default, { getItemId: getAvailableItemId, onSelectedChange: onAvailableListSelectionChange },

package/src/View/Components/ListBox/ListBoxFilterSortComponent.d.ts

@@ -7,7 +7,7 @@ export interface ListBoxFilterSortComponentProps extends React.ClassAttributes<L
     sortColumnValues: () => void;
 }
 export declare class ListBoxFilterSortComponent extends React.Component<ListBoxFilterSortComponentProps, {}> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     handleChangeFilterValue(x: React.FormEvent<any>): void;
     clearFilter(): void;
 }

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ValueSelectorProps } from '../ValueSelector';
 import { AdaptableModule } from '../../../PredefinedConfig/Common/Types';
 export interface ModuleValueSelectorProps extends Omit<ValueSelectorProps<AdaptableModule, AdaptableModule>, 'allowReorder' | 'toIdentifier' | 'toLabel'> {
     isDisabled?: (module: AdaptableModule) => boolean;
 }
-export declare const ModuleValueSelector: (props: ModuleValueSelectorProps) => JSX.Element;
+export declare const ModuleValueSelector: (props: ModuleValueSelectorProps) => React.JSX.Element;

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

@@ -8,8 +8,8 @@ const AdaptableContext_1 = require("../../AdaptableContext");
 const react_1 = require("react");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
 const ModuleValueSelector = (props) => {
-    const { options, value, onChange, selectionBoxPosition = 'top' } = props, valueSelectorProps = tslib_1.__rest(props, ["options", "value", "onChange", "selectionBoxPosition"]);
-    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const { options, value, onChange, selectionBoxPosition = 'top', ...valueSelectorProps } = props;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const selectedModulesMap = (0, react_1.useMemo)(() => {
         if (!value || !value.length) {
             return new Map();
@@ -24,12 +24,12 @@ const ModuleValueSelector = (props) => {
     }, [selectedModulesMap]);
     const moduleLabelMap = (0, react_1.useMemo)(() => {
         const labelMap = new Map();
-        options.forEach((module) => { var _a; return labelMap.set(module, (_a = api.internalApi.getModuleFriendlyName(module)) !== null && _a !== void 0 ? _a : module); });
+        options.forEach((module) => labelMap.set(module, adaptable.ModuleService.getModuleFriendlyName(module) ?? module));
         return labelMap;
     }, [options]);
     const sortedOptions = (0, react_1.useMemo)(() => {
         return ArrayExtensions_1.default.sortArrayWithOrder(options, value, { sortUnorderedItems: true });
     }, [allowReorder, options, value]);
-    return (React.createElement(ValueSelector_1.ValueSelector, Object.assign({}, valueSelectorProps, { options: sortedOptions, value: value, onChange: onChange, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), selectionBoxPosition: selectionBoxPosition, isOptionDisabled: props.isOptionDisabled, disabled: props.disabled })));
+    return (React.createElement(ValueSelector_1.ValueSelector, { ...valueSelectorProps, options: sortedOptions, value: value, onChange: onChange, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), selectionBoxPosition: selectionBoxPosition, isOptionDisabled: props.isOptionDisabled, disabled: props.disabled }));
 };
 exports.ModuleValueSelector = ModuleValueSelector;

package/src/View/Components/NewScopeComponent.d.ts

@@ -8,7 +8,7 @@ export declare const renderScopeSummary: (scope: ColumnScope, labels: {
     scopeWholeRow: string;
     scopeColumns: string;
     scopeDataTypes: string;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export interface NewScopeComponentProps extends React.ClassAttributes<any> {
     scope: ColumnScope;
     scopeColumns?: AdaptableColumn[];
@@ -25,4 +25,4 @@ export interface NewScopeComponentProps extends React.ClassAttributes<any> {
     disableColumns?: boolean;
     isColumnAvailable?: (column: AdaptableColumn) => boolean;
 }
-export declare const NewScopeComponent: (props: NewScopeComponentProps) => JSX.Element;
+export declare const NewScopeComponent: (props: NewScopeComponentProps) => React.JSX.Element;

package/src/View/Components/NewScopeComponent.js

@@ -30,25 +30,25 @@ exports.isScopeValid = isScopeValid;
 const DATA_TYPES_MAP = {
     Date: {
         label: 'Date',
-        value: 'Date',
+        value: 'date',
     },
     Number: {
         label: 'Number',
-        value: 'Number',
+        value: 'number',
     },
     String: {
-        label: 'String',
-        value: 'String',
+        label: 'Text',
+        value: 'text',
     },
     Boolean: {
         label: 'Boolean',
-        value: 'Boolean',
+        value: 'boolean',
     },
 };
 const renderScopeSummary = (scope, labels) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const scopeApi = adaptable.api.columnScopeApi;
-    const columnsInScope = scopeApi.getColumnsForScope(scope);
+    const columnsInScope = scopeApi.getColumnsInScope(scope);
     return (React.createElement(React.Fragment, null,
         React.createElement(rebass_1.Box, null,
             React.createElement(OnePageAdaptableWizard_1.SummaryText, { mb: 0 }, scopeApi.scopeIsAll(scope) ? labels.scopeWholeRow : null)),
@@ -62,12 +62,11 @@ const renderScopeSummary = (scope, labels) => {
 exports.renderScopeSummary = renderScopeSummary;
 const DATA_TYPES_OPTIONS = Object.values(DATA_TYPES_MAP);
 const NewScopeComponent = (props) => {
-    var _a, _b;
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const { columnScopeApi: scopeApi, columnApi } = api;
     const [columnsSearchText, setColumnsSearchText] = (0, react_1.useState)('');
     const scopeColumns = React.useMemo(() => {
-        const allColumns = props.scopeColumns || columnApi.getStandardColumns();
+        const allColumns = props.scopeColumns || columnApi.getUIAvailableColumns();
         if (typeof props.isColumnAvailable === 'function') {
             return allColumns.filter((c) => props.isColumnAvailable(c));
         }
@@ -144,10 +143,9 @@ const NewScopeComponent = (props) => {
         dataTypeOptions = props.availableDataTypes.map((dataType) => DATA_TYPES_MAP[dataType]);
     }
     const hasColumnTypes = React.useMemo(() => {
-        var _a;
-        return ((_a = api.columnApi.getColumnTypes()) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        return api.columnApi.getColumnTypes()?.length > 0;
     }, []);
-    return (React.createElement(Tabs_1.Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: scopeChoice, style: Object.assign({ height: '100%' }, props.style), onValueChange: onScopeSelectChanged },
+    return (React.createElement(Tabs_1.Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: scopeChoice, style: { height: '100%', ...props.style }, onValueChange: onScopeSelectChanged },
         props.hideWholeRow ? null : (React.createElement(Tabs_1.Tabs.Tab, { value: "Row" },
             React.createElement(Radio_1.default, { margin: 0, checked: scopeChoice == 'All', tabIndex: -1 }, "All Columns"))),
         !props.disableColumns && (React.createElement(Tabs_1.Tabs.Tab, { value: "Column" },
@@ -171,21 +169,18 @@ const NewScopeComponent = (props) => {
                 React.createElement(rebass_1.Flex, { flexDirection: "column" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, key: dataTypeOption.value, checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label))))))),
         hasColumnTypes && (React.createElement(Tabs_1.Tabs.Content, { value: "ColumnType", style: { flex: 'none' }, "data-name": "column-type-scope" },
             React.createElement(rebass_1.Box, null,
-                React.createElement(rebass_1.Flex, { flexDirection: "column" }, (_b = (_a = api.columnApi.getColumnTypes()) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, (columnType) => {
-                    var _a;
-                    return (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": columnType, key: columnType, checked: 'ColumnTypes' in props.scope && ((_a = props.scope.ColumnTypes) === null || _a === void 0 ? void 0 : _a.includes(columnType)), onChange: (checked) => {
-                            let columnTypes = [].concat(props.scope.ColumnTypes);
-                            if (checked) {
-                                columnTypes.push(columnType);
-                            }
-                            else {
-                                columnTypes = columnTypes.filter((ct) => ct !== columnType);
-                            }
-                            let newScope = {
-                                ColumnTypes: columnTypes,
-                            };
-                            props.updateScope(newScope);
-                        } }, columnType));
-                })))))));
+                React.createElement(rebass_1.Flex, { flexDirection: "column" }, api.columnApi.getColumnTypes()?.map?.((columnType) => (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": columnType, key: columnType, checked: 'ColumnTypes' in props.scope && props.scope.ColumnTypes?.includes(columnType), onChange: (checked) => {
+                        let columnTypes = [].concat(props.scope.ColumnTypes);
+                        if (checked) {
+                            columnTypes.push(columnType);
+                        }
+                        else {
+                            columnTypes = columnTypes.filter((ct) => ct !== columnType);
+                        }
+                        let newScope = {
+                            ColumnTypes: columnTypes,
+                        };
+                        props.updateScope(newScope);
+                    } }, columnType)))))))));
 };
 exports.NewScopeComponent = NewScopeComponent;

package/src/View/Components/Panels/PanelDashboard/index.d.ts

@@ -5,11 +5,11 @@ export interface PanelDashboardProps extends PanelProps {
     headerText: string;
     onClose: () => void;
     onConfigure: () => void;
-    showConfigureButton?: boolean;
-    showCloseButton?: boolean;
+    showConfigureActionButton?: boolean;
+    showCloseActionButton?: boolean;
     accessLevel: AccessLevel;
 }
 export declare class PanelDashboard extends React.Component<PanelDashboardProps, {}> {
     static defaultProps: PanelDashboardProps;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -6,14 +6,14 @@ const React = tslib_1.__importStar(require("react"));
 const Dashboard_1 = require("../../../../components/Dashboard");
 class PanelDashboard extends React.Component {
     render() {
-        const { headerText, showConfigureButton, showCloseButton, onConfigure, onClose, accessLevel, children, } = this.props;
-        return (React.createElement(Dashboard_1.DashboardToolbar, { title: headerText, onConfigure: onConfigure, showConfigure: showConfigureButton, showClose: showCloseButton, onClose: onClose, accessLevel: accessLevel }, children));
+        const { headerText, showConfigureActionButton, showCloseActionButton, onConfigure, onClose, accessLevel, children, } = this.props;
+        return (React.createElement(Dashboard_1.DashboardToolbar, { title: headerText, onConfigure: onConfigure, showConfigure: showConfigureActionButton, showClose: showCloseActionButton, onClose: onClose, accessLevel: accessLevel }, children));
     }
 }
 exports.PanelDashboard = PanelDashboard;
 PanelDashboard.defaultProps = {
-    showConfigureButton: true,
-    showCloseButton: true,
+    showConfigureActionButton: true,
+    showCloseActionButton: true,
     headerText: 'Module',
     onClose: null,
     onConfigure: null,

package/src/View/Components/Panels/PanelFooter.js

@@ -6,10 +6,9 @@ const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const PanelFooter = (props) => {
-    var _a, _b;
     return (React.createElement(rebass_1.Flex, { className: "ab-Panel__Footer", flexDirection: "row", padding: 1, backgroundColor: "primary", alignItems: "center" },
-        React.createElement(SimpleButton_1.default, { margin: 1, variant: "text", "data-name": "action-cancel", onClick: props.onCancel, disabled: props.cancelDisabled }, (_a = props.cancelText) !== null && _a !== void 0 ? _a : 'CANCEL'),
+        React.createElement(SimpleButton_1.default, { margin: 1, variant: "text", "data-name": "action-cancel", onClick: props.onCancel, disabled: props.cancelDisabled }, props.cancelText ?? 'CANCEL'),
         React.createElement(rebass_1.Box, { flex: 1 }),
-        React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", "data-name": "action-finish", margin: 1, onClick: props.onAccept, disabled: props.acceptDisabled }, (_b = props.cancelText) !== null && _b !== void 0 ? _b : 'Finish')));
+        React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", "data-name": "action-finish", margin: 1, onClick: props.onAccept, disabled: props.acceptDisabled }, props.cancelText ?? 'Finish')));
 };
 exports.PanelFooter = PanelFooter;

package/src/View/Components/Panels/PanelToolPanel/index.d.ts

@@ -10,5 +10,5 @@ export interface PanelToolPanelProps extends PanelProps {
 }
 export declare class PanelToolPanel extends React.Component<PanelToolPanelProps, {}> {
     static defaultProps: PanelToolPanelProps;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -12,13 +12,36 @@ const join_1 = tslib_1.__importDefault(require("../../../../components/utils/joi
 const ButtonMaximise_1 = require("../../Buttons/ButtonMaximise");
 class PanelToolPanel extends React.Component {
     render() {
-        const _a = this.props, { useDefaultPanelStyle, isMinimised, onMinimiseChanged, headerText, onClose, onConfigure } = _a, props = tslib_1.__rest(_a, ["useDefaultPanelStyle", "isMinimised", "onMinimiseChanged", "headerText", "onClose", "onConfigure"]);
+        const { useDefaultPanelStyle, isMinimised, onMinimiseChanged, headerText, onClose, onConfigure, ...props } = this.props;
         let header = (React.createElement(React.Fragment, null,
             !isMinimised ? (React.createElement(ButtonMinimise_1.ButtonMinimise, { className: "ab-ToolPanelPanel__header-minimise", onClick: () => onMinimiseChanged(), marginRight: 1 })) : (React.createElement(ButtonMaximise_1.ButtonMaximise, { className: "ab-ToolPanelPanel__header-maximise", onClick: () => onMinimiseChanged(), marginRight: 1 })),
             React.createElement(rebass_1.Flex, { className: "ab-ToolPanelPanel__header-text", flex: 1, alignItems: "center", marginLeft: 0 }, headerText),
             onConfigure && (React.createElement(ButtonConfigure_1.ButtonConfigure, { iconSize: 16, marginLeft: 1, className: "ab-ToolPanelPanel__header-configure-button", tooltip: 'Configure ' + headerText, onClick: () => onConfigure() })),
             onClose && (React.createElement(ButtonClose_1.ButtonClose, { marginLeft: 0, className: "ab-ToolPanelPanel__header-close-button", tooltip: 'Close ' + headerText, onClick: () => onClose(), disabled: props.disabled }))));
-        return (React.createElement(Panel_1.default, Object.assign({ border: "var(--ab-cmp-toolpanelpanel__border)" }, props, { className: (0, join_1.default)('ab-ToolPanelPanel', props.className), header: header, style: Object.assign({ color: 'var(--ab-cmp-toolpanelpanel__color)', fill: 'var(--ab-cmp-toolpanelpanel__fill)' }, props.style), headerProps: Object.assign(Object.assign({}, props.headerProps), { alignItems: 'stretch', style: Object.assign({ padding: 'var(--ab-cmp-toolpanelpanel_header__padding)', background: 'var(--ab-cmp-toolpanelpanel_header__background)', color: 'var(--ab-cmp-toolpanelpanel_header__color)', fill: 'var(--ab-cmp-toolpanelpanel_header__fill)' }, (props.headerProps ? props.headerProps.style : null)) }), bodyProps: Object.assign(Object.assign({}, props.bodyProps), { style: Object.assign(Object.assign({ padding: 'var(--ab-cmp-dashboardpanel_body__padding)', background: 'var(--ab-cmp-dashboardpanel_body__background)' }, (props.bodyProps ? props.bodyProps.style : null)), { display: 'flex', flexDirection: 'column' }) }) })));
+        return (React.createElement(Panel_1.default, { border: "var(--ab-cmp-toolpanelpanel__border)", ...props, className: (0, join_1.default)('ab-ToolPanelPanel', props.className), header: header, style: {
+                color: 'var(--ab-cmp-toolpanelpanel__color)',
+                fill: 'var(--ab-cmp-toolpanelpanel__fill)',
+                ...props.style,
+            }, headerProps: {
+                ...props.headerProps,
+                alignItems: 'stretch',
+                style: {
+                    padding: 'var(--ab-cmp-toolpanelpanel_header__padding)',
+                    background: 'var(--ab-cmp-toolpanelpanel_header__background)',
+                    color: 'var(--ab-cmp-toolpanelpanel_header__color)',
+                    fill: 'var(--ab-cmp-toolpanelpanel_header__fill)',
+                    ...(props.headerProps ? props.headerProps.style : null),
+                },
+            }, bodyProps: {
+                ...props.bodyProps,
+                style: {
+                    padding: 'var(--ab-cmp-dashboardpanel_body__padding)',
+                    background: 'var(--ab-cmp-dashboardpanel_body__background)',
+                    ...(props.bodyProps ? props.bodyProps.style : null),
+                    display: 'flex',
+                    flexDirection: 'column',
+                },
+            } }));
     }
 }
 exports.PanelToolPanel = PanelToolPanel;

package/src/View/Components/Panels/PanelWithButton.d.ts

@@ -18,6 +18,4 @@ export interface PanelWithButtonProps extends PanelProps {
     infoLink?: string;
     infoLinkDisabled?: boolean;
 }
-export declare class PanelWithButton extends React.Component<PanelWithButtonProps & PanelProps, {}> {
-    render(): JSX.Element;
-}
+export declare const PanelWithButton: (props: PanelWithButtonProps) => React.JSX.Element;

package/src/View/Components/Panels/PanelWithButton.js

@@ -8,25 +8,19 @@ const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
 const rebass_1 = require("rebass");
 const icons_1 = require("../../../components/icons");
 const ButtonInfo_1 = require("../Buttons/ButtonInfo");
-//We cannot destructure this.props using the react way in typescript which is a real pain as you
-//need to transfer props individually as a consequence
-//let { buttonContent, ...other } = this.props
-class PanelWithButton extends React.Component {
-    render() {
-        let { buttonContent } = this.props;
-        const IconCmp = icons_1.allIcons[this.props.glyphicon];
-        let header = (React.createElement(rebass_1.Flex, { alignItems: "center", width: "100%" },
-            React.createElement(rebass_1.Flex, { alignItems: "center" },
-                this.props.glyphicon != null && (IconCmp ? React.createElement(IconCmp, null) : null),
-                React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-before" }),
-                this.props.headerText,
-                React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-after" }),
-                this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
-                    ) }))),
-            React.createElement(rebass_1.Box, { style: { flex: 1 } }),
-            buttonContent ? (React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", disabled: this.props.buttonDisabled, onClick: () => (this.props.buttonClick ? this.props.buttonClick() : null) }, buttonContent)) : null,
-            this.props.button ? React.cloneElement(this.props.button) : null));
-        return (React.createElement(Panel_1.default, { flex: 1, className: this.props.className, bodyScroll: this.props.bodyScroll != null ? this.props.bodyScroll : true, bodyProps: this.props.bodyProps, variant: this.props.variant || 'primary', header: header, headerProps: this.props.headerProps, style: this.props.style, borderRadius: (this.props.borderRadius || 'none'), border: (this.props.border || 'none') }, this.props.children));
-    }
-}
+const PanelWithButton = (props) => {
+    const { buttonContent } = props;
+    const IconCmp = icons_1.allIcons[props.glyphicon];
+    const header = (React.createElement(rebass_1.Flex, { alignItems: "center", width: "100%" },
+        React.createElement(rebass_1.Flex, { alignItems: "center" },
+            props.glyphicon != null && (IconCmp ? React.createElement(IconCmp, null) : null),
+            React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-before" }),
+            props.headerText,
+            React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-after" }),
+            props.infoLink != null && !props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { onClick: () => window.open(props.infoLink, '_blank') }))),
+        React.createElement(rebass_1.Box, { style: { flex: 1 } }),
+        buttonContent ? (React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", disabled: props.buttonDisabled, onClick: () => (props.buttonClick ? props.buttonClick() : null) }, buttonContent)) : null,
+        props.button ? React.cloneElement(props.button) : null));
+    return (React.createElement(Panel_1.default, { flex: 1, className: props.className, bodyScroll: props.bodyScroll != null ? props.bodyScroll : true, bodyProps: props.bodyProps, variant: props.variant || 'primary', header: header, headerProps: props.headerProps, style: props.style, borderRadius: (props.borderRadius || 'none'), border: (props.border || 'none') }, props.children));
+};
 exports.PanelWithButton = PanelWithButton;

package/src/View/Components/Panels/PanelWithImage.js

@@ -13,7 +13,6 @@ const ButtonInfo_1 = require("../Buttons/ButtonInfo");
 //let { buttonContent, ...other } = this.props
 class PanelWithImageCmp extends React.Component {
     render() {
-        var _a;
         const IconCmp = icons_1.allIcons[(this.props.icon || this.props.glyphicon)];
         const headerStyle = {};
         if (this.props.headerColor) {
@@ -24,13 +23,17 @@ class PanelWithImageCmp extends React.Component {
             React.createElement(rebass_1.Flex, { alignItems: "center" },
                 React.createElement(rebass_1.Flex, { minHeight: 15, alignItems: "center", style: headerStyle },
                     IconCmp ? React.createElement(IconCmp, null) : null,
-                    React.createElement(rebass_1.Box, { marginRight: 2 }), (_a = this.props.header) !== null && _a !== void 0 ? _a : '',
+                    React.createElement(rebass_1.Box, { marginRight: 2 }),
+                    this.props.header ?? '',
                     React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-after" }),
                     this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
                         ) }))),
                 React.createElement(rebass_1.Box, { flex: 1 }),
                 this.props.button && React.cloneElement(this.props.button))));
-        return (React.createElement(Panel_1.default, { flex: this.props.flex, header: headerRow, variant: this.props.variant, style: this.props.style, bodyScroll: this.props.bodyScroll !== undefined ? this.props.bodyScroll : true, border: "none", borderRadius: this.props.borderRadius || 'none', bodyProps: Object.assign({ padding: 0 }, this.props.bodyProps) }, this.props.children));
+        return (React.createElement(Panel_1.default, { flex: this.props.flex, header: headerRow, variant: this.props.variant, style: this.props.style, bodyScroll: this.props.bodyScroll !== undefined ? this.props.bodyScroll : true, border: "none", borderRadius: this.props.borderRadius || 'none', bodyProps: {
+                padding: 0,
+                ...this.props.bodyProps,
+            } }, this.props.children));
     }
 }
 // apparently it's very hard to type `withTheme()` result in typescript

package/src/View/Components/Panels/PanelWithRow.d.ts

@@ -6,5 +6,5 @@ export interface PanelWithRowProps extends PanelProps {
     headerAlign?: string;
 }
 export declare class PanelWithRow extends React.Component<PanelWithRowProps, {}> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/src/View/Components/Panels/PanelWithTwoButtons.d.ts

@@ -8,5 +8,5 @@ export interface PanelWithTwoButtonsProps extends PanelProps {
     headerText: string;
 }
 export declare class PanelWithTwoButtons extends React.Component<PanelWithTwoButtonsProps, {}> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/src/View/Components/Panels/PanelWithTwoButtons.js

@@ -14,7 +14,7 @@ class PanelWithTwoButtons extends React.Component {
             React.createElement(rebass_1.Flex, { flex: 1 }, this.props.headerText),
             this.props.secondButton,
             this.props.firstButton));
-        return (React.createElement(Panel_1.default, Object.assign({}, this.props, { header: header }), this.props.children));
+        return (React.createElement(Panel_1.default, { ...this.props, header: header }, this.props.children));
     }
 }
 exports.PanelWithTwoButtons = PanelWithTwoButtons;

package/src/View/Components/Panels/ToolPanelSettingsPanel.d.ts

@@ -4,5 +4,5 @@ export interface ToolPanelSettingsPanelProps extends PanelProps {
     button: React.ReactElement<any>;
 }
 export declare class ToolPanelSettingsPanel extends React.Component<ToolPanelSettingsPanelProps, {}> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/src/View/Components/Popups/AdaptableLoadingScreen.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 export interface IAdaptableLoadingScreenProps {
     showLoadingScreen: boolean;
     loadingScreenDelay?: number;
@@ -6,4 +6,4 @@ export interface IAdaptableLoadingScreenProps {
     loadingScreenText?: string;
     onClose?: () => {};
 }
-export declare function AdaptableLoadingScreen(props: IAdaptableLoadingScreenProps): JSX.Element;
+export declare function AdaptableLoadingScreen(props: IAdaptableLoadingScreenProps): React.JSX.Element;

package/src/View/Components/Popups/AdaptableLoadingScreen.js

@@ -22,7 +22,7 @@ function AdaptableLoadingScreen(props) {
             minHeight: 'auto',
         } },
         React.createElement(rebass_1.Box, { padding: 3 },
-            React.createElement("h4", null, loadingScreenTitle !== null && loadingScreenTitle !== void 0 ? loadingScreenTitle : 'Initialising Grid'),
-            React.createElement("p", null, loadingScreenText !== null && loadingScreenText !== void 0 ? loadingScreenText : 'Retrieving your settings and setting up the grid...'))));
+            React.createElement("h4", null, loadingScreenTitle ?? 'Initialising Grid'),
+            React.createElement("p", null, loadingScreenText ?? 'Retrieving your settings and setting up the grid...'))));
 }
 exports.AdaptableLoadingScreen = AdaptableLoadingScreen;

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopup.js

@@ -15,13 +15,12 @@ const CustomSettingsPanelView_1 = require("./CustomSettingsPanelView");
 const useMenuItems_1 = require("./useMenuItems");
 const AdaptablePopupDialog_1 = require("./AdaptablePopupDialog");
 const AdaptablePopup = (props) => {
-    var _a, _b, _c;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
-    const settingsPanelTitle = adaptable.api.internalApi.getModuleFriendlyName('SettingsPanel');
+    const settingsPanelTitle = adaptable.ModuleService.getModuleFriendlyName('SettingsPanel');
     const menuItems = (0, useMenuItems_1.useMenuItems)();
     const isWindowModal = settingsPanelOptions.popupType === 'window';
-    const modalContainer = (_b = (_a = adaptable.adaptableOptions) === null || _a === void 0 ? void 0 : _a.containerOptions) === null || _b === void 0 ? void 0 : _b.modalContainer;
+    const modalContainer = adaptable.adaptableOptions?.containerOptions?.modalContainer;
     let friendlyName = null;
     /**
      * This means that it is not rendered in the context of Settings Panel
@@ -33,7 +32,7 @@ const AdaptablePopup = (props) => {
     let activeItem = null;
     let accessLevel = 'Full';
     const firstMenuItem = menuItems.find((menuItem) => menuItem !== '-');
-    const firstMenuModule = firstMenuItem === null || firstMenuItem === void 0 ? void 0 : firstMenuItem.module;
+    const firstMenuModule = firstMenuItem?.category;
     let componentModule = props.componentModule;
     let componentName = props.componentName;
     // ts forces to check for General, there is no menu item General
@@ -44,7 +43,7 @@ const AdaptablePopup = (props) => {
         firstMenuModule !== 'Group') {
         componentModule = firstMenuModule;
     }
-    const customSettingsPanel = (_c = settingsPanelOptions === null || settingsPanelOptions === void 0 ? void 0 : settingsPanelOptions.customSettingsPanels) === null || _c === void 0 ? void 0 : _c.find((customPanel) => useFirstItem ? customPanel.name === firstMenuItem.label : customPanel.name === componentName);
+    const customSettingsPanel = settingsPanelOptions?.customSettingsPanels?.find((customPanel) => useFirstItem ? customPanel.name === firstMenuItem.label : customPanel.name === componentName);
     if (customSettingsPanel) {
         friendlyName = customSettingsPanel.name;
         activeItem = customSettingsPanel.name;
@@ -52,13 +51,13 @@ const AdaptablePopup = (props) => {
     }
     else {
         const module = props.api.internalApi.getModuleService().getModuleById(componentModule);
-        const moduleInfo = module === null || module === void 0 ? void 0 : module.moduleInfo;
+        const moduleInfo = module?.moduleInfo;
         accessLevel = props.api.entitlementApi.getEntitlementAccessLevelForModule(componentModule);
         friendlyName = moduleInfo.FriendlyName;
         isStandalone =
             moduleInfo &&
-                (GeneralConstants.STANDALONE_MODULE_POPUPS.includes(moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.ModuleName) ||
-                    (props.componentName && props.componentName !== (moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.Popup)));
+                (GeneralConstants.STANDALONE_MODULE_POPUPS.includes(moduleInfo?.ModuleName) ||
+                    (props.componentName && props.componentName !== moduleInfo?.Popup));
         activeItem = moduleInfo.ModuleName;
         moduleViewContent = (React.createElement(AdaptablePopupBody_1.AdaptablePopupBody, { api: props.api, module: module, componentName: props.componentName, moduleParams: props.moduleParams, onClearParams: props.onClearParams, onHide: props.onHide }));
     }

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupBody.js

@@ -7,7 +7,6 @@ const UIHelper_1 = require("../../../UIHelper");
 const AdaptableViewFactory_1 = require("../../../AdaptableViewFactory");
 const AdaptablePopupModuleView_1 = require("./AdaptablePopupModuleView");
 const AdaptablePopupBody = (props) => {
-    var _a;
     const modalContainer = UIHelper_1.UIHelper.getModalContainer(props.api.optionsApi.getAdaptableOptions(), document);
     const moduleName = props.module.moduleInfo.ModuleName;
     const accessLevel = props.api.entitlementApi.getEntitlementAccessLevelForModule(moduleName);
@@ -28,9 +27,9 @@ const AdaptablePopupBody = (props) => {
         api: props.api,
         moduleInfo,
     };
-    const BodyComponent = (AdaptableViewFactory_1.AdaptableViewFactory === null || AdaptableViewFactory_1.AdaptableViewFactory === void 0 ? void 0 : AdaptableViewFactory_1.AdaptableViewFactory[(_a = props === null || props === void 0 ? void 0 : props.componentName) !== null && _a !== void 0 ? _a : moduleInfo.Popup]) || AdaptablePopupModuleView_1.AdaptablePopupModuleView;
+    const BodyComponent = AdaptableViewFactory_1.AdaptableViewFactory?.[props?.componentName ?? moduleInfo.Popup] || AdaptablePopupModuleView_1.AdaptablePopupModuleView;
     // key is to make sure state is reset between views
     // most of the views use the `AdaptablePopupModuleView` component
-    return React.createElement(BodyComponent, Object.assign({ key: props === null || props === void 0 ? void 0 : props.componentName, module: props.module }, moduleProps));
+    return React.createElement(BodyComponent, { key: props?.componentName, module: props.module, ...moduleProps });
 };
 exports.AdaptablePopupBody = AdaptablePopupBody;

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupDialog.js

@@ -6,26 +6,25 @@ const React = tslib_1.__importStar(require("react"));
 const react_dom_1 = require("react-dom");
 const react_redux_1 = require("react-redux");
 const Dialog_1 = tslib_1.__importDefault(require("../../../../components/Dialog"));
-const SystemRedux_1 = require("../../../../Redux/ActionsReducers/SystemRedux");
+const InternalRedux_1 = require("../../../../Redux/ActionsReducers/InternalRedux");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const Utilities_1 = require("../Utilities");
 const WindowDialog = (props) => {
-    var _a, _b;
-    const { onChange, style, baseClassName, className, isActionModule, settingsPanelOptionsKey, onHide } = props, dialogProps = tslib_1.__rest(props, ["onChange", "style", "baseClassName", "className", "isActionModule", "settingsPanelOptionsKey", "onHide"]);
+    const { onChange, style, baseClassName, className, isActionModule, settingsPanelOptionsKey, onHide, ...dialogProps } = props;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const dispatch = (0, react_redux_1.useDispatch)();
     const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
-    let popupSettings = (0, react_redux_1.useSelector)((state) => { var _a, _b; return (_b = (_a = state === null || state === void 0 ? void 0 : state.System) === null || _a === void 0 ? void 0 : _a.SettingsPanel) === null || _b === void 0 ? void 0 : _b[settingsPanelOptionsKey]; });
+    let popupSettings = (0, react_redux_1.useSelector)((state) => state?.Internal?.SettingsPanel?.[settingsPanelOptionsKey]);
     const handleWindowSettings = (settings) => {
-        dispatch((0, SystemRedux_1.SystemSettingsPanelSet)(settingsPanelOptionsKey, settings));
+        dispatch((0, InternalRedux_1.SettingsPanelSet)(settingsPanelOptionsKey, settings));
     };
     if (!popupSettings) {
         const size = isActionModule
             ? (0, Utilities_1.getActionPanelSize)()
-            : (_a = settingsPanelOptions.size) !== null && _a !== void 0 ? _a : (0, Utilities_1.getSettingsPanelSize)();
+            : settingsPanelOptions.size ?? (0, Utilities_1.getSettingsPanelSize)();
         popupSettings = {
             size: size,
-            position: (_b = settingsPanelOptions.position) !== null && _b !== void 0 ? _b : (0, Utilities_1.getMiddlePosition)(size),
+            position: settingsPanelOptions.position ?? (0, Utilities_1.getMiddlePosition)(size),
         };
     }
     const windowModalProps = {
@@ -38,11 +37,11 @@ const WindowDialog = (props) => {
         position: popupSettings.position,
         onChange: handleWindowSettings,
     };
-    return (React.createElement(Dialog_1.default, Object.assign({ windowModal: true, fixed: false, windowModalProps: windowModalProps, style: Object.assign(Object.assign({}, props.style), { height: '100%' }), padding: 0, className: className, onDismiss: onHide, isOpen: true, showCloseButton: true }, dialogProps)));
+    return (React.createElement(Dialog_1.default, { windowModal: true, fixed: false, windowModalProps: windowModalProps, style: { ...props.style, height: '100%' }, padding: 0, className: className, onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps }));
 };
 const PopupDialog = (props) => {
-    const { style, className, onHide, children } = props, dialogProps = tslib_1.__rest(props, ["style", "className", "onHide", "children"]);
-    return (React.createElement(Dialog_1.default, Object.assign({ fixed: false, style: props.style, padding: 0, height: '90vh', width: '90vw', className: className, onDismiss: onHide, isOpen: true, showCloseButton: true }, dialogProps), children));
+    const { style, className, onHide, children, ...dialogProps } = props;
+    return (React.createElement(Dialog_1.default, { fixed: false, style: props.style, padding: 0, height: '90vh', width: '90vw', className: className, onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps }, children));
 };
 const AdaptablePopupDialog = (props) => {
     const { isActionModule, style, friendlyName, baseClassName, className, children, onHide, isWindowModal, modalContainer, } = props;
@@ -61,7 +60,10 @@ const AdaptablePopupDialog = (props) => {
         return (React.createElement(WindowDialog, { dataName: props.dataName, settingsPanelOptionsKey: settingsPanelOptionsKey, isActionModule: isActionModule, onHide: onHide, style: style, baseClassName: baseClassName, className: className }, children));
     }
     else {
-        const modalStyle = Object.assign(Object.assign({}, style), (isActionModule ? { maxWidth: 800, maxHeight: 600 } : { maxWidth: 1200, maxHeight: 1000 }));
+        const modalStyle = {
+            ...style,
+            ...(isActionModule ? { maxWidth: 800, maxHeight: 600 } : { maxWidth: 1200, maxHeight: 1000 }),
+        };
         return (React.createElement(PopupDialog, { "data-name": props.dataName, onHide: onHide, style: modalStyle, className: className }, children));
     }
 };