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

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',
             },

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

@@ -3,22 +3,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderScopeSummary = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const ValueSelector_1 = require("../../Components/ValueSelector");
+const Flex_1 = require("../../../components/Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const Tag_1 = require("../../../components/Tag/Tag");
 const renderScopeSummary = (data) => {
     const { api: { columnScopeApi: scopeApi }, } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const columnsInScope = scopeApi.getColumnsInScope(data.Scope);
     return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Box, null,
-            React.createElement(rebass_1.Text, { fontSize: 2 }, scopeApi.scopeIsAll(data.Scope)
+        React.createElement(Flex_1.Box, null,
+            React.createElement(Flex_1.Box, { className: "twa:text-2" }, scopeApi.scopeIsAll(data.Scope)
                 ? 'Changes to any Column in the row will trigger an Alert'
                 : null)),
-        React.createElement(rebass_1.Box, { style: { overflow: 'hidden' } }, 'ColumnIds' in data.Scope ? (React.createElement(React.Fragment, null,
-            React.createElement(rebass_1.Text, { fontSize: 2, mb: columnsInScope.length ? 2 : 0 }, "Changes in selected columns will trigger an alert"),
-            columnsInScope.length ? (React.createElement(ValueSelector_1.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(rebass_1.Box, null, 'DataTypes' in data.Scope ? (React.createElement(React.Fragment, null,
-            React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, "Changes in Columns with these Data Types trigger an Alert"),
-            React.createElement(ValueSelector_1.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(Flex_1.Box, { className: "twa:overflow-hidden" }, 'ColumnIds' in data.Scope ? (React.createElement(React.Fragment, null,
+            React.createElement(Flex_1.Box, { className: (0, clsx_1.default)('twa:text-2', columnsInScope.length ? 'twa:mb-2' : 'twa:mb-0') }, "Changes in selected columns will trigger an alert"),
+            columnsInScope.length ? (React.createElement(Tag_1.TagList, { tags: columnsInScope.map((c) => c.friendlyName) })) : null)) : null),
+        React.createElement(Flex_1.Box, null, 'DataTypes' in data.Scope ? (React.createElement(React.Fragment, null,
+            React.createElement(Flex_1.Box, { className: "twa:text-2 twa:mb-2" }, "Changes in Columns with these Data Types trigger an Alert"),
+            React.createElement(Tag_1.TagList, { tags: data.Scope.DataTypes.map((dataType) => {
+                    return `DataType: ${dataType}`;
+                }) }))) : null)));
 };
 exports.renderScopeSummary = renderScopeSummary;

package/src/View/BulkUpdate/BulkUpdatePopup.js

@@ -12,9 +12,9 @@ const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions"
 const PreviewResultsPanel_1 = require("../Components/PreviewResultsPanel");
 const PreviewHelper_1 = require("../../Utilities/Helpers/PreviewHelper");
 const BulkUpdateValueSelector_1 = require("../Components/Selectors/BulkUpdateValueSelector");
-const rebass_1 = require("rebass");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
+const Flex_1 = require("../../components/Flex");
 class BulkUpdatePopupComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -45,23 +45,23 @@ class BulkUpdatePopupComponent extends React.Component {
         if (!col) {
             return null;
         }
-        return (React.createElement(PanelWithImage_1.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_1.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_1.default, { marginTop: 2, marginBottom: 2 }, "Enter a date value. Alternatively, tick the checkbox and select from an existing column value."),
-                React.createElement(rebass_1.Flex, { padding: 2, flexDirection: "row", alignItems: "center" },
-                    React.createElement(rebass_1.Flex, { alignItems: "center", flexDirection: "row", flex: 1, marginRight: 2 },
-                        React.createElement(BulkUpdateValueSelector_1.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_1.default, { className: "twa:my-2" }, "Enter a date value. Alternatively, tick the checkbox and select from an existing column value."),
+                React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2" },
+                    React.createElement(Flex_1.Flex, { alignItems: "center", flexDirection: "row", className: "twa:flex-1 twa:mr-2" },
+                        React.createElement(BulkUpdateValueSelector_1.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_1.default, { disabled: StringExtensions_1.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_1.default, { marginTop: 2, marginBottom: 2 }, "Select an existing Column value from the dropdown, or enter a new value"),
-                React.createElement(rebass_1.Flex, { marginTop: 2, flexDirection: "row", alignItems: "center" },
-                    React.createElement(rebass_1.Flex, { alignItems: "center", flexDirection: "row", flex: 1, marginRight: 2 },
-                        React.createElement(BulkUpdateValueSelector_1.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_1.default, { className: "twa:my-2" }, "Select an existing Column value from the dropdown, or enter a new value"),
+                React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:mt-2 twa:gap-2 twa:items-stretch" },
+                    React.createElement(Flex_1.Flex, { alignItems: "center", flexDirection: "row", className: "twa:mr-2 twa:flex-1" },
+                        React.createElement(BulkUpdateValueSelector_1.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_1.default, { disabled: StringExtensions_1.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

@@ -5,8 +5,6 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Enums_1 = require("../../AdaptableState/Common/Enums");
 const PreviewResultsPanel_1 = require("../Components/PreviewResultsPanel");
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
 const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
 const BulkUpdateValueSelector_1 = require("../Components/Selectors/BulkUpdateValueSelector");
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
@@ -16,6 +14,8 @@ const UIHelper_1 = require("../UIHelper");
 const InternalRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/InternalRedux"));
 const BulkUpdateRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/BulkUpdateRedux"));
 const react_redux_1 = require("react-redux");
+const Flex_1 = require("../../components/Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 class BulkUpdateViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -49,13 +49,13 @@ class BulkUpdateViewPanelComponent extends React.Component {
             fill: 'currentColor',
         };
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(rebass_1.Flex, { minWidth: 150, flexDirection: "row", className: (0, join_1.default)(shouldDisable ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__BulkUpdate__wrap`), flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(rebass_1.Flex, null,
+        return (React.createElement(Flex_1.Flex, { flexDirection: "row", className: (0, clsx_1.default)(shouldDisable ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__BulkUpdate__wrap twa:min-w-[150px]`), flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+            React.createElement(Flex_1.Flex, null,
                 React.createElement(BulkUpdateValueSelector_1.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(rebass_1.Flex, null,
-                !shouldDisable && StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) && (React.createElement(ButtonApply_1.ButtonApply, { marginLeft: 2, className: `ab-${elementType}__BulkUpdate__apply`, onClick: () => this.onApplyClick(), style: applyStyle, tooltip: "Apply Bulk Update", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
+            React.createElement(Flex_1.Flex, null,
+                !shouldDisable && StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) && (React.createElement(ButtonApply_1.ButtonApply, { className: `ab-${elementType}__BulkUpdate__apply twa:ml-2`, onClick: () => this.onApplyClick(), style: applyStyle, tooltip: "Apply Bulk Update", disabled: StringExtensions_1.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_1.StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) && (React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMinWidth: 360, className: `ab-${elementType}__BulkUpdate__info`, headerText: "Preview Results", bodyText: [previewPanel], MessageType: UIHelper_1.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

@@ -4,7 +4,6 @@ exports.CalculatedColumnDefinitionWizardSection = exports.isValidCalculatedColum
 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 FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
@@ -12,14 +11,16 @@ const CheckBox_1 = require("../../../components/CheckBox");
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
 const Tabs_1 = require("../../../components/Tabs");
 const Tag_1 = require("../../../components/Tag");
+const Flex_1 = require("../../../components/Flex");
 const renderCalculatedColumnDefinitionSummary = (data) => {
-    return (React.createElement(rebass_1.Box, { fontSize: 2 },
-        React.createElement(rebass_1.Box, null,
-            "Column Identifier: ",
+    return (React.createElement(Flex_1.Box, { className: "twa:text-2 twa:grid twa:items-center twa:grid-cols-[auto_1fr] twa:gap-2" },
+        React.createElement(Flex_1.Box, null, "Column Identifier:"),
+        React.createElement(Flex_1.Box, null,
             React.createElement(Tag_1.Tag, null, data.ColumnId)),
-        data.FriendlyName ? (React.createElement(rebass_1.Box, { mt: 3 },
-            "Column Name: ",
-            React.createElement(Tag_1.Tag, null, data.FriendlyName ?? data.ColumnId))) : null));
+        data.FriendlyName ? (React.createElement(React.Fragment, null,
+            React.createElement(Flex_1.Box, null, "Column Name:"),
+            React.createElement(Flex_1.Box, null,
+                React.createElement(Tag_1.Tag, null, data.FriendlyName ?? data.ColumnId)))) : null));
 };
 exports.renderCalculatedColumnDefinitionSummary = renderCalculatedColumnDefinitionSummary;
 const isValidCalculatedColumnDefinition = (data, api) => {
@@ -64,11 +65,11 @@ const CalculatedColumnDefinitionWizardSection = (props) => {
             },
         });
     };
-    return (React.createElement(rebass_1.Box, { "data-name": 'calculated-column-definition' },
+    return (React.createElement(Flex_1.Box, { "data-name": 'calculated-column-definition' },
         React.createElement(Tabs_1.Tabs, { autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Column Details"),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Flex, { flexDirection: "row" },
+                React.createElement(Flex_1.Flex, { flexDirection: "row" },
                     React.createElement(FormLayout_1.default, null,
                         React.createElement(FormLayout_1.FormRow, { label: "Column Id" },
                             React.createElement(Input_1.default, { "data-name": "column-id", value: data.ColumnId || '', width: 300, autoFocus: !inEdit, disabled: inEdit, type: "text", placeholder: "Enter an Id for the column", onChange: handleColumnIdChange })),
@@ -82,9 +83,8 @@ const CalculatedColumnDefinitionWizardSection = (props) => {
                             React.createElement(Input_1.default, { "data-name": "header-tooltip", type: "text", width: 300, value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
                                     HeaderToolTip: e.target.value,
                                 }) })),
-                        ' ',
                         React.createElement(FormLayout_1.FormRow, { label: "" },
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "column-show-tooltip", onChange: (checked) => handleSpecialColumnSettingsChange({ ShowToolTip: checked }), checked: ShowToolTip }, "Show Expression as Cell Tooltip")))))),
-        ErrorMessage ? React.createElement(ErrorBox_1.default, { marginTop: 2 }, ErrorMessage) : null));
+        ErrorMessage ? React.createElement(ErrorBox_1.default, { className: "twa:mt-2" }, ErrorMessage) : null));
 };
 exports.CalculatedColumnDefinitionWizardSection = CalculatedColumnDefinitionWizardSection;

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

@@ -4,15 +4,15 @@ exports.CalculatedColumnExpressionWizardSection = exports.isValidCalculatedColum
 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 ExpressionEditor_1 = require("../../../components/ExpressionEditor");
 const Tabs_1 = require("../../../components/Tabs");
 const CodeBlock_1 = require("../../../components/CodeBlock");
 const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
+const Flex_1 = require("../../../components/Flex");
 const renderCalculatedColumnExpressionSummary = (data) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(rebass_1.Box, { fontSize: 2 },
+    return (React.createElement(Flex_1.Box, { className: "twa:text-2" },
         "Column scalar expression:",
         ' ',
         React.createElement(CodeBlock_1.CodeBlock, null, api.internalApi.getAdaptableQueryExpressionText(data.Query))));
@@ -64,11 +64,11 @@ const CalculatedColumnExpressionWizardSection = (props) => {
         React.createElement(Tabs_1.Tabs.Content, null, (() => {
             switch (props.expressionType) {
                 case 'ScalarExpression':
-                    return (React.createElement(ExpressionEditor_1.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_1.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_1.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_1.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

@@ -4,20 +4,19 @@ exports.CalculatedColumnSettingsWizardSection = exports.isValidCalculatedColumnS
 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 FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
 const Tabs_1 = require("../../../components/Tabs");
-const ValueSelector_1 = require("../../Components/ValueSelector");
 const SpecialColumnSettingsWizardStep_1 = require("../../SpecialColumnSettingsWizardStep");
 const getCalculatedColumnSettingsTags_1 = require("../Utilities/getCalculatedColumnSettingsTags");
 const Select_1 = require("../../../components/Select");
+const Flex_1 = require("../../../components/Flex");
+const Tag_1 = require("../../../components/Tag/Tag");
 const renderCalculatedColumnSettingsSummary = (data) => {
     const options = (0, getCalculatedColumnSettingsTags_1.getCalculatedColumnSettingsTags)(data.CalculatedColumnSettings);
-    return (React.createElement(rebass_1.Box, { fontSize: 2 },
-        React.createElement(ValueSelector_1.ValueOptionsTags, { toLabel: (x) => x, toIdentifier: (c) => c, readOnly: true, options: options, value: options })));
+    return React.createElement(Tag_1.TagList, { tags: options });
 };
 exports.renderCalculatedColumnSettingsSummary = renderCalculatedColumnSettingsSummary;
 const isValidCalculatedColumnSettings = (data) => {
@@ -70,11 +69,11 @@ const CalculatedColumnSettingsWizardSection = (props) => {
         { value: 'boolean', label: 'Boolean' },
         { value: 'numberArray', label: 'NumberArray' },
     ];
-    return (React.createElement(rebass_1.Box, { "data-name": 'calculated-column-settings' },
+    return (React.createElement(Flex_1.Box, { "data-name": 'calculated-column-settings' },
         React.createElement(Tabs_1.Tabs, { autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Column Settings"),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Flex, { flexDirection: "row" },
+                React.createElement(Flex_1.Flex, { flexDirection: "row" },
                     React.createElement(FormLayout_1.default, null,
                         React.createElement(FormLayout_1.FormRow, { label: "Data Type" },
                             React.createElement(Select_1.Select, { "data-name": "column-type", placeholder: "Select Data Type", options: options, value: dataType, onChange: (value) => handleDataTypeChange(value) })),
@@ -82,7 +81,7 @@ const CalculatedColumnSettingsWizardSection = (props) => {
                             React.createElement(Input_1.default, { "data-name": "column-width", type: "number", width: 300, value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
                                     Width: Number(e.target.value),
                                 }) })))))),
-        ErrorMessage ? React.createElement(ErrorBox_1.default, { marginTop: 2 }, ErrorMessage) : null,
+        ErrorMessage ? React.createElement(ErrorBox_1.default, { className: "twa:mt-2" }, ErrorMessage) : null,
         React.createElement(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: false, 
             // @ts-ignore CalculatedColumn has a broader DataType
             settings: data.CalculatedColumnSettings, onChange: handleSpecialColumnSettingsChange })));

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ExpressionType } from './CalculatedColumnWizard';
+import { type ExpressionType } from './calculatedColumnTypes';
 type CalculatedColumnTypeWizardSectionProps = {
     onTypeChange: (type: ExpressionType) => void;
     type: ExpressionType;

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

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CalculatedColumnTypeWizardSection = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const Tabs_1 = require("../../../components/Tabs");
 const TypeRadio_1 = require("../../Wizard/TypeRadio");
+const Flex_1 = require("../../../components/Flex");
 const CalculatedColumnTypeWizardSection = (props) => {
     return (React.createElement(Tabs_1.Tabs, null,
         React.createElement(Tabs_1.Tabs.Tab, null, "Calculated Column Expression 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: 'Standard', description: "The calculated value is derived from other cells in the row", checked: props.type === 'ScalarExpression', onClick: () => props.onTypeChange('ScalarExpression') }),
                 React.createElement(TypeRadio_1.TypeRadio, { text: 'Aggregated', description: "The calculated value is derived from other rows", checked: props.type === 'AggregatedScalarExpression', onClick: () => props.onTypeChange('AggregatedScalarExpression') }),
                 React.createElement(TypeRadio_1.TypeRadio, { text: 'Cumulative', description: "The calculated value is derived cumulatively from other rows", checked: props.type === 'CumulativeAggregatedExpression', onClick: () => props.onTypeChange('CumulativeAggregatedExpression') }),

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

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import { CalculatedColumn } from '../../../types';
 import { AdaptableOnePageWizardProps } from '../../Wizard/Interface/IAdaptableWizard';
-export declare const calculatedColumnTypes: readonly ["ScalarExpression", "AggregatedScalarExpression", "CumulativeAggregatedExpression", "QuantileAggregatedExpression"];
-export type ExpressionType = (typeof calculatedColumnTypes)[number];
 export interface CalculatedColumnWizardProps extends AdaptableOnePageWizardProps<CalculatedColumn> {
 }
 export declare const CalculatedColumnWizard: (props: CalculatedColumnWizardProps) => React.JSX.Element;