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

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 })));

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Flex } from 'rebass';
 import { Tabs } from '../../../components/Tabs';
 import { TypeRadio } from '../../Wizard/TypeRadio';
+import { Flex } from '../../../components/Flex';
 export const CalculatedColumnTypeWizardSection = (props) => {
     return (React.createElement(Tabs, null,
         React.createElement(Tabs.Tab, null, "Calculated Column Expression Type"),

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;

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { Box } from 'rebass';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
 import { CalculatedColumnExpressionWizardSection, isValidCalculatedColumnExpression, renderCalculatedColumnExpressionSummary, } from './CalculatedColumnExpressionWizardSection';
@@ -15,12 +14,7 @@ import { getExpressionType } from '../utils';
 import { Humanize } from '../../../Utilities/Extensions/StringExtensions';
 import { Tag } from '../../../components/Tag';
 import { CalculatedColumnTypeWizardSection } from './CalculatedColumnTypeSection';
-export const calculatedColumnTypes = [
-    'ScalarExpression',
-    'AggregatedScalarExpression',
-    'CumulativeAggregatedExpression',
-    'QuantileAggregatedExpression',
-];
+import { Box } from '../../../components/Flex';
 export const CalculatedColumnWizard = (props) => {
     const adaptable = useAdaptable();
     const allCalculatedColumns = useSelector((state) => state.CalculatedColumn.CalculatedColumns);
@@ -74,12 +68,12 @@ export const CalculatedColumnWizard = (props) => {
             {
                 title: 'Type',
                 renderSummary: () => {
-                    return (React.createElement(Box, null,
+                    return (React.createElement(Box, { className: "twa:text-2" },
                         "Expression Type: ",
                         React.createElement(Tag, null, Humanize(expressionType))));
                 },
                 render: () => {
-                    return (React.createElement(Box, { p: 2 },
+                    return (React.createElement(Box, { className: "twa:p-2" },
                         React.createElement(CalculatedColumnTypeWizardSection, { type: expressionType, onTypeChange: handleExpressionTypeChange })));
                 },
             },
@@ -89,7 +83,7 @@ export const CalculatedColumnWizard = (props) => {
                 isValid: isValidCalculatedColumnDefinition,
                 renderSummary: renderCalculatedColumnDefinitionSummary,
                 render: () => {
-                    return (React.createElement(Box, { padding: 2 },
+                    return (React.createElement(Box, { className: "twa:p-2" },
                         React.createElement(CalculatedColumnDefinitionWizardSection, { isEdit: isEdit, onChange: setCalculatedColumn })));
                 },
             },
@@ -99,7 +93,7 @@ export const CalculatedColumnWizard = (props) => {
                 isValid: isValidCalculatedColumnExpression,
                 renderSummary: renderCalculatedColumnExpressionSummary,
                 render: () => {
-                    return (React.createElement(Box, { height: "100%", p: 2 },
+                    return (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
                         React.createElement(CalculatedColumnExpressionWizardSection, { expressionType: expressionType, onChange: setCalculatedColumn })));
                 },
             },
@@ -109,7 +103,7 @@ export const CalculatedColumnWizard = (props) => {
                 isValid: isValidCalculatedColumnSettings,
                 renderSummary: renderCalculatedColumnSettingsSummary,
                 render: () => {
-                    return (React.createElement(Box, { padding: 2 },
+                    return (React.createElement(Box, { className: "twa:p-2" },
                         React.createElement(CalculatedColumnSettingsWizardSection, { isEdit: isEdit, onChange: setCalculatedColumn })));
                 },
             },
@@ -117,14 +111,14 @@ export const CalculatedColumnWizard = (props) => {
                 details: 'Select Calculated Column Tags',
                 title: 'Tags',
                 isVisible: () => adaptable.api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(ObjectTagsWizardSection, { onChange: setCalculatedColumn }))),
                 renderSummary: renderObjectTagsSummary,
             },
             '-',
             {
                 render: () => {
-                    return (React.createElement(Box, { padding: 2 },
+                    return (React.createElement(Box, { className: "twa:p-2" },
                         React.createElement(OnePageWizardSummary, null)));
                 },
                 title: 'Summary',

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

@@ -0,0 +1,2 @@
+export declare const calculatedColumnTypes: readonly ["ScalarExpression", "AggregatedScalarExpression", "CumulativeAggregatedExpression", "QuantileAggregatedExpression"];
+export type ExpressionType = (typeof calculatedColumnTypes)[number];

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

@@ -0,0 +1,6 @@
+export const calculatedColumnTypes = [
+    'ScalarExpression',
+    'AggregatedScalarExpression',
+    'CumulativeAggregatedExpression',
+    'QuantileAggregatedExpression',
+];

package/src/View/CellSummary/CellSummaryPopup.js

@@ -15,7 +15,7 @@ class CellSummaryPopupComponent extends React.Component {
         this.props.onCreateCellSummary();
     }
     render() {
-        return (React.createElement(PanelWithButton, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
+        return (React.createElement(PanelWithButton, { className: "twa:p-0!", variant: "primary", headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
             React.createElement(CellSummaryDetails, { CellSummary: this.props.CellSummary })));
     }
 }

package/src/View/CellSummary/CellSummaryViewPanel.js

@@ -3,12 +3,12 @@ import { EnumExtensions } from '../../Utilities/Extensions/EnumExtensions';
 import { SummaryOperation } from '../../AdaptableState/Common/Enums';
 import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
 import { CellSummaryPopover } from './CellSummaryPopover';
-import { Flex } from 'rebass';
 import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
 import { AdaptablePopover } from '../AdaptablePopover';
 import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
 import { connect } from 'react-redux';
 import { Select } from '../../components/Select';
+import { Flex } from '../../components/Flex';
 class CellSummaryViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -51,13 +51,13 @@ class CellSummaryViewPanelComponent extends React.Component {
             if (operationValue == undefined) {
                 return;
             }
-            return this.props.viewType === 'ToolPanel' ? (React.createElement(Flex, { className: `ab-${elementType}__CellSummary__value`, style: { borderRadius: 'var(--ab__border-radius)' }, marginRight: 2, padding: 2, color: 'var( --ab-color-text-on-info)', backgroundColor: 'var(--ab-color-info)', fontSize: 'var( --ab-font-size-2)' }, operationValue)) : (React.createElement(Flex, { flex: 1, marginRight: 2, marginLeft: 1, justifyContent: "center", className: `ab-${elementType}__CellSummary__value`, color: 'var(--ab-color-text-on-primary)' }, operationValue));
+            return this.props.viewType === 'ToolPanel' ? (React.createElement(Flex, { className: `ab-${elementType}__CellSummary__value twa:rounded-standard twa:mr-2 twa:p-2 twa:text-text-on-info twa:bg-info twa:text-2` }, operationValue)) : (React.createElement(Flex, { justifyContent: "center", className: `ab-${elementType}__CellSummary__value twa:flex-1 twa:mr-2 twa:ml-1 text-text-on-primary` }, operationValue));
         };
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(Flex, { flexDirection: "row", className: shouldDisable ? GeneralConstants.READ_ONLY_STYLE : `ab-${elementType}__CellSummary__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(Flex, { flex: 1 },
-                React.createElement(Select, { "aria-label": "Cell Summary Operation Selector", style: { width: '100%' }, className: `ab-${elementType}__CellSummary__select`, disabled: shouldDisable, options: [...operationMenuItems, ...operationDefinitions], onChange: (x) => this.props.onCellSummaryOperationChange(x), value: this.props.CellSummaryOperation })),
-            React.createElement(Flex, { alignItems: "center", ml: 2 }, React.createElement(React.Fragment, null,
+            React.createElement(Flex, { className: "twa:flex-1" },
+                React.createElement(Select, { "aria-label": "Cell Summary Operation Selector", className: `ab-${elementType}__CellSummary__select twa:w-full`, disabled: shouldDisable, options: [...operationMenuItems, ...operationDefinitions], onChange: (x) => this.props.onCellSummaryOperationChange(x), value: this.props.CellSummaryOperation })),
+            React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" }, React.createElement(React.Fragment, null,
                 renderOperationValue(),
                 this.props.CellSummary != null && this.props.CellSummary.Count > 0 && (React.createElement(AdaptablePopover, { popoverMaxWidth: 360, className: "ab-ToolPanel__CellSummary__info", bodyText: [cellSummaryPopover], useButton: true, showEvent: 'focus', hideEvent: "blur", tooltipText: 'Show Cell Summaries' }))))));
     }

package/src/View/Charting/ChartingStatusBarPopover.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useAdaptable } from '../AdaptableContext';
 import * as ModuleConstants from '../../Utilities/Constants/ModuleConstants';
 import { useChartingElements } from './useChartingElements';
-import { Box, Flex } from 'rebass';
+import { Box, Flex } from '../../components/Flex';
 export const ChartingStatusBarPopover = (props) => {
     const adaptable = useAdaptable();
     const accessLevel = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(ModuleConstants.ChartingModuleId);
@@ -11,10 +11,10 @@ export const ChartingStatusBarPopover = (props) => {
         accessLevel: accessLevel,
         size: 'small',
     });
-    return (React.createElement(Flex, { width: "100%", alignItems: "center" },
+    return (React.createElement(Flex, { className: "twa:w-full", alignItems: "center" },
         React.createElement(Box, null, chartSelector),
-        containerSelector && React.createElement(Box, { ml: 1 }, containerSelector),
-        React.createElement(Box, { ml: 1 },
+        containerSelector && React.createElement(Box, { className: "twa:ml-1" }, containerSelector),
+        React.createElement(Box, { className: "twa:ml-1" },
             chartButton,
             deleteButton,
             editButton)));

package/src/View/Charting/ChartingViewPanel.js

@@ -1,21 +1,21 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
 import { useChartingElements } from './useChartingElements';
+import { Box, Flex } from '../../components/Flex';
 export const ChartingViewPanel = (props) => {
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
     const { chartSelector, containerSelector, chartButton, deleteButton, editButton } = useChartingElements({ elementType, accessLevel: props.accessLevel });
     if (elementType === 'DashboardToolbar') {
-        return (React.createElement(Flex, { width: "100%", alignItems: "center" },
+        return (React.createElement(Flex, { alignItems: "center", className: "twa:w-full" },
             React.createElement(Box, null, chartSelector),
-            containerSelector && React.createElement(Box, { ml: 1 }, containerSelector),
-            React.createElement(Box, { ml: 1 },
+            containerSelector && React.createElement(Box, { className: "twa:ml-1" }, containerSelector),
+            React.createElement(Box, { className: "twa:ml-1" },
                 chartButton,
                 deleteButton,
                 editButton)));
     }
-    return (React.createElement(Flex, { flexDirection: "column", width: "100%" },
-        React.createElement(Box, { mb: 1 }, chartSelector),
-        containerSelector && React.createElement(Box, { mb: 1 }, containerSelector),
+    return (React.createElement(Flex, { flexDirection: "column", className: "twa:w-full" },
+        React.createElement(Box, { className: "twa:mb-1" }, chartSelector),
+        containerSelector && React.createElement(Box, { className: "twa:mb-1" }, containerSelector),
         React.createElement(Box, null,
             chartButton,
             " ",

package/src/View/Charting/ChartingWizard/AgChargingWizard/AgChargingWizard.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Box } from 'rebass';
 import { useAdaptable } from '../../../AdaptableContext';
 import { OnePageAdaptableWizard } from '../../../Wizard/OnePageAdaptableWizard';
 import { PreviewChartSection } from './PreviewChartSection';
 import { isSettingsValid, SettingsSection } from './SettingsSection';
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../../Wizard/ObjectTagsWizardSection';
+import { Box } from '../../../../components/Flex';
 export const AgChargingWizard = (props) => {
     const adaptable = useAdaptable();
     const [chartDefinition, setChartDefinition] = React.useState(() => {
@@ -19,14 +19,14 @@ export const AgChargingWizard = (props) => {
                 title: 'Settings',
                 details: 'Chart Settings',
                 isValid: isSettingsValid,
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }))),
             },
             {
                 details: 'Select Chart Tags',
                 title: 'Tags',
                 isVisible: () => adaptable.api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(ObjectTagsWizardSection, { onChange: setChartDefinition }))),
                 renderSummary: renderObjectTagsSummary,
             },
@@ -34,7 +34,7 @@ export const AgChargingWizard = (props) => {
             {
                 title: 'Preview Chart',
                 details: 'Chart Preview',
-                render: () => (React.createElement(Box, { p: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(PreviewChartSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }))),
             },
         ] }));

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/ExternalChartingWizard.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Box } from 'rebass';
 import { useAdaptable } from '../../../AdaptableContext';
 import { OnePageAdaptableWizard } from '../../../Wizard/OnePageAdaptableWizard';
 import { isSettingsValid, SettingsSection } from './SettingsSection';
+import { Box } from '../../../../components/Flex';
 const PreviewChartSection = ({ chartDefinition }) => {
     const adaptable = useAdaptable();
     const divRef = React.useRef(null);
@@ -36,14 +36,14 @@ export const ExternalChartingWizard = (props) => {
                 title: 'Settings',
                 details: 'Chart Settings',
                 isValid: isSettingsValid,
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }))),
             },
             onPreviewChart
                 ? {
                     title: 'Preview Chart',
                     render: () => {
-                        return (React.createElement(Box, { padding: 2 },
+                        return (React.createElement(Box, { className: "twa:p-2" },
                             React.createElement(PreviewChartSection, { chartDefinition: chartDefinition })));
                     },
                 }