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

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

@@ -1,4 +1,3 @@
-import { Flex, Box, Text } from 'rebass';
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 import Input from '../../../components/Input';
@@ -8,6 +7,8 @@ import { cloneObject } from '../../../Utilities/Helpers/Helper';
 import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
 import { AdaptableIconSelector } from '../../Components/AdaptableIconSelector';
 import { Select } from '../../../components/Select';
+import { Box, Flex } from '../../../components/Flex';
+import { sentenceCase } from 'sentence-case';
 function renderCommand(command) {
     switch (command) {
         case 'highlight-cell':
@@ -42,13 +43,7 @@ const TONE_OPTIONS = [
 ];
 function renderTone(option) {
     return (React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
-        React.createElement(SimpleButton, { mr: 2, style: {
-                width: 10,
-                height: 10,
-                lineHeight: 0,
-                borderRadius: '100%',
-                background: 'currentColor',
-            }, tone: option.value, variant: "text" }),
+        React.createElement(SimpleButton, { 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));
 }
 export const AlertButtonsEditor = (props) => {
@@ -100,7 +95,7 @@ export const AlertButtonsEditor = (props) => {
     }
     return (React.createElement(React.Fragment, null,
         React.createElement(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
-            React.createElement(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(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, { icon: "plus", onClick: () => {
                     onChange([
                         ...(AlertButtons || []),
@@ -123,7 +118,7 @@ export 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) {
@@ -190,13 +185,13 @@ export const AlertButtonsEditor = (props) => {
                         }));
                     } }));
             }
-            return (React.createElement(Box, { key: index, marginLeft: 3, style: {
+            return (React.createElement(Box, { key: index, className: "twa:ml-3", style: {
                     borderTop: index ? '1px dashed var(--ab-color-inputborder)' : '',
                 } },
-                React.createElement(FormLayout, { marginBottom: 2, paddingTop: 2 },
-                    React.createElement(FormRow, { label: React.createElement(Text, { fontSize: 2, style: { whiteSpace: 'nowrap' } }, "Button Text") },
+                React.createElement(FormLayout, { className: "twa:mb-2 twa:pt-2" },
+                    React.createElement(FormRow, { label: React.createElement(Box, { className: "twa:text-2 twa:whitespace-nowrap" }, "Button Text") },
                         React.createElement(Flex, { flexDirection: "row" },
-                            React.createElement(Input, { value: buttonLabel, mr: 2, style: { width: 80 }, onChange: (e) => {
+                            React.createElement(Input, { 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 };
@@ -212,22 +207,30 @@ export const AlertButtonsEditor = (props) => {
                                 }), renderSingleValue: (option) => `Variant: ${option.label}`, value: buttonStyle?.variant, onChange: (value) => {
                                     setVariant(value);
                                 } }),
-                            React.createElement(Select, { style: { marginLeft: 'var(--ab-space-2)' }, options: TONE_OPTIONS, onChange: (value) => {
+                            React.createElement(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, { 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, { 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(FormRow, { label: React.createElement(Text, { fontSize: 2 }, "Actions") }, buttonCommands.map((commandName) => {
-                        return (React.createElement(CheckBox, { key: commandName, marginRight: 3, onChange: (checked) => handleCommandChange(checked, commandName), checked: button.Command === commandName ||
-                                (Array.isArray(button.Command) && button.Command.includes(commandName)) },
-                            React.createElement(Text, { fontSize: 2 }, renderCommand(commandName))));
-                    })),
-                    iconSelector && (React.createElement(FormRow, { label: React.createElement(Text, { fontSize: 2 }, "Icon") },
+                    React.createElement(FormRow, { label: React.createElement(Box, { className: "twa:text-2" }, "Actions") },
+                        buttonCommands.map((commandName) => {
+                            return (React.createElement(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(Box, { className: "twa:text-2" }, sentenceCase(commandName))));
+                        }),
+                        btnUserFunctions.length ? (React.createElement(CheckBox, { checked: true, disabled: true },
+                            React.createElement(Box, { className: "twa:text-2" },
+                                "User function",
+                                btnUserFunctions.length > 1 ? 's' : '',
+                                ":",
+                                ' ',
+                                btnUserFunctions.join(', ')))) : null),
+                    iconSelector && (React.createElement(FormRow, { label: React.createElement(Box, { className: "twa:text-2" }, "Icon") },
                         React.createElement(Box, null, iconSelector))))));
         })));
 };

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

@@ -2,16 +2,16 @@ import * as React from 'react';
 import { Tabs } from '../../../components/Tabs';
 import Radio, { RadioGroup } from '../../../components/Radio';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { Text } from 'rebass';
 import { CodeBlock } from '../../../components/CodeBlock';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { ButtonInfo } from '../../Components/Buttons/ButtonInfo';
 import { AlertMessageDocsLink } from '../../../Utilities/Constants/DocumentationLinkConstants';
 import Textarea from '../../../components/Textarea';
 import HelpBlock from '../../../components/HelpBlock';
+import { Box } from '../../../components/Flex';
 export const renderAlertMessageSummary = () => {
     const { data } = useOnePageAdaptableWizardContext();
-    return (React.createElement(Text, { fontSize: 2 },
+    return (React.createElement(Box, { className: "twa:text-2" },
         "Message Type ",
         React.createElement(CodeBlock, null, data.MessageType)));
 };
@@ -45,26 +45,22 @@ export const AlertMessageWizardSection = (props) => {
                             MessageType,
                         });
                     } },
-                    React.createElement(Radio, { marginLeft: 1, value: "Info" }, "Info"),
-                    React.createElement(Radio, { marginLeft: 4, value: "Success" }, "Success"),
-                    React.createElement(Radio, { marginLeft: 4, value: "Warning" }, "Warning"),
-                    React.createElement(Radio, { marginLeft: 4, value: "Error" }, "Error")))),
-        React.createElement(Tabs, { "data-name": "message-text", mt: 2, mb: 3, autoFocus: false },
+                    React.createElement(Radio, { className: "twa:ml-1", value: "Info" }, "Info"),
+                    React.createElement(Radio, { className: "twa:ml-4", value: "Success" }, "Success"),
+                    React.createElement(Radio, { className: "twa:ml-4", value: "Warning" }, "Warning"),
+                    React.createElement(Radio, { className: "twa:ml-4", value: "Error" }, "Error")))),
+        React.createElement(Tabs, { "data-name": "message-text", className: "twa:mt-2 twa:mb-3", autoFocus: false },
             React.createElement(Tabs.Tab, null, "Message Text"),
             React.createElement(Tabs.Content, null,
-                React.createElement(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(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, null,
                     React.createElement(FormRow, { label: "Header" },
-                        React.createElement(Textarea, { minWidth: 300, rows: 3, placeholder: "(Use Default Header Message)", marginTop: 2, type: 'text', autoFocus: false, value: messageHeader ?? '', 
+                        React.createElement(Textarea, { 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(FormRow, { label: "Message" },
-                        React.createElement(Textarea, { minWidth: 300, rows: 3, marginTop: 2, type: 'text', autoFocus: false, value: messageText ?? '', onChange: (e) => onMessageTextChange(e) }))),
-                showDocumentationLinks && (React.createElement(HelpBlock, { "data-name": "alert-message-documentation", mt: 3, mb: 2, style: {
-                        fontSize: 'var(--ab-font-size-3)',
-                        padding: 0,
-                    } },
-                    React.createElement(ButtonInfo, { mr: 2, onClick: () => window.open(AlertMessageDocsLink, '_blank') }),
+                        React.createElement(Textarea, { className: "twa:min-w-[300px] twa:mt-2", rows: 3, type: 'text', autoFocus: false, value: messageText ?? '', onChange: (e) => onMessageTextChange(e) }))),
+                showDocumentationLinks && (React.createElement(HelpBlock, { "data-name": "alert-message-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3" },
+                    React.createElement(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(AlertMessageDocsLink, '_blank') }),
                     "See how to create dynamic Alert Messages using placeholders"))))));
 };

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

@@ -2,14 +2,14 @@ import * as React from 'react';
 import { Tabs } from '../../../components/Tabs';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { CheckBox } from '../../../components/CheckBox';
-import { Box, Text } from 'rebass';
 import { AdaptablePopupAlert } from '../../Components/Popups/AdaptablePopupAlert';
 import { AlertButtonsEditor } from './AlertButtonsEditor';
-import join from '../../../components/utils/join';
+import { Box } from '../../../components/Flex';
+import clsx from 'clsx';
 export const renderAlertNotificationSummary = () => {
     const { data, api } = useOnePageAdaptableWizardContext();
     if (!data.AlertProperties?.DisplayNotification) {
-        return React.createElement(Text, { fontSize: 2 }, "No Alert Notification will be displayed");
+        return React.createElement(Box, { className: "twa:text-2" }, "No Alert Notification will be displayed");
     }
     return React.createElement(AlertPreview, { api: api, alertDefinition: data });
 };
@@ -43,7 +43,7 @@ export const AlertPreview = ({ alertDefinition, api, focusFirstButton, ...boxPro
         };
         return result;
     }, [alertDefinition]);
-    return (React.createElement(Box, { ...boxProps, className: join(boxProps.className, 'ab-AlertPreview'), style: {
+    return (React.createElement(Box, { ...boxProps, className: clsx('ab-AlertPreview', boxProps.className), style: {
             border: '1px solid var(--ab-color-inputborder)',
             ...boxProps.style,
         } },
@@ -61,7 +61,7 @@ export const AlertNotificationWizardSection = (props) => {
         data.AlertForm = api.alertApi.internalApi.getDefaultAlertNotificationForm();
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs, { "data-name": "display-options", mt: 2, mb: 3, autoFocus: false },
+        React.createElement(Tabs, { "data-name": "display-options", className: "twa:mt-2 twa:mb-3", autoFocus: false },
             React.createElement(Tabs.Tab, null, "Notification Options"),
             React.createElement(Tabs.Content, null,
                 React.createElement("div", null,
@@ -90,7 +90,7 @@ export 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(Text, { fontSize: 2 }, "Alert buttons cannot be customized because form is dynamically driven")) : (React.createElement(AlertButtonsEditor, { alertType: props.alertType, AlertButtons: data.AlertForm?.Buttons, api: api, adaptableAlert: adaptableAlert, onChange: (buttons) => {
+                data.AlertProperties?.DisplayNotification ? (typeof data.AlertForm === 'string' ? (React.createElement(Box, { className: "twa:text-2" }, "Alert buttons cannot be customized because form is dynamically driven")) : (React.createElement(AlertButtonsEditor, { alertType: props.alertType, AlertButtons: data.AlertForm?.Buttons, api: api, adaptableAlert: adaptableAlert, onChange: (buttons) => {
                         props.onChange({
                             ...data,
                             AlertForm: {
@@ -101,5 +101,5 @@ export const AlertNotificationWizardSection = (props) => {
                     } }))) : null)),
         data.AlertProperties?.DisplayNotification ? (React.createElement(Tabs, { "data-name": "alert-preview", autoFocus: false },
             React.createElement(Tabs.Tab, null, "Alert Preview"),
-            React.createElement(Tabs.Content, null, typeof data.AlertForm === 'string' ? (React.createElement(Text, { fontSize: 2 }, "Preview not available because form is dynamically driven")) : (React.createElement(AlertPreview, { alertDefinition: data, api: api }))))) : null));
+            React.createElement(Tabs.Content, null, typeof data.AlertForm === 'string' ? (React.createElement(Box, { className: "twa:text-2" }, "Preview not available because form is dynamically driven")) : (React.createElement(AlertPreview, { alertDefinition: data, api: api }))))) : null));
 };

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

@@ -5,8 +5,8 @@ import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableW
 import { getAvailablePredicateDefinitions } from '../Utilities/getAvailablePredicates';
 import { Tabs } from '../../../components/Tabs';
 import Radio from '../../../components/Radio';
-import { Box } from 'rebass';
 import { OBSERVABLE_EXPRESSION_ROW_ADDED, OBSERVABLE_EXPRESSION_ROW_REMOVED, } from './../../../Utilities/Constants/GeneralConstants';
+import { Box } from '../../../components/Flex';
 export const getRuleStepDescription = (alertType) => {
     switch (alertType) {
         case 'DataChange':
@@ -54,7 +54,7 @@ const RowChangeEditor = (props) => {
             },
         });
     };
-    return (React.createElement(Box, { p: 2 },
+    return (React.createElement(Box, { className: "twa:p-2" },
         React.createElement(Tabs, null,
             React.createElement(Tabs.Tab, null, "Row Change"),
             React.createElement(Tabs.Content, null,

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Flex } from 'rebass';
 import { NewScopeComponent } from '../../Components/NewScopeComponent';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { Flex } from '../../../components/Flex';
 export const AlertScopeWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
     let disableDataTypes = true;
@@ -10,7 +10,7 @@ export const AlertScopeWizardSection = (props) => {
         disableDataTypes = false;
         disableColumns = false;
     }
-    return (React.createElement(Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
+    return (React.createElement(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
         React.createElement(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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { Tabs } from '../../../components/Tabs';
 import { AlertType, getAlertTypeText } from '../Utilities/getAlertType';
-import { Box, Flex } from 'rebass';
 import { TypeRadio } from '../../Wizard/TypeRadio';
 import { Tag } from '../../../components/Tag';
+import { Box, Flex } from '../../../components/Flex';
 export const renderAlertTypeSummary = (alertType) => {
     const text = getAlertTypeText(alertType);
     return (React.createElement(Box, null,

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { Box } from 'rebass';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
 import { AlertScopeWizardSection } from './AlertScopeWizardSection';
@@ -21,6 +20,7 @@ import { AlertType, getAlertType } from '../Utilities/getAlertType';
 import { mapAlertDefinition } from '../Utilities/mapAlertDefinition';
 import { getDefaultAlertDefinition } from '../Utilities/getDefaultAlertDefinition';
 import { AlertNotificationWizardSection, renderAlertNotificationSummary, } from './AlertNotificationWizardSection';
+import { Box } from '../../../components/Flex';
 export const AlertWizard = (props) => {
     const { api } = useAdaptable();
     const dispatch = useDispatch();
@@ -66,14 +66,14 @@ export const AlertWizard = (props) => {
         setAlertType(newAlertType);
         setAlertDefinition(getDefaultAlertDefinition(alertDefinition, newAlertType));
     };
-    return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: alertDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return (React.createElement(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(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(AlertTypeWizardSection, { alertType: alertType, onAlertTypeChange: handleAlertTypeChange }))),
                 renderSummary: () => renderAlertTypeSummary(alertType),
             },
@@ -98,21 +98,21 @@ export const AlertWizard = (props) => {
             {
                 title: 'Message',
                 details: "Select the Alert's Message Type and Text",
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(AlertMessageWizardSection, { alertType: alertType, onChange: setAlertDefinition }))),
                 renderSummary: renderAlertMessageSummary,
             },
             {
                 title: 'Notification',
                 details: 'Create a Notification for the Alert',
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(AlertNotificationWizardSection, { alertType: alertType, onChange: setAlertDefinition }))),
                 renderSummary: renderAlertNotificationSummary,
             },
             {
                 title: behaviourSpelling,
                 details: 'Configure ' + behaviourSpelling + 's for the Alert',
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(AlertBehaviourWizardSection, { alertType: alertType, onChange: setAlertDefinition }))),
                 renderSummary: renderAlertBehaviourWizardSummary,
             },
@@ -120,14 +120,14 @@ export const AlertWizard = (props) => {
                 details: 'Select Alert Tags',
                 title: 'Tags',
                 isVisible: () => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(ObjectTagsWizardSection, { onChange: setAlertDefinition }))),
                 renderSummary: renderObjectTagsSummary,
             },
             '-',
             {
                 details: 'Review your Alert',
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(OnePageWizardSummary, null))),
                 title: 'Summary',
             },

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

@@ -1,19 +1,22 @@
 import * as React from 'react';
-import { Box, Text } from 'rebass';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { ValueOptionsTags } from '../../Components/ValueSelector';
+import { Box } from '../../../components/Flex';
+import clsx from 'clsx';
+import { TagList } from '../../../components/Tag/Tag';
 export const renderScopeSummary = (data) => {
     const { api: { columnScopeApi: scopeApi }, } = useOnePageAdaptableWizardContext();
     const columnsInScope = scopeApi.getColumnsInScope(data.Scope);
     return (React.createElement(React.Fragment, null,
         React.createElement(Box, null,
-            React.createElement(Text, { fontSize: 2 }, scopeApi.scopeIsAll(data.Scope)
+            React.createElement(Box, { className: "twa:text-2" }, scopeApi.scopeIsAll(data.Scope)
                 ? 'Changes to any Column in the row will trigger an Alert'
                 : null)),
-        React.createElement(Box, { style: { overflow: 'hidden' } }, 'ColumnIds' in data.Scope ? (React.createElement(React.Fragment, null,
-            React.createElement(Text, { fontSize: 2, mb: columnsInScope.length ? 2 : 0 }, "Changes in selected columns will trigger an alert"),
-            columnsInScope.length ? (React.createElement(ValueOptionsTags, { options: columnsInScope, value: columnsInScope.map((c) => c.columnId), toLabel: (c) => c.friendlyName, allowWrap: true, readOnly: true, renderLabel: (c) => React.createElement(React.Fragment, null, c), toIdentifier: (c) => c.columnId })) : null)) : null),
+        React.createElement(Box, { className: "twa:overflow-hidden" }, 'ColumnIds' in data.Scope ? (React.createElement(React.Fragment, null,
+            React.createElement(Box, { className: clsx('twa:text-2', columnsInScope.length ? 'twa:mb-2' : 'twa:mb-0') }, "Changes in selected columns will trigger an alert"),
+            columnsInScope.length ? (React.createElement(TagList, { tags: columnsInScope.map((c) => c.friendlyName) })) : null)) : null),
         React.createElement(Box, null, 'DataTypes' in data.Scope ? (React.createElement(React.Fragment, null,
-            React.createElement(Text, { fontSize: 2, mb: 2 }, "Changes in Columns with these Data Types trigger an Alert"),
-            React.createElement(ValueOptionsTags, { readOnly: true, options: data.Scope.DataTypes, value: data.Scope.DataTypes, toLabel: (c) => c, allowWrap: true, renderLabel: (c) => React.createElement(React.Fragment, null, `DataType: ${c}`), toIdentifier: (c) => c }))) : null)));
+            React.createElement(Box, { className: "twa:text-2 twa:mb-2" }, "Changes in Columns with these Data Types trigger an Alert"),
+            React.createElement(TagList, { tags: data.Scope.DataTypes.map((dataType) => {
+                    return `DataType: ${dataType}`;
+                }) }))) : null)));
 };

package/src/View/BulkUpdate/BulkUpdatePopup.js

@@ -8,9 +8,9 @@ import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
 import { PreviewResultsPanel } from '../Components/PreviewResultsPanel';
 import { PreviewHelper } from '../../Utilities/Helpers/PreviewHelper';
 import { BulkUpdateValueSelector } from '../Components/Selectors/BulkUpdateValueSelector';
-import { Flex } from 'rebass';
 import SimpleButton from '../../components/SimpleButton';
 import HelpBlock from '../../components/HelpBlock';
+import { Flex } from '../../components/Flex';
 class BulkUpdatePopupComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -41,23 +41,23 @@ class BulkUpdatePopupComponent extends React.Component {
         if (!col) {
             return null;
         }
-        return (React.createElement(PanelWithImage, { bodyProps: { padding: 2 }, flex: 1, glyphicon: this.props.moduleInfo.Glyph, header: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), variant: "primary" },
+        return (React.createElement(PanelWithImage, { bodyProps: { className: 'twa:p-2' }, className: "twa:flex-1 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" },
             col.dataType == 'date' ? (React.createElement(React.Fragment, null,
-                React.createElement(HelpBlock, { marginTop: 2, marginBottom: 2 }, "Enter a date value. Alternatively, tick the checkbox and select from an existing column value."),
-                React.createElement(Flex, { padding: 2, flexDirection: "row", alignItems: "center" },
-                    React.createElement(Flex, { alignItems: "center", flexDirection: "row", flex: 1, marginRight: 2 },
-                        React.createElement(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), allowNew: false, style: { width: '100%', maxWidth: 'inherit' } })),
+                React.createElement(HelpBlock, { className: "twa:my-2" }, "Enter a date value. Alternatively, tick the checkbox and select from an existing column value."),
+                React.createElement(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2" },
+                    React.createElement(Flex, { alignItems: "center", flexDirection: "row", className: "twa:flex-1 twa:mr-2" },
+                        React.createElement(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]" })),
                     React.createElement(SimpleButton, { disabled: StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
                             this.props.PreviewInfo.previewValidationSummary.validationResult == 'All', onClick: () => {
                             this.onApplyClick();
                         }, variant: "raised", tone: "accent" }, "Apply Bulk Update")))) : (React.createElement(React.Fragment, null,
-                React.createElement(HelpBlock, { marginTop: 2, marginBottom: 2 }, "Select an existing Column value from the dropdown, or enter a new value"),
-                React.createElement(Flex, { marginTop: 2, flexDirection: "row", alignItems: "center" },
-                    React.createElement(Flex, { alignItems: "center", flexDirection: "row", flex: 1, marginRight: 2 },
-                        React.createElement(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns), style: { width: '100%', maxWidth: 'inherit' } })),
+                React.createElement(HelpBlock, { className: "twa:my-2" }, "Select an existing Column value from the dropdown, or enter a new value"),
+                React.createElement(Flex, { flexDirection: "row", alignItems: "center", className: "twa:mt-2 twa:gap-2 twa:items-stretch" },
+                    React.createElement(Flex, { alignItems: "center", flexDirection: "row", className: "twa:mr-2 twa:flex-1" },
+                        React.createElement(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]" })),
                     React.createElement(SimpleButton, { disabled: StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
                             this.props.PreviewInfo.previewValidationSummary.validationResult == 'All' ||
-                            hasDataTypeError, variant: "raised", tone: "accent", marginRight: 2, onClick: () => {
+                            hasDataTypeError, variant: "raised", tone: "accent", onClick: () => {
                             this.onApplyClick();
                         } }, "Apply Bulk Update"),
                     ' ',

package/src/View/BulkUpdate/BulkUpdateViewPanel.js

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import { StatusColour } from '../../AdaptableState/Common/Enums';
 import { PreviewResultsPanel } from '../Components/PreviewResultsPanel';
-import { Flex } from 'rebass';
-import join from '../../components/utils/join';
 import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
 import { BulkUpdateValueSelector } from '../Components/Selectors/BulkUpdateValueSelector';
 import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
@@ -12,6 +10,8 @@ import { UIHelper } from '../UIHelper';
 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';
 class BulkUpdateViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -45,13 +45,13 @@ class BulkUpdateViewPanelComponent extends React.Component {
             fill: 'currentColor',
         };
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(Flex, { minWidth: 150, flexDirection: "row", className: join(shouldDisable ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__BulkUpdate__wrap`), flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+        return (React.createElement(Flex, { flexDirection: "row", className: clsx(shouldDisable ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__BulkUpdate__wrap twa:min-w-[150px]`), flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             React.createElement(Flex, null,
                 React.createElement(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, newLabel: "New", existingLabel: "Existing", dropdownButtonProps: {
                         listMinWidth: 160,
                     }, className: `ab-${elementType}__BulkUpdate__select`, disabled: shouldDisable, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: selectedColumn, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns) })),
             React.createElement(Flex, null,
-                !shouldDisable && StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) && (React.createElement(ButtonApply, { marginLeft: 2, className: `ab-${elementType}__BulkUpdate__apply`, onClick: () => this.onApplyClick(), style: applyStyle, tooltip: "Apply Bulk Update", disabled: StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
+                !shouldDisable && StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) && (React.createElement(ButtonApply, { className: `ab-${elementType}__BulkUpdate__apply twa:ml-2`, onClick: () => this.onApplyClick(), style: applyStyle, tooltip: "Apply Bulk Update", disabled: StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
                         (this.props.PreviewInfo != null &&
                             this.props.PreviewInfo.previewValidationSummary.validationResult == 'All'), accessLevel: this.props.accessLevel }, this.props.viewType === 'ToolPanel' && 'Update')),
                 !shouldDisable && StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) && (React.createElement(AdaptablePopover, { popoverMinWidth: 360, className: `ab-${elementType}__BulkUpdate__info`, headerText: "Preview Results", bodyText: [previewPanel], MessageType: UIHelper.getMessageTypeByStatusColour(statusColour), useButton: true, showEvent: 'focus', hideEvent: "blur" })))));

package/src/View/CalculatedColumn/CalculatedColumnSummary.d.ts

@@ -17,5 +17,5 @@ export declare class CalculatedColumnSummaryComponent extends React.Component<Ca
 }
 export declare let CalculatedColumnSummary: import("react-redux").ConnectedComponent<typeof CalculatedColumnSummaryComponent, {
     context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction>>;
-    store?: import("redux").Store<any, import("redux").UnknownAction, unknown>;
+    store?: import("redux").Store;
 }>;

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { Box, Flex } from 'rebass';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import Input from '../../../components/Input';
@@ -8,14 +7,16 @@ 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';
 export const renderCalculatedColumnDefinitionSummary = (data) => {
-    return (React.createElement(Box, { fontSize: 2 },
+    return (React.createElement(Box, { className: "twa:text-2 twa:grid twa:items-center twa:grid-cols-[auto_1fr] twa:gap-2" },
+        React.createElement(Box, null, "Column Identifier:"),
         React.createElement(Box, null,
-            "Column Identifier: ",
             React.createElement(Tag, null, data.ColumnId)),
-        data.FriendlyName ? (React.createElement(Box, { mt: 3 },
-            "Column Name: ",
-            React.createElement(Tag, null, data.FriendlyName ?? data.ColumnId))) : null));
+        data.FriendlyName ? (React.createElement(React.Fragment, null,
+            React.createElement(Box, null, "Column Name:"),
+            React.createElement(Box, null,
+                React.createElement(Tag, null, data.FriendlyName ?? data.ColumnId)))) : null));
 };
 export const isValidCalculatedColumnDefinition = (data, api) => {
     const columns = api.columnApi.getColumns();
@@ -76,8 +77,7 @@ export const CalculatedColumnDefinitionWizardSection = (props) => {
                             React.createElement(Input, { "data-name": "header-tooltip", type: "text", width: 300, value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
                                     HeaderToolTip: e.target.value,
                                 }) })),
-                        ' ',
                         React.createElement(FormRow, { label: "" },
                             React.createElement(CheckBox, { "data-name": "column-show-tooltip", onChange: (checked) => handleSpecialColumnSettingsChange({ ShowToolTip: checked }), checked: ShowToolTip }, "Show Expression as Cell Tooltip")))))),
-        ErrorMessage ? React.createElement(ErrorBox, { marginTop: 2 }, ErrorMessage) : null));
+        ErrorMessage ? React.createElement(ErrorBox, { className: "twa:mt-2" }, ErrorMessage) : null));
 };

package/src/View/CalculatedColumn/Wizard/CalculatedColumnExpressionWizardSection.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { CalculatedColumn } from '../../../types';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
-import { ExpressionType } from './CalculatedColumnWizard';
+import { type ExpressionType } from './calculatedColumnTypes';
 export type CalculatedColumnExpressionWizardSectionProps = {
     onChange: (data: CalculatedColumn) => void;
     expressionType: ExpressionType;

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

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { useMemo } from 'react';
-import { Box } from 'rebass';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { ExpressionEditor } from '../../../components/ExpressionEditor';
 import { Tabs } from '../../../components/Tabs';
 import { CodeBlock } from '../../../components/CodeBlock';
 import { Humanize } from '../../../Utilities/Extensions/StringExtensions';
+import { Box } from '../../../components/Flex';
 export const renderCalculatedColumnExpressionSummary = (data) => {
     const { api } = useOnePageAdaptableWizardContext();
-    return (React.createElement(Box, { fontSize: 2 },
+    return (React.createElement(Box, { className: "twa:text-2" },
         "Column scalar expression:",
         ' ',
         React.createElement(CodeBlock, null, api.internalApi.getAdaptableQueryExpressionText(data.Query))));
@@ -58,11 +58,11 @@ export const CalculatedColumnExpressionWizardSection = (props) => {
         React.createElement(Tabs.Content, null, (() => {
             switch (props.expressionType) {
                 case 'ScalarExpression':
-                    return (React.createElement(ExpressionEditor, { type: 'scalar', module: moduleInfo.ModuleName, style: { paddingLeft: 0 }, value: data.Query.ScalarExpression, onChange: (ScalarExpression) => setCalculatedColumnExpression({ ScalarExpression }), initialData: initialData, columns: columns, fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), isFullExpression: true, api: api }));
+                    return (React.createElement(ExpressionEditor, { type: 'scalar', module: moduleInfo.ModuleName, className: "twa:pl-0", value: data.Query.ScalarExpression, onChange: (ScalarExpression) => setCalculatedColumnExpression({ ScalarExpression }), initialData: initialData, columns: columns, fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), isFullExpression: true, api: api }));
                 case 'AggregatedScalarExpression':
                 case 'CumulativeAggregatedExpression':
                 case 'QuantileAggregatedExpression':
-                    return (React.createElement(ExpressionEditor, { type: getEditorType(props.expressionType), module: moduleInfo.ModuleName, style: { paddingLeft: 0 }, value: data.Query.AggregatedScalarExpression, onChange: (AggregatedScalarExpression) => setCalculatedColumnExpression({ AggregatedScalarExpression }), initialData: initialData, columns: columns, namedQueries: api.namedQueryApi.getNamedQueries(), isFullExpression: true, api: api }));
+                    return (React.createElement(ExpressionEditor, { type: getEditorType(props.expressionType), module: moduleInfo.ModuleName, className: "twa:pl-0", value: data.Query.AggregatedScalarExpression, onChange: (AggregatedScalarExpression) => setCalculatedColumnExpression({ AggregatedScalarExpression }), initialData: initialData, columns: columns, namedQueries: api.namedQueryApi.getNamedQueries(), isFullExpression: true, api: api }));
                 default:
                     return React.createElement(React.Fragment, null);
             }

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

@@ -1,19 +1,18 @@
 import * as React from 'react';
 import { useMemo } from 'react';
-import { Box, Flex } from 'rebass';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import Input from '../../../components/Input';
 import ErrorBox from '../../../components/ErrorBox';
 import { Tabs } from '../../../components/Tabs';
-import { ValueOptionsTags } from '../../Components/ValueSelector';
 import { SpecialColumnSettingsWizardStep } from '../../SpecialColumnSettingsWizardStep';
 import { getCalculatedColumnSettingsTags } from '../Utilities/getCalculatedColumnSettingsTags';
 import { Select } from '../../../components/Select';
+import { Box, Flex } from '../../../components/Flex';
+import { TagList } from '../../../components/Tag/Tag';
 export const renderCalculatedColumnSettingsSummary = (data) => {
     const options = getCalculatedColumnSettingsTags(data.CalculatedColumnSettings);
-    return (React.createElement(Box, { fontSize: 2 },
-        React.createElement(ValueOptionsTags, { toLabel: (x) => x, toIdentifier: (c) => c, readOnly: true, options: options, value: options })));
+    return React.createElement(TagList, { tags: options });
 };
 export const isValidCalculatedColumnSettings = (data) => {
     if (!data.CalculatedColumnSettings?.DataType) {
@@ -76,7 +75,7 @@ export const CalculatedColumnSettingsWizardSection = (props) => {
                             React.createElement(Input, { "data-name": "column-width", type: "number", width: 300, value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
                                     Width: Number(e.target.value),
                                 }) })))))),
-        ErrorMessage ? React.createElement(ErrorBox, { marginTop: 2 }, ErrorMessage) : null,
+        ErrorMessage ? React.createElement(ErrorBox, { className: "twa:mt-2" }, ErrorMessage) : null,
         React.createElement(SpecialColumnSettingsWizardStep, { isEditable: false, 
             // @ts-ignore CalculatedColumn has a broader DataType
             settings: data.CalculatedColumnSettings, onChange: handleSpecialColumnSettingsChange })));