@adaptabletools/adaptable 23.0.0-canary.1 → 23.0.0-canary.10

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

@@ -1,17 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { Tabs } from '../../../components/Tabs';
+import { cn } from '../../../lib/utils';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { CheckBox } from '../../../components/CheckBox';
 import { AdaptablePopupAlert } from '../../Components/Popups/AdaptablePopupAlert';
 import { AlertButtonsEditor } from './AlertButtonsEditor';
 import { AlertType } from '../Utilities/getAlertType';
-import { isScheduledAlertDefinition, scheduledAlertIncludeSuspendButton, } from '../../../Utilities/Helpers/ScheduledAlertHelper';
-import { resolveAlertFormForDefinition } from '../../../Utilities/Helpers/alertFormHelper';
+import { isScheduledAlertDefinition, scheduledAlertIncludeSuspendButton, } from '../../../Utilities/Helpers/Scheduling/ScheduledAlertHelper';
+import { resolveAlertFormForDefinition } from '../../../Utilities/Helpers/AlertHelper';
 import { Box, Flex } from '../../../components/Flex';
-import clsx from 'clsx';
-export const renderAlertNotificationSummary = () => {
-    const { data, api } = useOnePageAdaptableWizardContext();
+import { Card } from '../../../components/Card';
+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: () => { } }) }));
@@ -82,57 +81,57 @@ export const AlertNotificationWizardSection = (props) => {
             },
         });
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(Tabs, { "data-name": "display-options", className: "twa:mt-2 twa:mb-3", autoFocus: false, children: [_jsx(Tabs.Tab, { children: "Notification Options" }), _jsxs(Tabs.Content, { children: [_jsxs(Flex, { flexDirection: "column", alignItems: "flex-start", className: isScheduled ? 'twa:gap-4' : undefined, children: [_jsx(CheckBox, { className: isScheduled ? 'twa:my-0' : undefined, checked: data.AlertProperties?.DisplayNotification, onChange: (DisplayNotification) => {
-                                            if (isScheduled && scheduledData) {
-                                                updateScheduledProperties({ DisplayNotification });
-                                                return;
-                                            }
-                                            const ruleData = data;
-                                            const newAlertDefinition = {
-                                                ...ruleData,
-                                                AlertProperties: {
-                                                    ...ruleData.AlertProperties,
-                                                    DisplayNotification,
-                                                },
-                                            };
-                                            if (!DisplayNotification && typeof newAlertDefinition.AlertForm === 'object') {
-                                                delete newAlertDefinition.AlertForm.Buttons;
-                                            }
-                                            if (DisplayNotification) {
-                                                newAlertDefinition.AlertForm =
-                                                    newAlertDefinition.AlertForm ??
-                                                        api.alertApi.internalApi.getDefaultAlertNotificationForm();
-                                            }
-                                            if (DisplayNotification &&
-                                                typeof newAlertDefinition.AlertForm === 'object' &&
-                                                (!newAlertDefinition.AlertForm?.Buttons ||
-                                                    newAlertDefinition.AlertForm?.Buttons?.length === 0)) {
-                                                newAlertDefinition.AlertForm.Buttons = [
-                                                    api.alertApi.internalApi.getDefaultButton(),
-                                                ];
-                                            }
-                                            props.onChange(newAlertDefinition);
-                                        }, children: isScheduled
-                                            ? 'Display a Notification when the Schedule is triggered'
-                                            : 'Display a Notification when Alert is triggered (with action buttons)' }), isScheduled && scheduledData && data.AlertProperties?.DisplayNotification ? (_jsx(CheckBox, { className: "twa:my-0", checked: includeSuspendButton, onChange: (IncludeSuspendButton) => {
-                                            updateScheduledProperties({ IncludeSuspendButton });
-                                        }, children: "Include Suspend button on notification" })) : null] }), data.AlertProperties?.DisplayNotification && !isScheduled
-                                ? (() => {
-                                    const ruleData = data;
-                                    const alertForm = ruleData.AlertForm;
-                                    if (typeof alertForm === 'string') {
-                                        return (_jsx(Box, { className: "twa:text-2", children: "Alert buttons cannot be customized because form is dynamically driven" }));
-                                    }
-                                    return (_jsx(AlertButtonsEditor, { alertType: props.alertType, AlertButtons: alertForm?.Buttons, api: api, adaptableAlert: adaptableAlert, onChange: (buttons) => {
-                                            props.onChange({
-                                                ...ruleData,
-                                                AlertForm: {
-                                                    ...(alertForm ?? { fields: [] }),
-                                                    Buttons: buttons,
-                                                },
-                                            });
-                                        } }));
-                                })()
-                                : null] })] }), data.AlertProperties?.DisplayNotification ? (_jsxs(Tabs, { "data-name": "alert-preview", autoFocus: false, children: [_jsx(Tabs.Tab, { children: "Alert Preview" }), _jsx(Tabs.Content, { children: !isScheduled &&
-                            typeof data.AlertForm === 'string' ? (_jsx(Box, { className: "twa:text-2", children: "Preview not available because form is dynamically driven" })) : (_jsx(AlertPreview, { alertDefinition: data, api: api })) })] })) : null] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsx(Box, { "data-name": "display-options", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Notification Options" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether to display a notification when the Alert fires" })] }), _jsxs(Card.Body, { children: [_jsxs(Flex, { flexDirection: "column", alignItems: "flex-start", className: isScheduled ? 'twa:gap-4' : undefined, children: [_jsx(CheckBox, { className: isScheduled ? 'twa:my-0' : undefined, checked: data.AlertProperties?.DisplayNotification, onChange: (DisplayNotification) => {
+                                                if (isScheduled && scheduledData) {
+                                                    updateScheduledProperties({ DisplayNotification });
+                                                    return;
+                                                }
+                                                const ruleData = data;
+                                                const newAlertDefinition = {
+                                                    ...ruleData,
+                                                    AlertProperties: {
+                                                        ...ruleData.AlertProperties,
+                                                        DisplayNotification,
+                                                    },
+                                                };
+                                                if (!DisplayNotification && typeof newAlertDefinition.AlertForm === 'object') {
+                                                    delete newAlertDefinition.AlertForm.Buttons;
+                                                }
+                                                if (DisplayNotification) {
+                                                    newAlertDefinition.AlertForm =
+                                                        newAlertDefinition.AlertForm ??
+                                                            api.alertApi.internalApi.getDefaultAlertNotificationForm();
+                                                }
+                                                if (DisplayNotification &&
+                                                    typeof newAlertDefinition.AlertForm === 'object' &&
+                                                    (!newAlertDefinition.AlertForm?.Buttons ||
+                                                        newAlertDefinition.AlertForm?.Buttons?.length === 0)) {
+                                                    newAlertDefinition.AlertForm.Buttons = [
+                                                        api.alertApi.internalApi.getDefaultButton(),
+                                                    ];
+                                                }
+                                                props.onChange(newAlertDefinition);
+                                            }, children: isScheduled
+                                                ? 'Display a Notification when the Schedule is triggered'
+                                                : 'Display a Notification when Alert is triggered (with action buttons)' }), isScheduled && scheduledData && data.AlertProperties?.DisplayNotification ? (_jsx(CheckBox, { className: "twa:my-0", checked: includeSuspendButton, onChange: (IncludeSuspendButton) => {
+                                                updateScheduledProperties({ IncludeSuspendButton });
+                                            }, children: "Include Suspend button on notification" })) : null] }), data.AlertProperties?.DisplayNotification && !isScheduled
+                                    ? (() => {
+                                        const ruleData = data;
+                                        const alertForm = ruleData.AlertForm;
+                                        if (typeof alertForm === 'string') {
+                                            return (_jsx(Box, { className: "twa:text-2 twa:mt-3", children: "Alert buttons cannot be customized because form is dynamically driven" }));
+                                        }
+                                        return (_jsx(AlertButtonsEditor, { alertType: props.alertType, AlertButtons: alertForm?.Buttons, api: api, adaptableAlert: adaptableAlert, onChange: (buttons) => {
+                                                props.onChange({
+                                                    ...ruleData,
+                                                    AlertForm: {
+                                                        ...(alertForm ?? { fields: [] }),
+                                                        Buttons: buttons,
+                                                    },
+                                                });
+                                            } }));
+                                    })()
+                                    : null] })] }) }), data.AlertProperties?.DisplayNotification ? (_jsx(Box, { "data-name": "alert-preview", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Alert Preview" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Preview how the notification will appear when triggered" })] }), _jsx(Card.Body, { children: !isScheduled &&
+                                typeof data.AlertForm === 'string' ? (_jsx(Box, { className: "twa:text-2", children: "Preview not available because form is dynamically driven" })) : (_jsx(AlertPreview, { alertDefinition: data, api: api, focusFirstButton: false })) })] }) })) : null] }));
 };

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

@@ -1,11 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isRuleBasedAlertDefinition } from '../../../Utilities/Helpers/ScheduledAlertHelper';
+import { isRuleBasedAlertDefinition } from '../../../Utilities/Helpers/Scheduling/ScheduledAlertHelper';
 import { EntityRulesEditor, EntityRulesSummary } from '../../Components/EntityRulesEditor';
 import { Tag } from '../../../components/Tag';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { getAvailablePredicateDefinitions } from '../Utilities/getAvailablePredicates';
-import { Tabs } from '../../../components/Tabs';
 import Radio from '../../../components/Radio';
+import { Card } from '../../../components/Card';
+import { Flex } from '../../../components/Flex';
 import { OBSERVABLE_EXPRESSION_ROW_ADDED, OBSERVABLE_EXPRESSION_ROW_REMOVED, } from './../../../Utilities/Constants/GeneralConstants';
 import { Box } from '../../../components/Flex';
 export const getRuleStepDescription = (alertType) => {
@@ -50,7 +51,7 @@ const RowChangeEditor = (props) => {
             },
         });
     };
-    return (_jsx(Box, { className: "twa:p-2", children: _jsxs(Tabs, { children: [_jsx(Tabs.Tab, { children: "Row Change" }), _jsxs(Tabs.Content, { children: [_jsx(Radio, { onClick: () => handleRowAddedChange(), checked: expression?.includes(OBSERVABLE_EXPRESSION_ROW_ADDED), children: "Row Added" }), _jsx(Radio, { onClick: () => handleRowRemovedChange(), checked: expression?.includes(OBSERVABLE_EXPRESSION_ROW_REMOVED), children: "Row Removed" })] })] }) }));
+    return (_jsx(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: "Row Change" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose which type of Row Change will trigger the Alert" })] }), _jsxs(Card.Body, { children: [_jsx(Radio, { onClick: () => handleRowAddedChange(), checked: expression?.includes(OBSERVABLE_EXPRESSION_ROW_ADDED), children: "Row Added" }), _jsx(Radio, { onClick: () => handleRowRemovedChange(), checked: expression?.includes(OBSERVABLE_EXPRESSION_ROW_REMOVED), children: "Row Removed" })] })] }) }));
 };
 export const AlertRulesWizardSection = (props) => {
     const { data: alertData, api, moduleInfo } = useOnePageAdaptableWizardContext();

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

@@ -1,19 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isScheduledAlertDefinition } from '../../../Utilities/Helpers/ScheduledAlertHelper';
+import { isScheduledAlertDefinition } from '../../../Utilities/Helpers/Scheduling/ScheduledAlertHelper';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { isScheduleValid, ScheduleBuilderWizard, } from '../../Schedule/Wizard/ScheduleScheduleWizard';
 import { Tag } from '../../../components/Tag';
 import { SummaryText } from '../../Wizard/OnePageAdaptableWizard';
 import UIHelper from '../../../View/UIHelper';
-import { Box } from '../../../components/Flex';
+import { Flex } from '../../../components/Flex';
 export const isScheduledAlertTimeValid = (alert) => {
     if (!isScheduledAlertDefinition(alert)) {
         return 'Schedule is not specified';
     }
     return isScheduleValid({ Schedule: alert.Schedule });
 };
-export const renderAlertScheduledSummary = () => {
-    const { data } = useOnePageAdaptableWizardContext();
+export const renderAlertScheduledSummary = (data) => {
     if (!isScheduledAlertDefinition(data)) {
         return null;
     }
@@ -27,5 +26,5 @@ export const AlertScheduledWizardSection = (props) => {
             Schedule: scheduleData.Schedule,
         });
     };
-    return (_jsx(Box, { className: "twa:p-3", children: _jsx(ScheduleBuilderWizard, { onChange: handleScheduleChange }) }));
+    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: _jsx(ScheduleBuilderWizard, { onChange: handleScheduleChange }) }));
 };

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

@@ -1,8 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { isRuleBasedAlertDefinition } from '../../../Utilities/Helpers/ScheduledAlertHelper';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isRuleBasedAlertDefinition } from '../../../Utilities/Helpers/Scheduling/ScheduledAlertHelper';
 import { NewScopeComponent } from '../../Components/NewScopeComponent';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { Flex } from '../../../components/Flex';
+import { Box, Flex } from '../../../components/Flex';
 import { isScopeColumnIds } from '../../../AdaptableState/Common/ColumnScope';
 export const AlertScopeWizardSection = (props) => {
     const { data: alertData, api } = useOnePageAdaptableWizardContext();
@@ -16,41 +16,33 @@ export const AlertScopeWizardSection = (props) => {
         disableDataTypes = false;
         disableColumns = false;
     }
-    return (_jsx(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: _jsx(NewScopeComponent, { disableColumns: disableColumns, disableDataTypes: disableDataTypes, descriptions: {
-                rowScope: 'Changes in any Column in the row will trigger an Alert',
-                columnScope: 'Changes in selected Columns will trigger an Alert',
-                dataTypeScope: 'Changes in any Column which is of the selected Data Type(s) will trigger an Alert',
-            }, scope: data.Scope, updateScope: (Scope) => {
-                const newData = { ...data, Scope };
-                if (newData.Rule.Predicates) {
-                    const validPredicateIds = new Set(api.alertApi.internalApi.getAlertPredicateDefsForScope(Scope).map((def) => def.id));
-                    newData.Rule = {
-                        Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
-                            // if there are more than 1 column, then we must eliminate the IN/NotIn predicates
-                            // TODO: this should NOT be required, but the ColumnValueSelector does NOT support creatable values right now
-                            if (isScopeColumnIds(Scope) && Scope.ColumnIds.length > 1) {
-                                return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
-                            }
-                            return true;
-                        }),
-                    };
-                }
-                if (newData.Rule.ObservableExpression !== undefined &&
-                    !api.columnScopeApi.scopeIsAll(Scope)) {
-                    // if it had observable expression and the scope is changed to partial
-                    // we need to reset to not be an observable expression, as observable is not supported
-                    // for partial scope
-                    delete newData.Rule.ObservableExpression;
-                    newData.Rule.BooleanExpression = '';
-                }
-                if (newData.Rule.AggregatedBooleanExpression !== undefined &&
-                    !api.columnScopeApi.scopeIsAll(Scope)) {
-                    // if it had aggregation expression and the scope is changed to partial
-                    // we need to reset to not be an aggregation expression, as aggregation is not supported
-                    // for partial scope
-                    delete newData.Rule.AggregatedBooleanExpression;
-                    newData.Rule.BooleanExpression = '';
-                }
-                props.onChange(newData);
-            } }) }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Specify which columns should trigger the Alert" })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-2", children: _jsx(NewScopeComponent, { disableColumns: disableColumns, disableDataTypes: disableDataTypes, descriptions: {
+                        rowScope: 'Changes in any Column in the row will trigger an Alert',
+                        columnScope: 'Changes in selected Columns will trigger an Alert',
+                        dataTypeScope: 'Changes in any Column which is of the selected Data Type(s) will trigger an Alert',
+                    }, scope: data.Scope, updateScope: (Scope) => {
+                        const newData = { ...data, Scope };
+                        if (newData.Rule.Predicates) {
+                            const validPredicateIds = new Set(api.alertApi.internalApi.getAlertPredicateDefsForScope(Scope).map((def) => def.id));
+                            newData.Rule = {
+                                Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
+                                    if (isScopeColumnIds(Scope) && Scope.ColumnIds.length > 1) {
+                                        return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
+                                    }
+                                    return true;
+                                }),
+                            };
+                        }
+                        if (newData.Rule.ObservableExpression !== undefined &&
+                            !api.columnScopeApi.scopeIsAll(Scope)) {
+                            delete newData.Rule.ObservableExpression;
+                            newData.Rule.BooleanExpression = '';
+                        }
+                        if (newData.Rule.AggregatedBooleanExpression !== undefined &&
+                            !api.columnScopeApi.scopeIsAll(Scope)) {
+                            delete newData.Rule.AggregatedBooleanExpression;
+                            newData.Rule.BooleanExpression = '';
+                        }
+                        props.onChange(newData);
+                    } }) })] }));
 };

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,13 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Tabs } from '../../../components/Tabs';
 import { AlertType, getAlertTypeText } from '../Utilities/getAlertType';
-import { TypeRadio } from '../../Wizard/TypeRadio';
 import { Tag } from '../../../components/Tag';
 import { Flex } from '../../../components/Flex';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import FormLayout, { FormRow } from '../../../components/FormLayout';
-import Input from '../../../components/Input';
 import { SummaryText } from '../../Wizard/OnePageAdaptableWizard';
+import { getWizardTypeSelectionGridColumns, WizardNameFieldSection, WizardTypeSelectionCard, WizardTypeSelectionSection, } from '../../Wizard/WizardTypeSelection';
 export const isSettingsValid = (data, api) => {
     if (!data.Name?.trim()) {
         return 'Name is required';
@@ -19,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) => {
@@ -32,5 +55,5 @@ export const AlertTypeWizardSection = (props) => {
             Name: event.target.value,
         });
     };
-    return (_jsxs(Flex, { flexDirection: "column", children: [_jsxs(Tabs, { children: [_jsx(Tabs.Tab, { children: "Settings" }), _jsx(Tabs.Content, { children: _jsx(FormLayout, { children: _jsx(FormRow, { label: "Name", children: _jsx(Input, { "data-name": "alert-name", className: "twa:flex-1 twa:max-w-[200px] twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: data.Name ?? '' }) }) }) })] }), _jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Alert Type" }), _jsx(Tabs.Content, { 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

@@ -1,17 +1,18 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
 import { useState, useCallback } from 'react';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
 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';
 import { renderScopeSummary } from './BaseAlertScopeWizardSection';
 import { isScopeValid } from '../../Components/NewScopeComponent';
-import { isRuleBasedAlertDefinition } from '../../../Utilities/Helpers/ScheduledAlertHelper';
+import { isRuleBasedAlertDefinition } from '../../../Utilities/Helpers/Scheduling/ScheduledAlertHelper';
 import ObjectFactory from '../../../Utilities/ObjectFactory';
 import { useDispatch } from 'react-redux';
 import * as AlertRedux from '../../../Redux/ActionsReducers/AlertRedux';
@@ -77,13 +78,20 @@ export const AlertWizard = (props) => {
         setAlertType(newAlertType);
         doSetAlertDefinition(getDefaultAlertDefinition(alertDefinition, newAlertType));
     };
-    return (_jsx(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 = getAlertType(props.data);
+        return type === AlertType.Scheduled ? 'Schedule' : 'Rule';
+    }, [props.defaultCurrentSectionName, props.data]);
+    return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: defaultEditSectionName, moduleInfo: props.moduleInfo, modal: props.modal, data: alertDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Name & Type',
                 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 +121,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 +133,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;

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

@@ -1,18 +1,8 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { Box } from '../../../components/Flex';
-import clsx from 'clsx';
-import { TagList } from '../../../components/Tag/Tag';
-export const renderScopeSummary = () => {
-    const { data, api: { columnScopeApi: scopeApi }, } = useOnePageAdaptableWizardContext();
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ScopeSummaryTags } from '../../Wizard/scopeSummaryTags';
+export const renderScopeSummary = (data) => {
     if (!('Scope' in data)) {
         return null;
     }
-    const scope = data.Scope;
-    const columnsInScope = scopeApi.getColumnsInScope(scope);
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { children: _jsx(Box, { className: "twa:text-2", children: scopeApi.scopeIsAll(scope)
-                        ? 'Changes to any Column in the row will trigger an Alert'
-                        : null }) }), _jsx(Box, { className: "twa:overflow-hidden", children: 'ColumnIds' in scope ? (_jsxs(_Fragment, { children: [_jsx(Box, { className: clsx('twa:text-2', columnsInScope.length ? 'twa:mb-2' : 'twa:mb-0'), children: "Changes in selected columns will trigger an alert" }), columnsInScope.length ? (_jsx(TagList, { tags: columnsInScope.map((c) => c.friendlyName) })) : null] })) : null }), _jsx(Box, { children: 'DataTypes' in scope ? (_jsxs(_Fragment, { children: [_jsx(Box, { className: "twa:text-2 twa:mb-2", children: "Changes in Columns with these Data Types trigger an Alert" }), _jsx(TagList, { tags: scope.DataTypes.map((dataType) => {
-                                return `DataType: ${dataType}`;
-                            }) })] })) : null })] }));
+    return _jsx(ScopeSummaryTags, { scope: data.Scope });
 };

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

@@ -1,5 +1,5 @@
 import { isAdaptableRuleValid } from '../../Components/EntityRulesEditor/Utilities';
-import { isScheduledAlertDefinition } from '../../../Utilities/Helpers/ScheduledAlertHelper';
+import { isScheduledAlertDefinition } from '../../../Utilities/Helpers/Scheduling/ScheduledAlertHelper';
 export const isValidAlertRules = (alert, api, context) => {
     if (isScheduledAlertDefinition(alert)) {
         return true;

package/src/View/BulkUpdate/BulkUpdatePopup.js

@@ -42,7 +42,7 @@ class BulkUpdatePopupComponent extends React.Component {
         if (!col) {
             return null;
         }
-        return (_jsxs(PanelWithImage, { bodyProps: { className: 'twa:p-0' }, glyphicon: this.props.moduleInfo.Glyph, header: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), variant: "primary", children: [col.dataType == 'date' ? (_jsxs(_Fragment, { children: [_jsx(HelpBlock, { className: "twa:my-2", children: "Enter a date value. Alternatively, tick the checkbox and select from an existing column value." }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2", children: [_jsx(Flex, { alignItems: "center", flexDirection: "row", className: "twa:flex-1 twa:mr-2", children: _jsx(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), allowNew: false, className: "twa:w-full twa:max-w-[inherit]" }) }), _jsx(SimpleButton, { disabled: StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
+        return (_jsxs(PanelWithImage, { bodyProps: { className: 'twa:p-2' }, glyphicon: this.props.moduleInfo.Glyph, header: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), variant: "primary", children: [col.dataType == 'date' ? (_jsxs(_Fragment, { children: [_jsx(HelpBlock, { className: "twa:my-2", children: "Enter a date value. Alternatively, tick the checkbox and select from an existing column value." }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2", children: [_jsx(Flex, { alignItems: "center", flexDirection: "row", className: "twa:flex-1 twa:mr-2", children: _jsx(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), allowNew: false, className: "twa:w-full twa:max-w-[inherit]" }) }), _jsx(SimpleButton, { disabled: StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
                                         this.props.PreviewInfo.previewValidationSummary.validationResult == 'All', onClick: () => {
                                         this.onApplyClick();
                                     }, variant: "raised", tone: "accent", children: "Apply Bulk Update" })] })] })) : (_jsxs(_Fragment, { children: [_jsx(HelpBlock, { className: "twa:my-2", children: "Select an existing Column value from the dropdown, or enter a new value" }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:mt-2 twa:gap-2 twa:items-stretch", children: [_jsx(Flex, { alignItems: "center", flexDirection: "row", className: "twa:mr-2 twa:flex-1", children: _jsx(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns), className: "twa:w-full twa:max-w-[inherit]" }) }), _jsx(SimpleButton, { disabled: StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||

package/src/View/BulkUpdate/BulkUpdateViewPanel.js

@@ -12,7 +12,7 @@ import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
 import * as BulkUpdateRedux from '../../Redux/ActionsReducers/BulkUpdateRedux';
 import { connect } from 'react-redux';
 import { Flex } from '../../components/Flex';
-import clsx from 'clsx';
+import { cn } from '../../lib/utils';
 class BulkUpdateViewPanelComponent extends React.Component {
     cleanupEvent;
     constructor(props) {
@@ -54,15 +54,13 @@ class BulkUpdateViewPanelComponent extends React.Component {
         const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
         const messageStyle = UIHelper.getMessageTypeByStatusColour(statusColour);
         const infoStyle = messageStyle === 'Success' ? 'Info' : messageStyle;
-        return (_jsxs(Flex, { className: clsx(valueSelectorDisabled ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__BulkUpdate__wrap twa:gap-1 twa:flex-row`, {
+        return (_jsxs(Flex, { className: cn(valueSelectorDisabled ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__BulkUpdate__wrap twa:gap-1 twa:flex-row`, {
                 'twa:min-w-[300px] twa:max-w-[300px] twa:w-[300px] twa:flex-nowrap': isToolbar,
                 'twa:flex-1 twa:flex-wrap': !isToolbar,
-            }), flexWrap: isToolbar ? 'nowrap' : 'wrap', children: [_jsx(Flex, { className: clsx('twa:flex-1', {
+            }), flexWrap: isToolbar ? 'nowrap' : 'wrap', children: [_jsx(Flex, { className: cn('twa:flex-1', {
                         'twa:min-w-[100px]': !isToolbar,
                         'twa:min-w-0': isToolbar,
-                    }), children: _jsx(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, newLabel: "New", existingLabel: "Existing", dropdownButtonProps: {
-                            listMinWidth: 160,
-                        }, className: `ab-${elementType}__BulkUpdate__select twa:w-full`, disabled: valueSelectorDisabled, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: selectedColumn, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns) }) }), _jsxs(Flex, { className: "twa:flex-shrink-0 twa:gap-1", children: [_jsx(Flex, { className: "twa:flex twa:box-border twa:items-stretch", children: _jsx(ButtonApply, { className: `ab-${elementType}__BulkUpdate__apply twa:h-full`, onClick: () => this.onApplyClick(), style: applyStyle, tooltip: "Apply Bulk Update", disabled: valueOperationDisabled, accessLevel: this.props.accessLevel, children: 'Apply' }) }), _jsx(AdaptablePopover, { popoverMinWidth: 360, popoverMaxWidth: 500, popupPadding: 0, className: `ab-${elementType}__BulkUpdate__info`, headerText: "Preview Results", bodyText: [previewPanel], MessageType: infoStyle, useButton: true, showEvent: 'focus', hideEvent: "blur", disabled: valueSelectorDisabled || StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) })] })] }));
+                    }), children: _jsx(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, newLabel: "New", existingLabel: "Existing", className: `ab-${elementType}__BulkUpdate__select twa:w-full`, disabled: valueSelectorDisabled, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: selectedColumn, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns) }) }), _jsxs(Flex, { className: "twa:flex-shrink-0 twa:gap-1", children: [_jsx(Flex, { className: "twa:flex twa:box-border twa:items-stretch", children: _jsx(ButtonApply, { className: `ab-${elementType}__BulkUpdate__apply twa:h-full`, onClick: () => this.onApplyClick(), style: applyStyle, tooltip: "Apply Bulk Update", disabled: valueOperationDisabled, accessLevel: this.props.accessLevel, children: 'Apply' }) }), _jsx(AdaptablePopover, { popoverMinWidth: 360, popoverMaxWidth: 500, popupPadding: 0, className: `ab-${elementType}__BulkUpdate__info`, headerText: "Preview Results", bodyText: [previewPanel], MessageType: infoStyle, useButton: true, showEvent: 'focus', hideEvent: "blur", disabled: valueSelectorDisabled || StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) })] })] }));
     }
     onColumnValueSelectedChanged(selectedColumnValue) {
         this.props.onBulkUpdateValueChange(selectedColumnValue);

package/src/View/CalculatedColumn/Wizard/CalculatedColumnDefinitionWizardSection.js

@@ -1,13 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import FormLayout, { FormRow } from '../../../components/FormLayout';
 import Input from '../../../components/Input';
 import { CheckBox } from '../../../components/CheckBox';
-import ErrorBox from '../../../components/ErrorBox';
-import { Tabs } from '../../../components/Tabs';
 import { Tag } from '../../../components/Tag';
 import { Box, Flex } from '../../../components/Flex';
+import { Card } from '../../../components/Card';
 export const renderCalculatedColumnDefinitionSummary = (data) => {
     return (_jsxs(Box, { className: "twa:text-2 twa:grid twa:items-center twa:grid-cols-[auto_1fr] twa:gap-2", children: [_jsx(Box, { children: "Column Identifier:" }), _jsx(Box, { children: _jsx(Tag, { children: data.ColumnId }) }), data.FriendlyName ? (_jsxs(_Fragment, { children: [_jsx(Box, { children: "Column Name:" }), _jsx(Box, { children: _jsx(Tag, { children: data.FriendlyName ?? data.ColumnId }) })] })) : null] }));
 };
@@ -21,7 +19,7 @@ export const isValidCalculatedColumnDefinition = (data, api) => {
     return hasAlreadyExistingId ? 'A column with this Name already exists' : true;
 };
 export const CalculatedColumnDefinitionWizardSection = (props) => {
-    const { data, api } = useOnePageAdaptableWizardContext();
+    const { data } = useOnePageAdaptableWizardContext();
     const handleColumnIdChange = (event) => {
         let e = event.target;
         props.onChange({
@@ -37,8 +35,6 @@ export const CalculatedColumnDefinitionWizardSection = (props) => {
         });
     };
     const inEdit = props.isEdit;
-    const validCheck = isValidCalculatedColumnDefinition(data, api);
-    const ErrorMessage = validCheck === true ? null : validCheck;
     const [ColumnNameFocused, setColumnNameFocused] = useState(false);
     const ColumnName = data.FriendlyName;
     const ColumnId = data.ColumnId;
@@ -52,11 +48,11 @@ export const CalculatedColumnDefinitionWizardSection = (props) => {
             },
         });
     };
-    return (_jsxs(Box, { "data-name": 'calculated-column-definition', children: [_jsxs(Tabs, { autoFocus: false, children: [_jsx(Tabs.Tab, { children: "Column Details" }), _jsx(Tabs.Content, { children: _jsx(Flex, { flexDirection: "row", children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Column Name", children: _jsx(Input, { "data-name": "column-id", value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, autoFocus: !inEdit, disabled: inEdit, type: "text", placeholder: "Enter a Column Name", onChange: handleColumnIdChange }) }), _jsx(FormRow, { label: "Column Header", children: _jsx(Input, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
-                                                setColumnNameFocused(true);
-                                            }, onBlur: () => {
-                                                setColumnNameFocused(false);
-                                            }, value: ColumnNameFocused ? ColumnName || '' : ColumnName || ColumnId || '', style: { width: '100%', maxWidth: 500 }, type: "text", placeholder: "Enter a Column Header (optional)", onChange: handleColumnNameChange }) }), _jsx(FormRow, { label: "Column Header Tooltip", children: _jsx(Input, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
-                                                HeaderToolTip: e.target.value,
-                                            }) }) }), _jsx(FormRow, { label: "", children: _jsx(CheckBox, { "data-name": "column-show-tooltip", onChange: (checked) => handleSpecialColumnSettingsChange({ ShowToolTip: checked }), checked: ShowToolTip, children: "Show Expression as Cell Tooltip" }) })] }) }) })] }), ErrorMessage ? _jsx(ErrorBox, { className: "twa:mt-2", children: ErrorMessage }) : null] }));
+    return (_jsx(Box, { "data-name": 'calculated-column-definition', children: _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: "Column Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Unique identifier for the Calculated Column" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "column-id", value: data.ColumnId || '', className: "twa:max-w-[500px] twa:w-full", autoFocus: !inEdit, disabled: inEdit, type: "text", placeholder: "Enter a Column Name", onChange: handleColumnIdChange }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Header" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Display name shown in the Column Header (Name used if not provided)" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
+                                    setColumnNameFocused(true);
+                                }, onBlur: () => {
+                                    setColumnNameFocused(false);
+                                }, value: ColumnNameFocused ? ColumnName || '' : ColumnName || ColumnId || '', className: "twa:max-w-[500px] twa:w-full", type: "text", placeholder: "Enter a Column Header (optional)", onChange: handleColumnNameChange }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Header Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional text shown when hovering over the Column Header" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "header-tooltip", type: "text", className: "twa:max-w-[500px] twa:w-full", value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
+                                    HeaderToolTip: e.target.value,
+                                }) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Show the Expression as a tooltip when hovering over each cell" })] }), _jsx(Card.Body, { children: _jsx(CheckBox, { "data-name": "column-show-tooltip", onChange: (checked) => handleSpecialColumnSettingsChange({ ShowToolTip: checked }), checked: ShowToolTip, children: "Show Expression as Cell Tooltip" }) })] })] }) }));
 };