@adaptabletools/adaptable-cjs 19.2.3 → 20.0.0-canary.0

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

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ValueOptionsTags = exports.ValueSelector = void 0;
+exports.ValueOptionsTags = exports.renderSelectionSection = exports.ValueSelector = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const rebass_1 = require("rebass");
-const react_beautiful_dnd_1 = require("react-beautiful-dnd");
+const dnd_1 = require("../../../components/dnd");
 const CheckBox_1 = require("../../../components/CheckBox");
 const icons_1 = require("../../../components/icons");
 const EllipsisContainer_1 = require("../../../components/EllipsisContainer");
@@ -31,23 +31,21 @@ function useValuesMap({ options, value, toIdentifier, selectedMap, }) {
         }
         const map = new Map([]);
         value.forEach((id) => {
-            var _a;
-            map.set(id, (_a = optionsMap.get(id)) !== null && _a !== void 0 ? _a : null);
+            map.set(id, optionsMap.get(id) ?? null);
         });
         return map;
     }, [optionsMap, selectedMap, value]);
     return { selectedMap: result, optionsMap };
 }
+const baseClassName = 'ab-ValueSelector';
 function ValueSelector(props) {
-    var _a;
-    const { options, value, filter, onChange, allowReorder = true, singleSelect, toLabel, toListLabel, toIdentifier, noSelectionLabel, clearSelectionLabel, showSelectedOnlyLabel, showFilterInput, xSelectedLabel, selectionBoxPosition = 'bottom', onShowSelectedOnlyChange, isOptionDisabled, disabled, } = props;
+    const { options, value, filter, onChange, allowReorder = true, singleSelect, toLabel, toListLabel, toIdentifier, showSelectedOnlyLabel, showFilterInput, selectionBoxPosition = 'bottom', onShowSelectedOnlyChange, isOptionDisabled, disabled, } = props;
     const [searchInputValue, setSearchInputValue] = React.useState('');
-    const baseClassName = 'ab-ValueSelector';
-    const preparedToLabel = toListLabel !== null && toListLabel !== void 0 ? toListLabel : toLabel;
+    const preparedToLabel = toListLabel ?? toLabel;
     const [selectedOnly, doSetSelectedOnly] = (0, react_1.useState)(false);
     const setSelectedOnly = (0, react_1.useCallback)((selectedOnly) => {
         doSetSelectedOnly(selectedOnly);
-        onShowSelectedOnlyChange === null || onShowSelectedOnlyChange === void 0 ? void 0 : onShowSelectedOnlyChange(selectedOnly);
+        onShowSelectedOnlyChange?.(selectedOnly);
     }, [onShowSelectedOnlyChange]);
     const { selectedMap } = useValuesMap({
         options,
@@ -66,9 +64,9 @@ function ValueSelector(props) {
         const label = !allowReorder ? preparedToLabel(option) : null;
         const reorderable = typeof allowReorder === 'function' ? allowReorder(option) : allowReorder;
         const renderNode = (props, dragHandleProps) => {
-            return (React.createElement(rebass_1.Flex, Object.assign({ className: `${baseClassName}__option`, alignItems: "center", mt: index ? 1 : 0, key: identifier !== null && identifier !== void 0 ? identifier : index, backgroundColor: 'primary', padding: 2, "data-index": index, "data-id": identifier, "data-name": "option" }, props),
+            return (React.createElement(rebass_1.Flex, { className: `${baseClassName}__option`, alignItems: "center", mt: index ? 1 : 0, key: identifier ?? index, backgroundColor: 'primary', padding: 2, "data-index": index, "data-id": identifier, "data-name": "option", ...props },
                 React.createElement(rebass_1.Flex, { flex: 1, flexDirection: "row", alignItems: "center" },
-                    reorderable ? (React.createElement(rebass_1.Box, Object.assign({ mr: 3 }, dragHandleProps),
+                    reorderable ? (React.createElement(rebass_1.Box, { mr: 3, ...dragHandleProps },
                         React.createElement(icons_1.Icon, { name: "drag", style: { cursor: 'grab' } }))) : null,
                     singleSelect ? (React.createElement(Radio_1.default, { checked: selectedMap.has(identifier), "data-name": identifier, onChange: (checked) => {
                             if (checked) {
@@ -90,37 +88,39 @@ function ValueSelector(props) {
                         }, checked: selectedMap.has(identifier) }, label)),
                     React.createElement(rebass_1.Text, { flex: 1, ml: 2 }, allowReorder ? preparedToLabel(option) : null))));
         };
-        return (React.createElement(react_beautiful_dnd_1.Draggable, { key: identifier, index: index, draggableId: `${identifier}`, isDragDisabled: !reorderable }, (draggableProvided) => {
-            return renderNode(Object.assign(Object.assign({ ref: draggableProvided.innerRef }, draggableProvided.draggableProps), { style: draggableProvided.draggableProps.style }), draggableProvided.dragHandleProps);
+        return (React.createElement(dnd_1.Draggable, { key: identifier, index: index, draggableId: `${identifier}`, isDragDisabled: !reorderable }, (draggableProvided) => {
+            return renderNode({
+                ref: draggableProvided.innerRef,
+                ...draggableProvided.draggableProps,
+                style: draggableProvided.draggableProps.style,
+            }, draggableProvided.dragHandleProps);
         }));
     };
-    const renderSelectionSection = () => {
-        const selectionBox = (React.createElement(rebass_1.Box, { fontSize: 2 }, !value.length ? (React.createElement(React.Fragment, null, noSelectionLabel !== null && noSelectionLabel !== void 0 ? noSelectionLabel : 'No selected options',
-            !singleSelect ? (React.createElement(SimpleButton_1.default, { px: 1, disabled: disabled, variant: "text", style: { textDecoration: 'underline', display: 'inline-block' }, onClick: () => {
-                    options.forEach((option) => {
-                        selectedMap.set(toIdentifier(option), option);
-                    });
-                    notifyChange();
-                } }, "Select all")) : null)) : (React.createElement(React.Fragment, null,
-            React.createElement(SimpleButton_1.default, { disabled: disabled, tabIndex: 0, px: 1, mr: 1, variant: "text", style: { textDecoration: 'underline', display: 'inline-block' }, onClick: () => {
-                    selectedMap.clear();
-                    notifyChange();
-                } }, clearSelectionLabel !== null && clearSelectionLabel !== void 0 ? clearSelectionLabel : 'Clear selection.'),
-            xSelectedLabel
-                ? xSelectedLabel(value.length)
-                : `Your selected ${value.length} ${value.length > 1 ? 'options' : 'option'}.`))));
-        return (React.createElement(rebass_1.Box, { className: `${baseClassName}__header`, mt: selectionBoxPosition === 'bottom' ? 3 : 0, mb: selectionBoxPosition === 'top' ? 3 : 0 },
-            selectionBox,
-            React.createElement(ValueOptionsTags, { options: options, value: value, selectedMap: selectedMap, toLabel: toLabel, toIdentifier: toIdentifier, onClearOption: notifyChange, readOnly: disabled })));
+    const showOnlySelectedCheckbox = (React.createElement(CheckBox_1.CheckBox, { disabled: !value.length, checked: selectedOnly, onChange: setSelectedOnly }, showSelectedOnlyLabel ?? 'Show Selected Only'));
+    const showSelectedOnlyPosition = props.showSelectedOnlyPosition ?? 'floating';
+    const selectionSectionProps = {
+        ...props,
+        onSelectAll: () => {
+            options.forEach((option) => {
+                selectedMap.set(toIdentifier(option), option);
+            });
+            notifyChange();
+        },
+        onClearOption: (id) => {
+            selectedMap.delete(id);
+            notifyChange();
+        },
+        onClear: () => {
+            selectedMap.clear();
+            notifyChange();
+        },
     };
-    const showOnlySelectedCheckbox = (React.createElement(CheckBox_1.CheckBox, { disabled: !value.length, checked: selectedOnly, onChange: setSelectedOnly }, showSelectedOnlyLabel !== null && showSelectedOnlyLabel !== void 0 ? showSelectedOnlyLabel : 'Show Selected Only'));
-    const showSelectedOnlyPosition = (_a = props.showSelectedOnlyPosition) !== null && _a !== void 0 ? _a : 'floating';
     return (React.createElement(rebass_1.Flex, { style: props.style, className: baseClassName, flexDirection: "column", flex: 1 },
         React.createElement(rebass_1.Flex, { mb: 1 },
             showFilterInput && filter ? (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", style: { flex: 1, border: 0, margin: 3 } })) : (React.createElement(rebass_1.Box, { flex: 1 })),
             showSelectedOnlyPosition === 'top' && React.createElement(rebass_1.Box, { ml: 20 }, showOnlySelectedCheckbox)),
-        selectionBoxPosition === 'top' && renderSelectionSection(),
-        React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: (result) => {
+        selectionBoxPosition === 'top' && (0, exports.renderSelectionSection)(selectionSectionProps),
+        React.createElement(dnd_1.DragDropContext, { onDragEnd: (result) => {
                 const { source, destination } = result;
                 const selection = [];
                 const extraKeys = [];
@@ -146,8 +146,8 @@ function ValueSelector(props) {
             React.createElement(rebass_1.Flex, { className: `${baseClassName}__body`, flexDirection: "column", flex: 1, style: { overflow: 'auto' } },
                 showSelectedOnlyPosition === 'floating' && (React.createElement(rebass_1.Box, { className: `${baseClassName}__show-selected-only-checkbox` },
                     React.createElement(rebass_1.Box, { className: `${baseClassName}__show-selected-only-checkbox__text`, "data-name": "show-selected-only", backgroundColor: "defaultbackground" }, showOnlySelectedCheckbox))),
-                React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, (droppableProvided) => {
-                    return (React.createElement("div", Object.assign({ ref: droppableProvided.innerRef }, droppableProvided.droppableProps),
+                React.createElement(dnd_1.Droppable, { droppableId: "droppable" }, (droppableProvided) => {
+                    return (React.createElement("div", { ref: droppableProvided.innerRef, ...droppableProvided.droppableProps },
                         options
                             .filter((option) => {
                             let result = true;
@@ -161,29 +161,43 @@ function ValueSelector(props) {
                             .map(renderOption),
                         droppableProvided.placeholder));
                 }))),
-        selectionBoxPosition === 'bottom' && renderSelectionSection()));
+        selectionBoxPosition === 'bottom' && (0, exports.renderSelectionSection)(selectionSectionProps)));
 }
 exports.ValueSelector = ValueSelector;
+const renderSelectionSection = (props) => {
+    const { noSelectionLabel, clearSelectionLabel, value, options, disabled, singleSelect, toLabel, toIdentifier, selectionBoxPosition = 'bottom', } = props;
+    const selectionBox = (React.createElement(rebass_1.Box, { fontSize: 2 }, !value.length ? (React.createElement(React.Fragment, null,
+        noSelectionLabel ?? 'No selected options',
+        !singleSelect ? (React.createElement(SimpleButton_1.default, { px: 1, disabled: disabled, variant: "text", style: { textDecoration: 'underline', display: 'inline-block' }, onClick: props.onSelectAll }, "Select all")) : null)) : (React.createElement(React.Fragment, null,
+        React.createElement(SimpleButton_1.default, { disabled: disabled, tabIndex: 0, px: 1, mr: 1, variant: "text", style: { textDecoration: 'underline', display: 'inline-block' }, onClick: props.onClear }, clearSelectionLabel ?? 'Clear selection.'),
+        props.xSelectedLabel
+            ? props.xSelectedLabel(value.length)
+            : `Your selected ${value.length} ${value.length > 1 ? 'options' : 'option'}.`))));
+    return (React.createElement(rebass_1.Box, { className: `${baseClassName}__header`, mt: selectionBoxPosition === 'bottom' ? 3 : 0, mb: selectionBoxPosition === 'top' ? 3 : 0 },
+        selectionBox,
+        React.createElement(ValueOptionsTags, { options: options, value: value, toLabel: toLabel, toIdentifier: toIdentifier, onClearOption: props.onClearOption, readOnly: disabled, isOptionDisabled: props.isOptionDisabled })));
+};
+exports.renderSelectionSection = renderSelectionSection;
 function ValueOptionsTags(props) {
-    const { allowWrap, value, toLabel, onChange, onClearOption, readOnly, renderLabel } = props;
+    const { allowWrap, value, toLabel, isOptionDisabled, onChange, onClearOption, readOnly: isReadOnly, renderLabel, } = props;
     const { selectedMap } = useValuesMap(props);
     const renderOptionTag = (index) => {
         const optionId = value[index];
         const clear = () => {
             selectedMap.delete(optionId);
-            onClearOption === null || onClearOption === void 0 ? void 0 : onClearOption(optionId);
+            onClearOption?.(optionId);
             if (onChange) {
                 onChange([...selectedMap.keys()], new Map(selectedMap));
             }
         };
         const option = selectedMap.get(optionId);
+        const readOnly = isReadOnly || (isOptionDisabled ? isOptionDisabled(option) : false);
         const label = option != null ? toLabel(option) : `${optionId}`;
         return (React.createElement(Tag_1.Tag, { flexDirection: "row", alignItems: "center", "data-name": "selected-option", "data-id": optionId, mt: allowWrap ? 1 : 0, mr: 1, className: "ab-ValueSelector__tag", onClick: (e) => {
-                var _a, _b, _c;
-                (_c = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.lastChild) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b);
+                e.target?.lastChild?.focus?.();
             }, style: { flex: 'none' } },
             renderLabel ? renderLabel(label) : label,
-            readOnly ? null : (React.createElement(SimpleButton_1.default, { icon: "close", ml: 2, iconSize: 14, variant: "text", style: { border: 'none' }, onClick: clear }))));
+            React.createElement(SimpleButton_1.default, { icon: "close", ml: 2, iconSize: 14, variant: "text", style: { border: 'none', visibility: readOnly ? 'hidden' : 'visible' }, onClick: clear })));
     };
     const renderEllipsis = (0, react_1.useCallback)(({ remaining }) => {
         return (React.createElement(rebass_1.Text, { fontSize: 2, style: { whiteSpace: 'nowrap' } },

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { KeyValuePair } from '../../Utilities/Interface/KeyValuePair';
 export interface WizardSummaryPageProps {
     KeyValuePairs: KeyValuePair[];
     header?: string;
 }
-export declare const WizardSummaryPage: (props: WizardSummaryPageProps) => JSX.Element;
+export declare const WizardSummaryPage: (props: WizardSummaryPageProps) => React.JSX.Element;

package/src/View/Components/WizardSummaryPage.js

@@ -5,10 +5,10 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const WizardPanel_1 = tslib_1.__importDefault(require("../../components/WizardPanel"));
 const InfiniteTable_1 = require("../../components/InfiniteTable");
-const columnsMap = new Map([
-    ['Key', { field: 'Key', header: 'Property', defaultFlex: 1 }],
-    ['Value', { field: 'Value', header: 'Value', defaultFlex: 3 }],
-]);
+const columnsMap = {
+    Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
+    Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
+};
 const tableDOMProps = {
     className: 'ab-WizardSummary__list',
     style: {

package/src/View/CustomSort/CustomSortSummary.d.ts

@@ -18,4 +18,6 @@ export declare class CustomSortSummaryComponent extends React.Component<CustomSo
     canFinishWizard(): boolean;
     private getCustomSortedValues;
 }
-export declare let CustomSortSummary: import("react-redux").ConnectedComponent<typeof CustomSortSummaryComponent, any>;
+export declare let CustomSortSummary: import("react-redux").ConnectedComponent<typeof CustomSortSummaryComponent, {
+    [x: string]: any;
+}>;

package/src/View/CustomSort/Wizard/CustomSortColumnWizardSection.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { CustomSort } from '../../../PredefinedConfig/CustomSortState';
 export type CustomSortColumnWizardSectionProps = {
     onChange: (data: CustomSort) => void;
     isNew: boolean;
 };
-export declare const renderCustomSortColumn: (data: CustomSort) => JSX.Element;
+export declare const renderCustomSortColumn: (data: CustomSort) => React.JSX.Element;
 export declare const isValidCustomSortColumn: (data: CustomSort) => true | string;
-export declare const CustomSortColumnWizardSection: (props: CustomSortColumnWizardSectionProps) => JSX.Element;
+export declare const CustomSortColumnWizardSection: (props: CustomSortColumnWizardSectionProps) => React.JSX.Element;

package/src/View/CustomSort/Wizard/CustomSortColumnWizardSection.js

@@ -40,7 +40,7 @@ const CustomSortColumnWizardSection = (props) => {
             if (api.customSortApi.internalApi.columnHasCustomSortComparer(column.columnId)) {
                 return false;
             }
-            if (!props.isNew && column.columnId === (data === null || data === void 0 ? void 0 : data.ColumnId)) {
+            if (!props.isNew && column.columnId === data?.ColumnId) {
                 return true;
             }
             return usedColumnIds.every((usedColumnId) => {
@@ -52,7 +52,11 @@ const CustomSortColumnWizardSection = (props) => {
         React.createElement(Tabs_1.Tabs.Tab, null, "Column"),
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(ColumnSelector_1.NewColumnSelector, { availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
-                    props.onChange(Object.assign(Object.assign({}, data), { SortedValues: [], ColumnId: ids[0] }));
+                    props.onChange({
+                        ...data,
+                        SortedValues: [],
+                        ColumnId: ids[0],
+                    });
                 }, allowReorder: false }))));
 };
 exports.CustomSortColumnWizardSection = CustomSortColumnWizardSection;

package/src/View/CustomSort/Wizard/CustomSortSummaryWizard.js

@@ -14,7 +14,7 @@ class CustomSortSummaryWizard extends React.Component {
                 Key: 'Column',
                 Value: this.props.api.columnApi.getFriendlyNameForColumnId(this.props.data.ColumnId),
             },
-            { Key: 'Values', Value: this.props.data.SortedValues.join(', ') },
+            { Key: 'In', Value: this.props.data.SortedValues.join(', ') },
         ];
         return (React.createElement(WizardSummaryPage_1.WizardSummaryPage, { KeyValuePairs: keyValuePairs, header: this.props.moduleInfo.FriendlyName }));
     }

package/src/View/CustomSort/Wizard/CustomSortValuesWizardSection.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { CustomSort } from '../../../PredefinedConfig/CustomSortState';
 export type CustomSortValuesWizardSectionProps = {
     onChange: (data: CustomSort) => void;
 };
 export declare const isValidCustomSortOrder: (data: CustomSort) => true | string;
-export declare const renderCustomSortValuesSummary: (data: CustomSort) => JSX.Element;
-export declare const CustomSortValuesWizardSection: (props: CustomSortValuesWizardSectionProps) => JSX.Element;
+export declare const renderCustomSortValuesSummary: (data: CustomSort) => React.JSX.Element;
+export declare const CustomSortValuesWizardSection: (props: CustomSortValuesWizardSectionProps) => React.JSX.Element;

package/src/View/CustomSort/Wizard/CustomSortValuesWizardSection.js

@@ -12,6 +12,7 @@ const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
 const ValueSelector_1 = require("../../Components/ValueSelector");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../.././Utilities/Extensions/ArrayExtensions"));
+const DateHelper_1 = require("../../../Utilities/Helpers/DateHelper");
 const isValidCustomSortOrder = (data) => {
     if (!data.SortedValues || !data.SortedValues.length) {
         return 'You have to specify at least one value for Custom Sort order';
@@ -28,12 +29,13 @@ const CustomSortValuesWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const [distinctValues, setDistinctValues] = (0, react_1.useState)([]);
     const [isDistinctValuesLoading, setIsDistinctValuesLoading] = (0, react_1.useState)(false);
+    const columnDataType = api.columnApi.getColumnDataTypeForColumnId(data.ColumnId);
     (0, react_1.useEffect)(() => {
         let isMounted = true;
         (async () => {
             // for sync and very fast resolving promises does not make sense to show a loader
             setDistinctValues([]);
-            const newValues = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(api.gridApi.internalApi.getDistinctCustomSortDisplayValuesForColumn(data.ColumnId), () => isMounted && setIsDistinctValuesLoading(true));
+            const newValues = (await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(api.gridApi.internalApi.getDistinctValuesForColumn(data.ColumnId), () => isMounted && setIsDistinctValuesLoading(true))) ?? [];
             if (!isMounted) {
                 return;
             }
@@ -44,6 +46,12 @@ const CustomSortValuesWizardSection = (props) => {
             isMounted = false;
         };
     }, [data.ColumnId]);
+    const toIdentifier = (optionItem) => {
+        return api.customSortApi.internalApi.getCustomSortValue(optionItem, columnDataType);
+    };
+    const toLabel = (optionItem) => {
+        return `${optionItem}`;
+    };
     const sortedValuesMap = (0, react_1.useMemo)(() => {
         if (!data.SortedValues || !data.SortedValues.length) {
             return new Map();
@@ -54,10 +62,15 @@ const CustomSortValuesWizardSection = (props) => {
         }, new Map());
     }, [data.SortedValues]);
     const allowReorder = React.useCallback((option) => {
-        return sortedValuesMap.has(option);
+        return sortedValuesMap.has(toIdentifier(option));
     }, [sortedValuesMap]);
+    const getOptionValues = (gridCells) => {
+        return gridCells.map((gridCell) => {
+            return columnDataType === 'date' ? (0, DateHelper_1.parseToISO)(gridCell.rawValue) : gridCell.normalisedValue;
+        });
+    };
     const options = (0, react_1.useMemo)(() => {
-        return ArrayExtensions_1.default.sortArrayWithOrder(distinctValues, data.SortedValues, {
+        return ArrayExtensions_1.default.sortArrayWithOrder(getOptionValues(distinctValues), data.SortedValues, {
             sortUnorderedItems: false,
         });
     }, [allowReorder, distinctValues, data.SortedValues]);
@@ -67,10 +80,13 @@ const CustomSortValuesWizardSection = (props) => {
         React.createElement(Tabs_1.Tabs.Tab, null, "Sort Order"),
         React.createElement(Tabs_1.Tabs.Content, null,
             isDistinctValuesLoading && React.createElement(Loader_1.Loader, null, "Loading"),
-            React.createElement(ValueSelector_1.ValueSelector, { toIdentifier: (x) => `${x}`, toLabel: (x) => `${x}`, options: options, value: data.SortedValues, allowReorder: allowReorder, xSelectedLabel: () => {
+            React.createElement(ValueSelector_1.ValueSelector, { toIdentifier: toIdentifier, toLabel: toLabel, options: options, value: data.SortedValues, allowReorder: allowReorder, xSelectedLabel: () => {
                     return `Your Sort Order:`;
                 }, onChange: (SortedValues) => {
-                    props.onChange(Object.assign(Object.assign({}, data), { SortedValues }));
+                    props.onChange({
+                        ...data,
+                        SortedValues,
+                    });
                 } }))));
 };
 exports.CustomSortValuesWizardSection = CustomSortValuesWizardSection;

package/src/View/CustomSort/Wizard/CustomSortWizard.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { AdaptableOnePageWizardProps } from '../../Wizard/Interface/IAdaptableWizard';
 import { CustomSort } from '../../../PredefinedConfig/CustomSortState';
 export interface CustomSortWizardProps extends AdaptableOnePageWizardProps<CustomSort> {
     isNew: boolean;
 }
-export declare const CustomSortWizard: (props: CustomSortWizardProps) => JSX.Element;
+export declare const CustomSortWizard: (props: CustomSortWizardProps) => React.JSX.Element;

package/src/View/CustomSort/Wizard/CustomSortWizard.js

@@ -14,20 +14,18 @@ const react_redux_1 = require("react-redux");
 const CustomSortRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/CustomSortRedux"));
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
 const CustomSortWizard = (props) => {
-    var _a, _b;
     let data = props.data;
-    const allCustomSorts = (0, react_redux_1.useSelector)((state) => { var _a; return (_a = state.CustomSort) === null || _a === void 0 ? void 0 : _a.CustomSorts; });
-    if (((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Edit' && ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.column)) {
-        data = allCustomSorts.find((x) => { var _a; return x.ColumnId == ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.column.columnId); });
+    const allCustomSorts = (0, react_redux_1.useSelector)((state) => state.CustomSort?.CustomSorts);
+    if (props.popupParams?.action === 'Edit' && props.popupParams?.column) {
+        data = allCustomSorts.find((x) => x.ColumnId == props.popupParams?.column.columnId);
     }
     const [customSort, setCustomSort] = (0, react_1.useState)(() => {
-        var _a, _b;
         if (data) {
             return (0, Helper_1.cloneObject)(data);
         }
         const newData = ObjectFactory_1.default.CreateEmptyCustomSort();
-        if ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.column) {
-            newData.ColumnId = (_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.column.columnId;
+        if (props.popupParams?.column) {
+            newData.ColumnId = props.popupParams?.column.columnId;
         }
         return newData;
     });

package/src/View/Dashboard/CustomDashboardButton.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { AdaptableButton } from '../../PredefinedConfig/Common/AdaptableButton';
 import { DashboardButtonContext } from '../../AdaptableOptions/DashboardOptions';
 import { AdaptableApi } from '../../Api/AdaptableApi';
@@ -8,4 +8,4 @@ export interface CustomDashboardButtonProps {
     api: AdaptableApi;
     accessLevel: AccessLevel;
 }
-export declare const CustomDashboardButton: (props: CustomDashboardButtonProps) => JSX.Element;
+export declare const CustomDashboardButton: (props: CustomDashboardButtonProps) => React.JSX.Element;

package/src/View/Dashboard/CustomDashboardButton.js

@@ -11,7 +11,10 @@ const CustomDashboardButton = (props) => {
     const [componentRevision, setComponentRevision] = (0, react_1.useState)(1);
     // 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 dashboardContext = Object.assign(Object.assign({}, props.api.internalApi.buildBaseContext()), { dashboardState: props.api.dashboardApi.getDashboardState() });
+    const dashboardContext = {
+        ...props.api.internalApi.buildBaseContext(),
+        dashboardState: props.api.dashboardApi.getDashboardState(),
+    };
     const buttonIcon = props.api.internalApi.getIconForButton(button, dashboardContext);
     let buttonStyle = props.api.internalApi.getStyleForButton(button, dashboardContext);
     let buttonLabel = props.api.internalApi.getLabelForButton(button, dashboardContext);
@@ -20,9 +23,8 @@ const CustomDashboardButton = (props) => {
         return null;
     }
     const disabled = button.disabled && button.disabled(button, dashboardContext);
-    return (React.createElement(SimpleButton_1.default, { key: buttonLabel, variant: buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text', tone: buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none', className: `ab-DashboardToolbar__Home__${(0, kebabCase_1.default)(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled || props.accessLevel == 'ReadOnly', onClick: () => {
-            var _a;
-            (_a = button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, button, dashboardContext);
+    return (React.createElement(SimpleButton_1.default, { key: buttonLabel, variant: buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text', tone: buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none', className: `ab-DashboardToolbar__Home__${(0, kebabCase_1.default)(buttonLabel)} ${buttonStyle?.className || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled || props.accessLevel == 'ReadOnly', onClick: () => {
+            button.onClick?.(button, dashboardContext);
             setTimeout(() => {
                 // mutate state to force a re-rendering
                 setComponentRevision(componentRevision + 1);

package/src/View/Dashboard/CustomToolbar.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { CustomToolbar } from '../../AdaptableOptions/DashboardOptions';
 interface CustomToolbarWrapperProps {
     customToolbar: CustomToolbar;
     dashboardRevision: number;
 }
-export declare const CustomToolbarCmp: (props: CustomToolbarWrapperProps) => JSX.Element;
-export declare const CustomToolbarWrapper: (props: CustomToolbarWrapperProps) => JSX.Element;
+export declare const CustomToolbarCmp: (props: CustomToolbarWrapperProps) => React.JSX.Element;
+export declare const CustomToolbarWrapper: (props: CustomToolbarWrapperProps) => React.JSX.Element;
 export {};

package/src/View/Dashboard/CustomToolbar.js

@@ -22,12 +22,9 @@ const CustomToolbarCmp = (props) => {
         const adaptableApi = api;
         if (props.customToolbar.render) {
             const html = props.customToolbar.render({
-                visible: true,
                 phase: 'onMount',
                 element,
-                adaptableApi,
-                userName: adaptableApi.optionsApi.getUserName(),
-                adaptableId: adaptableApi.optionsApi.getAdaptableId(),
+                ...adaptableApi.internalApi.buildBaseContext(),
             });
             setRenderedContentHTML(html);
         }
@@ -39,12 +36,9 @@ const CustomToolbarCmp = (props) => {
         return () => {
             if (props.customToolbar.render) {
                 props.customToolbar.render({
-                    visible: false,
                     phase: 'onDestroy',
                     element,
-                    adaptableApi,
-                    userName: adaptableApi.optionsApi.getUserName(),
-                    adaptableId: adaptableApi.optionsApi.getAdaptableId(),
+                    ...adaptableApi.internalApi.buildBaseContext(),
                 });
             }
         };
@@ -56,14 +50,12 @@ const CustomToolbarCmp = (props) => {
             adaptableApi.internalApi.createFrameworkComponent(containerElement, props.customToolbar.frameworkComponent, 'toolbar');
         }
         const destroyUnsubscribe = adaptableApi.eventApi.on('AdaptableDestroy', () => {
-            var _a;
-            (_a = adaptableApi === null || adaptableApi === void 0 ? void 0 : adaptableApi.internalApi) === null || _a === void 0 ? void 0 : _a.destroyFrameworkComponent(containerElement, props.customToolbar.frameworkComponent, 'toolbar');
+            adaptableApi?.internalApi?.destroyFrameworkComponent(containerElement, props.customToolbar.frameworkComponent, 'toolbar');
         });
         return () => {
-            var _a;
             destroyUnsubscribe();
             if (props.customToolbar.frameworkComponent) {
-                (_a = adaptableApi === null || adaptableApi === void 0 ? void 0 : adaptableApi.internalApi) === null || _a === void 0 ? void 0 : _a.destroyFrameworkComponent(containerElement, props.customToolbar.frameworkComponent, 'toolbar');
+                adaptableApi?.internalApi?.destroyFrameworkComponent(containerElement, props.customToolbar.frameworkComponent, 'toolbar');
             }
         };
     }, []);
@@ -74,10 +66,8 @@ const CustomToolbarCmp = (props) => {
         props.customToolbar.toolbarButtons && (React.createElement("div", { id: buttonsContainerId, className: `ab-CustomToolbar__buttons ab-CustomToolbar--${props.customToolbar.name}`, style: { minHeight: 22 } }, props.customToolbar.toolbarButtons.map((button, index) => {
             const dashboardContext = {
                 customToolbar: props.customToolbar,
-                adaptableApi: api,
-                userName: api.optionsApi.getUserName(),
-                adaptableId: api.optionsApi.getAdaptableId(),
                 dashboardState: api.dashboardApi.getDashboardState(),
+                ...api.internalApi.buildBaseContext(),
             };
             const buttonIcon = api.internalApi.getIconForButton(button, dashboardContext);
             let buttonStyle = api.internalApi.getStyleForButton(button, dashboardContext);
@@ -89,7 +79,7 @@ const CustomToolbarCmp = (props) => {
             const disabled = button.disabled && button.disabled(button, dashboardContext);
             let buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'outlined';
             let buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'neutral';
-            return (React.createElement(AdaptableButton_1.AdaptableButtonComponent, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, variant: buttonVariant, tone: buttonTone, className: (buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || '', onClick: () => {
+            return (React.createElement(AdaptableButton_1.AdaptableButtonComponent, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, variant: buttonVariant, tone: buttonTone, className: buttonStyle?.className || '', onClick: () => {
                     button.onClick ? button.onClick(button, dashboardContext) : null;
                     setTimeout(() => {
                         // mutate state to force a re-rendering
@@ -102,11 +92,14 @@ const CustomToolbarCmp = (props) => {
 exports.CustomToolbarCmp = CustomToolbarCmp;
 const CustomToolbarWrapper = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
-    return (React.createElement(PanelDashboard_1.PanelDashboard, { headerText: props.customToolbar.title ? props.customToolbar.title : '', showConfigureButton: props.customToolbar.showConfigureButton != null &&
-            props.customToolbar.showConfigureButton == true, showCloseButton: props.customToolbar.showCloseButton != null && props.customToolbar.showCloseButton == true, onConfigure: () => {
-            const customToolbarConfiguredInfo = Object.assign(Object.assign({}, api.internalApi.buildBaseContext()), { customToolbar: props.customToolbar });
+    return (React.createElement(PanelDashboard_1.PanelDashboard, { headerText: props.customToolbar.title ? props.customToolbar.title : '', showConfigureActionButton: props.customToolbar.toolbarActions?.find((b) => b == 'Configure') !=
+            undefined, showCloseActionButton: props.customToolbar.toolbarActions?.find((b) => b == 'Close') != undefined, onConfigure: () => {
+            const customToolbarConfiguredInfo = {
+                ...api.internalApi.buildBaseContext(),
+                customToolbar: props.customToolbar,
+            };
             api.eventApi.emit('CustomToolbarConfigured', customToolbarConfiguredInfo);
         }, accessLevel: api.entitlementApi.getEntitlementAccessLevelForModule('Dashboard') },
-        React.createElement(exports.CustomToolbarCmp, Object.assign({}, props))));
+        React.createElement(exports.CustomToolbarCmp, { ...props })));
 };
 exports.CustomToolbarWrapper = CustomToolbarWrapper;

package/src/View/Dashboard/Dashboard.d.ts

@@ -1,19 +1,19 @@
-/// <reference types="react" />
-import * as Redux from 'redux';
+import * as React from 'react';
 import { SystemStatusMessageInfo } from '../../PredefinedConfig/Common/SystemStatusMessageInfo';
 import { AdaptableCoordinate, DashboardState } from '../../PredefinedConfig/DashboardState';
-import { GridState } from '../../PredefinedConfig/GridState';
+import { InternalState } from '../../PredefinedConfig/InternalState';
 import * as DashboardRedux from '../../Redux/ActionsReducers/DashboardRedux';
 import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
 import * as QuickSearchRedux from '../../Redux/ActionsReducers/QuickSearchRedux';
 import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
+import type { Action } from 'redux';
 interface DashboardComponentProps extends ModuleViewPopupProps<any> {
     DashboardRevision: number;
     DashboardState: DashboardState;
-    GridState: GridState;
+    InternalState: InternalState;
     SystemStatusMessageInfos: SystemStatusMessageInfo[];
     QuickSearchText: string;
-    dispatch: (action: Redux.Action) => Redux.Action;
+    dispatch: (action: Action) => Action;
     onSetActiveTabIndex: (ActiveTabIndex: number | null) => DashboardRedux.DashboardSetActiveTabIndexAction;
     onSetIsCollapsed: (IsCollapsed: boolean) => DashboardRedux.DashboardSetIsCollapsedAction;
     onSetIsFloating: (IsFloating: boolean) => DashboardRedux.DashboardSetIsFloatingAction;
@@ -23,5 +23,7 @@ interface DashboardComponentProps extends ModuleViewPopupProps<any> {
     onShowQuickSearchPopup: () => PopupRedux.PopupShowScreenAction;
     onShowDashboardPopup: () => PopupRedux.PopupShowScreenAction;
 }
-export declare let Dashboard: import("react-redux").ConnectedComponent<(props: DashboardComponentProps) => JSX.Element, any>;
+export declare let Dashboard: import("react-redux").ConnectedComponent<(props: DashboardComponentProps) => React.JSX.Element, {
+    [x: string]: any;
+}>;
 export {};

package/src/View/Dashboard/Dashboard.js

@@ -61,18 +61,21 @@ const DashboardComponent = (props) => {
         let shortcutsArray = props.DashboardState.ModuleButtons;
         let shortcuts = null;
         const alwaysShowInDashboard = props.api.optionsApi.getSettingsPanelOptions().alwaysShowInDashboard;
-        const shouldAddSettingsPanel = alwaysShowInDashboard &&
-            !props.api.entitlementApi.isModuleHiddenEntitlement('SettingsPanel');
+        const shouldAddSettingsPanel = alwaysShowInDashboard && !props.api.entitlementApi.isModuleHiddenEntitlement('SettingsPanel');
         if (shouldAddSettingsPanel && !shortcutsArray.includes('SettingsPanel')) {
             shortcutsArray.push('SettingsPanel');
         }
         if (shortcutsArray) {
             shortcuts = shortcutsArray.map((x, index) => {
-                var _a, _b, _c;
-                let menuItem = props.GridState.ModuleButtonMenuItems.find((y) => y.isVisible && y.module == x);
+                let menuItem = props.InternalState.Dashboard.DashboardModuleButtons.find((y) => y.isVisible && y.category == x);
                 if (menuItem) {
-                    return (React.createElement(AdaptableButton_1.AdaptableButtonComponent, { "data-name": `dashboard-module-button-${(_a = menuItem.module) !== null && _a !== void 0 ? _a : 'custom-' + index}`, key: menuItem.label, variant: menuItem.module === 'SystemStatus' ? 'outlined' : 'text', tone: menuItem.module === 'SystemStatus' ? 'neutral' : 'none', className: `ab-DashboardToolbar__Home__${(0, kebabCase_1.default)(menuItem.label)}`, icon: menuItem.icon, tooltip: menuItem.label, disabled: props.accessLevel == 'ReadOnly', onClick: () => props.dispatch(menuItem.reduxAction), accessLevel: 'Full', style: menuItem.module === 'SystemStatus'
-                            ? Object.assign(Object.assign({}, UIHelper_1.default.getStyleForMessageType((_c = (_b = props.api.systemStatusApi.getCurrentSystemStatusMessageInfo()) === null || _b === void 0 ? void 0 : _b.statusType) !== null && _c !== void 0 ? _c : 'Success')), { border: 0 }) : {} }));
+                    return (React.createElement(AdaptableButton_1.AdaptableButtonComponent, { "data-name": `dashboard-module-button-${menuItem.category ?? 'custom-' + index}`, key: menuItem.label, variant: menuItem.category === 'SystemStatus' ? 'outlined' : 'text', tone: menuItem.category === 'SystemStatus' ? 'neutral' : 'none', className: `ab-DashboardToolbar__Home__${(0, kebabCase_1.default)(menuItem.label)}`, icon: menuItem.icon, tooltip: menuItem.label, disabled: props.accessLevel == 'ReadOnly', onClick: () => props.dispatch(menuItem.reduxAction), accessLevel: 'Full', style: menuItem.category === 'SystemStatus'
+                            ? {
+                                ...UIHelper_1.default.getStyleForMessageType(props.api.systemStatusApi.getCurrentSystemStatusMessageInfo()?.statusType ??
+                                    'Success'),
+                                border: 0,
+                            }
+                            : {} }));
                 }
             });
         }
@@ -83,7 +86,7 @@ const DashboardComponent = (props) => {
             .getCustomDashboardButtons()
             .filter(Boolean);
         let customDashboardButtons = null;
-        if (dashboardButtonsArray === null || dashboardButtonsArray === void 0 ? void 0 : dashboardButtonsArray.length) {
+        if (dashboardButtonsArray?.length) {
             customDashboardButtons = dashboardButtonsArray.map((button, index) => (React.createElement(CustomDashboardButton_1.CustomDashboardButton, { key: `${button.label}-${index}`, button: button, api: props.api, accessLevel: props.accessLevel })));
         }
         return customDashboardButtons;
@@ -127,10 +130,10 @@ const DashboardComponent = (props) => {
 };
 function mapStateToProps(state, ownProps) {
     return {
-        DashboardRevision: state.System.DashboardRevision,
+        DashboardRevision: state.Internal.Dashboard.DashboardRevision,
         DashboardState: state.Dashboard,
-        GridState: state.Grid,
-        SystemStatusMessageInfos: state.System.SystemStatusMessages,
+        InternalState: state.Internal,
+        SystemStatusMessageInfos: state.Internal.SystemStatusMessages,
         QuickSearchText: state.QuickSearch.QuickSearchText,
     };
 }