@adaptabletools/adaptable 21.2.1 → 22.0.0-canary.0

package/src/View/Components/Popups/AdaptablePopupConfirmation.js

@@ -2,13 +2,13 @@ import * as React from 'react';
 import { UIHelper } from '../../UIHelper';
 import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
 import { PanelWithImage } from '../Panels/PanelWithImage';
-import { Flex, Box, Text } from 'rebass';
 import SimpleButton from '../../../components/SimpleButton';
 import Input from '../../../components/Input';
 import Dialog from '../../../components/Dialog';
 import { CheckBox } from '../../../components/CheckBox';
 import * as InternalRedux from '../../../Redux/ActionsReducers/InternalRedux';
 import { useDispatch } from 'react-redux';
+import { Box, Flex } from '../../../components/Flex';
 export const AdaptablePopupConfirmation = (props) => {
     const dispatch = useDispatch();
     const [disableDeleteConfirmation, setDisableDeleteConfirmation] = React.useState(false);
@@ -42,18 +42,18 @@ export const AdaptablePopupConfirmation = (props) => {
         React.createElement(PanelWithImage, { header: header, icon: glyph, variant: "primary" },
             React.createElement("div", null,
                 React.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, props.messsage.split('\n').map(function (item, index) {
-                    return (React.createElement(Text, { key: index, margin: 2 },
+                    return (React.createElement(Box, { key: index, className: "twa:m-2" },
                         item,
                         React.createElement("br", null)));
                 })),
-                React.createElement(Box, { pl: 2 },
+                React.createElement(Box, { className: "twa:pl-2" },
                     React.createElement(CheckBox, { checked: disableDeleteConfirmation, onChange: () => {
                             setDisableDeleteConfirmation(!disableDeleteConfirmation);
                         } }, "Do not show this again")),
-                props.showInputBox && (React.createElement(Box, { padding: 2, "data-name": "body" },
+                props.showInputBox && (React.createElement(Box, { className: "twa:p-2", "data-name": "body" },
                     React.createElement("p", null, "Please enter a comment to confirm"),
-                    React.createElement(Input, { marginTop: 2, width: '100%', value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }))),
-                React.createElement(Flex, { marginTop: 3, padding: 2, "data-name": "footer", justifyContent: "space-between" },
+                    React.createElement(Input, { className: "twa:mt-2 twa:w-full", value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }))),
+                React.createElement(Flex, { className: "twa:mt-3 twa:p-2", "data-name": "footer", justifyContent: "space-between" },
                     props.cancelButtonText != null ? (React.createElement(SimpleButton, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onCancelForm() }, props.cancelButtonText)) : (React.createElement("div", null)),
                     React.createElement(SimpleButton, { tone: "error", "data-name": "delete", variant: "raised", disabled: !canConfirm(), onClick: () => onConfirmmForm() }, props.confirmButtonText))))));
 };

package/src/View/Components/Popups/AdaptablePopupPrompt.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
 import Dialog from '../../../components/Dialog';
-import { Flex, Box } from 'rebass';
 import SimpleButton from '../../../components/SimpleButton';
 import Input from '../../../components/Input';
 import { useDispatch } from 'react-redux';
+import { Box, Flex } from '../../../components/Flex';
 export const AdaptablePopupPrompt = (props) => {
     const dispatch = useDispatch();
     const [promptText, setPromptText] = React.useState(props.defaultValue ?? '');
@@ -24,19 +24,19 @@ export const AdaptablePopupPrompt = (props) => {
     const changeContent = (e) => {
         setPromptText(e.target.value);
     };
-    return (React.createElement(Dialog, { modal: true, "data-name": `prompt-popup`, isOpen: true, onDismiss: props.onClose, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
+    return (React.createElement(Dialog, { modal: true, "data-name": `prompt-popup`, isOpen: true, onDismiss: props.onClose, showCloseButton: false, className: "twa:min-h-auto twa:max-w-1/2" },
         React.createElement(Flex, { flexDirection: "column" },
-            React.createElement(Box, { marginTop: 3, mx: 2 }, props.header),
-            StringExtensions.IsNotNullOrEmpty(props.message) && (React.createElement(Box, { marginTop: 3, mx: 2 },
+            React.createElement(Box, { className: "twa:mt-3 twa:mx-2" }, props.header),
+            StringExtensions.IsNotNullOrEmpty(props.message) && (React.createElement(Box, { className: "twa:mt-3 twa:mx-2" },
                 ' ',
                 React.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, props.message.split('\n').map(function (item, index) {
                     return (React.createElement("span", { key: index },
                         item,
                         React.createElement("br", null)));
                 })))),
-            React.createElement(Input, { autoFocus: true, marginTop: 3, mx: 3, value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }),
-            React.createElement(Box, { marginTop: 3 },
-                React.createElement(Flex, { padding: 2, "data-name": "footer", justifyContent: "space-between" },
+            React.createElement(Input, { autoFocus: true, className: "twa:mt-3 twa:mx-3", value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }),
+            React.createElement(Box, { className: "twa:mt-3" },
+                React.createElement(Flex, { className: "twa:p-2", "data-name": "footer", justifyContent: "space-between" },
                     React.createElement(SimpleButton, { tone: "neutral", variant: "raised", onClick: () => onCloseForm(), "data-name": "cancel" }, "Cancel"),
                     React.createElement(SimpleButton, { tone: "accent", "data-name": "ok", variant: "raised", disabled: StringExtensions.IsNullOrEmpty(promptText), onClick: () => onConfirmForm() }, "OK"))))));
 };

package/src/View/Components/Popups/AdaptablePopupTeamSharing.js

@@ -1,5 +1,4 @@
 import Dialog from '../../../components/Dialog';
-import { Box, Flex } from 'rebass';
 import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
 import Input from '../../../components/Input';
 import { useState } from 'react';
@@ -8,6 +7,7 @@ import * as React from 'react';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import HelpBlock from '../../../components/HelpBlock';
 import Radio from '../../../components/Radio';
+import { Box, Flex } from '../../../components/Flex';
 export const AdaptablePopupTeamSharing = (props) => {
     const { showPopup, onClose, onConfirm, header } = props;
     const [config, setConfig] = useState({
@@ -15,9 +15,9 @@ export const AdaptablePopupTeamSharing = (props) => {
         type: 'Snapshot',
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement(Dialog, { modal: true, "data-name": "teamsharing-popup", isOpen: showPopup, onDismiss: onClose, autoFocus: false, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
+        React.createElement(Dialog, { modal: true, "data-name": "teamsharing-popup", isOpen: showPopup, onDismiss: onClose, autoFocus: false, showCloseButton: false, className: "twa:min-h-auto twa:max-w-1/2" },
             React.createElement(Flex, { flexDirection: "column" },
-                React.createElement(HelpBlock, { "data-name": "teamsharing-popup-description", margin: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } },
+                React.createElement(HelpBlock, { "data-name": "teamsharing-popup-description", className: "twa:m-2 twa:mb-2 twa:p-2 twa:text-3" },
                     "Create a ",
                     header,
                     " which may be either:",
@@ -28,18 +28,16 @@ export const AdaptablePopupTeamSharing = (props) => {
                         React.createElement("li", null,
                             React.createElement("strong", null, "Active"),
                             ": a \"live\" share that is automatically updated with every local change"))),
-                React.createElement(FormLayout, { padding: 2 },
+                React.createElement(FormLayout, { className: "twa:p-2" },
                     React.createElement(FormRow, { label: "Name: " },
-                        React.createElement(Input, { "data-name": "teamsharing-entity-name", autoFocus: true, value: config.description, type: "string", width: 300, placeholder: "Enter text", onChange: (e) => setConfig({ ...config, description: e.target.value }) })),
+                        React.createElement(Input, { "data-name": "teamsharing-entity-name", autoFocus: true, value: config.description, type: "string", className: "twa:w-[300px]", placeholder: "Enter text", onChange: (e) => setConfig({ ...config, description: e.target.value }) })),
                     React.createElement(FormRow, { label: "Share: " },
                         React.createElement(Flex, { flexDirection: "row" },
                             React.createElement(Radio, { "data-name": "teamsharing-entity-type-snapshot", checked: config.type === 'Snapshot', onChange: () => setConfig({ ...config, type: 'Snapshot' }) }, "Snapshot"),
-                            ' ',
-                            React.createElement(Radio, { "data-name": "teamsharing-entity-type-active", marginLeft: 3, checked: config.type === 'Active', onChange: () => setConfig({ ...config, type: 'Active' }) }, "Active"),
-                            ' '))),
-                React.createElement(Box, { marginTop: 3 },
-                    React.createElement(Flex, { padding: 2 },
+                            React.createElement(Radio, { "data-name": "teamsharing-entity-type-active", className: "twa:ml-3", checked: config.type === 'Active', onChange: () => setConfig({ ...config, type: 'Active' }) }, "Active")))),
+                React.createElement(Box, { className: "twa:mt-3" },
+                    React.createElement(Flex, { className: "twa:p-2" },
                         React.createElement(SimpleButton, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onClose() }, "Cancel"),
-                        React.createElement("div", { style: { flex: 1 } }),
+                        React.createElement("div", { className: "twa:flex-1" }),
                         React.createElement(SimpleButton, { "data-name": "ok", tone: "accent", variant: "raised", disabled: StringExtensions.IsNullOrEmpty(config.description), onClick: () => onConfirm(config) }, "OK")))))));
 };

package/src/View/Components/Popups/FormPopups/FormPopups.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Flex } from 'rebass';
 import { AdaptableFormComponent } from '../../../../components/AdaptableFormComponent';
 import Dialog from '../../../../components/Dialog';
 import { getDefaultAdaptableFormData } from '../../../../AdaptableState/Common/AdaptableForm';
 import { PopupHideForm } from '../../../../Redux/ActionsReducers/PopupRedux';
 import { useAdaptable } from '../../../AdaptableContext';
+import { Flex } from '../../../../components/Flex';
 export const FormDialog = ({ id, formProps, form, prepareContext, }) => {
     const dispatch = useDispatch();
     const adaptable = useAdaptable();
@@ -20,8 +20,8 @@ export const FormDialog = ({ id, formProps, form, prepareContext, }) => {
         formData: data,
         ...formProps,
     };
-    return (React.createElement(Dialog, { isOpen: true, showCloseButton: false, style: { minHeight: 'auto', minWidth: 400, maxHeight: '80vh' }, onDismiss: handleDismiss },
-        React.createElement(Flex, { flexDirection: 'column', "data-name": "form-dialog", padding: 4, height: '100%' },
+    return (React.createElement(Dialog, { isOpen: true, showCloseButton: false, className: "twa:min-h-auto twa:min-w-[400px] twa:max-h-[80vh]", onDismiss: handleDismiss },
+        React.createElement(Flex, { flexDirection: 'column', "data-name": "form-dialog", className: "twa:p-4 twa:h-full" },
             React.createElement(AdaptableFormComponent, { formDef: form, data: data, context: context, onChange: setData, api: adaptable.api, displayTitle: true, onButtonClick: async (button) => {
                     handleDismiss();
                     const preparedContext = typeof prepareContext === 'function' ? await prepareContext(context) : context;

package/src/View/Components/Popups/GridCellPopup/GridCellPopup.js

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { Flex } from 'rebass';
 import { GetNoteSelector } from '../../../../Redux/ActionsReducers/NoteRedux';
 import { CommentsAndNotesEditModeSelector, CommentsAndNotesFocusedEntitySelector, CommentsAndNotesSelector, } from '../../../../Redux/ActionsReducers/InternalRedux';
 import { useAdaptable } from '../../../AdaptableContext';
 import { CommentsEditor } from '../../../Comments/CommentsEditor';
 import { NoteEditor } from '../../../Note/NoteEditor';
 import { CellPopup } from '../../CellPopup';
+import { Flex } from '../../../../components/Flex';
 const ConnectedNoteEditor = ({ enableEditMode }) => {
     const { api } = useAdaptable();
     const isReadonly = api.entitlementApi.isModuleReadOnlyEntitlement('Note');

package/src/View/Components/Popups/WindowPopups/WindowPopups.js

@@ -37,7 +37,7 @@ export const WindowPopups = () => {
             Component = Component ?? NoopComponent;
             componentNode = (React.createElement(Component, { api: adaptable.api, onDismiss: handleDismiss, popupProps: restPopupProps }));
         }
-        return (React.createElement(Dialog, { "data-name": windowItem.Id, style: { height: '100%' }, className: "ab-Window-Modal", key: windowItem.Id, windowModal: true, windowModalProps: {
+        return (React.createElement(Dialog, { "data-name": windowItem.Id, className: "ab-Window-Modal twa:h-full twa:p-0", key: windowItem.Id, windowModal: true, windowModalProps: {
                 ...windowModalProps,
                 onChange: (settings) => {
                     setWindowModalSettings((settingsMap) => ({
@@ -48,7 +48,7 @@ export const WindowPopups = () => {
                 handleSelector: '.ab-Window-Modal .ab-Panel__header',
                 size: size,
                 position: position,
-            }, fixed: false, padding: 0, onDismiss: handleDismiss, isOpen: true, showCloseButton: true },
-            React.createElement(PanelWithImage, { style: { height: '100%' }, bodyProps: { padding: 0, height: '100%' }, header: windowItem.Title, glyphicon: windowItem.Icon, variant: "primary" }, componentNode)));
+            }, fixed: false, onDismiss: handleDismiss, isOpen: true, showCloseButton: true },
+            React.createElement(PanelWithImage, { className: "twa:h-full", bodyProps: { className: 'twa:h-full twa:p-0' }, header: windowItem.Title, glyphicon: windowItem.Icon, variant: "primary" }, componentNode)));
     })));
 };

package/src/View/Components/Popups/WindowPopups/windowFactory.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { WindowPopupChildProps } from './WindowPopups';
 export declare const WINDOW_GRID_FILTER_EDITOR = "WINDOW_GRID_FILTER_EDITOR";
 export declare const SHOW_PIVOT_COLUMN_DETAILS = "SHOW_PIVOT_COLUMN_DETAILS";

package/src/View/Components/PredicateEditor/PredicateEditor.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
 import { isAdaptableSystemIcon } from '../../../components/Icon';
 import HelpBlock from '../../../components/HelpBlock';
 import { Tag } from '../../../components/Tag';
@@ -10,6 +9,7 @@ import { ColumnValuesSelect } from '../FilterForm/ListBoxFilterForm';
 import { useAdaptable } from '../../AdaptableContext';
 import { useDistinctFilterColumnValues } from '../ColumnFilter/components/FloatingFilterValues';
 import { useEffect } from 'react';
+import { Box, Flex } from '../../../components/Flex';
 export const PredicateEditor = (props) => {
     const baseClassName = 'ab-PredicateEditor';
     const predicateDefsOptions = React.useMemo(() => props?.predicateDefs?.map((item) => ({
@@ -65,8 +65,8 @@ export const PredicateEditor = (props) => {
     }, []);
     const { skipDefaultSearch } = quickFilterValues;
     return (React.createElement(Box, { className: baseClassName },
-        React.createElement(Flex, { justifyContent: "stretch", alignItems: "center" },
-            icon && React.createElement(Tag, { mr: 2 }, icon),
+        React.createElement(Flex, { alignItems: "center", className: "twa:justify-stretch" },
+            icon && React.createElement(Tag, { className: "twa:mr-2" }, icon),
             React.createElement(Select, { isClearable: true, options: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: currentPredicateDef?.id, onChange: (value) => {
                     const option = predicateDefsOptions.find((x) => x.value === value);
                     props.onChange({
@@ -76,10 +76,10 @@ export const PredicateEditor = (props) => {
                     });
                 } })),
         React.createElement(Flex, null, currentPredicateDef?.inputs?.map((predicateDefInput, index) => (React.createElement(React.Fragment, null,
-            index > 0 && React.createElement(HelpBlock, { margin: 2 }, "AND"),
-            React.createElement(Flex, { key: index, flex: 1, flexDirection: "column" },
-                React.createElement(AdaptableInput, { "data-name": `predicate-input-${index}`, marginTop: 2, type: predicateDefInput.type, autoFocus: index === 0, value: props.predicate.Inputs?.[index] ?? '', onChange: (e) => handlePredicateInputChange(e, index) })))))),
-        adaptable.api.predicateApi.internalApi.IsInOrNotInPredicateDef(currentPredicateDef) && (React.createElement(Box, { mt: 2 },
+            index > 0 && React.createElement(HelpBlock, { className: "twa:m-2" }, "AND"),
+            React.createElement(Flex, { key: index, className: "twa:flex-1", flexDirection: "column" },
+                React.createElement(AdaptableInput, { "data-name": `predicate-input-${index}`, className: "twa:mt-2", type: predicateDefInput.type, autoFocus: index === 0, value: props.predicate.Inputs?.[index] ?? '', onChange: (e) => handlePredicateInputChange(e, index) })))))),
+        adaptable.api.predicateApi.internalApi.IsInOrNotInPredicateDef(currentPredicateDef) && (React.createElement(Box, { className: "twa:mt-2" },
             React.createElement(ColumnValuesSelect, { isLoading: isDistinctColumnValuesLoading, column: column, options: quickFilterValues.values, selectProps: {
                     onMenuOpen,
                     onInputChange,

package/src/View/Components/PreviewResultsPanel.d.ts

@@ -9,6 +9,7 @@ export interface PreviewResultsPanelProps extends React.ClassAttributes<PreviewR
     showPanel: boolean;
     style?: React.CSSProperties;
     showHeader: boolean;
+    className?: string;
 }
 export declare class PreviewResultsPanel extends React.Component<PreviewResultsPanelProps, {}> {
     render(): any;

package/src/View/Components/PreviewResultsPanel.js

@@ -3,7 +3,7 @@ import { AdaptablePopover } from '../AdaptablePopover';
 import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
 import CheckIcon from '../../components/icons/check';
 import UIHelper from '../UIHelper';
-import Panel from '../../components/Panel';
+import { Card } from '../../components/Card';
 const columnsMap = {
     InitialValue: {
         field: 'InitialValue',
@@ -47,18 +47,11 @@ export class PreviewResultsPanel extends React.Component {
                     React.createElement(CheckIcon, { style: { color: successColor, fill: 'currentColor' } }))),
             };
         });
-        return this.props.showPanel ? (React.createElement(Panel, { header: previewHeader, style: { flex: 1 }, bodyProps: {
-                style: {
-                    border: 0,
-                    padding: 0,
-                    display: 'flex',
-                    flexFlow: 'column',
-                    minWidth: '17rem',
-                    minHeight: '20rem',
-                },
-            } },
-            React.createElement(DataSource, { data: dataSource, primaryKey: "Id" },
-                React.createElement(InfiniteTableGrid, { sortable: false, domProps: tableDOMProps, columns: columnsMap })))) : null;
+        return this.props.showPanel ? (React.createElement(Card, { className: "twa:flex-1 twa:overflow-hidden", shadow: false },
+            React.createElement(Card.Title, null, previewHeader),
+            React.createElement(Card.Body, null,
+                React.createElement(DataSource, { data: dataSource, primaryKey: "Id" },
+                    React.createElement(InfiniteTableGrid, { sortable: false, domProps: tableDOMProps, columns: columnsMap }))))) : null;
     }
     getValidationErrorMessage(alertDefinitions) {
         let validationService = this.props.api.internalApi.getValidationService();

package/src/View/Components/RangesComponent.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box, Flex, Text } from 'rebass';
 import { ColorPicker } from '../../components/ColorPicker';
 import clamp from 'lodash/clamp';
 import { CheckBox } from '../../components/CheckBox';
@@ -10,6 +9,7 @@ import { getHexForName, GRAY, DARK_GREEN } from '../UIHelper';
 import { ColumnSelector } from './Selectors/ColumnSelector';
 import { Tabs } from '../../components/Tabs';
 import Radio from '../../components/Radio';
+import { Box, Flex } from '../../components/Flex';
 export class RangesComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -44,42 +44,42 @@ export class RangesComponent extends React.Component {
         const isRangeValueTypeNumber = (this.props.rangeValueType ?? 'Number') === 'Number';
         return (React.createElement(React.Fragment, null,
             React.createElement(Flex, { flexDirection: "row" },
-                React.createElement(CheckBox, { marginTop: 3, checked: this.state.rangesType == 'ColumnComparison', onChange: (checked) => this.onRangesTypeChanged(checked) }, "Use a Column Comparison")),
-            this.state.rangesType == 'Standard' && (React.createElement(Tabs, { autoFocus: false, marginTop: 2 },
+                React.createElement(CheckBox, { className: "twa:mt-3", checked: this.state.rangesType == 'ColumnComparison', onChange: (checked) => this.onRangesTypeChanged(checked) }, "Use a Column Comparison")),
+            this.state.rangesType == 'Standard' && (React.createElement(Tabs, { autoFocus: false, className: "twa:mt-2" },
                 React.createElement(Tabs.Tab, null, "Ranges"),
                 React.createElement(Tabs.Content, null,
-                    React.createElement(Flex, { alignItems: "center", mb: 2 },
-                        React.createElement(Text, { mr: 3 }, "Range Type"),
-                        React.createElement(Radio, { onChange: () => this.handleRangeValueTypeChange('Number'), checked: isRangeValueTypeNumber, mr: 2 }, "Number"),
+                    React.createElement(Flex, { alignItems: "center", className: "twa:mb-2" },
+                        React.createElement(Box, { className: "twa:mr-3" }, "Range Type"),
+                        React.createElement(Radio, { onChange: () => this.handleRangeValueTypeChange('Number'), checked: isRangeValueTypeNumber, className: "twa:mr-2" }, "Number"),
                         React.createElement(Radio, { onChange: () => this.handleRangeValueTypeChange('Percentage'), checked: !isRangeValueTypeNumber }, "Percentage")),
-                    this.props.ranges?.map((range, index, list) => (React.createElement(Flex, { key: index, alignItems: "end", mb: 2, "data-name": "percent-bar-range" },
+                    this.props.ranges?.map((range, index, list) => (React.createElement(Flex, { key: index, alignItems: "end", className: "twa:mb-2", "data-name": "percent-bar-range" },
                         React.createElement(Flex, { flexDirection: "column" },
-                            isRangeValueTypeNumber && index === 0 && (React.createElement(CheckBox, { onClick: () => this.setRangeColMin(range), checked: range.Min === 'Col-Min', mt: 0, mb: 1, fontSize: 3, disabled: this.props.disabled }, "Col Min")),
+                            isRangeValueTypeNumber && index === 0 && (React.createElement(CheckBox, { onClick: () => this.setRangeColMin(range), checked: range.Min === 'Col-Min', className: "twa:mt-0 twa:mb-1 twa:text-3", disabled: this.props.disabled }, "Col Min")),
                             React.createElement(NumberInput, { disabled: this.props.disabled ||
                                     range.Min === 'Col-Min' ||
                                     (index === 0 && !isRangeValueTypeNumber), value: range.Min, onChange: (value) => {
                                     this.changeRangeMin(index, value);
-                                }, mr: 2 })),
+                                }, className: "twa:mr-2" })),
                         React.createElement(Flex, { flexDirection: "column" },
-                            isRangeValueTypeNumber && index === list.length - 1 && (React.createElement(CheckBox, { mt: 0, mb: 1, onClick: () => this.setRangeColMax(range), checked: range.Max === 'Col-Max', fontSize: 3, disabled: this.props.disabled }, "Col Max")),
+                            isRangeValueTypeNumber && index === list.length - 1 && (React.createElement(CheckBox, { className: "twa:mt-0 twa:mb-1 twa:text-3", onClick: () => this.setRangeColMax(range), checked: range.Max === 'Col-Max', disabled: this.props.disabled }, "Col Max")),
                             React.createElement(NumberInput, { value: range.Max, disabled: this.props.disabled ||
                                     range.Max === 'Col-Max' ||
                                     (index === list.length - 1 && !isRangeValueTypeNumber), onChange: (value) => {
                                     this.changeRangeMax(index, value);
-                                }, mr: 2 })),
-                        React.createElement(Flex, { alignItems: "center", height: "100%" },
+                                }, className: "twa:mr-2" })),
+                        React.createElement(Flex, { alignItems: "center", className: "twa:h-full" },
                             React.createElement(ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
                                     this.changeRangeColor(index, color);
-                                }, mr: 2, height: 33 })),
-                        this.props.showRangeDirection && (React.createElement(CheckBox, { disabled: this.props.disabled, checked: range.ReverseGradient && range.ReverseGradient == true, onChange: (checked) => this.changeRangeDirectionUp(index, checked), ml: 2 }, "Reverse Gradient")),
-                        React.createElement(SimpleButton, { ml: 2, mb: 1, icon: "delete", disabled: this.props.disabled || (this.props.ranges && this.props.ranges.length == 1), onClick: () => this.removeRange(index) })))),
+                                }, className: "twa:mr-2 twa:h-[33px]" })),
+                        this.props.showRangeDirection && (React.createElement(CheckBox, { disabled: this.props.disabled, checked: range.ReverseGradient && range.ReverseGradient == true, onChange: (checked) => this.changeRangeDirectionUp(index, checked), className: "twa:ml-2" }, "Reverse Gradient")),
+                        React.createElement(SimpleButton, { className: "twa:ml-2 twa:mb-1", icon: "delete", disabled: this.props.disabled || (this.props.ranges && this.props.ranges.length == 1), onClick: () => this.removeRange(index) })))),
                     React.createElement("div", null,
                         React.createElement(SimpleButton, { disabled: this.props.disabled, variant: "raised", "data-name": "add", onClick: () => this.addRange() }, "Add New Range"))))),
-            this.state.rangesType == 'ColumnComparison' && (React.createElement(Tabs, { autoFocus: false, marginTop: 2 },
+            this.state.rangesType == 'ColumnComparison' && (React.createElement(Tabs, { autoFocus: false, className: "twa:mt-2" },
                 React.createElement(Tabs.Tab, null, "Column Comparison"),
                 React.createElement(Tabs.Content, null,
                     React.createElement(Flex, { flexDirection: "column", key: 'cc', "data-name": "percent-bar-column-comparison" },
-                        React.createElement(Text, { padding: 2, fontSize: 2 },
+                        React.createElement(Box, { className: "twa:p-2 twa:text-2" },
                             "Create Minimum and Maximum Values by providing a value or selecting another Column, and choose a",
                             ' ',
                             this.props.api.internalApi.getCorrectEnglishVariant('Colour'),
@@ -87,14 +87,14 @@ export class RangesComponent extends React.Component {
                         React.createElement(FormLayout, { columns: ['label', 'first', 'or', 'second'], sizes: ['auto', 'auto', 'auto', '1fr'] },
                             React.createElement(FormRow, { label: "Min Value:", first: React.createElement(NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMinValueNumber, onChange: (value) => {
                                         this.changeColumnComparisonMinValue(value);
-                                    } }), or: "OR", second: React.createElement(Box, { maxWidth: '15rem' },
+                                    } }), or: "OR", second: React.createElement(Box, { className: "twa:max-w-[15rem]" },
                                     React.createElement(ColumnSelector, { menuPosition: "fixed", disabled: this.props.disabled, value: comparisonMinValueColumnId, type: "number", onChange: (columnId) => {
                                             this.onMinColumnSelectedChanged(columnId);
                                         } })) }),
                             ' ',
                             React.createElement(FormRow, { label: "Max Value:", first: React.createElement(NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMaxValueNumber, onChange: (value) => {
                                         this.changeColumnComparisonMaxValue(value);
-                                    } }), or: "OR", second: React.createElement(Box, { maxWidth: '15rem' },
+                                    } }), or: "OR", second: React.createElement(Box, { className: "twa:max-w-[15rem]" },
                                     React.createElement(ColumnSelector, { menuPosition: "fixed", disabled: this.props.disabled, value: comparisonMaxValueColumnId, type: "number", onChange: (columnId) => this.onMaxColumnSelectedChanged(columnId) })) }),
                             React.createElement(FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: React.createElement(ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: comparisonColor, onChange: (color) => {
                                         this.changeColumnComparisonColor(color);

package/src/View/Components/ReorderDraggable/index.d.ts

@@ -4,8 +4,10 @@ export type ReorderDraggableProps<OPTION_TYPE, ID_TYPE extends number | string>
     order: OPTION_TYPE[];
     onChange: (newOrder: OPTION_TYPE[]) => void;
     renderOption: (option: OPTION_TYPE, index: number) => ReactNode;
+    optionClassName?: (option: OPTION_TYPE) => string;
     toIdentifier?: (v: OPTION_TYPE) => ID_TYPE;
     isOptionDraggable?: (option: OPTION_TYPE) => boolean;
+    onOptionClick?: (option: OPTION_TYPE, event: React.MouseEvent<HTMLDivElement>) => void;
     disabled?: boolean;
     style?: React.CSSProperties;
 };

package/src/View/Components/ReorderDraggable/index.js

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
 import { DragDropContext, Draggable, Droppable } from '../../../components/dnd';
 import { Icon } from '../../../components/icons';
 import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
+import { Box, Flex } from '../../../components/Flex';
+import clsx from 'clsx';
 export function ReorderDraggable(props) {
     const { onChange, order, toIdentifier, isOptionDraggable, disabled, } = props;
     const baseClassName = 'ab-ReorderDraggable';
@@ -10,10 +11,10 @@ export function ReorderDraggable(props) {
         const identifier = toIdentifier(option);
         const renderNode = (flexProps, dragHandleProps) => {
             const reorderable = isOptionDraggable ? isOptionDraggable(option) : true;
-            return (React.createElement(Flex, { className: `${baseClassName}__option`, alignItems: "center", mt: index ? 1 : 0, key: identifier ?? index, backgroundColor: 'primary', padding: 2, "data-index": index, "data-id": identifier, "data-name": "option", ...flexProps },
-                React.createElement(Flex, { flex: 1, flexDirection: "row", alignItems: "center" },
-                    reorderable ? (React.createElement(Box, { mr: 3, ...dragHandleProps },
-                        React.createElement(Icon, { name: "drag", style: { cursor: 'grab' } }))) : (React.createElement(Box, { mr: 3 },
+            return (React.createElement(Flex, { alignItems: "center", key: identifier ?? index, "data-index": index, "data-id": identifier, "data-name": "option", ...flexProps, className: clsx(`${baseClassName}__option ${index ? 'twa:mt-1' : 'twa:mt-0'} twa:bg-primary twa:p-2 ${flexProps?.className || ''}`, props.optionClassName?.(option)), onClick: (e) => props.onOptionClick?.(option, e) },
+                React.createElement(Flex, { className: "twa:flex-1", flexDirection: "row", alignItems: "center" },
+                    reorderable ? (React.createElement(Box, { ...dragHandleProps, className: `twa:mr-3 ${dragHandleProps?.className || ''}` },
+                        React.createElement(Icon, { name: "drag", style: { cursor: 'grab' } }))) : (React.createElement(Box, { className: "twa:mr-3" },
                         React.createElement(Icon, { name: "drag", style: { cursor: 'not-allowed', opacity: 0.3 } }))),
                     props.renderOption(option, index))));
         };
@@ -26,13 +27,13 @@ export function ReorderDraggable(props) {
             }, draggableProvided.dragHandleProps);
         }));
     };
-    return (React.createElement(Flex, { style: props.style, className: baseClassName, flexDirection: "column", flex: 1 },
+    return (React.createElement(Flex, { style: props.style, className: `${baseClassName} twa:flex-1`, flexDirection: "column" },
         React.createElement(DragDropContext, { onDragEnd: (result) => {
                 const { source, destination } = result;
                 const newOrder = ArrayExtensions.reorderArray(props.order, source.index, destination.index);
                 onChange(newOrder);
             } },
-            React.createElement(Flex, { className: `${baseClassName}__body`, flexDirection: "column", flex: 1, style: { overflow: 'auto' } },
+            React.createElement(Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column" },
                 React.createElement(Droppable, { droppableId: "droppable" }, (droppableProvided) => {
                     return (React.createElement("div", { ref: droppableProvided.innerRef, ...droppableProvided.droppableProps },
                         order.map(renderOption),

package/src/View/Components/Selectors/BulkUpdateValueSelector.js

@@ -2,11 +2,12 @@ import * as React from 'react';
 import FieldWrap from '../../../components/FieldWrap';
 import UIHelper from '../../UIHelper';
 import AdaptableInput from '../AdaptableInput';
-import { Box } from 'rebass';
 import { PermittedValuesSelector } from './PermittedValuesSelector';
 import { Select } from '../../../components/Select';
 import { useAdaptable } from '../../AdaptableContext';
 import { useCallback } from 'react';
+import clsx from 'clsx';
+import { Box } from '../../../components/Flex';
 export const BulkUpdateValueSelector = (props) => {
     const [valueType, setValueType] = React.useState('existing');
     const adaptable = useAdaptable();
@@ -37,7 +38,7 @@ export const BulkUpdateValueSelector = (props) => {
             ? UIHelper.getDescriptionForDataType(props.selectedColumn.dataType)
             : 'text', placeholder: props.selectedColumn
             ? UIHelper.getPlaceholderForDataType(props.selectedColumn.dataType)
-            : 'Enter Value', autoFocus: true, disabled: props.disabled, style: { width: '100%' }, value: props.selectedColumnValue, onChange: (e) => {
+            : 'Enter Value', autoFocus: true, disabled: props.disabled, className: "twa:w-full", value: props.selectedColumnValue, onChange: (e) => {
             props.onColumnValueChange(e.target.value);
         } }));
     let valueTypeSelector = null;
@@ -49,11 +50,7 @@ export const BulkUpdateValueSelector = (props) => {
                 setValueType(value);
             } }));
     }
-    return (React.createElement(FieldWrap, { className: props.className, style: {
-            ...props.style,
-            overflow: 'visible',
-            maxWidth: '100%',
-        } }, isDateType ? (React.createElement(React.Fragment, null,
+    return (React.createElement(FieldWrap, { className: clsx('twa:overflow-visible twa:max-w-full', props.className), style: props.style }, isDateType ? (React.createElement(React.Fragment, null,
         valueType === 'new' ? input : permittedValueSelector,
         valueTypeSelector)) : (permittedValueSelector)));
 };

package/src/View/Components/Selectors/ColumnSelector.js

@@ -9,7 +9,7 @@ export const ColumnSelector = function (props) {
     const getColumn = (columnId) => columns.find((c) => c.columnId === columnId);
     const options = columns
         .map((column) => {
-        let label = React.createElement(React.Fragment, null, column.friendlyName ?? column.columnId);
+        let label = column.friendlyName ?? column.columnId;
         if (props.renderOption) {
             label = props.renderOption(column);
         }

package/src/View/Components/Selectors/ColumnSelectorOld.js

@@ -31,7 +31,7 @@ export class ColumnSelector extends React.Component {
         return (React.createElement("div", { "data-name": 'column-selector' },
             React.createElement(FormLayout, { columns: [{ name: 'columnSelector', style: { display: 'flex' } }], style: this.props.style },
                 React.createElement(FormRow, null,
-                    React.createElement(DropdownButton, { marginRight: 2, columns: ['label'], showClearButton: currentColumnName != 'Select a column', onClear: () => this.onClearButton(), style: { width: '100%', fontSize: 'small' }, items: sortedColumnOptions, disabled: this.props.disabled || sortedColumnOptions.length == 0 }, currentColumnName)))));
+                    React.createElement(DropdownButton, { className: "twa:w-full twa:text-0 twa:mr-2", columns: ['label'], showClearButton: currentColumnName != 'Select a column', onClear: () => this.onClearButton(), items: sortedColumnOptions, disabled: this.props.disabled || sortedColumnOptions.length == 0 }, currentColumnName)))));
     }
     onClearButton() {
         this.props.onColumnChange([]);

package/src/View/Components/StyleComponent.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { CSSProperties } from 'react';
 import { AdaptableApi } from '../../Api/AdaptableApi';
 import { AdaptableStyle } from '../../AdaptableState/Common/AdaptableStyle';
-export interface StyleComponentProps extends React.ClassAttributes<StyleComponent> {
+export interface StyleComponentProps {
     className?: string;
     style?: CSSProperties;
     api: AdaptableApi;
@@ -13,28 +13,4 @@ export interface StyleComponentProps extends React.ClassAttributes<StyleComponen
     showFontSizeAs?: 'radio' | 'dropdown';
     UpdateStyle: (style: AdaptableStyle) => void;
 }
-export interface StyleComponentState {
-    componentStyle: AdaptableStyle;
-    ShowClassName: boolean;
-}
-export declare class StyleComponent extends React.Component<StyleComponentProps, StyleComponentState> {
-    constructor(props: StyleComponentProps);
-    static getDerivedStateFromProps(nextProps: StyleComponentProps, prevState: StyleComponentState): {
-        componentStyle: AdaptableStyle;
-    };
-    render(): React.JSX.Element;
-    onShowClassNameChanged: (checked: boolean) => void;
-    private onStyleClassNameChanged;
-    private onUseBackColorCheckChange;
-    private onUseForeColorCheckChange;
-    private onUseBorderColorCheckChange;
-    private onUseFontSizeCheckChange;
-    private onBackColorSelectChange;
-    private onForeColorSelectChange;
-    private onBorderColorSelectChange;
-    private onFontWeightChange;
-    private onFontStyleChange;
-    private onTextDecorationChange;
-    private onBorderRadiusChange;
-    private onFontSizeChange;
-}
+export declare const StyleComponent: React.FC<StyleComponentProps>;