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

package/src/View/Components/ToolPanel/AdaptableToolPanel.d.ts

@@ -25,7 +25,7 @@ export declare const ConnectedAdaptableToolPanel: import("react-redux").Connecte
     api: AdaptableApi;
     teamSharingActivated?: boolean;
     context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction>>;
-    store?: import("redux").Store<any, import("redux").UnknownAction, unknown>;
+    store?: import("redux").Store;
 }>;
 export declare const getAdaptableToolPanelAgGridComponent: (adaptable: IAdaptable) => (() => React.JSX.Element) | {
     new (): {

package/src/View/Components/ToolPanel/AdaptableToolPanel.js

@@ -6,7 +6,6 @@ const React = tslib_1.__importStar(require("react"));
 const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
 const ToolPanelRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ToolPanelRedux"));
 const react_redux_1 = require("react-redux");
-const rebass_1 = require("rebass");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
 const icons_1 = require("../../../components/icons");
 const CheckBox_1 = require("../../../components/CheckBox");
@@ -20,6 +19,7 @@ const ToolPanelPopup_1 = require("./ToolPanelPopup");
 const uuid_1 = require("../../../components/utils/uuid");
 const ModuleConstants_1 = require("../../../Utilities/Constants/ModuleConstants");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
+const Flex_1 = require("../../../components/Flex");
 const preventDefault = (e) => e.preventDefault();
 const AdaptableToolPanelComponent = (props) => {
     const toolPanelsGlyph = React.createElement(icons_1.Icon, { name: 'align-justify' });
@@ -29,7 +29,7 @@ const AdaptableToolPanelComponent = (props) => {
     const settingsPanelOptions = adaptableOptions.settingsPanelOptions;
     if (props.api.entitlementApi.isModuleHiddenEntitlement('ToolPanel')) {
         // do NOT show any toolPanel content if the required entitlements are missing
-        return (React.createElement(HelpBlock_1.default, { mt: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } }, "Not enough rights"));
+        return React.createElement(HelpBlock_1.default, { className: "twa:my-2 twa:p-2 twa:text-3" }, "Not enough rights");
     }
     const availableModuleItems = props.MainMenuItems.filter((menuItem) => menuItem.isVisible);
     const availableModules = availableModuleItems.map((menuItem) => menuItem.category);
@@ -96,7 +96,7 @@ const AdaptableToolPanelComponent = (props) => {
                 onClick: () => {
                     onSetToolPanelVisibility(toolPanel, !isVisible);
                 },
-                label: (React.createElement(CheckBox_1.CheckBox, { className: "ab-dd-checkbox", variant: "agGrid", my: 0, as: "div", value: toolPanel, key: toolPanel, checked: isVisible, onMouseDown: preventDefault }, toolPanel)),
+                label: (React.createElement(CheckBox_1.CheckBox, { className: "ab-dd-checkbox twa:my-0", variant: "agGrid", as: "div", value: toolPanel, key: toolPanel, checked: isVisible, onMouseDown: preventDefault }, toolPanel)),
             };
         };
         // 1. process custom tool panels
@@ -173,22 +173,23 @@ const AdaptableToolPanelComponent = (props) => {
         const moduleParams = initialTab
             ? { source: 'Other', config: { initialTab } }
             : undefined;
-        return (React.createElement(ButtonConfigure_1.ButtonConfigure, { iconSize: 16, tone: "none", marginLeft: 2, className: "ab-ToolPanel__configure-button", tooltip: 'Configure ToolPanels', onClick: () => {
+        return (React.createElement(ButtonConfigure_1.ButtonConfigure, { iconSize: 16, tone: "none", className: "ab-ToolPanel__configure-button twa:ml-2", tooltip: 'Configure ToolPanels', onClick: () => {
                 props.api.internalApi.showSettingsPanel('ToolPanel', moduleParams);
             } }));
     };
     const toolPanelButtons = renderToolPanelButtons();
-    return (React.createElement(rebass_1.Flex, { className: "ab-ToolPanel", "data-name": "adaptable-tool-panel", flexDirection: "column", justifyContent: "center", padding: 2, style: {
-            width: '100%',
-            // Cannot have the with of the parent, on windows, when you have scrollbars
-            // the inner-width is smaller
-            // minWidth: 'var(--ab-cmp-toolpanel__width)',
-        } },
-        React.createElement(rebass_1.Flex, { className: "ab-ToolPanel__header", flexDirection: "row", justifyContent: "left", padding: 1, flexWrap: "wrap", style: { width: '100%' } },
+    return (React.createElement(Flex_1.Flex // Cannot have the with of the parent, on windows, when you have scrollbars
+    // the inner-width is smaller
+    // minWidth: 'var(--ab-cmp-toolpanel__width)',
+    , { 
+        // the inner-width is smaller
+        // minWidth: 'var(--ab-cmp-toolpanel__width)',
+        className: "ab-ToolPanel twa:p-2 twa:w-full", "data-name": "adaptable-tool-panel", flexDirection: "column", justifyContent: "center" },
+        React.createElement(Flex_1.Flex, { className: "ab-ToolPanel__header twa:p-1 twa:w-full twa:justify-start", flexDirection: "row", flexWrap: "wrap" },
             isToolPanelModuleConfigurable && renderToolPanelDropdowns(),
             toolPanelButtons,
             isToolPanelModuleConfigurable && renderToolPanelConfigureButton()),
-        Boolean(props.api.toolPanelApi.getCustomToolPanelButtons().length) && (React.createElement(rebass_1.Flex, { className: "ab-ToolPanel__header__buttons", flexDirection: "row", justifyContent: "left", padding: 1, flexWrap: "wrap" }, renderCustomToolPanelButtons())),
+        Boolean(props.api.toolPanelApi.getCustomToolPanelButtons().length) && (React.createElement(Flex_1.Flex, { className: "ab-ToolPanel__header__buttons twa:p-1 twa:justify-start", flexDirection: "row", flexWrap: "wrap" }, renderCustomToolPanelButtons())),
         visibleToolPanelControls));
 };
 function mapStateToProps(state) {

package/src/View/Components/ToolPanel/ToolPanelPopup.d.ts

@@ -25,6 +25,6 @@ declare class ToolPanelPopupComponent extends React.Component<ToolPanelPopupComp
 }
 export declare let ToolPanelPopup: import("react-redux").ConnectedComponent<typeof ToolPanelPopupComponent, {
     context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction>>;
-    store?: import("redux").Store<any, import("redux").UnknownAction, unknown>;
+    store?: import("redux").Store;
 }>;
 export {};

package/src/View/Components/ToolPanel/ToolPanelPopup.js

@@ -11,6 +11,7 @@ const Types_1 = require("../../../AdaptableState/Common/Types");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
 const ModuleValueSelector_1 = require("../ModuleValueSelector");
 const Tabs_1 = require("../../../components/Tabs");
+const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
 var ToolPanelConfigView;
 (function (ToolPanelConfigView) {
     ToolPanelConfigView["Buttons"] = "Buttons";
@@ -68,16 +69,18 @@ class ToolPanelPopupComponent extends React.Component {
             }
             return false;
         };
-        return (React.createElement(PopupPanel_1.PopupPanel, { headerText: "Tool Panel", glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
-            React.createElement(Tabs_1.Tabs, { "data-name": 'toolPanelPopup-component', className: "ab-ToolPanelPopup", value: this.state.ToolPanelConfigView, style: { height: '100%' }, onValueChange: (value) => this.setState({ ToolPanelConfigView: value }) },
-                React.createElement(Tabs_1.Tabs.Tab, { value: ToolPanelConfigView.ToolPanels },
-                    React.createElement(Radio_1.default, { margin: 0, value: ToolPanelConfigView.ToolPanels, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.ToolPanels, tabIndex: -1 }, "Tool Panels")),
-                React.createElement(Tabs_1.Tabs.Tab, { value: ToolPanelConfigView.Buttons },
-                    React.createElement(Radio_1.default, { margin: 0, value: ToolPanelConfigView.Buttons, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.Buttons, tabIndex: -1 }, "Module Buttons")),
-                React.createElement(Tabs_1.Tabs.Content, { value: ToolPanelConfigView.ToolPanels, style: { flex: 1, overflow: 'auto' } },
-                    React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: availableToolPanels, value: selectedToolPanels, noSelectionLabel: 'No selected Tool Panel', xSelectedLabel: () => `Visible Tool Panels:`, onChange: (selectedValues) => this.onToolPanelToolPanelsChanged(selectedValues), disabled: isToolPanelReadOnly })),
-                React.createElement(Tabs_1.Tabs.Content, { value: ToolPanelConfigView.Buttons, style: { flex: 1, overflow: 'auto' } },
-                    React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', xSelectedLabel: () => `Visible Module Buttons:`, isOptionDisabled: isModuleCheckboxDisabled, disabled: isToolPanelReadOnly, onChange: (selectedValues) => this.props.onToolPanelSetModuleButtons(selectedValues) })))));
+        return (React.createElement(PopupPanel_1.PopupPanel, { headerText: "Tool Panel", glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), scrollable: false },
+            React.createElement(Panel_1.default, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
+                React.createElement(Panel_1.default.FlexBody, null,
+                    React.createElement(Tabs_1.Tabs, { "data-name": 'toolPanelPopup-component', className: "ab-ToolPanelPopup twa:min-h-0 twa:flex-1", value: this.state.ToolPanelConfigView, onValueChange: (value) => this.setState({ ToolPanelConfigView: value }) },
+                        React.createElement(Tabs_1.Tabs.Tab, { value: ToolPanelConfigView.ToolPanels },
+                            React.createElement(Radio_1.default, { className: "twa:m-0", value: ToolPanelConfigView.ToolPanels, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.ToolPanels, tabIndex: -1 }, "Tool Panels")),
+                        React.createElement(Tabs_1.Tabs.Tab, { value: ToolPanelConfigView.Buttons },
+                            React.createElement(Radio_1.default, { className: "twa:m-0", value: ToolPanelConfigView.Buttons, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.Buttons, tabIndex: -1 }, "Module Buttons")),
+                        React.createElement(Tabs_1.Tabs.Content, { value: ToolPanelConfigView.ToolPanels, style: { flex: 1, overflow: 'auto' } },
+                            React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: availableToolPanels, value: selectedToolPanels, onChange: (selectedValues) => this.onToolPanelToolPanelsChanged(selectedValues), disabled: isToolPanelReadOnly })),
+                        React.createElement(Tabs_1.Tabs.Content, { value: ToolPanelConfigView.Buttons, style: { flex: 1, overflow: 'auto' } },
+                            React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, isOptionDisabled: isModuleCheckboxDisabled, disabled: isToolPanelReadOnly, onChange: (selectedValues) => this.props.onToolPanelSetModuleButtons(selectedValues) })))))));
     }
     onShowGridPropertiesChanged(event) {
         let e = event.target;

package/src/View/Components/ToolPanel/ToolPanelWrapper.js

@@ -6,11 +6,11 @@ const React = tslib_1.__importStar(require("react"));
 const AdaptableContext_1 = require("../../AdaptableContext");
 const AdaptableViewFactory_1 = require("../../AdaptableViewFactory");
 const CustomToolPanelContent_1 = require("./CustomToolPanelContent");
-const rebass_1 = require("rebass");
 const ToolPanelRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ToolPanelRedux"));
 const PanelToolPanel_1 = require("../Panels/PanelToolPanel");
 const PopupRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/PopupRedux"));
 const ModuleConstants_1 = require("../../../Utilities/Constants/ModuleConstants");
+const Flex_1 = require("../../../components/Flex");
 const ToolPanelWrapper = (props) => {
     const { adaptableToolPanel, customToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: onVisibilityModeChange, } = props;
     const { api } = (0, AdaptableContext_1.useAdaptable)();
@@ -46,7 +46,7 @@ const ToolPanelWrapper = (props) => {
         .getModuleService()
         .getModuleById(ModuleConstants_1.ToolPanelModuleId)
         .isModuleEditable();
-    return (React.createElement(React.Fragment, null, toolPanelContent && (React.createElement(rebass_1.Box, { marginTop: 1, className: `ab-ToolPanel__container ab-ToolPanel__container--${toolPanelName}` },
+    return (React.createElement(React.Fragment, null, toolPanelContent && (React.createElement(Flex_1.Box, { className: `twa:mt-1 ab-ToolPanel__container ab-ToolPanel__container--${toolPanelName}` },
         React.createElement(PanelToolPanel_1.PanelToolPanel, { className: `ab-ToolPanel__${toolPanelName}`, "data-name": `ab-ToolPanel__${toolPanelName}`, headerText: toolPanelHeader, disabled: !isToolPanelModuleConfigurable, onMinimiseChanged: () => {
                 onVisibilityModeChange(isMinimised ? 'expanded' : 'collapsed');
             }, isMinimised: isMinimised, onConfigure: isConfigurable

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();