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

package/src/View/Components/EntityRulesEditor/EntityRulePredicatesEditor/EntityRulePredicatesEditor.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EntityRulePredicatesEditor = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const ButtonInfo_1 = require("../../Buttons/ButtonInfo");
@@ -13,6 +12,7 @@ const Tag_1 = require("../../../../components/Tag");
 const EntityRulePredicateEditor_1 = require("./EntityRulePredicateEditor");
 const Radio_1 = tslib_1.__importDefault(require("../../../../components/Radio"));
 const getScopeViewItems_1 = require("../../../../Utilities/getScopeViewItems");
+const Flex_1 = require("../../../../components/Flex");
 const EntityRulePredicatesEditor = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
@@ -61,15 +61,14 @@ const EntityRulePredicatesEditor = (props) => {
     const scopeString = (0, getScopeViewItems_1.getScopeViewItems)(props.data.Scope, api).values.join(', ');
     const enablePredicateColumnId = props.enablePredicateColumnId ?? true;
     return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Flex, { mb: 2, justifyContent: "space-between" },
-            React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, props.descriptions.selectPredicate),
+        React.createElement(Flex_1.Flex, { justifyContent: "space-between", className: "twa:mb-2" },
+            React.createElement(Flex_1.Box, { className: "twa:text-2 twa:mb-2" }, props.descriptions.selectPredicate),
             React.createElement(SimpleButton_1.default, { disabled: !props.data.Rule?.Predicates?.length, onClick: handleAddNewPredicate, icon: "plus", variant: "raised" }, "Add Predicate")),
-        enablePredicateColumnId && (React.createElement(rebass_1.Flex, { className: "ab-EntityRulePredicateEditor-ScopeTypeSelector", p: 2, mb: 2, flexDirection: "column" },
-            React.createElement(rebass_1.Text, { mb: 2 }, "Create Predicate Rule(s) using"),
-            React.createElement(Radio_1.default, { "data-name": "entity-scope", onClick: () => handlePredicateScopeTypeChange(false), mr: 3, checked: !columnPredicateEnabled },
-                "Active Column:",
-                ' ',
-                React.createElement(Tag_1.Tag, { ml: 1, mr: 1 }, scopeString || 'Not Defined'),
+        enablePredicateColumnId && (React.createElement(Flex_1.Flex, { className: "ab-EntityRulePredicateEditor-ScopeTypeSelector twa:p-2 twa:mb-2", flexDirection: "column" },
+            React.createElement(Flex_1.Box, { className: "twa:mb-2" }, "Create Predicate Rule(s) using"),
+            React.createElement(Radio_1.default, { "data-name": "entity-scope", onClick: () => handlePredicateScopeTypeChange(false), className: "twa:mr-3", checked: !columnPredicateEnabled },
+                "Active Column: ",
+                React.createElement(Tag_1.Tag, { className: "twa:mx-1" }, scopeString || 'Not Defined'),
                 ' '),
             React.createElement(Radio_1.default, { "data-name": "column-scope", onClick: () => handlePredicateScopeTypeChange(true), checked: columnPredicateEnabled }, "Selected Columns (overriding Active Column)"))),
         (props.data.Rule?.Predicates?.length ? props.data.Rule.Predicates : [null]).map((predicate, index) => {
@@ -79,15 +78,12 @@ const EntityRulePredicatesEditor = (props) => {
                 editorPredicateDefs = [currentPredicatDef, ...defaultPredicateDefs];
             }
             return (React.createElement(React.Fragment, { key: `${index}-${predicate?.PredicateId}` },
-                index > 0 && (React.createElement(rebass_1.Box, null,
-                    React.createElement(Tag_1.Tag, { mb: 3 }, "AND"))),
+                index > 0 && (React.createElement(Flex_1.Box, null,
+                    React.createElement(Tag_1.Tag, { className: "twa:mb-3" }, "AND"))),
                 React.createElement(EntityRulePredicateEditor_1.EntityRulePredicateEditor, { data: props.data, predicate: predicate, onChange: props.onChange, predicateDefs: editorPredicateDefs, getPredicateDefsForColId: props.getPredicateDefsForColId, columnPredicateEnabled: columnPredicateEnabled })));
         }),
-        showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", mt: 3, mb: 2, style: {
-                fontSize: 'var(--ab-font-size-3)',
-                padding: 0,
-            } },
-            React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, onClick: () => window.open(DocumentationLinkConstants_1.PredicateDocsLink, '_blank') }),
+        showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3" },
+            React.createElement(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(DocumentationLinkConstants_1.PredicateDocsLink, '_blank') }),
             "See Predicate documentation for more details and examples"))));
 };
 exports.EntityRulePredicatesEditor = EntityRulePredicatesEditor;

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { FlexProps } from 'rebass';
 import type { AdaptableColumnPredicate, AdaptableModule, AdaptablePredicateDef, ColumnScope } from '../../../types';
 import type { XOR } from '../../../Utilities/Extensions/TypeExtensions';
 import { AdaptableQuery } from '../../../AdaptableState/Common/AdaptableQuery';
+import { FlexProps } from '../../../components/Flex';
 export type RuleType = XOR<{
     Predicates: AdaptableColumnPredicate[];
 }, AdaptableQuery>;
@@ -26,7 +26,10 @@ export type EntityRulesEditorProps<T> = {
         useObservableQuery: React.ReactNode;
         useAggregationQuery: React.ReactNode;
     };
-    flexProps?: FlexProps;
+    flexProps?: FlexProps & {
+        className?: string;
+        style?: React.CSSProperties;
+    };
     showQueryBuilder?: boolean;
 };
 export declare const EntityRulesSummary: <T extends {

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

@@ -4,20 +4,21 @@ exports.EntityRulesEditor = exports.EntityRulesSummary = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const rebass_1 = require("rebass");
 const Tabs_1 = require("../../../components/Tabs");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const ExpressionEditor_1 = require("../../../components/ExpressionEditor");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const EntityRulePredicatesEditor_1 = require("./EntityRulePredicatesEditor");
 const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
+const Flex_1 = require("../../../components/Flex");
+const twMerge_1 = require("../../../twMerge");
 const QueryTab = (props) => {
     const { type, label, disabled = false, ...tabProps } = props;
-    const text = (React.createElement(rebass_1.Flex, { flexDirection: "column" },
+    const text = (React.createElement(Flex_1.Flex, { flexDirection: "column" },
         label,
         " ",
-        React.createElement(rebass_1.Text, { fontSize: 2 }, "query")));
-    return (React.createElement(Tabs_1.Tabs.Tab, { style: { flex: 1 }, ...tabProps }, !disabled && props.showRadio ? (React.createElement(Radio_1.default, { tabIndex: -1, margin: 0, checked: type === props.value, style: { alignItems: 'baseline' } }, text)) : (text)));
+        React.createElement(Flex_1.Box, { className: "twa:text-2" }, "query")));
+    return (React.createElement(Tabs_1.Tabs.Tab, { style: { flex: 1 }, ...tabProps }, !disabled && props.showRadio ? (React.createElement(Radio_1.default, { tabIndex: -1, className: "twa:m-0 twa:align-baseline", checked: type === props.value }, text)) : (text)));
 };
 // needed here to be considered a child Tab component, inside the Tabs component
 Tabs_1.SupportedTabMenuComps.add(QueryTab);
@@ -28,11 +29,11 @@ const EntityRulesSummary = (props) => {
         !data?.Rule?.BooleanExpression &&
         !data?.Rule?.ObservableExpression &&
         !data?.Rule?.AggregatedBooleanExpression) {
-        return React.createElement(rebass_1.Text, { fontSize: 2 }, "No Rule defined");
+        return React.createElement(Flex_1.Box, { className: "twa:text-2" }, "No Rule defined");
     }
     return (React.createElement(
-        rebass_1.Text,
-        { fontSize: 2 },
+        Flex_1.Box,
+        { className: "twa:text-2" },
         data.Rule.Predicates ? (React.createElement(React.Fragment, null, data.Rule?.Predicates?.map?.((predicate, index) => (
         // predicate id is not unique
         (React.createElement(
@@ -44,7 +45,7 @@ const EntityRulesSummary = (props) => {
 };
 exports.EntityRulesSummary = EntityRulesSummary;
 const RuleTabTitle = (props) => {
-    return props.showRadio ? (React.createElement(Radio_1.default, { tabIndex: -1, margin: 0, checked: props.checked }, props.children)) : (React.createElement(React.Fragment, null, "props.children"));
+    return props.showRadio ? (React.createElement(Radio_1.default, { className: "twa:m-0", tabIndex: -1, checked: props.checked }, props.children)) : (React.createElement(React.Fragment, null, "props.children"));
 };
 const EntityRulesEditor = (props) => {
     const { data, children, descriptions, predicateDefs, showNoRule = false, showPredicate = true, showObservable = true, showBoolean = true, showAggregation = true, flexProps, module, } = props;
@@ -138,13 +139,13 @@ const EntityRulesEditor = (props) => {
     };
     const initialData = (0, react_1.useMemo)(() => api.internalApi.getQueryPreviewData(), []);
     const baseClassName = 'ab-EntityRulesEditor';
-    return (React.createElement(rebass_1.Flex, { className: baseClassName, flexDirection: "column", padding: 2, pt: 0, pl: 0, ...flexProps, style: { height: '100%', ...flexProps?.style } },
+    return (React.createElement(Flex_1.Flex, { ...flexProps, className: (0, twMerge_1.twMerge)(baseClassName, 'twa:p-2 twa:pt-0 twa:pl-0 twa:h-full', flexProps?.className), flexDirection: "column", style: flexProps?.style },
         children,
-        React.createElement(Tabs_1.Tabs, { onValueChange: setType, value: selectedTab, pt: 2, pl: 2, style: { flex: 1, overflow: 'auto' } },
+        React.createElement(Tabs_1.Tabs, { onValueChange: setType, value: selectedTab, className: "twa:pt-2 twa:pl-2 twa:flex-1 twa:overflow-auto" },
             showNoRule ? (React.createElement(Tabs_1.Tabs.Tab, { value: 'NoRule', style: { flex: 1 } },
                 React.createElement(RuleTabTitle, { showRadio: showRadioButtons, checked: type === 'NoRule' }, "No Condition"))) : null,
             showNoRule ? (React.createElement(Tabs_1.Tabs.Content, { value: 'NoRule' },
-                React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, 'Format Column is always applied'))) : null,
+                React.createElement(Flex_1.Box, { className: "twa:text-2 twa:mb-2" }, 'Format Column is always applied'))) : null,
             showPredicate ? (React.createElement(Tabs_1.Tabs.Tab, { value: 'Predicate', style: { flex: 1 } },
                 React.createElement(RuleTabTitle, { showRadio: showRadioButtons, checked: type === 'Predicate' }, "Predicate"))) : null,
             showPredicate ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "Predicate", value: "Predicate" },

package/src/View/Components/ExpressionWizard.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpressionWizard = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const CheckBox_1 = require("../../components/CheckBox");
 const ExpressionEditor_1 = require("../../components/ExpressionEditor");
 const Input_1 = tslib_1.__importDefault(require("../../components/Input"));
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
 const react_1 = require("react");
+const Flex_1 = require("../../components/Flex");
 class ExpressionWizard extends React.Component {
     constructor(props) {
         super(props);
@@ -33,11 +33,11 @@ class ExpressionWizard extends React.Component {
         return (React.createElement(React.Fragment, null,
             React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: ModuleConstants_1.NamedQueryModuleId, value: this.state.expression, onChange: this.handleCustomExpressionChange, initialData: initialData, columns: this.props.api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: this.props.api.expressionApi.internalApi.getAvailableFields(), namedQueries: this.props.api.namedQueryApi.getNamedQueries(), api: this.props.api }),
             ' ',
-            React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 1, marginBottom: 2, marginLeft: 1, alignItems: "center", "data-name": "expression-wizard-save-option" },
-                React.createElement(CheckBox_1.CheckBox, { marginLeft: 2, disabled: !this.isValidExpression(), marginBottom: 2, checked: this.state.saveToNamedQueries, onChange: (checked) => this.setState({
+            React.createElement(Flex_1.Flex, { flexDirection: "row", className: "twa:p-1 twa:mb-2 twa:ml-1", alignItems: "center", "data-name": "expression-wizard-save-option" },
+                React.createElement(CheckBox_1.CheckBox, { className: "twa:ml-2 twa:mb-2", disabled: !this.isValidExpression(), checked: this.state.saveToNamedQueries, onChange: (checked) => this.setState({
                         saveToNamedQueries: checked,
                     }, () => this.props.updateGoBackState()) }, "Save as new Named Query"),
-                this.state.saveToNamedQueries && (React.createElement(Input_1.default, { marginLeft: 2, style: { minWidth: '20rem' }, value: this.state.newNamedQuery, onChange: (e) => this.setState({
+                this.state.saveToNamedQueries && (React.createElement(Input_1.default, { className: "twa:ml-2 twa:min-w-[20rem]", value: this.state.newNamedQuery, onChange: (e) => this.setState({
                         newNamedQuery: e.target.value,
                     }, () => this.props.updateGoBackState()) })))));
     }

package/src/View/Components/FilterForm/Waiting.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { FlexProps } from 'rebass';
 export type WaitingProps = React.ClassAttributes<Waiting> & {
     WaitingMessage: string;
-} & FlexProps;
+} & FlexProps & {
+    className?: string;
+};
+import { FlexProps } from '../../../components/Flex';
 export declare class Waiting extends React.Component<WaitingProps, {}> {
     render(): any;
 }

package/src/View/Components/FilterForm/Waiting.js

@@ -3,15 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Waiting = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const refresh_1 = tslib_1.__importDefault(require("../../../components/icons/refresh"));
+const Flex_1 = require("../../../components/Flex");
+const twMerge_1 = require("../../../twMerge");
 class Waiting extends React.Component {
     render() {
         const { WaitingMessage, ...props } = this.props;
-        return (React.createElement(rebass_1.Flex, { flexDirection: "column", marginTop: 2, marginBottom: 2, ...props },
-            React.createElement(rebass_1.Flex, { flexDirection: "row", justifyContent: "center" },
+        return (React.createElement(Flex_1.Flex, { flexDirection: "column", ...props, className: (0, twMerge_1.twMerge)(`twa:my-2`, props.className) },
+            React.createElement(Flex_1.Flex, { flexDirection: "row", justifyContent: "center" },
                 React.createElement(refresh_1.default, null)),
-            React.createElement(rebass_1.Flex, { flexDirection: "row", justifyContent: "center" },
+            React.createElement(Flex_1.Flex, { flexDirection: "row", justifyContent: "center" },
                 React.createElement("h5", null, WaitingMessage))));
     }
 }

package/src/View/Components/Forms/AdaptableFormControlTextClear.d.ts

@@ -6,6 +6,7 @@ export type AdaptableFormControlTextClearProps = {
     focusOnClear?: boolean;
     autoFocus?: boolean;
     inputStyle?: CSSProperties;
+    inputClassName?: string;
     actionTools?: React.ReactNode;
 } & InputProps;
 export declare const AdaptableFormControlTextClear: React.ForwardRefExoticComponent<Omit<AdaptableFormControlTextClearProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/src/View/Components/Forms/AdaptableFormControlTextClear.js

@@ -7,17 +7,13 @@ const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensio
 const FieldWrap_1 = tslib_1.__importDefault(require("../../../components/FieldWrap"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
+const twMerge_1 = require("../../../twMerge");
 exports.AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
     let closeButtonTooltip = props.value ? 'Clear' : null;
     const inputRef = React.useRef(null);
     const { focusOnClear = true } = props;
-    return (React.createElement(FieldWrap_1.default, { onClick: props.onClick, className: props.className, style: {
-            background: 'var(--ab-color-defaultbackground)',
-            overflow: 'visible',
-            width: '100%',
-            ...props.style,
-        } },
-        React.createElement(Input_1.default, { "aria-label": props['aria-label'], autoFocus: props.autoFocus, style: props.inputStyle, ref: (r) => {
+    return (React.createElement(FieldWrap_1.default, { onClick: props.onClick, className: (0, twMerge_1.twMerge)('twa:bg-defaultbackground twa:overflow-visible twa:w-full', props.className), style: props.style },
+        React.createElement(Input_1.default, { "aria-label": props['aria-label'], autoFocus: props.autoFocus, style: props.inputStyle, className: props.inputClassName, ref: (r) => {
                 inputRef.current = r;
                 if (!ref) {
                     return;
@@ -30,7 +26,7 @@ exports.AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
                 }
             }, type: "text", placeholder: props.placeholder, value: props.value, onChange: (x) => props.OnTextChange(x.target.value) }),
         props.actionTools,
-        React.createElement(SimpleButton_1.default, { variant: "text", icon: "close", tooltip: closeButtonTooltip, px: 0, py: 0, marginRight: 1, onClick: () => {
+        React.createElement(SimpleButton_1.default, { variant: "text", icon: "close", tooltip: closeButtonTooltip, className: "twa:mr-1 twa:p-0", onClick: () => {
                 props.OnTextChange('');
                 const input = inputRef.current;
                 if (!focusOnClear) {

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

@@ -8,7 +8,7 @@ const AdaptableContext_1 = require("../../AdaptableContext");
 const react_1 = require("react");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
 const ModuleValueSelector = (props) => {
-    const { options, value, onChange, selectionBoxPosition = 'top', ...valueSelectorProps } = props;
+    const { options, value, onChange, ...valueSelectorProps } = props;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const selectedModulesMap = (0, react_1.useMemo)(() => {
         if (!value || !value.length) {
@@ -30,6 +30,6 @@ const ModuleValueSelector = (props) => {
     const sortedOptions = (0, react_1.useMemo)(() => {
         return ArrayExtensions_1.default.sortArrayWithOrder(options, value, { sortUnorderedItems: true });
     }, [allowReorder, options, value]);
-    return (React.createElement(ValueSelector_1.ValueSelector, { ...valueSelectorProps, options: sortedOptions, value: value, onChange: onChange, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), selectionBoxPosition: selectionBoxPosition, isOptionDisabled: props.isOptionDisabled, disabled: props.disabled }));
+    return (React.createElement(ValueSelector_1.ValueSelector, { ...valueSelectorProps, options: sortedOptions, value: value, onChange: onChange, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), isOptionDisabled: props.isOptionDisabled, disabled: props.disabled }));
 };
 exports.ModuleValueSelector = ModuleValueSelector;

package/src/View/Components/NewScopeComponent.js

@@ -4,7 +4,6 @@ exports.NewScopeComponent = exports.renderScopeSummary = exports.isScopeValid =
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const rebass_1 = require("rebass");
 const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
 const CheckBox_1 = require("../../components/CheckBox");
 const Tabs_1 = require("../../components/Tabs");
@@ -12,9 +11,10 @@ const OnePageAdaptableWizard_1 = require("../Wizard/OnePageAdaptableWizard");
 const ColumnSelector_1 = require("./ColumnSelector");
 const AdaptableFormControlTextClear_1 = require("./Forms/AdaptableFormControlTextClear");
 const AdaptableContext_1 = require("../AdaptableContext");
-const ValueSelector_1 = require("./ValueSelector");
 const AdaptableColumn_1 = require("../../AdaptableState/Common/AdaptableColumn");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
+const Flex_1 = require("../../components/Flex");
+const Tag_1 = require("../../components/Tag/Tag");
 const isScopeValid = ({ Scope }) => {
     const result = [];
     if (!Scope) {
@@ -55,14 +55,14 @@ const renderScopeSummary = (scope, labels) => {
     const scopeApi = adaptable.api.columnScopeApi;
     const columnsInScope = scopeApi.getColumnsInScope(scope);
     return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Box, null,
-            React.createElement(OnePageAdaptableWizard_1.SummaryText, { mb: 0 }, scopeApi.scopeIsAll(scope) ? labels.scopeWholeRow : null)),
-        React.createElement(rebass_1.Box, { style: { overflow: 'hidden' } }, 'ColumnIds' in scope ? (React.createElement(React.Fragment, null,
-            React.createElement(OnePageAdaptableWizard_1.SummaryText, { mb: columnsInScope.length ? 2 : 0 }, labels.scopeColumns),
-            columnsInScope.length ? (React.createElement(ValueSelector_1.ValueOptionsTags, { options: columnsInScope, value: columnsInScope.map((c) => c.columnId), toLabel: (c) => c.friendlyName, allowWrap: true, readOnly: true, renderLabel: (c) => React.createElement(OnePageAdaptableWizard_1.SummaryText, { mb: 0 }, c), toIdentifier: (c) => c.columnId })) : null)) : null),
-        React.createElement(rebass_1.Box, null, 'DataTypes' in scope ? (React.createElement(React.Fragment, null,
-            React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, labels.scopeDataTypes),
-            React.createElement(ValueSelector_1.ValueOptionsTags, { readOnly: true, options: scope.DataTypes, value: scope.DataTypes, toLabel: (c) => c, allowWrap: true, renderLabel: (c) => React.createElement(rebass_1.Text, { fontSize: 2 }, renderDataTypeLabel(c)), toIdentifier: (c) => c }))) : null)));
+        React.createElement(Flex_1.Box, null,
+            React.createElement(OnePageAdaptableWizard_1.SummaryText, { className: "twa:mb-0" }, scopeApi.scopeIsAll(scope) ? labels.scopeWholeRow : null)),
+        React.createElement(Flex_1.Box, { className: "twa:overflow-hidden" }, 'ColumnIds' in scope ? (React.createElement(React.Fragment, null,
+            React.createElement(OnePageAdaptableWizard_1.SummaryText, { className: columnsInScope.length ? 'twa:mb-2' : '' }, labels.scopeColumns),
+            columnsInScope.length ? (React.createElement(Tag_1.TagList, { tags: columnsInScope.map((c) => c.friendlyName) })) : null)) : null),
+        React.createElement(Flex_1.Box, null, 'DataTypes' in scope ? (React.createElement(React.Fragment, null,
+            React.createElement(Flex_1.Box, { className: "twa:text-2 twa:mb-2" }, labels.scopeDataTypes),
+            React.createElement(Tag_1.TagList, { tags: scope.DataTypes.map((dataType) => renderDataTypeLabel(dataType)) }))) : null)));
 };
 exports.renderScopeSummary = renderScopeSummary;
 const DATA_TYPES_OPTIONS = Object.values(DATA_TYPES_MAP);
@@ -152,29 +152,29 @@ const NewScopeComponent = (props) => {
     }, []);
     return (React.createElement(Tabs_1.Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: scopeChoice, style: { height: '100%', ...props.style }, onValueChange: onScopeSelectChanged },
         props.hideWholeRow ? null : (React.createElement(Tabs_1.Tabs.Tab, { value: "Row" },
-            React.createElement(Radio_1.default, { margin: 0, checked: scopeChoice == 'All', tabIndex: -1 }, "All Columns"))),
+            React.createElement(Radio_1.default, { className: "twa:m-0", checked: scopeChoice == 'All', tabIndex: -1 }, "All Columns"))),
         !props.disableColumns && (React.createElement(Tabs_1.Tabs.Tab, { value: "Column" },
-            React.createElement(Radio_1.default, { margin: 0, value: "Column", checked: scopeChoice == 'Column', tabIndex: -1 }, "Selected Columns"))),
+            React.createElement(Radio_1.default, { className: "twa:m-0", value: "Column", checked: scopeChoice == 'Column', tabIndex: -1 }, "Selected Columns"))),
         !props.disableDataTypes && (React.createElement(Tabs_1.Tabs.Tab, { value: "DataType" },
-            React.createElement(Radio_1.default, { margin: 0, value: "DataType", checked: scopeChoice == 'DataType', tabIndex: -1 }, "Data Types"))),
+            React.createElement(Radio_1.default, { className: "twa:m-0", value: "DataType", checked: scopeChoice == 'DataType', tabIndex: -1 }, "Data Types"))),
         hasColumnTypes && (React.createElement(Tabs_1.Tabs.Tab, { value: "ColumnType" },
-            React.createElement(Radio_1.default, { margin: 0, value: "ColumnType", checked: scopeChoice == 'ColumnType', tabIndex: -1 }, "Column Types"))),
+            React.createElement(Radio_1.default, { className: "twa:m-0", value: "ColumnType", checked: scopeChoice == 'ColumnType', tabIndex: -1 }, "Column Types"))),
         props.hideWholeRow ? null : (React.createElement(Tabs_1.Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope" },
-            React.createElement(rebass_1.Text, { padding: 2, pl: 0, fontSize: 2 }, props.descriptions.rowScope))),
-        !props.disableColumns && (React.createElement(Tabs_1.Tabs.Content, { value: "Column", style: { flex: 1, overflow: 'auto' }, "data-name": "column-scope", padding: 0 },
-            React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", padding: 2 },
-                React.createElement(rebass_1.Text, { fontSize: 2 }, props.descriptions.columnScope),
-                React.createElement(rebass_1.Flex, { flex: 3 }),
+            React.createElement(Flex_1.Box, { className: "twa:p-2 twa:pl-0 twa:text-2" }, props.descriptions.rowScope))),
+        !props.disableColumns && (React.createElement(Tabs_1.Tabs.Content, { value: "Column", "data-name": "column-scope", className: "twa:p-0 twa:flex-1 twa:overflow-auto" },
+            React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2" },
+                React.createElement(Flex_1.Box, { className: "twa:text-2" }, props.descriptions.columnScope),
+                React.createElement(Flex_1.Box, { className: "twa:flex-3" }),
                 React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })),
-            React.createElement(rebass_1.Flex, { paddingLeft: 2, flex: 1, style: { overflow: 'hidden' } },
+            React.createElement(Flex_1.Flex, { className: "twa:overflow-hidden twa:pl-2 twa:flex-1" },
                 React.createElement(ColumnSelector_1.NewColumnSelector, { columnFilterText: columnsSearchText, allowReorder: false, availableColumns: scopeColumns, selected: scopeApi.getColumnIdsInScope(props.scope), onChange: onColumnsSelectedChanged })))),
         !props.disableDataTypes && (React.createElement(Tabs_1.Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope" },
-            React.createElement(rebass_1.Box, null,
-                props.descriptions.dataTypeScope && (React.createElement(rebass_1.Text, { p: 2, pl: 0, mb: 2, fontSize: 2 }, props.descriptions.dataTypeScope)),
-                React.createElement(rebass_1.Flex, { flexDirection: "column" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, key: dataTypeOption.value, checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label))))))),
-        hasColumnTypes && (React.createElement(Tabs_1.Tabs.Content, { value: "ColumnType", style: { flex: 'none' }, "data-name": "column-type-scope" },
-            React.createElement(rebass_1.Box, null,
-                React.createElement(rebass_1.Flex, { flexDirection: "column" }, api.columnApi.getColumnTypes()?.map?.((columnType) => (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": columnType, key: columnType, checked: 'ColumnTypes' in props.scope && props.scope.ColumnTypes?.includes(columnType), onChange: (checked) => {
+            React.createElement(Flex_1.Box, null,
+                props.descriptions.dataTypeScope && (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:pl-0 twa:mb-2 twa:text-2" }, props.descriptions.dataTypeScope)),
+                React.createElement(Flex_1.Flex, { flexDirection: "column" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, key: dataTypeOption.value, checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label))))))),
+        hasColumnTypes && (React.createElement(Tabs_1.Tabs.Content, { value: "ColumnType", className: "twa:flex-none", "data-name": "column-type-scope" },
+            React.createElement(Flex_1.Box, null,
+                React.createElement(Flex_1.Flex, { flexDirection: "column" }, api.columnApi.getColumnTypes()?.map?.((columnType) => (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": columnType, key: columnType, checked: 'ColumnTypes' in props.scope && props.scope.ColumnTypes?.includes(columnType), onChange: (checked) => {
                         let columnTypes = [].concat(props.scope.ColumnTypes);
                         if (checked) {
                             columnTypes.push(columnType);

package/src/View/Components/Panels/PanelFooter.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PanelFooter = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const Flex_1 = require("../../../components/Flex");
 const PanelFooter = (props) => {
-    return (React.createElement(rebass_1.Flex, { className: "ab-Panel__Footer", flexDirection: "row", padding: 1, backgroundColor: "primary", alignItems: "center" },
-        React.createElement(SimpleButton_1.default, { margin: 1, variant: "text", "data-name": "action-cancel", onClick: props.onCancel, disabled: props.cancelDisabled }, props.cancelText ?? 'CANCEL'),
-        React.createElement(rebass_1.Box, { flex: 1 }),
-        React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", "data-name": "action-finish", margin: 1, onClick: props.onAccept, disabled: props.acceptDisabled }, props.cancelText ?? 'Finish')));
+    return (React.createElement(Flex_1.Flex, { className: "ab-Panel__Footer twa:p-1 twa:bg-primary", flexDirection: "row", alignItems: "center" },
+        React.createElement(SimpleButton_1.default, { className: "twa:m-1", variant: "text", "data-name": "action-cancel", onClick: props.onCancel, disabled: props.cancelDisabled }, props.cancelText ?? 'CANCEL'),
+        React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
+        React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", "data-name": "action-finish", className: "twa:m-1", onClick: props.onAccept, disabled: props.acceptDisabled }, props.cancelText ?? 'Finish')));
 };
 exports.PanelFooter = PanelFooter;

package/src/View/Components/Panels/PanelToolPanel/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PanelProps } from '../../../../components/Panel';
-export interface PanelToolPanelProps extends PanelProps {
+export interface PanelToolPanelProps extends Omit<PanelProps, 'flex'> {
     headerText: string;
     onConfigure: () => void;
     onClose: () => void;

package/src/View/Components/Panels/PanelToolPanel/index.js

@@ -7,24 +7,23 @@ const Panel_1 = tslib_1.__importDefault(require("../../../../components/Panel"))
 const ButtonClose_1 = require("../../Buttons/ButtonClose");
 const ButtonConfigure_1 = require("../../Buttons/ButtonConfigure");
 const ButtonMinimise_1 = require("../../Buttons/ButtonMinimise");
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
 const ButtonMaximise_1 = require("../../Buttons/ButtonMaximise");
+const twMerge_1 = require("../../../../twMerge");
+const Flex_1 = require("../../../../components/Flex");
 class PanelToolPanel extends React.Component {
     render() {
         const { useDefaultPanelStyle, isMinimised, onMinimiseChanged, headerText, onClose, onConfigure, ...props } = this.props;
         let header = (React.createElement(React.Fragment, null,
-            !isMinimised ? (React.createElement(ButtonMinimise_1.ButtonMinimise, { className: "ab-ToolPanelPanel__header-minimise", onClick: () => onMinimiseChanged(), marginRight: 1 })) : (React.createElement(ButtonMaximise_1.ButtonMaximise, { className: "ab-ToolPanelPanel__header-maximise", onClick: () => onMinimiseChanged(), marginRight: 1 })),
-            React.createElement(rebass_1.Flex, { className: "ab-ToolPanelPanel__header-text", flex: 1, alignItems: "center", marginLeft: 0 }, headerText),
-            onConfigure && (React.createElement(ButtonConfigure_1.ButtonConfigure, { iconSize: 16, marginLeft: 1, className: "ab-ToolPanelPanel__header-configure-button", tooltip: 'Configure ' + headerText, onClick: () => onConfigure() })),
-            onClose && (React.createElement(ButtonClose_1.ButtonClose, { marginLeft: 0, className: "ab-ToolPanelPanel__header-close-button", tooltip: 'Close ' + headerText, onClick: () => onClose(), disabled: props.disabled }))));
-        return (React.createElement(Panel_1.default, { border: "var(--ab-cmp-toolpanelpanel__border)", ...props, className: (0, join_1.default)('ab-ToolPanelPanel', props.className), header: header, style: {
-                color: 'var(--ab-cmp-toolpanelpanel__color)',
-                fill: 'var(--ab-cmp-toolpanelpanel__fill)',
+            !isMinimised ? (React.createElement(ButtonMinimise_1.ButtonMinimise, { className: "ab-ToolPanelPanel__header-minimise twa:mr-1", onClick: () => onMinimiseChanged() })) : (React.createElement(ButtonMaximise_1.ButtonMaximise, { className: "ab-ToolPanelPanel__header-maximise twa:mr-1", onClick: () => onMinimiseChanged() })),
+            React.createElement(Flex_1.Flex, { className: "ab-ToolPanelPanel__header-text twa:flex-1 twa:ml-0", alignItems: "center" }, headerText),
+            onConfigure && (React.createElement(ButtonConfigure_1.ButtonConfigure, { iconSize: 16, className: "ab-ToolPanelPanel__header-configure-button twa:ml-1", tooltip: 'Configure ' + headerText, onClick: () => onConfigure() })),
+            onClose && (React.createElement(ButtonClose_1.ButtonClose, { className: "ab-ToolPanelPanel__header-close-button twa:ml-0", tooltip: 'Close ' + headerText, onClick: () => onClose(), disabled: props.disabled }))));
+        return (React.createElement(Panel_1.default, { ...props, className: (0, twMerge_1.twMerge)('ab-ToolPanelPanel', props.className), header: header, style: {
                 ...props.style,
             }, headerProps: {
                 ...props.headerProps,
                 alignItems: 'stretch',
+                className: (0, twMerge_1.twMerge)('twa:border-none', props.headerProps?.className),
                 style: {
                     padding: 'var(--ab-cmp-toolpanelpanel_header__padding)',
                     background: 'var(--ab-cmp-toolpanelpanel_header__background)',
@@ -34,12 +33,11 @@ class PanelToolPanel extends React.Component {
                 },
             }, bodyProps: {
                 ...props.bodyProps,
+                className: (0, twMerge_1.twMerge)('twa:border-none twa:flex twa:flex-col', props.bodyProps?.className),
                 style: {
                     padding: 'var(--ab-cmp-dashboardpanel_body__padding)',
                     background: 'var(--ab-cmp-dashboardpanel_body__background)',
                     ...(props.bodyProps ? props.bodyProps.style : null),
-                    display: 'flex',
-                    flexDirection: 'column',
                 },
             } }));
     }

package/src/View/Components/Panels/PanelWithButton.d.ts

@@ -1,20 +1,18 @@
 import * as React from 'react';
 import { PanelProps } from '../../../components/Panel';
-import { BoxProps } from 'rebass';
 import { AdaptableSystemIconName } from '../../../AdaptableState/Common/AdaptableIcon';
-export interface PanelWithButtonProps extends PanelProps {
+export interface PanelWithButtonProps extends Omit<PanelProps, 'flex' | 'borderRadius' | 'border'> {
     buttonContent?: React.ReactNode;
     buttonClick?: () => void;
     button?: React.ReactElement<any>;
     headerText: string;
-    bodyProps?: BoxProps;
-    headerProps?: BoxProps & {
+    bodyProps?: PanelProps['bodyProps'];
+    headerProps?: PanelProps['headerProps'] & {
         'data-name': string;
     };
     glyphicon?: AdaptableSystemIconName;
     buttonDisabled?: boolean;
     buttonStyle?: string;
-    borderRadius?: string;
     infoLink?: string;
     infoLinkDisabled?: boolean;
 }

package/src/View/Components/Panels/PanelWithButton.js

@@ -5,22 +5,23 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
-const rebass_1 = require("rebass");
 const icons_1 = require("../../../components/icons");
 const ButtonInfo_1 = require("../Buttons/ButtonInfo");
+const tailwind_merge_1 = require("tailwind-merge");
+const Flex_1 = require("../../../components/Flex");
 const PanelWithButton = (props) => {
     const { buttonContent } = props;
     const IconCmp = icons_1.allIcons[props.glyphicon];
-    const header = (React.createElement(rebass_1.Flex, { alignItems: "center", width: "100%" },
-        React.createElement(rebass_1.Flex, { alignItems: "center" },
+    const header = (React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:w-full" },
+        React.createElement(Flex_1.Flex, { alignItems: "center" },
             props.glyphicon != null && (IconCmp ? React.createElement(IconCmp, null) : null),
-            React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-before" }),
+            React.createElement(Flex_1.Box, { "data-name": "space-before", className: "twa:mr-2" }),
             props.headerText,
-            React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-after" }),
+            React.createElement(Flex_1.Box, { "data-name": "space-after", className: "twa:mr-2" }),
             props.infoLink != null && !props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { onClick: () => window.open(props.infoLink, '_blank') }))),
-        React.createElement(rebass_1.Box, { style: { flex: 1 } }),
+        React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
         buttonContent ? (React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", disabled: props.buttonDisabled, onClick: () => (props.buttonClick ? props.buttonClick() : null) }, buttonContent)) : null,
         props.button ? React.cloneElement(props.button) : null));
-    return (React.createElement(Panel_1.default, { flex: 1, className: props.className, bodyScroll: props.bodyScroll != null ? props.bodyScroll : true, bodyProps: props.bodyProps, variant: props.variant || 'primary', header: header, headerProps: props.headerProps, style: props.style, borderRadius: (props.borderRadius || 'none'), border: (props.border || 'none') }, props.children));
+    return (React.createElement(Panel_1.default, { className: (0, tailwind_merge_1.twMerge)('twa:flex-1 twa:rounded-none twa:border-none', props.className), bodyScroll: props.bodyScroll != null ? props.bodyScroll : true, bodyProps: props.bodyProps, variant: props.variant || 'primary', header: header, headerProps: props.headerProps, style: props.style }, props.children));
 };
 exports.PanelWithButton = PanelWithButton;

package/src/View/Components/Panels/PanelWithImage.d.ts

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import { PanelProps } from '../../../components/Panel';
-import { BoxProps } from 'rebass';
 import { AdaptableSystemIconName } from '../../../AdaptableState/Common/AdaptableIcon';
-export interface PanelWithImageProps extends PanelProps {
+export interface PanelWithImageProps extends Omit<PanelProps, 'flex' | 'borderRadius'> {
     glyphicon?: AdaptableSystemIconName;
     icon?: AdaptableSystemIconName;
     infoLink?: string;
     infoLinkDisabled?: boolean;
     borderRadius?: string;
-    bodyProps?: BoxProps;
+    bodyProps?: PanelProps['bodyProps'];
     theme: any;
     headerColor?: string;
     button?: React.ReactElement<any>;

package/src/View/Components/Panels/PanelWithImage.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PanelWithImage = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const styled_components_1 = require("styled-components");
 const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
-const rebass_1 = require("rebass");
 const icons_1 = require("../../../components/icons");
 const ButtonInfo_1 = require("../Buttons/ButtonInfo");
+const twMerge_1 = require("../../../twMerge");
+const Flex_1 = require("../../../components/Flex");
 //We cannot destructure this.props using the react way in typescript which is a real pain as you
 //need to transfer props individually as a consequence
 //let { buttonContent, ...other } = this.props
@@ -19,23 +19,21 @@ class PanelWithImageCmp extends React.Component {
             headerStyle.color = this.props.headerColor;
             headerStyle.fill = this.props.headerColor;
         }
-        let headerRow = (React.createElement(rebass_1.Flex, { flex: 1 },
-            React.createElement(rebass_1.Flex, { alignItems: "center" },
-                React.createElement(rebass_1.Flex, { minHeight: 15, alignItems: "center", style: headerStyle },
+        let headerRow = (React.createElement(Flex_1.Flex, { className: "twa:flex-1" },
+            React.createElement(Flex_1.Flex, { alignItems: "center" },
+                React.createElement(Flex_1.Flex, { className: "twa:min-h-[15px]", alignItems: "center", style: headerStyle },
                     IconCmp ? React.createElement(IconCmp, null) : null,
-                    React.createElement(rebass_1.Box, { marginRight: 2 }),
+                    React.createElement(Flex_1.Box, { className: "twa:mr-2" }),
                     this.props.header ?? '',
-                    React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-after" }),
+                    React.createElement(Flex_1.Box, { className: "twa:mr-2", "data-name": "space-after" }),
                     this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
                         ) }))),
-                React.createElement(rebass_1.Box, { flex: 1 }),
+                React.createElement(Flex_1.Flex, { className: "twa:flex-1" }),
                 this.props.button && React.cloneElement(this.props.button))));
-        return (React.createElement(Panel_1.default, { flex: this.props.flex, header: headerRow, variant: this.props.variant, style: this.props.style, bodyScroll: this.props.bodyScroll !== undefined ? this.props.bodyScroll : true, border: "none", borderRadius: this.props.borderRadius || 'none', bodyProps: {
-                padding: 0,
+        return (React.createElement(Panel_1.default, { header: headerRow, variant: this.props.variant, style: this.props.style, bodyScroll: this.props.bodyScroll !== undefined ? this.props.bodyScroll : true, className: (0, twMerge_1.twMerge)('twa:rounded-none twa:border-none', this.props.className), bodyProps: {
                 ...this.props.bodyProps,
+                className: (0, twMerge_1.twMerge)('twa:p-0', this.props.bodyProps?.className),
             } }, this.props.children));
     }
 }
-// apparently it's very hard to type `withTheme()` result in typescript
-// @ts-ignore
-exports.PanelWithImage = (0, styled_components_1.withTheme)(PanelWithImageCmp);
+exports.PanelWithImage = PanelWithImageCmp;

package/src/View/Components/Panels/PanelWithRow.d.ts

@@ -3,7 +3,6 @@ import { IColItem } from '../../UIInterfaces';
 import { PanelProps } from '../../../components/Panel';
 export interface PanelWithRowProps extends PanelProps {
     colItems: IColItem[];
-    headerAlign?: string;
 }
 export declare class PanelWithRow extends React.Component<PanelWithRowProps, {}> {
     render(): React.JSX.Element;