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

package/src/View/Components/Selectors/PermittedValuesSelector.js

@@ -6,11 +6,14 @@ const React = tslib_1.__importStar(require("react"));
 const Select_1 = require("../../../components/Select");
 const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
 const AdaptableContext_1 = require("../../AdaptableContext");
+const react_1 = require("react");
 const PermittedValuesSelector = function (props) {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const [refetchKey, setRefetchKey] = React.useState(0);
     const [isLoading, setIsLoading] = React.useState(true);
     const [options, setOptions] = React.useState([]);
-    const [filter, setFilter] = React.useState('');
+    const searchFilterRef = React.useRef('');
+    const [searchValueWasUsedWhenFiltering, setSearchValueWasUsedWhenFiltering] = React.useState(false);
     const dataType = React.useMemo(() => {
         return adaptable.api.columnApi.getColumnDataTypeForColumnId(props.columnId);
     }, [props.columnId]);
@@ -21,22 +24,39 @@ const PermittedValuesSelector = function (props) {
         }
         setIsLoading(true);
         (async () => {
-            const { values: distinctColumnValues } = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(adaptable.api.gridApi.internalApi.getDistinctFilterDisplayValuesForColumn(props.columnId, filter, adaptable.api.optionsApi.getColumnFilterOptions().valuesFilterOptions
-                .showCurrentlyFilteredValuesOnly), () => {
+            let searchValueUsedInFilterValue = false;
+            const currentSearchValue = searchFilterRef.current;
+            const distinctColumnValues = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(
+            // we are here ALWAYS getting Filter values but sometimes we want to get other things!!!
+            props.loadValues
+                ? props.loadValues({
+                    get currentSearchValue() {
+                        searchValueUsedInFilterValue = true;
+                        return currentSearchValue;
+                    },
+                })
+                : adaptable.api.gridApi.internalApi.getDistinctFilterDisplayValuesForColumn({
+                    columnId: props.columnId,
+                    get currentSearchValue() {
+                        searchValueUsedInFilterValue = true;
+                        return currentSearchValue;
+                    },
+                }), () => {
                 setIsLoading(true);
             });
+            setSearchValueWasUsedWhenFiltering(searchValueUsedInFilterValue);
             setIsLoading(false);
             setOptions(distinctColumnValues);
         })();
-    }, [props.columnId, filter]);
-    const isCreatable = (props.allowNewValues && !dataType) || ['String', 'Number'].includes(dataType);
+    }, [props.columnId, props.loadValues, refetchKey]);
+    const isCreatable = (props.allowNewValues && !dataType) || ['text', 'number'].includes(dataType);
     const handleSingleValueChange = (value) => {
         if (isCreatable) {
             // try to convert to correct type, when there is not type, e.g. field
             if (!dataType && typeof value === 'string' && !isNaN(parseFloat(value))) {
                 props.onChange(parseFloat(value));
             }
-            else if (dataType === 'Number') {
+            else if (dataType === 'number') {
                 let num = parseFloat(value);
                 num = isNaN(num) ? null : num;
                 props.onChange(num);
@@ -51,7 +71,7 @@ const PermittedValuesSelector = function (props) {
     };
     const handleMultiValueChange = (values) => {
         if (isCreatable) {
-            if (dataType === 'Number') {
+            if (dataType === 'number') {
                 const nums = values.map((v) => parseFloat(v)).filter((v) => !isNaN(v));
                 props.onChange(nums);
             }
@@ -72,6 +92,15 @@ const PermittedValuesSelector = function (props) {
             handleSingleValueChange(value);
         }
     };
-    return (React.createElement(Select_1.Select, { isMulti: props.isMulti, className: props.className, disabled: props.disabled, "data-name": "permitted-values-selector", placeholder: props.placeholder || (props.allowNewValues ? 'Select or type new value' : 'Select value'), isCreatable: isCreatable, isClearable: true, options: options, isLoading: isLoading, onInputChange: setFilter, onChange: handleOnChange, value: props.value }));
+    const reload = (0, react_1.useCallback)(() => {
+        setRefetchKey((k) => k + 1);
+    }, []);
+    const onInputChange = (value) => {
+        searchFilterRef.current = value;
+        if (searchValueWasUsedWhenFiltering) {
+            reload();
+        }
+    };
+    return (React.createElement(Select_1.Select, { menuPortalTarget: props.menuPortalTarget, size: props.size, isMulti: props.isMulti, className: props.className, disabled: props.disabled, closeMenuOnSelect: !props.isMulti, "data-name": "permitted-values-selector", placeholder: props.placeholder || (props.allowNewValues ? 'Select or type new value' : 'Select value'), isCreatable: isCreatable, isClearable: true, onMenuOpen: reload, options: options, isLoading: isLoading, onInputChange: onInputChange, onChange: handleOnChange, onFocus: props.onFocus, onBlur: props.onBlur, value: props.value }));
 };
 exports.PermittedValuesSelector = PermittedValuesSelector;

package/src/View/Components/SharedProps/EditableConfigEntityState.js

@@ -7,4 +7,4 @@ var WizardStatus;
     WizardStatus["New"] = "New";
     WizardStatus["Edit"] = "Edit";
     WizardStatus["None"] = "None";
-})(WizardStatus = exports.WizardStatus || (exports.WizardStatus = {}));
+})(WizardStatus || (exports.WizardStatus = WizardStatus = {}));

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

@@ -21,7 +21,7 @@ export declare class StyleComponent extends React.Component<StyleComponentProps,
     static getDerivedStateFromProps(nextProps: StyleComponentProps, prevState: StyleComponentState): {
         componentStyle: AdaptableStyle;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     onShowClassNameChanged: (checked: boolean) => void;
     private onStyleClassNameChanged;
     private onUseBackColorCheckChange;

package/src/View/Components/StyleComponent.js

@@ -24,7 +24,7 @@ class StyleComponent extends React.Component {
         super(props);
         this.onShowClassNameChanged = (checked) => {
             this.setState((state) => {
-                const newState = Object.assign({}, state);
+                const newState = { ...state };
                 delete newState.componentStyle.BackColor;
                 delete newState.componentStyle.ForeColor;
                 delete newState.componentStyle.BorderColor;
@@ -47,7 +47,6 @@ class StyleComponent extends React.Component {
         };
     }
     render() {
-        var _a, _b;
         const Cmp = this.props.headless ? rebass_1.Box : Panel_1.default;
         const cmpProps = this.props.headless
             ? {}
@@ -61,7 +60,7 @@ class StyleComponent extends React.Component {
         const coloursSpellingVariant = this.props.api.internalApi.getCorrectEnglishVariant('colours');
         let fontSizes = ['Default'];
         fontSizes.push(...EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize));
-        return (React.createElement(Cmp, Object.assign({}, cmpProps, { className: "ab-StyleComponent" }),
+        return (React.createElement(Cmp, { ...cmpProps, className: "ab-StyleComponent" },
             ArrayExtensions_1.default.IsNotNullOrEmpty(styleClassNames) && (React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2 },
                 React.createElement(Radio_1.default, { "data-name": "show-class-name", value: "classname", checked: this.state.ShowClassName, onChange: () => this.onShowClassNameChanged(true) }, "Use Style Class Name"),
                 ' ',
@@ -121,7 +120,7 @@ class StyleComponent extends React.Component {
                                             label: enumName,
                                             value: enumName,
                                         })),
-                                    ], value: (_b = (_a = this.state.componentStyle.FontSize) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '', onChange: (value) => this.onFontSizeChange(value) }))) : (React.createElement(rebass_1.Box, null, fontSizes.map((enumName) => {
+                                    ], value: this.state.componentStyle.FontSize?.toString() ?? '', onChange: (value) => this.onFontSizeChange(value) }))) : (React.createElement(rebass_1.Box, null, fontSizes.map((enumName) => {
                                 return (React.createElement(Radio_1.default, { onClick: () => this.onFontSizeChange(enumName), checked: (enumName == 'Default' && !this.state.componentStyle.FontSize) ||
                                         this.state.componentStyle.FontSize === enumName, mr: 3, key: enumName }, enumName));
                             })))),

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ValueSelectorProps } from '../ValueSelector';
 import { AdaptableObjectTag } from '../../../PredefinedConfig/Common/AdaptableObject';
 export interface TagsSelectorProps extends Omit<ValueSelectorProps<AdaptableObjectTag, string | number>, 'options' | 'value' | 'onChange' | 'allowReorder' | 'toIdentifier' | 'toLabel' | 'selectionBoxPosition' | 'noSelectionLabel' | 'xSelectedLabel'> {
@@ -6,8 +6,8 @@ export interface TagsSelectorProps extends Omit<ValueSelectorProps<AdaptableObje
     selectedTags?: AdaptableObjectTag[];
     onChange: (selectedTags: AdaptableObjectTag[]) => void;
 }
-export declare const TagValueSelector: (props: TagsSelectorProps) => JSX.Element;
+export declare const TagValueSelector: (props: TagsSelectorProps) => React.JSX.Element;
 export interface TagValueOptionsTagsProps {
     tags?: AdaptableObjectTag[];
 }
-export declare const TagValueOptionsTags: (props: TagValueOptionsTagsProps) => JSX.Element;
+export declare const TagValueOptionsTags: (props: TagValueOptionsTagsProps) => React.JSX.Element;

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

@@ -8,8 +8,7 @@ const AdaptableContext_1 = require("../../AdaptableContext");
 const TagValueSelector = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const getDefaultTags = () => {
-        var _a;
-        return (_a = api.internalApi.getAvailableTags()) !== null && _a !== void 0 ? _a : [];
+        return api.internalApi.getAvailableTags() ?? [];
     };
     const { availableTags = getDefaultTags(), selectedTags = [], onChange, singleSelect } = props;
     return (React.createElement(ValueSelector_1.ValueSelector, { options: availableTags, value: selectedTags.map((tag) => api.internalApi.getLabelForTag(tag)), singleSelect: singleSelect, allowReorder: false, onChange: (selectedTagsIds, selectedTagsMap) => {

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

@@ -1,14 +1,13 @@
-/// <reference types="react" />
-import * as Redux from 'redux';
+import * as React from 'react';
 import * as ToolPanelRedux from '../../../Redux/ActionsReducers/ToolPanelRedux';
-import * as SystemRedux from '../../../Redux/ActionsReducers/SystemRedux';
-import { IToolPanelParams } from '@ag-grid-community/core';
+import { IToolPanelParams } from 'ag-grid-enterprise';
 import { AdaptableApi } from '../../../types';
 import { AdaptableMenuItem } from '../../../PredefinedConfig/Common/Menu';
 import { AdaptableModuleButtons, AdaptableToolPanel } from '../../../PredefinedConfig/Common/Types';
 import { AdaptableColumn } from '../../../PredefinedConfig/Common/AdaptableColumn';
 import { IAdaptable } from '../../../AdaptableInterfaces/IAdaptable';
 import { AdaptableToolPanelDefinition } from '../../../PredefinedConfig/ToolPanelState';
+import type { Action } from 'redux';
 interface AdaptableToolPanelProps {
     api: AdaptableApi;
     teamSharingActivated?: boolean;
@@ -16,15 +15,19 @@ interface AdaptableToolPanelProps {
     ModuleButtons: AdaptableModuleButtons;
     MainMenuItems: AdaptableMenuItem[];
     Columns: AdaptableColumn[];
-    onClick: (action: Redux.Action) => Redux.Action;
-    onNewColumnListOrder: (VisibleColumnList: string[]) => SystemRedux.SetNewColumnListOrderAction;
+    onClick: (action: Action) => Action;
     onShowToolPanel: (toolPanel: AdaptableToolPanel | string) => ToolPanelRedux.ToolPanelShowToolPanelAction;
     onHideToolPanel: (toolPanel: AdaptableToolPanel | string) => ToolPanelRedux.ToolPanelHideToolPanelAction;
     onExpandToolPanel: (toolPanel: AdaptableToolPanel | string) => ToolPanelRedux.ToolPanelExpandToolPanelAction;
     onCollapseToolPanel: (toolPanel: AdaptableToolPanel | string) => ToolPanelRedux.ToolPanelCollapseToolPanelAction;
 }
-export declare const ConnectedAdaptableToolPanel: import("react-redux").ConnectedComponent<(props: AdaptableToolPanelProps) => JSX.Element, import("react-redux").Omit<JSX.LibraryManagedAttributes<C, import("react-redux").GetProps<C>>, "onClick" | "Columns" | "ModuleButtons" | "ToolPanels" | "MainMenuItems" | "onNewColumnListOrder" | "onSetToolPanelVisibility" | "onShowToolPanel" | "onHideToolPanel" | "onExpandToolPanel" | "onCollapseToolPanel">>;
-export declare const getAdaptableToolPanelAgGridComponent: (adaptable: IAdaptable) => (() => JSX.Element) | {
+export declare const ConnectedAdaptableToolPanel: import("react-redux").ConnectedComponent<(props: AdaptableToolPanelProps) => React.JSX.Element, {
+    api: AdaptableApi;
+    teamSharingActivated?: boolean;
+    context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction>>;
+    store?: import("redux").Store<any, import("redux").UnknownAction, unknown>;
+}>;
+export declare const getAdaptableToolPanelAgGridComponent: (adaptable: IAdaptable) => (() => React.JSX.Element) | {
     new (): {
         gui: HTMLElement;
         unmountReactRoot?: VoidFunction;

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

@@ -5,7 +5,6 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
 const ToolPanelRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ToolPanelRedux"));
-const SystemRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/SystemRedux"));
 const react_redux_1 = require("react-redux");
 const rebass_1 = require("rebass");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
@@ -23,7 +22,6 @@ const ModuleConstants_1 = require("../../../Utilities/Constants/ModuleConstants"
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const preventDefault = (e) => e.preventDefault();
 const AdaptableToolPanelComponent = (props) => {
-    var _a;
     const toolPanelsGlyph = React.createElement(icons_1.Icon, { name: 'align-justify' });
     const moduleService = props.api.internalApi.getModuleService();
     const adaptableOptions = props.api.optionsApi.getAdaptableOptions();
@@ -34,7 +32,7 @@ const AdaptableToolPanelComponent = (props) => {
         return (React.createElement(HelpBlock_1.default, { mt: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } }, "Not enough rights"));
     }
     const availableModuleItems = props.MainMenuItems.filter((menuItem) => menuItem.isVisible);
-    const availableModules = availableModuleItems.map((menuItem) => menuItem.module);
+    const availableModules = availableModuleItems.map((menuItem) => menuItem.category);
     // 'Dashboard' is a special case because it's not available in the dashboard menu items, s we have to add it manually
     if (!props.api.entitlementApi.isModuleHiddenEntitlement('Dashboard')) {
         availableModules.push('Dashboard');
@@ -61,9 +59,8 @@ const AdaptableToolPanelComponent = (props) => {
         .getModuleById(ModuleConstants_1.ToolPanelModuleId)
         .isModuleEditable();
     const visibleToolPanels = [];
-    const visibleToolPanelControls = ((_a = props.ToolPanels) !== null && _a !== void 0 ? _a : []).map((toolPanelDefinition) => {
-        var _a;
-        const visibilityMode = (_a = toolPanelDefinition.VisibilityMode) !== null && _a !== void 0 ? _a : 'collapsed';
+    const visibleToolPanelControls = (props.ToolPanels ?? []).map((toolPanelDefinition) => {
+        const visibilityMode = toolPanelDefinition.VisibilityMode ?? 'collapsed';
         // 1. check if it is a custom toolPanel
         const customToolPanel = props.api.toolPanelApi.getCustomToolPanelByName(toolPanelDefinition.Name);
         if (customToolPanel) {
@@ -132,11 +129,11 @@ const AdaptableToolPanelComponent = (props) => {
         if (shouldAddSettingsPanel && !moduleButtons.includes('SettingsPanel')) {
             moduleButtons = ['SettingsPanel', ...moduleButtons];
         }
-        if (moduleButtons === null || moduleButtons === void 0 ? void 0 : moduleButtons.length) {
+        if (moduleButtons?.length) {
             toolPanelButtons.push(moduleButtons.map((x) => {
-                let menuItem = props.MainMenuItems.find((y) => y.isVisible && y.module == x);
+                let menuItem = props.MainMenuItems.find((y) => y.isVisible && y.category == x);
                 if (menuItem) {
-                    return (React.createElement(SimpleButton_1.default, { "data-name": menuItem.module, key: menuItem.label, icon: menuItem.icon, tone: "none", variant: "text", className: `ab-ToolPanel__Home__${(0, kebabCase_1.default)(menuItem.label)}`, tooltip: menuItem.label, onClick: () => props.onClick(menuItem.reduxAction), accessLevel: 'Full' }));
+                    return (React.createElement(SimpleButton_1.default, { "data-name": menuItem.category, key: menuItem.label, icon: menuItem.icon, tone: "none", variant: "text", className: `ab-ToolPanel__Home__${(0, kebabCase_1.default)(menuItem.label)}`, tooltip: menuItem.label, onClick: () => props.onClick(menuItem.reduxAction), accessLevel: 'Full' }));
                 }
             }));
         }
@@ -146,7 +143,10 @@ const AdaptableToolPanelComponent = (props) => {
         return props.api.toolPanelApi.getCustomToolPanelButtons().map((button) => {
             // TODO: variants of this mapping are present in several places (just search for api.internalApi.getStyleForButton() usages)
             // with the next opportunity we should abstract it
-            const toolPanelContext = Object.assign(Object.assign({}, props.api.internalApi.buildBaseContext()), { toolPanelState: props.api.toolPanelApi.getToolPanelState() });
+            const toolPanelContext = {
+                ...props.api.internalApi.buildBaseContext(),
+                toolPanelState: props.api.toolPanelApi.getToolPanelState(),
+            };
             const buttonIcon = props.api.internalApi.getIconForButton(button, toolPanelContext);
             let buttonStyle = props.api.internalApi.getStyleForButton(button, toolPanelContext);
             let buttonLabel = props.api.internalApi.getLabelForButton(button, toolPanelContext);
@@ -157,19 +157,9 @@ const AdaptableToolPanelComponent = (props) => {
             const disabled = button.disabled && button.disabled(button, toolPanelContext);
             const buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text';
             const buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none';
-            const uniqueKey = buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : (0, uuid_1.createUuid)();
-            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${(0, kebabCase_1.default)(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
-        });
-    };
-    const onSetColumnVisibility = (name) => {
-        let changedColumn = props.api.columnApi.getColumnWithColumnId(name);
-        let columns = [].concat(props.Columns);
-        changedColumn = Object.assign({}, changedColumn, {
-            Visible: !changedColumn.visible,
+            const uniqueKey = buttonLabel ?? (0, uuid_1.createUuid)();
+            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${(0, kebabCase_1.default)(buttonLabel)} ${buttonStyle?.className || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
         });
-        let index = columns.findIndex((x) => x.columnId == name);
-        columns[index] = changedColumn;
-        props.onNewColumnListOrder(columns.filter((c) => c.visible).map((c) => c.columnId));
     };
     const onSetToolPanelVisibility = (name, checked) => {
         if (checked) {
@@ -205,14 +195,13 @@ function mapStateToProps(state) {
     return {
         ToolPanels: state.ToolPanel.ToolPanels,
         ModuleButtons: state.ToolPanel.ModuleButtons,
-        MainMenuItems: state.Grid.SettingPanelModuleMenuItems,
-        Columns: state.Grid.Columns,
+        MainMenuItems: state.Internal.SettingsPanelModuleEntries,
+        Columns: state.Internal.Columns,
     };
 }
 function mapDispatchToProps(dispatch) {
     return {
         onClick: (action) => dispatch(action),
-        onNewColumnListOrder: (VisibleColumnList) => dispatch(SystemRedux.SetNewColumnListOrder(VisibleColumnList)),
         onSetToolPanelVisibility: (toolPanels) => dispatch(ToolPanelRedux.ToolPanelSetToolPanels(toolPanels)),
         onShowToolPanel: (toolPanel) => dispatch(ToolPanelRedux.ToolPanelShowToolPanel(toolPanel)),
         onHideToolPanel: (toolPanel) => dispatch(ToolPanelRedux.ToolPanelHideToolPanel(toolPanel)),
@@ -258,8 +247,7 @@ const getAdaptableToolPanelAgGridComponent = (adaptable) => {
             // no refresh logic needed
         }
         destroy() {
-            var _a;
-            (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.unmountReactRoot?.();
         }
     };
 };

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { CustomToolPanel } from '../../../AdaptableOptions/ToolPanelOptions';
 export interface CustomToolPanelContentProps {
     customToolPanel: CustomToolPanel;
 }
-export declare const CustomToolPanelContent: (props: CustomToolPanelContentProps) => JSX.Element;
+export declare const CustomToolPanelContent: (props: CustomToolPanelContentProps) => React.JSX.Element;

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

@@ -9,17 +9,20 @@ const uuid_1 = require("../../../components/utils/uuid");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
 const CustomToolPanelContent = (props) => {
-    var _a;
     const { customToolPanel } = props;
     const { api } = (0, AdaptableContext_1.useAdaptable)();
-    const contentsDivDomRef = (0, react_1.useRef)();
+    const contentsDivDomRef = (0, react_1.useRef)(null);
     const contentsDivId = `ab-ToolPanel__${customToolPanel.name}__contents`;
     const buttonsDivId = `ab-ToolPanel__${customToolPanel.name}__buttons`;
     const [contentsHTML, setContentsHTML] = (0, react_1.useState)('');
     (0, react_1.useLayoutEffect)(() => {
         const element = contentsDivDomRef.current;
         if (hasCustomRenderFn(customToolPanel)) {
-            const customRenderContext = Object.assign({ visible: true, phase: 'onMount', element }, api.internalApi.buildBaseContext());
+            const customRenderContext = {
+                phase: 'onMount',
+                element,
+                ...api.internalApi.buildBaseContext(),
+            };
             const html = customToolPanel.render(customRenderContext);
             setContentsHTML(html);
         }
@@ -28,7 +31,11 @@ const CustomToolPanelContent = (props) => {
         }
         return () => {
             if (hasCustomRenderFn(customToolPanel)) {
-                customToolPanel.render(Object.assign({ visible: false, phase: 'onDestroy', element }, api.internalApi.buildBaseContext()));
+                customToolPanel.render({
+                    phase: 'onDestroy',
+                    element,
+                    ...api.internalApi.buildBaseContext(),
+                });
             }
             else if (hasCustomFrameworkComponent(customToolPanel) && !api.isDestroyed()) {
                 api.internalApi.destroyFrameworkComponent(element, customToolPanel.frameworkComponent, 'toolPanel');
@@ -37,10 +44,14 @@ const CustomToolPanelContent = (props) => {
     }, []);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { ref: contentsDivDomRef, id: contentsDivId, className: contentsDivId, dangerouslySetInnerHTML: { __html: contentsHTML }, style: { width: '100%' } }),
-        ((_a = customToolPanel.buttons) === null || _a === void 0 ? void 0 : _a.length) && (React.createElement("div", { id: buttonsDivId, className: `ab-ToolPanel__custom-content__buttons ${buttonsDivId}` }, customToolPanel.buttons.map((button) => {
+        customToolPanel.buttons?.length && (React.createElement("div", { id: buttonsDivId, className: `ab-ToolPanel__custom-content__buttons ${buttonsDivId}` }, customToolPanel.buttons.map((button) => {
             // TODO: variants of this mapping are present in several places (just search for api.internalApi.getStyleForButton() usages)
             // with the next opportunity we should abstract it
-            const toolPanelContext = Object.assign(Object.assign({}, api.internalApi.buildBaseContext()), { toolPanelState: api.toolPanelApi.getToolPanelState(), customToolPanel: customToolPanel });
+            const toolPanelContext = {
+                ...api.internalApi.buildBaseContext(),
+                toolPanelState: api.toolPanelApi.getToolPanelState(),
+                customToolPanel: customToolPanel,
+            };
             const buttonIcon = api.internalApi.getIconForButton(button, toolPanelContext);
             let buttonStyle = api.internalApi.getStyleForButton(button, toolPanelContext);
             let buttonLabel = api.internalApi.getLabelForButton(button, toolPanelContext);
@@ -51,8 +62,8 @@ const CustomToolPanelContent = (props) => {
             const disabled = button.disabled && button.disabled(button, toolPanelContext);
             const buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text';
             const buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none';
-            const uniqueKey = buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : (0, uuid_1.createUuid)();
-            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${(0, kebabCase_1.default)(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
+            const uniqueKey = buttonLabel ?? (0, uuid_1.createUuid)();
+            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${(0, kebabCase_1.default)(buttonLabel)} ${buttonStyle?.className || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
         })))));
 };
 exports.CustomToolPanelContent = CustomToolPanelContent;

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import * as ToolPanelRedux from '../../../Redux/ActionsReducers/ToolPanelRedux';
 import { ModuleViewPopupProps } from '../SharedProps/ModuleViewPopupProps';
-import { GridState } from '../../../PredefinedConfig/GridState';
+import { InternalState } from '../../../PredefinedConfig/InternalState';
 import { AdaptableToolPanelDefinition, ToolPanelState } from '../../../PredefinedConfig/ToolPanelState';
 import { AdaptableModuleButtons, AdaptableToolPanels } from '../../../PredefinedConfig/Common/Types';
 interface ToolPanelPopupComponentProps extends ModuleViewPopupProps<ToolPanelPopupComponent> {
     ToolPanelState: ToolPanelState;
-    GridState: GridState;
+    InternalState: InternalState;
     onToolPanelSetModuleButtons: (moduleButtons: AdaptableModuleButtons) => ToolPanelRedux.ToolPanelSetModuleButtonsAction;
     onToolPanelSetToolPanels: (toolPanels: AdaptableToolPanelDefinition[]) => ToolPanelRedux.ToolPanelSetToolPanelsAction;
 }
@@ -19,9 +19,12 @@ export interface ToolPanelPopupState {
 }
 declare class ToolPanelPopupComponent extends React.Component<ToolPanelPopupComponentProps, ToolPanelPopupState> {
     constructor(props: ToolPanelPopupComponentProps);
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     onShowGridPropertiesChanged(event: React.FormEvent<any>): void;
     onToolPanelToolPanelsChanged(selectedValues: AdaptableToolPanels): void;
 }
-export declare let ToolPanelPopup: import("react-redux").ConnectedComponent<typeof ToolPanelPopupComponent, import("react-redux").Omit<JSX.LibraryManagedAttributes<C, import("react-redux").GetProps<C>>, keyof ToolPanelPopupComponentProps>>;
+export declare let ToolPanelPopup: import("react-redux").ConnectedComponent<typeof ToolPanelPopupComponent, {
+    context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction>>;
+    store?: import("redux").Store<any, import("redux").UnknownAction, unknown>;
+}>;
 export {};

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

@@ -15,12 +15,11 @@ var ToolPanelConfigView;
 (function (ToolPanelConfigView) {
     ToolPanelConfigView["Buttons"] = "Buttons";
     ToolPanelConfigView["ToolPanels"] = "ToolPanels";
-})(ToolPanelConfigView = exports.ToolPanelConfigView || (exports.ToolPanelConfigView = {}));
+})(ToolPanelConfigView || (exports.ToolPanelConfigView = ToolPanelConfigView = {}));
 class ToolPanelPopupComponent extends React.Component {
     constructor(props) {
-        var _a, _b, _c;
         super(props);
-        const initialTab = (_c = (_b = (_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.initialTab) !== null && _c !== void 0 ? _c : ToolPanelConfigView.ToolPanels;
+        const initialTab = props.popupParams?.config?.initialTab ?? ToolPanelConfigView.ToolPanels;
         this.state = {
             ToolPanelConfigView: initialTab,
         };
@@ -30,15 +29,15 @@ class ToolPanelPopupComponent extends React.Component {
         const selectedModuleButtons = [];
         if (ArrayExtensions_1.default.IsNotNullOrEmpty(this.props.ToolPanelState.ModuleButtons)) {
             this.props.ToolPanelState.ModuleButtons.forEach((module) => {
-                let menuItem = this.props.GridState.SettingPanelModuleMenuItems.find((m) => m.module == module);
-                if (menuItem === null || menuItem === void 0 ? void 0 : menuItem.isVisible) {
+                let menuItem = this.props.InternalState.SettingsPanelModuleEntries.find((m) => m.category == module);
+                if (menuItem?.isVisible) {
                     selectedModuleButtons.push(module);
                 }
             });
         }
-        const allModuleButtons = this.props.GridState.SettingPanelModuleMenuItems.map((x) => x.module);
+        const allModuleButtons = this.props.InternalState.SettingsPanelModuleEntries.map((x) => x.category);
         // 2. process tool panels
-        const availableModules = this.props.GridState.SettingPanelModuleMenuItems.filter((menuItem) => menuItem.isVisible).map((menuItem) => menuItem.module);
+        const availableModules = this.props.InternalState.SettingsPanelModuleEntries.filter((menuItem) => menuItem.isVisible).map((menuItem) => menuItem.category);
         // 'Dashboard' is a special case because it's not available in the dashboard menu items, s we have to add it manually
         if (!this.props.api.entitlementApi.isModuleHiddenEntitlement('Dashboard')) {
             availableModules.push('Dashboard');
@@ -92,8 +91,7 @@ class ToolPanelPopupComponent extends React.Component {
         // try to return the pre-existing definition (to maintain the previous collapsed state)
         // otherwise select the new toolPanel with the default 'collapsed' state
         let newSelectedToolPanelDefinitions = selectedValues.map((selectedToolPanel) => {
-            var _a;
-            return ((_a = currentSelectedToolPanelDefinitions.find((currentDefinition) => currentDefinition.Name === selectedToolPanel)) !== null && _a !== void 0 ? _a : {
+            return (currentSelectedToolPanelDefinitions.find((currentDefinition) => currentDefinition.Name === selectedToolPanel) ?? {
                 Name: selectedToolPanel,
                 VisibilityMode: 'collapsed',
             });
@@ -104,7 +102,7 @@ class ToolPanelPopupComponent extends React.Component {
 function mapStateToProps(state) {
     return {
         ToolPanelState: state.ToolPanel,
-        GridState: state.Grid,
+        InternalState: state.Internal,
     };
 }
 function mapDispatchToProps(dispatch) {

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { AdaptableToolPanel } from '../../../PredefinedConfig/Common/Types';
 import { CustomToolPanel } from '../../../AdaptableOptions/ToolPanelOptions';
 import { ToolPanelVisibilityMode } from '../../../PredefinedConfig/ToolPanelState';
@@ -13,4 +13,4 @@ export type ToolPanelWrapperProps = {
     visibilityMode: ToolPanelVisibilityMode;
     onVisibilityModeChange: (visibilityMode: ToolPanelVisibilityMode) => void;
 };
-export declare const ToolPanelWrapper: (props: ToolPanelWrapperProps) => JSX.Element;
+export declare const ToolPanelWrapper: (props: ToolPanelWrapperProps) => React.JSX.Element;

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

@@ -15,7 +15,6 @@ const ToolPanelWrapper = (props) => {
     const { adaptableToolPanel, customToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: onVisibilityModeChange, } = props;
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const getToolPanelConfiguration = () => {
-        var _a;
         if (adaptableToolPanel) {
             const accessLevel = api.entitlementApi.getEntitlementAccessLevelForModule(adaptableToolPanel);
             const moduleInfo = api.internalApi
@@ -33,7 +32,7 @@ const ToolPanelWrapper = (props) => {
             // custom toolPanel
             return [
                 customToolPanel.name,
-                (_a = customToolPanel === null || customToolPanel === void 0 ? void 0 : customToolPanel.title) !== null && _a !== void 0 ? _a : customToolPanel.name,
+                customToolPanel?.title ?? customToolPanel.name,
                 React.createElement(CustomToolPanelContent_1.CustomToolPanelContent, { customToolPanel: customToolPanel }),
             ];
         }

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

@@ -28,13 +28,31 @@ export type ValueSelectorProps<OPTION_TYPE, ID_TYPE extends number | string> = {
     disabled?: boolean;
     style?: React.CSSProperties;
 };
-export declare function ValueSelector<OPTION_TYPE, ID_TYPE extends number | string>(props: ValueSelectorProps<OPTION_TYPE, ID_TYPE>): JSX.Element;
+export declare function ValueSelector<OPTION_TYPE, ID_TYPE extends number | string>(props: ValueSelectorProps<OPTION_TYPE, ID_TYPE>): React.JSX.Element;
+export declare const renderSelectionSection: (props: {
+    noSelectionLabel?: ValueSelectorProps<any, any>['noSelectionLabel'];
+    clearSelectionLabel?: ValueSelectorProps<any, any>['clearSelectionLabel'];
+    value: ValueSelectorProps<any, any>['value'];
+    options: ValueSelectorProps<any, any>['options'];
+    disabled?: ValueSelectorProps<any, any>['disabled'];
+    isOptionDisabled?: ValueSelectorProps<any, any>['isOptionDisabled'];
+    singleSelect?: ValueSelectorProps<any, any>['singleSelect'];
+    toIdentifier: ValueSelectorProps<any, any>['toIdentifier'];
+    toLabel: ValueSelectorProps<any, any>['toLabel'];
+    onChange: ValueSelectorProps<any, any>['onChange'];
+    xSelectedLabel?: ValueSelectorProps<any, any>['xSelectedLabel'];
+    selectionBoxPosition?: ValueSelectorProps<any, any>['selectionBoxPosition'];
+    onSelectAll: () => void;
+    onClear: () => void;
+    onClearOption: (id: any) => void;
+}) => React.JSX.Element;
 type ValueOptionsTagsProps<OPTION_TYPE, ID_TYPE extends number | string> = {
     style?: React.CSSProperties;
     options: OPTION_TYPE[];
     value: ID_TYPE[];
     selectedMap?: Map<ID_TYPE, OPTION_TYPE>;
     toLabel: ValueSelectorProps<OPTION_TYPE, ID_TYPE>['toLabel'];
+    isOptionDisabled?: ValueSelectorProps<OPTION_TYPE, ID_TYPE>['isOptionDisabled'];
     toIdentifier: ValueSelectorProps<OPTION_TYPE, ID_TYPE>['toIdentifier'];
     renderLabel?: (label: string | React.ReactElement) => ReactNode;
     onChange?: ValueSelectorProps<OPTION_TYPE, ID_TYPE>['onChange'];
@@ -42,5 +60,5 @@ type ValueOptionsTagsProps<OPTION_TYPE, ID_TYPE extends number | string> = {
     allowWrap?: boolean;
     onClearOption?: (id: ID_TYPE) => void;
 };
-export declare function ValueOptionsTags<OPTION_TYPE, ID_TYPE extends number | string>(props: ValueOptionsTagsProps<OPTION_TYPE, ID_TYPE>): JSX.Element;
+export declare function ValueOptionsTags<OPTION_TYPE, ID_TYPE extends number | string>(props: ValueOptionsTagsProps<OPTION_TYPE, ID_TYPE>): React.JSX.Element;
 export {};