@adaptabletools/adaptable 14.0.0-canary.0 → 14.0.0-canary.1

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

@@ -71,9 +71,9 @@ const AdaptablePopup = (props) => {
                 }
             },
         } },
-        React.createElement(AdaptablePopupDialog_1.AdaptablePopupDialog, { baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer },
+        React.createElement(AdaptablePopupDialog_1.AdaptablePopupDialog, { dataName: componentModule, baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer },
             !isStandalone && React.createElement(TopBar_1.default, { icon: settingsPanelOptions.icon }, settingsPanelTitle),
-            React.createElement(rebass_1.Flex, { "data-name": props.componentName, flexDirection: "row", flex: "1 1 0", style: { minHeight: 0 }, className: accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '' },
+            React.createElement(rebass_1.Flex, { flexDirection: "row", flex: "1 1 0", style: { minHeight: 0 }, className: accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '' },
                 !isStandalone && (React.createElement(Navigation_1.Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })),
                 React.createElement(rebass_1.Flex, { flex: 1, className: "ab-Adaptable-Popup__Body" }, moduleViewContent)))));
 };

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

@@ -11,5 +11,5 @@ interface AdaptablePopupBodyProps {
     onHide?: () => void;
     api: AdaptableApi;
 }
-export declare const AdaptablePopupBody: React.FunctionComponent<AdaptablePopupBodyProps>;
+export declare const AdaptablePopupBody: React.FunctionComponent<React.PropsWithChildren<AdaptablePopupBodyProps>>;
 export {};

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

@@ -23,7 +23,7 @@ const AdaptablePopupBody = (props) => {
             }
         },
         // show share button if TeamSharing is active & user has edit rights
-        teamSharingActivated: props.api.teamSharingApi.isTeamSharingActivated() &&
+        teamSharingActivated: props.api.teamSharingApi.isTeamSharingAvailable() &&
             props.api.teamSharingApi.hasTeamSharingFullRights(),
         modalContainer: modalContainer,
         accessLevel: accessLevel,

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare const AdaptablePopupDialog: React.FunctionComponent<{
+export declare const AdaptablePopupDialog: React.FunctionComponent<React.PropsWithChildren<{
     baseClassName: string;
     className: string;
     friendlyName: string;
@@ -8,4 +8,5 @@ export declare const AdaptablePopupDialog: React.FunctionComponent<{
     onHide: () => void;
     style?: React.CSSProperties;
     modalContainer?: string | HTMLElement;
-}>;
+    dataName?: string;
+}>>;

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

@@ -46,19 +46,6 @@ const PopupDialog = (props) => {
 };
 const AdaptablePopupDialog = (props) => {
     const { isActionModule, style, friendlyName, baseClassName, className, children, onHide, isWindowModal, modalContainer, } = props;
-    const elementRef = React.useMemo(() => {
-        if (!modalContainer) {
-            return null;
-        }
-        let ref = null;
-        if (typeof modalContainer === 'string') {
-            ref = globalThis.document.querySelector(modalContainer);
-        }
-        else {
-            ref = modalContainer;
-        }
-        return ref;
-    }, [modalContainer]);
     if (modalContainer) {
         let ref = null;
         if (typeof modalContainer === 'string') {
@@ -67,15 +54,15 @@ const AdaptablePopupDialog = (props) => {
         else {
             ref = modalContainer;
         }
-        return (0, react_dom_1.createPortal)(React.createElement(Dialog_1.default, { modal: false, fixed: false, onDismiss: onHide, className: className }, children), ref);
+        return (0, react_dom_1.createPortal)(React.createElement(Dialog_1.default, { "data-name": props.dataName, modal: false, fixed: false, onDismiss: onHide, className: className }, children), ref);
     }
     if (isWindowModal) {
         const settingsPanelOptionsKey = isActionModule ? `action-${friendlyName}` : 'settings';
-        return (React.createElement(WindowDialog, { settingsPanelOptionsKey: settingsPanelOptionsKey, isActionModule: isActionModule, onHide: onHide, style: style, baseClassName: baseClassName, className: className }, children));
+        return (React.createElement(WindowDialog, { dataName: props.dataName, settingsPanelOptionsKey: settingsPanelOptionsKey, isActionModule: isActionModule, onHide: onHide, style: style, baseClassName: baseClassName, className: className }, children));
     }
     else {
         const modalStyle = Object.assign(Object.assign({}, style), (isActionModule ? { maxWidth: 800, maxHeight: 600 } : { maxWidth: 1200, maxHeight: 1000 }));
-        return (React.createElement(PopupDialog, { onHide: onHide, style: modalStyle, className: className }, children));
+        return (React.createElement(PopupDialog, { "data-name": props.dataName, onHide: onHide, style: modalStyle, className: className }, children));
     }
 };
 exports.AdaptablePopupDialog = AdaptablePopupDialog;

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

@@ -8,4 +8,4 @@ export interface AdaptablePopupModuleViewProps extends ModuleViewPopupProps<type
     accessLevel: AccessLevel;
     popupParams?: ModuleParams;
 }
-export declare const AdaptablePopupModuleView: React.FunctionComponent<AdaptablePopupModuleViewProps>;
+export declare const AdaptablePopupModuleView: React.FunctionComponent<React.PropsWithChildren<AdaptablePopupModuleViewProps>>;

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

@@ -14,17 +14,17 @@ const rebass_1 = require("rebass");
 const CheckBox_1 = require("../../../../components/CheckBox");
 const SystemRedux_1 = require("../../../../Redux/ActionsReducers/SystemRedux");
 const AdaptablePopupModuleView = (props) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     /**
-     * This triggers an render for each redux change.
+     * This triggers a render for each redux change.
      * Not sure yet how to trigger this component to render when an item is edited.
      */
     (0, react_redux_1.useSelector)((state) => state);
     const [abObjectType, setAbObjectType] = React.useState(null);
     const moduleInfo = props.module.moduleInfo;
     const items = (_a = props.module) === null || _a === void 0 ? void 0 : _a.toViewAll();
-    const moduleViewProperties = props.module.getViewProperties();
-    const EditWizard = (_b = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.getEditWizard) === null || _b === void 0 ? void 0 : _b.call(moduleViewProperties);
+    const moduleViewProperties = (_d = (_c = (_b = props.module) === null || _b === void 0 ? void 0 : _b.getViewProperties) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : {};
+    const EditWizard = (_e = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.getEditWizard) === null || _e === void 0 ? void 0 : _e.call(moduleViewProperties);
     const [isWizardOpen, setIsWizardOpen] = React.useState(() => {
         var _a, _b, _c;
         return (((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'New' ||
@@ -48,7 +48,7 @@ const AdaptablePopupModuleView = (props) => {
         if (((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'New' || ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.action) === 'Edit') {
             handleOpenEditPopup();
         }
-    }, [(_c = props.popupParams) === null || _c === void 0 ? void 0 : _c.action]);
+    }, [(_f = props.popupParams) === null || _f === void 0 ? void 0 : _f.action]);
     const emptyView = moduleViewProperties.emptyView;
     let emptyContent = null;
     if (typeof emptyView === 'function') {
@@ -57,11 +57,11 @@ const AdaptablePopupModuleView = (props) => {
     else if (typeof emptyView === 'string') {
         emptyContent = emptyView;
     }
-    const toolTipText = (_d = moduleViewProperties.newTooltipText) !== null && _d !== void 0 ? _d : `Create ${moduleInfo.FriendlyName}`;
+    const toolTipText = (_g = moduleViewProperties.newTooltipText) !== null && _g !== void 0 ? _g : `Create ${moduleInfo.FriendlyName}`;
     // Some modules do not have new button
     // e.g. filter
     let newButton = null;
-    if ((_e = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes) === null || _e === void 0 ? void 0 : _e.length) {
+    if ((_h = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes) === null || _h === void 0 ? void 0 : _h.length) {
         const items = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes.map((abObjectType) => {
             var _a;
             return {
@@ -77,12 +77,9 @@ const AdaptablePopupModuleView = (props) => {
             React.createElement(icons_1.Icon, { name: "plus" }),
             " New"));
     }
-    else if (EditWizard || moduleViewProperties.onOpenEditPopup) {
-        newButton = (React.createElement(ButtonNew_1.ButtonNew, { onClick: () => handleOpenEditPopup(), tooltip: toolTipText, accessLevel: props.accessLevel, style: {
-                color: 'var(--ab-color-text-on-add)',
-                fill: 'var(--ab-color-text-on-add)',
-                background: 'var(--ab-color-action-add)',
-            } }));
+    else if (!moduleViewProperties.hideNewButton &&
+        (EditWizard || moduleViewProperties.onOpenEditPopup)) {
+        newButton = (React.createElement(ButtonNew_1.ButtonNew, { onClick: () => handleOpenEditPopup(), tooltip: toolTipText, accessLevel: props.accessLevel }));
     }
     const handleWizardClose = () => {
         var _a;
@@ -101,7 +98,7 @@ const AdaptablePopupModuleView = (props) => {
         if (!(adaptableModule === null || adaptableModule === void 0 ? void 0 : adaptableModule.canBeAssociatedWithLayouts())) {
             return;
         }
-        if (!props.api.internalApi.hasLayoutSpecificObjects()) {
+        if (!props.api.layoutApi.internalApi.hasLayoutSpecificObjects()) {
             return;
         }
         return (React.createElement(rebass_1.Flex, { justifyContent: "flex-start" },
@@ -111,6 +108,7 @@ const AdaptablePopupModuleView = (props) => {
                 "s not available in current Layout")));
     };
     return (React.createElement(PopupPanel_1.PopupPanel, { glyphicon: moduleInfo.Glyph, infoLink: moduleInfo.HelpPage, headerText: moduleInfo.FriendlyName, button: newButton, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
+        moduleViewProperties.HeaderComponent && React.createElement(moduleViewProperties.HeaderComponent, null),
         toggleButtonShowLayoutAssociatedObjects(),
         (items === null || items === void 0 ? void 0 : items.length) ? (React.createElement(AdaptableObjectList_1.AdaptableObjectList, { module: props.module, items: items })) : (React.createElement(EmptyContent_1.default, null, emptyContent !== null && emptyContent !== void 0 ? emptyContent : `Click 'New' to create a new ${moduleInfo.FriendlyName}`)),
         isWizardOpen && EditWizard && (React.createElement(EditWizard, { abObjectType: abObjectType, moduleInfo: moduleInfo, data: null, popupParams: props.popupParams, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));

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

@@ -7,5 +7,5 @@ interface NavigationProps {
     activeItem: string;
     customSettingsPanels?: CustomSettingsPanel[];
 }
-export declare const Navigation: React.FunctionComponent<NavigationProps>;
+export declare const Navigation: React.FunctionComponent<React.PropsWithChildren<NavigationProps>>;
 export {};

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

@@ -8,4 +8,4 @@ export interface PanelWithButtonProps {
     infoLink?: string;
     infoLinkDisabled?: boolean;
 }
-export declare const PopupPanel: React.FunctionComponent<PanelWithButtonProps>;
+export declare const PopupPanel: React.FunctionComponent<React.PropsWithChildren<PanelWithButtonProps>>;

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

@@ -15,7 +15,7 @@ const PopupPanel = (props) => {
                 React.createElement(rebass_1.Box, { marginRight: 0, "data-name": "space-before" }),
                 React.createElement("div", { className: `${baseClassName}__Header__Title` }, props.headerText),
                 React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-after" }),
-                props.infoLink != null && !props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { iconSize: 24, onClick: () => window.open(props.infoLink, '_blank' // <- opens the link in a new tab or window.
+                props.infoLink != null && !props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { tone: "none", variant: "text", iconSize: 24, onClick: () => window.open(props.infoLink, '_blank' // <- opens the link in a new tab or window.
                     ) }))),
             React.createElement(rebass_1.Box, { style: { flex: 1 } }),
             props.button),

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

@@ -3,5 +3,5 @@ import { SettingsPanelOptions } from '../../../../AdaptableOptions/SettingsPanel
 interface TopBarProps {
     icon: SettingsPanelOptions['icon'];
 }
-export declare const TopBar: React.FunctionComponent<TopBarProps>;
+export declare const TopBar: React.FunctionComponent<React.PropsWithChildren<TopBarProps>>;
 export default TopBar;

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

@@ -47,7 +47,7 @@ const AdaptablePopupAlert = (props) => {
         if (api.isDestroyed()) {
             return null;
         }
-        return api.internalApi.getAdaptableFormFromAlertForm(props.adaptableAlert.alertDefinition.AlertForm || defaultForm, context, messageType);
+        return api.alertApi.internalApi.getAdaptableFormFromAlertForm(props.adaptableAlert.alertDefinition.AlertForm || defaultForm, context, messageType);
     }, [props.adaptableAlert.alertDefinition.AlertForm, defaultForm, messageType, context]);
     const renderApplicationIcon = (icon) => {
         if (!icon) {

package/src/View/Components/Popups/AdaptablePopupConfirmation.d.ts

@@ -4,7 +4,7 @@ import { AdaptableApi } from '../../../Api/AdaptableApi';
 /**
  * Used when giving the user 2 choices with the option of adding text also
  */
-export interface AdaptablePopupConfirmationProps extends React.ClassAttributes<AdaptablePopupConfirmation> {
+export interface AdaptablePopupConfirmationProps {
     showPopup: boolean;
     onConfirm: (comment: string) => void;
     onCancel: () => void;
@@ -16,14 +16,4 @@ export interface AdaptablePopupConfirmationProps extends React.ClassAttributes<A
     messageType: AdaptableMessageType;
     api: AdaptableApi;
 }
-export interface AdaptablePopupConfirmationState {
-    PromptText: string;
-}
-export declare class AdaptablePopupConfirmation extends React.Component<AdaptablePopupConfirmationProps, AdaptablePopupConfirmationState> {
-    constructor(props: AdaptablePopupConfirmationProps);
-    render(): JSX.Element;
-    onCancelForm(): void;
-    onConfirmmForm(): void;
-    changeContent: (e: any) => void;
-    canConfirm(): boolean;
-}
+export declare const AdaptablePopupConfirmation: React.FunctionComponent<AdaptablePopupConfirmationProps>;

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

@@ -10,49 +10,56 @@ const rebass_1 = require("rebass");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
-class AdaptablePopupConfirmation extends React.Component {
-    constructor(props) {
-        super(props);
-        this.changeContent = (e) => {
-            this.setState({
-                PromptText: e.target.value,
-            });
-        };
-        this.state = { PromptText: '' };
+const CheckBox_1 = require("../../../components/CheckBox");
+const SystemRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/SystemRedux"));
+const react_redux_1 = require("react-redux");
+const AdaptablePopupConfirmation = (props) => {
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const [disableDeleteConfirmation, setDisableDeleteConfirmation] = React.useState(false);
+    const [promptText, setPromptText] = React.useState('');
+    const header = props.header;
+    const glyph = UIHelper_1.UIHelper.getGlyphByMessageType(props.messageType);
+    function onCancelForm() {
+        setPromptText('');
+        props.onCancel();
     }
-    render() {
-        let header = this.props.header;
-        let glyph = UIHelper_1.UIHelper.getGlyphByMessageType(this.props.messageType);
-        return (this.props.showPopup && (React.createElement(Dialog_1.default, { modal: true, "data-name": `confirmation-popup confirmation-popup--${this.props.messageType.toLowerCase()}`, isOpen: this.props.showPopup, onDismiss: this.props.onCancel, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
-            React.createElement(PanelWithImage_1.PanelWithImage, { header: header, icon: glyph, variant: "primary" },
-                React.createElement("div", null,
-                    React.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, this.props.messsage.split('\n').map(function (item, index) {
-                        return (React.createElement(rebass_1.Text, { key: index, margin: 2 },
-                            item,
-                            React.createElement("br", null)));
-                    })),
-                    this.props.showInputBox && (React.createElement(rebass_1.Box, { padding: 2, "data-name": "body" },
-                        React.createElement("p", null, "Please enter a comment to confirm"),
-                        React.createElement(Input_1.default, { marginTop: 2, width: '100%', value: this.state.PromptText, type: "string", placeholder: "Enter text", onChange: (e) => this.changeContent(e) }))),
-                    React.createElement(rebass_1.Flex, { marginTop: 3, padding: 2, "data-name": "footer" },
-                        React.createElement(SimpleButton_1.default, { tone: "error", "data-name": "delete", variant: "raised", disabled: !this.canConfirm(), onClick: () => this.onConfirmmForm() }, this.props.confirmButtonText),
-                        React.createElement("div", { style: { flex: 1 } }),
-                        React.createElement(SimpleButton_1.default, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => this.onCancelForm() }, this.props.cancelButtonText)))))));
-    }
-    onCancelForm() {
-        this.setState({ PromptText: '' });
-        this.props.onCancel();
+    function onConfirmmForm() {
+        props.onConfirm(promptText);
+        setPromptText('');
+        if (disableDeleteConfirmation) {
+            dispatch(SystemRedux.SystemDisableDeleteConfirmation());
+        }
     }
-    onConfirmmForm() {
-        let promptText = this.state.PromptText;
-        this.setState({ PromptText: '' });
-        this.props.onConfirm(promptText);
+    function changeContent(e) {
+        setPromptText(e.target.value);
     }
-    canConfirm() {
-        if (this.props.showInputBox) {
-            return StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.state.PromptText);
+    function canConfirm() {
+        if (props.showInputBox) {
+            return StringExtensions_1.StringExtensions.IsNotNullOrEmpty(promptText);
         }
         return true;
     }
-}
+    if (!props.showPopup) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(Dialog_1.default, { modal: true, "data-name": `confirmation-popup confirmation-popup--${props.messageType.toLowerCase()}`, isOpen: props.showPopup, onDismiss: props.onCancel, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
+        React.createElement(PanelWithImage_1.PanelWithImage, { header: header, icon: glyph, variant: "primary" },
+            React.createElement("div", null,
+                React.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, props.messsage.split('\n').map(function (item, index) {
+                    return (React.createElement(rebass_1.Text, { key: index, margin: 2 },
+                        item,
+                        React.createElement("br", null)));
+                })),
+                React.createElement(rebass_1.Box, { pl: 2 },
+                    React.createElement(CheckBox_1.CheckBox, { checked: disableDeleteConfirmation, onChange: () => {
+                            setDisableDeleteConfirmation(!disableDeleteConfirmation);
+                        } }, "Do not show this again.")),
+                props.showInputBox && (React.createElement(rebass_1.Box, { padding: 2, "data-name": "body" },
+                    React.createElement("p", null, "Please enter a comment to confirm"),
+                    React.createElement(Input_1.default, { marginTop: 2, width: '100%', value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }))),
+                React.createElement(rebass_1.Flex, { marginTop: 3, padding: 2, "data-name": "footer" },
+                    React.createElement(SimpleButton_1.default, { tone: "error", "data-name": "delete", variant: "raised", disabled: !canConfirm(), onClick: () => onConfirmmForm() }, props.confirmButtonText),
+                    React.createElement("div", { style: { flex: 1 } }),
+                    React.createElement(SimpleButton_1.default, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onCancelForm() }, props.cancelButtonText))))));
+};
 exports.AdaptablePopupConfirmation = AdaptablePopupConfirmation;

package/src/View/Components/Popups/AdaptablePopupPrompt.d.ts

@@ -8,4 +8,4 @@ export interface AdaptablePopupPromptProps {
     onConfirmActionCreator?: (inputText: string) => Action;
     defaultValue?: string;
 }
-export declare const AdaptablePopupPrompt: React.FunctionComponent<AdaptablePopupPromptProps>;
+export declare const AdaptablePopupPrompt: React.FunctionComponent<React.PropsWithChildren<AdaptablePopupPromptProps>>;

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

@@ -34,17 +34,17 @@ const AdaptablePopupTeamSharing = (props) => {
                             ": a \"live\" share that is automatically updated with every local change"))),
                 React.createElement(FormLayout_1.default, { padding: 2 },
                     React.createElement(FormLayout_1.FormRow, { label: "Name: " },
-                        React.createElement(Input_1.default, { autoFocus: true, value: config.description, type: "string", width: 300, placeholder: "Enter text", onChange: (e) => setConfig(Object.assign(Object.assign({}, config), { description: e.target.value })) })),
+                        React.createElement(Input_1.default, { "data-name": "teamsharing-entity-name", autoFocus: true, value: config.description, type: "string", width: 300, placeholder: "Enter text", onChange: (e) => setConfig(Object.assign(Object.assign({}, config), { description: e.target.value })) })),
                     React.createElement(FormLayout_1.FormRow, { label: "Share: " },
                         React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                            React.createElement(Radio_1.default, { checked: config.type === 'Snapshot', onChange: () => setConfig(Object.assign(Object.assign({}, config), { type: 'Snapshot' })) }, "Snapshot"),
+                            React.createElement(Radio_1.default, { "data-name": "teamsharing-entity-type-snapshot", checked: config.type === 'Snapshot', onChange: () => setConfig(Object.assign(Object.assign({}, config), { type: 'Snapshot' })) }, "Snapshot"),
                             ' ',
-                            React.createElement(Radio_1.default, { marginLeft: 3, checked: config.type === 'Active', onChange: () => setConfig(Object.assign(Object.assign({}, config), { type: 'Active' })) }, "Active"),
+                            React.createElement(Radio_1.default, { "data-name": "teamsharing-entity-type-active", marginLeft: 3, checked: config.type === 'Active', onChange: () => setConfig(Object.assign(Object.assign({}, config), { type: 'Active' })) }, "Active"),
                             ' '))),
                 React.createElement(rebass_1.Box, { marginTop: 3 },
                     React.createElement(rebass_1.Flex, { padding: 2 },
-                        React.createElement(SimpleButton_1.default, { tone: "neutral", variant: "raised", onClick: () => onClose(), "data-name": "cancel" }, "Cancel"),
+                        React.createElement(SimpleButton_1.default, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onClose() }, "Cancel"),
                         React.createElement("div", { style: { flex: 1 } }),
-                        React.createElement(SimpleButton_1.default, { tone: "accent", "data-name": "ok", variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(config.description), onClick: () => onConfirm(config) }, "OK")))))));
+                        React.createElement(SimpleButton_1.default, { "data-name": "ok", tone: "accent", variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(config.description), onClick: () => onConfirm(config) }, "OK")))))));
 };
 exports.AdaptablePopupTeamSharing = AdaptablePopupTeamSharing;

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

@@ -20,6 +20,8 @@ const showToast = (props) => {
         onClose: () => {
             off();
         },
+    }, {
+        duration: props.adaptableAlert.alertDefinition.AlertProperties.NotificationDuration,
     });
     const content = (React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, adaptableAlert: props.adaptableAlert, onClose: () => {
             Toastify_1.toast.dismiss(toastId);

package/src/View/Components/Popups/WindowPopups/windowFactory.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
 import { WindowPopupChildProps } from './WindowPopups';
 export declare const WINDOW_QUERY_EDITOR = "WINDOW_QUERY_EDITOR";
+export declare const SHOW_PIVOT_COLUMN_DETAILS = "SHOW_PIVOT_COLUMN_DETAILS";
 export declare const windowFactory: Record<string, React.FunctionComponent<WindowPopupChildProps>>;

package/src/View/Components/Popups/WindowPopups/windowFactory.js

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.windowFactory = exports.WINDOW_QUERY_EDITOR = void 0;
+exports.windowFactory = exports.SHOW_PIVOT_COLUMN_DETAILS = exports.WINDOW_QUERY_EDITOR = void 0;
 const ExpandedQueryPopup_1 = require("../../../Query/ExpandedQueryPopup");
+const PivotDetailsPopoup_1 = require("../../../Layout/PivotDetailsPopoup");
 exports.WINDOW_QUERY_EDITOR = 'WINDOW_QUERY_EDITOR';
+exports.SHOW_PIVOT_COLUMN_DETAILS = 'SHOW_PIVOT_COLUMN_DETAILS';
 exports.windowFactory = {
     [exports.WINDOW_QUERY_EDITOR]: ExpandedQueryPopup_1.ExpandedQueryPopup,
+    [exports.SHOW_PIVOT_COLUMN_DETAILS]: PivotDetailsPopoup_1.PivotDetailsPopoup,
 };

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { AdaptablePredicate, AdaptablePredicateDef } from '../../../types';
+export interface PredicateEditorProps {
+    columnId?: string;
+    predicateDefs: AdaptablePredicateDef[];
+    predicate?: AdaptablePredicate;
+    onChange: (predicate: AdaptablePredicate) => void;
+    onClear?: () => void;
+}
+export declare const PredicateEditor: React.FunctionComponent<PredicateEditorProps>;

package/src/View/Components/PredicateEditor/PredicateEditor.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PredicateEditor = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
+const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
+const PermittedValuesSelector_1 = require("../PermittedValuesSelector");
+const isValuesPredicateDef = (colDef) => colDef && ['Values', 'ExcludeValues'].includes(colDef.id);
+const PredicateEditor = (props) => {
+    var _a;
+    const baseClassName = 'ab-PredicateEditor';
+    const predicateDefsOptions = React.useMemo(() => props.predicateDefs.map((item) => ({
+        value: item.id,
+        label: item.label,
+        onClick: () => {
+            var _a;
+            props.onChange({
+                PredicateId: item.id,
+                Inputs: ((_a = item === null || item === void 0 ? void 0 : item.inputs) !== null && _a !== void 0 ? _a : []).map((input) => { var _a; return (_a = input.defaultValue) !== null && _a !== void 0 ? _a : ''; }),
+            });
+        },
+    })), [props.predicateDefs, props.onChange]);
+    const handlePredicateInputChange = (e, index) => {
+        const { value } = e.target;
+        const newInputs = [...props.predicate.Inputs];
+        newInputs[index] = value;
+        props.onChange(Object.assign(Object.assign({}, props.predicate), { Inputs: newInputs }));
+    };
+    const handlePredicateValuesChange = (inputs) => {
+        props.onChange(Object.assign(Object.assign({}, props.predicate), { Inputs: inputs }));
+    };
+    const currentPredicateDef = props.predicateDefs.find((item) => { var _a; return item.id === ((_a = props.predicate) === null || _a === void 0 ? void 0 : _a.PredicateId); });
+    return (React.createElement(rebass_1.Box, { className: baseClassName },
+        React.createElement(DropdownButton_1.default, { listStyle: { minWidth: 150 }, "data-name": "select-predicate", mb: 2, width: "100%", className: `${baseClassName}__predicate-dropdown`, placeholder: "Select Rule", showClearButton: !!props.predicate, onClear: props.onClear, items: predicateDefsOptions, columns: ['label'] }, currentPredicateDef ? currentPredicateDef.label : 'Select Rule'),
+        React.createElement(rebass_1.Flex, null, (_a = currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.inputs) === null || _a === void 0 ? void 0 : _a.map((predicateDefInput, index) => (React.createElement(React.Fragment, null,
+            index > 0 && React.createElement(HelpBlock_1.default, { margin: 2 }, "AND"),
+            React.createElement(rebass_1.Flex, { key: index, flex: 1, flexDirection: "column" },
+                React.createElement(AdaptableInput_1.default, { "data-name": `predicate-input-${index}`, marginTop: 2, type: predicateDefInput.type, autoFocus: index === 0, value: props.predicate.Inputs[index], onChange: (e) => handlePredicateInputChange(e, index) })))))),
+        isValuesPredicateDef(currentPredicateDef) && (React.createElement(PermittedValuesSelector_1.PermitedValuesSelector, { onPredicateValuesChange: handlePredicateValuesChange, predicate: props.predicate, columnId: props.columnId }))));
+};
+exports.PredicateEditor = PredicateEditor;

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

@@ -1,30 +1,38 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../Api/AdaptableApi';
-import { CellColorRange, ColumnComparison } from '../../PredefinedConfig/FormatColumnState';
+import { CellColorRange, ColumnComparison, NumericStyledColumn } from '../../PredefinedConfig/StyledColumnState';
 import { AdaptableScope } from '../../PredefinedConfig/Common/AdaptableScope';
 export interface RangesComponentProps extends React.ClassAttributes<RangesComponent> {
     ranges: CellColorRange[];
     columnComparison?: ColumnComparison;
+    rangeValueType: NumericStyledColumn['RangeValueType'];
+    onRangeValueTypeChange: (rangeValueType: NumericStyledColumn['RangeValueType']) => void;
     scope: AdaptableScope;
     api: AdaptableApi;
     showRangeDirection: boolean;
     updateRanges: (ranges: CellColorRange[]) => void;
     updateColumnComparison: (columnComparison?: ColumnComparison) => void;
+    minMaxRangeValues: {
+        min: number;
+        max: number;
+    };
+    disabled?: boolean;
 }
 export interface RangesComponentState {
-    ranges: CellColorRange[];
-    columnComparison: ColumnComparison;
     rangesType: 'Standard' | 'ColumnComparison';
 }
 export declare class RangesComponent extends React.Component<RangesComponentProps, RangesComponentState> {
     constructor(props: RangesComponentProps);
     render(): JSX.Element;
     private onRangesTypeChanged;
+    private handleRangeValueTypeChange;
     changeRangeMin(index: number, value: string): void;
     changeRangeMax(index: number, value: string): void;
     changeRangeColor(index: number, value: string): void;
     changeRangeDirectionUp(index: number, checked: boolean): void;
     removeRange(index: number): void;
+    setRangeColMin(range: CellColorRange): void;
+    setRangeColMax(range: CellColorRange): void;
     addRange(): void;
     changeColumnComparisonMinValue(event: React.FormEvent<any>): void;
     private onMinColumnSelectedChanged;