@adaptabletools/adaptable 23.0.0-canary.6 → 23.0.0-canary.7

package/src/Utilities/Defaults/DefaultSettingsPanel.js

@@ -1,42 +1,47 @@
-/**
- * This constant determines the items, and order, which appear in Settings Panel
- */
-export const DEFAULT_SETTINGS_PANEL_NAVIGATION_ITEMS = [
-    'GridInfo',
-    'ColumnInfo',
-    'Dashboard',
-    'ToolPanel',
-    'StatusBar',
-    'Theme',
-    '-',
-    'Layout',
-    'CalculatedColumn',
-    'CustomSort',
-    'Alert',
-    'SystemStatus',
-    '-',
-    'Export',
-    'DataImport',
-    '-',
-    'FormatColumn',
-    'StyledColumn',
-    'FlashingCell',
-    '-',
-    'QuickSearch',
-    'GridFilter',
-    'ColumnFilter',
-    'DataSet',
-    'NamedQuery',
-    '-',
-    'Note',
-    'Comment',
-    'FreeTextColumn',
-    '-',
-    'PlusMinus',
-    'Shortcut',
-    'DataChangeHistory',
-    '-',
-    'Charting',
-    'TeamSharing',
-    'StateManagement',
+export const DEFAULT_SETTINGS_PANEL_NAVIGATION_GROUPS = [
+    {
+        label: 'Grid & UI',
+        items: ['GridInfo', 'ColumnInfo', 'Dashboard', 'ToolPanel', 'StatusBar', 'Theme'],
+    },
+    {
+        label: 'Layout',
+        items: ['Layout', 'CalculatedColumn', 'CustomSort', 'Charting'],
+    },
+    {
+        label: 'Formatting',
+        items: ['FormatColumn', 'StyledColumn', 'FlashingCell'],
+    },
+    {
+        label: 'Filtering & Search',
+        items: ['QuickSearch', 'GridFilter', 'ColumnFilter', 'DataSet', 'NamedQuery'],
+    },
+    {
+        label: 'Notes & Annotations',
+        items: ['Alert', 'Note', 'Comment', 'FreeTextColumn', 'SystemStatus'],
+    },
+    {
+        label: 'Export & Import',
+        items: ['Export', 'DataImport'],
+    },
+    {
+        label: 'ֵEditing',
+        items: ['PlusMinus', 'Shortcut', 'DataChangeHistory'],
+    },
+    {
+        label: 'Administration',
+        items: ['TeamSharing', 'StateManagement'],
+    },
 ];
+export const buildDefaultSettingsPanelNavigation = (customPanelNames = []) => {
+    const groups = DEFAULT_SETTINGS_PANEL_NAVIGATION_GROUPS.map((group) => ({
+        label: group.label,
+        items: [...group.items],
+    }));
+    if (customPanelNames.length) {
+        groups.push({
+            label: 'Custom Panels',
+            items: [...customPanelNames],
+        });
+    }
+    return { groups };
+};

package/src/Utilities/Helpers/FormatHelper.js

@@ -78,6 +78,9 @@ export function NumberFormatter(input, options = {}, rowNode, column, api) {
     if (options.Empty) {
         return ' ';
     }
+    if (n === 0 && options.ZeroDisplay !== undefined && options.ZeroDisplay !== '0') {
+        return options.ZeroDisplay;
+    }
     let s;
     let digitsToUse;
     const fractionsSepatator = options.FractionSeparator ?? '.';

package/src/Utilities/Helpers/ScheduleHelper.js

@@ -187,6 +187,8 @@ export function getScheduleDescription(schedule) {
         }
         case 'monthly':
             return `Monthly on day ${dayOfMonth} ${time}`;
+        case 'custom':
+            return schedule.CronExpression?.trim() || 'Custom Cron';
         default:
             return `${schedule.CronExpression ?? 'Custom'} ${time}`;
     }

package/src/Utilities/Helpers/StyleHelper.d.ts

@@ -48,3 +48,21 @@ export declare const toStyle: (style?: AdaptableStyle) => {
     borderStyle: string;
 };
 export declare const getVariableColor: (variable: string) => string;
+/**
+ * Default surface colour assumed to sit *behind* a semi-transparent cell tint
+ * when computing auto-contrast text. Gradient cells paint a base colour at a
+ * value-driven alpha, so the colour the user actually perceives is that tint
+ * composited over the grid cell background (white in the default light theme).
+ */
+export declare const DEFAULT_CELL_SURFACE_COLOR = "#ffffff";
+/**
+ * Picks a readable text colour (near-black or white) for a cell whose
+ * background is `baseColor` painted at `alpha` over `surfaceColor`.
+ *
+ * The tint must be composited over the surface *before* measuring luminance:
+ * `tinycolor.getLuminance()` ignores the alpha channel, so measuring the raw
+ * base colour would yield the same result for a faint cell and a fully-opaque
+ * one — making auto-contrast text identical on every row instead of adapting
+ * per cell.
+ */
+export declare const getAutoContrastTextColor: (baseColor: string, alpha: number, surfaceColor?: string) => string;

package/src/Utilities/Helpers/StyleHelper.js

@@ -1,3 +1,4 @@
+import tinycolor from 'tinycolor2';
 import { EnumExtensions } from '../Extensions/EnumExtensions';
 /**
  * Keys belonging to the "Font" slice (text rendering + alignment).
@@ -215,3 +216,29 @@ export const getVariableColor = (variable) => {
     }
     return getComputedStyle(document.documentElement).getPropertyValue(match[1]).trim();
 };
+/**
+ * Default surface colour assumed to sit *behind* a semi-transparent cell tint
+ * when computing auto-contrast text. Gradient cells paint a base colour at a
+ * value-driven alpha, so the colour the user actually perceives is that tint
+ * composited over the grid cell background (white in the default light theme).
+ */
+export const DEFAULT_CELL_SURFACE_COLOR = '#ffffff';
+/**
+ * Luminance above which a (composited, opaque) background is considered "light"
+ * enough to need dark text.
+ */
+const AUTO_CONTRAST_LUMINANCE_THRESHOLD = 0.45;
+/**
+ * Picks a readable text colour (near-black or white) for a cell whose
+ * background is `baseColor` painted at `alpha` over `surfaceColor`.
+ *
+ * The tint must be composited over the surface *before* measuring luminance:
+ * `tinycolor.getLuminance()` ignores the alpha channel, so measuring the raw
+ * base colour would yield the same result for a faint cell and a fully-opaque
+ * one — making auto-contrast text identical on every row instead of adapting
+ * per cell.
+ */
+export const getAutoContrastTextColor = (baseColor, alpha, surfaceColor = DEFAULT_CELL_SURFACE_COLOR) => {
+    const composited = tinycolor.mix(surfaceColor, baseColor, alpha * 100);
+    return composited.getLuminance() > AUTO_CONTRAST_LUMINANCE_THRESHOLD ? '#111111' : '#ffffff';
+};

package/src/Utilities/Helpers/StyledColumnGradientHelper.js

@@ -1,6 +1,6 @@
 import tinycolor from 'tinycolor2';
 import { convertAdaptableStyleToCSS } from './StyleHelper';
-import { getVariableColor } from './StyleHelper';
+import { getAutoContrastTextColor, getVariableColor } from './StyleHelper';
 import clamp from '../utils/clamp';
 /**
  * Default alpha at the **low** end of a Gradient range when `MinAlpha` is unset.
@@ -129,10 +129,11 @@ const getZeroCentredGradientPreviewCellStyle = (cellValue, gradientStyle) => {
     }
     const alpha = Number((lo + t * (hi - lo)).toPrecision(4));
     let style = {};
-    const bg = tinycolor(getVariableColor(matchingRange.Color)).setAlpha(alpha);
+    const preparedColor = getVariableColor(matchingRange.Color);
+    const bg = tinycolor(preparedColor).setAlpha(alpha);
     style.backgroundColor = bg.toRgbString();
     if (gradientStyle.AutoContrastText) {
-        style.color = bg.getLuminance() > 0.45 ? '#111111' : '#ffffff';
+        style.color = getAutoContrastTextColor(preparedColor, alpha);
     }
     const autoContrastColor = gradientStyle.AutoContrastText && style.color ? style.color : undefined;
     if (gradientStyle.Font) {
@@ -194,10 +195,11 @@ export const getGradientPreviewCellStyle = (cellValue, styledColumn, api, rowNod
     }
     const alpha = Number((lo + t * (hi - lo)).toPrecision(4));
     if (cellBackColor) {
-        const bg = tinycolor(getVariableColor(cellBackColor)).setAlpha(alpha);
+        const preparedColor = getVariableColor(cellBackColor);
+        const bg = tinycolor(preparedColor).setAlpha(alpha);
         style.backgroundColor = bg.toRgbString();
         if (gradientStyle.AutoContrastText) {
-            style.color = bg.getLuminance() > 0.45 ? '#111111' : '#ffffff';
+            style.color = getAutoContrastTextColor(preparedColor, alpha);
         }
     }
     const autoContrastColor = gradientStyle.AutoContrastText && style.color ? style.color : undefined;

package/src/Utilities/Helpers/resolveSettingsPanelNavigation.d.ts

@@ -0,0 +1,3 @@
+import { AdaptableApi } from '../../Api/AdaptableApi';
+import { SettingsPanelNavigation, SettingsPanelOptions } from '../../AdaptableOptions/SettingsPanelOptions';
+export declare const resolveSettingsPanelNavigation: (api: AdaptableApi, settingsPanelOptions: SettingsPanelOptions) => SettingsPanelNavigation;

package/src/Utilities/Helpers/resolveSettingsPanelNavigation.js

@@ -0,0 +1,15 @@
+import { buildDefaultSettingsPanelNavigation } from '../Defaults/DefaultSettingsPanel';
+const cloneSettingsPanelNavigation = (navigation) => ({
+    groups: navigation.groups.map((group) => ({
+        label: group.label,
+        items: [...group.items],
+    })),
+});
+export const resolveSettingsPanelNavigation = (api, settingsPanelOptions) => {
+    const defaultNavigation = buildDefaultSettingsPanelNavigation(settingsPanelOptions.customSettingsPanels?.map((panel) => panel.name) ?? []);
+    if (!settingsPanelOptions.navigation) {
+        return defaultNavigation;
+    }
+    const context = api.internalApi.buildBaseContext();
+    return settingsPanelOptions.navigation(context, cloneSettingsPanelNavigation(defaultNavigation));
+};

package/src/Utilities/getScopeViewItems.js

@@ -1,4 +1,5 @@
 import StringExtensions from './Extensions/StringExtensions';
+import { getScopeViewItemsTagVariant } from '../components/Tag/columnScopeTagHelpers';
 export const getScopeViewItems = (scope, api) => {
     let values = [];
     if ('ColumnIds' in scope && Array.isArray(scope.ColumnIds)) {
@@ -20,5 +21,6 @@ export const getScopeViewItems = (scope, api) => {
         label: 'Columns',
         name: 'Target',
         values,
+        tagVariant: getScopeViewItemsTagVariant(scope),
     };
 };

package/src/Utilities/wizardSelection.d.ts

@@ -0,0 +1,10 @@
+import type { SimpleButtonProps } from '../components/SimpleButton';
+/** Selected wizard option — Tailwind overrides SimpleButton outlined defaults. */
+export declare const WIZARD_SELECTION_ACTIVE_CLASSES: string;
+/** Unselected wizard option — muted so the active choice reads immediately. */
+export declare const WIZARD_SELECTION_INACTIVE_CLASSES: string;
+export type CollapsibleWizardCardSurface = 'popup' | 'panel';
+export declare const getCollapsibleWizardCardCollapsedClasses: (surface?: CollapsibleWizardCardSurface) => string;
+export declare const getCollapsibleWizardCardExpandedClasses: (surface?: CollapsibleWizardCardSurface) => string;
+export declare const wizardSelectionButtonClassName: (selected: boolean, className?: string) => string;
+export declare const wizardSelectionSimpleButtonProps: (selected: boolean, className?: string) => Pick<SimpleButtonProps, "variant" | "tone" | "className">;

package/src/Utilities/wizardSelection.js

@@ -0,0 +1,15 @@
+import { cn } from '../lib/utils';
+/** Selected wizard option — Tailwind overrides SimpleButton outlined defaults. */
+export const WIZARD_SELECTION_ACTIVE_CLASSES = cn('ab-WizardSelection--active', 'twa:!border-[var(--ab-cmp-wizard-selection__border)]', 'twa:!bg-[var(--ab-cmp-wizard-selection__background)]', 'twa:!text-accent', 'twa:font-medium');
+/** Unselected wizard option — muted so the active choice reads immediately. */
+export const WIZARD_SELECTION_INACTIVE_CLASSES = cn('twa:!border-[color-mix(in_srgb,var(--ab-color-primarydark)_40%,transparent)]', 'twa:!text-[color-mix(in_srgb,var(--ab-color-foreground)_55%,transparent)]');
+export const getCollapsibleWizardCardCollapsedClasses = (surface = 'popup') => cn(surface === 'panel'
+    ? 'twa:border-[var(--ab-cmp-collapsible-wizard-card__collapsed-border)] twa:bg-card'
+    : 'twa:border-[var(--ab-cmp-collapsible-wizard-card__collapsed-border-popup)]');
+export const getCollapsibleWizardCardExpandedClasses = (surface = 'popup') => cn('ab-CollapsibleWizardCard--expanded', 'twa:border-[var(--ab-cmp-collapsible-wizard-card__expanded-border)]', surface === 'panel' && 'twa:bg-card', 'twa:p-0');
+export const wizardSelectionButtonClassName = (selected, className) => cn('ab-WizardSelection', selected ? WIZARD_SELECTION_ACTIVE_CLASSES : WIZARD_SELECTION_INACTIVE_CLASSES, className);
+export const wizardSelectionSimpleButtonProps = (selected, className) => ({
+    variant: 'outlined',
+    tone: 'none',
+    className: wizardSelectionButtonClassName(selected, className),
+});

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/AdaptableOptionsForm.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { CheckBox } from '../../../components/CheckBox';
-import DropdownButton from '../../../components/DropdownButton';
+import { NewDropdownButton } from '../../../components/DropdownButton';
 import HelpBlock from '../../../components/HelpBlock';
 import Input from '../../../components/Input';
 import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
@@ -45,7 +45,7 @@ const OptionInput = (props) => {
             label: StringExtensions.Humanize(str),
             onClick: () => props.onChange({ ...option, value: str }),
         }));
-        input = (_jsx(DropdownButton, { ...inputProps, columns: ['label'], items: options, children: StringExtensions.Humanize(value) }));
+        input = (_jsx(NewDropdownButton, { className: "twa:min-w-[200px] twa:mr-2", items: options, children: StringExtensions.Humanize(value) }));
     }
     else {
         switch (option.kind) {

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsSidebarForm.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckBox } from '../../../../components/CheckBox';
-import DropdownButton from '../../../../components/DropdownButton';
+import { NewDropdownButton } from '../../../../components/DropdownButton';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import HelpBlock from '../../../../components/HelpBlock';
 import StringExtensions from '../../../../Utilities/Extensions/StringExtensions';
@@ -73,7 +73,7 @@ export const UIOptionsSidebarForm = (props) => {
         };
         props.onChange(newGridOptions);
     };
-    return (_jsxs(Box, { children: [_jsx(HelpBlock, { children: "Tool Panels" }), _jsxs(Box, { className: "twa:m-2", children: [_jsx(Flex, { className: "twa:mb-2", children: ALL_SIDEBAR_OPTIONS.map(renderSidebarCheckbox) }), _jsx(FormLayout, { columns: [{ name: 'label' }, { name: 'children' }], children: _jsx(FormRow, { label: "Position", children: _jsx(DropdownButton, { columns: ['label'], items: [
+    return (_jsxs(Box, { children: [_jsx(HelpBlock, { children: "Tool Panels" }), _jsxs(Box, { className: "twa:m-2", children: [_jsx(Flex, { className: "twa:mb-2", children: ALL_SIDEBAR_OPTIONS.map(renderSidebarCheckbox) }), _jsx(FormLayout, { columns: [{ name: 'label' }, { name: 'children' }], children: _jsx(FormRow, { label: "Position", children: _jsx(NewDropdownButton, { items: [
                                     { label: 'Left', onClick: () => handleSidebarPositionChange('left') },
                                     { label: 'Right', onClick: () => handleSidebarPositionChange('right') },
                                 ], children: sidebarPosition === 'left' ? 'Left' : 'Right' }) }) })] })] }));

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsStatusbarForm.js

@@ -4,8 +4,8 @@ import { ModuleManager } from '../../../../components/DragAndDropContext/ModuleM
 import HelpBlock from '../../../../components/HelpBlock';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import Input from '../../../../components/Input';
-import SimpleButton from '../../../../components/SimpleButton';
-import DropdownButton from '../../../../components/DropdownButton';
+import { ButtonNew } from '../../../Components/Buttons/ButtonNew';
+import { NewDropdownButton } from '../../../../components/DropdownButton';
 import { NocodeWizardFormBox } from '../Components/FormBox';
 import { Box } from '../../../../components/Flex';
 export const UIOptionsStatusbarForm = (props) => {
@@ -91,7 +91,7 @@ export const UIOptionsStatusbarForm = (props) => {
             },
         });
     };
-    return (_jsxs(Box, { children: [_jsx(HelpBlock, { children: "Status Bar" }), _jsxs(Box, { className: "twa:p-2", children: [_jsxs(NocodeWizardFormBox, { children: [_jsx(Box, { as: "b", children: "Create Adaptable Statusbar Panel" }), _jsxs(FormLayout, { className: "twa:mt-2", children: [_jsx(FormRow, { label: "Panel Name", children: _jsx(Input, { value: adaptablePanelTitle, placeholder: 'Adaptable Panel Name', onChange: (event) => setAdaptablePanelTitle(event.target.value) }) }), _jsx(FormRow, { label: "Align", children: _jsx(DropdownButton, { columns: ['label'], items: alignOptions, children: alignOptions.find((option) => option.value === adaptablePanelAlign)?.label }) }), _jsxs(FormRow, { label: "", children: [_jsx(SimpleButton, { disabled: !isAdaptablePanelTitleAvailable, onClick: handleNewAdaptablePanel, icon: "plus", variant: "raised", children: "Add" }), !isAdaptablePanelTitleAvailable && (_jsx(Box, { className: "twa:mt-2 twa:text-error", children: "Adaptable panel name must be unique." }))] })] })] }), _jsx(ModuleManager, { permittedActions: {
+    return (_jsxs(Box, { children: [_jsx(HelpBlock, { children: "Status Bar" }), _jsxs(Box, { className: "twa:p-2", children: [_jsxs(NocodeWizardFormBox, { children: [_jsx(Box, { as: "b", children: "Create Adaptable Statusbar Panel" }), _jsxs(FormLayout, { className: "twa:mt-2", children: [_jsx(FormRow, { label: "Panel Name", children: _jsx(Input, { value: adaptablePanelTitle, placeholder: 'Adaptable Panel Name', onChange: (event) => setAdaptablePanelTitle(event.target.value) }) }), _jsx(FormRow, { label: "Align", children: _jsx(NewDropdownButton, { items: alignOptions, children: alignOptions.find((option) => option.value === adaptablePanelAlign)?.label }) }), _jsxs(FormRow, { label: "", children: [_jsx(ButtonNew, { disabled: !isAdaptablePanelTitleAvailable, onClick: handleNewAdaptablePanel, children: "Add" }), !isAdaptablePanelTitleAvailable && (_jsx(Box, { className: "twa:mt-2 twa:text-destructive", children: "Adaptable panel name must be unique." }))] })] })] }), _jsx(ModuleManager, { permittedActions: {
                             createTab: false,
                             dragAndDropTab: false,
                             deleteTab: false,

package/src/View/Alert/AlertViewPanel.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { cn } from '../../lib/utils';
 import { connect } from 'react-redux';
 import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
 import { AdaptablePopover } from '../AdaptablePopover';
@@ -7,7 +8,6 @@ import { getAlertButtonStyle } from './Utilities/getAlertButtonStyle';
 import { ActiveAlertsPanel } from './ActiveAlertsPanel';
 import { Flex } from '../../components/Flex';
 import { ButtonClear } from '../Components/Buttons/ButtonClear';
-import clsx from 'clsx';
 class AlertViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -31,7 +31,7 @@ class AlertViewPanelComponent extends React.Component {
         const alertsPanel = _jsx(ActiveAlertsPanel, {});
         const isToolbar = this.props.viewType === 'Toolbar';
         const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
-        return (_jsxs(Flex, { alignItems: "stretch", className: clsx(`ab-${elementType}__Alert__wrap twa:gap-1`, {
+        return (_jsxs(Flex, { alignItems: "stretch", className: cn(`ab-${elementType}__Alert__wrap twa:gap-1`, {
                 'twa:min-w-[140px] twa:w-[140px]': isToolbar,
                 [`twa:flex-1`]: !isToolbar,
             }), children: [_jsx(Flex, { className: `ab-${elementType}__Alert__text twa:flex-1 twa:rounded-standard twa:p-2 text-2 twa:items-center twa:justify-center twa:min-h-input`, style: { color: buttonTextColor, backgroundColor: buttonBackground }, children: collapsedText }, `${buttonTextColor}_${buttonBackground}_${collapsedText}`), this.props.AdaptableAlerts.length > 0 && (_jsxs(Flex, { className: 'twa:gap-1', children: [_jsx(Flex, { className: "twa:flex twa:box-border", children: _jsx(ButtonClear, { "aria-label": 'Clear All Alerts', variant: 'outlined', className: `ab-${elementType}__Alert__clear`, onClick: () => this.props.onDeleteAllAlert(this.state.Alerts), tooltip: "Clear All Alerts", showText: this.props.viewType === 'ToolPanel', children: 'Clear Alerts' }) }), _jsx(AdaptablePopover, { className: `ab-${elementType}__Alert__info`, headerText: "Alerts Details", bodyText: [alertsPanel], MessageType: 'Info', useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })] }))] }));

package/src/View/Alert/Utilities/getAlertButtonStyle.js

@@ -6,10 +6,13 @@ export const getAlertButtonStyle = (alerts) => {
     const buttonTextColor = UIHelper.getButtonTextColourForArrayandMessageType(alerts, messageType);
     let cssClasses = '';
     if (alerts?.length) {
-        const cssMessageType = UIHelper.getCSSColorByMessageType(messageType);
-        cssClasses = cssMessageType
-            ? `twa:bg-${cssMessageType} twa:text-text-on-${cssMessageType}`
-            : '';
+        cssClasses =
+            {
+                Info: `twa:bg-info twa:text-info-foreground`,
+                Success: `twa:bg-success twa:text-success-foreground`,
+                Warning: `twa:bg-warning twa:text-warning-foreground`,
+                Error: `twa:bg-destructive twa:text-destructive-foreground`,
+            }[messageType] || '';
     }
     return {
         color: buttonTextColor,

package/src/View/Alert/Wizard/AlertBehaviourWizardSection.d.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { AlertDefinition } from '../../../AdaptableState/AlertState';
 import { AdaptableApi } from '../../../types';
 import { AlertType } from '../Utilities/getAlertType';
-export declare const renderAlertBehaviourWizardSummary: (alertDefinition: AlertDefinition) => React.JSX.Element;
 export declare const renderAlertBehaviourSummary: (alert: AlertDefinition, api: AdaptableApi, allowWrap?: boolean) => React.JSX.Element;
 type AlertBehaviourWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;

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

@@ -39,10 +39,6 @@ const HighlightStyle = (props) => {
                             props.onChange(style);
                         } }) }) }))] }));
 };
-export const renderAlertBehaviourWizardSummary = (alertDefinition) => {
-    const { api } = useOnePageAdaptableWizardContext();
-    return renderAlertBehaviourSummary(alertDefinition, api);
-};
 export const renderAlertBehaviourSummary = (alert, api, allowWrap = false) => {
     const { AlertProperties = {} } = alert;
     const ruleProperties = isRuleBasedAlertDefinition(alert)

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ButtonNew } from '../../Components/Buttons/ButtonNew';
 import SimpleButton from '../../../components/SimpleButton';
 import Input from '../../../components/Input';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
@@ -81,7 +82,7 @@ export const AlertButtonsEditor = (props) => {
             buttonCommands.push(ch.name);
         });
     }
-    return (_jsxs(Box, { className: "twa:mt-3", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", className: "twa:mb-3", children: [_jsx(Box, { className: "twa:text-2 twa:max-w-[520px]", children: "Add buttons to the notification and set actions to perform when clicked" }), _jsx(SimpleButton, { icon: "plus", onClick: () => {
+    return (_jsxs(Box, { className: "twa:mt-3", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", className: "twa:mb-3", children: [_jsx(Box, { className: "twa:text-2 twa:max-w-[520px]", children: "Add buttons to the notification and set actions to perform when clicked" }), _jsx(ButtonNew, { onClick: () => {
                             onChange([
                                 ...(AlertButtons || []),
                                 {

package/src/View/Alert/Wizard/AlertMessageWizardSection.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AlertDefinition } from '../../../AdaptableState/AlertState';
 import { AlertType } from '../Utilities/getAlertType';
-export declare const renderAlertMessageSummary: (alertType?: AlertType) => React.JSX.Element;
+export declare const renderAlertMessageSummary: (alertType: AlertType | undefined, data: AlertDefinition) => React.JSX.Element;
 type AlertDisplayWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;
     alertType: AlertType;

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

@@ -9,8 +9,7 @@ import Textarea from '../../../components/Textarea';
 import HelpBlock from '../../../components/HelpBlock';
 import { Box, Flex } from '../../../components/Flex';
 import { Card } from '../../../components/Card';
-export const renderAlertMessageSummary = (alertType) => {
-    const { data } = useOnePageAdaptableWizardContext();
+export const renderAlertMessageSummary = (alertType, data) => {
     if (alertType === AlertType.Scheduled) {
         return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Message Type: ", _jsx(Tag, { children: data.MessageType })] }), _jsxs(SummaryText, { children: ["Header: ", _jsx(Tag, { children: data.MessageHeader || 'Not specified' })] }), _jsxs(SummaryText, { children: ["Body: ", _jsx(Tag, { children: data.MessageText || 'Not specified' })] })] }));
     }

package/src/View/Alert/Wizard/AlertNotificationWizardSection.d.ts

@@ -3,7 +3,7 @@ import { AlertDefinition } from '../../../AdaptableState/AlertState';
 import { AdaptableApi } from '../../../types';
 import { AlertType } from '../Utilities/getAlertType';
 import { BoxProps } from '../../../components/Flex';
-export declare const renderAlertNotificationSummary: () => React.JSX.Element;
+export declare const renderAlertNotificationSummary: (data: AlertDefinition, api: AdaptableApi) => React.JSX.Element;
 interface AlertPreviewProps extends BoxProps {
     className?: string;
     style?: React.CSSProperties;

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { cn } from '../../../lib/utils';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { CheckBox } from '../../../components/CheckBox';
 import { AdaptablePopupAlert } from '../../Components/Popups/AdaptablePopupAlert';
@@ -8,10 +9,8 @@ import { AlertType } from '../Utilities/getAlertType';
 import { isScheduledAlertDefinition, scheduledAlertIncludeSuspendButton, } from '../../../Utilities/Helpers/ScheduledAlertHelper';
 import { resolveAlertFormForDefinition } from '../../../Utilities/Helpers/alertFormHelper';
 import { Box, Flex } from '../../../components/Flex';
-import clsx from 'clsx';
 import { Card } from '../../../components/Card';
-export const renderAlertNotificationSummary = () => {
-    const { data, api } = useOnePageAdaptableWizardContext();
+export const renderAlertNotificationSummary = (data, api) => {
     if (!data.AlertProperties?.DisplayNotification) {
         return _jsx(Box, { className: "twa:text-2", children: "No Alert Notification will be displayed" });
     }
@@ -52,7 +51,7 @@ export const AlertPreview = ({ alertDefinition, api, focusFirstButton, ...boxPro
         };
         return result;
     }, [alertDefinition, api, mapButtons]);
-    return (_jsx(Box, { ...boxProps, className: clsx('ab-AlertPreview', boxProps.className), style: {
+    return (_jsx(Box, { ...boxProps, className: cn('ab-AlertPreview', boxProps.className), style: {
             border: '1px solid var(--ab-color-input-border)',
             ...boxProps.style,
         }, children: _jsx(AdaptablePopupAlert, { headless: true, focusFirstButton: focusFirstButton, adaptableAlert: alertToPreview, onClose: () => { } }) }));

package/src/View/Alert/Wizard/AlertScheduledWizardSection.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AlertDefinition } from '../../../AdaptableState/AlertState';
 export declare const isScheduledAlertTimeValid: (alert: AlertDefinition) => true | string;
-export declare const renderAlertScheduledSummary: () => React.JSX.Element;
+export declare const renderAlertScheduledSummary: (data: AlertDefinition) => React.JSX.Element;
 type AlertScheduledWizardSectionProps = {
     onChange: (alert: AlertDefinition) => void;
 };

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

@@ -12,8 +12,7 @@ export const isScheduledAlertTimeValid = (alert) => {
     }
     return isScheduleValid({ Schedule: alert.Schedule });
 };
-export const renderAlertScheduledSummary = () => {
-    const { data } = useOnePageAdaptableWizardContext();
+export const renderAlertScheduledSummary = (data) => {
     if (!isScheduledAlertDefinition(data)) {
         return null;
     }

package/src/View/Alert/Wizard/AlertTypeWizardSection.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { AlertType } from '../Utilities/getAlertType';
 import { AdaptableApi, AlertDefinition } from '../../../types';
 export declare const isSettingsValid: (data: AlertDefinition, api: AdaptableApi) => true | "Name is required" | "An Alert already exists with that name";
-export declare const renderAlertTypeSummary: (alertType: AlertType) => React.JSX.Element;
+export declare const renderAlertTypeSummary: (alertType: AlertType, data: AlertDefinition) => React.JSX.Element;
 type AlertTypeWizardSectionProps = {
     onAlertTypeChange: (alertType: AlertType) => void;
     alertType: AlertType | null;

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

@@ -1,12 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { AlertType, getAlertTypeText } from '../Utilities/getAlertType';
-import { TypeRadio } from '../../Wizard/TypeRadio';
 import { Tag } from '../../../components/Tag';
-import { Box, Flex } from '../../../components/Flex';
+import { Flex } from '../../../components/Flex';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import Input from '../../../components/Input';
 import { SummaryText } from '../../Wizard/OnePageAdaptableWizard';
-import { Card } from '../../../components/Card';
+import { getWizardTypeSelectionGridColumns, WizardNameFieldSection, WizardTypeSelectionCard, WizardTypeSelectionSection, } from '../../Wizard/WizardTypeSelection';
 export const isSettingsValid = (data, api) => {
     if (!data.Name?.trim()) {
         return 'Name is required';
@@ -18,11 +16,37 @@ export const isSettingsValid = (data, api) => {
     }
     return true;
 };
-export const renderAlertTypeSummary = (alertType) => {
-    const { data } = useOnePageAdaptableWizardContext();
+export const renderAlertTypeSummary = (alertType, data) => {
     const text = getAlertTypeText(alertType);
     return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Name ", _jsx(Tag, { children: data.Name || 'Not specified' })] }), _jsxs(SummaryText, { children: ["Type ", _jsx(Tag, { children: text })] })] }));
 };
+const ALERT_TYPE_OPTIONS = [
+    {
+        type: AlertType.DataChange,
+        description: "A data change has been made to the Grid's data source",
+    },
+    {
+        type: AlertType.RowChange,
+        description: 'A Row has been added or removed from the data source',
+    },
+    {
+        type: AlertType.Aggregation,
+        description: 'A change has been made to aggregated data (i.e. from multiple Rows)',
+    },
+    {
+        type: AlertType.Observable,
+        description: 'A specified change (or lack of change) over time has been observed in the Grid',
+    },
+    {
+        type: AlertType.Validation,
+        description: "A change made to the Grid's data has broken a validation rule",
+    },
+    {
+        type: AlertType.Scheduled,
+        description: 'A reminder is triggered to display at a specfied date and time',
+    },
+];
+const ALERT_TYPE_COUNT = ALERT_TYPE_OPTIONS.length;
 export const AlertTypeWizardSection = (props) => {
     const { data } = useOnePageAdaptableWizardContext();
     const handleNameChange = (event) => {
@@ -31,5 +55,5 @@ export const AlertTypeWizardSection = (props) => {
             Name: event.target.value,
         });
     };
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Alert" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "alert-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: data.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Alert Type" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose when the Alert should fire" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(TypeRadio, { text: getAlertTypeText(AlertType.DataChange), description: "A change has been made to the Grid's underlying data", checked: props.alertType === AlertType.DataChange, onClick: () => props.onAlertTypeChange(AlertType.DataChange) }), _jsx(TypeRadio, { text: getAlertTypeText(AlertType.RowChange), description: "A Row was added or removed from the data source", checked: props.alertType === AlertType.RowChange, onClick: () => props.onAlertTypeChange(AlertType.RowChange) }), _jsx(TypeRadio, { text: getAlertTypeText(AlertType.Aggregation), description: "A change has been made to aggregated data (i.e. from multiple Rows)", onClick: () => props.onAlertTypeChange(AlertType.Aggregation), checked: props.alertType === AlertType.Aggregation }), _jsx(TypeRadio, { text: getAlertTypeText(AlertType.Observable), description: "A specified change (or lack of change) over time has been observed in the Grid", onClick: () => props.onAlertTypeChange(AlertType.Observable), checked: props.alertType === AlertType.Observable }), _jsx(TypeRadio, { text: getAlertTypeText(AlertType.Validation), description: "A change has broken a data validation rule", checked: props.alertType === AlertType.Validation, onClick: () => props.onAlertTypeChange(AlertType.Validation) }), _jsx(TypeRadio, { text: getAlertTypeText(AlertType.Scheduled), description: "A reminder fires at a date and time you choose", checked: props.alertType === AlertType.Scheduled, onClick: () => props.onAlertTypeChange(AlertType.Scheduled) })] }) })] })] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:min-h-0 twa:p-2 twa:gap-2", children: [_jsx(WizardNameFieldSection, { value: data.Name ?? '', onChange: handleNameChange, inputDataName: "alert-name" }), _jsx(WizardTypeSelectionSection, { headingId: "alert-type-heading", title: "Alert Type", dataName: "alert-type", columns: getWizardTypeSelectionGridColumns(ALERT_TYPE_COUNT), intro: _jsxs(_Fragment, { children: ["Click a card to choose one of ", ALERT_TYPE_COUNT, " alert types for when the Alert should fire"] }), children: ALERT_TYPE_OPTIONS.map((option) => (_jsx(WizardTypeSelectionCard, { label: getAlertTypeText(option.type), description: option.description, selected: props.alertType === option.type, dataName: `alert-type-${option.type}`, onSelect: () => props.onAlertTypeChange(option.type) }, option.type))) })] }));
 };

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

@@ -5,7 +5,7 @@ import { cloneObject } from '../../../Utilities/Helpers/Helper';
 import { AlertScopeWizardSection } from './AlertScopeWizardSection';
 import { AlertRulesWizardSection, getRuleStepDescription, renderAlertRulesSummary, } from './AlertRulesWizardSection';
 import { isValidAlertRules } from './isValidAlertRules';
-import { AlertBehaviourWizardSection, renderAlertBehaviourWizardSummary, } from './AlertBehaviourWizardSection';
+import { AlertBehaviourWizardSection, renderAlertBehaviourSummary, } from './AlertBehaviourWizardSection';
 import { ALERT_DEFAULT_MESSAGE_TYPE } from '../../../Utilities/Constants/ObjectDefaultConstants';
 import { AlertMessageWizardSection, renderAlertMessageSummary } from './AlertMessageWizardSection';
 import { isValidAlertMessage } from './isValidAlertMessage';
@@ -83,7 +83,7 @@ export const AlertWizard = (props) => {
                 isValid: isSettingsValid,
                 details: (_jsx(_Fragment, { children: "Enter Name and select and select an Alert Type" })),
                 render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(AlertTypeWizardSection, { alertType: alertType, onAlertTypeChange: handleAlertTypeChange, onChange: setAlertDefinition }) })),
-                renderSummary: () => renderAlertTypeSummary(alertType),
+                renderSummary: (data) => renderAlertTypeSummary(alertType, data),
             },
             {
                 title: 'Schedule',
@@ -113,7 +113,7 @@ export const AlertWizard = (props) => {
                 details: "Select the Alert's Message Type and Text",
                 isValid: (data) => isValidAlertMessage(data, alertType),
                 render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(AlertMessageWizardSection, { alertType: alertType, onChange: setAlertDefinition }) })),
-                renderSummary: () => renderAlertMessageSummary(alertType),
+                renderSummary: (data) => renderAlertMessageSummary(alertType, data),
             },
             {
                 title: 'Notification',
@@ -125,7 +125,7 @@ export const AlertWizard = (props) => {
                 title: behaviourSpelling,
                 details: 'Configure ' + behaviourSpelling + 's for the Alert',
                 render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(AlertBehaviourWizardSection, { alertType: alertType, onChange: setAlertDefinition }) })),
-                renderSummary: renderAlertBehaviourWizardSummary,
+                renderSummary: renderAlertBehaviourSummary,
             },
             {
                 details: 'Select Alert Tags',

package/src/View/Alert/Wizard/BaseAlertScopeWizardSection.d.ts

@@ -1,2 +1,3 @@
 import * as React from 'react';
-export declare const renderScopeSummary: () => React.JSX.Element;
+import { AlertDefinition } from '../../../../types';
+export declare const renderScopeSummary: (data: AlertDefinition) => React.JSX.Element;