@adaptabletools/adaptable-cjs 23.0.0-canary.7 → 23.0.0-canary.8

package/src/View/Alert/Wizard/AlertButtonsEditor.js

@@ -14,7 +14,10 @@ const AdaptableIconSelector_1 = require("../../Components/AdaptableIconSelector"
 const Flex_1 = require("../../../components/Flex");
 const sentenceCase_1 = tslib_1.__importDefault(require("../../../Utilities/utils/sentenceCase"));
 const NewSelect_1 = require("../../../components/NewSelect");
-const Card_1 = require("../../../components/Card");
+const Tag_1 = require("../../../components/Tag");
+const CollapsibleWizardCard_1 = require("../../Wizard/CollapsibleWizardCard");
+const utils_1 = require("../../../lib/utils");
+const alertButtonCardId = (index) => `alert-button-${index}`;
 const TONE_OPTIONS = [
     {
         label: 'Tone: Use Alert Tone',
@@ -38,6 +41,125 @@ const AlertButtonPreview = ({ button, messageType }) => {
 function renderTone(option) {
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: "twa:mr-2 twa:w-[10px] twa:h-[10px] twa:line-height-0 twa:rounded-[100%] twa:bg-current", tone: option.value, variant: "text" }), option.label] }));
 }
+const getButtonCommands = (button) => {
+    if (button.Command && typeof button.Command === 'string') {
+        return [button.Command];
+    }
+    if (button.Command && Array.isArray(button.Command)) {
+        return button.Command;
+    }
+    return [];
+};
+const AlertButtonActionTags = ({ button }) => {
+    const commands = getButtonCommands(button);
+    if (!commands.length) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: commands.map((command) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:shrink-0", children: (0, sentenceCase_1.default)(command) }, command))) }));
+};
+const AlertButtonCardSummary = ({ button }) => {
+    const commands = getButtonCommands(button);
+    if (!commands.length) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No actions" });
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", className: "twa:gap-1", children: (0, jsx_runtime_1.jsx)(AlertButtonActionTags, { button: button }) }));
+};
+const AlertButtonCompactSummary = ({ button }) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden twa:flex-wrap", children: [(0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:shrink-0", children: button.Label || 'Untitled' }), (0, jsx_runtime_1.jsx)(AlertButtonActionTags, { button: button })] }));
+const AlertButtonEditorForm = ({ button, index, alertButtons, buttonCommands, onChange, }) => {
+    const buttonStyle = button.ButtonStyle;
+    const buttonLabel = button.Label;
+    const btnCommands = getButtonCommands(button);
+    const btnUserFunctions = btnCommands.filter((command) => !buttonCommands.includes(command));
+    const setVariant = (variant) => {
+        onChange(alertButtons.map((btn, i) => {
+            if (i === index) {
+                const nextButtonStyle = { ...btn.ButtonStyle };
+                nextButtonStyle.variant = variant;
+                return {
+                    ...btn,
+                    ButtonStyle: nextButtonStyle,
+                };
+            }
+            return btn;
+        }));
+    };
+    const setTone = (tone) => {
+        onChange(alertButtons.map((btn, i) => {
+            if (i === index) {
+                const nextButtonStyle = { ...btn.ButtonStyle };
+                if (tone == null) {
+                    delete nextButtonStyle.tone;
+                }
+                else {
+                    nextButtonStyle.tone = tone;
+                }
+                return {
+                    ...btn,
+                    ButtonStyle: nextButtonStyle,
+                };
+            }
+            return btn;
+        }));
+    };
+    const handleCommandChange = (checked, commandName) => {
+        let commands = btnCommands;
+        if (!checked) {
+            commands = commands.filter((a) => a !== commandName);
+        }
+        else {
+            commands = [...commands, commandName];
+        }
+        onChange(alertButtons.map((btn, i) => {
+            if (i === index) {
+                return {
+                    ...btn,
+                    Command: commands.length ? commands : undefined,
+                };
+            }
+            return btn;
+        }));
+    };
+    let iconSelector = null;
+    if (!button.icon || (button.icon && 'name' in button.icon)) {
+        iconSelector = ((0, jsx_runtime_1.jsx)(AdaptableIconSelector_1.AdaptableIconSelector, { value: button.icon && 'name' in button.icon ? button?.icon?.name : '', onChange: (iconName) => {
+                onChange(alertButtons.map((btn) => {
+                    if (btn === button) {
+                        return {
+                            ...btn,
+                            icon: {
+                                name: iconName,
+                            },
+                        };
+                    }
+                    return btn;
+                }));
+            } }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "Button Text" }), children: (0, jsx_runtime_1.jsx)(Input_1.default, { value: buttonLabel, className: "twa:max-w-[200px]", onChange: (e) => {
+                        onChange(alertButtons.map((btn, i) => {
+                            if (i === index) {
+                                return { ...btn, Label: e.target.value };
+                            }
+                            return btn;
+                        }));
+                    } }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "Style" }), children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: "twa:gap-2 twa:flex-wrap", children: [(0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { items: ['text', 'outlined', 'raised'].map((variant) => {
+                                return {
+                                    label: StringExtensions_1.default.CapitaliseFirstLetter(variant),
+                                    value: variant,
+                                };
+                            }), renderValue: (option) => `Variant: ${option.label}`, value: buttonStyle?.variant, onValueChange: (value) => {
+                                setVariant(value);
+                            } }), (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { items: TONE_OPTIONS, onValueChange: (value) => {
+                                if (value === 'text') {
+                                    setTone(null);
+                                    return;
+                                }
+                                setTone(value);
+                            }, value: buttonStyle?.tone ?? 'text' })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "Actions" }), children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: "twa:gap-3 twa:flex-wrap", children: [buttonCommands.map((commandName) => {
+                            return ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { onChange: (checked) => handleCommandChange(checked, commandName), checked: button.Command === commandName ||
+                                    (Array.isArray(button.Command) && button.Command.includes(commandName)), children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: (0, sentenceCase_1.default)(commandName) }) }, commandName));
+                        }), btnUserFunctions.length ? ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: true, disabled: true, children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2", children: ["User function", btnUserFunctions.length > 1 ? 's' : '', ": ", btnUserFunctions.join(', ')] }) })) : null] }) }), iconSelector && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "Icon" }), children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: iconSelector }) }))] }));
+};
 const AlertButtonsEditor = (props) => {
     const { api, adaptableAlert } = props;
     const onChange = (newButtons) => {
@@ -45,22 +167,14 @@ const AlertButtonsEditor = (props) => {
     };
     const alertDefinition = adaptableAlert.alertDefinition;
     const messageType = alertDefinition?.MessageType ?? 'Info';
-    // const rowAddedAlert =
-    //  api.alertApi.internalApi.isAlertDefinitionForAddedRowChangeEvent(alertDefinition);
     const isRowRemovedAlert = api.alertApi.internalApi.isAlertDefinitionForRemovedRowChangeEvent(alertDefinition);
-    // except row change
     const hasHighlightCell = props.alertType !== 'RowChange';
-    // all, except row removed
     const hasHighlightRow = !isRowRemovedAlert;
-    // except row removed
     const hasJumpToCell = props.alertType !== 'RowChange';
-    // all
     const hasJumpToRow = !isRowRemovedAlert;
-    // all
     const hasSuspend = true;
-    // only data change
     const hasUndo = props.alertType === 'DataChange';
-    const AlertButtons = (0, Helper_1.cloneObject)(props.AlertButtons || []) || [];
+    const alertButtons = (0, Helper_1.cloneObject)(props.AlertButtons || []) || [];
     const buttonCommands = [];
     if (hasHighlightRow) {
         buttonCommands.push('highlight-row');
@@ -86,121 +200,40 @@ const AlertButtonsEditor = (props) => {
             buttonCommands.push(ch.name);
         });
     }
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:max-w-[520px]", children: "Add buttons to the notification and set actions to perform when clicked" }), (0, jsx_runtime_1.jsx)(ButtonNew_1.ButtonNew, { onClick: () => {
-                            onChange([
-                                ...(AlertButtons || []),
-                                {
-                                    Label: 'OK',
-                                    ButtonStyle: {
-                                        variant: 'raised',
-                                    },
-                                },
-                            ]);
-                        }, children: "Add" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3", children: AlertButtons.map((button, index) => {
-                    let buttonStyle = button.ButtonStyle;
-                    let buttonLabel = button.Label;
-                    let btnCommands = [];
-                    if (button.Command && typeof button.Command === 'string') {
-                        btnCommands = [button.Command];
-                    }
-                    else if (button.Command && Array.isArray(button.Command)) {
-                        btnCommands = button.Command;
-                    }
-                    // filter out the adaptable standard commands
-                    const btnUserFunctions = btnCommands.filter((command) => !buttonCommands.includes(command));
-                    const setVariant = (variant) => {
-                        onChange(AlertButtons.map((btn, i) => {
-                            if (i === index) {
-                                const buttonStyle = { ...btn.ButtonStyle };
-                                buttonStyle.variant = variant;
-                                return {
-                                    ...btn,
-                                    ButtonStyle: buttonStyle,
-                                };
-                            }
-                            return btn;
-                        }));
-                    };
-                    const setTone = (tone) => {
-                        onChange(AlertButtons.map((btn, i) => {
-                            if (i === index) {
-                                const buttonStyle = { ...btn.ButtonStyle };
-                                if (tone == null) {
-                                    delete buttonStyle.tone;
-                                }
-                                else {
-                                    buttonStyle.tone = tone;
-                                }
-                                return {
-                                    ...btn,
-                                    ButtonStyle: buttonStyle,
-                                };
-                            }
-                            return btn;
-                        }));
-                    };
-                    const handleCommandChange = (checked, commandName) => {
-                        let commands = btnCommands;
-                        if (!checked) {
-                            // remove current Command
-                            commands = commands.filter((a) => a !== commandName);
-                        }
-                        else {
-                            commands = [...commands, commandName];
-                        }
-                        onChange(AlertButtons.map((btn, i) => {
-                            if (i === index) {
-                                return {
-                                    ...btn,
-                                    Command: commands.length ? commands : undefined,
-                                };
-                            }
-                            return btn;
-                        }));
-                    };
-                    let iconSelector = null;
-                    if (!button.icon || (button.icon && 'name' in button.icon)) {
-                        iconSelector = ((0, jsx_runtime_1.jsx)(AdaptableIconSelector_1.AdaptableIconSelector, { value: button.icon && 'name' in button.icon ? button?.icon?.name : '', onChange: (iconName) => {
-                                onChange(AlertButtons.map((btn) => {
-                                    if (btn === button) {
-                                        return {
-                                            ...btn,
-                                            icon: {
-                                                name: iconName,
-                                            },
-                                        };
-                                    }
-                                    return btn;
-                                }));
-                            } }));
-                    }
-                    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { className: "twa:justify-between twa:gap-3", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:font-medium twa:shrink-0", children: ["Button ", index + 1] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { justifyContent: "center", className: "twa:flex-1 twa:min-w-0", children: (0, jsx_runtime_1.jsx)(AlertButtonPreview, { button: button, messageType: messageType }) }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "close", tone: "error", disabled: AlertButtons.length <= 1, variant: "text", tooltip: AlertButtons.length <= 1 ? 'Cannot remove last button' : 'Remove button', onClick: () => {
-                                            onChange(AlertButtons.filter((btn) => btn !== button));
-                                        } })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "Button Text" }), children: (0, jsx_runtime_1.jsx)(Input_1.default, { value: buttonLabel, className: "twa:max-w-[200px]", onChange: (e) => {
-                                                    onChange(AlertButtons.map((btn, i) => {
-                                                        if (i === index) {
-                                                            return { ...btn, Label: e.target.value };
-                                                        }
-                                                        return btn;
-                                                    }));
-                                                } }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "Style" }), children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: "twa:gap-2 twa:flex-wrap", children: [(0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { items: ['text', 'outlined', 'raised'].map((variant) => {
-                                                            return {
-                                                                label: StringExtensions_1.default.CapitaliseFirstLetter(variant),
-                                                                value: variant,
-                                                            };
-                                                        }), renderValue: (option) => `Variant: ${option.label}`, value: buttonStyle?.variant, onValueChange: (value) => {
-                                                            setVariant(value);
-                                                        } }), (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { items: TONE_OPTIONS, onValueChange: (value) => {
-                                                            if (value === 'text') {
-                                                                setTone(null);
-                                                                return;
-                                                            }
-                                                            setTone(value);
-                                                        }, value: buttonStyle?.tone ?? 'text' })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "Actions" }), children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: "twa:gap-3 twa:flex-wrap", children: [buttonCommands.map((commandName) => {
-                                                        return ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { onChange: (checked) => handleCommandChange(checked, commandName), checked: button.Command === commandName ||
-                                                                (Array.isArray(button.Command) &&
-                                                                    button.Command.includes(commandName)), children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: (0, sentenceCase_1.default)(commandName) }) }, commandName));
-                                                    }), btnUserFunctions.length ? ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: true, disabled: true, children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2", children: ["User function", btnUserFunctions.length > 1 ? 's' : '', ":", ' ', btnUserFunctions.join(', ')] }) })) : null] }) }), iconSelector && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "Icon" }), children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: iconSelector }) }))] }) })] }, index));
+    const { bindCard, hasExpandedCard, expandedFillsSpace, expandedId, setExpandedId } = (0, CollapsibleWizardCard_1.useWizardCardAccordion)(null);
+    const handleAddButton = () => {
+        const newIndex = alertButtons.length;
+        onChange([
+            ...(alertButtons || []),
+            {
+                Label: 'OK',
+                ButtonStyle: {
+                    variant: 'raised',
+                },
+            },
+        ]);
+        setExpandedId(alertButtonCardId(newIndex));
+    };
+    const handleDeleteButton = (index) => {
+        if (alertButtons.length <= 1) {
+            return;
+        }
+        const cardId = alertButtonCardId(index);
+        onChange(alertButtons.filter((_, i) => i !== index));
+        if (expandedId === cardId) {
+            setExpandedId(null);
+            return;
+        }
+        if (expandedId?.startsWith('alert-button-')) {
+            const expandedIndex = Number(expandedId.replace('alert-button-', ''));
+            if (!Number.isNaN(expandedIndex) && expandedIndex > index) {
+                setExpandedId(alertButtonCardId(expandedIndex - 1));
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)((0, CollapsibleWizardCard_1.getWizardAccordionSectionClassName)(hasExpandedCard, expandedFillsSpace), 'twa:mt-3'), children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", className: "twa:mb-2 twa:shrink-0", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:max-w-[520px]", children: "Add buttons to the notification and set actions to perform when clicked" }), (0, jsx_runtime_1.jsx)(ButtonNew_1.ButtonNew, { onClick: handleAddButton, children: "Add" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:min-h-0", children: alertButtons.map((button, index) => {
+                    const cardBinding = bindCard(alertButtonCardId(index));
+                    return ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...cardBinding, surface: "panel", "data-name": `alert-button-${index}`, title: `Button ${index + 1}`, help: "Set button text, style, icon, and actions", collapsedHelp: false, compactSummary: (0, jsx_runtime_1.jsx)(AlertButtonCompactSummary, { button: button }), headerVisual: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", justifyContent: "space-end", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden twa:flex-wrap", children: [(0, jsx_runtime_1.jsx)(AlertButtonPreview, { button: button, messageType: messageType }), cardBinding.compact ? (0, jsx_runtime_1.jsx)(AlertButtonActionTags, { button: button }) : null] }), headerActions: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "delete", disabled: alertButtons.length <= 1, variant: "text", tooltip: alertButtons.length <= 1 ? 'Cannot remove last button' : 'Delete button', onClick: () => handleDeleteButton(index) }), summary: (0, jsx_runtime_1.jsx)(AlertButtonCardSummary, { button: button }), bodyClassName: "twa:!pt-0", children: (0, jsx_runtime_1.jsx)(AlertButtonEditorForm, { button: button, index: index, alertButtons: alertButtons, buttonCommands: buttonCommands, onChange: onChange }) }, alertButtonCardId(index)));
                 }) })] }));
 };
 exports.AlertButtonsEditor = AlertButtonsEditor;

package/src/View/Alert/Wizard/AlertNotificationWizardSection.js

@@ -139,6 +139,6 @@ const AlertNotificationWizardSection = (props) => {
                                             } }));
                                     })()
                                     : null] })] }) }), data.AlertProperties?.DisplayNotification ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "alert-preview", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Alert Preview" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Preview how the notification will appear when triggered" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: !isScheduled &&
-                                typeof data.AlertForm === 'string' ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "Preview not available because form is dynamically driven" })) : ((0, jsx_runtime_1.jsx)(exports.AlertPreview, { alertDefinition: data, api: api })) })] }) })) : null] }));
+                                typeof data.AlertForm === 'string' ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "Preview not available because form is dynamically driven" })) : ((0, jsx_runtime_1.jsx)(exports.AlertPreview, { alertDefinition: data, api: api, focusFirstButton: false })) })] }) })) : null] }));
 };
 exports.AlertNotificationWizardSection = AlertNotificationWizardSection;

package/src/View/Alert/Wizard/AlertWizard.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertWizard = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Helper_1 = require("../../../Utilities/Helpers/Helper");
@@ -81,7 +82,14 @@ const AlertWizard = (props) => {
         setAlertType(newAlertType);
         doSetAlertDefinition((0, getDefaultAlertDefinition_1.getDefaultAlertDefinition)(alertDefinition, newAlertType));
     };
-    return ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, modal: props.modal, data: alertDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    const defaultEditSectionName = React.useMemo(() => {
+        if (props.defaultCurrentSectionName || !props.data) {
+            return props.defaultCurrentSectionName;
+        }
+        const type = (0, getAlertType_1.getAlertType)(props.data);
+        return type === getAlertType_1.AlertType.Scheduled ? 'Schedule' : 'Rule';
+    }, [props.defaultCurrentSectionName, props.data]);
+    return ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: defaultEditSectionName, moduleInfo: props.moduleInfo, modal: props.modal, data: alertDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Name & Type',
                 isValid: AlertTypeWizardSection_1.isSettingsValid,

package/src/View/Components/AdaptableObjectList/AdaptableObjectCompactList.js

@@ -9,6 +9,7 @@ const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/Simp
 const AdaptableContext_1 = require("../../AdaptableContext");
 const Flex_1 = require("../../../components/Flex");
 const Tag_1 = require("../../../components/Tag/Tag");
+const objectListActionButtonStyles_1 = require("./objectListActionButtonStyles");
 const baseClassName = 'ab-Adaptable-Object-Compact-List';
 const ICON_SIZE = 20;
 const AdaptableObjectCompactListItem = (props) => {
@@ -45,7 +46,7 @@ const AdaptableObjectCompactListItem = (props) => {
                         ? React.createElement(objectView.item.view, {
                             data: props.abObject,
                         })
-                        : objectView.item.view, Boolean(objectView.item?.values && objectView.item?.values?.length) && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${baseClassName}__Item__Values`, children: (0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: objectView.item.values, variant: objectView.item.tagVariant }) }))] }), suspendAction && unSuspendAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onMouseDown: handleSuspendUnSuspend, tone: isSuspended ? 'neutral' : 'success', variant: "text", icon: isSuspended ? 'resume' : 'pause' })), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:ml-1 twa:flex-[0_0_auto]", children: deleteAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel })) })] }));
+                        : objectView.item.view, Boolean(objectView.item?.values && objectView.item?.values?.length) && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${baseClassName}__Item__Values`, children: (0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: objectView.item.values, variant: objectView.item.tagVariant }) }))] }), suspendAction && unSuspendAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onMouseDown: handleSuspendUnSuspend, tone: "neutral", variant: "text", iconSize: ICON_SIZE, icon: isSuspended ? 'resume' : 'pause', tooltip: isSuspended ? 'Resume' : 'Suspend', className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('suspend', isSuspended ? 'twa:opacity-60' : undefined) })), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:ml-1 twa:flex-[0_0_auto] twa:gap-1", children: deleteAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel, className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('delete') })) })] }));
 };
 exports.AdaptableObjectCompactListItem = AdaptableObjectCompactListItem;
 const AdaptableObjectCompactList = (props) => {
@@ -69,7 +70,7 @@ const AdaptableObjectCompactList = (props) => {
             dispatch(unSuspendAllAction);
         }
     }, [isAtLeastOneAbObjectActive]);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: baseClassName, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${baseClassName}__Header twa:text-3`, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: `${baseClassName}__Title`, alignItems: 'center', children: props.module.moduleInfo.FriendlyName }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), suspendAllAction && unSuspendAllAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: "twa:mr-2", onMouseDown: handleSuspendUnsuspendAll, tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: accessLevel, children: isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All' })), deleteAllAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onMouseDown: () => dispatch(deleteAllAction), variant: "raised", tone: "neutral", accessLevel: accessLevel, children: "Clear All" }))] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${baseClassName}__Body`, children: props.abObjects.map((abObject) => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: baseClassName, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${baseClassName}__Header twa:text-3`, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: `${baseClassName}__Title`, alignItems: 'center', children: props.module.moduleInfo.FriendlyName }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), suspendAllAction && unSuspendAllAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: "twa:mr-2", onMouseDown: handleSuspendUnsuspendAll, tone: "neutral", variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: accessLevel, children: isAtLeastOneAbObjectActive ? 'Suspend All' : 'Resume All' })), deleteAllAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onMouseDown: () => dispatch(deleteAllAction), variant: "raised", tone: "neutral", accessLevel: accessLevel, children: "Clear All" }))] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${baseClassName}__Body`, children: props.abObjects.map((abObject) => {
                     return ((0, jsx_runtime_1.jsx)(exports.AdaptableObjectCompactListItem, { abObject: abObject, module: props.module }, abObject.Uuid));
                 }) })] }));
 };

package/src/View/Components/AdaptableObjectList/AdaptableObjectList.js

@@ -17,6 +17,7 @@ const SuspendToggleButton_1 = require("../Buttons/SuspendToggleButton/SuspendTog
 const Flex_1 = require("../../../components/Flex");
 const twMerge_1 = require("../../../twMerge");
 const Tag_1 = require("../../../components/Tag/Tag");
+const objectListActionButtonStyles_1 = require("./objectListActionButtonStyles");
 const ICON_SIZE = 26;
 const LIST_BASE_CLASS_NAME = 'ab-Adaptable-Object-List';
 const ITEM_BASE_CLASS_NAME = `${LIST_BASE_CLASS_NAME}__Item`;
@@ -39,7 +40,7 @@ const AdaptableObjectListItemView = (props) => {
             dispatch(props.deleteAction);
         };
     }
-    const deleteActionButton = (0, jsx_runtime_1.jsx)(ButtonDelete_1.ButtonDelete, { ...deleteActionProps });
+    const deleteActionButton = ((0, jsx_runtime_1.jsx)(ButtonDelete_1.ButtonDelete, { ...deleteActionProps, className: (0, twMerge_1.twMerge)((0, objectListActionButtonStyles_1.objectListActionButtonClassName)('delete'), deleteActionProps.className) }));
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { "data-name": "adaptable-object-list-item", "data-value": props.abObject.Uuid, as: "li", className: (0, twMerge_1.twMerge)(baseClassName, 'twa:rounded-standard', props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `twa:flex-1 ${baseClassName}__rows twa:gap-2 twa:flex twa:flex-col`, children: props.items.filter?.(Boolean)?.map((tag, index) => {
                     const labelElement = typeof tag.label === 'function'
                         ? React.createElement(tag.label, { key: index, data: props.abObject })
@@ -57,7 +58,7 @@ const AdaptableObjectListItemView = (props) => {
                                             module: props.module,
                                         })
                                         : tag.viewAfter] })] }, `${index}-${tag.name}`));
-                }) }), props.showActions && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: `${baseClassName}__buttons twa:ml-3 twa:pl-3 twa:text-right twa:min-w-[80px]`, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:justify-end", children: [props.actions, props.teamSharingActivated && ((0, jsx_runtime_1.jsx)(ButtonShare_1.ButtonShare, { iconSize: ICON_SIZE, Header: `TeamSharing ${props.entityType}`, accessLevel: props.accessLevel, onShare: props.onShare })), props.onDelete && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "delete", disabled: props.deleteDisabled, iconSize: ICON_SIZE, tooltip: props.deleteTooltip, icon: "delete", onClick: props.onDelete, variant: "text" })), props.deleteAction ? deleteActionButton : null, props.showEditButton && ((0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { iconSize: ICON_SIZE, disabled: props.editDisabled, accessLevel: props.accessLevel, onClick: () => props.handleOnEdit() }))] }), props.suspendedEnabled && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-[20px]" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:justify-end", children: (0, jsx_runtime_1.jsx)(SuspendToggleButton_1.SuspendToggleButton, { onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend, suspendableObject: props.abObject, accessLevel: props.accessLevel }) })] }))] }))] }));
+                }) }), props.showActions && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: `${baseClassName}__buttons twa:ml-3 twa:pl-3 twa:text-right twa:min-w-[80px]`, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:justify-end twa:items-center twa:gap-1", children: [props.actions, props.teamSharingActivated && ((0, jsx_runtime_1.jsx)(ButtonShare_1.ButtonShare, { iconSize: ICON_SIZE, Header: `TeamSharing ${props.entityType}`, accessLevel: props.accessLevel, onShare: props.onShare, className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('share') })), props.showEditButton && ((0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { iconSize: ICON_SIZE, disabled: props.editDisabled, accessLevel: props.accessLevel, className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('edit'), onClick: () => props.handleOnEdit() })), props.suspendedEnabled && ((0, jsx_runtime_1.jsx)(SuspendToggleButton_1.SuspendToggleButton, { iconSize: ICON_SIZE, className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('suspend'), onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend, suspendableObject: props.abObject, accessLevel: props.accessLevel })), props.onDelete && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "delete", disabled: props.deleteDisabled, iconSize: ICON_SIZE, tooltip: props.deleteTooltip, icon: "delete", onClick: props.onDelete, variant: "text", className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('delete') })), props.deleteAction ? deleteActionButton : null] }) }))] }));
 };
 exports.AdaptableObjectListItemView = AdaptableObjectListItemView;
 const AdaptableObjectListItem = (props) => {

package/src/View/Components/AdaptableObjectList/objectListActionButtonStyles.d.ts

@@ -0,0 +1,2 @@
+export type ObjectListActionKind = 'edit' | 'suspend' | 'delete' | 'share';
+export declare const objectListActionButtonClassName: (kind: ObjectListActionKind, className?: string) => string;

package/src/View/Components/AdaptableObjectList/objectListActionButtonStyles.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.objectListActionButtonClassName = void 0;
+const utils_1 = require("../../../lib/utils");
+const objectListActionButtonClassName = (kind, className) => (0, utils_1.cn)('ab-ObjectListActionButton', `ab-ObjectListActionButton--${kind}`, className);
+exports.objectListActionButtonClassName = objectListActionButtonClassName;

package/src/View/Components/Buttons/EntityListActionButtons.js

@@ -41,7 +41,7 @@ class EntityListActionButtons extends React.Component {
             'twa:justify-center': justifyContent === 'center',
             'twa:justify-end': justifyContent === 'end',
         }) || 'twa:justify-center';
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${justifyContentClassName} twa:m-0 twa:p-0`, onClick: stopPropagation, children: [this.props.showEdit && ((0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { onClick: () => (this.props.editClick ? this.props.editClick() : null), className: `twa:ml-0 twa:mr-[2px] twa:my-[2px] twa:text-action-edit-foreground twa:bg-action-edit twa:fill-action-edit-foreground`, disabled: this.props.overrideDisableEdit || this.props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipEdit, accessLevel: this.props.accessLevel })), this.props.showClone && ((0, jsx_runtime_1.jsx)(ButtonClone_1.ButtonClone, { onClick: () => (this.props.cloneClick ? this.props.cloneClick() : null), className: `twa:ml-0 twa:mr-[2px] twa:my-[2px] twa:text-action-clone-foreground twa:bg-action-clone twa:fill-action-clone-foreground`, children: null, disabled: this.props.overrideDisableClone || this.props.cloneAccessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipClone, accessLevel: this.props.cloneAccessLevel })), this.props.showDelete && ((0, jsx_runtime_1.jsx)(ButtonDelete_1.ButtonDelete, { "data-name": "delete", className: `twa:mx-[px] twa:my-[2px] twa:text-action-delete-foreground twa:bg-action-delete twa:fill-action-delete-foreground`, disabled: this.props.overrideDisableDelete || this.props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipDelete, ConfirmAction: this.props.confirmDeleteAction, ConfirmationMsg: 'Are you sure you want to delete this ' + this.props.entityType + '?', ConfirmationTitle: 'Delete ' + this.props.entityType, accessLevel: this.props.accessLevel })), this.props.showShare && ((0, jsx_runtime_1.jsx)(ButtonShare_1.ButtonShare, { className: `twa:mx-[1px] twa:my-[2px] twa:text-action-share-foreground twa:bg-action-share twa:fill-action-share-foreground`, onShare: (config) => this.props.shareClick ? this.props.shareClick(config) : null, Header: `TeamSharing ${this.props.entityType}`, disabled: this.props.overrideDisableShare || this.props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipShare, accessLevel: this.props.accessLevel })), this.props.showSuspend && this.props.suspendableObject && ((0, jsx_runtime_1.jsx)(SuspendToggleButton_1.SuspendToggleButton, { className: `twa:ml-[2px] twa:align-self-center`, onSuspend: this.props.onSuspend, onUnSuspend: this.props.onUnSuspend, suspendableObject: this.props.suspendableObject, disabled: this.props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY }))] }));
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${justifyContentClassName} twa:m-0 twa:p-0`, onClick: stopPropagation, children: [this.props.showEdit && ((0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { onClick: () => (this.props.editClick ? this.props.editClick() : null), className: `twa:ml-0 twa:mr-[2px] twa:my-[2px] twa:text-action-edit-foreground twa:bg-action-edit twa:fill-action-edit-foreground`, disabled: this.props.overrideDisableEdit || this.props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipEdit, accessLevel: this.props.accessLevel })), this.props.showClone && ((0, jsx_runtime_1.jsx)(ButtonClone_1.ButtonClone, { onClick: () => (this.props.cloneClick ? this.props.cloneClick() : null), className: `twa:ml-0 twa:mr-[2px] twa:my-[2px] twa:text-action-clone-foreground twa:bg-action-clone twa:fill-action-clone-foreground`, children: null, disabled: this.props.overrideDisableClone || this.props.cloneAccessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipClone, accessLevel: this.props.cloneAccessLevel })), this.props.showDelete && ((0, jsx_runtime_1.jsx)(ButtonDelete_1.ButtonDelete, { "data-name": "delete", className: `twa:mx-[px] twa:my-[2px] twa:text-action-delete-foreground twa:bg-action-delete twa:fill-action-delete-foreground`, disabled: this.props.overrideDisableDelete || this.props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipDelete, ConfirmAction: this.props.confirmDeleteAction, ConfirmationMsg: 'Are you sure you want to delete this ' + this.props.entityType + '?', ConfirmationTitle: 'Delete ' + this.props.entityType, accessLevel: this.props.accessLevel })), this.props.showShare && ((0, jsx_runtime_1.jsx)(ButtonShare_1.ButtonShare, { className: `twa:mx-[1px] twa:my-[2px] twa:text-action-share-foreground twa:bg-action-share twa:fill-action-share-foreground`, onShare: (config) => this.props.shareClick ? this.props.shareClick(config) : null, Header: `TeamSharing ${this.props.entityType}`, disabled: this.props.overrideDisableShare || this.props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipShare, accessLevel: this.props.accessLevel })), this.props.showSuspend && this.props.suspendableObject && ((0, jsx_runtime_1.jsx)(SuspendToggleButton_1.SuspendToggleButton, { className: "twa:align-self-center", iconSize: 24, onSuspend: this.props.onSuspend, onUnSuspend: this.props.onUnSuspend, suspendableObject: this.props.suspendableObject, disabled: this.props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY }))] }));
     }
 }
 exports.EntityListActionButtons = EntityListActionButtons;

package/src/View/Components/Buttons/SuspendToggleButton/SuspendToggleButton.d.ts

@@ -9,6 +9,7 @@ interface EntityListSuspendButtonProps {
     disabled?: boolean;
     accessLevel?: AccessLevel;
     className?: string;
+    iconSize?: number;
 }
 export declare const SuspendToggleButton: React.FunctionComponent<EntityListSuspendButtonProps>;
 export {};

package/src/View/Components/Buttons/SuspendToggleButton/SuspendToggleButton.js

@@ -4,19 +4,19 @@ exports.SuspendToggleButton = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const ToggleButton_1 = require("../../../../components/ToggleButton");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
 const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
 const utils_1 = require("../../../../lib/utils");
-exports.SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend, onSuspend, style, disabled, accessLevel, className }) => {
-    const handleOnChange = React.useCallback((checked) => {
-        if (checked) {
+exports.SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend, onSuspend, style, disabled, accessLevel, className, iconSize = 26, }) => {
+    const preparedDisabled = (accessLevel && accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY) || disabled;
+    const isSuspended = suspendableObject.IsSuspended;
+    const handleClick = React.useCallback(() => {
+        if (isSuspended) {
             onUnSuspend(suspendableObject);
         }
         else {
             onSuspend(suspendableObject);
         }
-    }, [onUnSuspend, onSuspend]);
-    const preparedDisabled = (accessLevel && accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY) || disabled;
-    const isSuspended = suspendableObject.IsSuspended;
-    return ((0, jsx_runtime_1.jsx)(ToggleButton_1.ToggleButton, { className: (0, utils_1.cn)(`ab-SuspendButton`, className), "data-name": suspendableObject.IsSuspended ? 'un-suspend' : 'suspend', disabled: preparedDisabled, style: style, onChange: handleOnChange, checked: !isSuspended, children: isSuspended ? 'inactive' : 'active' }));
+    }, [isSuspended, onSuspend, onUnSuspend, suspendableObject]);
+    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: (0, utils_1.cn)('ab-SuspendButton', isSuspended && 'twa:opacity-60', className), "data-name": isSuspended ? 'resume' : 'suspend', disabled: preparedDisabled, style: style, variant: "text", tone: "neutral", iconSize: iconSize, icon: isSuspended ? 'resume' : 'pause', tooltip: isSuspended ? 'Resume' : 'Suspend', accessLevel: accessLevel, onClick: handleClick }));
 });

package/src/View/Components/ColumnFilter/ColumnFilter.js

@@ -40,7 +40,14 @@ const ColumnFilterPredicateDropdown = (props) => {
                     operator: value,
                     args: [],
                 });
-            }, items: options, value: isAndOr ? 'Add Condition' : props.predicate?.operator }) }));
+            }, items: options, 
+            // For the "Add Condition" picker the current predicate is the top-level
+            // AND/OR predicate, which is not a selectable item. Use `null` (a proper
+            // controlled empty value) plus a placeholder rather than a fake string
+            // value: passing a non-item value makes base-ui's Select reconcile and
+            // fire a spurious `onValueChange` when the items change (e.g. switching
+            // the filter to another column), which previously crashed.
+            placeholder: "Add Condition", value: isAndOr ? null : props.predicate?.operator }) }));
 };
 const ColumnFilterEditor = (props) => {
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mb-3 twa:overflow-x-hidden twa:p-0.5", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:mb-2", children: [(0, jsx_runtime_1.jsx)(ColumnFilterPredicateDropdown, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate, predicateDefs: props.predicateDefs, onPredicateChange: props.onPredicateChange }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2", children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: props.deleteDisabled, onClick: props.onDelete, variant: "text", icon: "delete" }) })] }), (0, jsx_runtime_1.jsx)(ColumnFilterInputList_1.ColumnFilterInputList, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate, onPredicateChange: props.onPredicateChange, predicateDefs: props.predicateDefs })] }));
@@ -128,6 +135,12 @@ const ColumnFilterComponent = (props) => {
     const isLastPredicateValid = true;
     const filterPredicateDropdown = ((0, jsx_runtime_1.jsx)(ColumnFilterPredicateDropdown, { columnId: props.columnId, disabled: props.disabled, predicate: currentPredicate, predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {
             const predicateDef = props.predicateDefs.find((predicateDef) => predicateDef.operator === predicate.operator);
+            // Guard against the select emitting a value that is not a known
+            // predicate for the current column (e.g. a stale/reconciled value while
+            // switching columns).
+            if (!predicateDef) {
+                return;
+            }
             onNewPredicate(predicateDef);
         }, targetProps: {
             tone: 'neutral',

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

@@ -108,7 +108,7 @@ const AdaptablePopupModuleView = (props) => {
                 dispatch(unsuspendAllAction);
             }
         };
-        suspendButton = ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: "twa:mr-2", onMouseDown: () => handleSuspendUnsuspendAll(), tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: props.accessLevel, children: isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All' }));
+        suspendButton = ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: "twa:mr-2", onMouseDown: () => handleSuspendUnsuspendAll(), tone: "neutral", variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: props.accessLevel, children: isAtLeastOneAbObjectActive ? 'Suspend All' : 'Resume All' }));
     }
     const handleWizardClose = () => {
         setAbObjectType(null);

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../Api/AdaptableApi';
-import { CellColorRange, ColumnComparison, GradientZeroCentredColors, NumericStyledColumn } from '../../AdaptableState/StyledColumnState';
+import { CellColorRange, ColumnComparison, NumericStyledColumn } from '../../AdaptableState/StyledColumns/Common/NumericStyledColumn';
+import { GradientZeroCentredColors } from '../../AdaptableState/StyledColumns/GradientStyle';
 import { ColumnScope } from '../../AdaptableState/Common/ColumnScope';
 export interface RangesComponentProps extends React.ClassAttributes<RangesComponent> {
     ranges: CellColorRange[];

package/src/View/Export/ExportSchedulesTab.js

@@ -9,7 +9,7 @@ const ExportRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/Ex
 const formatScheduledReportSummary_1 = require("../../Strategy/Utilities/Export/formatScheduledReportSummary");
 const AdaptableContext_1 = require("../AdaptableContext");
 const AdaptableObjectList_1 = require("../Components/AdaptableObjectList/AdaptableObjectList");
-const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
+const objectListActionButtonStyles_1 = require("../Components/AdaptableObjectList/objectListActionButtonStyles");
 const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
 const EmptyContent_1 = tslib_1.__importDefault(require("../../components/EmptyContent"));
 const ScheduledReportWizard_1 = require("./Wizard/ScheduledReportWizard");
@@ -53,7 +53,6 @@ const ExportScheduleListItem = (props) => {
                 values: [(0, formatScheduledReportSummary_1.formatScheduledReportSummary)(reportSchedule)],
             },
         ], actions: [
-            (0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { accessLevel: accessLevel, onClick: props.onEdit, tooltip: "Edit Schedule" }, "edit"),
-            (0, jsx_runtime_1.jsx)(ButtonDelete_1.ButtonDelete, { accessLevel: accessLevel, tooltip: "Delete Schedule", ConfirmationTitle: "Delete Schedule", ConfirmationMsg: "Are you sure you want to delete this schedule?", ConfirmAction: ExportRedux.ScheduledReportDelete(reportSchedule) }, "delete"),
-        ], suspendedEnabled: true, onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend }));
+            (0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { accessLevel: accessLevel, onClick: props.onEdit, tooltip: "Edit Schedule", className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('edit') }, "edit"),
+        ], deleteAction: ExportRedux.ScheduledReportDelete(reportSchedule), deleteConfirmationMsg: "Are you sure you want to delete this schedule?", suspendedEnabled: true, onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend }));
 };

package/src/View/Filter/FilterViewPanel.js

@@ -32,7 +32,7 @@ class FilterViewPanelComponent extends React.Component {
                 this.props.api.filterApi.columnFilterApi.unSuspendAllColumnFilters();
             }
         };
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && ((0, jsx_runtime_1.jsx)(AdaptablePopover_1.AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [(0, jsx_runtime_1.jsx)(ActiveFiltersPanel_1.ActiveFiltersPanel, {})], useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })), (0, jsx_runtime_1.jsx)(ButtonClear_1.ButtonClear, { "aria-label": 'Clear Filters', className: `ab-${elementType}__Filter__clear twa:mx-1 twa:mb-0`, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel', children: this.props.viewType === 'ToolPanel' && 'Clear' }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "aria-label": isAtLeastOneFilterActive ? 'Suspend All Filters' : 'Resume All Filters', className: (0, join_1.default)(`ab-${elementType}__Filter__suspend-button`, isAtLeastOneFilterActive && `ab-${elementType}__Filter__suspend-all`, !isAtLeastOneFilterActive && `ab-${elementType}__Filter__un-suspend-all`), disabled: !isAtLeastOneFilter, onClick: handleSuspendUnsuspendAll, tone: isAtLeastOneFilterActive ? 'neutral' : 'success', variant: "text", icon: isAtLeastOneFilterActive ? 'pause' : 'play', accessLevel: this.props.accessLevel })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", children: this.props.api.filterApi.columnFilterApi.isQuickFilterAvailable() && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "quick-filter-toggle", className: `ab-${elementType}__Filter__active-check twa:my-0 twa:text-2 twa:p-1`, disabled: this.props.accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY ||
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && ((0, jsx_runtime_1.jsx)(AdaptablePopover_1.AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [(0, jsx_runtime_1.jsx)(ActiveFiltersPanel_1.ActiveFiltersPanel, {})], useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })), (0, jsx_runtime_1.jsx)(ButtonClear_1.ButtonClear, { "aria-label": 'Clear Filters', className: `ab-${elementType}__Filter__clear twa:mx-1 twa:mb-0`, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel', children: this.props.viewType === 'ToolPanel' && 'Clear' }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "aria-label": isAtLeastOneFilterActive ? 'Suspend All Filters' : 'Resume All Filters', className: (0, join_1.default)(`ab-${elementType}__Filter__suspend-button`, isAtLeastOneFilterActive && `ab-${elementType}__Filter__suspend-all`, !isAtLeastOneFilterActive && `ab-${elementType}__Filter__un-suspend-all`), disabled: !isAtLeastOneFilter, onClick: handleSuspendUnsuspendAll, tone: "neutral", variant: "text", icon: isAtLeastOneFilterActive ? 'pause' : 'resume', accessLevel: this.props.accessLevel })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", children: this.props.api.filterApi.columnFilterApi.isQuickFilterAvailable() && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "quick-filter-toggle", className: `ab-${elementType}__Filter__active-check twa:my-0 twa:text-2 twa:p-1`, disabled: this.props.accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY ||
                             this.props.api.layoutApi.isCurrentLayoutPivot(), checked: this.props.IsQuickFilterVisible, onChange: (checked) => {
                             checked ? this.props.onShowQuickFilterBar() : this.props.onHideQuickFilterBar();
                         }, children: "Filter Bar" })) })] }));