@adaptabletools/adaptable 10.0.4-canary.2 → 11.0.0-canary.0

package/src/View/Components/Popups/AdaptablePopup/TopBar.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { SettingsPanelOptions } from '../../../../AdaptableOptions/SettingsPanelOptions';
+interface TopBarProps {
+    icon: SettingsPanelOptions['icon'];
+}
+export declare const TopBar: React.FunctionComponent<TopBarProps>;
+export default TopBar;

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopBar = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const ApplicationIcon_1 = require("../../../../components/ApplicationIcon");
+const icons_1 = require("../../../../components/icons");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+exports.TopBar = (props) => {
+    var _a;
+    const baseClassName = 'ab-Adaptable-Popup__TopBar';
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const applicationIcon = (_a = adaptable.api.internalApi.getAdaptableOptions().userInterfaceOptions) === null || _a === void 0 ? void 0 : _a.applicationIcon;
+    let icon = React.createElement(React.Fragment, null);
+    if (props.icon === 'ConfigurationIcon') {
+        icon = React.createElement(icons_1.Icon, { className: `${baseClassName}__Icon`, name: "settings" });
+    }
+    else if (props.icon === 'ApplicationIcon' && applicationIcon) {
+        icon = React.createElement(ApplicationIcon_1.ApplicationIcon, { icon: applicationIcon });
+    }
+    else if (typeof props.icon === 'object' && props.icon.src) {
+        icon = React.createElement(ApplicationIcon_1.ApplicationIcon, { icon: props.icon });
+    }
+    return (React.createElement(rebass_1.Flex, { flex: 0, className: baseClassName },
+        icon,
+        React.createElement(rebass_1.Text, null, props.children)));
+};
+exports.default = exports.TopBar;

package/src/View/Components/Popups/AdaptablePopup/Utilities.d.ts

@@ -0,0 +1,15 @@
+export declare const getMiddlePosition: (size: {
+    width: number;
+    height: number;
+}) => {
+    x: number;
+    y: number;
+};
+export declare const getActionPanelSize: () => {
+    height: number;
+    width: number;
+};
+export declare const getSettingsPanelSize: () => {
+    height: number;
+    width: number;
+};

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSettingsPanelSize = exports.getActionPanelSize = exports.getMiddlePosition = void 0;
+const Helper_1 = require("../../../../Utilities/Helpers/Helper");
+exports.getMiddlePosition = (size) => {
+    const height = window.innerHeight;
+    const width = window.innerWidth;
+    return {
+        x: width / 2 - size.width / 2,
+        y: height / 2 - size.height / 2,
+    };
+};
+exports.getActionPanelSize = () => {
+    const height = window.innerHeight;
+    const width = window.innerWidth;
+    return {
+        height: Helper_1.clamp(600, 0, height * 0.9),
+        width: Helper_1.clamp(800, 0, width * 0.9),
+    };
+};
+exports.getSettingsPanelSize = () => {
+    const height = window.innerHeight;
+    const width = window.innerWidth;
+    return {
+        height: Helper_1.clamp(height * 0.9, 0, 800),
+        width: Helper_1.clamp(width * 0.9, 0, 800),
+    };
+};

package/src/View/Components/Popups/AdaptablePopup/index.d.ts

@@ -0,0 +1 @@
+export { AdaptablePopup } from './AdaptablePopup';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptablePopup = void 0;
+var AdaptablePopup_1 = require("./AdaptablePopup");
+Object.defineProperty(exports, "AdaptablePopup", { enumerable: true, get: function () { return AdaptablePopup_1.AdaptablePopup; } });

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

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.showToast = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const Toastify_1 = require("../../../components/Toastify");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const AdaptablePopupAlert_1 = require("./AdaptablePopupAlert");
+const react_toastify_1 = require("react-toastify");
 exports.showToast = (props) => {
     const toastProps = ObjectFactory_1.default.CreateToastOptions(props.api.internalApi.getAdaptableOptions().notificationsOptions, {
         onClose: () => {
@@ -13,21 +13,21 @@ exports.showToast = (props) => {
         },
     });
     const content = (React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, Object.assign({ headless: true }, props, { onClose: () => {
-            Toastify_1.toast.dismiss(toastId);
+            react_toastify_1.toast.dismiss(toastId);
         } })));
     let toastId;
     switch (props.adaptableAlert.alertDefinition.MessageType) {
         case 'Info':
-            toastId = Toastify_1.toast.info(content, toastProps);
+            toastId = react_toastify_1.toast.info(content, toastProps);
             break;
         case 'Error':
-            toastId = Toastify_1.toast.error(content, toastProps);
+            toastId = react_toastify_1.toast.error(content, toastProps);
             break;
         case 'Success':
-            toastId = Toastify_1.toast.success(content, toastProps);
+            toastId = react_toastify_1.toast.success(content, toastProps);
             break;
         case 'Warning':
-            toastId = Toastify_1.toast.warn(content, toastProps);
+            toastId = react_toastify_1.toast.warn(content, toastProps);
             break;
     }
 };

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

@@ -25,12 +25,12 @@ const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlo
 const preventDefault = (e) => e.preventDefault();
 const AdaptableToolPanelComponent = (props) => {
     var _a;
-    const functionsGlyph = React.createElement(icons_1.Icon, { name: 'home' });
-    const colsGlyph = React.createElement(icons_1.Icon, { name: 'list' });
     const toolPanelsGlyph = React.createElement(icons_1.Icon, { name: 'align-justify' });
     const entitlementService = props.api.internalApi.getEntitlementService();
     const moduleService = props.api.internalApi.getModuleService();
-    const toolPanelOptions = props.api.internalApi.getAdaptableOptions().toolPanelOptions;
+    const adaptableOptions = props.api.internalApi.getAdaptableOptions();
+    const toolPanelOptions = adaptableOptions.toolPanelOptions;
+    const settingsPanelOptions = adaptableOptions.settingsPanelOptions;
     if (entitlementService.isModuleHiddenEntitlement('ToolPanel')) {
         // do NOT show any toolPanel content if the required entitlements are missing
         return (React.createElement(HelpBlock_1.default, { mt: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } }, "Not enough rights"));
@@ -80,19 +80,6 @@ const AdaptableToolPanelComponent = (props) => {
             return (React.createElement(ToolPanelWrapper_1.ToolPanelWrapper, { key: moduleToolPanel, adaptableToolPanel: moduleToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(moduleToolPanel, state) }));
         }
     });
-    const renderModuleDropdowns = () => {
-        if (!toolPanelOptions.showModulesDropdown) {
-            return;
-        }
-        let menuItems = availableModuleItems.map((menuItem) => {
-            return {
-                onClick: () => props.onClick(menuItem.reduxAction),
-                icon: React.createElement(icons_1.Icon, { name: menuItem.icon }),
-                label: menuItem.label,
-            };
-        });
-        return (React.createElement(DropdownButton_1.default, { variant: "text", tone: "none", items: menuItems, tooltip: "Adaptable Modules", className: "ab-ToolPanel__modules", key: 'dropdown-modules', id: 'dropdown-modules' }, functionsGlyph));
-    };
     const renderToolPanelDropdowns = () => {
         if (!toolPanelOptions.showToolPanelsDropdown) {
             return;
@@ -139,76 +126,55 @@ const AdaptableToolPanelComponent = (props) => {
         });
         return (React.createElement(DropdownButton_1.default, { variant: "text", tone: "none", collapseOnItemClick: false, key: 'dropdown-toolpanels', id: 'dropdown-toolpanels', className: "ab-ToolPanel__toolbars", columns: ['label'], items: toolpanelItems, tooltip: "Manage Tool Panels" }, toolPanelsGlyph));
     };
-    const renderColumnsDropdown = () => {
-        if (!toolPanelOptions.showColumnsDropdown) {
-            return;
-        }
-        let colItems = [
-            {
-                clickable: false,
-                label: (React.createElement("div", { key: "colTitle" },
-                    ' ',
-                    "\u00A0\u00A0",
-                    React.createElement("b", null, 'Columns'))),
-            },
-        ];
-        props.Columns.forEach((col, index) => {
-            colItems.push({
-                id: col.columnId,
-                onClick: () => {
-                    onSetColumnVisibility(col.columnId);
-                },
-                label: (React.createElement(CheckBox_1.CheckBox, { as: "div", className: "ab-dd-checkbox", variant: "agGrid", my: 0, value: col.columnId, key: col.columnId, checked: col.visible, onMouseDown: preventDefault }, col.friendlyName)),
-            });
-        });
-        return (React.createElement(DropdownButton_1.default, { listMinWidth: 150, variant: "text", tone: "none", collapseOnItemClick: false, items: colItems, columns: ['label'], className: "ab-Toolpanel__columns", key: 'dropdown-cols', id: 'dropdown-cols', tooltip: "Select Columns" }, colsGlyph));
-    };
     const renderToolPanelButtons = () => {
-        var _a;
         const toolPanelButtons = [];
-        // 1. process custom buttons
-        if (props.api.toolPanelApi.getCustomToolPanelButtons().length) {
-            toolPanelButtons.push(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
-                // the default size of AdapTable SVG ModuleButtons
-                const defaultIconProps = {
-                    style: {
-                        height: 'var(--ab-cmp-simple-button__height)',
-                        width: 'var(--ab-cmp-simple-button__width)',
-                    },
-                };
-                const iconProps = button.icon && Object.assign({}, defaultIconProps, button.icon);
-                const toolPanelContext = {
-                    adaptableApi: props.api,
-                    toolPanelState: props.api.toolPanelApi.getToolPanelState(),
-                };
-                let buttonStyle = props.api.internalApi.getStyleForButton(button, toolPanelContext);
-                let buttonLabel = props.api.internalApi.getLabelForButton(button, toolPanelContext);
-                let buttonTooltip = props.api.internalApi.getTooltipForButton(button, toolPanelContext);
-                if (button.hidden && button.hidden(button, toolPanelContext)) {
-                    return null;
-                }
-                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 : uuid_1.createUuid();
-                return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' },
-                    button.icon ? React.createElement("img", Object.assign({}, iconProps)) : null,
-                    buttonLabel));
-            }));
+        let moduleButtons = props.ModuleButtons;
+        const shouldAddSettingsPanel = settingsPanelOptions.alwaysShowInToolPanel &&
+            !props.api.internalApi.getEntitlementService().isModuleHiddenEntitlement('SettingsPanel');
+        if (shouldAddSettingsPanel && !moduleButtons.includes('SettingsPanel')) {
+            moduleButtons = ['SettingsPanel', ...moduleButtons];
         }
-        // 2. process module buttons
-        if ((_a = props.ModuleButtons) === null || _a === void 0 ? void 0 : _a.length) {
-            toolPanelButtons.push(props.ModuleButtons.map((x) => {
+        if (moduleButtons === null || moduleButtons === void 0 ? void 0 : moduleButtons.length) {
+            toolPanelButtons.push(moduleButtons.map((x) => {
                 let menuItem = props.MainMenuItems.find((y) => y.isVisible && y.module == x);
                 if (menuItem) {
-                    return (React.createElement(SimpleButton_1.default, { key: menuItem.label, icon: menuItem.icon, variant: "text", className: `ab-ToolPanel__Home__${kebabCase_1.default(menuItem.label)}`, tooltip: menuItem.label, onClick: () => props.onClick(menuItem.reduxAction), accessLevel: 'Full' }));
+                    return (React.createElement(SimpleButton_1.default, { "data-name": menuItem.module, key: menuItem.label, icon: menuItem.icon, tone: "none", variant: "text", className: `ab-ToolPanel__Home__${kebabCase_1.default(menuItem.label)}`, tooltip: menuItem.label, onClick: () => props.onClick(menuItem.reduxAction), accessLevel: 'Full' }));
                 }
             }));
         }
         return toolPanelButtons;
     };
+    const renderCustomToolPanelButtons = () => {
+        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
+            // the default size of AdapTable SVG ModuleButtons
+            const defaultIconProps = {
+                style: {
+                    height: 'var(--ab-cmp-simple-button__height)',
+                    width: 'var(--ab-cmp-simple-button__width)',
+                },
+            };
+            const iconProps = button.icon && Object.assign({}, defaultIconProps, button.icon);
+            const toolPanelContext = {
+                adaptableApi: props.api,
+                toolPanelState: props.api.toolPanelApi.getToolPanelState(),
+            };
+            let buttonStyle = props.api.internalApi.getStyleForButton(button, toolPanelContext);
+            let buttonLabel = props.api.internalApi.getLabelForButton(button, toolPanelContext);
+            let buttonTooltip = props.api.internalApi.getTooltipForButton(button, toolPanelContext);
+            if (button.hidden && button.hidden(button, toolPanelContext)) {
+                return null;
+            }
+            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 : uuid_1.createUuid();
+            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' },
+                button.icon ? React.createElement("img", Object.assign({}, iconProps)) : null,
+                buttonLabel));
+        });
+    };
     const onSetColumnVisibility = (name) => {
         let changedColumn = props.api.columnApi.getColumnFromId(name);
         let columns = [].concat(props.Columns);
@@ -239,12 +205,11 @@ const AdaptableToolPanelComponent = (props) => {
     return (React.createElement(rebass_1.Flex, { className: "ab-ToolPanel", "data-name": "adaptable-tool-panel", flexDirection: "column", justifyContent: "center", padding: 2, style: {
             width: '100%',
         } },
-        React.createElement(rebass_1.Flex, { className: "ab-ToolPanel__header", flexDirection: "row", justifyContent: "left", padding: 1, style: { width: '100%' } },
-            renderModuleDropdowns(),
+        React.createElement(rebass_1.Flex, { className: "ab-ToolPanel__header", flexDirection: "row", justifyContent: "left", padding: 1, flexWrap: "wrap", style: { width: '100%' } },
             isToolPanelModuleConfigurable && renderToolPanelDropdowns(),
-            renderColumnsDropdown(),
+            toolPanelButtons,
             isToolPanelModuleConfigurable && renderToolPanelConfigureButton()),
-        ArrayExtensions_1.default.IsNotNullOrEmpty(toolPanelButtons) ? (React.createElement(rebass_1.Flex, { className: "ab-ToolPanel__header__buttons", flexDirection: "row", justifyContent: "left", padding: 1, flexWrap: "wrap" }, toolPanelButtons)) : null,
+        Boolean(props.api.toolPanelApi.getCustomToolPanelButtons().length) && (React.createElement(rebass_1.Flex, { className: "ab-ToolPanel__header__buttons", flexDirection: "row", justifyContent: "left", padding: 1, flexWrap: "wrap" }, renderCustomToolPanelButtons())),
         visibleToolPanelControls));
 };
 function mapStateToProps(state) {

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

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const ToolPanelRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ToolPanelRedux"));
-const PanelWithButton_1 = require("../../Components/Panels/PanelWithButton");
+const PopupPanel_1 = require("../Popups/AdaptablePopup/PopupPanel");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const Types_1 = require("../../../PredefinedConfig/Common/Types");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
@@ -64,7 +64,14 @@ class ToolPanelPopupComponent extends React.Component {
         const selectedToolPanels = this.props.ToolPanelState.ToolPanels.map((toolPanelDefinition) => toolPanelDefinition.Name)
             // ensure that the visible state has only valid tool panels
             .filter((visibleToolPanel) => availableToolPanels.includes(visibleToolPanel));
-        return (React.createElement(PanelWithButton_1.PanelWithButton, { headerText: "ToolPanel Configuration", bodyProps: { padding: 2, style: { display: 'flex', flexDirection: 'column' } }, glyphicon: this.props.moduleInfo.Glyph },
+        const isModuleCheckboxDisabled = (module) => {
+            if (module === 'SettingsPanel') {
+                return this.props.api.internalApi.getAdaptableOptions().settingsPanelOptions
+                    .alwaysShowInDashboard;
+            }
+            return false;
+        };
+        return (React.createElement(PopupPanel_1.PopupPanel, { headerText: "ToolPanel Configuration", glyphicon: this.props.moduleInfo.Glyph },
             React.createElement(Tabs_1.Tabs, { "data-name": 'toolPanelPopup-component', className: "ab-ToolPanelPopup", value: this.state.ToolPanelConfigView, style: { height: '100%' }, onValueChange: (value) => this.setState({ ToolPanelConfigView: value }) },
                 React.createElement(Tabs_1.Tabs.Tab, { value: ToolPanelConfigView.ToolPanels },
                     React.createElement(Radio_1.default, { margin: 0, value: ToolPanelConfigView.ToolPanels, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.ToolPanels, tabIndex: -1 }, "Tool Panels")),
@@ -73,7 +80,7 @@ class ToolPanelPopupComponent extends React.Component {
                 React.createElement(Tabs_1.Tabs.Content, { value: ToolPanelConfigView.ToolPanels, style: { flex: 1, overflow: 'auto' } },
                     React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: availableToolPanels, value: selectedToolPanels, noSelectionLabel: 'No selected Tool Panel', xSelectedLabel: () => `Visible ToolPanels:`, onChange: (selectedValues) => this.onToolPanelToolPanelsChanged(selectedValues) })),
                 React.createElement(Tabs_1.Tabs.Content, { value: ToolPanelConfigView.Buttons, style: { flex: 1, overflow: 'auto' } },
-                    React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', xSelectedLabel: () => `Visible Module Buttons:`, onChange: (selectedValues) => this.props.onToolPanelSetModuleButtons(selectedValues) })))));
+                    React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', xSelectedLabel: () => `Visible Module Buttons:`, isDisabled: isModuleCheckboxDisabled, onChange: (selectedValues) => this.props.onToolPanelSetModuleButtons(selectedValues) })))));
     }
     onShowGridPropertiesChanged(event) {
         let e = event.target;
@@ -81,7 +88,8 @@ class ToolPanelPopupComponent extends React.Component {
         this.setState({ ToolPanelConfigView: ToolPanelConfigView });
     }
     onToolPanelToolPanelsChanged(selectedValues) {
-        const currentSelectedToolPanelDefinitions = this.props.ToolPanelState.ToolPanels;
+        const currentSelectedToolPanelDefinitions = this.props
+            .ToolPanelState.ToolPanels;
         // try to return the pre-existing definition (to maintain the previous collapsed state)
         // otherwise select the new toolPanel with the default 'collapsed' state
         let newSelectedToolPanelDefinitions = selectedValues.map((selectedToolPanel) => {

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

@@ -15,6 +15,7 @@ export declare type ValueSelectorProps<OPTION_TYPE, ID_TYPE extends number | str
     xSelectedLabel?: (count: number) => ReactNode;
     selectionBoxPosition?: 'top' | 'bottom';
     onShowSelectedOnlyChange?: (selectedOnly: boolean) => void;
+    isDisabled?: (option: OPTION_TYPE) => boolean;
 };
 export declare function ValueSelector<OPTION_TYPE, ID_TYPE extends number | string>(props: ValueSelectorProps<OPTION_TYPE, ID_TYPE>): JSX.Element;
 export declare namespace ValueSelector {

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

@@ -12,6 +12,7 @@ const EllipsisContainer_1 = require("../../../components/EllipsisContainer");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const reorder_1 = require("../../../Utilities/reorder");
+const Tag_1 = require("../../../components/Tag");
 function useValuesMap({ options, value, toIdentifier, selectedMap, }) {
     const optionsMap = react_1.useMemo(() => {
         if (selectedMap) {
@@ -37,7 +38,7 @@ function useValuesMap({ options, value, toIdentifier, selectedMap, }) {
     return { selectedMap: result, optionsMap };
 }
 function ValueSelector(props) {
-    const { options, value, filter, onChange, allowReorder, singleSelect, toLabel, toIdentifier, noSelectionLabel, clearSelectionLabel, showSelectedOnlyLabel, xSelectedLabel, selectionBoxPosition = 'bottom', onShowSelectedOnlyChange, } = props;
+    const { options, value, filter, onChange, allowReorder, singleSelect, toLabel, toIdentifier, noSelectionLabel, clearSelectionLabel, showSelectedOnlyLabel, xSelectedLabel, selectionBoxPosition = 'bottom', onShowSelectedOnlyChange, isDisabled, } = props;
     const [selectedOnly, doSetSelectedOnly] = react_1.useState(false);
     const setSelectedOnly = react_1.useCallback((selectedOnly) => {
         doSetSelectedOnly(selectedOnly);
@@ -73,7 +74,7 @@ function ValueSelector(props) {
                                 selectedMap.delete(identifier);
                             }
                             notifyChange();
-                        } }, label)) : (React.createElement(CheckBox_1.CheckBox, { "data-name": identifier, onChange: (checked) => {
+                        } }, label)) : (React.createElement(CheckBox_1.CheckBox, { "data-name": identifier, disabled: isDisabled ? isDisabled(option) : false, onChange: (checked) => {
                             if (checked) {
                                 selectedMap.set(identifier, option);
                             }
@@ -183,10 +184,10 @@ function ValueOptionsTags(props) {
         };
         const option = selectedMap.get(optionId);
         const label = option != null ? toLabel(option) : `${optionId}`;
-        return (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", backgroundColor: "primary", "data-name": "selected-option", "data-id": optionId, mt: allowWrap ? 1 : 0, mr: 1, padding: 1, className: "ab-ValueSelector__tag", style: { borderRadius: 'var(--ab__border-radius)', flex: 'none' }, onClick: (e) => {
+        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);
-            } },
+            }, style: { flex: 'none' } },
             renderLabel ? renderLabel(label) : label,
             readOnly ? null : (React.createElement(SimpleButton_1.default, { icon: "clear", ml: 2, iconSize: 14, variant: "text", style: { border: 'none' }, onClick: clear }))));
     };
@@ -197,7 +198,6 @@ function ValueOptionsTags(props) {
             " ",
             remaining > 1 ? 'others' : 'other'));
     }, []);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(EllipsisContainer_1.EllipsisContainer, { marginRight: 4, my: 1, allowWrap: allowWrap, count: value.length, direction: "horizontal", renderItem: renderOptionTag, renderEllipsis: renderEllipsis })));
+    return (React.createElement(EllipsisContainer_1.EllipsisContainer, { marginRight: 4, my: 1, allowWrap: allowWrap, count: value.length, direction: "horizontal", renderItem: renderOptionTag, renderEllipsis: renderEllipsis }));
 }
 exports.ValueOptionsTags = ValueOptionsTags;

package/src/View/ConditionalStyle/Wizard/ConditionalStyleWizard.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { AdaptableOnePageWizardProps } from '../../Wizard/Interface/IAdaptableWizard';
 import { ConditionalStyle } from '../../../types';
 export interface ConditionalStyleWizardProps extends AdaptableOnePageWizardProps<ConditionalStyle> {
 }
-export declare function ConditionalStyleWizard(props: ConditionalStyleWizardProps): JSX.Element;
+export declare const ConditionalStyleWizard: React.FunctionComponent<ConditionalStyleWizardProps>;

package/src/View/ConditionalStyle/Wizard/ConditionalStyleWizard.js

@@ -14,13 +14,18 @@ const DEFAULT_PREDICATE_ID_FOR_CONDITIONAL_STYLE_1 = require("./DEFAULT_PREDICAT
 const CheckBox_1 = require("../../../components/CheckBox");
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
-function ConditionalStyleWizard(props) {
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
+const react_redux_1 = require("react-redux");
+const ConditionalStyleRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ConditionalStyleRedux"));
+exports.ConditionalStyleWizard = (props) => {
     const [conditionalStyle, setConditionalStyle] = react_1.useState(() => {
         var _a;
         const DEFAULT_RULE = {
             BooleanExpression: '',
         };
-        const conditionalStyle = Helper_1.cloneObject(props.data);
+        const conditionalStyle = props.data
+            ? Helper_1.cloneObject(props.data)
+            : ObjectFactory_1.default.CreateEmptyConditionalStyle();
         conditionalStyle.Scope = (_a = conditionalStyle.Scope) !== null && _a !== void 0 ? _a : { All: true };
         if (!conditionalStyle.Rule) {
             conditionalStyle.Rule = DEFAULT_RULE;
@@ -30,7 +35,17 @@ function ConditionalStyleWizard(props) {
         }
         return conditionalStyle;
     });
-    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { moduleInfo: props.moduleInfo, data: conditionalStyle, onHide: props.onCloseWizard, onFinish: props.onFinishWizard, sections: [
+    const dispatch = react_redux_1.useDispatch();
+    const handleFinish = () => {
+        if (props.data) {
+            dispatch(ConditionalStyleRedux.ConditionalStyleEdit(conditionalStyle));
+        }
+        else {
+            dispatch(ConditionalStyleRedux.ConditionalStyleAdd(conditionalStyle));
+        }
+        props.onCloseWizard();
+    };
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: conditionalStyle, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Style',
                 details: 'Specify the Style to be applied conditionally',
@@ -74,5 +89,4 @@ function ConditionalStyleWizard(props) {
                 title: 'Summary',
             },
         ] }));
-}
-exports.ConditionalStyleWizard = ConditionalStyleWizard;
+};

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

@@ -4,16 +4,15 @@ exports.CustomSortColumnWizardSection = exports.isValidCustomSortColumn = export
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
-const CodeBlock_1 = require("../../../components/CodeBlock");
 const Tabs_1 = require("../../../components/Tabs");
+const Tag_1 = require("../../../components/Tag");
 const ColumnSelector_1 = require("../../Components/ColumnSelector");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 exports.renderCustomSortColumn = (data) => {
     const { api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
     return (React.createElement(rebass_1.Text, { pr: 2, py: 2, fontSize: 2 },
-        "Custom sort column:",
-        ' ',
-        React.createElement(CodeBlock_1.CodeBlock, null, api.columnApi.getFriendlyNameFromColumnId(data.ColumnId))));
+        "Custom sort column: ",
+        React.createElement(Tag_1.Tag, null, api.columnApi.getFriendlyNameFromColumnId(data.ColumnId))));
 };
 exports.isValidCustomSortColumn = (data) => {
     if (!data.ColumnId) {

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

@@ -9,11 +9,26 @@ 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"));
 exports.CustomSortWizard = (props) => {
     const [customSort, setCustomSort] = react_1.useState(() => {
-        return Helper_1.cloneObject(props.data);
+        return props.data
+            ? Helper_1.cloneObject(props.data)
+            : ObjectFactory_1.default.CreateEmptyCustomSort();
     });
-    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { moduleInfo: props.moduleInfo, sections: [
+    const dispatch = react_redux_1.useDispatch();
+    const handleFinish = () => {
+        if (props.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,
@@ -41,5 +56,5 @@ exports.CustomSortWizard = (props) => {
                         React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));
                 },
             },
-        ], data: customSort, onHide: props.onCloseWizard, onFinish: props.onFinishWizard }));
+        ] }));
 };

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

@@ -17,7 +17,6 @@ interface DashboardComponentProps extends ModuleViewPopupProps<any> {
     onSetIsCollapsed: (IsCollapsed: boolean) => DashboardRedux.DashboardSetIsCollapsedAction;
     onSetIsFloating: (IsFloating: boolean) => DashboardRedux.DashboardSetIsFloatingAction;
     onSetIsInline: (IsInline: boolean) => DashboardRedux.DashboardSetIsInlineAction;
-    onSetIsHidden: (IsHidden: boolean) => DashboardRedux.DashboardSetIsHiddenAction;
     onSetFloatingPosition: (FloatingPosition: AdaptableCoordinate) => DashboardRedux.DashboardSetFloatingPositionAction;
     onRunQuickSearch: (quickSearchText: string) => QuickSearchRedux.QuickSearchRunAction;
     onShowQuickSearchPopup: () => PopupRedux.PopupShowScreenAction;