@adaptabletools/adaptable-cjs 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,19 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ValueOptionsTags = exports.renderSelectionSection = exports.ValueSelector = void 0;
+exports.renderSelectionSection = void 0;
+exports.ValueSelector = ValueSelector;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const rebass_1 = require("rebass");
 const dnd_1 = require("../../../components/dnd");
 const CheckBox_1 = require("../../../components/CheckBox");
 const icons_1 = require("../../../components/icons");
-const EllipsisContainer_1 = require("../../../components/EllipsisContainer");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const Tag_1 = require("../../../components/Tag");
 const AdaptableFormControlTextClear_1 = require("../Forms/AdaptableFormControlTextClear");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
+const Flex_1 = require("../../../components/Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 function useValuesMap({ options, value, toIdentifier, selectedMap, }) {
     const optionsMap = (0, react_1.useMemo)(() => {
         if (selectedMap) {
@@ -39,7 +38,7 @@ function useValuesMap({ options, value, toIdentifier, selectedMap, }) {
 }
 const baseClassName = 'ab-ValueSelector';
 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] = (0, react_1.useState)(false);
@@ -64,9 +63,12 @@ function ValueSelector(props) {
         const label = !allowReorder ? preparedToLabel(option) : null;
         const reorderable = typeof allowReorder === 'function' ? allowReorder(option) : allowReorder;
         const renderNode = (props, dragHandleProps) => {
-            return (React.createElement(rebass_1.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(rebass_1.Flex, { flex: 1, flexDirection: "row", alignItems: "center" },
-                    reorderable ? (React.createElement(rebass_1.Box, { mr: 3, ...dragHandleProps },
+            return (React.createElement(Flex_1.Flex, { alignItems: "center", key: identifier ?? index, "data-index": index, "data-id": identifier, "data-name": "option", ...props, className: (0, clsx_1.default)(`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_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:flex-1" },
+                    reorderable ? (React.createElement(Flex_1.Box, { ...dragHandleProps, className: (0, clsx_1.default)('twa:mr-3', dragHandleProps?.className) },
                         React.createElement(icons_1.Icon, { name: "drag", style: { cursor: 'grab' } }))) : null,
                     singleSelect ? (React.createElement(Radio_1.default, { checked: selectedMap.has(identifier), "data-name": identifier, onChange: (checked) => {
                             if (checked) {
@@ -86,7 +88,7 @@ function ValueSelector(props) {
                             }
                             notifyChange();
                         }, checked: selectedMap.has(identifier) }, label)),
-                    React.createElement(rebass_1.Text, { flex: 1, ml: 2 }, allowReorder ? preparedToLabel(option) : null))));
+                    React.createElement(Flex_1.Box, { className: "twa:ml-2 twa:flex-1" }, allowReorder ? preparedToLabel(option) : null))));
         };
         return (React.createElement(dnd_1.Draggable, { key: identifier, index: index, draggableId: `${identifier}`, isDragDisabled: !reorderable }, (draggableProvided) => {
             return renderNode({
@@ -97,9 +99,9 @@ function ValueSelector(props) {
         }));
     };
     const showOnlySelectedCheckbox = (React.createElement(CheckBox_1.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);
@@ -115,11 +117,9 @@ function ValueSelector(props) {
             notifyChange();
         },
     };
-    return (React.createElement(rebass_1.Flex, { style: props.style, className: baseClassName, flexDirection: "column", flex: 1 },
-        React.createElement(rebass_1.Flex, { mb: 1 },
-            showFilterInput && filter ? (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", style: { flex: 1, border: 0, margin: 3 } })) : (React.createElement(rebass_1.Box, { flex: 1 })),
-            showSelectedOnlyPosition === 'top' && React.createElement(rebass_1.Box, { ml: 20 }, showOnlySelectedCheckbox)),
-        selectionBoxPosition === 'top' && (0, exports.renderSelectionSection)(selectionSectionProps),
+    return (React.createElement(Flex_1.Flex, { style: props.style, className: (0, clsx_1.default)('twa:flex-1', baseClassName), flexDirection: "column" },
+        React.createElement(Flex_1.Flex, { className: "twa:mb-1" }, showFilterInput && filter ? (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", className: "twa:flex-1 twa:border-0 twa:m-[3px]" })) : (React.createElement(Flex_1.Box, { className: "twa:flex-1" }))),
+        (0, exports.renderSelectionSection)(selectionSectionProps),
         React.createElement(dnd_1.DragDropContext, { onDragEnd: (result) => {
                 const { source, destination } = result;
                 const selection = [];
@@ -143,9 +143,7 @@ function ValueSelector(props) {
                 });
                 notifyChange();
             } },
-            React.createElement(rebass_1.Flex, { className: `${baseClassName}__body`, flexDirection: "column", flex: 1, style: { overflow: 'auto' } },
-                showSelectedOnlyPosition === 'floating' && (React.createElement(rebass_1.Box, { className: `${baseClassName}__show-selected-only-checkbox` },
-                    React.createElement(rebass_1.Box, { className: `${baseClassName}__show-selected-only-checkbox__text`, "data-name": "show-selected-only", backgroundColor: "defaultbackground" }, showOnlySelectedCheckbox))),
+            React.createElement(Flex_1.Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column" },
                 React.createElement(dnd_1.Droppable, { droppableId: "droppable" }, (droppableProvided) => {
                     return (React.createElement("div", { ref: droppableProvided.innerRef, ...droppableProvided.droppableProps },
                         options
@@ -160,52 +158,30 @@ function ValueSelector(props) {
                         })
                             .map(renderOption),
                         droppableProvided.placeholder));
-                }))),
-        selectionBoxPosition === 'bottom' && (0, exports.renderSelectionSection)(selectionSectionProps)));
+                })))));
 }
-exports.ValueSelector = ValueSelector;
 const renderSelectionSection = (props) => {
-    const { noSelectionLabel, clearSelectionLabel, value, options, disabled, singleSelect, toLabel, toIdentifier, selectionBoxPosition = 'bottom', } = props;
-    const selectionBox = (React.createElement(rebass_1.Box, { fontSize: 2 }, !value.length ? (React.createElement(React.Fragment, null,
-        noSelectionLabel ?? 'No selected options',
-        !singleSelect ? (React.createElement(SimpleButton_1.default, { 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_1.default, { 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(rebass_1.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(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:py-2" },
+        React.createElement(Flex_1.Box, { className: (0, clsx_1.default)('twa:flex twa:flex-row', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard') },
+            React.createElement(CheckBox_1.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(Flex_1.Box, { className: "twa:flex twa:flex-row twa:items-center twa:gap-3" },
+                    "Select All",
+                    React.createElement(Flex_1.Box, { className: "twa:text-2 twa:font-normal" },
+                        "(",
+                        value.length,
+                        " of ",
+                        options.length,
+                        " selected)"))),
+            React.createElement("div", { className: "twa:flex-1" }),
+            React.createElement(Flex_1.Box, { className: "twa:mr-2 twa:text-2 twa:font-normal" }, props.showOnlySelectedCheckbox))));
+    return React.createElement(Flex_1.Box, { className: (0, clsx_1.default)(`${baseClassName}__header `) }, selectionBox);
 };
 exports.renderSelectionSection = renderSelectionSection;
-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_1.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_1.default, { icon: "close", ml: 2, iconSize: 14, variant: "text", style: { border: 'none', visibility: readOnly ? 'hidden' : 'visible' }, onClick: clear })));
-    };
-    const renderEllipsis = (0, react_1.useCallback)(({ remaining }) => {
-        return (React.createElement(rebass_1.Text, { fontSize: 2, style: { whiteSpace: 'nowrap' } },
-            "+",
-            remaining,
-            " ",
-            remaining > 1 ? 'others' : 'other'));
-    }, []);
-    return (React.createElement(EllipsisContainer_1.EllipsisContainer, { style: props.style, marginRight: 4, my: 1, allowWrap: allowWrap, count: value.length, direction: "horizontal", renderItem: renderOptionTag, renderEllipsis: renderEllipsis }));
-}
-exports.ValueOptionsTags = ValueOptionsTags;

package/src/View/Components/WizardSummaryPage.js

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

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

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomSortColumnWizardSection = exports.isValidCustomSortColumn = exports.renderCustomSortColumn = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const Tabs_1 = require("../../../components/Tabs");
 const Tag_1 = require("../../../components/Tag");
 const ColumnSelector_1 = require("../../Components/ColumnSelector");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const Flex_1 = require("../../../components/Flex");
 const renderCustomSortColumn = (data) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(rebass_1.Text, { pr: 2, py: 2, fontSize: 2 },
+    return (React.createElement(Flex_1.Box, { className: "twa:text-2 twa:py-2 twa:pr-2" },
         "Custom sort column: ",
         React.createElement(Tag_1.Tag, null, api.columnApi.getFriendlyNameForColumnId(data.ColumnId))));
 };

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

@@ -4,7 +4,6 @@ exports.CustomSortValuesWizardSection = exports.renderCustomSortValuesSummary =
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const rebass_1 = require("rebass");
 const Loader_1 = require("../../../components/Loader");
 const Tabs_1 = require("../../../components/Tabs");
 const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
@@ -13,6 +12,7 @@ const ValueSelector_1 = require("../../Components/ValueSelector");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../.././Utilities/Extensions/ArrayExtensions"));
 const DateHelper_1 = require("../../../Utilities/Helpers/DateHelper");
+const Tag_1 = require("../../../components/Tag");
 const isValidCustomSortOrder = (data) => {
     if (!data.SortedValues || !data.SortedValues.length) {
         return 'You have to specify at least one value for Custom Sort order';
@@ -21,8 +21,7 @@ const isValidCustomSortOrder = (data) => {
 };
 exports.isValidCustomSortOrder = isValidCustomSortOrder;
 const renderCustomSortValuesSummary = (data) => {
-    return data.SortedValues.length ? (React.createElement(rebass_1.Text, { fontSize: 2 },
-        React.createElement(ValueSelector_1.ValueOptionsTags, { options: data.SortedValues, value: data.SortedValues, toIdentifier: (x) => `${x}`, toLabel: (x) => `${x}`, allowWrap: true, readOnly: true }))) : null;
+    return React.createElement(Tag_1.TagList, { tags: data.SortedValues.map(String) });
 };
 exports.renderCustomSortValuesSummary = renderCustomSortValuesSummary;
 const CustomSortValuesWizardSection = (props) => {
@@ -80,9 +79,7 @@ const CustomSortValuesWizardSection = (props) => {
         React.createElement(Tabs_1.Tabs.Tab, null, "Sort Order"),
         React.createElement(Tabs_1.Tabs.Content, null,
             isDistinctValuesLoading && React.createElement(Loader_1.Loader, null, "Loading"),
-            React.createElement(ValueSelector_1.ValueSelector, { toIdentifier: toIdentifier, toLabel: toLabel, options: options, value: data.SortedValues, allowReorder: allowReorder, xSelectedLabel: () => {
-                    return `Your Sort Order:`;
-                }, onChange: (SortedValues) => {
+            React.createElement(ValueSelector_1.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

@@ -4,7 +4,6 @@ exports.CustomSortWizard = 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 OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Helper_1 = require("../../../Utilities/Helpers/Helper");
 const CustomSortColumnWizardSection_1 = require("./CustomSortColumnWizardSection");
@@ -13,6 +12,7 @@ const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/Obje
 const react_redux_1 = require("react-redux");
 const CustomSortRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/CustomSortRedux"));
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
+const Flex_1 = require("../../../components/Flex");
 const CustomSortWizard = (props) => {
     let data = props.data;
     const allCustomSorts = (0, react_redux_1.useSelector)((state) => state.CustomSort?.CustomSorts);
@@ -45,7 +45,7 @@ const CustomSortWizard = (props) => {
                 renderSummary: CustomSortColumnWizardSection_1.renderCustomSortColumn,
                 details: 'Select a Column for Custom Sort',
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { padding: 2, style: { height: '100%' } },
+                    return (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
                         React.createElement(CustomSortColumnWizardSection_1.CustomSortColumnWizardSection, { isNew: props.isNew, onChange: setCustomSort })));
                 },
                 title: 'Column',
@@ -55,14 +55,14 @@ const CustomSortWizard = (props) => {
                 details: 'Specify Custom Sort order - drag selected items to modify order',
                 isValid: CustomSortValuesWizardSection_1.isValidCustomSortOrder,
                 renderSummary: CustomSortValuesWizardSection_1.renderCustomSortValuesSummary,
-                render: () => (React.createElement(rebass_1.Box, { padding: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(CustomSortValuesWizardSection_1.CustomSortValuesWizardSection, { onChange: setCustomSort }))),
             },
             {
                 details: 'Select Custom Sort Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setCustomSort }))),
                 renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
             },
@@ -71,7 +71,7 @@ const CustomSortWizard = (props) => {
                 title: 'Summary',
                 details: 'Review your Custom Sort',
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                         React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));
                 },
             },

package/src/View/Dashboard/Dashboard.js

@@ -5,7 +5,6 @@ const tslib_1 = require("tslib");
 const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
-const rebass_1 = require("rebass");
 const Dashboard_1 = require("../../components/Dashboard");
 const DashboardRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/DashboardRedux"));
 const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
@@ -22,6 +21,7 @@ const DashboardToolbarFactory_1 = require("./DashboardToolbarFactory");
 const PinnedDashboard_1 = require("./PinnedDashboard");
 const ModuleToolbarWrapper_1 = require("./ModuleToolbarWrapper");
 const QuickSearchInput_1 = require("../QuickSearch/QuickSearchInput");
+const Flex_1 = require("../../components/Flex");
 const DashboardComponent = (props) => {
     const dashboardAccessLevel = props.api.entitlementApi.getEntitlementAccessLevelForModule('Dashboard');
     const renderTab = (tab) => {
@@ -31,7 +31,7 @@ const DashboardComponent = (props) => {
             let customToolbar = customToolbars && customToolbars.find((ct) => ct.name == visibleToolbarName);
             if (customToolbar) {
                 if (dashboardAccessLevel != 'Hidden') {
-                    return (React.createElement(rebass_1.Box, { key: customToolbar.name, className: `ab-Dashboard__container ab-Dashboard__container--customToolbar` },
+                    return (React.createElement(Flex_1.Box, { key: customToolbar.name, className: `ab-Dashboard__container ab-Dashboard__container--customToolbar` },
                         React.createElement(CustomToolbar_1.CustomToolbarWrapper, { customToolbar: customToolbar, dashboardRevision: props.DashboardRevision })));
                 }
             }
@@ -43,7 +43,7 @@ const DashboardComponent = (props) => {
                         let moduleInfo = props.api.internalApi
                             .getModuleService()
                             .getModuleInfoByModule(moduleToolbarName);
-                        return (React.createElement(rebass_1.Box, { key: moduleToolbarName, className: `ab-Dashboard__container ab-Dashboard__container--${moduleToolbarName}` },
+                        return (React.createElement(Flex_1.Box, { key: moduleToolbarName, className: `ab-Dashboard__container ab-Dashboard__container--${moduleToolbarName}` },
                             React.createElement(ModuleToolbarWrapper_1.ModuleToolbarWrapper, { moduleInfo: moduleInfo, accessLevel: dashboardAccessLevel },
                                 React.createElement(DashboardToolbarFactory_1.DashboardToolbarFactory, { toolbarName: moduleToolbarName }))));
                     }
@@ -90,8 +90,8 @@ const DashboardComponent = (props) => {
         return customDashboardButtons;
     };
     const renderQuickSearch = () => {
-        return (React.createElement(rebass_1.Box, { ml: 2 },
-            React.createElement(QuickSearchInput_1.QuickSearchInput, { width: '7rem', className: "ab-DashboardToolbar__QuickSearch__text" })));
+        return (React.createElement(Flex_1.Box, { className: "twa:ml-2" },
+            React.createElement(QuickSearchInput_1.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

@@ -6,13 +6,13 @@ const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const DashboardRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/DashboardRedux"));
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
-const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
-const rebass_1 = require("rebass");
 const DashboardManager_1 = tslib_1.__importDefault(require("../../components/Dashboard/DashboardManager"));
 const ModuleValueSelector_1 = require("../Components/ModuleValueSelector");
-const CheckBox_1 = require("../../components/CheckBox");
-const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
 const PinnedToolbarsSelector_1 = require("./PinnedToolbarsSelector");
+const Flex_1 = require("../../components/Flex");
+const ToggleButton_1 = require("../../components/ToggleButton");
+const Tabs_1 = require("../../components/Tabs");
+const Card_1 = require("../../components/Card");
 var DashboardConfigView;
 (function (DashboardConfigView) {
     DashboardConfigView["Toolbars"] = "Toolbars";
@@ -68,26 +68,30 @@ class DashboardPopupComponent extends React.Component {
             }
             return false;
         };
+        const contentCls = '';
         return (React.createElement(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
-            React.createElement(rebass_1.Flex, { flex: 1, height: "100%", flexDirection: "column" },
-                areDashboardSettingsVisible && (React.createElement(Panel_1.default, { header: 'Dashboard Mode', style: { height: 'auto', overflow: 'visible' }, variant: "default", borderRadius: "none" },
-                    React.createElement(CheckBox_1.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_1.CheckBox, { mr: 3, "data-name": "floating", className: `${baseClassName}__settings-option`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Floating")),
-                    ' ',
-                    React.createElement(CheckBox_1.CheckBox, { "data-name": "hidden", className: `${baseClassName}__settings-option`, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden"))),
-                React.createElement(Panel_1.default, { header: 'Dashboard Contents', style: { borderBottom: '1px solid var(--ab-color-primary)' }, variant: "default", borderRadius: "none", marginTop: 4 },
-                    React.createElement(rebass_1.Flex, { className: `${baseClassName}__contents-selector`, flexDirection: "row", padding: 2 },
-                        React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Toolbars, checked: this.state.DashboardConfigView == DashboardConfigView.Toolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Tabbed Toolbars"),
-                        React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.PinnedToolbars, checked: this.state.DashboardConfigView == DashboardConfigView.PinnedToolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Pinned Toolbars"),
-                        ' ',
-                        React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Buttons, checked: this.state.DashboardConfigView == DashboardConfigView.Buttons, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Buttons")),
-                    React.createElement(rebass_1.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(DashboardManager_1.default, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
-                        this.state.DashboardConfigView == DashboardConfigView.Buttons && (React.createElement(ModuleValueSelector_1.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_1.PinnedToolbarsSelector, null)))))));
+            React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:gap-4" },
+                areDashboardSettingsVisible && (React.createElement(React.Fragment, null,
+                    React.createElement(Card_1.Card, null,
+                        React.createElement(Card_1.Card.Title, { gap: 8 },
+                            "Display Settings",
+                            React.createElement(ToggleButton_1.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_1.Card.Body, { gap: 2, className: "twa:p-2" },
+                            React.createElement(ToggleButton_1.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_1.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_1.Card, { className: "twa:flex-1 twa:overflow-hidden", gap: 0 },
+                    React.createElement(Card_1.Card.Title, null, "Contents"),
+                    React.createElement(Card_1.Card.Body, { className: "twa:p-2" },
+                        React.createElement(Tabs_1.Tabs, { className: "twa:flex-1 twa:min-h-0" },
+                            React.createElement(Tabs_1.Tabs.Tab, { value: "pinned-toolbars" }, "Pinned Toolbars"),
+                            React.createElement(Tabs_1.Tabs.Tab, { value: "tabbed-toolbars" }, "Tabbed Toolbars"),
+                            React.createElement(Tabs_1.Tabs.Tab, { value: "buttons" }, "Buttons"),
+                            React.createElement(Tabs_1.Tabs.Content, { value: "pinned-toolbars", className: contentCls },
+                                React.createElement(PinnedToolbarsSelector_1.PinnedToolbarsSelector, null)),
+                            React.createElement(Tabs_1.Tabs.Content, { value: "tabbed-toolbars", className: contentCls },
+                                React.createElement(DashboardManager_1.default, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
+                            React.createElement(Tabs_1.Tabs.Content, { value: "buttons", className: contentCls },
+                                React.createElement(ModuleValueSelector_1.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

@@ -6,21 +6,21 @@ const DashboardRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers
 const React = tslib_1.__importStar(require("react"));
 const CheckBox_1 = require("../../components/CheckBox");
 const react_redux_1 = require("react-redux");
-const rebass_1 = require("rebass");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
+const Flex_1 = require("../../components/Flex");
 class DashboardViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
     }
     render() {
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Dashboard__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+        return (React.createElement(Flex_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Dashboard__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             ' ',
-            ArrayExtensions_1.default.IsNotNullOrEmpty(this.props.api.dashboardApi.getDashboardState().Tabs) && (React.createElement(CheckBox_1.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_1.default.IsNotNullOrEmpty(this.props.api.dashboardApi.getDashboardState().Tabs) && (React.createElement(CheckBox_1.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_1.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_1.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_1.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_1.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

@@ -4,9 +4,9 @@ exports.PinnedDashboard = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
-const rebass_1 = require("rebass");
 const AdaptableContext_1 = require("../AdaptableContext");
 const DashboardToolbarFactory_1 = require("./DashboardToolbarFactory");
+const Flex_1 = require("../../components/Flex");
 const PinnedDashboard = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const dashboardState = (0, react_redux_1.useSelector)((state) => state.Dashboard);
@@ -15,9 +15,9 @@ const PinnedDashboard = (props) => {
     if (!pinnedToolbars || pinnedToolbars.length == 0) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(rebass_1.Flex, { p: 1, className: "ab-Dashboard__pinned" }, pinnedToolbars.map((toolbar, index) => {
-        return (React.createElement(rebass_1.Box, { key: index, mr: 1, mb: 1, className: `ab-Dashboard__pinned-container ab-Dashboard__pinned-container--${toolbar}` },
-            React.createElement(rebass_1.Box, { className: "ab-Dashboard__toolbar-content" },
+    return (React.createElement(Flex_1.Flex, { className: "ab-Dashboard__pinned twa:p-1" }, pinnedToolbars.map((toolbar, index) => {
+        return (React.createElement(Flex_1.Box, { key: index, className: `twa:mr-1 twa:mb-1 ab-Dashboard__pinned-container ab-Dashboard__pinned-container--${toolbar}` },
+            React.createElement(Flex_1.Box, { className: "ab-Dashboard__toolbar-content" },
                 React.createElement(DashboardToolbarFactory_1.DashboardToolbarFactory, { toolbarName: toolbar }))));
     })));
 };

package/src/View/Dashboard/PinnedToolbarsSelector.js

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