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

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

@@ -17,12 +17,7 @@ export type ValueSelectorProps<OPTION_TYPE, ID_TYPE extends number | string> = {
      * Used to render list items, this extra prop allows to have different rendering for list & bottom tags.
      */
     toListLabel?: (v: OPTION_TYPE) => string | React.ReactElement;
-    noSelectionLabel?: ReactNode;
-    clearSelectionLabel?: ReactNode;
     showSelectedOnlyLabel?: ReactNode;
-    showSelectedOnlyPosition?: 'floating' | 'top';
-    xSelectedLabel?: (count: number) => ReactNode;
-    selectionBoxPosition?: 'top' | 'bottom';
     onShowSelectedOnlyChange?: (selectedOnly: boolean) => void;
     isOptionDisabled?: (option: OPTION_TYPE) => boolean;
     disabled?: boolean;
@@ -30,35 +25,16 @@ export type ValueSelectorProps<OPTION_TYPE, ID_TYPE extends number | string> = {
 };
 export declare function ValueSelector<OPTION_TYPE, ID_TYPE extends number | string>(props: ValueSelectorProps<OPTION_TYPE, ID_TYPE>): React.JSX.Element;
 export declare const renderSelectionSection: (props: {
-    noSelectionLabel?: ValueSelectorProps<any, any>['noSelectionLabel'];
-    clearSelectionLabel?: ValueSelectorProps<any, any>['clearSelectionLabel'];
-    value: ValueSelectorProps<any, any>['value'];
-    options: ValueSelectorProps<any, any>['options'];
-    disabled?: ValueSelectorProps<any, any>['disabled'];
-    isOptionDisabled?: ValueSelectorProps<any, any>['isOptionDisabled'];
-    singleSelect?: ValueSelectorProps<any, any>['singleSelect'];
-    toIdentifier: ValueSelectorProps<any, any>['toIdentifier'];
-    toLabel: ValueSelectorProps<any, any>['toLabel'];
-    onChange: ValueSelectorProps<any, any>['onChange'];
-    xSelectedLabel?: ValueSelectorProps<any, any>['xSelectedLabel'];
-    selectionBoxPosition?: ValueSelectorProps<any, any>['selectionBoxPosition'];
+    value: ValueSelectorProps<any, any>["value"];
+    options: ValueSelectorProps<any, any>["options"];
+    showOnlySelectedCheckbox?: ReactNode;
+    disabled?: ValueSelectorProps<any, any>["disabled"];
+    isOptionDisabled?: ValueSelectorProps<any, any>["isOptionDisabled"];
+    singleSelect?: ValueSelectorProps<any, any>["singleSelect"];
+    toIdentifier: ValueSelectorProps<any, any>["toIdentifier"];
+    toLabel: ValueSelectorProps<any, any>["toLabel"];
+    onChange: ValueSelectorProps<any, any>["onChange"];
     onSelectAll: () => void;
     onClear: () => void;
     onClearOption: (id: any) => void;
 }) => React.JSX.Element;
-type ValueOptionsTagsProps<OPTION_TYPE, ID_TYPE extends number | string> = {
-    style?: React.CSSProperties;
-    options: OPTION_TYPE[];
-    value: ID_TYPE[];
-    selectedMap?: Map<ID_TYPE, OPTION_TYPE>;
-    toLabel: ValueSelectorProps<OPTION_TYPE, ID_TYPE>['toLabel'];
-    isOptionDisabled?: ValueSelectorProps<OPTION_TYPE, ID_TYPE>['isOptionDisabled'];
-    toIdentifier: ValueSelectorProps<OPTION_TYPE, ID_TYPE>['toIdentifier'];
-    renderLabel?: (label: string | React.ReactElement) => ReactNode;
-    onChange?: ValueSelectorProps<OPTION_TYPE, ID_TYPE>['onChange'];
-    readOnly?: boolean;
-    allowWrap?: boolean;
-    onClearOption?: (id: ID_TYPE) => void;
-};
-export declare function ValueOptionsTags<OPTION_TYPE, ID_TYPE extends number | string>(props: ValueOptionsTagsProps<OPTION_TYPE, ID_TYPE>): React.JSX.Element;
-export {};

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

@@ -1,15 +1,13 @@
 import * as React from 'react';
 import { useState, useMemo, useCallback } from 'react';
-import { Box, Flex, Text } from 'rebass';
 import { DragDropContext, Draggable, Droppable } from '../../../components/dnd';
 import { CheckBox } from '../../../components/CheckBox';
 import { Icon } from '../../../components/icons';
-import { EllipsisContainer } from '../../../components/EllipsisContainer';
-import SimpleButton from '../../../components/SimpleButton';
 import Radio from '../../../components/Radio';
-import { Tag } from '../../../components/Tag';
 import { AdaptableFormControlTextClear } from '../Forms/AdaptableFormControlTextClear';
 import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
+import { Box, Flex } from '../../../components/Flex';
+import clsx from 'clsx';
 function useValuesMap({ options, value, toIdentifier, selectedMap, }) {
     const optionsMap = useMemo(() => {
         if (selectedMap) {
@@ -35,7 +33,7 @@ function useValuesMap({ options, value, toIdentifier, selectedMap, }) {
 }
 const baseClassName = 'ab-ValueSelector';
 export function ValueSelector(props) {
-    const { options, value, filter, onChange, allowReorder = true, singleSelect, toLabel, toListLabel, toIdentifier, showSelectedOnlyLabel, showFilterInput, selectionBoxPosition = 'bottom', onShowSelectedOnlyChange, isOptionDisabled, disabled, } = props;
+    const { options, value, filter, onChange, allowReorder = true, singleSelect, toLabel, toListLabel, toIdentifier, showSelectedOnlyLabel, showFilterInput, onShowSelectedOnlyChange, isOptionDisabled, disabled, } = props;
     const [searchInputValue, setSearchInputValue] = React.useState('');
     const preparedToLabel = toListLabel ?? toLabel;
     const [selectedOnly, doSetSelectedOnly] = useState(false);
@@ -60,9 +58,12 @@ export function ValueSelector(props) {
         const label = !allowReorder ? preparedToLabel(option) : null;
         const reorderable = typeof allowReorder === 'function' ? allowReorder(option) : allowReorder;
         const renderNode = (props, dragHandleProps) => {
-            return (React.createElement(Flex, { className: `${baseClassName}__option`, alignItems: "center", mt: index ? 1 : 0, key: identifier ?? index, backgroundColor: 'primary', padding: 2, "data-index": index, "data-id": identifier, "data-name": "option", ...props },
-                React.createElement(Flex, { flex: 1, flexDirection: "row", alignItems: "center" },
-                    reorderable ? (React.createElement(Box, { mr: 3, ...dragHandleProps },
+            return (React.createElement(Flex, { alignItems: "center", key: identifier ?? index, "data-index": index, "data-id": identifier, "data-name": "option", ...props, className: clsx(`twa:bg-primary twa:text-text-on-primary twa:rounded-standard twa:p-2`, {
+                    'twa:mt-1': index,
+                    'twa:mt-0': !index,
+                }, props.className, `${baseClassName}__option`) },
+                React.createElement(Flex, { flexDirection: "row", alignItems: "center", className: "twa:flex-1" },
+                    reorderable ? (React.createElement(Box, { ...dragHandleProps, className: clsx('twa:mr-3', dragHandleProps?.className) },
                         React.createElement(Icon, { name: "drag", style: { cursor: 'grab' } }))) : null,
                     singleSelect ? (React.createElement(Radio, { checked: selectedMap.has(identifier), "data-name": identifier, onChange: (checked) => {
                             if (checked) {
@@ -82,7 +83,7 @@ export function ValueSelector(props) {
                             }
                             notifyChange();
                         }, checked: selectedMap.has(identifier) }, label)),
-                    React.createElement(Text, { flex: 1, ml: 2 }, allowReorder ? preparedToLabel(option) : null))));
+                    React.createElement(Box, { className: "twa:ml-2 twa:flex-1" }, allowReorder ? preparedToLabel(option) : null))));
         };
         return (React.createElement(Draggable, { key: identifier, index: index, draggableId: `${identifier}`, isDragDisabled: !reorderable }, (draggableProvided) => {
             return renderNode({
@@ -93,9 +94,9 @@ export function ValueSelector(props) {
         }));
     };
     const showOnlySelectedCheckbox = (React.createElement(CheckBox, { disabled: !value.length, checked: selectedOnly, onChange: setSelectedOnly }, showSelectedOnlyLabel ?? 'Show Selected Only'));
-    const showSelectedOnlyPosition = props.showSelectedOnlyPosition ?? 'floating';
     const selectionSectionProps = {
         ...props,
+        showOnlySelectedCheckbox,
         onSelectAll: () => {
             options.forEach((option) => {
                 selectedMap.set(toIdentifier(option), option);
@@ -111,11 +112,9 @@ export function ValueSelector(props) {
             notifyChange();
         },
     };
-    return (React.createElement(Flex, { style: props.style, className: baseClassName, flexDirection: "column", flex: 1 },
-        React.createElement(Flex, { mb: 1 },
-            showFilterInput && filter ? (React.createElement(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", style: { flex: 1, border: 0, margin: 3 } })) : (React.createElement(Box, { flex: 1 })),
-            showSelectedOnlyPosition === 'top' && React.createElement(Box, { ml: 20 }, showOnlySelectedCheckbox)),
-        selectionBoxPosition === 'top' && renderSelectionSection(selectionSectionProps),
+    return (React.createElement(Flex, { style: props.style, className: clsx('twa:flex-1', baseClassName), flexDirection: "column" },
+        React.createElement(Flex, { className: "twa:mb-1" }, showFilterInput && filter ? (React.createElement(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", className: "twa:flex-1 twa:border-0 twa:m-[3px]" })) : (React.createElement(Box, { className: "twa:flex-1" }))),
+        renderSelectionSection(selectionSectionProps),
         React.createElement(DragDropContext, { onDragEnd: (result) => {
                 const { source, destination } = result;
                 const selection = [];
@@ -139,9 +138,7 @@ export function ValueSelector(props) {
                 });
                 notifyChange();
             } },
-            React.createElement(Flex, { className: `${baseClassName}__body`, flexDirection: "column", flex: 1, style: { overflow: 'auto' } },
-                showSelectedOnlyPosition === 'floating' && (React.createElement(Box, { className: `${baseClassName}__show-selected-only-checkbox` },
-                    React.createElement(Box, { className: `${baseClassName}__show-selected-only-checkbox__text`, "data-name": "show-selected-only", backgroundColor: "defaultbackground" }, showOnlySelectedCheckbox))),
+            React.createElement(Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column" },
                 React.createElement(Droppable, { droppableId: "droppable" }, (droppableProvided) => {
                     return (React.createElement("div", { ref: droppableProvided.innerRef, ...droppableProvided.droppableProps },
                         options
@@ -156,49 +153,29 @@ export function ValueSelector(props) {
                         })
                             .map(renderOption),
                         droppableProvided.placeholder));
-                }))),
-        selectionBoxPosition === 'bottom' && renderSelectionSection(selectionSectionProps)));
+                })))));
 }
 export const renderSelectionSection = (props) => {
-    const { noSelectionLabel, clearSelectionLabel, value, options, disabled, singleSelect, toLabel, toIdentifier, selectionBoxPosition = 'bottom', } = props;
-    const selectionBox = (React.createElement(Box, { fontSize: 2 }, !value.length ? (React.createElement(React.Fragment, null,
-        noSelectionLabel ?? 'No selected options',
-        !singleSelect ? (React.createElement(SimpleButton, { px: 1, disabled: disabled, variant: "text", style: { textDecoration: 'underline', display: 'inline-block' }, onClick: props.onSelectAll }, "Select all")) : null)) : (React.createElement(React.Fragment, null,
-        React.createElement(SimpleButton, { disabled: disabled, tabIndex: 0, px: 1, mr: 1, variant: "text", style: { textDecoration: 'underline', display: 'inline-block' }, onClick: props.onClear }, clearSelectionLabel ?? 'Clear selection.'),
-        props.xSelectedLabel
-            ? props.xSelectedLabel(value.length)
-            : `Your selected ${value.length} ${value.length > 1 ? 'options' : 'option'}.`))));
-    return (React.createElement(Box, { className: `${baseClassName}__header`, mt: selectionBoxPosition === 'bottom' ? 3 : 0, mb: selectionBoxPosition === 'top' ? 3 : 0 },
-        selectionBox,
-        React.createElement(ValueOptionsTags, { options: options, value: value, toLabel: toLabel, toIdentifier: toIdentifier, onClearOption: props.onClearOption, readOnly: disabled, isOptionDisabled: props.isOptionDisabled })));
+    const { value, options, disabled, singleSelect, toLabel, toIdentifier, } = props;
+    const selectionBox = (React.createElement(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:py-2" },
+        React.createElement(Box, { className: clsx('twa:flex twa:flex-row', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard') },
+            React.createElement(CheckBox, { className: "twa:ml-0.5 twa:font-bold", checked: !value.length ? false : value.length === options.length ? true : null, onChange: (checked) => {
+                    if (checked) {
+                        props.onSelectAll();
+                    }
+                    else {
+                        props.onClear();
+                    }
+                } },
+                React.createElement(Box, { className: "twa:flex twa:flex-row twa:items-center twa:gap-3" },
+                    "Select All",
+                    React.createElement(Box, { className: "twa:text-2 twa:font-normal" },
+                        "(",
+                        value.length,
+                        " of ",
+                        options.length,
+                        " selected)"))),
+            React.createElement("div", { className: "twa:flex-1" }),
+            React.createElement(Box, { className: "twa:mr-2 twa:text-2 twa:font-normal" }, props.showOnlySelectedCheckbox))));
+    return React.createElement(Box, { className: clsx(`${baseClassName}__header `) }, selectionBox);
 };
-export function ValueOptionsTags(props) {
-    const { allowWrap, value, toLabel, isOptionDisabled, onChange, onClearOption, readOnly: isReadOnly, renderLabel, } = props;
-    const { selectedMap } = useValuesMap(props);
-    const renderOptionTag = (index) => {
-        const optionId = value[index];
-        const clear = () => {
-            selectedMap.delete(optionId);
-            onClearOption?.(optionId);
-            if (onChange) {
-                onChange([...selectedMap.keys()], new Map(selectedMap));
-            }
-        };
-        const option = selectedMap.get(optionId);
-        const readOnly = isReadOnly || (isOptionDisabled ? isOptionDisabled(option) : false);
-        const label = option != null ? toLabel(option) : `${optionId}`;
-        return (React.createElement(Tag, { flexDirection: "row", alignItems: "center", "data-name": "selected-option", "data-id": optionId, mt: allowWrap ? 1 : 0, mr: 1, className: "ab-ValueSelector__tag", onClick: (e) => {
-                e.target?.lastChild?.focus?.();
-            }, style: { flex: 'none' } },
-            renderLabel ? renderLabel(label) : label,
-            React.createElement(SimpleButton, { icon: "close", ml: 2, iconSize: 14, variant: "text", style: { border: 'none', visibility: readOnly ? 'hidden' : 'visible' }, onClick: clear })));
-    };
-    const renderEllipsis = useCallback(({ remaining }) => {
-        return (React.createElement(Text, { fontSize: 2, style: { whiteSpace: 'nowrap' } },
-            "+",
-            remaining,
-            " ",
-            remaining > 1 ? 'others' : 'other'));
-    }, []);
-    return (React.createElement(EllipsisContainer, { style: props.style, marginRight: 4, my: 1, allowWrap: allowWrap, count: value.length, direction: "horizontal", renderItem: renderOptionTag, renderEllipsis: renderEllipsis }));
-}

package/src/View/Components/WizardSummaryPage.js

@@ -13,7 +13,7 @@ const tableDOMProps = {
     },
 };
 export const WizardSummaryPage = (props) => {
-    return (React.createElement(WizardPanel, { bodyProps: { padding: 0 }, className: "ab-WizardSummary", "data-name": 'wizard-summary' },
+    return (React.createElement(WizardPanel, { bodyProps: { className: 'twa:p-0' }, className: "ab-WizardSummary", "data-name": 'wizard-summary' },
         React.createElement(DataSource, { data: props.KeyValuePairs, primaryKey: "Key" },
             React.createElement(InfiniteTableGrid, { showZebraRows: true, domProps: tableDOMProps, columns: columnsMap }))));
 };

package/src/View/CustomSort/Wizard/CustomSortColumnWizardSection.js

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { Text } from 'rebass';
 import { Tabs } from '../../../components/Tabs';
 import { Tag } from '../../../components/Tag';
 import { NewColumnSelector } from '../../Components/ColumnSelector';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { Box } from '../../../components/Flex';
 export const renderCustomSortColumn = (data) => {
     const { api } = useOnePageAdaptableWizardContext();
-    return (React.createElement(Text, { pr: 2, py: 2, fontSize: 2 },
+    return (React.createElement(Box, { className: "twa:text-2 twa:py-2 twa:pr-2" },
         "Custom sort column: ",
         React.createElement(Tag, null, api.columnApi.getFriendlyNameForColumnId(data.ColumnId))));
 };

package/src/View/CustomSort/Wizard/CustomSortValuesWizardSection.js

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { useMemo, useEffect, useState } from 'react';
-import { Text } from 'rebass';
 import { Loader } from '../../../components/Loader';
 import { Tabs } from '../../../components/Tabs';
 import join from '../../../components/utils/join';
 import { runIfNotResolvedIn } from '../../../Utilities/runIfNotResolvedIn';
-import { ValueOptionsTags, ValueSelector } from '../../Components/ValueSelector';
+import { ValueSelector } from '../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import ArrayExtensions from '../../.././Utilities/Extensions/ArrayExtensions';
 import { parseToISO } from '../../../Utilities/Helpers/DateHelper';
+import { TagList } from '../../../components/Tag';
 export const isValidCustomSortOrder = (data) => {
     if (!data.SortedValues || !data.SortedValues.length) {
         return 'You have to specify at least one value for Custom Sort order';
@@ -16,8 +16,7 @@ export const isValidCustomSortOrder = (data) => {
     return true;
 };
 export const renderCustomSortValuesSummary = (data) => {
-    return data.SortedValues.length ? (React.createElement(Text, { fontSize: 2 },
-        React.createElement(ValueOptionsTags, { options: data.SortedValues, value: data.SortedValues, toIdentifier: (x) => `${x}`, toLabel: (x) => `${x}`, allowWrap: true, readOnly: true }))) : null;
+    return React.createElement(TagList, { tags: data.SortedValues.map(String) });
 };
 export const CustomSortValuesWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
@@ -74,9 +73,7 @@ export const CustomSortValuesWizardSection = (props) => {
         React.createElement(Tabs.Tab, null, "Sort Order"),
         React.createElement(Tabs.Content, null,
             isDistinctValuesLoading && React.createElement(Loader, null, "Loading"),
-            React.createElement(ValueSelector, { toIdentifier: toIdentifier, toLabel: toLabel, options: options, value: data.SortedValues, allowReorder: allowReorder, xSelectedLabel: () => {
-                    return `Your Sort Order:`;
-                }, onChange: (SortedValues) => {
+            React.createElement(ValueSelector, { toIdentifier: toIdentifier, toLabel: toLabel, options: options, value: data.SortedValues, allowReorder: allowReorder, onChange: (SortedValues) => {
                     props.onChange({
                         ...data,
                         SortedValues,

package/src/View/CustomSort/Wizard/CustomSortWizard.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { Box } from 'rebass';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
 import { CustomSortColumnWizardSection, isValidCustomSortColumn, renderCustomSortColumn, } from './CustomSortColumnWizardSection';
@@ -9,6 +8,7 @@ import ObjectFactory from '../../../Utilities/ObjectFactory';
 import { useDispatch, useSelector } from 'react-redux';
 import * as CustomSortRedux from '../../../Redux/ActionsReducers/CustomSortRedux';
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
+import { Box } from '../../../components/Flex';
 export const CustomSortWizard = (props) => {
     let data = props.data;
     const allCustomSorts = useSelector((state) => state.CustomSort?.CustomSorts);
@@ -41,7 +41,7 @@ export const CustomSortWizard = (props) => {
                 renderSummary: renderCustomSortColumn,
                 details: 'Select a Column for Custom Sort',
                 render: () => {
-                    return (React.createElement(Box, { padding: 2, style: { height: '100%' } },
+                    return (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
                         React.createElement(CustomSortColumnWizardSection, { isNew: props.isNew, onChange: setCustomSort })));
                 },
                 title: 'Column',
@@ -51,14 +51,14 @@ export const CustomSortWizard = (props) => {
                 details: 'Specify Custom Sort order - drag selected items to modify order',
                 isValid: isValidCustomSortOrder,
                 renderSummary: renderCustomSortValuesSummary,
-                render: () => (React.createElement(Box, { padding: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(CustomSortValuesWizardSection, { onChange: setCustomSort }))),
             },
             {
                 details: 'Select Custom Sort Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(ObjectTagsWizardSection, { onChange: setCustomSort }))),
                 renderSummary: renderObjectTagsSummary,
             },
@@ -67,7 +67,7 @@ export const CustomSortWizard = (props) => {
                 title: 'Summary',
                 details: 'Review your Custom Sort',
                 render: () => {
-                    return (React.createElement(Box, { padding: 2 },
+                    return (React.createElement(Box, { className: "twa:p-2" },
                         React.createElement(OnePageWizardSummary, null)));
                 },
             },

package/src/View/Dashboard/Dashboard.js

@@ -1,7 +1,6 @@
 import kebabCase from 'lodash/kebabCase';
 import * as React from 'react';
 import { connect } from 'react-redux';
-import { Box } from 'rebass';
 import { Dashboard as DashboardUI, DashboardTab as DashboardTabUI, } from '../../components/Dashboard';
 import * as DashboardRedux from '../../Redux/ActionsReducers/DashboardRedux';
 import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
@@ -18,6 +17,7 @@ import { DashboardToolbarFactory } from './DashboardToolbarFactory';
 import { PinnedDashboard } from './PinnedDashboard';
 import { ModuleToolbarWrapper } from './ModuleToolbarWrapper';
 import { QuickSearchInput } from '../QuickSearch/QuickSearchInput';
+import { Box } from '../../components/Flex';
 const DashboardComponent = (props) => {
     const dashboardAccessLevel = props.api.entitlementApi.getEntitlementAccessLevelForModule('Dashboard');
     const renderTab = (tab) => {
@@ -86,8 +86,8 @@ const DashboardComponent = (props) => {
         return customDashboardButtons;
     };
     const renderQuickSearch = () => {
-        return (React.createElement(Box, { ml: 2 },
-            React.createElement(QuickSearchInput, { width: '7rem', className: "ab-DashboardToolbar__QuickSearch__text" })));
+        return (React.createElement(Box, { className: "twa:ml-2" },
+            React.createElement(QuickSearchInput, { className: "ab-DashboardToolbar__QuickSearch__text", inputClassName: "twa:w-[7rem]" })));
     };
     let instanceName = props.api.internalApi.getToolbarTitle();
     let dashboardOptions = props.api.optionsApi.getDashboardOptions();

package/src/View/Dashboard/DashboardPopup.js

@@ -2,13 +2,13 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import * as DashboardRedux from '../../Redux/ActionsReducers/DashboardRedux';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
-import Radio from '../../components/Radio';
-import { Box, Flex } from 'rebass';
 import DashboardManagerUI from '../../components/Dashboard/DashboardManager';
 import { ModuleValueSelector } from '../Components/ModuleValueSelector';
-import { CheckBox } from '../../components/CheckBox';
-import Panel from '../../components/Panel';
 import { PinnedToolbarsSelector } from './PinnedToolbarsSelector';
+import { Flex } from '../../components/Flex';
+import { ToggleButton } from '../../components/ToggleButton';
+import { Tabs } from '../../components/Tabs';
+import { Card } from '../../components/Card';
 export var DashboardConfigView;
 (function (DashboardConfigView) {
     DashboardConfigView["Toolbars"] = "Toolbars";
@@ -64,26 +64,30 @@ class DashboardPopupComponent extends React.Component {
             }
             return false;
         };
+        const contentCls = '';
         return (React.createElement(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
-            React.createElement(Flex, { flex: 1, height: "100%", flexDirection: "column" },
-                areDashboardSettingsVisible && (React.createElement(Panel, { header: 'Dashboard Mode', style: { height: 'auto', overflow: 'visible' }, variant: "default", borderRadius: "none" },
-                    React.createElement(CheckBox, { mr: 3, "data-name": "collapse", className: `${baseClassName}__settings-option`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapsed"),
-                    ' ',
-                    this.props.api.optionsApi.getDashboardOptions().canFloat && (React.createElement(CheckBox, { mr: 3, "data-name": "floating", className: `${baseClassName}__settings-option`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Floating")),
-                    ' ',
-                    React.createElement(CheckBox, { "data-name": "hidden", className: `${baseClassName}__settings-option`, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden"))),
-                React.createElement(Panel, { header: 'Dashboard Contents', style: { borderBottom: '1px solid var(--ab-color-primary)' }, variant: "default", borderRadius: "none", marginTop: 4 },
-                    React.createElement(Flex, { className: `${baseClassName}__contents-selector`, flexDirection: "row", padding: 2 },
-                        React.createElement(Radio, { marginLeft: 3, value: DashboardConfigView.Toolbars, checked: this.state.DashboardConfigView == DashboardConfigView.Toolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Tabbed Toolbars"),
-                        React.createElement(Radio, { marginLeft: 3, value: DashboardConfigView.PinnedToolbars, checked: this.state.DashboardConfigView == DashboardConfigView.PinnedToolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Pinned Toolbars"),
-                        ' ',
-                        React.createElement(Radio, { marginLeft: 3, value: DashboardConfigView.Buttons, checked: this.state.DashboardConfigView == DashboardConfigView.Buttons, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Buttons")),
-                    React.createElement(Box, { className: `${baseClassName}__Module-Selector`, "data-name": this.state.DashboardConfigView === DashboardConfigView.Toolbars
-                            ? 'toolbars'
-                            : 'buttons', style: { minHeight: 0, flex: '1 1 0' }, padding: 2 },
-                        this.state.DashboardConfigView == DashboardConfigView.Toolbars && (React.createElement(DashboardManagerUI, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
-                        this.state.DashboardConfigView == DashboardConfigView.Buttons && (React.createElement(ModuleValueSelector, { disabled: isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', isOptionDisabled: isModuleCheckboxDisabled, xSelectedLabel: () => `Visible Module Buttons:`, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) })),
-                        this.state.DashboardConfigView === DashboardConfigView.PinnedToolbars && (React.createElement(PinnedToolbarsSelector, null)))))));
+            React.createElement(Flex, { flexDirection: "column", className: "twa:h-full twa:gap-4" },
+                areDashboardSettingsVisible && (React.createElement(React.Fragment, null,
+                    React.createElement(Card, null,
+                        React.createElement(Card.Title, { gap: 8 },
+                            "Display Settings",
+                            React.createElement(ToggleButton, { className: "twa:self-end", onChange: (visible) => this.props.onSetDashboardHidden(!visible), checked: !this.props.IsHidden, "data-name": "dashboard-visibility" }, this.props.IsHidden ? 'Hidden' : 'Visible')),
+                        React.createElement(Card.Body, { gap: 2, className: "twa:p-2" },
+                            React.createElement(ToggleButton, { disabled: this.props.IsFloating, className: "twa:w-24", onChange: (expanded) => this.props.onSetDashboardCollapsed(!expanded), checked: !this.props.IsCollapsed, "data-name": "expand-state" }, this.props.IsCollapsed ? 'Collapsed' : 'Expanded'),
+                            this.props.api.optionsApi.getDashboardOptions().canFloat ? (React.createElement(ToggleButton, { className: "twa:w-24", onChange: (pinned) => this.props.onSetDashboardFloating(!pinned), checked: !this.props.IsFloating, "data-name": "floating" }, this.props.IsFloating ? 'Floating' : 'Pinned')) : null)))),
+                React.createElement(Card, { className: "twa:flex-1 twa:overflow-hidden", gap: 0 },
+                    React.createElement(Card.Title, null, "Contents"),
+                    React.createElement(Card.Body, { className: "twa:p-2" },
+                        React.createElement(Tabs, { className: "twa:flex-1 twa:min-h-0" },
+                            React.createElement(Tabs.Tab, { value: "pinned-toolbars" }, "Pinned Toolbars"),
+                            React.createElement(Tabs.Tab, { value: "tabbed-toolbars" }, "Tabbed Toolbars"),
+                            React.createElement(Tabs.Tab, { value: "buttons" }, "Buttons"),
+                            React.createElement(Tabs.Content, { value: "pinned-toolbars", className: contentCls },
+                                React.createElement(PinnedToolbarsSelector, null)),
+                            React.createElement(Tabs.Content, { value: "tabbed-toolbars", className: contentCls },
+                                React.createElement(DashboardManagerUI, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
+                            React.createElement(Tabs.Content, { value: "buttons", className: contentCls },
+                                React.createElement(ModuleValueSelector, { disabled: isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, isOptionDisabled: isModuleCheckboxDisabled, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) }))))))));
     }
     onDashboardConfigViewChanged(event) {
         let e = event.target;

package/src/View/Dashboard/DashboardViewPanel.js

@@ -2,8 +2,8 @@ import * as DashboardRedux from '../../Redux/ActionsReducers/DashboardRedux';
 import * as React from 'react';
 import { CheckBox } from '../../components/CheckBox';
 import { connect } from 'react-redux';
-import { Flex } from 'rebass';
 import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
+import { Flex } from '../../components/Flex';
 class DashboardViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -12,11 +12,11 @@ class DashboardViewPanelComponent extends React.Component {
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__Dashboard__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             ' ',
-            ArrayExtensions.IsNotNullOrEmpty(this.props.api.dashboardApi.getDashboardState().Tabs) && (React.createElement(CheckBox, { className: `ab-${elementType}__Dashboard__collapsed-check`, marginTop: 0, fontSize: 2, padding: 1, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse")),
+            ArrayExtensions.IsNotNullOrEmpty(this.props.api.dashboardApi.getDashboardState().Tabs) && (React.createElement(CheckBox, { className: `ab-${elementType}__Dashboard__collapsed-check twa:mt-0 twa:text-2 twa:p-1`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse")),
             '',
-            this.props.api.optionsApi.getDashboardOptions().canFloat && (React.createElement(CheckBox, { className: `ab-${elementType}__Dashboard__collapsed-check`, marginTop: 0, fontSize: 2, padding: 1, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
+            this.props.api.optionsApi.getDashboardOptions().canFloat && (React.createElement(CheckBox, { className: `ab-${elementType}__Dashboard__collapsed-check twa:mt-0 twa:text-2 twa:p-1`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
             ' ',
-            React.createElement(CheckBox, { className: `ab-${elementType}__Dashboard__hidden-check`, marginTop: 0, fontSize: 2, padding: 1, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden")));
+            React.createElement(CheckBox, { className: `ab-${elementType}__Dashboard__hidden-check twa:mt-0 twa:text-2 twa:p-1`, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden")));
     }
 }
 function mapStateToProps(state, ownProps) {

package/src/View/Dashboard/PinnedDashboard.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { Box, Flex } from 'rebass';
 import { useAdaptable } from '../AdaptableContext';
 import { DashboardToolbarFactory } from './DashboardToolbarFactory';
+import { Box, Flex } from '../../components/Flex';
 export const PinnedDashboard = (props) => {
     const adaptable = useAdaptable();
     const dashboardState = useSelector((state) => state.Dashboard);
@@ -11,8 +11,8 @@ export const PinnedDashboard = (props) => {
     if (!pinnedToolbars || pinnedToolbars.length == 0) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(Flex, { p: 1, className: "ab-Dashboard__pinned" }, pinnedToolbars.map((toolbar, index) => {
-        return (React.createElement(Box, { key: index, mr: 1, mb: 1, className: `ab-Dashboard__pinned-container ab-Dashboard__pinned-container--${toolbar}` },
+    return (React.createElement(Flex, { className: "ab-Dashboard__pinned twa:p-1" }, pinnedToolbars.map((toolbar, index) => {
+        return (React.createElement(Box, { key: index, className: `twa:mr-1 twa:mb-1 ab-Dashboard__pinned-container ab-Dashboard__pinned-container--${toolbar}` },
             React.createElement(Box, { className: "ab-Dashboard__toolbar-content" },
                 React.createElement(DashboardToolbarFactory, { toolbarName: toolbar }))));
     })));

package/src/View/Dashboard/PinnedToolbarsSelector.js

@@ -24,12 +24,13 @@ export const PinnedToolbarsSelector = (props) => {
     const tabs = React.useMemo(() => {
         return [
             {
-                Name: 'Pinned Toolbars',
+                // Name: 'Pinned Toolbars',
+                Name: '',
                 Items: pinnedToolbars ?? [],
             },
         ];
     }, [pinnedToolbars]);
-    return (React.createElement(ModuleManager, { permittedActions: {
+    return (React.createElement(ModuleManager, { className: "twa:flex-1", permittedActions: {
             createTab: false,
             dragAndDropTab: false,
             deleteTab: false,

package/src/View/DataChangeHistory/DataChangeHistoryPopup.js

@@ -3,11 +3,11 @@ import { connect } from 'react-redux';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import { DataChangeHistoryGrid } from './DataChangeHistoryGrid';
 import { DataChangeHistoryDisable, DataChangeHistoryEnable, DataChangeHistoryResume, DataChangeHistorySuspend, } from '../../Redux/ActionsReducers/InternalRedux';
-import { Flex, Text } from 'rebass';
 import { ButtonPlay } from '../Components/Buttons/ButtonPlay';
 import { ButtonPause } from '../Components/Buttons/ButtonPause';
 import { ButtonStop } from '../Components/Buttons/ButtonStop';
 import { DateFormatter } from '../../Utilities/Helpers/FormatHelper';
+import { Box, Flex } from '../../components/Flex';
 class DataChangeHistoryPopupComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -22,26 +22,26 @@ class DataChangeHistoryPopupComponent extends React.Component {
         const enabled = changeHistoryMode === 'ACTIVE';
         const disabled = changeHistoryMode === 'INACTIVE';
         const suspended = changeHistoryMode === 'SUSPENDED';
-        const buttonPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPopup--button-panel", padding: 2, style: { gap: 'var(--ab-space-1)' } },
+        const buttonPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPopup--button-panel twa:gap-1 twa:p-2" },
             disabled && (React.createElement(ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-activate", "data-name": 'data-change-history--button-activate"', variant: 'raised', tone: 'accent', tooltip: '', onClick: () => onChangeHistoryEnable() }, "Activate")),
             suspended && (React.createElement(ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-resume", "data-name": 'data-change-history--button-resume', variant: 'outlined', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() }, "Resume")),
             enabled && (React.createElement(ButtonPause, { className: "ab-DataChangeHistoryPopup--button-suspend", "data-name": 'data-change-history--button-suspend', variant: 'outlined', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() }, "Suspend")),
             (enabled || suspended) && (React.createElement(ButtonStop, { className: "ab-DataChangeHistoryPopup--button-deactivate", "data-name": 'data-change-history--button-deactivate', variant: 'outlined', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }, "Deactivate"))));
         const dateFormat = `${this.props.api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat} HH:mm:ss`;
-        const statusPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPopup--status-panel", alignItems: 'center', style: { gap: 'var(--ab-space-1)' } },
+        const statusPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPopup--status-panel twa:gap-1", alignItems: 'center' },
             enabled && (React.createElement(React.Fragment, null,
-                React.createElement(Text, { className: "ab-DataChangeHistoryPanel--status-active", style: { color: 'var(--ab-color-success)', fontWeight: 'bold' } }, "Active"),
-                !!activationTime && (React.createElement(Text, { style: { fontStyle: 'italic' }, fontSize: 2 },
+                React.createElement(Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-success twa:font-bold" }, "Active"),
+                !!activationTime && (React.createElement(Box, { className: "twa:text-2 twa:italic" },
                     "(since ",
                     DateFormatter(activationTime, { Pattern: dateFormat }),
                     ")")))),
             suspended && (React.createElement(React.Fragment, null,
-                React.createElement(Text, { className: "ab-DataChangeHistoryPopup--status-suspended", style: { color: 'var(--ab-color-warn)', fontWeight: 'bold' } }, "Suspended"),
-                !!suspensionTime && (React.createElement(Text, { style: { fontStyle: 'italic' }, fontSize: 2 },
+                React.createElement(Box, { className: "ab-DataChangeHistoryPopup--status-suspended twa:text-warn twa:font-bold" }, "Suspended"),
+                !!suspensionTime && (React.createElement(Box, { className: "twa:text-2 twa:italic" },
                     "(since ",
                     DateFormatter(suspensionTime, { Pattern: dateFormat }),
                     ")")))),
-            disabled && (React.createElement(Text, { className: "ab-DataChangeHistoryPopup--status-disabled", fontSize: 2 }))));
+            disabled && React.createElement(Box, { className: "ab-DataChangeHistoryPopup--status-disabled twa:text-2" })));
         const handleChangeUndo = (changeKey) => {
             const changeToBeUndone = this.props.changeHistoryLog[changeKey];
             if (changeToBeUndone) {
@@ -59,7 +59,7 @@ class DataChangeHistoryPopupComponent extends React.Component {
             .agGridThemeAdapter.getAgGridThemeMode();
         const currentAgGridTheme = agGridThemeMode === 'legacy' ? this.props.api.themeApi.getAgGridCurrentThemeName() : '';
         return (React.createElement(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
-            React.createElement(Flex, { className: "ab-DataChangeHistoryPopup", flexDirection: "column", style: { height: '100%' } },
+            React.createElement(Flex, { className: "ab-DataChangeHistoryPopup twa:h-full", flexDirection: "column" },
                 React.createElement(Flex, { style: {
                         color: 'var(--ab-dashboard__color)',
                         background: 'var(--ab-dashboard__background)',
@@ -67,7 +67,7 @@ class DataChangeHistoryPopupComponent extends React.Component {
                     React.createElement(Flex, { flexDirection: 'row' },
                         buttonPanel,
                         statusPanel)),
-                React.createElement(Flex, { className: "ab-DataChangeHistoryPopup--grid", "data-name": 'data-change-history--grid', flex: 1, alignSelf: 'stretch', flexDirection: 'column' },
+                React.createElement(Flex, { className: "ab-DataChangeHistoryPopup--grid twa:flex-1 twa:self-stretch", "data-name": 'data-change-history--grid', flexDirection: 'column' },
                     React.createElement("div", { id: adaptableContainerId }),
                     React.createElement("div", { id: agGridContainerId, className: currentAgGridTheme, style: { height: '100%' } }),
                     React.createElement(DataChangeHistoryGrid, { adaptableContainerId: adaptableContainerId, agGridContainerId: agGridContainerId, changeHistoryLog: this.props.changeHistoryLog, onUndoChange: handleChangeUndo, onClearRow: handleClearRow })))));