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

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;

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

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CalculatedColumnWizard = exports.calculatedColumnTypes = void 0;
+exports.CalculatedColumnWizard = 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 Helper_1 = require("../../../Utilities/Helpers/Helper");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const CalculatedColumnExpressionWizardSection_1 = require("./CalculatedColumnExpressionWizardSection");
@@ -19,12 +18,7 @@ const utils_1 = require("../utils");
 const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
 const Tag_1 = require("../../../components/Tag");
 const CalculatedColumnTypeSection_1 = require("./CalculatedColumnTypeSection");
-exports.calculatedColumnTypes = [
-    'ScalarExpression',
-    'AggregatedScalarExpression',
-    'CumulativeAggregatedExpression',
-    'QuantileAggregatedExpression',
-];
+const Flex_1 = require("../../../components/Flex");
 const CalculatedColumnWizard = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const allCalculatedColumns = (0, react_redux_1.useSelector)((state) => state.CalculatedColumn.CalculatedColumns);
@@ -78,12 +72,12 @@ const CalculatedColumnWizard = (props) => {
             {
                 title: 'Type',
                 renderSummary: () => {
-                    return (React.createElement(rebass_1.Box, null,
+                    return (React.createElement(Flex_1.Box, { className: "twa:text-2" },
                         "Expression Type: ",
                         React.createElement(Tag_1.Tag, null, (0, StringExtensions_1.Humanize)(expressionType))));
                 },
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { p: 2 },
+                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                         React.createElement(CalculatedColumnTypeSection_1.CalculatedColumnTypeWizardSection, { type: expressionType, onTypeChange: handleExpressionTypeChange })));
                 },
             },
@@ -93,7 +87,7 @@ const CalculatedColumnWizard = (props) => {
                 isValid: CalculatedColumnDefinitionWizardSection_1.isValidCalculatedColumnDefinition,
                 renderSummary: CalculatedColumnDefinitionWizardSection_1.renderCalculatedColumnDefinitionSummary,
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                         React.createElement(CalculatedColumnDefinitionWizardSection_1.CalculatedColumnDefinitionWizardSection, { isEdit: isEdit, onChange: setCalculatedColumn })));
                 },
             },
@@ -103,7 +97,7 @@ const CalculatedColumnWizard = (props) => {
                 isValid: CalculatedColumnExpressionWizardSection_1.isValidCalculatedColumnExpression,
                 renderSummary: CalculatedColumnExpressionWizardSection_1.renderCalculatedColumnExpressionSummary,
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { height: "100%", p: 2 },
+                    return (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
                         React.createElement(CalculatedColumnExpressionWizardSection_1.CalculatedColumnExpressionWizardSection, { expressionType: expressionType, onChange: setCalculatedColumn })));
                 },
             },
@@ -113,7 +107,7 @@ const CalculatedColumnWizard = (props) => {
                 isValid: CalculatedColumnSettingsWizardSection_1.isValidCalculatedColumnSettings,
                 renderSummary: CalculatedColumnSettingsWizardSection_1.renderCalculatedColumnSettingsSummary,
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                         React.createElement(CalculatedColumnSettingsWizardSection_1.CalculatedColumnSettingsWizardSection, { isEdit: isEdit, onChange: setCalculatedColumn })));
                 },
             },
@@ -121,14 +115,14 @@ const CalculatedColumnWizard = (props) => {
                 details: 'Select Calculated Column Tags',
                 title: 'Tags',
                 isVisible: () => adaptable.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: setCalculatedColumn }))),
                 renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
             },
             '-',
             {
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                         React.createElement(OnePageAdaptableWizard_1.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,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculatedColumnTypes = void 0;
+exports.calculatedColumnTypes = [
+    'ScalarExpression',
+    'AggregatedScalarExpression',
+    'CumulativeAggregatedExpression',
+    'QuantileAggregatedExpression',
+];

package/src/View/CellSummary/CellSummaryPopup.js

@@ -19,7 +19,7 @@ class CellSummaryPopupComponent extends React.Component {
         this.props.onCreateCellSummary();
     }
     render() {
-        return (React.createElement(PanelWithButton_1.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_1.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_1.CellSummaryDetails, { CellSummary: this.props.CellSummary })));
     }
 }

package/src/View/CellSummary/CellSummaryViewPanel.js

@@ -7,12 +7,12 @@ const EnumExtensions_1 = require("../../Utilities/Extensions/EnumExtensions");
 const Enums_1 = require("../../AdaptableState/Common/Enums");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
 const CellSummaryPopover_1 = require("./CellSummaryPopover");
-const rebass_1 = require("rebass");
 const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
 const AdaptablePopover_1 = require("../AdaptablePopover");
 const InternalRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/InternalRedux"));
 const react_redux_1 = require("react-redux");
 const Select_1 = require("../../components/Select");
+const Flex_1 = require("../../components/Flex");
 class CellSummaryViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -55,13 +55,13 @@ class CellSummaryViewPanelComponent extends React.Component {
             if (operationValue == undefined) {
                 return;
             }
-            return this.props.viewType === 'ToolPanel' ? (React.createElement(rebass_1.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(rebass_1.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_1.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_1.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(rebass_1.Flex, { flexDirection: "row", className: shouldDisable ? GeneralConstants.READ_ONLY_STYLE : `ab-${elementType}__CellSummary__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(rebass_1.Flex, { flex: 1 },
-                React.createElement(Select_1.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(rebass_1.Flex, { alignItems: "center", ml: 2 }, React.createElement(React.Fragment, null,
+        return (React.createElement(Flex_1.Flex, { flexDirection: "row", className: shouldDisable ? GeneralConstants.READ_ONLY_STYLE : `ab-${elementType}__CellSummary__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+            React.createElement(Flex_1.Flex, { className: "twa:flex-1" },
+                React.createElement(Select_1.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_1.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_1.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

@@ -6,7 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const AdaptableContext_1 = require("../AdaptableContext");
 const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
 const useChartingElements_1 = require("./useChartingElements");
-const rebass_1 = require("rebass");
+const Flex_1 = require("../../components/Flex");
 const ChartingStatusBarPopover = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const accessLevel = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(ModuleConstants.ChartingModuleId);
@@ -15,10 +15,10 @@ const ChartingStatusBarPopover = (props) => {
         accessLevel: accessLevel,
         size: 'small',
     });
-    return (React.createElement(rebass_1.Flex, { width: "100%", alignItems: "center" },
-        React.createElement(rebass_1.Box, null, chartSelector),
-        containerSelector && React.createElement(rebass_1.Box, { ml: 1 }, containerSelector),
-        React.createElement(rebass_1.Box, { ml: 1 },
+    return (React.createElement(Flex_1.Flex, { className: "twa:w-full", alignItems: "center" },
+        React.createElement(Flex_1.Box, null, chartSelector),
+        containerSelector && React.createElement(Flex_1.Box, { className: "twa:ml-1" }, containerSelector),
+        React.createElement(Flex_1.Box, { className: "twa:ml-1" },
             chartButton,
             deleteButton,
             editButton)));

package/src/View/Charting/ChartingViewPanel.js

@@ -3,24 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChartingViewPanel = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const useChartingElements_1 = require("./useChartingElements");
+const Flex_1 = require("../../components/Flex");
 const ChartingViewPanel = (props) => {
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
     const { chartSelector, containerSelector, chartButton, deleteButton, editButton } = (0, useChartingElements_1.useChartingElements)({ elementType, accessLevel: props.accessLevel });
     if (elementType === 'DashboardToolbar') {
-        return (React.createElement(rebass_1.Flex, { width: "100%", alignItems: "center" },
-            React.createElement(rebass_1.Box, null, chartSelector),
-            containerSelector && React.createElement(rebass_1.Box, { ml: 1 }, containerSelector),
-            React.createElement(rebass_1.Box, { ml: 1 },
+        return (React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:w-full" },
+            React.createElement(Flex_1.Box, null, chartSelector),
+            containerSelector && React.createElement(Flex_1.Box, { className: "twa:ml-1" }, containerSelector),
+            React.createElement(Flex_1.Box, { className: "twa:ml-1" },
                 chartButton,
                 deleteButton,
                 editButton)));
     }
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", width: "100%" },
-        React.createElement(rebass_1.Box, { mb: 1 }, chartSelector),
-        containerSelector && React.createElement(rebass_1.Box, { mb: 1 }, containerSelector),
-        React.createElement(rebass_1.Box, null,
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:w-full" },
+        React.createElement(Flex_1.Box, { className: "twa:mb-1" }, chartSelector),
+        containerSelector && React.createElement(Flex_1.Box, { className: "twa:mb-1" }, containerSelector),
+        React.createElement(Flex_1.Box, null,
             chartButton,
             " ",
             deleteButton,

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

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AgChargingWizard = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const PreviewChartSection_1 = require("./PreviewChartSection");
 const SettingsSection_1 = require("./SettingsSection");
 const ObjectTagsWizardSection_1 = require("../../../Wizard/ObjectTagsWizardSection");
+const Flex_1 = require("../../../../components/Flex");
 const AgChargingWizard = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const [chartDefinition, setChartDefinition] = React.useState(() => {
@@ -23,14 +23,14 @@ const AgChargingWizard = (props) => {
                 title: 'Settings',
                 details: 'Chart Settings',
                 isValid: SettingsSection_1.isSettingsValid,
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(SettingsSection_1.SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }))),
             },
             {
                 details: 'Select Chart Tags',
                 title: 'Tags',
                 isVisible: () => adaptable.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: setChartDefinition }))),
                 renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
             },
@@ -38,7 +38,7 @@ const AgChargingWizard = (props) => {
             {
                 title: 'Preview Chart',
                 details: 'Chart Preview',
-                render: () => (React.createElement(rebass_1.Box, { p: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(PreviewChartSection_1.PreviewChartSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }))),
             },
         ] }));