@adaptabletools/adaptable-cjs 17.0.0-canary.1

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ModuleSummaryProps } from '../Components/SharedProps/ModuleSummaryProps';
+import { EditableConfigEntityState } from '../Components/SharedProps/EditableConfigEntityState';
+import * as CustomSortRedux from '../../Redux/ActionsReducers/CustomSortRedux';
+import { CustomSort } from '../../PredefinedConfig/CustomSortState';
+export interface CustomSortSummaryProps extends ModuleSummaryProps<CustomSortSummaryComponent> {
+    CustomSorts: CustomSort[];
+    onAddCustomSort: (customSort: CustomSort) => CustomSortRedux.CustomSortAddAction;
+    onEditCustomSort: (customSort: CustomSort) => CustomSortRedux.CustomSortEditAction;
+}
+export declare class CustomSortSummaryComponent extends React.Component<CustomSortSummaryProps, EditableConfigEntityState> {
+    constructor(props: CustomSortSummaryProps);
+    render(): any;
+    onNew(): void;
+    onEdit(customSort: CustomSort): void;
+    onCloseWizard(): void;
+    onFinishWizard: (customSort: CustomSort) => void;
+    canFinishWizard(): boolean;
+    private getCustomSortedValues;
+}
+export declare let CustomSortSummary: import("react-redux").ConnectedComponent<typeof CustomSortSummaryComponent, any>;

package/src/View/CustomSort/CustomSortSummary.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomSortSummary = exports.CustomSortSummaryComponent = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const EditableConfigEntityState_1 = require("../Components/SharedProps/EditableConfigEntityState");
+const react_redux_1 = require("react-redux");
+const Helper_1 = require("../../Utilities/Helpers/Helper");
+const CustomSortRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/CustomSortRedux"));
+const ObjectFactory_1 = require("../../Utilities/ObjectFactory");
+const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
+const ModuleHeader_1 = require("../Components/ModuleSummary/ModuleHeader");
+const ModuleDetail_1 = require("../Components/ModuleSummary/ModuleDetail");
+const ModuleProfile_1 = require("../Components/ModuleProfile");
+const TeamSharingRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/TeamSharingRedux"));
+const UIHelper_1 = require("../UIHelper");
+const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
+const ArrayExtensions_1 = require("../../Utilities/Extensions/ArrayExtensions");
+const CustomSortWizard_1 = require("./Wizard/CustomSortWizard");
+class CustomSortSummaryComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.onFinishWizard = (customSort) => {
+            if (this.props.CustomSorts.find((x) => x.ColumnId == customSort.ColumnId)) {
+                this.props.onEditCustomSort(customSort);
+            }
+            else {
+                this.props.onAddCustomSort(customSort);
+            }
+            this.setState({
+                editedAdaptableObject: null,
+                wizardStartIndex: 0,
+                wizardStatus: EditableConfigEntityState_1.WizardStatus.None,
+            });
+        };
+        this.state = UIHelper_1.UIHelper.getEmptyConfigState();
+    }
+    render() {
+        const customSort = this.props.CustomSorts.find((c) => c.ColumnId == this.props.summarisedColumn.columnId);
+        const columnSortComparer = this.props.api.customSortApi.internalApi.getCustomSortComparer(this.props.summarisedColumn);
+        let noCustomSort = customSort == null && columnSortComparer == null;
+        let customSortRow;
+        if (!this.props.summarisedColumn.sortable) {
+            customSortRow = (React.createElement(ModuleHeader_1.ModuleHeader, { key: this.props.moduleInfo.FriendlyName, moduleInfo: this.props.moduleInfo, moduleSummary: 'Column is not sortable', newButtonDisabled: true, onNew: () => this.onNew(), newButtonTooltip: this.props.moduleInfo.FriendlyName, accessLevel: this.props.accessLevel }));
+        }
+        else if (noCustomSort) {
+            // title row
+            customSortRow = (React.createElement(ModuleHeader_1.ModuleHeader, { key: this.props.moduleInfo.FriendlyName, moduleInfo: this.props.moduleInfo, moduleSummary: 'No Custom Sort Set', onNew: () => this.onNew(), accessLevel: this.props.accessLevel, newButtonTooltip: this.props.moduleInfo.FriendlyName }));
+        }
+        else if (columnSortComparer != null) {
+            customSortRow = (React.createElement(ModuleHeader_1.ModuleHeader, { key: this.props.moduleInfo.FriendlyName, moduleInfo: this.props.moduleInfo, moduleSummary: 'Using a Custom Sort Comparer Function', onNew: () => this.onNew(), accessLevel: this.props.accessLevel, newButtonTooltip: this.props.moduleInfo.FriendlyName }));
+        }
+        else {
+            customSortRow = (React.createElement(ModuleDetail_1.ModuleDetail, { key: this.props.moduleInfo.FriendlyName, item1: React.createElement(ModuleProfile_1.ModuleProfile, { moduleInfo: this.props.moduleInfo }), item2: this.getCustomSortedValues(customSort), configEnity: customSort, moduleInfo: this.props.moduleInfo, onEdit: () => this.onEdit(customSort), showEdit: customSort != undefined, onShare: (config) => this.props.onShare(customSort, config), showShare: this.props.teamSharingActivated, onDelete: CustomSortRedux.CustomSortDelete(customSort), showBold: true, accessLevel: this.props.accessLevel }));
+        }
+        return (React.createElement(React.Fragment, null,
+            customSortRow,
+            this.state.editedAdaptableObject && (React.createElement(CustomSortWizard_1.CustomSortWizard, { isNew: this.state.wizardStatus === EditableConfigEntityState_1.WizardStatus.New, moduleInfo: this.props.moduleInfo, data: this.state.editedAdaptableObject, configEntities: this.props.CustomSorts, onCloseWizard: () => this.onCloseWizard(), onFinishWizard: this.onFinishWizard }))));
+    }
+    onNew() {
+        let configEntity = ObjectFactory_1.ObjectFactory.CreateEmptyCustomSort();
+        configEntity.ColumnId = this.props.summarisedColumn.columnId;
+        this.setState({
+            editedAdaptableObject: configEntity,
+            wizardStartIndex: 1,
+            wizardStatus: EditableConfigEntityState_1.WizardStatus.New,
+        });
+    }
+    onEdit(customSort) {
+        this.setState({
+            editedAdaptableObject: Helper_1.Helper.cloneObject(customSort),
+            wizardStartIndex: 1,
+            wizardStatus: EditableConfigEntityState_1.WizardStatus.Edit,
+        });
+    }
+    onCloseWizard() {
+        this.setState({
+            editedAdaptableObject: null,
+            wizardStartIndex: 0,
+            wizardStatus: EditableConfigEntityState_1.WizardStatus.None,
+        });
+    }
+    canFinishWizard() {
+        let customSort = this.state.editedAdaptableObject;
+        return (StringExtensions_1.StringExtensions.IsNotNullOrEmpty(customSort.ColumnId) &&
+            ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(customSort.SortedValues));
+    }
+    getCustomSortedValues(customSort) {
+        if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(customSort.SortedValues)) {
+            return customSort.SortedValues.join(', ');
+        }
+        else {
+            return '[Has bespoke Custom Sort implementing using bespoke function]';
+        }
+    }
+}
+exports.CustomSortSummaryComponent = CustomSortSummaryComponent;
+function mapStateToProps(state, ownProps) {
+    return {
+        CustomSorts: state.CustomSort.CustomSorts,
+    };
+}
+function mapDispatchToProps(dispatch) {
+    return {
+        onAddCustomSort: (customSort) => dispatch(CustomSortRedux.CustomSortAdd(customSort)),
+        onEditCustomSort: (customSort) => dispatch(CustomSortRedux.CustomSortEdit(customSort)),
+        onShare: (entity, config) => dispatch(TeamSharingRedux.TeamSharingShare(entity, ModuleConstants.CustomSortModuleId, config)),
+    };
+}
+exports.CustomSortSummary = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(CustomSortSummaryComponent);

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

@@ -0,0 +1,9 @@
+/// <reference types="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 isValidCustomSortColumn: (data: CustomSort) => true | string;
+export declare const CustomSortColumnWizardSection: (props: CustomSortColumnWizardSectionProps) => JSX.Element;

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

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomSortColumnWizardSection = exports.isValidCustomSortColumn = exports.renderCustomSortColumn = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const Tabs_1 = require("../../../components/Tabs");
+const Tag_1 = require("../../../components/Tag");
+const ColumnSelector_1 = require("../../Components/ColumnSelector");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const renderCustomSortColumn = (data) => {
+    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    return (React.createElement(rebass_1.Text, { pr: 2, py: 2, fontSize: 2 },
+        "Custom sort column: ",
+        React.createElement(Tag_1.Tag, null, api.columnApi.getFriendlyNameForColumnId(data.ColumnId))));
+};
+exports.renderCustomSortColumn = renderCustomSortColumn;
+const isValidCustomSortColumn = (data) => {
+    if (!data.ColumnId) {
+        return 'You have to select a Column for Custom Sort';
+    }
+    return true;
+};
+exports.isValidCustomSortColumn = isValidCustomSortColumn;
+const CustomSortColumnWizardSection = (props) => {
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const sortableCols = React.useMemo(() => {
+        const sortableColumns = api.columnApi.getSortableColumns();
+        const customSorts = api.customSortApi.getCustomSorts();
+        const columnSortComparers = api.optionsApi.getCustomSortOptions().customSortComparers || [];
+        const usedColumnIds = [
+            ...customSorts.map((customSort) => customSort.ColumnId),
+            ...columnSortComparers.map((comparer) => api.scopeApi.getColumnIdsInScope(comparer.scope)),
+        ];
+        // filter out used colum ids, but include the current one
+        return sortableColumns.filter((column) => {
+            if (!props.isNew && column.columnId === (data === null || data === void 0 ? void 0 : data.ColumnId)) {
+                return true;
+            }
+            return usedColumnIds.every((usedColumnId) => {
+                return column.columnId !== usedColumnId;
+            });
+        });
+    }, []);
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+        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] }));
+                }, allowReorder: false }))));
+};
+exports.CustomSortColumnWizardSection = CustomSortColumnWizardSection;

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { AdaptableWizardStep, AdaptableWizardStepProps } from '../../Wizard/Interface/IAdaptableWizard';
+import { CustomSort } from '../../../PredefinedConfig/CustomSortState';
+export interface CustomSortSummaryWizardProps extends AdaptableWizardStepProps<CustomSort> {
+}
+export declare class CustomSortSummaryWizard extends React.Component<CustomSortSummaryWizardProps, {}> implements AdaptableWizardStep {
+    constructor(props: CustomSortSummaryWizardProps);
+    render(): any;
+    canNext(): boolean;
+    canBack(): boolean;
+    next(): void;
+    back(): void;
+    getIndexStepIncrement(): number;
+    getIndexStepDecrement(): number;
+}

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomSortSummaryWizard = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const WizardSummaryPage_1 = require("../../Components/WizardSummaryPage");
+class CustomSortSummaryWizard extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        let keyValuePairs = [
+            {
+                Key: 'Column',
+                Value: this.props.api.columnApi.getFriendlyNameForColumnId(this.props.data.ColumnId),
+            },
+            { Key: 'Values', Value: this.props.data.SortedValues.join(', ') },
+        ];
+        return (React.createElement(WizardSummaryPage_1.WizardSummaryPage, { KeyValuePairs: keyValuePairs, header: this.props.moduleInfo.FriendlyName }));
+    }
+    canNext() {
+        return true;
+    }
+    canBack() {
+        return true;
+    }
+    next() { }
+    back() { }
+    getIndexStepIncrement() {
+        return 1;
+    }
+    getIndexStepDecrement() {
+        return 1;
+    }
+}
+exports.CustomSortSummaryWizard = CustomSortSummaryWizard;

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

@@ -0,0 +1,8 @@
+/// <reference types="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;

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

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomSortValuesWizardSection = exports.renderCustomSortValuesSummary = exports.isValidCustomSortOrder = 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 Loader_1 = require("../../../components/Loader");
+const Tabs_1 = require("../../../components/Tabs");
+const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
+const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
+const sortWithOrder_1 = require("../../../Utilities/sortWithOrder");
+const ValueSelector_1 = require("../../Components/ValueSelector");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const isValidCustomSortOrder = (data) => {
+    if (!data.SortedValues || !data.SortedValues.length) {
+        return 'You have to specify at least one value for Custom Sort order';
+    }
+    return true;
+};
+exports.isValidCustomSortOrder = isValidCustomSortOrder;
+const renderCustomSortValuesSummary = (data) => {
+    return data.SortedValues.length ? (React.createElement(rebass_1.Text, { fontSize: 2 },
+        React.createElement(ValueSelector_1.ValueOptionsTags, { options: data.SortedValues, value: data.SortedValues, toIdentifier: (x) => `${x}`, toLabel: (x) => `${x}`, allowWrap: true, readOnly: true }))) : null;
+};
+exports.renderCustomSortValuesSummary = renderCustomSortValuesSummary;
+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);
+    (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));
+            if (!isMounted) {
+                return;
+            }
+            setIsDistinctValuesLoading(false);
+            setDistinctValues(newValues);
+        })();
+        return () => {
+            isMounted = false;
+        };
+    }, [data.ColumnId]);
+    const sortedValuesMap = (0, react_1.useMemo)(() => {
+        if (!data.SortedValues || !data.SortedValues.length) {
+            return new Map();
+        }
+        return data.SortedValues.reduce((acc, val) => {
+            acc.set(val, true);
+            return acc;
+        }, new Map());
+    }, [data.SortedValues]);
+    const allowReorder = React.useCallback((option) => {
+        return sortedValuesMap.has(option);
+    }, [sortedValuesMap]);
+    const options = (0, react_1.useMemo)(() => {
+        return (0, sortWithOrder_1.sortWithOrderArray)(distinctValues, data.SortedValues, {
+            sortUnorderedItems: false,
+        });
+    }, [allowReorder, distinctValues, data.SortedValues]);
+    const baseClassName = 'ab-CustomSortWizard__SortOrder';
+    const className = (0, join_1.default)(baseClassName, isDistinctValuesLoading && `${baseClassName}--loading`);
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' }, className: className },
+        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: () => {
+                    return `Your Sort Order:`;
+                }, onChange: (SortedValues) => {
+                    props.onChange(Object.assign(Object.assign({}, data), { SortedValues }));
+                } }))));
+};
+exports.CustomSortValuesWizardSection = CustomSortValuesWizardSection;

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

@@ -0,0 +1,7 @@
+/// <reference types="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;

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

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomSortWizard = 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 OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const Helper_1 = require("../../../Utilities/Helpers/Helper");
+const CustomSortColumnWizardSection_1 = require("./CustomSortColumnWizardSection");
+const CustomSortValuesWizardSection_1 = require("./CustomSortValuesWizardSection");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
+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 [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;
+        }
+        return newData;
+    });
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const handleFinish = () => {
+        if (data) {
+            dispatch(CustomSortRedux.CustomSortEdit(customSort));
+        }
+        else {
+            dispatch(CustomSortRedux.CustomSortAdd(customSort));
+        }
+        props.onFinishWizard(customSort);
+    };
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: customSort, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
+            {
+                isValid: CustomSortColumnWizardSection_1.isValidCustomSortColumn,
+                renderSummary: CustomSortColumnWizardSection_1.renderCustomSortColumn,
+                details: 'Select a Column for Custom Sort',
+                render: () => {
+                    return (React.createElement(rebass_1.Box, { padding: 2, style: { height: '100%' } },
+                        React.createElement(CustomSortColumnWizardSection_1.CustomSortColumnWizardSection, { isNew: props.isNew, onChange: setCustomSort })));
+                },
+                title: 'Column',
+            },
+            {
+                title: 'Sort Order',
+                details: 'Specify Custom Sort order - drag selected items to modify order',
+                isValid: CustomSortValuesWizardSection_1.isValidCustomSortOrder,
+                renderSummary: CustomSortValuesWizardSection_1.renderCustomSortValuesSummary,
+                render: () => (React.createElement(rebass_1.Box, { padding: 2, style: { height: '100%' } },
+                    React.createElement(CustomSortValuesWizardSection_1.CustomSortValuesWizardSection, { onChange: setCustomSort }))),
+            },
+            {
+                details: 'Select Custom Sort Tags',
+                title: 'Tags',
+                isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
+                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                    React.createElement(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setCustomSort }))),
+                renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
+            },
+            '-',
+            {
+                title: 'Summary',
+                details: 'Review your Custom Sort',
+                render: () => {
+                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                        React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));
+                },
+            },
+        ] }));
+};
+exports.CustomSortWizard = CustomSortWizard;

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

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

package/src/View/Dashboard/CustomDashboardButton.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomDashboardButton = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
+const CustomDashboardButton = (props) => {
+    const { button } = 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 = {
+        adaptableApi: props.api,
+        userName: props.api.optionsApi.getUserName(),
+        adaptableId: props.api.optionsApi.getAdaptableId(),
+        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);
+    let buttonTooltip = props.api.internalApi.getTooltipForButton(button, dashboardContext);
+    if (button.hidden && button.hidden(button, dashboardContext)) {
+        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);
+            setTimeout(() => {
+                // mutate state to force a re-rendering
+                setComponentRevision(componentRevision + 1);
+            }, 16);
+        }, accessLevel: 'Full' }, buttonLabel));
+};
+exports.CustomDashboardButton = CustomDashboardButton;

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

@@ -0,0 +1,9 @@
+/// <reference types="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 {};

package/src/View/Dashboard/CustomToolbar.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomToolbarWrapper = exports.CustomToolbarCmp = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const AdaptableContext_1 = require("../AdaptableContext");
+const AdaptableButton_1 = require("../Components/AdaptableButton");
+const PanelDashboard_1 = require("../Components/Panels/PanelDashboard");
+const CustomToolbarCmp = (props) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    // dummy object which is used to force a re-render of the toolbar
+    const [componentRevision, setComponentRevision] = (0, react_1.useState)(1);
+    const renderContentContainerId = api.dashboardApi.internalApi.getCustomToolbarRenderContainerId(props.customToolbar.name);
+    const renderContentContainerRef = (0, react_1.useRef)(null);
+    const [renderedContentHTML, setRenderedContentHTML] = (0, react_1.useState)('');
+    const buttonsContainerId = api.dashboardApi.internalApi.getCustomToolbarButtonsContainerId(props.customToolbar.name);
+    const componentContainerId = api.dashboardApi.internalApi.getCustomToolbarComponentContainerId(props.customToolbar.name);
+    const componentContainerRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        const element = renderContentContainerRef.current;
+        const adaptableApi = api;
+        if (props.customToolbar.render) {
+            const html = props.customToolbar.render({
+                visible: true,
+                element,
+                adaptableApi,
+                userName: adaptableApi.optionsApi.getUserName(),
+                adaptableId: adaptableApi.optionsApi.getAdaptableId(),
+            });
+            setRenderedContentHTML(html);
+        }
+    }, [componentRevision, props.dashboardRevision]);
+    (0, react_1.useLayoutEffect)(() => {
+        const element = renderContentContainerRef.current;
+        const adaptableApi = api;
+        // cleanup runs in a separate effect, this way it's executed only once on unmount
+        return () => {
+            if (props.customToolbar.render) {
+                props.customToolbar.render({
+                    visible: false,
+                    element,
+                    adaptableApi,
+                    userName: adaptableApi.optionsApi.getUserName(),
+                    adaptableId: adaptableApi.optionsApi.getAdaptableId(),
+                });
+            }
+        };
+    }, []);
+    (0, react_1.useLayoutEffect)(() => {
+        const containerElement = componentContainerRef.current;
+        const adaptableApi = api;
+        if (props.customToolbar.frameworkComponent) {
+            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');
+        });
+        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');
+            }
+        };
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        props.customToolbar.render && (React.createElement("div", { id: renderContentContainerId, ref: renderContentContainerRef, className: `ab-CustomToolbar__rendered-content ab-CustomToolbar--${props.customToolbar.name}`, style: { minHeight: 22 }, dangerouslySetInnerHTML: { __html: renderedContentHTML } })),
+        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(),
+            };
+            const buttonIcon = api.internalApi.getIconForButton(button, dashboardContext);
+            let buttonStyle = api.internalApi.getStyleForButton(button, dashboardContext);
+            let buttonLabel = api.internalApi.getLabelForButton(button, dashboardContext);
+            let buttonTooltip = api.internalApi.getTooltipForButton(button, dashboardContext);
+            if (button.hidden && button.hidden(button, dashboardContext)) {
+                return null;
+            }
+            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: () => {
+                    button.onClick ? button.onClick(button, dashboardContext) : null;
+                    setTimeout(() => {
+                        // mutate state to force a re-rendering
+                        setComponentRevision(componentRevision + 1);
+                    }, 16);
+                } }, buttonLabel));
+        }))),
+        props.customToolbar.frameworkComponent && (React.createElement("div", { id: componentContainerId, ref: componentContainerRef, style: { minHeight: 22 }, className: `ab-CustomToolbar__component ab-CustomToolbar--${props.customToolbar.name}` }))));
+};
+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 = {
+                adaptableApi: api,
+                customToolbar: props.customToolbar,
+                userName: api.optionsApi.getUserName(),
+                adaptableId: api.optionsApi.getAdaptableId(),
+            };
+            api.eventApi.emit('CustomToolbarConfigured', customToolbarConfiguredInfo);
+        }, accessLevel: api.internalApi
+            .getEntitlementService()
+            .getEntitlementAccessLevelForModule('Dashboard') },
+        React.createElement(exports.CustomToolbarCmp, Object.assign({}, props))));
+};
+exports.CustomToolbarWrapper = CustomToolbarWrapper;

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

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import * as Redux from 'redux';
+import { SystemStatusMessageInfo } from '../../PredefinedConfig/Common/SystemStatusMessageInfo';
+import { AdaptableCoordinate, DashboardState } from '../../PredefinedConfig/DashboardState';
+import { GridState } from '../../PredefinedConfig/GridState';
+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';
+interface DashboardComponentProps extends ModuleViewPopupProps<any> {
+    DashboardRevision: number;
+    DashboardState: DashboardState;
+    GridState: GridState;
+    SystemStatusMessageInfos: SystemStatusMessageInfo[];
+    QuickSearchText: string;
+    dispatch: (action: Redux.Action) => Redux.Action;
+    onSetActiveTabIndex: (ActiveTabIndex: number | null) => DashboardRedux.DashboardSetActiveTabIndexAction;
+    onSetIsCollapsed: (IsCollapsed: boolean) => DashboardRedux.DashboardSetIsCollapsedAction;
+    onSetIsFloating: (IsFloating: boolean) => DashboardRedux.DashboardSetIsFloatingAction;
+    onSetIsInline: (IsInline: boolean) => DashboardRedux.DashboardSetIsInlineAction;
+    onSetFloatingPosition: (FloatingPosition: AdaptableCoordinate) => DashboardRedux.DashboardSetFloatingPositionAction;
+    onRunQuickSearch: (quickSearchText: string) => QuickSearchRedux.QuickSearchRunAction;
+    onShowQuickSearchPopup: () => PopupRedux.PopupShowScreenAction;
+    onShowDashboardPopup: () => PopupRedux.PopupShowScreenAction;
+}
+export declare let Dashboard: import("react-redux").ConnectedComponent<(props: DashboardComponentProps) => JSX.Element, any>;
+export {};