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

package/src/Strategy/Utilities/Alert/getAlertPreviewViewItems.js

@@ -8,7 +8,7 @@ export const getAlertPreviewViewItems = (alert, api) => {
             if (!alert?.AlertProperties?.DisplayNotification) {
                 return React.createElement(Tag, null, alert.MessageType);
             }
-            return (React.createElement(AlertPreview, { focusFirstButton: false, style: { maxWidth: 400 }, mt: 2, api: api, alertDefinition: alert }));
+            return (React.createElement(AlertPreview, { focusFirstButton: false, className: "twa:max-w-[400px] twa:mt-2", api: api, alertDefinition: alert }));
         },
     };
 };

package/src/Strategy/Utilities/FormatColumn/getFormatColumnSettingsViewItems.js

@@ -20,8 +20,9 @@ export const getFormatColumnSettingsViewItems = (formatColumn) => {
     if (formatColumn.ColumnGroupScope) {
         values.push(`Column Groups: ${formatColumn.ColumnGroupScope === 'Both' ? 'Always' : formatColumn.ColumnGroupScope}`);
     }
+    values = values.filter(Boolean);
     return {
         name: 'Settings',
-        values: values.filter(Boolean),
+        values: values.length > 0 ? values : ['-'],
     };
 };

package/src/Strategy/Utilities/Layout/getLayoutFilterViewItems.js

@@ -1,14 +1,15 @@
 import { mapAdaptablePredicateDefToQlPredicateDef, mapColumnFilterToQlPredicate, qlPredicateToString, } from '../../..//View/Components/ColumnFilter/utils';
 import { mapColumnDataTypeToExpressionFunctionType } from '../../../Utilities/adaptableQlUtils';
 export const getFilterPreview = (columnFilter, api) => {
-    const column = api.columnApi.getColumnWithColumnId(columnFilter.ColumnId);
+    const columnId = columnFilter.ColumnId;
+    const column = api.columnApi.getColumnWithColumnId(columnId);
     const columnFilterOptions = api.optionsApi.getFilterOptions().columnFilterOptions;
     const predicateDefs = api.filterApi.columnFilterApi.getFilterPredicateDefsForColumn(column);
-    const columnType = api.columnApi.getColumnDataTypeForColumnId(columnFilter.ColumnId);
+    const columnType = api.columnApi.getColumnDataTypeForColumnId(columnId);
     const qlDataType = mapColumnDataTypeToExpressionFunctionType(columnType);
     const qlPredicateDefs = predicateDefs.map((pd) => mapAdaptablePredicateDefToQlPredicateDef(pd, qlDataType));
     const qlPredicate = mapColumnFilterToQlPredicate(columnFilter, column, qlPredicateDefs, columnFilterOptions, 'FilterForm', api);
-    return `[${qlPredicateToString(qlPredicate, qlPredicateDefs)}]`;
+    return `${column.friendlyName} ${qlPredicateToString(qlPredicate, qlPredicateDefs)}`;
 };
 export const getLayoutFilterViewItems = (layout, api) => {
     return {

package/src/Utilities/Constants/DocumentationLinkConstants.d.ts

@@ -1,17 +1,18 @@
-export declare const HOST_URL_DOCS = "https://docs.adaptabletools.com";
-export declare const ExpressionEditorDocsLink = "https://docs.adaptabletools.com/guide/ui-expression-editor";
-export declare const BooleanQueryDocsLink = "https://docs.adaptabletools.com/guide/adaptable-ql-expression-standard";
-export declare const ScalarQueryDocsLink = "https://docs.adaptabletools.com/guide/adaptable-ql-expression-standard";
-export declare const ObservableQueryDocsLink = "https://docs.adaptabletools.com/guide/adaptable-ql-expression-observable";
-export declare const AggregatedBooleanQueryDocsLink = "https://docs.adaptabletools.com/guide/adaptable-ql-expression-aggregation";
-export declare const AggregatedScalarQueryDocsLink = "https://docs.adaptabletools.com/guide/adaptable-ql-expression-aggregation";
-export declare const CumulativeAggregatedScalarQueryDocsLink = "https://docs.adaptabletools.com/guide/adaptable-ql-expression-cumulative";
-export declare const QuantileAggregatedScalarQueryDocsLink = "https://docs.adaptabletools.com/guide/adaptable-ql-expression-quantile";
-export declare const PredicateDocsLink = "https://docs.adaptabletools.com/guide/adaptable-predicate";
-export declare const PrimaryKeyDocsLink = "https://docs.adaptabletools.com/guide/getting-started-primary-key";
-export declare const LicenseDocsLink = "https://docs.adaptabletools.com/guide/licensing";
-export declare const AdaptableOptionsDocsLink = "https://docs.adaptabletools.com/guide/reference-options-overview";
-export declare const AgGridModulesDocsLink = "https://docs.adaptabletools.com/guide/dev-guide-aggrid-modules-overview";
-export declare const AlertMessageDocsLink = "https://docs.adaptabletools.com/guide/handbook-alerting-message";
-export declare const FormatColumnPlaceholderDocsLink = "https://docs.adaptabletools.com/guide/handbook-column-formatting-display-format-placeholder";
-export declare const AgGridRequiredModulesDocsLink = "https://docs.adaptabletools.com/guide/dev-guide-aggrid-modules-overview#mandatory-modules";
+export declare const HOST_URL_ROOT = "https://www.adaptabletools.com";
+export declare const HOST_URL_DOCS = "https://www.adaptabletools.com/docs";
+export declare const ExpressionEditorDocsLink = "https://www.adaptabletools.com/docs/ui-expression-editor";
+export declare const BooleanQueryDocsLink = "https://www.adaptabletools.com/docs/adaptable-ql-expression-standard";
+export declare const ScalarQueryDocsLink = "https://www.adaptabletools.com/docs/adaptable-ql-expression-standard";
+export declare const ObservableQueryDocsLink = "https://www.adaptabletools.com/docs/adaptable-ql-expression-observable";
+export declare const AggregatedBooleanQueryDocsLink = "https://www.adaptabletools.com/docs/adaptable-ql-expression-aggregation";
+export declare const AggregatedScalarQueryDocsLink = "https://www.adaptabletools.com/docs/adaptable-ql-expression-aggregation";
+export declare const CumulativeAggregatedScalarQueryDocsLink = "https://www.adaptabletools.com/docs/adaptable-ql-expression-cumulative";
+export declare const QuantileAggregatedScalarQueryDocsLink = "https://www.adaptabletools.com/docs/adaptable-ql-expression-quantile";
+export declare const PredicateDocsLink = "https://www.adaptabletools.com/docs/adaptable-predicate";
+export declare const PrimaryKeyDocsLink = "https://www.adaptabletools.com/docs/getting-started-primary-key";
+export declare const LicenseDocsLink = "https://www.adaptabletools.com/buy/buying-adaptable-licensing";
+export declare const AdaptableOptionsDocsLink = "https://www.adaptabletools.com/docs/reference-options-overview";
+export declare const AgGridModulesDocsLink = "https://www.adaptabletools.com/docs/dev-guide-aggrid-modules-overview";
+export declare const AlertMessageDocsLink = "https://www.adaptabletools.com/docs/handbook-alerting-message";
+export declare const FormatColumnPlaceholderDocsLink = "https://www.adaptabletools.com/docs/handbook-column-formatting-display-format-placeholder";
+export declare const AgGridRequiredModulesDocsLink = "https://www.adaptabletools.com/docs/dev-guide-aggrid-modules-overview#mandatory-modules";

package/src/Utilities/Constants/DocumentationLinkConstants.js

@@ -1,18 +1,19 @@
-export const HOST_URL_DOCS = 'https://docs.adaptabletools.com';
+export const HOST_URL_ROOT = 'https://www.adaptabletools.com';
+export const HOST_URL_DOCS = `${HOST_URL_ROOT}/docs`;
 //export const HOST_URL_DOCS = 'http://localhost:3000';
-export const ExpressionEditorDocsLink = `${HOST_URL_DOCS}/guide/ui-expression-editor`;
-export const BooleanQueryDocsLink = `${HOST_URL_DOCS}/guide/adaptable-ql-expression-standard`;
-export const ScalarQueryDocsLink = `${HOST_URL_DOCS}/guide/adaptable-ql-expression-standard`;
-export const ObservableQueryDocsLink = `${HOST_URL_DOCS}/guide/adaptable-ql-expression-observable`;
-export const AggregatedBooleanQueryDocsLink = `${HOST_URL_DOCS}/guide/adaptable-ql-expression-aggregation`;
-export const AggregatedScalarQueryDocsLink = `${HOST_URL_DOCS}/guide/adaptable-ql-expression-aggregation`;
-export const CumulativeAggregatedScalarQueryDocsLink = `${HOST_URL_DOCS}/guide/adaptable-ql-expression-cumulative`;
-export const QuantileAggregatedScalarQueryDocsLink = `${HOST_URL_DOCS}/guide/adaptable-ql-expression-quantile`;
-export const PredicateDocsLink = `${HOST_URL_DOCS}/guide/adaptable-predicate`;
-export const PrimaryKeyDocsLink = `${HOST_URL_DOCS}/guide/getting-started-primary-key`;
-export const LicenseDocsLink = `${HOST_URL_DOCS}/guide/licensing`;
-export const AdaptableOptionsDocsLink = `${HOST_URL_DOCS}/guide/reference-options-overview`;
-export const AgGridModulesDocsLink = `${HOST_URL_DOCS}/guide/dev-guide-aggrid-modules-overview`;
-export const AlertMessageDocsLink = `${HOST_URL_DOCS}/guide/handbook-alerting-message`;
-export const FormatColumnPlaceholderDocsLink = `${HOST_URL_DOCS}/guide/handbook-column-formatting-display-format-placeholder`;
-export const AgGridRequiredModulesDocsLink = `${HOST_URL_DOCS}/guide/dev-guide-aggrid-modules-overview#mandatory-modules`;
+export const ExpressionEditorDocsLink = `${HOST_URL_DOCS}/ui-expression-editor`;
+export const BooleanQueryDocsLink = `${HOST_URL_DOCS}/adaptable-ql-expression-standard`;
+export const ScalarQueryDocsLink = `${HOST_URL_DOCS}/adaptable-ql-expression-standard`;
+export const ObservableQueryDocsLink = `${HOST_URL_DOCS}/adaptable-ql-expression-observable`;
+export const AggregatedBooleanQueryDocsLink = `${HOST_URL_DOCS}/adaptable-ql-expression-aggregation`;
+export const AggregatedScalarQueryDocsLink = `${HOST_URL_DOCS}/adaptable-ql-expression-aggregation`;
+export const CumulativeAggregatedScalarQueryDocsLink = `${HOST_URL_DOCS}/adaptable-ql-expression-cumulative`;
+export const QuantileAggregatedScalarQueryDocsLink = `${HOST_URL_DOCS}/adaptable-ql-expression-quantile`;
+export const PredicateDocsLink = `${HOST_URL_DOCS}/adaptable-predicate`;
+export const PrimaryKeyDocsLink = `${HOST_URL_DOCS}/getting-started-primary-key`;
+export const LicenseDocsLink = `${HOST_URL_ROOT}/buy/buying-adaptable-licensing`;
+export const AdaptableOptionsDocsLink = `${HOST_URL_DOCS}/reference-options-overview`;
+export const AgGridModulesDocsLink = `${HOST_URL_DOCS}/dev-guide-aggrid-modules-overview`;
+export const AlertMessageDocsLink = `${HOST_URL_DOCS}/handbook-alerting-message`;
+export const FormatColumnPlaceholderDocsLink = `${HOST_URL_DOCS}/handbook-column-formatting-display-format-placeholder`;
+export const AgGridRequiredModulesDocsLink = `${HOST_URL_DOCS}/dev-guide-aggrid-modules-overview#mandatory-modules`;

package/src/Utilities/ExpressionFunctions/expressionFunctionUtils.d.ts

@@ -14,18 +14,18 @@ export declare const getStringValues: (context: ExpressionContext, ...stringArgu
 export declare const getStringValue: (context: ExpressionContext, stringArgument: string) => string;
 export declare const isTextSearchCaseInsensitive: (context: ExpressionContext) => boolean;
 export declare const getDataChangeLog$: (context: ExpressionContext, columnNameFilter: string) => Observable<CellDataChangedInfo>;
-export declare const getGridChangeLog$: (context: ExpressionContext, rowChangeType: RowDataChangedInfo['rowTrigger']) => Observable<RowDataChangedInfo>;
+export declare const getGridChangeLog$: (context: ExpressionContext, rowChangeType: RowDataChangedInfo["rowTrigger"]) => Observable<RowDataChangedInfo>;
 export declare const handleWhereFunction: (args: ExpressionNode[], context: ExpressionContext) => any;
 export type ExpressionNode = any;
 export declare const evaluateExpressionNode: (expressionNode: ExpressionNode, context: ExpressionContext, filterFn?: (item: any) => boolean) => any;
 export declare const extractColumnParameter: (consumingFunctionName: string, args: BaseParameter[]) => ColumnParameter;
 export declare const extractColumnParameters: (consumingFunctionName: string, args: BaseParameter[]) => ColumnParameter[];
-export declare const extractParameter: <T extends BaseParameter<string, string>>(consumingFunctionName: string, allowedType: T['type'], allowedOperands: T['name'][], args: BaseParameter[], config?: {
+export declare const extractParameter: <T extends BaseParameter>(consumingFunctionName: string, allowedType: T["type"], allowedOperands: T["name"][], args: BaseParameter[], config?: {
     isOptional?: boolean;
 }) => T | undefined;
-export declare const extractParameters: <T extends BaseParameter<string, string>>(consumingFunctionName: string, allowedType: T['type'], allowedOperands: T['name'][], args: BaseParameter[], config?: {
+export declare const extractParameters: <T extends BaseParameter>(consumingFunctionName: string, allowedType: T["type"], allowedOperands: T["name"][], args: BaseParameter[], config?: {
     isOptional?: boolean;
 }) => T[] | undefined;
 export declare const handleColumnFunction: (args: any[], context: ExpressionContext) => ColumnParameter;
 export declare const getNumericValue: (input: unknown, returnRawValue?: boolean) => number;
-export declare const validateColumnType: (columnId: string, validColumnTypes: ('number' | 'text' | 'date')[], consumingFunction: string, api: AdaptableApi) => import("../../types").AdaptableColumnDataType;
+export declare const validateColumnType: (columnId: string, validColumnTypes: ("number" | "text" | "date")[], consumingFunction: string, api: AdaptableApi) => import("../../types").AdaptableColumnDataType;

package/src/Utilities/Extensions/StringExtensions.d.ts

@@ -1,6 +1,6 @@
 export declare function IsNull(stringToCheck: string | undefined): boolean;
 export declare function IsNotNull(stringToCheck: string | undefined): boolean;
-export declare function IsEmpty(stringToCheck: string | undefined): boolean;
+export declare function IsEmpty(stringToCheck: string | undefined): stringToCheck is "";
 export declare function IsNotEmpty(stringToCheck: string | undefined): boolean;
 export declare function IsNullOrEmpty(stringToCheck: string | undefined): boolean;
 export declare function IsNotNullOrEmpty(stringToCheck: string | undefined): boolean;

package/src/Utilities/Helpers/StyleHelper.d.ts

@@ -7,7 +7,7 @@ export declare const sanitizeStyle: (style: Record<string, any>) => Record<strin
 export declare const convertAdaptableStyleToCSS: (style: AdaptableStyle) => {
     [cssProperty: string]: string;
 };
-export declare const convertCSSAbsoluteFontSizeToPt: (fontSize: 'x-large' | 'large' | 'medium' | 'small' | 'x-small') => number;
+export declare const convertCSSAbsoluteFontSizeToPt: (fontSize: "x-large" | "large" | "medium" | "small" | "x-small") => number;
 export declare const toStyle: (style?: AdaptableStyle) => {
     borderWidth: number;
     borderStyle: string;

package/src/Utilities/Services/Interface/IAlertService.d.ts

@@ -20,5 +20,5 @@ export interface IAlertService extends IAdaptableService {
     getReactiveActiveAlerts(): AlertDefinition[];
     isReactiveAlertActive(alertDefinition: AlertDefinition): boolean;
 }
-export declare const isRowDataChangedInfo: (value: CellDataChangedInfo | RowDataChangedInfo) => value is RowDataChangedInfo<any>;
-export declare const isCellDataChangedInfo: (value: CellDataChangedInfo | RowDataChangedInfo) => value is CellDataChangedInfo<any>;
+export declare const isRowDataChangedInfo: (value: CellDataChangedInfo | RowDataChangedInfo) => value is RowDataChangedInfo;
+export declare const isCellDataChangedInfo: (value: CellDataChangedInfo | RowDataChangedInfo) => value is CellDataChangedInfo;

package/src/Utilities/Services/ModuleService.js

@@ -105,84 +105,83 @@ export class ModuleService {
     }
     getModuleDocumentationPageByModule(adaptableModule) {
         let url = `${HOST_URL_DOCS}/`;
-        let learnUrl = url + 'guide/';
         switch (adaptableModule) {
             case 'Alert':
-                return learnUrl + 'handbook-alerting';
+                return url + 'handbook-alerting';
             case 'BulkUpdate':
                 return url + 'handbook-editing-bulk-update';
             case 'CalculatedColumn':
-                return learnUrl + 'handbook-calculated-column';
+                return url + 'handbook-calculated-column';
             case 'CellSummary':
-                return learnUrl + 'handbook-summarising';
+                return url + 'handbook-summarising';
             case 'Charting':
-                return learnUrl + 'handbook-charts';
+                return url + 'handbook-charts';
             case 'ColumnFilter':
-                return learnUrl + 'handbook-column-filter';
+                return url + 'handbook-column-filter';
             case 'ColumnInfo':
-                return learnUrl + 'dev-guide-column-grid-column-info';
+                return url + 'dev-guide-column-grid-column-info';
             case 'Comment':
-                return learnUrl + 'handbook-comments';
+                return url + 'handbook-comments';
             case 'CustomSort':
-                return learnUrl + 'handbook-custom-sorting';
+                return url + 'handbook-custom-sorting';
             case 'Dashboard':
-                return learnUrl + 'ui-dashboard';
+                return url + 'ui-dashboard';
             case 'DataChangeHistory':
-                return learnUrl + 'handbook-monitoring-data-change-history';
+                return url + 'handbook-monitoring-data-change-history';
             case 'DataImport':
-                return learnUrl + 'handbook-importing';
+                return url + 'handbook-importing';
             case 'DataSet':
-                return learnUrl + 'handbook-data-sets';
+                return url + 'handbook-data-sets';
             case 'Export':
-                return learnUrl + 'handbook-exporting';
+                return url + 'handbook-exporting';
             case 'Fdc3':
-                return learnUrl + 'handbook-fdc3';
+                return url + 'handbook-fdc3';
             case 'FlashingCell':
-                return learnUrl + 'handbook-flashing-cell';
+                return url + 'handbook-flashing-cell';
             case 'FormatColumn':
-                return learnUrl + 'handbook-column-formatting';
+                return url + 'handbook-column-formatting';
             case 'FreeTextColumn':
-                return learnUrl + 'handbook-freetext-column';
+                return url + 'handbook-freetext-column';
             case 'GridFilter':
-                return learnUrl + 'handbook-grid-filter';
+                return url + 'handbook-grid-filter';
             case 'GridInfo':
-                return learnUrl + 'dev-guide-column-grid-column-info';
+                return url + 'dev-guide-column-grid-column-info';
             case 'Layout':
-                return learnUrl + 'handbook-layouts';
+                return url + 'handbook-layouts';
             case 'NamedQuery':
-                return learnUrl + 'handbook-named-queries';
+                return url + 'handbook-named-queries';
             case 'Note':
-                return learnUrl + 'handbook-notes';
+                return url + 'handbook-notes';
             case 'PlusMinus':
-                return learnUrl + 'handbook-editing-plus-minus';
+                return url + 'handbook-editing-plus-minus';
             case 'QuickSearch':
-                return learnUrl + 'handbook-quick-search';
+                return url + 'handbook-quick-search';
             case 'Schedule':
-                return learnUrl + 'handbook-scheduling';
+                return url + 'handbook-scheduling';
             case 'SettingsPanel':
-                return learnUrl + 'ui-settings-panel';
+                return url + 'ui-settings-panel';
             case 'Shortcut':
-                return learnUrl + 'handbook-editing-shortcut';
+                return url + 'handbook-editing-shortcut';
             case 'SmartEdit':
-                return learnUrl + 'handbook-editing-smart-edit';
+                return url + 'handbook-editing-smart-edit';
             case 'StateManagement':
-                return learnUrl + 'dev-guide-adaptable-state-management';
+                return url + 'dev-guide-adaptable-state-management';
             case 'StatusBar':
-                return learnUrl + 'ui-status-bar';
+                return url + 'ui-status-bar';
             case 'StyledColumn':
-                return learnUrl + 'handbook-styled-column-overview';
+                return url + 'handbook-styled-column-overview';
             case 'SystemStatus':
-                return learnUrl + 'handbook-system-status-message';
+                return url + 'handbook-system-status-message';
             case 'TeamSharing':
-                return learnUrl + 'handbook-team-sharing';
+                return url + 'handbook-team-sharing';
             case 'Theme':
-                return learnUrl + 'handbook-theming';
+                return url + 'handbook-theming';
             case 'ToolPanel':
-                return learnUrl + 'ui-tool-panel';
+                return url + 'ui-tool-panel';
             case 'IPushPull':
-                return learnUrl + 'integrations-ipushpull';
+                return url + 'integrations-ipushpull';
             case 'OpenFin':
-                return learnUrl + 'integrations-openfin';
+                return url + 'integrations-openfin';
             default:
                 return 'good';
         }

package/src/Utilities/createAgStatusPanelComponent.d.ts

@@ -9,7 +9,7 @@ export interface StatusPanelProps {
         Key: string;
     };
 }
-export declare const createAgStatusPanelComponent: (component: React.FunctionComponent<StatusPanelProps>, adaptable: IAdaptable, context: StatusPanelProps['context']) => ((props: IStatusPanelParams) => React.JSX.Element) | {
+export declare const createAgStatusPanelComponent: (component: React.FunctionComponent<StatusPanelProps>, adaptable: IAdaptable, context: StatusPanelProps["context"]) => ((props: IStatusPanelParams) => React.JSX.Element) | {
     new (): {
         params: IStatusPanelParams;
         eGui: HTMLElement;

package/src/Utilities/getObjectTagsViewItems.js

@@ -29,7 +29,7 @@ export const getObjectTagsViewItems = (object, api) => {
                 const editAction = viewOptions.getEditAction(newObject);
                 dispatch(editAction);
             }, [hasCurrentLayoutAsTag, props.data]);
-            return (React.createElement(SimpleButton, { onClick: handleToggleTag, mt: 1, icon: hasCurrentLayoutAsTag ? 'minus' : 'plus' }, hasCurrentLayoutAsTag ? 'Remove from Layout' : 'Add to Layout'));
+            return (React.createElement(SimpleButton, { onClick: handleToggleTag, className: "twa:mt-1", icon: hasCurrentLayoutAsTag ? 'minus' : 'plus' }, hasCurrentLayoutAsTag ? 'Remove from Layout' : 'Add to Layout'));
         },
     };
 };

package/src/Utilities/runIfNotResolvedIn.d.ts

@@ -5,4 +5,4 @@
  * @param callback Called if promise does not resolve in the time defined by 'delay'
  * @param delay Time after which if the promise was not resolved the callback (fn) is called.
  */
-export declare const runIfNotResolvedIn: <T>(promise: Promise<T>, callback: () => void, delay?: number) => Promise<T>;
+export declare const runIfNotResolvedIn: <T>(promise: Promise<T>, callback: () => void, delay?: number) => typeof promise;

package/src/View/AdaptableComputedCSSVarsContext.js

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { CSSNumericVariableWatch } from '../components/Select/CSSNumericVariableWatch';
+import debounce from 'lodash/debounce';
+import { useMemo } from 'react';
 const computedCSSVarNames = [
     '--ab-cmp-select-menu__max-width',
     '--ab-cmp-select-menu__min-width',
@@ -8,7 +10,10 @@ const computedCSSVarNames = [
 const defaultValues = Object.fromEntries(computedCSSVarNames.map((varName) => [varName, 0]));
 export const AdaptableComputedCSSVarsContext = React.createContext(defaultValues);
 export const WithAdaptableComputedCSSVars = ({ children }) => {
-    const [computedCSSVars, setComputedCSSVars] = React.useState(defaultValues);
+    const [computedCSSVars, doSetComputedCSSVars] = React.useState(defaultValues);
+    const setComputedCSSVars = useMemo(() => {
+        return debounce(doSetComputedCSSVars, 300, { leading: false, trailing: true });
+    }, [doSetComputedCSSVars]);
     return (React.createElement(AdaptableComputedCSSVarsContext.Provider, { value: computedCSSVars },
         children,
         computedCSSVarNames.map((varName) => (React.createElement(CSSNumericVariableWatch, { key: varName, varName: varName, onChange: (value) => {

package/src/View/AdaptablePopover/index.d.ts

@@ -14,7 +14,7 @@ export interface AdaptablePopoverProps extends React.ClassAttributes<React.Props
     tooltipText?: string;
     popoverMinWidth?: number;
     popoverMaxWidth?: number;
-    popupPadding?: number;
+    popupPadding?: 0 | 2;
     alignPosition?: OverlayShowParams['alignPosition'];
     visible?: boolean;
 }

package/src/View/AdaptablePopover/index.js

@@ -4,7 +4,7 @@ import { UIHelper } from '../UIHelper';
 import { ButtonInfo } from '../Components/Buttons/ButtonInfo';
 import { Icon } from '../../components/icons';
 import OverlayTrigger from '../../components/OverlayTrigger';
-import { Flex, Box, Text } from 'rebass';
+import { Box, Flex } from '../../components/Flex';
 export class AdaptablePopover extends React.Component {
     render() {
         let messageType = this.props.MessageType != null ? this.props.MessageType : 'Info';
@@ -20,8 +20,8 @@ export class AdaptablePopover extends React.Component {
                 minWidth: popoverMinWidth,
                 maxWidth: this.props.popoverMaxWidth ?? 300,
             } },
-            title ? (React.createElement(Text, { fontSize: 4, padding: 2 }, title)) : null,
-            React.createElement(Box, { className: "ab-Popover__body", padding: this.props.popupPadding ?? 2 }, this.props.bodyText.map((textOrHTML, index) => (React.createElement("span", { key: index }, textOrHTML))))));
+            title ? React.createElement(Box, { className: "twa:text-4 twa:p-2" }, title) : null,
+            React.createElement(Box, { className: `ab-Popover__body ${(this.props.popupPadding ?? 2) === 0 ? 'twa:p-0' : 'twa:p-2'}` }, this.props.bodyText.map((textOrHTML, index) => (React.createElement("span", { key: index }, textOrHTML))))));
         const icon = 'info'; // - think this is wrong - UIHelper.getGlyphByMessageType(messageType);
         const color = UIHelper.getColorByMessageType(messageType);
         const iconStyle = {

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/AdaptableOptionsForm.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
 import { CheckBox } from '../../../components/CheckBox';
 import DropdownButton from '../../../components/DropdownButton';
 import HelpBlock from '../../../components/HelpBlock';
@@ -7,13 +6,13 @@ import Input from '../../../components/Input';
 import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
 import { MetamodelService } from '../../../Utilities/Services/MetamodelService';
 import { AdaptablePopover } from '../../AdaptablePopover';
-const LABEL_WIDTH = 250;
+import { Box, Flex } from '../../../components/Flex';
 const SUPPORTED_PRIMITEVE_TYPES = ['s', 'n', 'b'];
 const OptionInput = (props) => {
     const { name, defaultValue, value, description, uiLabel } = props.option;
     const label = uiLabel ?? StringExtensions.Humanize(name);
     let input = React.createElement(React.Fragment, null);
-    const info = (React.createElement(Box, { ml: 2 },
+    const info = (React.createElement(Box, { className: "twa:ml-2" },
         React.createElement(AdaptablePopover, { headerText: null, bodyText: [description] })));
     const handleInputChange = (event) => props.onChange({ ...props.option, value: event.currentTarget.value });
     const handleCheckboxChange = (checked) => props.onChange({ ...props.option, value: checked });
@@ -62,7 +61,7 @@ const OptionInput = (props) => {
         }
     }
     let content = (React.createElement(React.Fragment, null,
-        React.createElement(Flex, { minWidth: LABEL_WIDTH, alignItems: "center" },
+        React.createElement(Flex, { alignItems: "center", className: "twa:min-w-[250px]" },
             label,
             " ",
             info),
@@ -73,14 +72,14 @@ const OptionInput = (props) => {
             " ",
             info));
     }
-    return (React.createElement(Flex, { mb: 2, pl: 1 }, content));
+    return React.createElement(Flex, { className: "twa:mb-2 twa:pl-1" }, content);
 };
 const OptionsSection = (props) => {
     if (!props.options.length) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(Box, { mb: 2 },
-        React.createElement(HelpBlock, { mb: 2 }, props.name ?? props.id),
+    return (React.createElement(Box, { className: "twa:mb-2" },
+        React.createElement(HelpBlock, { className: "twa:mb-2" }, props.name ?? props.id),
         props.options.map((option, index) => (React.createElement(OptionInput, { key: index, option: option, onChange: props.onChange })))));
 };
 export const AdaptableOptionsForm = (props) => {
@@ -104,7 +103,7 @@ export const AdaptableOptionsForm = (props) => {
         }
         props.onChangedAdaptableOptions(adaptableOptions);
     };
-    return (React.createElement(Box, { p: 2 }, nocodeOptions.map(([sectionName, { containerLabel, items }]) => {
+    return (React.createElement(Box, { className: "twa:p-2" }, nocodeOptions.map(([sectionName, { containerLabel, items }]) => {
         return (React.createElement(OptionsSection, { onChange: handleOptionChange(sectionName), key: sectionName, id: sectionName, name: containerLabel, options: items }));
     })));
 };

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ColumnsList.js

@@ -7,8 +7,9 @@ import Input from '../../../components/Input';
 import { useRef, useState } from 'react';
 import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
 import { DataSource, InfiniteTableGrid, } from '../../../components/InfiniteTable';
-import { Box, Flex } from 'rebass';
+import { Box, Flex } from '../../../components/Flex';
 import throttle from 'lodash/throttle';
+import { twMerge } from '../../../twMerge';
 const dataTypes = [
     {
         value: 'text',
@@ -165,12 +166,12 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
                 whiteSpace: 'normal',
             }, justifyContent: "center", alignItems: "center" }, props.children));
     };
-    const HeaderCellWrapper = (props) => (React.createElement(CellWrapper, { ...props, fontSize: 3, style: { fontWeight: 600 } }));
+    const HeaderCellWrapper = (props) => (React.createElement(CellWrapper, { ...props, className: twMerge('twa:text-3 twa:font-bold', props.className) }));
     const HeaderWithCheckbox = (props) => {
         const { label, onChange, checked, ...flexProps } = props;
         return (React.createElement(HeaderCellWrapper, { ...flexProps, flexDirection: "column" },
             React.createElement(Box, null, label),
-            React.createElement(Box, { style: { textAlign: 'center' } },
+            React.createElement(Box, { className: "twa:text-center twa:ml-1" },
                 React.createElement(CheckBox, { checked: checked, onChange: onChange }))));
     };
     const columnsMap = {
@@ -223,7 +224,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
             render: (params) => {
                 const column = params.data;
                 const humanized = StringExtensions.Humanize(column.field);
-                return (React.createElement(Box, { p: 2 },
+                return (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(ThrottledInput, { key: column.field, style: inputStyle, value: column.caption != undefined ? column.caption : humanized, placeholder: humanized, onChange: (value) => {
                             setColumnCaption(value, column.field);
                         } })));
@@ -235,7 +236,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
             renderMenuIcon: false,
             render: (params) => {
                 const column = params.data;
-                return (React.createElement(CellWrapper, { paddingLeft: 1, paddingRight: 1 },
+                return (React.createElement(CellWrapper, { className: "twa:px-1" },
                     React.createElement(Dropdown, { style: inputStyle, showClearButton: false, options: dataTypes, value: column?.type ?? '', onChange: onColumnTypeChange.bind(null, column) })));
             },
         },
@@ -329,7 +330,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
             },
         },
     };
-    return (React.createElement(Box, { p: 2, style: { height: '100%' }, className: theme },
+    return (React.createElement(Box, { className: twMerge('twa:p-2 twa:h-full', theme) },
         React.createElement(DataSource, { data: data, primaryKey: "colId" },
             React.createElement(InfiniteTableGrid, { columnTypes: {
                     default: {

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/Components/FormBox.d.ts

@@ -1,3 +1,5 @@
 import * as React from 'react';
-import { BoxProps } from 'rebass';
-export declare const NocodeWizardFormBox: React.FunctionComponent<React.PropsWithChildren<BoxProps>>;
+import { BoxProps } from '../../../../components/Flex';
+export declare const NocodeWizardFormBox: React.FunctionComponent<React.PropsWithChildren<BoxProps & {
+    className?: string;
+}>>;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/Components/FormBox.js

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { Box } from 'rebass';
-import join from '../../../../components/utils/join';
-export const NocodeWizardFormBox = (props) => (React.createElement(Box, { ...props, padding: 2, mb: 2, className: join('ab-NocodeWizardFormBox', props.className) }));
+import { Box } from '../../../../components/Flex';
+import { twMerge } from '../../../../twMerge';
+export const NocodeWizardFormBox = (props) => (React.createElement(Box, { ...props, className: twMerge('ab-NocodeWizardFormBox twa:p-2 twa:mb-2', props.className) }));

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/EntitlementsForm.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import HelpBlock from '../../../components/HelpBlock';
 import { ALL_MODULES } from '../../../AdaptableState/Common/Types';
-import { Box, Flex } from 'rebass';
 import Radio from '../../../components/Radio';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { ADAPTABLE_MODULE_MAP } from '../../../Utilities/Constants/ModuleConstants';
 import { DataSource, InfiniteTableGrid, } from '../../../components/InfiniteTable';
+import { Box, Flex } from '../../../components/Flex';
 const ALL_ENTITLEMENTS_MODULES = ALL_MODULES;
 const tableDOMProps = {
     style: {
@@ -28,7 +28,7 @@ const EntitlementsListForm = (props) => {
     let abOptions = props.adaptableOptions;
     const entitlements = abOptions?.entitlementOptions?.moduleEntitlements ?? [];
     if (typeof entitlements === 'function') {
-        return (React.createElement(HelpBlock, { mt: 2 }, "Entitlements cannot be customized, they are handled by a custom function."));
+        return (React.createElement(HelpBlock, { className: "twa:mt-2" }, "Entitlements cannot be customized, they are handled by a custom function."));
     }
     const entitlementsMap = React.useMemo(() => {
         return entitlements.reduce((acc, entitlement) => {
@@ -63,7 +63,7 @@ const EntitlementsListForm = (props) => {
         });
     }, [abOptions?.entitlementOptions]);
     if (typeof entitlements === 'function') {
-        return (React.createElement(HelpBlock, { mb: 2 }, "Entitlements cannot be customized, they are handled by a custom function."));
+        return (React.createElement(HelpBlock, { className: "twa:mb-2" }, "Entitlements cannot be customized, they are handled by a custom function."));
     }
     const columnsMap = {
         name: {
@@ -104,7 +104,7 @@ const EntitlementsListForm = (props) => {
         props.adaptableOptions.initialState.Theme?.CurrentTheme) {
         theme = props.adaptableOptions.initialState.Theme.CurrentTheme;
     }
-    return (React.createElement(Box, { flex: 1, height: "100%", className: theme },
+    return (React.createElement(Box, { className: `${theme} twa:flex-1 twa:h-full` },
         React.createElement(DataSource, { data: data, primaryKey: "name" },
             React.createElement(InfiniteTableGrid, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }))));
 };
@@ -113,7 +113,7 @@ const DefaultEntitlementForm = (props) => {
     const entitlementOptions = props.adaptableOptions?.entitlementOptions;
     const defaultEntitlement = entitlementOptions?.defaultAccessLevel;
     if (typeof defaultEntitlement === 'function') {
-        return React.createElement(HelpBlock, { mb: 2 }, "Default Entitlement is controlled by a custom function");
+        return (React.createElement(HelpBlock, { className: "twa:mb-2" }, "Default Entitlement is controlled by a custom function"));
     }
     const handleDefaultEntitlementChange = React.useCallback((accessLevel) => {
         props.onChangedAptableOptions({
@@ -124,15 +124,15 @@ const DefaultEntitlementForm = (props) => {
             },
         });
     }, [abOptions?.entitlementOptions?.defaultAccessLevel]);
-    return (React.createElement(FormLayout, { mb: 2 },
+    return (React.createElement(FormLayout, { className: "twa:mb-2" },
         React.createElement(FormRow, { label: "Default Entitlement:" },
-            React.createElement(Radio, { onClick: () => handleDefaultEntitlementChange('Full'), checked: defaultEntitlement === 'Full', mr: 3 }, "Visible"),
-            React.createElement(Radio, { onClick: () => handleDefaultEntitlementChange('ReadOnly'), checked: defaultEntitlement === 'ReadOnly', mr: 3 }, "Read Only"),
+            React.createElement(Radio, { onClick: () => handleDefaultEntitlementChange('Full'), checked: defaultEntitlement === 'Full', className: "twa:mr-3" }, "Visible"),
+            React.createElement(Radio, { onClick: () => handleDefaultEntitlementChange('ReadOnly'), checked: defaultEntitlement === 'ReadOnly', className: "twa:mr-3" }, "Read Only"),
             React.createElement(Radio, { onClick: () => handleDefaultEntitlementChange('Hidden'), checked: defaultEntitlement === 'Hidden' }, "Hidden"))));
 };
 const EntitlementsForm = (props) => {
     let abOptions = props.adaptableOptions;
-    return (React.createElement(Flex, { height: "100%", flexDirection: "column", p: 2 },
+    return (React.createElement(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
         React.createElement(DefaultEntitlementForm, { ...props }),
         React.createElement(EntitlementsListForm, { ...props })));
 };

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/GridOptionsForm.js

@@ -2,12 +2,12 @@ import * as React from 'react';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { CheckBox } from '../../../components/CheckBox';
 import HelpBlock from '../../../components/HelpBlock';
-import { Box } from 'rebass';
+import { Box } from '../../../components/Flex';
 const GridOptionsForm = (props) => {
     let { gridOptions } = props;
-    return (React.createElement(Box, { p: 2 },
+    return (React.createElement(Box, { className: "twa:p-2" },
         React.createElement(HelpBlock, null, "Grid Options"),
-        React.createElement(FormLayout, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
+        React.createElement(FormLayout, { className: "twa:m-2", columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
             React.createElement(FormRow, { label: "Enable Cell Selection" },
                 React.createElement(CheckBox, { checked: !!gridOptions.cellSelection, onChange: (enableCellSelection) => {
                         gridOptions = { ...gridOptions, cellSelection: enableCellSelection };