@adaptabletools/adaptable-cjs 21.2.2-canary.0 → 22.0.0-canary.1

package/src/View/AdaptableWizardView/Wizard.js

@@ -5,10 +5,10 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const helper_1 = require("./helper");
-const rebass_1 = require("rebass");
 const AdaptableConfigurationDialog_1 = tslib_1.__importDefault(require("./AdaptableConfigurationDialog"));
 const FileDroppable_1 = tslib_1.__importDefault(require("../../components/FileDroppable"));
 const Utils_1 = require("./Utils");
+const Flex_1 = require("../../components/Flex");
 exports.initialState = {
     dropped: false,
 };
@@ -113,7 +113,7 @@ const Wizard = (props) => {
     const ddEnabled = props.ddEnabled ?? !props.fetchData;
     return (React.createElement(React.Fragment, null,
         ddEnabled && (React.createElement(FileDroppable_1.default, { 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(rebass_1.Flex, { className: 'ab-NocodeWizard', alignItems: "center", justifyContent: "center", flexDirection: "column" }, props.loadingMessage || 'Loading ...')),
+        isDataLoading && (React.createElement(Flex_1.Flex, { className: 'ab-NocodeWizard', alignItems: "center", justifyContent: "center", flexDirection: "column" }, props.loadingMessage || 'Loading ...')),
         wizard));
 };
 exports.Wizard = Wizard;

package/src/View/AdaptableWizardView/index.js

@@ -2,9 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const styled_components_1 = require("styled-components");
-const theme_1 = tslib_1.__importDefault(require("../../theme"));
 const Wizard_1 = require("./Wizard");
-const AdaptableWizardView = (props) => (React.createElement(styled_components_1.ThemeProvider, { theme: theme_1.default },
-    React.createElement(Wizard_1.Wizard, { ...props })));
+const AdaptableWizardView = (props) => React.createElement(Wizard_1.Wizard, { ...props });
 exports.default = AdaptableWizardView;

package/src/View/Alert/ActiveAlertsPanelItemLabel.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActiveAlertsPanelItemLabel = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const icons_1 = require("../../components/icons");
 const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
+const Flex_1 = require("../../components/Flex");
 const ActiveAlertsPanelItemLabel = (props) => {
     const iconColor = UIHelper_1.default.getColorByMessageType(props.data.alertDefinition.MessageType);
     const iconStyle = {
@@ -15,8 +15,8 @@ const ActiveAlertsPanelItemLabel = (props) => {
     const iconName = UIHelper_1.default.getGlyphByMessageType(props.data.alertDefinition.MessageType);
     const IconCmp = icons_1.allIcons[iconName];
     const icon = IconCmp ? React.createElement(IconCmp, null) : null;
-    return (React.createElement(rebass_1.Box, null,
-        React.createElement(rebass_1.Text, { style: { float: 'left', ...iconStyle } }, icon),
+    return (React.createElement(Flex_1.Box, null,
+        React.createElement(Flex_1.Box, { className: "twa:float-left", style: iconStyle }, icon),
         props.data.header));
 };
 exports.ActiveAlertsPanelItemLabel = ActiveAlertsPanelItemLabel;

package/src/View/Alert/AlertStatusSubPanel.js

@@ -50,6 +50,6 @@ const AlertStatusPanel = () => {
         }, statusbarHighlightDuration);
     }, [alerts]);
     let alertsPanel = React.createElement(ActiveAlertsPanel_1.ActiveAlertsPanel, null);
-    return (React.createElement(StatusBarPanel_1.StatusBarPanel, { tooltip: module.moduleInfo.ModuleName, "data-name": module.moduleInfo.ModuleName, color: style.color, backgroundColor: style.background, onAction: handleAction, icon: module.moduleInfo.Glyph, popover: alerts.length ? alertsPanel : null, content: text }));
+    return (React.createElement(StatusBarPanel_1.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 }));
 };
 exports.AlertStatusPanel = AlertStatusPanel;

package/src/View/Alert/AlertViewPanel.js

@@ -6,10 +6,10 @@ const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const InternalRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/InternalRedux"));
 const AdaptablePopover_1 = require("../AdaptablePopover");
-const rebass_1 = require("rebass");
 const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
 const getAlertButtonStyle_1 = require("./Utilities/getAlertButtonStyle");
 const ActiveAlertsPanel_1 = require("./ActiveAlertsPanel");
+const Flex_1 = require("../../components/Flex");
 class AlertViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -33,9 +33,9 @@ class AlertViewPanelComponent extends React.Component {
                 : this.props.AdaptableAlerts.length + ' Alerts';
         const alertsPanel = React.createElement(ActiveAlertsPanel_1.ActiveAlertsPanel, null);
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(rebass_1.Flex, { alignItems: "stretch", className: `ab-${elementType}__Alert__wrap` },
-            React.createElement(rebass_1.Flex, { style: { borderRadius: 'var(--ab__border-radius)' }, className: `ab-${elementType}__Alert__text`, marginRight: 2, padding: 2, color: buttonTextColor, backgroundColor: buttonBackground, fontSize: 'var( --ab-font-size-2)', alignItems: "center" }, collapsedText),
-            this.props.AdaptableAlerts.length > 0 && (React.createElement(rebass_1.Flex, { alignItems: "center" },
+        return (React.createElement(Flex_1.Flex, { alignItems: "stretch", className: `ab-${elementType}__Alert__wrap` },
+            React.createElement(Flex_1.Flex, { className: `ab-${elementType}__Alert__text twa:rounded-standard twa:mr-2 twa:p-2 text-2`, style: { color: buttonTextColor, backgroundColor: buttonBackground }, alignItems: "center" }, collapsedText),
+            this.props.AdaptableAlerts.length > 0 && (React.createElement(Flex_1.Flex, { alignItems: "center" },
                 React.createElement(AdaptablePopover_1.AdaptablePopover, { className: `ab-${elementType}__Alert__info`, headerText: "", 
                     // tooltipText="Alerts"
                     bodyText: [alertsPanel], MessageType: messageType, useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })))));

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

@@ -7,24 +7,7 @@ import { AlertType } from './getAlertType';
 export declare const getDefaultAlertDefinition: (alertDefinition: AlertDefinition, type: AlertType) => {
     Uuid: string;
     Scope: import("../../../types").ColumnScope;
-    Rule: ({
-        Predicates?: never;
-    } & (({
-        BooleanExpression?: never;
-    } & (({
-        ObservableExpression?: never;
-    } & import("../../../types").AdaptableAggregatedBooleanQuery) | ({
-        AggregatedBooleanExpression?: never;
-    } & import("../../../types").AdaptableObservableQuery))) | ({
-        AggregatedBooleanExpression?: never;
-        ObservableExpression?: never;
-    } & import("../../../types").AdaptableBooleanQuery))) | ({
-        AggregatedBooleanExpression?: never;
-        ObservableExpression?: never;
-        BooleanExpression?: never;
-    } & {
-        Predicates: import("../../../types").AlertDefinitionPredicate[];
-    });
+    Rule: import("../../../types").AlertRule;
     MessageType: import("../../../types").AdaptableMessageType;
     MessageHeader?: string;
     MessageText?: string;
@@ -32,8 +15,8 @@ export declare const getDefaultAlertDefinition: (alertDefinition: AlertDefinitio
     AlertForm?: string | import("../../../types").AlertButtonForm;
     IsSuspended?: boolean;
     Source?: "InitialState" | "User";
-    AdaptableVersion?: `${string}.${string}.${string}`;
+    AdaptableVersion?: import("../../../types").AdaptableVersion;
     IsReadOnly?: boolean;
-    Tags?: string[];
+    Tags?: import("../../../types").AdaptableObjectTag[];
     Metadata?: any;
 };

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

@@ -7,14 +7,14 @@ const Tabs_1 = require("../../../components/Tabs");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const CheckBox_1 = require("../../../components/CheckBox");
 const CodeBlock_1 = require("../../../components/CodeBlock");
-const rebass_1 = require("rebass");
-const ValueSelector_1 = require("../../Components/ValueSelector");
 const StyleComponent_1 = require("../../Components/StyleComponent");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const AdaptableContext_1 = require("../../AdaptableContext");
 const StylePreview_1 = require("../../../components/StylePreview");
 const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
 const Select_1 = require("../../../components/Select");
+const Flex_1 = require("../../../components/Flex");
+const Tag_1 = require("../../../components/Tag/Tag");
 const HighlightStyle = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const options = [
@@ -42,9 +42,9 @@ const HighlightStyle = (props) => {
             value: 'custom',
         },
     ];
-    return (React.createElement(rebass_1.Box, { "data-name": props.dataName },
-        React.createElement(rebass_1.Flex, null,
-            React.createElement(CheckBox_1.CheckBox, { mr: 2, style: { alignItems: 'flex-start' }, checked: Boolean(props.highlight), onChange: (checked) => {
+    return (React.createElement(Flex_1.Box, { "data-name": props.dataName },
+        React.createElement(Flex_1.Flex, null,
+            React.createElement(CheckBox_1.CheckBox, { className: "twa:mr-2 twa:items-start", checked: Boolean(props.highlight), onChange: (checked) => {
                     props.onChange(checked);
                 } }, props.label),
             Boolean(props.highlight) && (React.createElement(Select_1.Select, { options: options2, value: typeof props.highlight === 'boolean' ? 'system' : 'custom', onChange: (value) => {
@@ -56,8 +56,8 @@ const HighlightStyle = (props) => {
                         props.onChange(initialStyle);
                     }
                 } }))),
-        typeof props.highlight === 'object' && (React.createElement(Panel_1.default, { margin: 2 },
-            React.createElement(rebass_1.Box, { paddingLeft: 3 },
+        typeof props.highlight === 'object' && (React.createElement(Panel_1.default, { className: "twa:m-2" },
+            React.createElement(Flex_1.Box, { className: "twa:pl-3" },
                 React.createElement(StyleComponent_1.StyleComponent, { headless: true, api: adaptable.api, Style: props.highlight, UpdateStyle: (style) => {
                         props.onChange(style);
                     } }))))));
@@ -79,7 +79,7 @@ const renderAlertBehaviourSummary = (alert, api, allowWrap = false) => {
             ? {
                 label: (React.createElement(React.Fragment, null,
                     "Show in ",
-                    React.createElement(CodeBlock_1.CodeBlock, { ml: 1, p: 0 }, `<div />`))),
+                    React.createElement(CodeBlock_1.CodeBlock, { className: "twa:p-0 twa:ml-1" }, `<div />`))),
                 id: 'showInDiv',
             }
             : null,
@@ -91,15 +91,17 @@ const renderAlertBehaviourSummary = (alert, api, allowWrap = false) => {
             id: 'none',
         });
     }
-    return (React.createElement(ValueSelector_1.ValueOptionsTags, { allowWrap: allowWrap, options: values, value: values.map((v) => v.id), readOnly: true, toIdentifier: (x) => x.id, toLabel: (x) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Tag_1.TagBox, null, values.map((x) => {
+            let label = React.createElement(Flex_1.Box, { className: "twa:flex twa:items-center" }, x.label);
             if (x.id === 'highlightCell' && typeof AlertProperties.HighlightCell === 'object') {
-                return (React.createElement(StylePreview_1.StylePreview, { padding: 0, mt: 0, styleObject: AlertProperties.HighlightCell }, "Highlight Cell"));
+                label = (React.createElement(StylePreview_1.StylePreview, { styleObject: AlertProperties.HighlightCell, className: "twa:mt-0 twa:p-0" }, "Highlight Cell"));
             }
             if (x.id === 'highlightRow' && typeof AlertProperties.HighlightRow === 'object') {
-                return (React.createElement(StylePreview_1.StylePreview, { padding: 0, mt: 0, styleObject: AlertProperties.HighlightRow }, "Highlight Row"));
+                label = (React.createElement(StylePreview_1.StylePreview, { styleObject: AlertProperties.HighlightRow, className: "twa:mt-0 twa:p-0" }, "Highlight Row"));
             }
-            return React.createElement(React.Fragment, null, x.label);
-        } }));
+            return React.createElement(Tag_1.Tag, { key: x.id }, label);
+        }))));
 };
 exports.renderAlertBehaviourSummary = renderAlertBehaviourSummary;
 const AlertBehaviourWizardSection = (props) => {
@@ -131,10 +133,10 @@ const AlertBehaviourWizardSection = (props) => {
     };
     return (React.createElement(Tabs_1.Tabs, null,
         React.createElement(Tabs_1.Tabs.Tab, null, api.internalApi.getCorrectEnglishVariant('Behaviour')),
-        React.createElement(Tabs_1.Tabs.Content, null,
+        React.createElement(Tabs_1.Tabs.Content, { className: "twa:flex twa:flex-col twa:gap-1" },
             hasPreventCellEdit && (React.createElement(CheckBox_1.CheckBox, { "data-name": "prevent-cell-edit", style: { alignItems: 'flex-start' }, checked: AlertProperties.PreventEdit, disabled: true },
                 "Prevent Cell Edit",
-                React.createElement(rebass_1.Text, { fontSize: 2, mt: 1 }, "(automatically undo data change which triggered Alert)"))),
+                React.createElement(Flex_1.Box, { className: "twa:text-2 twa:mt-1" }, "(automatically undo data change which triggered Alert)"))),
             hasHighlightCell && (React.createElement(HighlightStyle, { dataName: "highlight-cell", highlight: AlertProperties.HighlightCell, label: "Highlight Cell", onChange: (HighlightCell) => {
                     onChange({ HighlightCell });
                 } })),

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertButtonsEditor = void 0;
 const tslib_1 = require("tslib");
-const rebass_1 = require("rebass");
 const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
@@ -12,6 +11,8 @@ const Helper_1 = require("../../../Utilities/Helpers/Helper");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
 const AdaptableIconSelector_1 = require("../../Components/AdaptableIconSelector");
 const Select_1 = require("../../../components/Select");
+const Flex_1 = require("../../../components/Flex");
+const sentence_case_1 = require("sentence-case");
 function renderCommand(command) {
     switch (command) {
         case 'highlight-cell':
@@ -45,14 +46,8 @@ const TONE_OPTIONS = [
     }),
 ];
 function renderTone(option) {
-    return (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center" },
-        React.createElement(SimpleButton_1.default, { mr: 2, style: {
-                width: 10,
-                height: 10,
-                lineHeight: 0,
-                borderRadius: '100%',
-                background: 'currentColor',
-            }, tone: option.value, variant: "text" }),
+    return (React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center" },
+        React.createElement(SimpleButton_1.default, { className: "twa:mr-2 twa:w-[10px] twa:h-[10px] twa:line-height-0 twa:rounded-[100%] twa:bg-current", tone: option.value, variant: "text" }),
         option.label));
 }
 const AlertButtonsEditor = (props) => {
@@ -103,8 +98,8 @@ const AlertButtonsEditor = (props) => {
         });
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
-            React.createElement(rebass_1.Text, { fontSize: 2, mt: 3, mb: 2 }, "Add Buttons to the Alert Notification, and set Actions to perform when the Button is clicked"),
+        React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
+            React.createElement(Flex_1.Box, { className: "twa:text-2 twa:mt-3 twa:mb-2" }, "Add Buttons to the Alert Notification, and set Actions to perform when the Button is clicked"),
             React.createElement(SimpleButton_1.default, { icon: "plus", onClick: () => {
                     onChange([
                         ...(AlertButtons || []),
@@ -127,7 +122,7 @@ const AlertButtonsEditor = (props) => {
                 btnCommands = button.Command;
             }
             // filter out the adaptable standard commands
-            // const btnUserFunctions = btnCommands.filter((command) => !buttonCommands.includes(command));
+            const btnUserFunctions = btnCommands.filter((command) => !buttonCommands.includes(command));
             const setVariant = (variant) => {
                 onChange(AlertButtons.map((btn, i) => {
                     if (i === index) {
@@ -194,13 +189,13 @@ const AlertButtonsEditor = (props) => {
                         }));
                     } }));
             }
-            return (React.createElement(rebass_1.Box, { key: index, marginLeft: 3, style: {
+            return (React.createElement(Flex_1.Box, { key: index, className: "twa:ml-3", style: {
                     borderTop: index ? '1px dashed var(--ab-color-inputborder)' : '',
                 } },
-                React.createElement(FormLayout_1.default, { marginBottom: 2, paddingTop: 2 },
-                    React.createElement(FormLayout_1.FormRow, { label: React.createElement(rebass_1.Text, { fontSize: 2, style: { whiteSpace: 'nowrap' } }, "Button Text") },
-                        React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                            React.createElement(Input_1.default, { value: buttonLabel, mr: 2, style: { width: 80 }, onChange: (e) => {
+                React.createElement(FormLayout_1.default, { className: "twa:mb-2 twa:pt-2" },
+                    React.createElement(FormLayout_1.FormRow, { label: React.createElement(Flex_1.Box, { className: "twa:text-2 twa:whitespace-nowrap" }, "Button Text") },
+                        React.createElement(Flex_1.Flex, { flexDirection: "row" },
+                            React.createElement(Input_1.default, { value: buttonLabel, className: "twa:mr-2 twa:w-[80px]", onChange: (e) => {
                                     onChange(AlertButtons.map((btn, i) => {
                                         if (i === index) {
                                             return { ...btn, Label: e.target.value };
@@ -216,23 +211,31 @@ const AlertButtonsEditor = (props) => {
                                 }), renderSingleValue: (option) => `Variant: ${option.label}`, value: buttonStyle?.variant, onChange: (value) => {
                                     setVariant(value);
                                 } }),
-                            React.createElement(Select_1.Select, { style: { marginLeft: 'var(--ab-space-2)' }, options: TONE_OPTIONS, onChange: (value) => {
+                            React.createElement(Select_1.Select, { className: "twa:ml-2", options: TONE_OPTIONS, onChange: (value) => {
                                     if (value === 'text') {
                                         setTone(null);
                                         return;
                                     }
                                     setTone(value);
                                 }, value: buttonStyle?.tone ?? 'text' }),
-                            React.createElement(SimpleButton_1.default, { icon: "close", tone: "error", disabled: AlertButtons.length <= 1, marginLeft: 1, variant: "text", tooltip: AlertButtons.length <= 1 ? 'Cannot remove last button' : 'Remove button', onClick: () => {
+                            React.createElement(SimpleButton_1.default, { icon: "close", tone: "error", disabled: AlertButtons.length <= 1, className: "twa:ml-1", variant: "text", tooltip: AlertButtons.length <= 1 ? 'Cannot remove last button' : 'Remove button', onClick: () => {
                                     onChange(AlertButtons.filter((btn) => btn !== button));
                                 } }))),
-                    React.createElement(FormLayout_1.FormRow, { label: React.createElement(rebass_1.Text, { fontSize: 2 }, "Actions") }, buttonCommands.map((commandName) => {
-                        return (React.createElement(CheckBox_1.CheckBox, { key: commandName, marginRight: 3, onChange: (checked) => handleCommandChange(checked, commandName), checked: button.Command === commandName ||
-                                (Array.isArray(button.Command) && button.Command.includes(commandName)) },
-                            React.createElement(rebass_1.Text, { fontSize: 2 }, renderCommand(commandName))));
-                    })),
-                    iconSelector && (React.createElement(FormLayout_1.FormRow, { label: React.createElement(rebass_1.Text, { fontSize: 2 }, "Icon") },
-                        React.createElement(rebass_1.Box, null, iconSelector))))));
+                    React.createElement(FormLayout_1.FormRow, { label: React.createElement(Flex_1.Box, { className: "twa:text-2" }, "Actions") },
+                        buttonCommands.map((commandName) => {
+                            return (React.createElement(CheckBox_1.CheckBox, { key: commandName, className: "twa:mr-3", onChange: (checked) => handleCommandChange(checked, commandName), checked: button.Command === commandName ||
+                                    (Array.isArray(button.Command) && button.Command.includes(commandName)) },
+                                React.createElement(Flex_1.Box, { className: "twa:text-2" }, (0, sentence_case_1.sentenceCase)(commandName))));
+                        }),
+                        btnUserFunctions.length ? (React.createElement(CheckBox_1.CheckBox, { checked: true, disabled: true },
+                            React.createElement(Flex_1.Box, { className: "twa:text-2" },
+                                "User function",
+                                btnUserFunctions.length > 1 ? 's' : '',
+                                ":",
+                                ' ',
+                                btnUserFunctions.join(', ')))) : null),
+                    iconSelector && (React.createElement(FormLayout_1.FormRow, { label: React.createElement(Flex_1.Box, { className: "twa:text-2" }, "Icon") },
+                        React.createElement(Flex_1.Box, null, iconSelector))))));
         })));
 };
 exports.AlertButtonsEditor = AlertButtonsEditor;

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

@@ -6,16 +6,16 @@ const React = tslib_1.__importStar(require("react"));
 const Tabs_1 = require("../../../components/Tabs");
 const Radio_1 = tslib_1.__importStar(require("../../../components/Radio"));
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const rebass_1 = require("rebass");
 const CodeBlock_1 = require("../../../components/CodeBlock");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const ButtonInfo_1 = require("../../Components/Buttons/ButtonInfo");
 const DocumentationLinkConstants_1 = require("../../../Utilities/Constants/DocumentationLinkConstants");
 const Textarea_1 = tslib_1.__importDefault(require("../../../components/Textarea"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
+const Flex_1 = require("../../../components/Flex");
 const renderAlertMessageSummary = () => {
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(rebass_1.Text, { fontSize: 2 },
+    return (React.createElement(Flex_1.Box, { className: "twa:text-2" },
         "Message Type ",
         React.createElement(CodeBlock_1.CodeBlock, null, data.MessageType)));
 };
@@ -50,27 +50,23 @@ const AlertMessageWizardSection = (props) => {
                             MessageType,
                         });
                     } },
-                    React.createElement(Radio_1.default, { marginLeft: 1, value: "Info" }, "Info"),
-                    React.createElement(Radio_1.default, { marginLeft: 4, value: "Success" }, "Success"),
-                    React.createElement(Radio_1.default, { marginLeft: 4, value: "Warning" }, "Warning"),
-                    React.createElement(Radio_1.default, { marginLeft: 4, value: "Error" }, "Error")))),
-        React.createElement(Tabs_1.Tabs, { "data-name": "message-text", mt: 2, mb: 3, autoFocus: false },
+                    React.createElement(Radio_1.default, { className: "twa:ml-1", value: "Info" }, "Info"),
+                    React.createElement(Radio_1.default, { className: "twa:ml-4", value: "Success" }, "Success"),
+                    React.createElement(Radio_1.default, { className: "twa:ml-4", value: "Warning" }, "Warning"),
+                    React.createElement(Radio_1.default, { className: "twa:ml-4", value: "Error" }, "Error")))),
+        React.createElement(Tabs_1.Tabs, { "data-name": "message-text", className: "twa:mt-2 twa:mb-3", autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Message Text"),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Text, { fontSize: 2, mt: 3, mb: 2 }, "Text to display as the Alert Message (leave blank to show automated Message based on Alert Type)"),
-                ' ',
+                React.createElement(Flex_1.Box, { className: "twa:text-2 twa:mt-3 twa:mb-2" }, "Text to display as the Alert Message (leave blank to show automated Message based on Alert Type)"),
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Header" },
-                        React.createElement(Textarea_1.default, { minWidth: 300, rows: 3, placeholder: "(Use Default Header Message)", marginTop: 2, type: 'text', autoFocus: false, value: messageHeader ?? '', 
+                        React.createElement(Textarea_1.default, { className: "twa:min-w-[300px] twa:mt-2", rows: 3, placeholder: "(Use Default Header Message)", type: 'text', autoFocus: false, value: messageHeader ?? '', 
                             // placeholder="defaults to column name"
                             onChange: (e) => onMessageHeaderChange(e) })),
                     React.createElement(FormLayout_1.FormRow, { label: "Message" },
-                        React.createElement(Textarea_1.default, { minWidth: 300, rows: 3, marginTop: 2, type: 'text', autoFocus: false, value: messageText ?? '', onChange: (e) => onMessageTextChange(e) }))),
-                showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "alert-message-documentation", mt: 3, mb: 2, style: {
-                        fontSize: 'var(--ab-font-size-3)',
-                        padding: 0,
-                    } },
-                    React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, onClick: () => window.open(DocumentationLinkConstants_1.AlertMessageDocsLink, '_blank') }),
+                        React.createElement(Textarea_1.default, { className: "twa:min-w-[300px] twa:mt-2", rows: 3, type: 'text', autoFocus: false, value: messageText ?? '', onChange: (e) => onMessageTextChange(e) }))),
+                showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "alert-message-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3" },
+                    React.createElement(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(DocumentationLinkConstants_1.AlertMessageDocsLink, '_blank') }),
                     "See how to create dynamic Alert Messages using placeholders"))))));
 };
 exports.AlertMessageWizardSection = AlertMessageWizardSection;

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

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { AlertDefinition } from '../../../AdaptableState/AlertState';
 import { AdaptableApi } from '../../../types';
-import { BoxProps } from 'rebass';
 import { AlertType } from '../Utilities/getAlertType';
+import { BoxProps } from '../../../components/Flex';
 export declare const renderAlertNotificationSummary: () => React.JSX.Element;
 interface AlertPreviewProps extends BoxProps {
+    className?: string;
+    style?: React.CSSProperties;
     api: AdaptableApi;
     alertDefinition: AlertDefinition;
     focusFirstButton?: boolean;

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

@@ -6,14 +6,14 @@ const React = tslib_1.__importStar(require("react"));
 const Tabs_1 = require("../../../components/Tabs");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const CheckBox_1 = require("../../../components/CheckBox");
-const rebass_1 = require("rebass");
 const AdaptablePopupAlert_1 = require("../../Components/Popups/AdaptablePopupAlert");
 const AlertButtonsEditor_1 = require("./AlertButtonsEditor");
-const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
+const Flex_1 = require("../../../components/Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const renderAlertNotificationSummary = () => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     if (!data.AlertProperties?.DisplayNotification) {
-        return React.createElement(rebass_1.Text, { fontSize: 2 }, "No Alert Notification will be displayed");
+        return React.createElement(Flex_1.Box, { className: "twa:text-2" }, "No Alert Notification will be displayed");
     }
     return React.createElement(exports.AlertPreview, { api: api, alertDefinition: data });
 };
@@ -48,7 +48,7 @@ const AlertPreview = ({ alertDefinition, api, focusFirstButton, ...boxProps }) =
         };
         return result;
     }, [alertDefinition]);
-    return (React.createElement(rebass_1.Box, { ...boxProps, className: (0, join_1.default)(boxProps.className, 'ab-AlertPreview'), style: {
+    return (React.createElement(Flex_1.Box, { ...boxProps, className: (0, clsx_1.default)('ab-AlertPreview', boxProps.className), style: {
             border: '1px solid var(--ab-color-inputborder)',
             ...boxProps.style,
         } },
@@ -67,7 +67,7 @@ const AlertNotificationWizardSection = (props) => {
         data.AlertForm = api.alertApi.internalApi.getDefaultAlertNotificationForm();
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs_1.Tabs, { "data-name": "display-options", mt: 2, mb: 3, autoFocus: false },
+        React.createElement(Tabs_1.Tabs, { "data-name": "display-options", className: "twa:mt-2 twa:mb-3", autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Notification Options"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement("div", null,
@@ -96,7 +96,7 @@ const AlertNotificationWizardSection = (props) => {
                             }
                             props.onChange(newAlertDefinition);
                         } }, "Display a Notification when Alert is triggered (with action buttons)")),
-                data.AlertProperties?.DisplayNotification ? (typeof data.AlertForm === 'string' ? (React.createElement(rebass_1.Text, { fontSize: 2 }, "Alert buttons cannot be customized because form is dynamically driven")) : (React.createElement(AlertButtonsEditor_1.AlertButtonsEditor, { alertType: props.alertType, AlertButtons: data.AlertForm?.Buttons, api: api, adaptableAlert: adaptableAlert, onChange: (buttons) => {
+                data.AlertProperties?.DisplayNotification ? (typeof data.AlertForm === 'string' ? (React.createElement(Flex_1.Box, { className: "twa:text-2" }, "Alert buttons cannot be customized because form is dynamically driven")) : (React.createElement(AlertButtonsEditor_1.AlertButtonsEditor, { alertType: props.alertType, AlertButtons: data.AlertForm?.Buttons, api: api, adaptableAlert: adaptableAlert, onChange: (buttons) => {
                         props.onChange({
                             ...data,
                             AlertForm: {
@@ -107,6 +107,6 @@ const AlertNotificationWizardSection = (props) => {
                     } }))) : null)),
         data.AlertProperties?.DisplayNotification ? (React.createElement(Tabs_1.Tabs, { "data-name": "alert-preview", autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Alert Preview"),
-            React.createElement(Tabs_1.Tabs.Content, null, typeof data.AlertForm === 'string' ? (React.createElement(rebass_1.Text, { fontSize: 2 }, "Preview not available because form is dynamically driven")) : (React.createElement(exports.AlertPreview, { alertDefinition: data, api: api }))))) : null));
+            React.createElement(Tabs_1.Tabs.Content, null, typeof data.AlertForm === 'string' ? (React.createElement(Flex_1.Box, { className: "twa:text-2" }, "Preview not available because form is dynamically driven")) : (React.createElement(exports.AlertPreview, { alertDefinition: data, api: api }))))) : null));
 };
 exports.AlertNotificationWizardSection = AlertNotificationWizardSection;

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

@@ -9,8 +9,8 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const getAvailablePredicates_1 = require("../Utilities/getAvailablePredicates");
 const Tabs_1 = require("../../../components/Tabs");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const rebass_1 = require("rebass");
 const GeneralConstants_1 = require("./../../../Utilities/Constants/GeneralConstants");
+const Flex_1 = require("../../../components/Flex");
 const getRuleStepDescription = (alertType) => {
     switch (alertType) {
         case 'DataChange':
@@ -60,7 +60,7 @@ const RowChangeEditor = (props) => {
             },
         });
     };
-    return (React.createElement(rebass_1.Box, { p: 2 },
+    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
         React.createElement(Tabs_1.Tabs, null,
             React.createElement(Tabs_1.Tabs.Tab, null, "Row Change"),
             React.createElement(Tabs_1.Tabs.Content, null,

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

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertScopeWizardSection = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const Flex_1 = require("../../../components/Flex");
 const AlertScopeWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     let disableDataTypes = true;
@@ -14,7 +14,7 @@ const AlertScopeWizardSection = (props) => {
         disableDataTypes = false;
         disableColumns = false;
     }
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
         React.createElement(NewScopeComponent_1.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',

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

@@ -5,12 +5,12 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Tabs_1 = require("../../../components/Tabs");
 const getAlertType_1 = require("../Utilities/getAlertType");
-const rebass_1 = require("rebass");
 const TypeRadio_1 = require("../../Wizard/TypeRadio");
 const Tag_1 = require("../../../components/Tag");
+const Flex_1 = require("../../../components/Flex");
 const renderAlertTypeSummary = (alertType) => {
     const text = (0, getAlertType_1.getAlertTypeText)(alertType);
-    return (React.createElement(rebass_1.Box, null,
+    return (React.createElement(Flex_1.Box, null,
         React.createElement(Tag_1.Tag, null, text)));
 };
 exports.renderAlertTypeSummary = renderAlertTypeSummary;
@@ -18,7 +18,7 @@ const AlertTypeWizardSection = (props) => {
     return (React.createElement(Tabs_1.Tabs, null,
         React.createElement(Tabs_1.Tabs.Tab, null, "Alert Type"),
         React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(rebass_1.Flex, { flexDirection: "column" },
+            React.createElement(Flex_1.Flex, { flexDirection: "column" },
                 React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.DataChange), description: "A change has been made to the Grid's underlying data", checked: props.alertType === getAlertType_1.AlertType.DataChange, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.DataChange) }),
                 React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.RowChange), description: "A Row was added or removed from the data source", checked: props.alertType === getAlertType_1.AlertType.RowChange, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.RowChange) }),
                 React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Aggregation), description: "A change has been made to aggregated data (i.e. from multiple Rows)", onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Aggregation), checked: props.alertType === getAlertType_1.AlertType.Aggregation }),

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

@@ -4,7 +4,6 @@ exports.AlertWizard = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const rebass_1 = require("rebass");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Helper_1 = require("../../../Utilities/Helpers/Helper");
 const AlertScopeWizardSection_1 = require("./AlertScopeWizardSection");
@@ -25,6 +24,7 @@ const getAlertType_1 = require("../Utilities/getAlertType");
 const mapAlertDefinition_1 = require("../Utilities/mapAlertDefinition");
 const getDefaultAlertDefinition_1 = require("../Utilities/getDefaultAlertDefinition");
 const AlertNotificationWizardSection_1 = require("./AlertNotificationWizardSection");
+const Flex_1 = require("../../../components/Flex");
 const AlertWizard = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const dispatch = (0, react_redux_1.useDispatch)();
@@ -70,14 +70,14 @@ const AlertWizard = (props) => {
         setAlertType(newAlertType);
         setAlertDefinition((0, getDefaultAlertDefinition_1.getDefaultAlertDefinition)(alertDefinition, newAlertType));
     };
-    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: alertDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, modal: props.modal, data: alertDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Type',
                 details: (React.createElement(React.Fragment, null,
                     "Select ",
                     React.createElement("b", null, "what"),
                     " type of change in AdapTable will cause the Alert to fire")),
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(AlertTypeWizardSection_1.AlertTypeWizardSection, { alertType: alertType, onAlertTypeChange: handleAlertTypeChange }))),
                 renderSummary: () => (0, AlertTypeWizardSection_1.renderAlertTypeSummary)(alertType),
             },
@@ -102,21 +102,21 @@ const AlertWizard = (props) => {
             {
                 title: 'Message',
                 details: "Select the Alert's Message Type and Text",
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(AlertMessageWizardSection_1.AlertMessageWizardSection, { alertType: alertType, onChange: setAlertDefinition }))),
                 renderSummary: AlertMessageWizardSection_1.renderAlertMessageSummary,
             },
             {
                 title: 'Notification',
                 details: 'Create a Notification for the Alert',
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(AlertNotificationWizardSection_1.AlertNotificationWizardSection, { alertType: alertType, onChange: setAlertDefinition }))),
                 renderSummary: AlertNotificationWizardSection_1.renderAlertNotificationSummary,
             },
             {
                 title: behaviourSpelling,
                 details: 'Configure ' + behaviourSpelling + 's for the Alert',
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(AlertBehaviourWizardSection_1.AlertBehaviourWizardSection, { alertType: alertType, onChange: setAlertDefinition }))),
                 renderSummary: AlertBehaviourWizardSection_1.renderAlertBehaviourWizardSummary,
             },
@@ -124,14 +124,14 @@ const AlertWizard = (props) => {
                 details: 'Select Alert Tags',
                 title: 'Tags',
                 isVisible: () => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setAlertDefinition }))),
                 renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
             },
             '-',
             {
                 details: 'Review your Alert',
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null))),
                 title: 'Summary',
             },