@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.0

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import HelpBlock from '../../../components/HelpBlock';
 import { ALL_MODULES } from '../../../AdaptableState/Common/Types';
@@ -29,7 +30,7 @@ const EntitlementsListForm = (props) => {
     let abOptions = props.adaptableOptions;
     const entitlements = abOptions?.entitlementOptions?.moduleEntitlements ?? [];
     if (typeof entitlements === 'function') {
-        return (React.createElement(HelpBlock, { className: "twa:mt-2" }, "Entitlements cannot be customized, they are handled by a custom function."));
+        return (_jsx(HelpBlock, { className: "twa:mt-2", children: "Entitlements cannot be customized, they are handled by a custom function." }));
     }
     const entitlementsMap = React.useMemo(() => {
         return entitlements.reduce((acc, entitlement) => {
@@ -64,14 +65,14 @@ const EntitlementsListForm = (props) => {
         });
     }, [abOptions?.entitlementOptions]);
     if (typeof entitlements === 'function') {
-        return (React.createElement(HelpBlock, { className: "twa:mb-2" }, "Entitlements cannot be customized, they are handled by a custom function."));
+        return (_jsx(HelpBlock, { className: "twa:mb-2", children: "Entitlements cannot be customized, they are handled by a custom function." }));
     }
     const columnsMap = {
         name: {
             header: 'Module Name',
             align: 'start',
             renderValue: (params) => {
-                return React.createElement(React.Fragment, null, params.data.name);
+                return _jsx(_Fragment, { children: params.data.name });
             },
         },
         full: {
@@ -79,7 +80,7 @@ const EntitlementsListForm = (props) => {
             render: (params) => {
                 const module = params.data.name;
                 const accessLevel = entitlementsMap[module];
-                return (React.createElement(Radio, { onClick: () => handleOnChange(module, ACCESS_LEVEL_FULL), checked: accessLevel === ACCESS_LEVEL_FULL }));
+                return (_jsx(Radio, { onClick: () => handleOnChange(module, ACCESS_LEVEL_FULL), checked: accessLevel === ACCESS_LEVEL_FULL }));
             },
         },
         readonly: {
@@ -87,7 +88,7 @@ const EntitlementsListForm = (props) => {
             render: (params) => {
                 const module = params.data.name;
                 const accessLevel = entitlementsMap[module];
-                return (React.createElement(Radio, { onClick: () => handleOnChange(module, ACCESS_LEVEL_READ_ONLY), checked: accessLevel === ACCESS_LEVEL_READ_ONLY }));
+                return (_jsx(Radio, { onClick: () => handleOnChange(module, ACCESS_LEVEL_READ_ONLY), checked: accessLevel === ACCESS_LEVEL_READ_ONLY }));
             },
         },
         hidden: {
@@ -95,7 +96,7 @@ const EntitlementsListForm = (props) => {
             render: (params) => {
                 const module = params.data.name;
                 const accessLevel = entitlementsMap[module];
-                return (React.createElement(Radio, { onClick: () => handleOnChange(module, ACCESS_LEVEL_HIDDEN), checked: accessLevel === ACCESS_LEVEL_HIDDEN }));
+                return (_jsx(Radio, { onClick: () => handleOnChange(module, ACCESS_LEVEL_HIDDEN), checked: accessLevel === ACCESS_LEVEL_HIDDEN }));
             },
         },
     };
@@ -105,16 +106,14 @@ const EntitlementsListForm = (props) => {
         props.adaptableOptions.initialState.Theme?.CurrentTheme) {
         theme = props.adaptableOptions.initialState.Theme.CurrentTheme;
     }
-    return (React.createElement(Box, { className: `${theme} twa:flex-1 twa:h-full` },
-        React.createElement(DataSource, { data: data, primaryKey: "name" },
-            React.createElement(InfiniteTableGrid, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }))));
+    return (_jsx(Box, { className: `${theme} twa:flex-1 twa:h-full`, children: _jsx(DataSource, { data: data, primaryKey: "name", children: _jsx(InfiniteTableGrid, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }) }) }));
 };
 const DefaultEntitlementForm = (props) => {
     const abOptions = props.adaptableOptions;
     const entitlementOptions = props.adaptableOptions?.entitlementOptions;
     const defaultEntitlement = entitlementOptions?.defaultAccessLevel;
     if (typeof defaultEntitlement === 'function') {
-        return (React.createElement(HelpBlock, { className: "twa:mb-2" }, "Default Entitlement is controlled by a custom function"));
+        return (_jsx(HelpBlock, { className: "twa:mb-2", children: "Default Entitlement is controlled by a custom function" }));
     }
     const handleDefaultEntitlementChange = React.useCallback((accessLevel) => {
         props.onChangedAptableOptions({
@@ -125,16 +124,10 @@ const DefaultEntitlementForm = (props) => {
             },
         });
     }, [abOptions?.entitlementOptions?.defaultAccessLevel]);
-    return (React.createElement(FormLayout, { className: "twa:mb-2" },
-        React.createElement(FormRow, { label: "Default Entitlement:" },
-            React.createElement(Radio, { onClick: () => handleDefaultEntitlementChange(ACCESS_LEVEL_FULL), checked: defaultEntitlement === ACCESS_LEVEL_FULL, className: "twa:mr-3" }, "Visible"),
-            React.createElement(Radio, { onClick: () => handleDefaultEntitlementChange(ACCESS_LEVEL_READ_ONLY), checked: defaultEntitlement === ACCESS_LEVEL_READ_ONLY, className: "twa:mr-3" }, "Read Only"),
-            React.createElement(Radio, { onClick: () => handleDefaultEntitlementChange(ACCESS_LEVEL_HIDDEN), checked: defaultEntitlement === ACCESS_LEVEL_HIDDEN }, "Hidden"))));
+    return (_jsx(FormLayout, { className: "twa:mb-2", children: _jsxs(FormRow, { label: "Default Entitlement:", children: [_jsx(Radio, { onClick: () => handleDefaultEntitlementChange(ACCESS_LEVEL_FULL), checked: defaultEntitlement === ACCESS_LEVEL_FULL, className: "twa:mr-3", children: "Visible" }), _jsx(Radio, { onClick: () => handleDefaultEntitlementChange(ACCESS_LEVEL_READ_ONLY), checked: defaultEntitlement === ACCESS_LEVEL_READ_ONLY, className: "twa:mr-3", children: "Read Only" }), _jsx(Radio, { onClick: () => handleDefaultEntitlementChange(ACCESS_LEVEL_HIDDEN), checked: defaultEntitlement === ACCESS_LEVEL_HIDDEN, children: "Hidden" })] }) }));
 };
 const EntitlementsForm = (props) => {
     let abOptions = props.adaptableOptions;
-    return (React.createElement(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
-        React.createElement(DefaultEntitlementForm, { ...props }),
-        React.createElement(EntitlementsListForm, { ...props })));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: [_jsx(DefaultEntitlementForm, { ...props }), _jsx(EntitlementsListForm, { ...props })] }));
 };
 export default EntitlementsForm;

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

@@ -1,40 +1,30 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { CheckBox } from '../../../components/CheckBox';
 import HelpBlock from '../../../components/HelpBlock';
 import { Box } from '../../../components/Flex';
 const GridOptionsForm = (props) => {
     let { gridOptions } = props;
-    return (React.createElement(Box, { className: "twa:p-2" },
-        React.createElement(HelpBlock, null, "Grid Options"),
-        React.createElement(FormLayout, { className: "twa:m-2", columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
-            React.createElement(FormRow, { label: "Enable Cell Selection" },
-                React.createElement(CheckBox, { checked: !!gridOptions.cellSelection, onChange: (enableCellSelection) => {
-                        gridOptions = { ...gridOptions, cellSelection: enableCellSelection };
-                        props.onChangedGridOptions(gridOptions);
-                    } })),
-            React.createElement(FormRow, { label: "Show Filter Bar" },
-                React.createElement(CheckBox, { checked: gridOptions.defaultColDef?.floatingFilter, onChange: (floatingFilter) => {
-                        gridOptions = {
-                            ...gridOptions,
-                            defaultColDef: {
-                                floatingFilter,
-                            },
-                        };
-                        props.onChangedGridOptions(gridOptions);
-                    } })),
-            React.createElement(FormRow, { label: "Suppress Column Virtualisation" },
-                React.createElement(CheckBox, { checked: gridOptions.suppressColumnVirtualisation, onChange: (suppressColumnVirtualisation) => {
-                        gridOptions = {
-                            ...gridOptions,
-                            suppressColumnVirtualisation: suppressColumnVirtualisation,
-                        };
-                        props.onChangedGridOptions(gridOptions);
-                    } })),
-            React.createElement(FormRow, { label: "Show Column Menu Button" },
-                React.createElement(CheckBox, { checked: gridOptions.suppressMenuHide, onChange: (suppressMenuHide) => {
-                        gridOptions = { ...gridOptions, suppressMenuHide: suppressMenuHide };
-                        props.onChangedGridOptions(gridOptions);
-                    } })))));
+    return (_jsxs(Box, { className: "twa:p-2", children: [_jsx(HelpBlock, { children: "Grid Options" }), _jsxs(FormLayout, { className: "twa:m-2", columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }], children: [_jsx(FormRow, { label: "Enable Cell Selection", children: _jsx(CheckBox, { checked: !!gridOptions.cellSelection, onChange: (enableCellSelection) => {
+                                gridOptions = { ...gridOptions, cellSelection: enableCellSelection };
+                                props.onChangedGridOptions(gridOptions);
+                            } }) }), _jsx(FormRow, { label: "Show Filter Bar", children: _jsx(CheckBox, { checked: gridOptions.defaultColDef?.floatingFilter, onChange: (floatingFilter) => {
+                                gridOptions = {
+                                    ...gridOptions,
+                                    defaultColDef: {
+                                        floatingFilter,
+                                    },
+                                };
+                                props.onChangedGridOptions(gridOptions);
+                            } }) }), _jsx(FormRow, { label: "Suppress Column Virtualisation", children: _jsx(CheckBox, { checked: gridOptions.suppressColumnVirtualisation, onChange: (suppressColumnVirtualisation) => {
+                                gridOptions = {
+                                    ...gridOptions,
+                                    suppressColumnVirtualisation: suppressColumnVirtualisation,
+                                };
+                                props.onChangedGridOptions(gridOptions);
+                            } }) }), _jsx(FormRow, { label: "Show Column Menu Button", children: _jsx(CheckBox, { checked: gridOptions.suppressMenuHide, onChange: (suppressMenuHide) => {
+                                gridOptions = { ...gridOptions, suppressMenuHide: suppressMenuHide };
+                                props.onChangedGridOptions(gridOptions);
+                            } }) })] })] }));
 };
 export default GridOptionsForm;

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckBox } from '../../../../components/CheckBox';
 import DropdownButton from '../../../../components/DropdownButton';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
@@ -35,7 +35,7 @@ export const UIOptionsSidebarForm = (props) => {
     const { gridOptions, onChange } = props;
     const sideBar = prepareSidebarDef(gridOptions.sideBar);
     const renderSidebarCheckbox = (sidebarName) => {
-        return (React.createElement(CheckBox, { className: "twa:mr-3", key: sidebarName, checked: isSidebarChecked(sideBar, sidebarName), onChange: (check) => handleToolpanelsChange(sidebarName, check) }, StringExtensions.Humanize(sidebarName)));
+        return (_jsx(CheckBox, { className: "twa:mr-3", checked: isSidebarChecked(sideBar, sidebarName), onChange: (check) => handleToolpanelsChange(sidebarName, check), children: StringExtensions.Humanize(sidebarName) }, sidebarName));
     };
     const handleToolpanelsChange = (panelName, check) => {
         let newPanels = sideBar?.toolPanels ?? [];
@@ -73,14 +73,8 @@ export const UIOptionsSidebarForm = (props) => {
         };
         props.onChange(newGridOptions);
     };
-    return (React.createElement(Box, null,
-        React.createElement(HelpBlock, null, "Tool Panels"),
-        React.createElement(Box, { className: "twa:m-2" },
-            React.createElement(Flex, { className: "twa:mb-2" }, ALL_SIDEBAR_OPTIONS.map(renderSidebarCheckbox)),
-            React.createElement(FormLayout, { columns: [{ name: 'label' }, { name: 'children' }] },
-                React.createElement(FormRow, { label: "Position" },
-                    React.createElement(DropdownButton, { columns: ['label'], items: [
-                            { label: 'Left', onClick: () => handleSidebarPositionChange('left') },
-                            { label: 'Right', onClick: () => handleSidebarPositionChange('right') },
-                        ] }, sidebarPosition === 'left' ? 'Left' : 'Right'))))));
+    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: [
+                                    { label: 'Left', onClick: () => handleSidebarPositionChange('left') },
+                                    { label: 'Right', onClick: () => handleSidebarPositionChange('right') },
+                                ], children: sidebarPosition === 'left' ? 'Left' : 'Right' }) }) })] })] }));
 };

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { ModuleManager } from '../../../../components/DragAndDropContext/ModuleManager';
 import HelpBlock from '../../../../components/HelpBlock';
@@ -90,23 +91,10 @@ export const UIOptionsStatusbarForm = (props) => {
             },
         });
     };
-    return (React.createElement(Box, null,
-        React.createElement(HelpBlock, null, "Status Bar"),
-        React.createElement(Box, { className: "twa:p-2" },
-            React.createElement(NocodeWizardFormBox, null,
-                React.createElement(Box, { as: "b" }, "Create Adaptable Statusbar Panel"),
-                React.createElement(FormLayout, { className: "twa:mt-2" },
-                    React.createElement(FormRow, { label: "Panel Name" },
-                        React.createElement(Input, { value: adaptablePanelTitle, placeholder: 'Adaptable Panel Name', onChange: (event) => setAdaptablePanelTitle(event.target.value) })),
-                    React.createElement(FormRow, { label: "Align" },
-                        React.createElement(DropdownButton, { columns: ['label'], items: alignOptions }, alignOptions.find((option) => option.value === adaptablePanelAlign)?.label)),
-                    React.createElement(FormRow, { label: "" },
-                        React.createElement(SimpleButton, { disabled: !isAdaptablePanelTitleAvailable, onClick: handleNewAdaptablePanel, icon: "plus", variant: "raised" }, "Add"),
-                        !isAdaptablePanelTitleAvailable && (React.createElement(Box, { className: "twa:mt-2 twa:text-error" }, "Adaptable panel name must be unique."))))),
-            React.createElement(ModuleManager, { permittedActions: {
-                    createTab: false,
-                    dragAndDropTab: false,
-                    deleteTab: false,
-                    editTabName: false,
-                }, onTabsChange: handleTabChange, disabled: disabled, tabs: tabs, availableItems: availableItems, tabsTitle: 'Status Bar Panels', unusedPanelTitle: "Ag Grid Status Bar Panels", dragItemText: "Drag into a Status Bar Panel below" }))));
+    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: {
+                            createTab: false,
+                            dragAndDropTab: false,
+                            deleteTab: false,
+                            editTabName: false,
+                        }, onTabsChange: handleTabChange, disabled: disabled, tabs: tabs, availableItems: availableItems, tabsTitle: 'Status Bar Panels', unusedPanelTitle: "Ag Grid Status Bar Panels", dragItemText: "Drag into a Status Bar Panel below" })] })] }));
 };

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

@@ -1,16 +1,8 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tabs } from '../../../../components/Tabs';
 import { UIOptionsSidebarForm } from './UIOptionsSidebarForm';
 import { UIOptionsStatusbarForm } from './UIOptionsStatusbarForm';
 import { Box } from '../../../../components/Flex';
 export const UIElementsForm = (props) => {
-    return (React.createElement(Box, { className: "twa:p-2" },
-        React.createElement(Tabs, null,
-            React.createElement(Tabs.Tab, null, "Tool Panel"),
-            React.createElement(Tabs.Tab, null, "Status Bar"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(UIOptionsSidebarForm, { gridOptions: props.gridOptions, onChange: props.onChangedGridOptions })),
-            React.createElement(Tabs.Content, null,
-                React.createElement(UIOptionsStatusbarForm, { gridOptions: props.gridOptions, onChange: props.onChangedGridOptions })),
-            ' ')));
+    return (_jsx(Box, { className: "twa:p-2", children: _jsxs(Tabs, { children: [_jsx(Tabs.Tab, { children: "Tool Panel" }), _jsx(Tabs.Tab, { children: "Status Bar" }), _jsx(Tabs.Content, { children: _jsx(UIOptionsSidebarForm, { gridOptions: props.gridOptions, onChange: props.onChangedGridOptions }) }), _jsx(Tabs.Content, { children: _jsx(UIOptionsStatusbarForm, { gridOptions: props.gridOptions, onChange: props.onChangedGridOptions }) }), ' '] }) }));
 };

package/src/View/AdaptableWizardView/Wizard.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useReducer, useState, useEffect } from 'react';
 import { prepareDataSource, prepareGridOptions } from './helper';
 import ConfigurationDialog from './AdaptableConfigurationDialog';
@@ -82,7 +82,7 @@ export const Wizard = (props) => {
     };
     let wizard;
     if (props.skipToWizard || state.dropped) {
-        wizard = (React.createElement(ConfigurationDialog, { startSections: props.startSections, adaptableConfig: {
+        wizard = (_jsx(ConfigurationDialog, { startSections: props.startSections, adaptableConfig: {
                 adaptableOptions: state.adaptableOptions,
                 gridOptions: state.gridOptions,
             }, onCancel: () => {
@@ -106,8 +106,5 @@ export const Wizard = (props) => {
         }
     }, []);
     const ddEnabled = props.ddEnabled ?? !props.fetchData;
-    return (React.createElement(React.Fragment, null,
-        ddEnabled && (React.createElement(FileDroppable, { key: droppableKey, className: 'ab-NocodeWizard', toJSON: props.fileContentsToJSON, readFile: props.readFile, fileAccept: props.fileAccept, helpText: props.helpText, message: state.error, defaultText: props.defaultActionMessage, dragOverText: props.dragOverActionMessage, loadingText: props.loadingMessage, onDropSuccess: handleDataSource })),
-        isDataLoading && (React.createElement(Flex, { className: 'ab-NocodeWizard', alignItems: "center", justifyContent: "center", flexDirection: "column" }, props.loadingMessage || 'Loading ...')),
-        wizard));
+    return (_jsxs(_Fragment, { children: [ddEnabled && (_jsx(FileDroppable, { className: 'ab-NocodeWizard', toJSON: props.fileContentsToJSON, readFile: props.readFile, fileAccept: props.fileAccept, helpText: props.helpText, message: state.error, defaultText: props.defaultActionMessage, dragOverText: props.dragOverActionMessage, loadingText: props.loadingMessage, onDropSuccess: handleDataSource }, droppableKey)), isDataLoading && (_jsx(Flex, { className: 'ab-NocodeWizard', alignItems: "center", justifyContent: "center", flexDirection: "column", children: props.loadingMessage || 'Loading ...' })), wizard] }));
 };

package/src/View/AdaptableWizardView/index.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Wizard } from './Wizard';
-const AdaptableWizardView = (props) => React.createElement(Wizard, { ...props });
+const AdaptableWizardView = (props) => _jsx(Wizard, { ...props });
 export default AdaptableWizardView;

package/src/View/Alert/ActiveAlertsPanel.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useAdaptable } from '../AdaptableContext';
 import * as ModuleConstants from '../../Utilities/Constants/ModuleConstants';
 import { AdaptableObjectCompactList } from '../Components/AdaptableObjectList/AdaptableObjectCompactList';
@@ -15,5 +15,5 @@ export const ActiveAlertsPanel = () => {
             alert.IsSuspended = liveAlertDef.IsSuspended;
         }
     });
-    return React.createElement(AdaptableObjectCompactList, { abObjects: alerts, module: filterModule });
+    return _jsx(AdaptableObjectCompactList, { abObjects: alerts, module: filterModule });
 };

package/src/View/Alert/ActiveAlertsPanelItemLabel.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { allIcons } from '../../components/icons';
 import UIHelper from '../UIHelper';
 import { Box } from '../../components/Flex';
@@ -10,8 +10,6 @@ export const ActiveAlertsPanelItemLabel = (props) => {
     };
     const iconName = UIHelper.getGlyphByMessageType(props.data.alertDefinition.MessageType);
     const IconCmp = allIcons[iconName];
-    const icon = IconCmp ? React.createElement(IconCmp, null) : null;
-    return (React.createElement(Box, null,
-        React.createElement(Box, { className: "twa:float-left", style: iconStyle }, icon),
-        props.data.header));
+    const icon = IconCmp ? _jsx(IconCmp, {}) : null;
+    return (_jsxs(Box, { children: [_jsx(Box, { className: "twa:float-left", style: iconStyle, children: icon }), props.data.header] }));
 };

package/src/View/Alert/AlertEmptyView.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
 import { useAdaptable } from '../AdaptableContext';
 export const AlertEmptyView = (props) => {
@@ -7,5 +7,5 @@ export const AlertEmptyView = (props) => {
     const text = accessLevel == ACCESS_LEVEL_READ_ONLY
         ? 'You have no Alert Definitions.'
         : "Click 'New' to create a new Alert Definition - this will include the Rule which triggers the Alert, and the behaviour of the Alert.";
-    return React.createElement(React.Fragment, null, text);
+    return _jsx(_Fragment, { children: text });
 };

package/src/View/Alert/AlertStatusSubPanel.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { useAdaptable } from '../AdaptableContext';
@@ -45,6 +46,6 @@ export const AlertStatusPanel = () => {
             setStyle(initialStyle);
         }, statusbarHighlightDuration);
     }, [alerts]);
-    let alertsPanel = React.createElement(ActiveAlertsPanel, null);
-    return (React.createElement(StatusBarPanel, { tooltip: module.moduleInfo.ModuleName, "data-name": module.moduleInfo.ModuleName, style: { backgroundColor: style.background, color: style.color }, onAction: handleAction, icon: module.moduleInfo.Glyph, popover: alerts.length ? alertsPanel : null, content: text }));
+    let alertsPanel = _jsx(ActiveAlertsPanel, {});
+    return (_jsx(StatusBarPanel, { tooltip: module.moduleInfo.ModuleName, "data-name": module.moduleInfo.ModuleName, style: { backgroundColor: style.background, color: style.color }, onAction: handleAction, icon: module.moduleInfo.Glyph, popover: alerts.length ? alertsPanel : null, content: text }));
 };

package/src/View/Alert/AlertViewPanel.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { connect } from 'react-redux';
 import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
@@ -27,18 +28,13 @@ class AlertViewPanelComponent extends React.Component {
             : this.props.AdaptableAlerts.length == 1
                 ? '1 Alert'
                 : this.props.AdaptableAlerts.length + ' Alerts';
-        const alertsPanel = React.createElement(ActiveAlertsPanel, null);
+        const alertsPanel = _jsx(ActiveAlertsPanel, {});
         const isToolbar = this.props.viewType === 'Toolbar';
         const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(Flex, { alignItems: "stretch", className: clsx(`ab-${elementType}__Alert__wrap twa:gap-1`, {
+        return (_jsxs(Flex, { alignItems: "stretch", className: clsx(`ab-${elementType}__Alert__wrap twa:gap-1`, {
                 'twa:min-w-[140px] twa:w-[140px]': isToolbar,
                 [`twa:flex-1`]: !isToolbar,
-            }) },
-            React.createElement(Flex, { key: `${buttonTextColor}_${buttonBackground}_${collapsedText}`, 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 } }, collapsedText),
-            this.props.AdaptableAlerts.length > 0 && (React.createElement(Flex, { className: 'twa:gap-1' },
-                React.createElement(Flex, { className: "twa:flex twa:box-border" },
-                    React.createElement(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' }, 'Clear Alerts')),
-                React.createElement(AdaptablePopover, { className: `ab-${elementType}__Alert__info`, headerText: "Alerts Details", bodyText: [alertsPanel], MessageType: 'Info', useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })))));
+            }), 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 })] }))] }));
     }
 }
 function mapStateToProps(state, ownProps) {

package/src/View/Alert/Utilities/getAlertType.d.ts

@@ -4,7 +4,8 @@ export declare enum AlertType {
     Validation = "Validation",
     RowChange = "RowChange",
     Aggregation = "Aggregation",
-    Observable = "Observable"
+    Observable = "Observable",
+    Scheduled = "Scheduled"
 }
 /**
  * Based on alert shape the type is derived.

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

@@ -1,4 +1,5 @@
 import { OBSERVABLE_EXPRESSION_ROW_ADDED, OBSERVABLE_EXPRESSION_ROW_REMOVED, } from './../../../Utilities/Constants/GeneralConstants';
+import { getRuleAlertProperties, isScheduledAlertDefinition, } from '../../../Utilities/Helpers/ScheduledAlertHelper';
 export var AlertType;
 (function (AlertType) {
     AlertType["DataChange"] = "DataChange";
@@ -6,6 +7,7 @@ export var AlertType;
     AlertType["RowChange"] = "RowChange";
     AlertType["Aggregation"] = "Aggregation";
     AlertType["Observable"] = "Observable";
+    AlertType["Scheduled"] = "Scheduled";
 })(AlertType || (AlertType = {}));
 /**
  * Based on alert shape the type is derived.
@@ -14,6 +16,9 @@ export var AlertType;
  * @param alert
  */
 export const getAlertType = (alert) => {
+    if (isScheduledAlertDefinition(alert)) {
+        return AlertType.Scheduled;
+    }
     if (alert.Rule.ObservableExpression) {
         if (alert.Rule.ObservableExpression.includes(OBSERVABLE_EXPRESSION_ROW_ADDED) ||
             alert.Rule.ObservableExpression.includes(OBSERVABLE_EXPRESSION_ROW_REMOVED)) {
@@ -25,14 +30,14 @@ export const getAlertType = (alert) => {
         return AlertType.Aggregation;
     }
     if (alert.Rule.BooleanExpression) {
-        if (alert.AlertProperties?.PreventEdit) {
+        if (getRuleAlertProperties(alert)?.PreventEdit) {
             return AlertType.Validation;
         }
         return AlertType.DataChange;
     }
     const predicates = alert.Rule.Predicates;
     if (predicates) {
-        return alert.AlertProperties?.PreventEdit ? AlertType.Validation : AlertType.DataChange;
+        return getRuleAlertProperties(alert)?.PreventEdit ? AlertType.Validation : AlertType.DataChange;
     }
     // the object is not a valid alert
     return null;
@@ -55,6 +60,9 @@ export const getAlertTypeText = (alertType) => {
         case AlertType.Observable:
             text = 'Observable';
             break;
+        case AlertType.Scheduled:
+            text = 'Scheduled';
+            break;
     }
     return text;
 };

package/src/View/Alert/Utilities/getDefaultAlertDefinition.d.ts

@@ -6,14 +6,28 @@ import { AlertType } from './getAlertType';
  */
 export declare const getDefaultAlertDefinition: (alertDefinition: AlertDefinition, type: AlertType) => {
     Uuid: string;
-    Name: string;
     Scope: import("../../../types").ColumnScope;
     Rule: import("../../../types").AlertRule;
+    AlertProperties?: import("../../../types").RuleAlertProperties;
+    AlertForm?: string | import("../../../types").AlertButtonForm;
+    Name: string;
+    MessageType: import("../../../types").AdaptableMessageType;
+    MessageHeader?: string;
+    MessageText?: string;
+    IsSuspended?: boolean;
+    Source?: "InitialState" | "User";
+    AdaptableVersion?: import("../../../types").AdaptableVersion;
+    IsReadOnly?: boolean;
+    Tags?: import("../../../types").AdaptableObjectTag[];
+    Metadata?: any;
+} | {
+    Uuid: string;
+    Name: string;
+    Schedule: import("../../../types").Schedule;
+    AlertProperties?: import("../../../types").ScheduledAlertProperties;
     MessageType: import("../../../types").AdaptableMessageType;
     MessageHeader?: string;
     MessageText?: string;
-    AlertProperties?: import("../../../types").AlertProperties;
-    AlertForm?: string | import("../../../types").AlertButtonForm;
     IsSuspended?: boolean;
     Source?: "InitialState" | "User";
     AdaptableVersion?: import("../../../types").AdaptableVersion;

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

@@ -1,4 +1,5 @@
 import ObjectFactory from '../../../Utilities/ObjectFactory';
+import { CreateEmptyScheduledAlertDefinition } from '../../../Utilities/Helpers/ScheduledAlertHelper';
 import { AlertType } from './getAlertType';
 /**
  * This logic should be moved into Object factory once we have types on alert definitions
@@ -27,5 +28,12 @@ export const getDefaultAlertDefinition = (alertDefinition, type) => {
             PreventEdit: true,
         };
     }
+    if (type === AlertType.Scheduled) {
+        return {
+            ...CreateEmptyScheduledAlertDefinition(alertDefinition.Name),
+            Uuid: alertDefinition.Uuid,
+            Name: alertDefinition.Name,
+        };
+    }
     return newAlert;
 };

package/src/View/Alert/Utilities/mapAlertDefinition.d.ts

@@ -1,2 +1,2 @@
 import { AdaptableApi, AlertDefinition } from '../../../types';
-export declare const mapAlertDefinition: (api: AdaptableApi, alertDefinition: AlertDefinition) => AlertDefinition;
+export declare const mapAlertDefinition: (api: AdaptableApi, alertDefinition: AlertDefinition) => import("../../../types").RuleBasedAlertDefinition | import("../../../types").ScheduledAlertDefinition;

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

@@ -1,4 +1,8 @@
+import { isRuleBasedAlertDefinition } from '../../../Utilities/Helpers/ScheduledAlertHelper';
 export const mapAlertDefinition = (api, alertDefinition) => {
+    if (!isRuleBasedAlertDefinition(alertDefinition)) {
+        return alertDefinition;
+    }
     const isRemovedRowChangeAlert = api.alertApi.internalApi.isAlertDefinitionForRemovedRowChangeEvent(alertDefinition);
     const mapValidButtonActions = (alertCommand) => {
         if (isRemovedRowChangeAlert) {