@adaptabletools/adaptable 19.2.4 → 20.0.0-canary.1

package/src/View/Components/Selectors/{ColumnValueSelector.js → BulkUpdateValueSelector.js}

@@ -5,24 +5,38 @@ import AdaptableInput from '../AdaptableInput';
 import { Box } from 'rebass';
 import { PermittedValuesSelector } from './PermittedValuesSelector';
 import { Select } from '../../../components/Select';
-export const ColumnValueSelector = (props) => {
-    var _a, _b;
+import { useAdaptable } from '../../AdaptableContext';
+import { useCallback } from 'react';
+export const BulkUpdateValueSelector = (props) => {
     const [valueType, setValueType] = React.useState('existing');
-    const columnType = (_a = props.selectedColumn) === null || _a === void 0 ? void 0 : _a.dataType;
-    const isDateType = props.selectedColumn && columnType === 'Date';
+    const adaptable = useAdaptable();
+    const columnDataType = props.selectedColumn?.dataType;
+    const isDateType = props.selectedColumn && columnDataType === 'date';
+    const columnId = props.selectedColumn?.columnId;
+    // TODO = this seems to be called whenever we edit a cell
+    // which is then triggering a get all values
+    // not sure that we need to
     const permittedValueSelector = (React.createElement(Box, null,
-        React.createElement(PermittedValuesSelector, { allowNewValues: true, disabled: props.disabled || !props.selectedColumn, value: props.selectedColumnValue === '' ? null : props.selectedColumnValue, columnId: (_b = props.selectedColumn) === null || _b === void 0 ? void 0 : _b.columnId, placeholder: isDateType ? 'Select' : 'Select or type new value', onChange: (value) => {
-                if (!value) {
-                    props.onColumnValueChange(null);
-                }
-                else {
-                    props.onColumnValueChange(value);
+        React.createElement(PermittedValuesSelector, { allowNewValues: true, disabled: props.disabled || !props.selectedColumn, value: props.selectedColumnValue === '' ? null : props.selectedColumnValue, columnId: columnId, placeholder: isDateType ? 'Select' : 'Select or type new value', loadValues: useCallback(({ currentSearchValue }) => {
+                if (!columnId) {
+                    return Promise.resolve([]);
                 }
+                return adaptable.api.gridApi.internalApi.getDistinctEditDisplayValuesForColumn({
+                    columnId,
+                    gridCell: props.selectedGridCells[0],
+                    currentSearchValue,
+                });
+            }, [
+                columnId,
+                props.selectedGridCells[0]?.column.columnId,
+                props.selectedGridCells[0]?.primaryKeyValue,
+            ]), onChange: (value) => {
+                props.onColumnValueChange(value || null);
             } })));
     const input = (React.createElement(AdaptableInput, { "data-name": "bulkupdate-value-input", type: props.selectedColumn
             ? UIHelper.getDescriptionForDataType(props.selectedColumn.dataType)
             : 'text', placeholder: props.selectedColumn
-            ? UIHelper.getPlaceHolderforDataType(props.selectedColumn.dataType)
+            ? UIHelper.getPlaceholderForDataType(props.selectedColumn.dataType)
             : 'Enter Value', autoFocus: true, disabled: props.disabled, style: { width: '100%' }, value: props.selectedColumnValue, onChange: (e) => {
             props.onColumnValueChange(e.target.value);
         } }));
@@ -35,7 +49,11 @@ export const ColumnValueSelector = (props) => {
                 setValueType(value);
             } }));
     }
-    return (React.createElement(FieldWrap, { className: props.className, style: Object.assign(Object.assign({}, props.style), { overflow: 'visible', maxWidth: '100%' }) }, isDateType ? (React.createElement(React.Fragment, null,
+    return (React.createElement(FieldWrap, { className: props.className, style: {
+            ...props.style,
+            overflow: 'visible',
+            maxWidth: '100%',
+        } }, isDateType ? (React.createElement(React.Fragment, null,
         valueType === 'new' ? input : permittedValueSelector,
         valueTypeSelector)) : (permittedValueSelector)));
 };

package/src/View/Components/Selectors/ColumnSelector.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { SelectProps } from '../../../components/Select';
 import { AdaptableColumn } from '../../../types';
 export type ColumnSelectorProps<IsMulti extends boolean = false> = {
@@ -10,5 +10,6 @@ export type ColumnSelectorProps<IsMulti extends boolean = false> = {
     value?: IsMulti extends true ? string[] : string;
     onChange: (column: IsMulti extends true ? string[] : string) => void;
     placeholder?: string;
+    renderOption?: (column: AdaptableColumn) => React.ReactNode;
 };
-export declare const ColumnSelector: <IsMulti extends boolean = false>(props: ColumnSelectorProps<IsMulti>) => JSX.Element;
+export declare const ColumnSelector: <IsMulti extends boolean = false>(props: ColumnSelectorProps<IsMulti>) => React.JSX.Element;

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

@@ -2,19 +2,21 @@ import * as React from 'react';
 import { Select } from '../../../components/Select';
 import { useAdaptable } from '../../AdaptableContext';
 export const ColumnSelector = function (props) {
-    var _a;
     const { api } = useAdaptable();
     const columns = React.useMemo(() => {
-        return api.columnApi.getColumnsOfType(props.type);
+        return api.columnApi.getColumnsWithDataType(props.type);
     }, []);
     const getColumn = (columnId) => columns.find((c) => c.columnId === columnId);
     const options = columns
         .map((column) => {
-        var _a;
-        return ({
-            label: (_a = column.friendlyName) !== null && _a !== void 0 ? _a : column.columnId,
+        let label = React.createElement(React.Fragment, null, column.friendlyName ?? column.columnId);
+        if (props.renderOption) {
+            label = props.renderOption(column);
+        }
+        return {
+            label,
             value: column.columnId,
-        });
+        };
     })
         .filter((option) => {
         if (props.filterColumn) {
@@ -22,7 +24,7 @@ export const ColumnSelector = function (props) {
         }
         return true;
     });
-    return (React.createElement(Select, { "data-name": "column-selector", disabled: props.disabled, isMulti: props.isMulti, menuPosition: props.menuPosition, value: props.value, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : 'Select Column', onChange: (colId) => {
+    return (React.createElement(Select, { "data-name": "column-selector", disabled: props.disabled, isMulti: props.isMulti, menuPosition: props.menuPosition, value: props.value, placeholder: props.placeholder ?? 'Select Column', onChange: (colId) => {
             props.onChange(colId);
         }, options: options }));
 };

package/src/View/Components/Selectors/ColumnSelectorOld.d.ts

@@ -12,7 +12,7 @@ export interface ColumnSelectorProps extends React.HTMLProps<ColumnSelector> {
     disabled?: boolean;
 }
 export declare class ColumnSelector extends React.Component<ColumnSelectorProps, {}> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     onClearButton(): void;
     onColumnChange(selected: AdaptableColumn[], isEmptySelection: boolean): void;
 }

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

@@ -6,7 +6,6 @@ import FormLayout, { FormRow } from '../../../components/FormLayout';
 import DropdownButton from '../../../components/DropdownButton';
 export class ColumnSelector extends React.Component {
     render() {
-        var _a;
         const sortedColumns = ArrayExtensions.sortArrayWithProperty(SortOrder.Asc, this.props.ColumnList, 'friendlyName');
         const selectedColumnIds = this.props.SelectedColumnIds.filter((x) => StringExtensions.IsNotNullOrEmpty(x));
         const isEmptySelectedColumnIds = this.props.SelectedColumnIds.filter((x) => StringExtensions.IsNotNullOrEmpty(x)).length == 0;
@@ -27,7 +26,7 @@ export class ColumnSelector extends React.Component {
             };
         });
         let currentColumnName = selectedColumnIds.length > 0
-            ? (_a = this.props.ColumnList.find((c) => c.columnId == selectedColumnIds[0])) === null || _a === void 0 ? void 0 : _a.friendlyName
+            ? this.props.ColumnList.find((c) => c.columnId == selectedColumnIds[0])?.friendlyName
             : 'Select a column';
         return (React.createElement("div", { "data-name": 'column-selector' },
             React.createElement(FormLayout, { columns: [{ name: 'columnSelector', style: { display: 'flex' } }], style: this.props.style },

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

@@ -2,20 +2,16 @@ import * as React from 'react';
 import { Select } from '../../../components/Select';
 import { useAdaptable } from '../../AdaptableContext';
 export const FieldSelector = (props) => {
-    var _a;
     const { api } = useAdaptable();
     const fields = React.useMemo(() => {
         return api.expressionApi.internalApi.getFieldsOfType(props.type);
     }, []);
-    const options = fields.map((field) => {
-        var _a;
-        return ({
-            label: (_a = field.label) !== null && _a !== void 0 ? _a : field.name,
-            value: field.name,
-        });
-    });
+    const options = fields.map((field) => ({
+        label: field.label ?? field.name,
+        value: field.name,
+    }));
     return (React.createElement(React.Fragment, null,
-        React.createElement(Select, { "data-name": "column-selector", disabled: props.disabled, isMulti: false, menuPosition: props.menuPosition, value: props.value || undefined, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : 'Select Field', onChange: (fieldValue) => {
+        React.createElement(Select, { "data-name": "column-selector", disabled: props.disabled, isMulti: false, menuPosition: props.menuPosition, value: props.value || undefined, placeholder: props.placeholder ?? 'Select Field', onChange: (fieldValue) => {
                 props.onChange(fieldValue);
             }, options: options })));
 };

package/src/View/Components/Selectors/PermittedValuesSelector.d.ts

@@ -1,14 +1,25 @@
-/// <reference types="react" />
+import * as React from 'react';
+import { SelectProps } from '../../../components/Select';
 export type ValueType = number | string | Date;
 interface PermittedValuesSelectorProps<Value extends ValueType, IsMulti extends boolean> {
     isMulti?: IsMulti;
     columnId: string;
     value: IsMulti extends true ? Value[] : Value;
     onChange: (value: IsMulti extends true ? Value[] : Value) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
     allowNewValues?: boolean;
     className?: string;
     disabled?: boolean;
     placeholder?: string;
+    size?: SelectProps<Value, IsMulti>['size'];
+    menuPortalTarget?: HTMLElement;
+    loadValues?: (options: {
+        currentSearchValue: string;
+    }) => Promise<{
+        value: any;
+        label: string;
+    }[]>;
 }
-export declare const PermittedValuesSelector: <Value extends ValueType, IsMulti extends boolean = false>(props: PermittedValuesSelectorProps<Value, IsMulti>) => JSX.Element;
+export declare const PermittedValuesSelector: <Value extends ValueType, IsMulti extends boolean = false>(props: PermittedValuesSelectorProps<Value, IsMulti>) => React.JSX.Element;
 export {};

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

@@ -2,11 +2,14 @@ import * as React from 'react';
 import { Select } from '../../../components/Select';
 import { runIfNotResolvedIn } from '../../../Utilities/runIfNotResolvedIn';
 import { useAdaptable } from '../../AdaptableContext';
+import { useCallback } from 'react';
 export const PermittedValuesSelector = function (props) {
     const adaptable = 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]);
@@ -17,22 +20,39 @@ export const PermittedValuesSelector = function (props) {
         }
         setIsLoading(true);
         (async () => {
-            const { values: distinctColumnValues } = await 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 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);
@@ -47,7 +67,7 @@ export 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);
             }
@@ -68,5 +88,14 @@ export const PermittedValuesSelector = function (props) {
             handleSingleValueChange(value);
         }
     };
-    return (React.createElement(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 = useCallback(() => {
+        setRefetchKey((k) => k + 1);
+    }, []);
+    const onInputChange = (value) => {
+        searchFilterRef.current = value;
+        if (searchValueWasUsedWhenFiltering) {
+            reload();
+        }
+    };
+    return (React.createElement(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 }));
 };

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

@@ -20,7 +20,7 @@ export 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;
@@ -43,7 +43,6 @@ export class StyleComponent extends React.Component {
         };
     }
     render() {
-        var _a, _b;
         const Cmp = this.props.headless ? Box : Panel;
         const cmpProps = this.props.headless
             ? {}
@@ -57,7 +56,7 @@ export class StyleComponent extends React.Component {
         const coloursSpellingVariant = this.props.api.internalApi.getCorrectEnglishVariant('colours');
         let fontSizes = ['Default'];
         fontSizes.push(...EnumExtensions.getNames(FontSize));
-        return (React.createElement(Cmp, Object.assign({}, cmpProps, { className: "ab-StyleComponent" }),
+        return (React.createElement(Cmp, { ...cmpProps, className: "ab-StyleComponent" },
             ArrayExtensions.IsNotNullOrEmpty(styleClassNames) && (React.createElement(Flex, { flexDirection: "row", padding: 2 },
                 React.createElement(Radio, { "data-name": "show-class-name", value: "classname", checked: this.state.ShowClassName, onChange: () => this.onShowClassNameChanged(true) }, "Use Style Class Name"),
                 ' ',
@@ -117,7 +116,7 @@ export 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(Box, null, fontSizes.map((enumName) => {
+                                    ], value: this.state.componentStyle.FontSize?.toString() ?? '', onChange: (value) => this.onFontSizeChange(value) }))) : (React.createElement(Box, null, fontSizes.map((enumName) => {
                                 return (React.createElement(Radio, { onClick: () => this.onFontSizeChange(enumName), checked: (enumName == 'Default' && !this.state.componentStyle.FontSize) ||
                                         this.state.componentStyle.FontSize === enumName, mr: 3, key: enumName }, enumName));
                             })))),

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

@@ -4,8 +4,7 @@ import { useAdaptable } from '../../AdaptableContext';
 export const TagValueSelector = (props) => {
     const { api } = useAdaptable();
     const getDefaultTags = () => {
-        var _a;
-        return (_a = api.internalApi.getAvailableTags()) !== null && _a !== void 0 ? _a : [];
+        return api.internalApi.getAvailableTags() ?? [];
     };
     const { availableTags = getDefaultTags(), selectedTags = [], onChange, singleSelect } = props;
     return (React.createElement(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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import kebabCase from 'lodash/kebabCase';
 import * as ToolPanelRedux from '../../../Redux/ActionsReducers/ToolPanelRedux';
-import * as SystemRedux from '../../../Redux/ActionsReducers/SystemRedux';
 import { connect } from 'react-redux';
 import { Flex } from 'rebass';
 import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
@@ -19,7 +18,6 @@ import { ToolPanelModuleId } from '../../../Utilities/Constants/ModuleConstants'
 import HelpBlock from '../../../components/HelpBlock';
 const preventDefault = (e) => e.preventDefault();
 const AdaptableToolPanelComponent = (props) => {
-    var _a;
     const toolPanelsGlyph = React.createElement(Icon, { name: 'align-justify' });
     const moduleService = props.api.internalApi.getModuleService();
     const adaptableOptions = props.api.optionsApi.getAdaptableOptions();
@@ -30,7 +28,7 @@ const AdaptableToolPanelComponent = (props) => {
         return (React.createElement(HelpBlock, { mt: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } }, "Not enough rights"));
     }
     const availableModuleItems = props.MainMenuItems.filter((menuItem) => menuItem.isVisible);
-    const availableModules = availableModuleItems.map((menuItem) => menuItem.module);
+    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');
@@ -57,9 +55,8 @@ const AdaptableToolPanelComponent = (props) => {
         .getModuleById(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) {
@@ -128,11 +125,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, { "data-name": menuItem.module, key: menuItem.label, icon: menuItem.icon, tone: "none", variant: "text", className: `ab-ToolPanel__Home__${kebabCase(menuItem.label)}`, tooltip: menuItem.label, onClick: () => props.onClick(menuItem.reduxAction), accessLevel: 'Full' }));
+                    return (React.createElement(SimpleButton, { "data-name": menuItem.category, key: menuItem.label, icon: menuItem.icon, tone: "none", variant: "text", className: `ab-ToolPanel__Home__${kebabCase(menuItem.label)}`, tooltip: menuItem.label, onClick: () => props.onClick(menuItem.reduxAction), accessLevel: 'Full' }));
                 }
             }));
         }
@@ -142,7 +139,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);
@@ -153,19 +153,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 : createUuid();
-            return (React.createElement(SimpleButton, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
-        });
-    };
-    const onSetColumnVisibility = (name) => {
-        let changedColumn = props.api.columnApi.getColumnWithColumnId(name);
-        let columns = [].concat(props.Columns);
-        changedColumn = Object.assign({}, changedColumn, {
-            Visible: !changedColumn.visible,
+            const uniqueKey = buttonLabel ?? createUuid();
+            return (React.createElement(SimpleButton, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase(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) {
@@ -201,14 +191,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)),
@@ -254,8 +243,7 @@ export 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

@@ -5,17 +5,20 @@ import { createUuid } from '../../../components/utils/uuid';
 import SimpleButton from '../../../components/SimpleButton';
 import kebabCase from 'lodash/kebabCase';
 export const CustomToolPanelContent = (props) => {
-    var _a;
     const { customToolPanel } = props;
     const { api } = useAdaptable();
-    const contentsDivDomRef = useRef();
+    const contentsDivDomRef = useRef(null);
     const contentsDivId = `ab-ToolPanel__${customToolPanel.name}__contents`;
     const buttonsDivId = `ab-ToolPanel__${customToolPanel.name}__buttons`;
     const [contentsHTML, setContentsHTML] = useState('');
     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);
         }
@@ -24,7 +27,11 @@ export 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');
@@ -33,10 +40,14 @@ export 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);
@@ -47,8 +58,8 @@ export 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 : createUuid();
-            return (React.createElement(SimpleButton, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
+            const uniqueKey = buttonLabel ?? createUuid();
+            return (React.createElement(SimpleButton, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase(buttonLabel)} ${buttonStyle?.className || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
         })))));
 };
 const hasCustomRenderFn = (customToolPanel) => customToolPanel.render;

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 {};