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

package/src/components/DragAndDropContext/TabList.js

@@ -1,53 +1,72 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolbarItem = exports.ToolbarList = exports.TabItem = exports.TabList = void 0;
+exports.TabList = TabList;
+exports.TabItem = TabItem;
+exports.ToolbarList = ToolbarList;
+exports.ToolbarItem = ToolbarItem;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const dnd_1 = require("../dnd");
-const rebass_1 = require("rebass");
 const icons_1 = require("../icons");
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
 const DragAndDropContext_1 = require("./DragAndDropContext");
-function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, }) {
-    return (React.createElement(dnd_1.Droppable, { droppableId: "MAIN", type: "TAB", direction: "horizontal" }, (provided) => (React.createElement("div", { ...provided.droppableProps, className: "ab-ModuleSelector__TabList", ref: provided.innerRef, style: { display: 'flex' }, "data-name": "dashboard-tabs" },
+const Flex_1 = require("../Flex");
+function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, onNewTab, }) {
+    return (React.createElement(dnd_1.Droppable, { droppableId: "MAIN", type: "TAB", direction: "horizontal" }, (provided) => (React.createElement("div", { ...provided.droppableProps, className: "ab-ModuleSelector__TabList twa:flex twa:flex-1 twa:overflow-auto", ref: provided.innerRef, "data-name": "dashboard-tabs" },
         tabs.map((tab, tabIndex) => (React.createElement(TabItem, { disabled: disabled, key: tabIndex, tabIndex: tabIndex, tab: tab, onRemove: () => onRemoveTab(tabIndex), onRemoveToolbar: (toolbarIndex) => onRemoveToolbar(tabIndex, toolbarIndex), onChangeTabName: (tabName) => onChangeTabName(tabIndex, tabName) }))),
+        !disabled && onNewTab ? (React.createElement(Flex_1.Flex, { alignItems: "center", justifyContent: "center", className: "ab-ModuleSelector__TabItem twa:min-w-32 twa:border-dashed twa:cursor-pointer twa:bg-primarylight twa:text-primary-foreground twa:hover:bg-primary", onClick: onNewTab },
+            React.createElement("div", { className: "twa:text-8 twa:flex twa:flex-col twa:gap-4 twa:items-center twa:italic" },
+                React.createElement(icons_1.Icon, { name: "plus", size: 32 }),
+                "Click to add tab"))) : null,
         provided.placeholder))));
 }
-exports.TabList = TabList;
 function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, disabled, }) {
     const context = React.useContext(DragAndDropContext_1.DragAndDropContext);
     const isDragDisabled = disabled || !context.permittedActions.dragAndDropTab;
-    return (React.createElement(dnd_1.Draggable, { isDragDisabled: isDragDisabled, draggableId: String(tabIndex), index: tabIndex }, (provided) => (React.createElement("div", { className: "ab-ModuleSelector__TabItem", "data-name": "dashboard-tab", ref: provided.innerRef, ...provided.draggableProps, style: {
-            ...(isDragDisabled ? {} : provided.draggableProps.style),
-        } },
-        React.createElement("div", { className: "ab-ModuleSelector__TabItem__header" },
-            React.createElement("div", { ...(disabled ? {} : provided.dragHandleProps), style: context.permittedActions.dragAndDropTab
-                    ? {}
-                    : {
-                        display: 'none',
-                    } },
-                React.createElement(icons_1.Icon, { name: "drag" })),
-            context.permittedActions.editTabName ? (React.createElement("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, onChange: (event) => {
-                    onChangeTabName(event.target.value);
-                } })) : (tab.Name),
-            context.permittedActions.deleteTab && (React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove }))),
-        React.createElement(ToolbarList, { disabled: disabled, toolbars: tab.Items, droppableId: String(tabIndex), onRemove: onRemoveToolbar })))));
+    return (React.createElement(dnd_1.Draggable, { isDragDisabled: isDragDisabled, draggableId: String(tabIndex), index: tabIndex }, (provided) => {
+        let showHeader = true;
+        if (tab.Name === '' &&
+            !context.permittedActions.editTabName &&
+            !context.permittedActions.deleteTab) {
+            showHeader = false;
+        }
+        return (React.createElement("div", { className: "ab-ModuleSelector__TabItem twa:min-w-32", "data-name": "dashboard-tab", ref: provided.innerRef, ...provided.draggableProps, style: {
+                ...(isDragDisabled ? {} : provided.draggableProps.style),
+            } },
+            showHeader ? (React.createElement("div", { className: "ab-ModuleSelector__TabItem__header" },
+                React.createElement("div", { ...(disabled ? {} : provided.dragHandleProps), style: context.permittedActions.dragAndDropTab
+                        ? {}
+                        : {
+                            display: 'none',
+                        } },
+                    React.createElement(icons_1.Icon, { name: "drag" })),
+                context.permittedActions.editTabName ? (React.createElement("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, onChange: (event) => {
+                        onChangeTabName(event.target.value);
+                    } })) : (tab.Name),
+                context.permittedActions.deleteTab && (React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove })))) : null,
+            React.createElement(ToolbarList, { disabled: disabled, toolbars: tab.Items, droppableId: String(tabIndex), onRemove: onRemoveToolbar })));
+    }));
 }
-exports.TabItem = TabItem;
 function ToolbarList({ toolbars, droppableId, onRemove, disabled, }) {
-    return (React.createElement(dnd_1.Droppable, { droppableId: droppableId, type: "TOOLBAR" }, (provided, snapshot) => (React.createElement(rebass_1.Box, { className: "ab-ModuleSelector__ToolbarList", ref: provided.innerRef, ...(disabled ? {} : provided.droppableProps), "data-name": "dashboard-toolbar-drop-target", backgroundColor: snapshot.isDraggingOver ? 'var(--ab-dashboard-tab-drop-target__background)' : '' },
+    return (React.createElement(dnd_1.Droppable, { droppableId: droppableId, type: "TOOLBAR" }, (provided, snapshot) => (React.createElement(Flex_1.Box, { className: "ab-ModuleSelector__ToolbarList", ref: provided.innerRef, ...(disabled ? {} : provided.droppableProps), "data-name": "dashboard-toolbar-drop-target", style: {
+            backgroundColor: snapshot.isDraggingOver
+                ? 'var(--ab-dashboard-tab-drop-target__background)'
+                : '',
+        } },
         toolbars?.map((toolbar, toolbarIndex) => (React.createElement(ToolbarItem, { disabled: disabled, key: toolbar, toolbar: toolbar, toolbarIndex: toolbarIndex, onRemove: () => onRemove(toolbarIndex) }))),
+        toolbars.length === 0 ? (React.createElement("div", { className: "ab-ModuleSelector__ToolbarList__placeholder twa:flex twa:items-center twa:justify-center twa:h-full twa:italic twa:text-center" }, "Drag and drop toolbar here")) : null,
         provided.placeholder))));
 }
-exports.ToolbarList = ToolbarList;
 function ToolbarItem({ toolbar, toolbarIndex, onRemove, disabled, }) {
     const { availableItems } = React.useContext(DragAndDropContext_1.DragAndDropContext);
     let currentItem = availableItems.find((t) => t.Id === toolbar);
     const title = currentItem ? currentItem.Title : toolbar;
-    return (React.createElement(dnd_1.Draggable, { isDragDisabled: disabled, draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => (React.createElement(rebass_1.Flex, { className: "ab-ModuleSelector__ToolbarItem", alignItems: "center", mb: 1, pl: 1, backgroundColor: snapshot.isDragging
-            ? 'var(--ab-dashboard-toolbar-drag__background)'
-            : 'var(--ab-color-primarylight)', ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: provided.draggableProps.style },
-        React.createElement("div", { style: { flex: 1 } }, title),
-        React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "close", variant: "text", padding: 1, onClick: onRemove })))));
+    return (React.createElement(dnd_1.Draggable, { isDragDisabled: disabled, draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => (React.createElement(Flex_1.Flex, { className: `ab-ModuleSelector__ToolbarItem twa:mb-1 twa:pl-1`, alignItems: "center", ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: {
+            ...provided.draggableProps.style,
+            backgroundColor: snapshot.isDragging
+                ? 'var(--ab-dashboard-toolbar-drag__background)'
+                : 'var(--ab-color-primarylight)',
+        } },
+        React.createElement("div", { className: "twa:flex-1" }, title),
+        React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "close", variant: "text", className: "twa:p-1", onClick: onRemove })))));
 }
-exports.ToolbarItem = ToolbarItem;

package/src/components/DragAndDropContext/UnusedPanel.js

@@ -1,29 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UnusedPanel = void 0;
+exports.UnusedPanel = UnusedPanel;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const dnd_1 = require("../dnd");
-const rebass_1 = require("rebass");
 const DragAndDropContext_1 = require("./DragAndDropContext");
+const Flex_1 = require("../Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 function UnusedPanel({ items, disabled, title, dragItemText, }) {
-    return (React.createElement(rebass_1.Box, { pb: 1, mb: 2, className: "ab-ModuleSelector__UnusedPanel", "data-name": "unusedpanel-items" },
-        React.createElement(rebass_1.Box, { p: 2 },
+    return (React.createElement(Flex_1.Box, { className: "ab-ModuleSelector__UnusedPanel twa:mb-2 twa:pb-1", "data-name": "unusedpanel-items" },
+        React.createElement(Flex_1.Box, { className: "twa:p-2" },
             React.createElement("b", null, title),
             " (",
             dragItemText,
             ")"),
         React.createElement(UnusedItemList, { disabled: disabled, items: items })));
 }
-exports.UnusedPanel = UnusedPanel;
 function UnusedItemList({ items, disabled }) {
-    return (React.createElement(dnd_1.Droppable, { droppableId: "UNUSED", type: "TOOLBAR", isDropDisabled: true, direction: "horizontal" }, (provided) => (React.createElement("div", { ref: provided.innerRef, "data-name": "unusedpanel-items-list", ...provided.droppableProps, style: {
-            display: 'flex',
-            flexDirection: 'row',
-            flexWrap: 'wrap',
-            paddingLeft: 'var(--ab-space-2)',
-            paddingRight: 'var(--ab-space-2)',
-        } },
+    return (React.createElement(dnd_1.Droppable, { droppableId: "UNUSED", type: "TOOLBAR", isDropDisabled: true, direction: "horizontal" }, (provided) => (React.createElement("div", { ref: provided.innerRef, "data-name": "unusedpanel-items-list", ...provided.droppableProps, className: 'twa:px-2 twa:flex-wrap twa:flex twa:flex-row twa:gap-1' },
         items.map((unusedItem, unusedItemIndex) => (React.createElement(UnusedItem, { disabled: disabled, key: unusedItem, unusedItem: unusedItem, unusedItemIndex: unusedItemIndex }))),
         provided.placeholder))));
 }
@@ -39,15 +33,12 @@ function UnusedItem({ unusedItem, unusedItemIndex, disabled, }) {
                 ...provided.dragHandleProps,
             };
         const dragStyle = disabled ? {} : provided.draggableProps.style;
-        return (React.createElement("div", { "data-name": "unused-item", ref: provided.innerRef, ...eventHandlers, style: {
+        return (React.createElement("div", { "data-name": "unused-item", ref: provided.innerRef, ...eventHandlers, className: (0, clsx_1.default)('twa:rounded-md twa:text-sm twa:text-text-on-primary twa:p-2'), style: {
                 ...dragStyle,
                 border: '1px solid var(--ab-color-primary)',
                 backgroundColor: snapshot.isDragging
                     ? 'var(--ab-dashboard-toolbar-drag__background)'
-                    : 'var(--ab-color-primarylight)',
-                padding: 'var(--ab-space-1) var(--ab-space-2)',
-                marginRight: 'var(--ab-space-1)',
-                marginBottom: 'var(--ab-space-1)',
+                    : 'var(--ab-color-primary)',
             } }, title));
     }));
 }

package/src/components/Dropdown/index.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { BoxProps } from 'rebass';
+import { FlexProps } from '../Flex';
 export type DropdownOption = {
     label: string;
     value: string;
 };
-export type DropdownProps = Omit<BoxProps, 'onChange' | 'value'> & {
+export type DropdownProps = Omit<FlexProps & React.HTMLProps<HTMLDivElement>, 'onChange' | 'value' | 'as' | 'flexDirection' | 'alignItems' | 'height' | 'size'> & {
     autoFocus?: boolean;
     expanded?: boolean;
     disabled?: boolean;

package/src/components/Dropdown/index.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const rebass_1 = require("rebass");
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
 const Arrows_1 = tslib_1.__importDefault(require("./Arrows"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
+const Flex_1 = require("../Flex");
+const twMerge_1 = require("../../twMerge");
 const baseClassName = 'ab-Dropdown';
 const Dropdown = (props) => {
     let { options, multiple, name, autoFocus, showEmptyItem = true, showClearButton, disabled, allowSearch, clearButtonProps, value: _, onChange: __, style, onExpand, ...boxProps } = props;
@@ -79,16 +80,14 @@ const Dropdown = (props) => {
         selectedText = placeholder;
     }
     //20  ... 20 16
-    const renderClearButton = () => (React.createElement(SimpleButton_1.default, { variant: "text", icon: "close", tone: "none", tooltip: "Clear", iconSize: 20, px: 0, py: 0, marginRight: 1, ...clearButtonProps, style: {
-            zIndex: 10,
-            color: 'inherit',
+    const renderClearButton = () => (React.createElement(SimpleButton_1.default, { variant: "text", icon: "close", tone: "none", tooltip: "Clear", iconSize: 20, ...clearButtonProps, className: (0, twMerge_1.twMerge)('twa:p-0 twa:mr-1 twa:z-10 twa:color-inherit', clearButtonProps.className), style: {
             ...(clearButtonProps ? clearButtonProps.style : null),
         }, onClick: (e) => {
             e.preventDefault();
             onChange(null, e);
         } }));
-    return (React.createElement(rebass_1.Flex, { ref: domRef, flexDirection: "row", alignItems: "center", ...boxProps, className: (0, join_1.default)(props.className, baseClassName, !selectedOption ? `${baseClassName}--empty` : `${baseClassName}--not-empty`, focused ? `${baseClassName}--focused` : `${baseClassName}--not-focused`, disabled ? `${baseClassName}--disabled` : null), style: style, tabIndex: focused ? -1 : props.tabIndex || 0, onFocus: onFocus, onBlur: onBlur },
-        React.createElement("div", { style: { display: 'inline-block' }, className: `${baseClassName}__text` },
+    return (React.createElement(Flex_1.Flex, { ref: domRef, flexDirection: 'row', alignItems: "center", ...boxProps, className: (0, join_1.default)(props.className, baseClassName, !selectedOption ? `${baseClassName}--empty` : `${baseClassName}--not-empty`, focused ? `${baseClassName}--focused` : `${baseClassName}--not-focused`, disabled ? `${baseClassName}--disabled` : null), style: style, tabIndex: focused ? -1 : props.tabIndex || 0, onFocus: onFocus, onBlur: onBlur },
+        React.createElement("div", { className: `${baseClassName}__text twa:inline-block` },
             selectedText,
             React.createElement(Arrows_1.default, null)),
         React.createElement("select", { ref: selectRef, tabIndex: -1, disabled: disabled, value: value == null ? '' : value, onChange: (e) => {

package/src/components/DropdownButton/index.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { BoxProps } from 'rebass';
 import { SimpleButtonProps } from '../SimpleButton';
 import { ExpandedProps } from './useExpanded';
 import DropdownButtonItem from './DropdownButtonItem';
 import { OverlayTriggerProps } from '../OverlayTrigger';
+import { BoxProps } from '../Flex';
 export declare const DROPDOWN_ICON: React.JSX.Element;
 export type DropdownButtonProps = React.PropsWithChildren<Omit<BoxProps, 'ref'>> & Omit<React.HTMLProps<HTMLElement>, 'ref'> & SimpleButtonProps & ExpandedProps & {
     collapseOnItemClick?: boolean;
@@ -24,25 +24,5 @@ export type DropdownButtonProps = React.PropsWithChildren<Omit<BoxProps, 'ref'>>
     isItemDisabled?: (item: DropdownButtonItem) => boolean | undefined;
     showToggleIcon?: boolean;
 };
-declare const DropdownButton: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & {
-    children?: React.ReactNode;
-} & Omit<React.HTMLProps<HTMLElement>, "ref"> & SimpleButtonProps & ExpandedProps & {
-    collapseOnItemClick?: boolean;
-    columns?: string[];
-    overlayProps?: OverlayTriggerProps;
-    listOffset?: number;
-    items?: DropdownButtonItem[];
-    stopPropagationOnOverlay?: boolean;
-    idProperty?: string;
-    showClearButton?: boolean;
-    focusOnClear?: boolean;
-    onClear?: () => void;
-    clearButtonProps?: SimpleButtonProps;
-    listItemClassName?: string;
-    listStyle?: React.CSSProperties;
-    listMinWidth?: number;
-    listItemStyle?: React.CSSProperties | ((item: DropdownButtonItem, index: number) => React.CSSProperties);
-    isItemDisabled?: (item: DropdownButtonItem) => boolean | undefined;
-    showToggleIcon?: boolean;
-} & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownButton: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<DropdownButtonProps>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default DropdownButton;

package/src/components/DropdownButton/index.js

@@ -9,9 +9,10 @@ const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
 const useExpanded_1 = tslib_1.__importDefault(require("./useExpanded"));
 const renderItem_1 = tslib_1.__importDefault(require("./renderItem"));
 const OverlayTrigger_1 = tslib_1.__importDefault(require("../OverlayTrigger"));
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 exports.DROPDOWN_ICON = (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24" },
     React.createElement("path", { d: "M7 10l5 5 5-5H7z" })));
-const spacer = React.createElement("div", { style: { flex: 1 } });
+const spacer = React.createElement("div", { className: "twa:flex-1" });
 const baseClassName = 'ab-DropdownButton';
 const defaultListItemStyle = {
     padding: 'var(--ab-cmp-dropdownbutton-list-item__padding)',
@@ -103,7 +104,7 @@ const DropdownButton = React.forwardRef((props, theRef) => {
                 onClear();
             }
             buttonRef.current?.focus();
-        }, ml: 2, padding: 0, variant: 'text', icon: "close", ...clearButtonProps, style: {
+        }, className: "twa:ml-2 twa:p-0", variant: 'text', icon: "close", ...clearButtonProps, style: {
             ...clearButtonProps?.style,
             visibility: showClearButton ? 'visible' : 'hidden',
         } })) : null;
@@ -124,7 +125,7 @@ const DropdownButton = React.forwardRef((props, theRef) => {
                     }
                 } }, content));
         }, ...overlayProps },
-        React.createElement(SimpleButton_1.default, { iconPosition: "end", ...(showToggleIcon && { icon, paddingRight: 0 }), ...domProps, ref: (btn) => {
+        React.createElement(SimpleButton_1.default, { iconPosition: "end", ...(showToggleIcon && { icon }), ...domProps, ref: (btn) => {
                 buttonRef.current = btn;
                 if (!theRef) {
                     return;
@@ -135,7 +136,9 @@ const DropdownButton = React.forwardRef((props, theRef) => {
                 else {
                     theRef.current = btn;
                 }
-            }, style: domProps.style, className: className, onClick: (e) => {
+            }, style: domProps.style, className: (0, clsx_1.default)(className, {
+                'twa:pr-0': showToggleIcon,
+            }), onClick: (e) => {
                 if (domProps.onClick) {
                     domProps.onClick(e);
                 }

package/src/components/EmptyContent/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { HTMLProps } from 'react';
-import { FlexProps } from 'rebass';
-type EmptyContentProps = HTMLProps<HTMLElement> & FlexProps & {};
+import { FlexProps } from '../Flex';
+type EmptyContentProps = HTMLProps<HTMLDivElement> & FlexProps & {};
 declare const EmptyContent: ({ children, className, style, ...flexProps }: EmptyContentProps) => React.JSX.Element;
 export default EmptyContent;

package/src/components/EmptyContent/index.js

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
+const Flex_1 = require("../Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const baseClassName = 'ab-EmptyContent';
 const EmptyContent = ({ children, className, style, ...flexProps }) => {
     if (typeof children === 'string') {
         children = React.createElement("p", null, children);
     }
-    return (React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__wrapper` },
-        React.createElement(rebass_1.Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...flexProps, className: (0, join_1.default)(baseClassName, className), style: style }, children)));
+    return (React.createElement(Flex_1.Box, { className: `${baseClassName}__wrapper twa:flex-1 twa:relative twa:size-full` },
+        React.createElement(Flex_1.Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...flexProps, className: (0, clsx_1.default)('twa:absolute twa:inset-0 twa:text-3 twa:text-center twa:p-4', 'twa:[&_p]:text-primary-foreground', baseClassName, className), style: style }, children)));
 };
 exports.default = EmptyContent;

package/src/components/ErrorBox/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BoxProps } from 'rebass';
+import { HTMLProps } from 'react';
 export declare const baseClassName = "ab-ErrorBox";
-declare const ErrorBox: (props: BoxProps) => React.JSX.Element;
+declare const ErrorBox: (props: HTMLProps<HTMLDivElement>) => React.JSX.Element;
 export default ErrorBox;

package/src/components/ErrorBox/index.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.baseClassName = 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("../utils/join"));
+const Flex_1 = require("../Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 exports.baseClassName = 'ab-ErrorBox';
 const ErrorBox = (props) => {
-    return React.createElement(rebass_1.Box, { ...props, className: (0, join_1.default)(props.className, exports.baseClassName) });
+    return (React.createElement(Flex_1.Box, { ...props, className: (0, clsx_1.default)('twa:p-3 twa:rounded-standard twa:bg-error twa:text-text-on-error', props.className, exports.baseClassName) }));
 };
 exports.default = ErrorBox;

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BaseEditorInput = void 0;
+exports.BaseEditorInput = BaseEditorInput;
 const tslib_1 = require("tslib");
-const rebass_1 = require("rebass");
 const parser = tslib_1.__importStar(require("../../parser/src"));
 const React = tslib_1.__importStar(require("react"));
 const ErrorBox_1 = tslib_1.__importDefault(require("../ErrorBox"));
@@ -23,6 +22,9 @@ const ExpressionFunctionDocumentation_1 = require("./ExpressionFunctionDocumenta
 const Tag_1 = require("../Tag");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
 const Radio_1 = tslib_1.__importDefault(require("../Radio"));
+const Flex_1 = require("../Flex");
+const AdaptableFormControlTextClear_1 = require("../../View/Components/Forms/AdaptableFormControlTextClear");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const filterableCategories = [
     'dates',
     'logical',
@@ -47,7 +49,7 @@ const getCategoryOrder = (category) => {
     };
     return predefinedOrder[category] || 0;
 };
-const VarEditorButton = () => {
+const VarEditorButton = ({ className }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const customQueryVariables = adaptable.api.optionsApi.getExpressionOptions()?.customQueryVariables;
     if (!customQueryVariables || Object.keys(customQueryVariables).length === 0) {
@@ -55,7 +57,7 @@ const VarEditorButton = () => {
     }
     return (React.createElement(React.Fragment, null, Object.keys(customQueryVariables).map((varOption) => {
         const varString = `VAR('${varOption}')`;
-        return (React.createElement(EditorButton_1.default, { data: varString, key: varOption }, varString));
+        return (React.createElement(EditorButton_1.default, { data: varString, key: varOption, className: className }, varString));
     })));
 };
 const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
@@ -111,54 +113,68 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
         dropdownRef.current.hide();
         setOverFunction(null);
     };
+    const [searchInputValue, setSearchInputValue] = React.useState('');
     /**
      * Hide when:
      * - mouse leaves
      * - a function is inserted
      */
-    return (React.createElement(OverlayTrigger_1.default, { ref: dropdownRef, showEvent: "mouseenter", hideEvent: "mouseleave", targetOffset: 5, render: () => (React.createElement(rebass_1.Flex, { className: `${baseClassName}__dropdown-functions-list-wrapper`, flexDirection: "column", onMouseLeave: () => hidePopup() },
-            React.createElement(rebass_1.Flex, { pl: 2, style: { gap: 10 } }, categoryOptions.map((option, index) => {
+    return (React.createElement(OverlayTrigger_1.default, { ref: dropdownRef, showEvent: "mouseenter", hideEvent: "mouseleave", targetOffset: 5, render: () => (React.createElement(Flex_1.Flex, { className: `${baseClassName}__dropdown-functions-list-wrapper twa:max-w-[60vw] twa:shadow-md twa:bg-defaultbackground twa:text-text-on-defaultbackground twa:text-3 twa:rounded-standard twa:p-3`, flexDirection: "column", onMouseLeave: () => hidePopup() },
+            React.createElement(Flex_1.Flex, { className: "twa:md:gap-3 twa:gap-2 twa:pb-2 twa:md:justify-between twa:justify-start twa:flex-wrap twa:border-b twa:border-primarydark/30 twa:mb-2" }, categoryOptions.map((option, index) => {
                 return (React.createElement(Radio_1.default, { key: option.value, onFocus: (event) => {
                         event.preventDefault();
                         event.stopPropagation();
                     }, onClick: handleFunctionCategoryChange(option.value), checked: currentFunctionCategory === option.value }, option.label));
             })),
-            React.createElement(rebass_1.Flex, null,
-                React.createElement(rebass_1.Flex, { className: `${baseClassName}__dropdown-functions-list`, "data-name": "expression-dropdown-functions-list", flexDirection: "column", p: 2, maxHeight: '50vh' }, orderedGroupNames
-                    .filter((groupName) => !!groupedFunctions[groupName])
-                    .map((groupName) => {
-                    const functionsInGroup = Object.keys(groupedFunctions[groupName]);
-                    if (functionsInGroup.length === 0) {
-                        return React.createElement(React.Fragment, { key: groupName });
-                    }
-                    const getEditorButtonData = (functionName) => {
-                        // handle special cases
-                        if (functionName === 'CASE') {
-                            return `CASE <caseValue> WHEN <whenValue> THEN <thenValue> ELSE <defaultValue> END`;
-                        }
-                        if (functionName === 'TRUE' || functionName === 'FALSE') {
-                            return functionName;
+            React.createElement(Flex_1.Flex, { className: "twa:gap-2 twa:max-h-[60vh]", flexDirection: "row" },
+                React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2 twa:rounded-standard" },
+                    React.createElement(Flex_1.Box, null,
+                        React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { className: "twa:w-full", value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Functions" })),
+                    React.createElement(Flex_1.Flex, { className: `${baseClassName}__dropdown-functions-list twa:overflow-auto`, "data-name": "expression-dropdown-functions-list", flexDirection: "column" }, orderedGroupNames
+                        .filter((groupName) => !!groupedFunctions[groupName])
+                        .map((groupName) => {
+                        const functionsInGroup = Object.keys(groupedFunctions[groupName]);
+                        if (functionsInGroup.length === 0) {
+                            return React.createElement(React.Fragment, { key: groupName });
                         }
-                        if (functionName === 'IF') {
-                            return `<condition_expr> ? <consequent_expr> : <alternative_expr>`;
-                        }
-                        return `${functionName}()`;
-                    };
-                    return (React.createElement(rebass_1.Box, { mb: 2, key: groupName },
-                        React.createElement(Tag_1.Tag, { mb: 1 }, StringExtensions_1.default.Humanize(groupName)),
-                        functionsInGroup.map((functionName) => (React.createElement(rebass_1.Box, { key: functionName, onMouseEnter: () => setOverFunction(functionName), onClick: () => hidePopup() }, functionName === 'VAR' ? (React.createElement(VarEditorButton, { key: functionName })) : (React.createElement(EditorButton_1.default, { data: getEditorButtonData(functionName), key: functionName, mr: 1 }, functionName)))))));
-                })),
-                React.createElement(rebass_1.Box, { className: `${baseClassName}__dropdown-functions-description`, p: 2, width: 600, maxWidth: "30vw" }, overFunction ? (React.createElement(React.Fragment, null,
-                    React.createElement(Tag_1.Tag, null, overFunction),
-                    React.createElement(ExpressionFunctionDocumentation_1.ExpressionFunctionDocumentation, { expressionFunction: expressionFunctions[overFunction] }))) : (React.createElement(Tag_1.Tag, { padding: 20 },
+                        const getEditorButtonData = (functionName) => {
+                            // handle special cases
+                            if (functionName === 'CASE') {
+                                return `CASE <caseValue> WHEN <whenValue> THEN <thenValue> ELSE <defaultValue> END`;
+                            }
+                            if (functionName === 'TRUE' || functionName === 'FALSE') {
+                                return functionName;
+                            }
+                            if (functionName === 'IF') {
+                                return `<condition_expr> ? <consequent_expr> : <alternative_expr>`;
+                            }
+                            return `${functionName}()`;
+                        };
+                        const fns = functionsInGroup
+                            .map((functionName) => {
+                            if (searchInputValue &&
+                                !functionName.toLowerCase().includes(searchInputValue.toLowerCase())) {
+                                return null;
+                            }
+                            const buttonClassName = 'twa:mr-1 twa:hover:bg-accent twa:hover:text-accent-foreground';
+                            return (React.createElement(Flex_1.Box, { key: functionName, onMouseEnter: () => setOverFunction(functionName), onClick: () => hidePopup() }, functionName === 'VAR' ? (React.createElement(VarEditorButton, { key: functionName, className: buttonClassName })) : (React.createElement(EditorButton_1.default, { data: getEditorButtonData(functionName), key: functionName, className: buttonClassName }, functionName))));
+                        })
+                            .filter(Boolean);
+                        return (React.createElement(Flex_1.Box, { className: (0, clsx_1.default)('twa:mb-2 twa:mx-1', fns.length === 0 ? 'twa:hidden' : ''), key: groupName },
+                            React.createElement(Tag_1.Tag, { className: "twa:mb-1 twa:bg-primarylight twa:text-text-on-primary twa:w-full" }, StringExtensions_1.default.Humanize(groupName)),
+                            fns));
+                    }))),
+                React.createElement(Flex_1.Box, { className: (0, clsx_1.default)(`${baseClassName}__dropdown-functions-description `, `twa:flex-1 twa:p-2 twa:w-[600px] twa:max-w-[60vw]`, `twa:rounded-standard twa:shadow-sm twa:overflow-auto twa:h-auto`, 'twa:bg-primarylight twa:text-primary-foreground') }, overFunction ? (React.createElement(React.Fragment, null,
+                    React.createElement(Tag_1.Tag, { className: "twa:bg-accent twa:text-accent-foreground" }, overFunction),
+                    React.createElement(ExpressionFunctionDocumentation_1.ExpressionFunctionDocumentation, { expressionFunction: expressionFunctions[overFunction] }))) : (React.createElement(Flex_1.Flex, { className: "twa:size-full twa:items-center twa:justify-center twa:text-2 twa:italic" },
                     React.createElement("ul", null,
                         React.createElement("li", null,
                             "Hover over a Function to learn more",
                             React.createElement("br", null),
                             React.createElement("br", null)),
-                        React.createElement("li", null, "Select a Function to add to the Expression in the Editor")))))))) },
-        React.createElement(SimpleButton_1.default, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', mr: 1 },
-            React.createElement(rebass_1.Flex, { marginRight: 1, fontSize: 2 },
+                        React.createElement("li", null, "Click a Function to add it to the Expression in the Editor")))))))) },
+        React.createElement(SimpleButton_1.default, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', className: "twa:mr-1" },
+            React.createElement(Flex_1.Flex, { className: "twa:mr-1 twa:text-2" },
                 React.createElement(icons_1.Icon, { name: "equation" })))));
 };
 function BaseEditorInput(props) {
@@ -177,10 +193,10 @@ function BaseEditorInput(props) {
         }
         const parserExceptionDetails = e.message;
         return (React.createElement("details", null,
-            React.createElement(rebass_1.Flex, { marginBottom: 1, as: "summary" },
+            React.createElement(Flex_1.Flex, { className: "twa:mb-1", as: "summary" },
                 parserExceptionSummary,
                 React.createElement("i", null, " (click for more details)")),
-            React.createElement(rebass_1.Text, { marginLeft: 3, style: { fontStyle: 'italic' } }, parserExceptionDetails)));
+            React.createElement(Flex_1.Box, { className: "twa:ml-3 twa:italic" }, parserExceptionDetails)));
     };
     const testRowNode = (0, react_1.useMemo)(() => {
         const firstRowNode = props.api.gridApi.getFirstRowNode();
@@ -243,25 +259,25 @@ function BaseEditorInput(props) {
         .map((editorButtonDef) => (React.createElement(EditorButton_1.default, { key: `${editorButtonDef.functionName}-operator`, data: editorButtonDef.data, icon: editorButtonDef.icon }, !editorButtonDef.icon && (editorButtonDef.text || editorButtonDef.functionName))));
     const showDocumentationLink = props.api.internalApi.isDocumentationLinksDisplayed();
     return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Flex, { className: baseClassName, "data-name": "expression-toolbar", py: 2, mb: 2, mt: 2, flexWrap: "wrap" },
-            React.createElement(rebass_1.Flex, { style: { flex: 1, marginLeft: 5 }, flexWrap: "wrap" },
+        React.createElement(Flex_1.Flex, { "data-name": "expression-toolbar", className: `${baseClassName} twa:py-2 twa:mb-2 twa:mt-2 twa:flex-wrap twa:w-full` },
+            React.createElement(Flex_1.Flex, { className: "twa:flex-1 twa:ml-1 twa:flex-wrap" },
                 React.createElement(FunctionsDropdown, { expressionFunctions: expressionFunctions, baseClassName: baseClassName }),
                 operatorButtons),
-            showDocumentationLink && (React.createElement(rebass_1.Flex, { alignItems: "flex-start" },
-                React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, tooltip: 'Learn how to use the Expression Editor', onClick: () => window.open(DocumentationLinkConstants_1.ExpressionEditorDocsLink, '_blank') })))),
+            showDocumentationLink && (React.createElement(Flex_1.Flex, { alignItems: "flex-start" },
+                React.createElement(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", tooltip: 'Learn how to use the Expression Editor', onClick: () => window.open(DocumentationLinkConstants_1.ExpressionEditorDocsLink, '_blank') })))),
         React.createElement(Textarea_1.default, { "data-name": `expression-input-${type}`, ref: textAreaRefCallback, value: props.value || '', placeholder: props.placeholder || 'Create Query', disabled: props.disabled || false, className: (0, join_1.default)('ab-ExpressionEditor__textarea', // left for backwards compatibility
-            `${baseClassName}__textarea`), autoFocus: true, spellCheck: "false", onChange: (event) => {
+            `${baseClassName}__textarea`, 'twa:w-full twa:min-h-[100px] twa:p-2 twa:text-4 twa:resize-y twa:font-mono'), autoFocus: true, spellCheck: "false", onChange: (event) => {
                 props.onChange(event.target.value);
             }, style: style }),
-        props.isFullExpression !== true && (React.createElement(HelpBlock_1.default, { mt: 2, mb: 2, p: 2, fontSize: 3 },
+        props.isFullExpression !== true && (React.createElement(HelpBlock_1.default, { className: "twa:my-2 twa:p-2 twa:text-3" },
             "This Expression must resolve to a ",
             React.createElement("b", null, "boolean "),
             "(i.e. true / false) value")),
-        expressionError && (React.createElement(ErrorBox_1.default, { width: "100%", style: { whiteSpace: 'pre-wrap' }, mt: 2 }, expressionError)),
-        evaluationError && (React.createElement(ErrorBox_1.default, { style: { whiteSpace: 'pre-wrap' }, mt: 2 }, `${evaluationError.expressionFnName} ${evaluationError.message}`)),
-        !props.hideResultPreview && result !== undefined && (React.createElement(rebass_1.Box, { className: `${baseClassName}__editor-feedback`, "data-name": "expression-editor-feedback", mt: 2, p: 2 },
-            React.createElement("pre", { style: { whiteSpace: 'pre-wrap', margin: 0 } },
-                "Result (using Test Data): ",
-                React.createElement("b", null, JSON.stringify(result)))))));
+        expressionError && (React.createElement(ErrorBox_1.default, { className: "twa:mt-2 twa:whitespace-pre-wrap twa:w-full" }, expressionError)),
+        evaluationError && (React.createElement(ErrorBox_1.default, { className: "twa:mt-2 twa:whitespace-pre-wrap" }, `${evaluationError.expressionFnName} ${evaluationError.message}`)),
+        !props.hideResultPreview && result !== undefined && (React.createElement(Flex_1.Box, { className: `${baseClassName}__editor-feedback twa:mt-2 twa:p-2 twa:rounded-standard`, "data-name": "expression-editor-feedback" },
+            React.createElement("pre", { className: "twa:whitespace-pre-wrap twa:m-0" },
+                "Result (using test data):",
+                ' ',
+                React.createElement("b", { className: "twa:bg-accentlight twa:text-accent twa:rounded-full twa:p-1 twa:px-2" }, JSON.stringify(result)))))));
 }
-exports.BaseEditorInput = BaseEditorInput;

package/src/components/ExpressionEditor/DataTableEditor.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTableEditor = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const _1 = require(".");
 const CheckBox_1 = require("../CheckBox");
 const AdaptableFormControlTextClear_1 = require("../../View/Components/Forms/AdaptableFormControlTextClear");
@@ -13,6 +12,7 @@ const Input_1 = tslib_1.__importDefault(require("../Input"));
 const DateHelper_1 = require("../../Utilities/Helpers/DateHelper");
 const AdaptableContext_1 = require("../../View/AdaptableContext");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../View/Components/AdaptableInput"));
+const Flex_1 = require("../Flex");
 const DataTableEditor = ({ fields, dataFormatter, data: initialData, type = 'column', labels, }) => {
     const adaptableApi = (0, AdaptableContext_1.useAdaptable)().api;
     const [data, setData] = React.useState(initialData);
@@ -34,8 +34,8 @@ const DataTableEditor = ({ fields, dataFormatter, data: initialData, type = 'col
     const hasFriendlyNames = React.useMemo(() => {
         return fields.some((field) => field.label !== field.value);
     }, []);
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", "data-name": `expression-${type}-picker`, style: { height: '100%' } },
-        React.createElement(rebass_1.Flex, { className: `${_1.baseClassName}__${type}-list`, flexDirection: "column", alignItems: "start", style: { marginTop: 2 }, mb: 2 },
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", "data-name": `expression-${type}-picker`, className: "twa:h-full" },
+        React.createElement(Flex_1.Flex, { className: `${_1.baseClassName}__${type}-list twa:mb-2 twa:mt-[2px]`, flexDirection: "column", alignItems: "flex-start" },
             hasFriendlyNames && (React.createElement(CheckBox_1.CheckBox, { checked: showColumnIds, onChange: (checked) => setShowValues(checked), style: {
                     float: 'right',
                     margin: 0,
@@ -52,14 +52,10 @@ const DataTableEditor = ({ fields, dataFormatter, data: initialData, type = 'col
         })
             .map((field) => {
             const label = showColumnIds ? `[${field.value}]` : field.label;
-            return (React.createElement(FormLayout_1.FormRow, { key: field.label, label: React.createElement(EditorButton_1.default, { width: "100%", height: "100%", style: {
-                        background: 'var(--ab-color-primary)',
-                        cursor: 'grab',
-                        marginRight: 'var(--ab-space-1)',
-                    }, data: dataFormatter(field.value), "data-name": type, "data-value": field.value, icon: "drag" },
-                    React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start" }, label)) }, field.dataType === 'number' ? (React.createElement(Input_1.default, { type: "number", "data-name": `${type}-input`, "data-value": field.value, value: getColValue(field.value) ?? '', onChange: (e) => setData(updateColValue(data, field.value, Number(e.target.value))), width: "100%", disabled: field.readOnly })) : field.dataType === 'text' ? (React.createElement(Input_1.default, { type: "text", "data-name": `${type}-input`, "data-value": field.value, value: getColValue(field.value) ?? '', onChange: (e) => setData(updateColValue(data, field.value, e.target.value)), width: "100%", disabled: field.readOnly })) : field.dataType === 'date' ? (React.createElement(AdaptableInput_1.default, { type: "date", "data-name": `${type}-input`, "data-value": field.value, value: getColDateValue(field.value) ?? '', onChange: (e) => {
+            return (React.createElement(FormLayout_1.FormRow, { key: field.label, label: React.createElement(EditorButton_1.default, { className: "twa:w-full twa:h-full twa:bg-primary twa:cursor-grab twa:mr-1", data: dataFormatter(field.value), "data-name": type, "data-value": field.value, icon: "drag" },
+                    React.createElement(Flex_1.Flex, { flexDirection: "column", alignItems: "flex-start" }, label)) }, field.dataType === 'number' ? (React.createElement(Input_1.default, { type: "number", "data-name": `${type}-input`, "data-value": field.value, value: getColValue(field.value) ?? '', onChange: (e) => setData(updateColValue(data, field.value, Number(e.target.value))), className: "twa:w-full", disabled: field.readOnly })) : field.dataType === 'text' ? (React.createElement(Input_1.default, { type: "text", "data-name": `${type}-input`, "data-value": field.value, value: getColValue(field.value) ?? '', onChange: (e) => setData(updateColValue(data, field.value, e.target.value)), className: "twa:w-full", disabled: field.readOnly })) : field.dataType === 'date' ? (React.createElement(AdaptableInput_1.default, { type: "date", "data-name": `${type}-input`, "data-value": field.value, value: getColDateValue(field.value) ?? '', onChange: (e) => {
                     setData(updateColValue(data, field.value, new Date(e.target.value)));
-                }, style: { width: '100%' }, disabled: field.readOnly })) : field.dataType === 'boolean' ? (React.createElement(CheckBox_1.CheckBox, { "data-name": `${type}-input`, "data-value": field.value, checked: Boolean(getColValue(field.value)), onChange: (checked) => setData(updateColValue(data, field.value, checked)), disabled: field.readOnly })) : null));
+                }, className: "twa:w-full", disabled: field.readOnly })) : field.dataType === 'boolean' ? (React.createElement(CheckBox_1.CheckBox, { "data-name": `${type}-input`, "data-value": field.value, checked: Boolean(getColValue(field.value)), onChange: (checked) => setData(updateColValue(data, field.value, checked)), disabled: field.readOnly })) : null));
         }))));
 };
 exports.DataTableEditor = DataTableEditor;