@adaptabletools/adaptable 21.2.1 → 22.0.0-canary.0

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

package/src/View/Charting/useChartingElements.d.ts

@@ -4,7 +4,7 @@ import { AccessLevel, ChartDefinition } from '../../types';
 export declare const useChartingElements: ({ elementType, accessLevel, size, }: {
     elementType: string;
     accessLevel: AccessLevel;
-    size?: 'small' | 'normal';
+    size?: "small" | "normal";
 }) => {
     chartSelector: React.JSX.Element;
     containerSelector: React.JSX.Element;

package/src/View/Charting/useChartingElements.js

@@ -85,7 +85,7 @@ export const useChartingElements = ({ elementType, accessLevel, size = 'normal',
                 setSelectedContainer(chartContainers.find((containerOption) => containerOption.name === containerName));
             }
         }, options: containerOptions, placeholder: "Select Container" }));
-    const chartButton = (React.createElement(SimpleButton, { style: style, mr: 1, onClick: () => (isOpen ? hideChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'text', tone: 'neutral', icon: isOpen ? 'visibility-off' : 'visibility-on', tooltip: isOpen ? 'Hide Chart' : 'Show Chart' }));
+    const chartButton = (React.createElement(SimpleButton, { style: style, className: "twa:mr-1", onClick: () => (isOpen ? hideChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'text', tone: 'neutral', icon: isOpen ? 'visibility-off' : 'visibility-on', tooltip: isOpen ? 'Hide Chart' : 'Show Chart' }));
     const deleteButton = (React.createElement(DeleteChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel }));
     const editButton = (React.createElement(EditChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel, isOpen: isOpen }));
     return {

package/src/View/ColumnInfo/ColumnInfo.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
 import FormLayout, { FormRow } from '../../components/FormLayout';
 import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
 import Panel from '../../components/Panel';
@@ -9,12 +8,10 @@ import { AdaptableObjectList } from '../Components/AdaptableObjectList';
 import { ButtonNew } from '../Components/Buttons/ButtonNew';
 import { ColumnSelector } from '../Components/Selectors/ColumnSelector';
 import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
+import { Box, Flex } from '../../components/Flex';
 const BASE_CLASS_NAME = 'ab-AdaptableColumns';
 const domProps = {
-    style: {
-        height: '460px',
-        width: '100%',
-    },
+    className: 'twa:flex-1 twa:min-h-0 twa:w-full',
 };
 // TODOS:
 // - use column from props as initial value
@@ -199,10 +196,10 @@ const ModuleView = (props) => {
         setIsWizardOpen(false);
     }, []);
     // filter out items with scope
-    return (React.createElement(Box, { "data-name": module.moduleInfo.ModuleName, className: `${BASE_CLASS_NAME}__module-list`, key: module.moduleInfo.ModuleName, mb: 4 },
+    return (React.createElement(Box, { "data-name": module.moduleInfo.ModuleName, className: `${BASE_CLASS_NAME}__module-list twa:mb-4`, key: module.moduleInfo.ModuleName },
         React.createElement(Flex, null,
             React.createElement("b", { className: `${BASE_CLASS_NAME}__header` }, module.moduleInfo.FriendlyName),
-            React.createElement(Box, { flex: 1 }),
+            React.createElement(Box, { className: "twa:flex-1" }),
             React.createElement(ButtonNew, { onClick: () => setIsWizardOpen(true) }, "New")),
         itemsInScope?.length ? React.createElement(AdaptableObjectList, { items: itemsInScope, module: module }) : null,
         isWizardOpen && EditWizard && (React.createElement(EditWizard, { popupParams: {
@@ -215,18 +212,16 @@ export const ColumnInfo = (props) => {
     const adaptable = useAdaptable();
     const [selectedColumnId, setSelectedColumnId] = React.useState(props.selectedColumnId);
     const column = adaptable.api.columnApi.getColumnWithColumnId(selectedColumnId);
-    return (React.createElement(Panel, { flex: 1 },
-        React.createElement(Box, { mb: 3 },
+    return (React.createElement(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
+        React.createElement(Panel.FlexBody, { className: "twa:gap-3" },
             React.createElement(FormLayout, null,
                 React.createElement(FormRow, { label: "Select Column" },
-                    React.createElement(ColumnSelector, { value: selectedColumnId, onChange: (columnId) => setSelectedColumnId(columnId) })))),
-        selectedColumnId && (React.createElement(Tabs, { mb: 3 },
-            React.createElement(Tabs.Tab, null, "Column Summary"),
-            React.createElement(Tabs.Tab, null, "Column State"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(Flex, { flex: 1 }, selectedColumnId && React.createElement(ColumnDefPreview, { column: column }))),
-            ' ',
-            React.createElement(Tabs.Content, null, selectedColumnId && (React.createElement(Box, { className: BASE_CLASS_NAME }, MODULES_WITH_COLUMN.map((moduleName) => {
-                return (React.createElement(ModuleView, { key: moduleName, moduleName: moduleName, selectedColumnId: selectedColumnId }));
-            }))))))));
+                    React.createElement(ColumnSelector, { value: selectedColumnId, onChange: (columnId) => setSelectedColumnId(columnId) }))),
+            selectedColumnId && (React.createElement(Tabs, { className: "twa:min-h-0 twa:flex-1" },
+                React.createElement(Tabs.Tab, null, "Column Summary"),
+                React.createElement(Tabs.Tab, null, "Column State"),
+                React.createElement(Tabs.Content, null, selectedColumnId && React.createElement(ColumnDefPreview, { column: column })),
+                React.createElement(Tabs.Content, null, selectedColumnId && (React.createElement(Box, { className: BASE_CLASS_NAME }, MODULES_WITH_COLUMN.map((moduleName) => {
+                    return (React.createElement(ModuleView, { key: moduleName, moduleName: moduleName, selectedColumnId: selectedColumnId }));
+                })))))))));
 };

package/src/View/ColumnInfo/ColumnInfoPopup.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { Flex } from 'rebass';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import { ColumnInfo } from './ColumnInfo';
+import { Flex } from '../../components/Flex';
 export const ColumnInfoPopup = (props) => {
     return (React.createElement(PopupPanel, { headerText: 'Column Info', glyphicon: 'info' },
-        React.createElement(Flex, { flexDirection: "column", flex: 1, height: "100%" },
+        React.createElement(Flex, { flexDirection: "column", className: "twa:flex-1 twa:h-full twa:[--ab-grid-row-height:45px]" },
             React.createElement(ColumnInfo, { selectedColumnId: props.popupParams?.column?.columnId }))));
 };

package/src/View/Comments/CommentsEditor.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { Box, Flex, Text } from 'rebass';
 import { Icon } from '../../components/icons';
 import Panel from '../../components/Panel';
 import SimpleButton from '../../components/SimpleButton';
@@ -9,6 +8,7 @@ import { CommentsAndNotesSelector } from '../../Redux/ActionsReducers/InternalRe
 import { useAdaptable } from '../AdaptableContext';
 import AdaptableInput from '../Components/AdaptableInput';
 import FormatHelper from '../../Utilities/Helpers/FormatHelper';
+import { Box, Flex } from '../../components/Flex';
 // Edit Mode
 // [author] [edit, delete]
 // [text-editor] * this is different
@@ -51,21 +51,18 @@ export const CommentsEditor = (props) => {
     const formatDate = (date, format) => {
         return FormatHelper.DateFormatter(date, { Pattern: format });
     };
-    return (React.createElement(Panel, { color: "var(--ab-color-text-on-primary)", onClick: () => props.enableEditMode(), minWidth: 250, className: "ab-CommentPopup", onKeyDown: (event) => {
+    return (React.createElement(Panel, { color: "var(--ab-color-text-on-primary)", onClick: () => props.enableEditMode(), className: "ab-CommentPopup twa:min-w-[250px]", onKeyDown: (event) => {
             if (event.key === 'Escape') {
                 api.commentApi.hideCommentsPopup();
             }
         } },
         showCloseButton && (React.createElement(Flex, null,
-            React.createElement(Box, { flex: 1 }),
+            React.createElement(Box, { className: "twa:flex-1" }),
             React.createElement(SimpleButton, { onClick: (event) => {
                     event.stopPropagation();
                     api.commentApi.hideCommentsPopup();
                 }, variant: "text", icon: "close" }))),
-        React.createElement(Flex, { style: {
-                overflow: 'auto',
-                maxHeight: 300,
-            }, flexDirection: "column", ref: commentsWrapperRef }, comments &&
+        React.createElement(Flex, { className: "twa:overflow-auto twa:max-h-[300px]", flexDirection: "column", ref: commentsWrapperRef }, comments &&
             comments.length > 0 &&
             comments.map((comment, index) => {
                 if (!comment) {
@@ -74,12 +71,12 @@ export const CommentsEditor = (props) => {
                 const isOwnComment = comment?.Author?.UserName
                     ? comment?.Author?.UserName === userId
                     : true; // no owner means it's the current user
-                return (React.createElement(Box, { p: 2, key: comment.Uuid ?? index, className: "ab-Comment" },
-                    React.createElement(Flex, { mb: 2, alignItems: "center" },
+                return (React.createElement(Box, { key: comment.Uuid ?? index, className: "ab-Comment twa:p-2" },
+                    React.createElement(Flex, { alignItems: "center", className: "twa:mb-2" },
                         React.createElement(Box, null,
-                            React.createElement(Box, { "data-name": "comment-username", fontSize: 3, fontWeight: "bold" }, comment?.Author?.UserName),
-                            comment.Timestamp && (React.createElement(Box, { "data-name": "comment-timestamp", fontSize: 2 }, formatDate(comment.Timestamp, api.commentApi.internalApi.getCommentsDateFormat())))),
-                        React.createElement(Box, { flex: 1 }),
+                            React.createElement(Box, { "data-name": "comment-username", className: "twa:text-3 twa:font-bold" }, comment?.Author?.UserName),
+                            comment.Timestamp && (React.createElement(Box, { "data-name": "comment-timestamp", className: "twa:text-2" }, formatDate(comment.Timestamp, api.commentApi.internalApi.getCommentsDateFormat())))),
+                        React.createElement(Box, { className: "twa:flex-1" }),
                         React.createElement(SimpleButton, { variant: "text", icon: "edit", disabled: !isOwnComment || isReadOnlyModule, onClick: () => setActiveEditingComment(comment.Uuid) }),
                         React.createElement(SimpleButton, { variant: "text", icon: "delete", disabled: !isOwnComment || isReadOnlyModule, onClick: () => {
                                 api.commentApi.deleteComment(comment, cellAddress);
@@ -87,7 +84,7 @@ export const CommentsEditor = (props) => {
                                     props.onRefreshContent();
                                 });
                             } })),
-                    React.createElement(Box, { onClick: () => setActiveEditingComment(comment.Uuid) }, comment.Uuid === activeEditingComment ? (React.createElement(AdaptableInput, { autoFocus: true, width: "100%", defaultValue: comment.Value, disabled: isReadOnlyModule, onBlur: () => {
+                    React.createElement(Box, { onClick: () => setActiveEditingComment(comment.Uuid) }, comment.Uuid === activeEditingComment ? (React.createElement(AdaptableInput, { autoFocus: true, className: "twa:w-full", defaultValue: comment.Value, disabled: isReadOnlyModule, onBlur: () => {
                             if (comment.Uuid === activeEditingComment) {
                                 setActiveEditingComment(null);
                             }
@@ -96,7 +93,7 @@ export const CommentsEditor = (props) => {
                                 ...comment,
                                 Value: event.target.value,
                             }, cellAddress);
-                        } })) : (React.createElement(Text, { "data-name": "comment-text" }, comment.Value)))));
+                        } })) : (React.createElement(Box, { "data-name": "comment-text" }, comment.Value)))));
             })),
         React.createElement(AdaptableInput, { autoFocus: !comments || comments.length === 0, value: newCommentText, disabled: isReadOnlyModule, onChange: (event) => {
                 setNewCommentText(event.target.value);
@@ -109,12 +106,12 @@ export const CommentsEditor = (props) => {
                         scrollToBottom();
                     });
                 }
-            }, mt: 2, mb: "2", width: "100%", placeholder: "Write new Comment" }),
-        React.createElement(SimpleButton, { width: "100%", variant: "raised", onClick: () => {
+            }, className: "twa:w-full twa:my-2", placeholder: "Write new Comment" }),
+        React.createElement(SimpleButton, { className: "twa:w-full", variant: "raised", onClick: () => {
                 api.settingsPanelApi.openSettingsPanel('Comment');
                 api.internalApi.getAnnotationsService().hidePopup();
             } },
-            React.createElement(Box, { mr: 2 },
+            React.createElement(Box, { className: "twa:mr-2" },
                 React.createElement(Icon, { name: "folder" })),
             ' ',
             "Open all Comments")));

package/src/View/Comments/CommentsPopup.js

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
 import Panel from '../../components/Panel';
-import { Box, Flex } from 'rebass';
 import { useAdaptable } from '../AdaptableContext';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import { AdaptableButtonComponent } from '../Components/AdaptableButton';
 import FormatHelper from '../../Utilities/Helpers/FormatHelper';
+import { Box, Flex } from '../../components/Flex';
 const tableDOMProps = {
     style: {
         minHeight: 160,
@@ -57,12 +57,12 @@ const CellComments = (props) => {
         return adaptable.api.columnApi.getFriendlyNameForColumnId(primaryKey);
     }, []);
     const columnFriendlyName = adaptable.api.columnApi.getFriendlyNameForColumnId(props.commentThread.ColumnId);
-    return (React.createElement(Panel, { mb: 2, header: React.createElement(Flex, { width: "100%", alignItems: "center" },
-            React.createElement(Box, { mr: 2 },
+    return (React.createElement(Panel, { className: "twa:mb-2", header: React.createElement(Flex, { alignItems: "center", className: "twa:w-full" },
+            React.createElement(Box, { className: "twa:mr-2" },
                 React.createElement("b", null, "Cell Value:"),
                 " ",
                 cellValue),
-            React.createElement(Box, { mr: 2 },
+            React.createElement(Box, { className: "twa:mr-2" },
                 React.createElement("b", null,
                     primaryKeyHeader,
                     ":"),
@@ -72,8 +72,8 @@ const CellComments = (props) => {
                 React.createElement("b", null, "Column:"),
                 " ",
                 columnFriendlyName),
-            React.createElement(Box, { flex: 1 }),
-            React.createElement(AdaptableButtonComponent, { mr: 1, variant: "text", icon: "visibility-on", onClick: () => {
+            React.createElement(Box, { className: "twa:flex-1" }),
+            React.createElement(AdaptableButtonComponent, { className: "twa:mr-1", variant: "text", icon: "visibility-on", onClick: () => {
                     adaptable.api.internalApi.getAnnotationsService().showPopup({
                         ColumnId: props.commentThread.ColumnId,
                         PrimaryKeyValue: props.commentThread.PrimaryKeyValue,

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

@@ -3,7 +3,7 @@ import { Datepicker } from '../../../components/Datepicker';
 import { useAdaptable } from '../../AdaptableContext';
 import useProperty from '../../../components/utils/useProperty';
 import { dateToISO, parseDateValue } from '../../../Utilities/Helpers/DateHelper';
-const AdaptableDateInput = React.forwardRef((props, ref) => {
+const AdaptableDateInput = React.forwardRef(function AdaptableDateInputCmp(props, ref) {
     const dateInputOptions = useAdaptable().adaptableOptions.userInterfaceOptions.dateInputOptions;
     const { value: _, defaultValue: __, onChange, required, disabled, showClearButton, ...inputProps } = props;
     const [value, setValue] = useProperty(props, 'value', undefined, {