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

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/ExternalChartingWizard.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExternalChartingWizard = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const SettingsSection_1 = require("./SettingsSection");
+const Flex_1 = require("../../../../components/Flex");
 const PreviewChartSection = ({ chartDefinition }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const divRef = React.useRef(null);
@@ -40,14 +40,14 @@ const ExternalChartingWizard = (props) => {
                 title: 'Settings',
                 details: 'Chart Settings',
                 isValid: SettingsSection_1.isSettingsValid,
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(SettingsSection_1.SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }))),
             },
             onPreviewChart
                 ? {
                     title: 'Preview Chart',
                     render: () => {
-                        return (React.createElement(rebass_1.Box, { padding: 2 },
+                        return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                             React.createElement(PreviewChartSection, { chartDefinition: chartDefinition })));
                     },
                 }

package/src/View/Charting/useChartingElements.d.ts

@@ -4,7 +4,7 @@ import { AccessLevel, ChartDefinition } from '../../types';
 export declare const useChartingElements: ({ elementType, accessLevel, size, }: {
     elementType: string;
     accessLevel: AccessLevel;
-    size?: 'small' | 'normal';
+    size?: "small" | "normal";
 }) => {
     chartSelector: React.JSX.Element;
     containerSelector: React.JSX.Element;

package/src/View/Charting/useChartingElements.js

@@ -89,7 +89,7 @@ const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) =>
                 setSelectedContainer(chartContainers.find((containerOption) => containerOption.name === containerName));
             }
         }, options: containerOptions, placeholder: "Select Container" }));
-    const chartButton = (React.createElement(SimpleButton_1.default, { style: style, mr: 1, onClick: () => (isOpen ? hideChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'text', tone: 'neutral', icon: isOpen ? 'visibility-off' : 'visibility-on', tooltip: isOpen ? 'Hide Chart' : 'Show Chart' }));
+    const chartButton = (React.createElement(SimpleButton_1.default, { style: style, className: "twa:mr-1", onClick: () => (isOpen ? hideChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'text', tone: 'neutral', icon: isOpen ? 'visibility-off' : 'visibility-on', tooltip: isOpen ? 'Hide Chart' : 'Show Chart' }));
     const deleteButton = (React.createElement(DeleteChartButton_1.DeleteChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel }));
     const editButton = (React.createElement(EditChartButton_1.EditChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel, isOpen: isOpen }));
     return {

package/src/View/ColumnInfo/ColumnInfo.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnInfo = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
 const InfiniteTable_1 = require("../../components/InfiniteTable");
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
@@ -13,12 +12,10 @@ const AdaptableObjectList_1 = require("../Components/AdaptableObjectList");
 const ButtonNew_1 = require("../Components/Buttons/ButtonNew");
 const ColumnSelector_1 = require("../Components/Selectors/ColumnSelector");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
+const Flex_1 = require("../../components/Flex");
 const BASE_CLASS_NAME = 'ab-AdaptableColumns';
 const domProps = {
-    style: {
-        height: '460px',
-        width: '100%',
-    },
+    className: 'twa:flex-1 twa:min-h-0 twa:w-full',
 };
 // TODOS:
 // - use column from props as initial value
@@ -203,10 +200,10 @@ const ModuleView = (props) => {
         setIsWizardOpen(false);
     }, []);
     // filter out items with scope
-    return (React.createElement(rebass_1.Box, { "data-name": module.moduleInfo.ModuleName, className: `${BASE_CLASS_NAME}__module-list`, key: module.moduleInfo.ModuleName, mb: 4 },
-        React.createElement(rebass_1.Flex, null,
+    return (React.createElement(Flex_1.Box, { "data-name": module.moduleInfo.ModuleName, className: `${BASE_CLASS_NAME}__module-list twa:mb-4`, key: module.moduleInfo.ModuleName },
+        React.createElement(Flex_1.Flex, null,
             React.createElement("b", { className: `${BASE_CLASS_NAME}__header` }, module.moduleInfo.FriendlyName),
-            React.createElement(rebass_1.Box, { flex: 1 }),
+            React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
             React.createElement(ButtonNew_1.ButtonNew, { onClick: () => setIsWizardOpen(true) }, "New")),
         itemsInScope?.length ? React.createElement(AdaptableObjectList_1.AdaptableObjectList, { items: itemsInScope, module: module }) : null,
         isWizardOpen && EditWizard && (React.createElement(EditWizard, { popupParams: {
@@ -219,19 +216,17 @@ const ColumnInfo = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const [selectedColumnId, setSelectedColumnId] = React.useState(props.selectedColumnId);
     const column = adaptable.api.columnApi.getColumnWithColumnId(selectedColumnId);
-    return (React.createElement(Panel_1.default, { flex: 1 },
-        React.createElement(rebass_1.Box, { mb: 3 },
+    return (React.createElement(Panel_1.default, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
+        React.createElement(Panel_1.default.FlexBody, { className: "twa:gap-3" },
             React.createElement(FormLayout_1.default, null,
                 React.createElement(FormLayout_1.FormRow, { label: "Select Column" },
-                    React.createElement(ColumnSelector_1.ColumnSelector, { value: selectedColumnId, onChange: (columnId) => setSelectedColumnId(columnId) })))),
-        selectedColumnId && (React.createElement(Tabs_1.Tabs, { mb: 3 },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Column Summary"),
-            React.createElement(Tabs_1.Tabs.Tab, null, "Column State"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Flex, { flex: 1 }, selectedColumnId && React.createElement(ColumnDefPreview, { column: column }))),
-            ' ',
-            React.createElement(Tabs_1.Tabs.Content, null, selectedColumnId && (React.createElement(rebass_1.Box, { className: BASE_CLASS_NAME }, MODULES_WITH_COLUMN.map((moduleName) => {
-                return (React.createElement(ModuleView, { key: moduleName, moduleName: moduleName, selectedColumnId: selectedColumnId }));
-            }))))))));
+                    React.createElement(ColumnSelector_1.ColumnSelector, { value: selectedColumnId, onChange: (columnId) => setSelectedColumnId(columnId) }))),
+            selectedColumnId && (React.createElement(Tabs_1.Tabs, { className: "twa:min-h-0 twa:flex-1" },
+                React.createElement(Tabs_1.Tabs.Tab, null, "Column Summary"),
+                React.createElement(Tabs_1.Tabs.Tab, null, "Column State"),
+                React.createElement(Tabs_1.Tabs.Content, null, selectedColumnId && React.createElement(ColumnDefPreview, { column: column })),
+                React.createElement(Tabs_1.Tabs.Content, null, selectedColumnId && (React.createElement(Flex_1.Box, { className: BASE_CLASS_NAME }, MODULES_WITH_COLUMN.map((moduleName) => {
+                    return (React.createElement(ModuleView, { key: moduleName, moduleName: moduleName, selectedColumnId: selectedColumnId }));
+                })))))))));
 };
 exports.ColumnInfo = ColumnInfo;

package/src/View/ColumnInfo/ColumnInfoPopup.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnInfoPopup = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
 const ColumnInfo_1 = require("./ColumnInfo");
+const Flex_1 = require("../../components/Flex");
 const ColumnInfoPopup = (props) => {
     return (React.createElement(PopupPanel_1.PopupPanel, { headerText: 'Column Info', glyphicon: 'info' },
-        React.createElement(rebass_1.Flex, { flexDirection: "column", flex: 1, height: "100%" },
+        React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:flex-1 twa:h-full twa:[--ab-grid-row-height:45px]" },
             React.createElement(ColumnInfo_1.ColumnInfo, { selectedColumnId: props.popupParams?.column?.columnId }))));
 };
 exports.ColumnInfoPopup = ColumnInfoPopup;

package/src/View/Comments/CommentsEditor.js

@@ -4,7 +4,6 @@ exports.CommentsEditor = 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 icons_1 = require("../../components/icons");
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
@@ -13,6 +12,7 @@ const InternalRedux_1 = require("../../Redux/ActionsReducers/InternalRedux");
 const AdaptableContext_1 = require("../AdaptableContext");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../Components/AdaptableInput"));
 const FormatHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/FormatHelper"));
+const Flex_1 = require("../../components/Flex");
 // Edit Mode
 // [author] [edit, delete]
 // [text-editor] * this is different
@@ -55,21 +55,18 @@ const CommentsEditor = (props) => {
     const formatDate = (date, format) => {
         return FormatHelper_1.default.DateFormatter(date, { Pattern: format });
     };
-    return (React.createElement(Panel_1.default, { color: "var(--ab-color-text-on-primary)", onClick: () => props.enableEditMode(), minWidth: 250, className: "ab-CommentPopup", onKeyDown: (event) => {
+    return (React.createElement(Panel_1.default, { color: "var(--ab-color-text-on-primary)", onClick: () => props.enableEditMode(), className: "ab-CommentPopup twa:min-w-[250px]", onKeyDown: (event) => {
             if (event.key === 'Escape') {
                 api.commentApi.hideCommentsPopup();
             }
         } },
-        showCloseButton && (React.createElement(rebass_1.Flex, null,
-            React.createElement(rebass_1.Box, { flex: 1 }),
+        showCloseButton && (React.createElement(Flex_1.Flex, null,
+            React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
             React.createElement(SimpleButton_1.default, { onClick: (event) => {
                     event.stopPropagation();
                     api.commentApi.hideCommentsPopup();
                 }, variant: "text", icon: "close" }))),
-        React.createElement(rebass_1.Flex, { style: {
-                overflow: 'auto',
-                maxHeight: 300,
-            }, flexDirection: "column", ref: commentsWrapperRef }, comments &&
+        React.createElement(Flex_1.Flex, { className: "twa:overflow-auto twa:max-h-[300px]", flexDirection: "column", ref: commentsWrapperRef }, comments &&
             comments.length > 0 &&
             comments.map((comment, index) => {
                 if (!comment) {
@@ -78,12 +75,12 @@ const CommentsEditor = (props) => {
                 const isOwnComment = comment?.Author?.UserName
                     ? comment?.Author?.UserName === userId
                     : true; // no owner means it's the current user
-                return (React.createElement(rebass_1.Box, { p: 2, key: comment.Uuid ?? index, className: "ab-Comment" },
-                    React.createElement(rebass_1.Flex, { mb: 2, alignItems: "center" },
-                        React.createElement(rebass_1.Box, null,
-                            React.createElement(rebass_1.Box, { "data-name": "comment-username", fontSize: 3, fontWeight: "bold" }, comment?.Author?.UserName),
-                            comment.Timestamp && (React.createElement(rebass_1.Box, { "data-name": "comment-timestamp", fontSize: 2 }, formatDate(comment.Timestamp, api.commentApi.internalApi.getCommentsDateFormat())))),
-                        React.createElement(rebass_1.Box, { flex: 1 }),
+                return (React.createElement(Flex_1.Box, { key: comment.Uuid ?? index, className: "ab-Comment twa:p-2" },
+                    React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:mb-2" },
+                        React.createElement(Flex_1.Box, null,
+                            React.createElement(Flex_1.Box, { "data-name": "comment-username", className: "twa:text-3 twa:font-bold" }, comment?.Author?.UserName),
+                            comment.Timestamp && (React.createElement(Flex_1.Box, { "data-name": "comment-timestamp", className: "twa:text-2" }, formatDate(comment.Timestamp, api.commentApi.internalApi.getCommentsDateFormat())))),
+                        React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
                         React.createElement(SimpleButton_1.default, { variant: "text", icon: "edit", disabled: !isOwnComment || isReadOnlyModule, onClick: () => setActiveEditingComment(comment.Uuid) }),
                         React.createElement(SimpleButton_1.default, { variant: "text", icon: "delete", disabled: !isOwnComment || isReadOnlyModule, onClick: () => {
                                 api.commentApi.deleteComment(comment, cellAddress);
@@ -91,7 +88,7 @@ const CommentsEditor = (props) => {
                                     props.onRefreshContent();
                                 });
                             } })),
-                    React.createElement(rebass_1.Box, { onClick: () => setActiveEditingComment(comment.Uuid) }, comment.Uuid === activeEditingComment ? (React.createElement(AdaptableInput_1.default, { autoFocus: true, width: "100%", defaultValue: comment.Value, disabled: isReadOnlyModule, onBlur: () => {
+                    React.createElement(Flex_1.Box, { onClick: () => setActiveEditingComment(comment.Uuid) }, comment.Uuid === activeEditingComment ? (React.createElement(AdaptableInput_1.default, { autoFocus: true, className: "twa:w-full", defaultValue: comment.Value, disabled: isReadOnlyModule, onBlur: () => {
                             if (comment.Uuid === activeEditingComment) {
                                 setActiveEditingComment(null);
                             }
@@ -100,7 +97,7 @@ const CommentsEditor = (props) => {
                                 ...comment,
                                 Value: event.target.value,
                             }, cellAddress);
-                        } })) : (React.createElement(rebass_1.Text, { "data-name": "comment-text" }, comment.Value)))));
+                        } })) : (React.createElement(Flex_1.Box, { "data-name": "comment-text" }, comment.Value)))));
             })),
         React.createElement(AdaptableInput_1.default, { autoFocus: !comments || comments.length === 0, value: newCommentText, disabled: isReadOnlyModule, onChange: (event) => {
                 setNewCommentText(event.target.value);
@@ -113,12 +110,12 @@ const CommentsEditor = (props) => {
                         scrollToBottom();
                     });
                 }
-            }, mt: 2, mb: "2", width: "100%", placeholder: "Write new Comment" }),
-        React.createElement(SimpleButton_1.default, { width: "100%", variant: "raised", onClick: () => {
+            }, className: "twa:w-full twa:my-2", placeholder: "Write new Comment" }),
+        React.createElement(SimpleButton_1.default, { className: "twa:w-full", variant: "raised", onClick: () => {
                 api.settingsPanelApi.openSettingsPanel('Comment');
                 api.internalApi.getAnnotationsService().hidePopup();
             } },
-            React.createElement(rebass_1.Box, { mr: 2 },
+            React.createElement(Flex_1.Box, { className: "twa:mr-2" },
                 React.createElement(icons_1.Icon, { name: "folder" })),
             ' ',
             "Open all Comments")));

package/src/View/Comments/CommentsPopup.js

@@ -6,11 +6,11 @@ const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const InfiniteTable_1 = require("../../components/InfiniteTable");
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
-const rebass_1 = require("rebass");
 const AdaptableContext_1 = require("../AdaptableContext");
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
 const AdaptableButton_1 = require("../Components/AdaptableButton");
 const FormatHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/FormatHelper"));
+const Flex_1 = require("../../components/Flex");
 const tableDOMProps = {
     style: {
         minHeight: 160,
@@ -61,23 +61,23 @@ const CellComments = (props) => {
         return adaptable.api.columnApi.getFriendlyNameForColumnId(primaryKey);
     }, []);
     const columnFriendlyName = adaptable.api.columnApi.getFriendlyNameForColumnId(props.commentThread.ColumnId);
-    return (React.createElement(Panel_1.default, { mb: 2, header: React.createElement(rebass_1.Flex, { width: "100%", alignItems: "center" },
-            React.createElement(rebass_1.Box, { mr: 2 },
+    return (React.createElement(Panel_1.default, { className: "twa:mb-2", header: React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:w-full" },
+            React.createElement(Flex_1.Box, { className: "twa:mr-2" },
                 React.createElement("b", null, "Cell Value:"),
                 " ",
                 cellValue),
-            React.createElement(rebass_1.Box, { mr: 2 },
+            React.createElement(Flex_1.Box, { className: "twa:mr-2" },
                 React.createElement("b", null,
                     primaryKeyHeader,
                     ":"),
                 " ",
                 props.commentThread.PrimaryKeyValue),
-            React.createElement(rebass_1.Box, null,
+            React.createElement(Flex_1.Box, null,
                 React.createElement("b", null, "Column:"),
                 " ",
                 columnFriendlyName),
-            React.createElement(rebass_1.Box, { flex: 1 }),
-            React.createElement(AdaptableButton_1.AdaptableButtonComponent, { mr: 1, variant: "text", icon: "visibility-on", onClick: () => {
+            React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
+            React.createElement(AdaptableButton_1.AdaptableButtonComponent, { className: "twa:mr-1", variant: "text", icon: "visibility-on", onClick: () => {
                     adaptable.api.internalApi.getAnnotationsService().showPopup({
                         ColumnId: props.commentThread.ColumnId,
                         PrimaryKeyValue: props.commentThread.PrimaryKeyValue,

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

@@ -6,7 +6,7 @@ const Datepicker_1 = require("../../../components/Datepicker");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const useProperty_1 = tslib_1.__importDefault(require("../../../components/utils/useProperty"));
 const DateHelper_1 = require("../../../Utilities/Helpers/DateHelper");
-const AdaptableDateInput = React.forwardRef((props, ref) => {
+const AdaptableDateInput = React.forwardRef(function AdaptableDateInputCmp(props, ref) {
     const dateInputOptions = (0, AdaptableContext_1.useAdaptable)().adaptableOptions.userInterfaceOptions.dateInputOptions;
     const { value: _, defaultValue: __, onChange, required, disabled, showClearButton, ...inputProps } = props;
     const [value, setValue] = (0, useProperty_1.default)(props, 'value', undefined, {

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

@@ -7,13 +7,14 @@ const AdaptableContext_1 = require("../../AdaptableContext");
 const AdaptableDateInput_1 = tslib_1.__importDefault(require("../AdaptableDateInput"));
 const AdaptableInput = React.forwardRef((props, ref) => {
     const useNativeInputDate = (0, AdaptableContext_1.useAdaptable)().adaptableOptions.userInterfaceOptions?.dateInputOptions?.useNativeInput;
+    const { showClearButton, ...inputProps } = props;
     if (props.type === 'date' && !useNativeInputDate) {
         // use AdapTable date input
-        return React.createElement(AdaptableDateInput_1.default, { ...props, ref: ref });
+        return (React.createElement(AdaptableDateInput_1.default, { showClearButton: showClearButton, ...inputProps, ref: ref }));
     }
     else {
         // native input
-        return React.createElement(Input_1.default, { ...props, ref: ref });
+        return React.createElement(Input_1.default, { ...inputProps, ref: ref });
     }
 });
 exports.default = AdaptableInput;

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { IColItem } from '../../UIInterfaces';
-import { BoxProps } from 'rebass';
+import { BoxProps } from '../../../components/Flex';
 export interface AdaptableObjectCollectionProps extends BoxProps {
+    className?: string;
     colItems: IColItem[];
     items: any[];
     allowOverflow?: boolean;
     style?: React.CSSProperties;
-    headerAlign?: string;
 }
 export declare const AdaptableObjectCollection: React.FunctionComponent<AdaptableObjectCollectionProps>;

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

@@ -5,11 +5,15 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 /// <reference path="../../typings/.d.ts" />
 const PanelWithRow_1 = require("../Panels/PanelWithRow");
-const rebass_1 = require("rebass");
+const Flex_1 = require("../../../components/Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const twMerge_1 = require("../../../twMerge");
 const AdaptableObjectCollection = (props) => {
-    const allowOverflow = props.allowOverflow ? 'visible' : 'auto';
-    return (React.createElement(rebass_1.Box, { style: { ...props.style }, className: "ab-ObjectCollection" },
-        React.createElement(PanelWithRow_1.PanelWithRow, { border: "none", colItems: props.colItems, headerAlign: props.headerAlign }),
-        React.createElement("div", { className: "ab-ObjectCollection__items", style: { overflowY: allowOverflow, boxShadow: 'none' } }, props.items)));
+    return (React.createElement(Flex_1.Box, { style: props.style, className: (0, twMerge_1.twMerge)('ab-ObjectCollection twa:flex twa:flex-col', props.className) },
+        React.createElement(PanelWithRow_1.PanelWithRow, { border: "none", colItems: props.colItems }),
+        React.createElement("div", { className: (0, clsx_1.default)('ab-ObjectCollection__items twa:shadow-none twa:flex-1', {
+                'twa:overflow-y-visible': props.allowOverflow,
+                'twa:overflow-y-auto': !props.allowOverflow,
+            }) }, props.items)));
 };
 exports.AdaptableObjectCollection = AdaptableObjectCollection;

package/src/View/Components/AdaptableObjectList/AdaptableObjectCompactList.js

@@ -4,10 +4,10 @@ exports.AdaptableObjectCompactList = exports.AdaptableObjectCompactListItem = vo
 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 SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const AdaptableContext_1 = require("../../AdaptableContext");
-const ValueSelector_1 = require("../ValueSelector");
+const Flex_1 = require("../../../components/Flex");
+const Tag_1 = require("../../../components/Tag/Tag");
 const baseClassName = 'ab-Adaptable-Object-Compact-List';
 const ICON_SIZE = 20;
 const AdaptableObjectCompactListItem = (props) => {
@@ -40,18 +40,18 @@ const AdaptableObjectCompactListItem = (props) => {
         labelEl = React.createElement(labelEl, { data: props.abObject });
     }
     labelEl = labelEl ?? objectView.item.name;
-    return (React.createElement(rebass_1.Flex, { className: `${baseClassName}__Item`, alignItems: "center" },
-        labelEl && (React.createElement(rebass_1.Flex, { flex: '1 1 auto', className: `${baseClassName}__Item__Name` }, labelEl)),
-        React.createElement(rebass_1.Box, { flex: '2 1 auto' },
+    return (React.createElement(Flex_1.Flex, { className: `${baseClassName}__Item`, alignItems: "center" },
+        labelEl && (React.createElement(Flex_1.Flex, { className: `${baseClassName}__Item__Name twa:flex-[1_1_auto]` }, labelEl)),
+        React.createElement(Flex_1.Box, { className: "twa:flex-[2_1_auto]" },
             typeof objectView.item.view === 'function'
                 ? React.createElement(objectView.item.view, {
                     data: props.abObject,
                 })
                 : objectView.item.view,
-            Boolean(objectView.item?.values && objectView.item?.values?.length) && (React.createElement(rebass_1.Box, { mb: 2, className: `${baseClassName}__Item__Values` },
-                React.createElement(ValueSelector_1.ValueOptionsTags, { style: { marginRight: 0 }, readOnly: true, options: objectView.item.values, value: objectView.item.values, allowWrap: true, toIdentifier: (c) => c, toLabel: (c) => React.createElement(React.Fragment, null, c) })))),
+            Boolean(objectView.item?.values && objectView.item?.values?.length) && (React.createElement(Flex_1.Box, { className: `${baseClassName}__Item__Values` },
+                React.createElement(Tag_1.TagList, { tags: objectView.item.values.map(String) })))),
         suspendAction && unSuspendAction && (React.createElement(SimpleButton_1.default, { onMouseDown: handleSuspendUnSuspend, tone: isSuspended ? 'neutral' : 'success', variant: "text", icon: isSuspended ? 'resume' : 'pause' })),
-        React.createElement(rebass_1.Flex, { ml: 1, flex: '0 0 auto' }, deleteAction && (React.createElement(SimpleButton_1.default, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel })))));
+        React.createElement(Flex_1.Flex, { className: "twa:ml-1 twa:flex-[0_0_auto]" }, deleteAction && (React.createElement(SimpleButton_1.default, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel })))));
 };
 exports.AdaptableObjectCompactListItem = AdaptableObjectCompactListItem;
 const AdaptableObjectCompactList = (props) => {
@@ -75,13 +75,13 @@ const AdaptableObjectCompactList = (props) => {
             dispatch(unSuspendAllAction);
         }
     }, [isAtLeastOneAbObjectActive]);
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", className: baseClassName },
-        React.createElement(rebass_1.Flex, { className: `${baseClassName}__Header`, fontSize: 3 },
-            React.createElement(rebass_1.Flex, { className: `${baseClassName}__Title`, alignItems: 'center' }, props.module.moduleInfo.FriendlyName),
-            React.createElement(rebass_1.Box, { flex: 1 }),
-            suspendAllAction && unSuspendAllAction && (React.createElement(SimpleButton_1.default, { mr: 2, onMouseDown: handleSuspendUnsuspendAll, tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: accessLevel }, isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All')),
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: baseClassName },
+        React.createElement(Flex_1.Flex, { className: `${baseClassName}__Header twa:text-3` },
+            React.createElement(Flex_1.Flex, { className: `${baseClassName}__Title`, alignItems: 'center' }, props.module.moduleInfo.FriendlyName),
+            React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
+            suspendAllAction && unSuspendAllAction && (React.createElement(SimpleButton_1.default, { className: "twa:mr-2", onMouseDown: handleSuspendUnsuspendAll, tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: accessLevel }, isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All')),
             deleteAllAction && (React.createElement(SimpleButton_1.default, { onMouseDown: () => dispatch(deleteAllAction), variant: "raised", tone: "neutral", accessLevel: accessLevel }, "Clear All"))),
-        React.createElement(rebass_1.Box, { className: `${baseClassName}__Body` }, props.abObjects.map((abObject) => {
+        React.createElement(Flex_1.Box, { className: `${baseClassName}__Body` }, props.abObjects.map((abObject) => {
             return (React.createElement(exports.AdaptableObjectCompactListItem, { key: abObject.Uuid, abObject: abObject, module: props.module }));
         }))));
 };

package/src/View/Components/AdaptableObjectList/AdaptableObjectList.d.ts

@@ -43,12 +43,14 @@ interface AdaptableObjectListItemProps {
      */
     deleteDisabled?: boolean;
     deleteTooltip?: string;
+    className?: string;
 }
 export declare const AdaptableObjectListItem: React.FunctionComponent<AdaptableObjectListItemProps>;
 interface AdaptableObjectListProps {
     items: AdaptableObjectView[];
     module: IModule;
     itemProps?: Partial<AdaptableObjectListItemProps>;
+    className?: string;
 }
 export declare const AdaptableObjectList: React.FunctionComponent<AdaptableObjectListProps>;
 export {};

package/src/View/Components/AdaptableObjectList/AdaptableObjectList.js

@@ -4,17 +4,18 @@ exports.AdaptableObjectList = exports.AdaptableObjectListItem = exports.Adaptabl
 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 InternalRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/InternalRedux"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
 const AdaptableHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/AdaptableHelper"));
 const AdaptableContext_1 = require("../../AdaptableContext");
 const ButtonDelete_1 = require("../Buttons/ButtonDelete");
 const ButtonEdit_1 = require("../Buttons/ButtonEdit");
 const ButtonShare_1 = require("../Buttons/ButtonShare");
 const SuspendToggleButton_1 = require("../Buttons/SuspendToggleButton/SuspendToggleButton");
-const ValueSelector_1 = require("../ValueSelector");
+const Flex_1 = require("../../../components/Flex");
+const twMerge_1 = require("../../../twMerge");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const Tag_1 = require("../../../components/Tag/Tag");
 const ICON_SIZE = 26;
 const LIST_BASE_CLASS_NAME = 'ab-Adaptable-Object-List';
 const ITEM_BASE_CLASS_NAME = `${LIST_BASE_CLASS_NAME}__Item`;
@@ -37,25 +38,25 @@ const AdaptableObjectListItemView = (props) => {
         };
     }
     const deleteActionButton = React.createElement(ButtonDelete_1.ButtonDelete, { ...deleteActionProps });
-    return (React.createElement(rebass_1.Flex, { "data-name": "adaptable-object-list-item", "data-value": props.abObject.Uuid, as: "li", mb: 3, className: (0, join_1.default)(props.className, baseClassName), style: props.style },
-        React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__rows` }, props.items.filter?.(Boolean)?.map((tag, index) => {
+    return (React.createElement(Flex_1.Flex, { "data-name": "adaptable-object-list-item", "data-value": props.abObject.Uuid, as: "li", className: (0, twMerge_1.twMerge)(baseClassName, 'twa:rounded-standard', props.className), style: props.style },
+        React.createElement(Flex_1.Box, { className: `twa:flex-1 ${baseClassName}__rows twa:gap-2 twa:flex twa:flex-col` }, props.items.filter?.(Boolean)?.map((tag, index) => {
             const labelElement = typeof tag.label === 'function'
                 ? React.createElement(tag.label, { key: index, data: props.abObject })
                 : tag.label ?? tag.name;
-            return (React.createElement(rebass_1.Flex, { "data-name": tag.name, key: `${index}-${tag.name}`, mb: 2, className: `${baseClassName}__row` },
-                !tag.isLabelInline && (React.createElement(rebass_1.Box, { className: `${baseClassName}__label`, mr: 3 },
+            return (React.createElement(Flex_1.Flex, { "data-name": tag.name, key: `${index}-${tag.name}`, className: `${baseClassName}__row twa:gap-3` },
+                !tag.isLabelInline && (React.createElement(Flex_1.Box, { className: `${baseClassName}__label twa:flex twa:items-center twa:flex-row twa:text-nowrap` },
                     labelElement,
-                    props.showEditButton && (React.createElement(SimpleButton_1.default, { "data-name": `${tag.name}-edit-button`, accessLevel: props.accessLevel, className: `${baseClassName}__edit-property`, ml: 1, icon: "edit", tooltip: "edit", iconSize: 18, variant: "text", onClick: () => {
+                    props.showEditButton && (React.createElement(SimpleButton_1.default, { "data-name": `${tag.name}-edit-button`, accessLevel: props.accessLevel, className: `${baseClassName}__edit-property twa:ml-1`, icon: "edit", tooltip: "edit", iconSize: 18, variant: "text", onClick: () => {
                             props.handleOnEdit(tag.name);
                         } })))),
-                React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__values` },
+                React.createElement(Flex_1.Box, { className: `twa:flex-1 ${baseClassName}__values` },
                     typeof tag.view === 'function'
                         ? React.createElement(tag.view, {
                             data: props.abObject,
                             module: props.module,
                         })
                         : tag.view,
-                    Boolean(tag?.values && tag?.values?.length) && (React.createElement(ValueSelector_1.ValueOptionsTags, { style: { marginRight: 0 }, readOnly: true, options: tag.values, value: tag.values, allowWrap: true, toIdentifier: (c) => c, toLabel: (c) => React.createElement(React.Fragment, null, c) })),
+                    Boolean(tag?.values && tag?.values?.length) ? (React.createElement(Tag_1.TagList, { tags: tag.values.map(String) })) : null,
                     typeof tag.viewAfter === 'function'
                         ? React.createElement(tag.viewAfter, {
                             data: props.abObject,
@@ -63,16 +64,17 @@ const AdaptableObjectListItemView = (props) => {
                         })
                         : tag.viewAfter)));
         })),
-        props.showActions && (React.createElement(rebass_1.Flex, { flexDirection: "column", className: `${baseClassName}__buttons` },
-            React.createElement(rebass_1.Flex, { justifyContent: "end" },
+        props.showActions && (React.createElement(Flex_1.Flex, { flexDirection: "column", className: `${baseClassName}__buttons twa:ml-3 twa:pl-3 twa:text-right twa:min-w-[80px]` },
+            React.createElement(Flex_1.Flex, { className: "twa:justify-end" },
                 props.actions,
                 props.teamSharingActivated && (React.createElement(ButtonShare_1.ButtonShare, { iconSize: ICON_SIZE, Header: `TeamSharing ${props.entityType}`, accessLevel: props.accessLevel, onShare: props.onShare })),
                 props.onDelete && (React.createElement(SimpleButton_1.default, { "data-name": "delete", disabled: props.deleteDisabled, iconSize: ICON_SIZE, tooltip: props.deleteTooltip, icon: "delete", onClick: props.onDelete, variant: "text" })),
-                props.deleteAction && deleteActionButton,
+                props.deleteAction ? deleteActionButton : null,
                 props.showEditButton && (React.createElement(ButtonEdit_1.ButtonEdit, { iconSize: ICON_SIZE, disabled: props.editDisabled, accessLevel: props.accessLevel, onClick: () => props.handleOnEdit() }))),
-            React.createElement(rebass_1.Box, { flex: 1 }),
-            props.suspendedEnabled && (React.createElement(rebass_1.Flex, { justifyContent: "end" },
-                React.createElement(SuspendToggleButton_1.SuspendToggleButton, { onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend, suspendableObject: props.abObject, accessLevel: props.accessLevel })))))));
+            props.suspendedEnabled && (React.createElement(React.Fragment, null,
+                React.createElement(Flex_1.Box, { className: "twa:flex-1 twa:min-h-[20px]" }),
+                React.createElement(Flex_1.Flex, { className: "twa:justify-end" },
+                    React.createElement(SuspendToggleButton_1.SuspendToggleButton, { onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend, suspendableObject: props.abObject, accessLevel: props.accessLevel }))))))));
 };
 exports.AdaptableObjectListItemView = AdaptableObjectListItemView;
 const AdaptableObjectListItem = (props) => {
@@ -90,7 +92,7 @@ const AdaptableObjectListItem = (props) => {
     const entityType = props.module.moduleInfo.FriendlyName;
     const moduleAccessLevel = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(props.module.moduleInfo.ModuleName);
     const accessLevel = AdaptableHelper_1.default.getAccessLevelForObject(props.data.abObject, moduleAccessLevel);
-    const itemClassName = (0, join_1.default)(props.data.className, ITEM_BASE_CLASS_NAME, props.data.abObject.IsSuspended &&
+    const itemClassName = (0, clsx_1.default)(props.className, props.data.className, ITEM_BASE_CLASS_NAME, props.data.abObject.IsSuspended &&
         `${ITEM_BASE_CLASS_NAME}--is-suspended`);
     const handleCloseWizard = React.useCallback(() => {
         setIsEditWizardVisible(false);
@@ -126,6 +128,6 @@ const AdaptableObjectListItem = (props) => {
 };
 exports.AdaptableObjectListItem = AdaptableObjectListItem;
 const AdaptableObjectList = (props) => {
-    return (React.createElement("ul", { className: LIST_BASE_CLASS_NAME }, props?.items?.map((item, index) => (React.createElement(exports.AdaptableObjectListItem, { key: item.abObject.Uuid ?? index, data: item, module: props.module, ...props.itemProps })))));
+    return (React.createElement("ul", { className: (0, twMerge_1.twMerge)((0, clsx_1.default)(LIST_BASE_CLASS_NAME, 'twa:list-none twa:p-0 twa:gap-3 twa:flex twa:flex-col', props.className)) }, props?.items?.map((item, index) => (React.createElement(exports.AdaptableObjectListItem, { key: item.abObject.Uuid ?? index, data: item, module: props.module, ...props.itemProps })))));
 };
 exports.AdaptableObjectList = AdaptableObjectList;

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

@@ -5,6 +5,7 @@ export interface AdaptableObjectRowProps extends React.ClassAttributes<Adaptable
     fontSize?: string;
     onClick?: (e: React.SyntheticEvent) => void;
     style?: React.CSSProperties;
+    className?: string;
     isSuspended?: boolean;
 }
 export declare class AdaptableObjectRow extends React.Component<AdaptableObjectRowProps, {}> {

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

@@ -3,14 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableObjectRow = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-/// <reference path="../../typings/.d.ts" />
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
+const Flex_1 = require("../../../components/Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 class AdaptableObjectRow extends React.Component {
     render() {
-        const colItems = this.props.colItems.map((colItem, index) => (React.createElement(rebass_1.Text, { className: "ab-AdaptableObjectRow__cell", "data-name": "list-group-cell", key: index, title: typeof colItem.Content === 'string' ? colItem.Content : undefined, flex: colItem.Size, paddingLeft: 1, paddingRight: 1 }, colItem.Content)));
-        const className = (0, join_1.default)('ab-AdaptableObjectRow', this.props.isSuspended && 'ab-AdaptableObjectRow--is-suspended');
-        return (React.createElement(rebass_1.Flex, { className: className, onClick: this.props.onClick, style: this.props.style }, colItems));
+        const colItems = this.props.colItems.map((colItem, index) => (React.createElement(Flex_1.Box, { className: `ab-AdaptableObjectRow__cell twa:px-1`, style: { flex: colItem.Size }, "data-name": "list-group-cell", key: index, title: typeof colItem.Content === 'string' ? colItem.Content : undefined }, colItem.Content)));
+        const className = (0, clsx_1.default)('ab-AdaptableObjectRow', 'twa:p-3', 'twa:m-0', this.props.isSuspended && 'ab-AdaptableObjectRow--is-suspended', this.props.className);
+        return (React.createElement(Flex_1.Flex, { className: className, onClick: this.props.onClick, style: this.props.style }, colItems));
     }
 }
 exports.AdaptableObjectRow = AdaptableObjectRow;

package/src/View/Components/Buttons/ButtonBase/index.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { ButtonProps as BtnProps } from 'rebass';
 import { AccessLevel } from '../../../../AdaptableState/Common/Entitlement';
-export interface ButtonBaseProps extends BtnProps {
+export interface ButtonBaseProps extends React.HTMLProps<HTMLButtonElement | HTMLDivElement> {
     overrideDisableButton?: boolean;
     transformGlyph?: boolean;
     className?: string;

package/src/View/Components/Buttons/ButtonBase/index.js

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonBase = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
+const Flex_1 = require("../../../../components/Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const twMerge_1 = require("../../../../twMerge");
 const Glyphicon = ({ glyph, style }) => {
     return React.createElement("span", { style: style, className: `glyphicon glyphicon-${glyph}` });
 };
-const baseClassName = 'ab-Button';
+const baseClassName = 'ab-Button twa:text-current';
 class ButtonBase extends React.Component {
     render() {
         let isDisabled;
@@ -57,7 +58,7 @@ class ButtonBase extends React.Component {
                 ' ',
                 this.props.iconPosition !== 'end' ? text : null));
         }
-        let button = (React.createElement(rebass_1.Button, { ...this.props, style: { color: 'currentColor', ...this.props.style }, className: (0, join_1.default)(baseClassName, `${baseClassName}--size-${'normal'}`, `${baseClassName}--style-${'normal'}`, isDisabled ? `${baseClassName}--disabled` : `${baseClassName}--enabled`), disabled: isDisabled, onClick: this.props.onClick, onMouseDown: this.props.onMouseDown || ((e) => e.preventDefault()) }, content));
+        let button = (React.createElement(Flex_1.Box, { ...this.props, as: "button", style: this.props.style, className: (0, twMerge_1.twMerge)((0, clsx_1.default)(baseClassName, `${baseClassName}--size-normal`, `${baseClassName}--style-normal`, isDisabled ? `${baseClassName}--disabled` : `${baseClassName}--enabled`), this.props.className), disabled: isDisabled, onClick: this.props.onClick, onMouseDown: this.props.onMouseDown || ((e) => e.preventDefault()) }, content));
         let buttonwithtooltip = React.createElement("div", null, button);
         return hideToolTip ? button : buttonwithtooltip;
     }

package/src/View/Components/Buttons/ButtonClear.js

@@ -6,7 +6,8 @@ const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 class ButtonClear extends React.Component {
     render() {
-        return (React.createElement(SimpleButton_1.default, { "data-name": "clear", tooltip: "Clear", iconSize: 20, icon: this.props.showIcon == false ? '' : 'close', ...this.props, variant: "text" }, this.props.showText ? 'Clear' : ''));
+        const { showText, showIcon, ...innerProps } = this.props;
+        return (React.createElement(SimpleButton_1.default, { "data-name": "clear", tooltip: "Clear", iconSize: 20, icon: showIcon == false ? '' : 'close', ...innerProps, variant: "text" }, showText ? 'Clear' : ''));
     }
 }
 exports.ButtonClear = ButtonClear;