@adaptabletools/adaptable 23.0.0-canary.1 → 23.0.0-canary.10

package/src/components/DragAndDropContext/TabList.js

@@ -4,9 +4,13 @@ import { defaultDragProxyMove, DragList } from '../dnd';
 import { Icon } from '../icons';
 import SimpleButton from '../SimpleButton';
 import { DragAndDropContext } from './DragAndDropContext';
+import { scopeDragId, scopeListId, tabIndexFromScopedListId, unscopeDragId } from './dragScope';
 import { Box, Flex } from '../Flex';
-import clsx from 'clsx';
-export function TabList({ tabs, onTabsChange, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, onNewTab, }) {
+import { cn } from '../../lib/utils';
+export function TabList({ tabs, onTabsChange, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, onNewTab, variant = 'columns', }) {
+    const isRows = variant === 'rows';
+    const { dragScope } = React.useContext(DragAndDropContext);
+    const tabsListId = scopeListId(dragScope, 'TABS');
     const tabIdsRef = React.useRef(new WeakMap());
     const nextTabIdRef = React.useRef(0);
     const getTabStableId = React.useCallback((tab) => {
@@ -18,18 +22,22 @@ export function TabList({ tabs, onTabsChange, onRemoveTab, onRemoveToolbar, onCh
         tabIdsRef.current.set(tab, newId);
         return newId;
     }, []);
-    return (_jsx(DragList, { dragListId: "TABS", orientation: "horizontal", dragStrategy: "proxy", preserveDragSpace: true, onDragProxyMove: defaultDragProxyMove, onDrop: (sortedIndexes) => {
+    return (_jsx(DragList, { dragListId: tabsListId, orientation: isRows ? 'vertical' : 'horizontal', dragStrategy: "proxy", preserveDragSpace: true, onDragProxyMove: defaultDragProxyMove, onDrop: (sortedIndexes) => {
             const newTabs = sortedIndexes.map((i) => tabs[i]);
             onTabsChange(newTabs);
-        }, children: (listDomProps) => (_jsxs("div", { ...listDomProps, className: clsx('ab-ModuleSelector__TabList twa:flex twa:flex-1 twa:overflow-auto', listDomProps.className), "data-name": "dashboard-tabs", children: [tabs.map((tab, tabIndex) => {
+        }, children: (listDomProps) => (_jsxs("div", { ...listDomProps, className: cn('ab-ModuleSelector__TabList twa:flex', isRows
+                ? 'ab-ModuleSelector__TabList--rows twa:flex-col twa:gap-2'
+                : 'twa:flex-1 twa:overflow-auto', listDomProps.className), "data-name": "dashboard-tabs", children: [tabs.map((tab, tabIndex) => {
                     const tabId = getTabStableId(tab);
-                    return (_jsx(TabItem, { disabled: disabled, tabId: tabId, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, tab: tab, onRemove: () => onRemoveTab(tabIndex), onRemoveToolbar: (toolbarIndex) => onRemoveToolbar(tabIndex, toolbarIndex), onChangeTabName: (tabName) => onChangeTabName(tabIndex, tabName) }, tabIndex));
-                }), !disabled && onNewTab ? (_jsx(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, children: _jsxs("div", { className: "twa:text-8 twa:flex twa:flex-col twa:gap-4 twa:items-center twa:italic", children: [_jsx(Icon, { name: "plus", size: 32 }), "Click to add tab"] }) })) : null] })) }));
+                    return (_jsx(TabItem, { disabled: disabled, variant: variant, tabId: tabId, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, tab: tab, onRemove: () => onRemoveTab(tabIndex), onRemoveToolbar: (toolbarIndex) => onRemoveToolbar(tabIndex, toolbarIndex), onChangeTabName: (tabName) => onChangeTabName(tabIndex, tabName) }, tabIndex));
+                }), !disabled && onNewTab ? (isRows ? (_jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:rounded-standard twa:border twa:border-dashed twa:cursor-pointer twa:px-3 twa:py-2 twa:text-sm twa:italic twa:hover:bg-primarylight", onClick: onNewTab, children: [_jsx(Icon, { name: "plus", size: 16 }), "Add tab"] })) : (_jsx(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, children: _jsxs("div", { className: "twa:text-8 twa:flex twa:flex-col twa:gap-4 twa:items-center twa:italic", children: [_jsx(Icon, { name: "plus", size: 32 }), "Click to add tab"] }) }))) : null] })) }));
 }
-export function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRemove, onRemoveToolbar, onChangeTabName, disabled, }) {
+export function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRemove, onRemoveToolbar, onChangeTabName, disabled, variant = 'columns', }) {
     const context = React.useContext(DragAndDropContext);
     const isDragDisabled = disabled || !context.permittedActions.dragAndDropTab;
-    return (_jsx(DragList.DraggableItem, { dragListId: "TABS", id: tabId, children: (itemDomProps) => {
+    const isRows = variant === 'rows';
+    const tabsListId = scopeListId(context.dragScope, 'TABS');
+    return (_jsx(DragList.DraggableItem, { dragListId: tabsListId, id: scopeDragId(context.dragScope, tabId), children: (itemDomProps) => {
             const { onPointerDown, ...restDomProps } = itemDomProps;
             let showHeader = true;
             if (tab.Name === '' &&
@@ -37,57 +45,63 @@ export function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRemove, on
                 !context.permittedActions.deleteTab) {
                 showHeader = false;
             }
-            return (_jsxs("div", { ...restDomProps, className: clsx('twa:bg-defaultbackground', 'twa:select-none', 'ab-ModuleSelector__TabItem twa:min-w-32', restDomProps.className), "data-name": "dashboard-tab", children: [showHeader ? (_jsxs("div", { className: "ab-ModuleSelector__TabItem__header", children: [_jsx("div", { ...(!isDragDisabled ? { onPointerDown } : {}), style: context.permittedActions.dragAndDropTab ? {} : { display: 'none' }, children: _jsx(Icon, { name: "drag" }) }), context.permittedActions.editTabName ? (_jsx("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, onChange: (event) => {
+            return (_jsxs("div", { ...restDomProps, className: cn('twa:bg-background', 'twa:select-none', 'ab-ModuleSelector__TabItem', isRows ? 'ab-ModuleSelector__TabItem--row' : 'twa:min-w-32', restDomProps.className), "data-name": "dashboard-tab", children: [showHeader ? (_jsxs("div", { className: cn('ab-ModuleSelector__TabItem__header', isRows && 'ab-ModuleSelector__TabItem__header--row'), children: [_jsx("div", { ...(!isDragDisabled ? { onPointerDown } : {}), style: context.permittedActions.dragAndDropTab ? {} : { display: 'none' }, children: _jsx(Icon, { name: "drag" }) }), context.permittedActions.editTabName ? (_jsx("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, placeholder: isRows ? 'Tab name' : undefined, onChange: (event) => {
                                     onChangeTabName(event.target.value);
-                                } })) : (tab.Name), context.permittedActions.deleteTab && (_jsx(SimpleButton, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove }))] })) : null, _jsx(ToolbarList, { disabled: disabled, toolbars: tab.Items, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, onRemove: onRemoveToolbar })] }));
+                                } })) : (tab.Name), context.permittedActions.deleteTab && (_jsx(SimpleButton, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove }))] })) : null, _jsx(ToolbarList, { disabled: disabled, toolbars: tab.Items, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, onRemove: onRemoveToolbar, compact: isRows, embedded: isRows, orientation: isRows ? 'horizontal' : 'vertical' })] }));
         } }));
 }
-export function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove, disabled, }) {
+export function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove, disabled, orientation = 'vertical', compact = false, embedded = false, }) {
+    const { dragScope, unusedListIds } = React.useContext(DragAndDropContext);
+    const listId = String(tabIndex);
+    const scopedListId = scopeListId(dragScope, listId);
     const acceptDropsFrom = React.useMemo(() => {
-        const sources = ['UNUSED'];
+        const sources = unusedListIds.map((unusedListId) => scopeListId(dragScope, unusedListId));
         tabs.forEach((_, i) => {
             if (i !== tabIndex)
-                sources.push(String(i));
+                sources.push(scopeListId(dragScope, String(i)));
         });
         return sources;
-    }, [tabIndex, tabs]);
-    return (_jsx(DragList, { dragListId: String(tabIndex), orientation: "vertical", acceptDropsFrom: [...acceptDropsFrom, String(tabIndex)], onDragProxyMove: defaultDragProxyMove, 
+    }, [dragScope, unusedListIds, tabIndex, tabs]);
+    return (_jsx(DragList, { dragListId: scopedListId, orientation: orientation, acceptDropsFrom: [...acceptDropsFrom, scopedListId], onDragProxyMove: defaultDragProxyMove, 
         // this is called when reordering inside the same list
         onDrop: (sortedIndexes) => {
             const newItems = sortedIndexes.map((i) => toolbars[i]);
             onTabsChange(tabs.map((t, i) => (i === tabIndex ? { ...t, Items: newItems } : t)));
         }, shouldAcceptDrop: ({ dragItem, dragSourceListId }) => {
-            const dragItemId = dragItem.id;
-            // if the tab contains an item with the same id, don't accept the drop
-            if (dragSourceListId != String(tabIndex) && tabs[tabIndex].Items.includes(dragItemId)) {
-                return false;
+            const toolbarId = unscopeDragId(dragItem.id);
+            const sourceTabIndex = tabIndexFromScopedListId(dragSourceListId);
+            if (sourceTabIndex === tabIndex) {
+                return true;
             }
-            return true;
+            return !toolbars.includes(toolbarId);
         }, 
         // this is called when dropping an item from a different list
-        onAcceptDrop: ({ dragItemId, dragSourceListId, dropIndex }) => {
-            const newTabs = tabs.map((tab, i) => {
-                let items = [...tab.Items];
-                if (dragSourceListId !== 'UNUSED' && i === Number(dragSourceListId)) {
-                    items = items.filter((item) => item !== dragItemId);
-                }
-                if (i === tabIndex) {
-                    items.splice(dropIndex, 0, dragItemId);
+        onAcceptDrop: ({ dragItemId, dropIndex }) => {
+            const toolbarId = unscopeDragId(dragItemId);
+            onTabsChange(tabs.map((tab, i) => {
+                if (i !== tabIndex || tab.Items.includes(toolbarId)) {
+                    return tab;
                 }
+                const items = [...tab.Items];
+                items.splice(Math.min(dropIndex, items.length), 0, toolbarId);
                 return { ...tab, Items: items };
-            });
-            onTabsChange(newTabs);
-        }, children: (listDomProps, context) => (_jsxs(Box, { ...listDomProps, className: clsx('ab-ModuleSelector__ToolbarList', listDomProps.className, {
-                'twa:bg-(--ab-dashboard-tab-drop-target__background) ab-ModuleSelector__ToolbarList--accent-drop': context.dropTargetListId === String(tabIndex) && context.status === 'accepted',
-                'twa:bg-error/30 ab-ModuleSelector__ToolbarList--reject-drop': context.dropTargetListId === String(tabIndex) && context.status === 'rejected',
-            }), "data-name": "dashboard-toolbar-drop-target", children: [toolbars?.map((toolbar, toolbarIndex) => (_jsx(ToolbarItem, { disabled: disabled, toolbar: toolbar, onRemove: () => onRemove(toolbarIndex) }, toolbar))), toolbars.length === 0 ? (_jsx("div", { className: "ab-ModuleSelector__ToolbarList__placeholder twa:flex twa:items-center twa:justify-center twa:h-full twa:italic twa:text-center", children: "Drag and drop toolbar here" })) : null] })) }));
+            }));
+        }, children: (listDomProps, context) => (_jsxs(Box, { ...listDomProps, className: cn('ab-ModuleSelector__ToolbarList', listDomProps.className, {
+                'ab-ModuleSelector__ToolbarList--compact': compact,
+                'ab-ModuleSelector__ToolbarList--embedded': embedded,
+                'ab-ModuleSelector__ToolbarList--horizontal': orientation === 'horizontal',
+                'twa:bg-(--ab-dashboard-tab-drop-target__background) ab-ModuleSelector__ToolbarList--accent-drop': context.dropTargetListId === scopedListId && context.status === 'accepted',
+                'twa:bg-error/30 ab-ModuleSelector__ToolbarList--reject-drop': context.dropTargetListId === scopedListId && context.status === 'rejected',
+            }), "data-name": "dashboard-toolbar-drop-target", children: [toolbars?.map((toolbar, toolbarIndex) => (_jsx(ToolbarItem, { disabled: disabled, compact: compact, toolbar: toolbar, onRemove: () => onRemove(toolbarIndex) }, toolbar))), toolbars.length === 0 ? (_jsx("div", { className: cn('ab-ModuleSelector__ToolbarList__placeholder twa:italic twa:text-center', compact
+                        ? 'twa:flex twa:items-center twa:min-h-[2.5rem] twa:px-2 twa:text-sm'
+                        : 'twa:flex twa:items-center twa:justify-center twa:h-full'), children: "Drag and drop toolbar here" })) : null] })) }));
 }
-export function ToolbarItem({ toolbar, onRemove, disabled, }) {
-    const { availableItems } = React.useContext(DragAndDropContext);
+export function ToolbarItem({ toolbar, onRemove, disabled, compact = false, }) {
+    const { availableItems, dragScope } = React.useContext(DragAndDropContext);
     const currentItem = availableItems.find((t) => t.Id === toolbar);
     const title = currentItem ? currentItem.Title : toolbar;
-    return (_jsx(DragList.DraggableItem, { id: toolbar, children: (itemDomProps) => {
+    return (_jsx(DragList.DraggableItem, { id: scopeDragId(dragScope, toolbar), children: (itemDomProps) => {
             const { onPointerDown, ...restDomProps } = itemDomProps;
-            return (_jsxs(Flex, { ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: clsx('ab-ModuleSelector__ToolbarItem twa:mb-1 twa:pl-1 twa:text-3', 'twa:bg-primarylight', restDomProps.className), alignItems: "center", children: [_jsx("div", { className: "twa:flex-1", children: title }), _jsx(SimpleButton, { disabled: disabled, icon: "close", variant: "text", className: "twa:p-1", onClick: onRemove })] }));
+            return (_jsxs(Flex, { ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: cn('ab-ModuleSelector__ToolbarItem ab-ModuleSelector__DraggableChip twa:text-3 twa:rounded-standard twa:gap-1', compact ? 'twa:px-2 twa:py-1 twa:shrink-0' : 'twa:mb-1 twa:pl-1 twa:pr-0', restDomProps.className), alignItems: "center", children: [_jsx(Icon, { name: "drag", className: "twa:shrink-0 twa:opacity-60", size: 14 }), _jsx("div", { className: "twa:flex-1 twa:min-w-0", children: title }), _jsx(SimpleButton, { disabled: disabled, icon: "close", variant: "text", className: "twa:p-1", onClick: onRemove })] }));
         } }));
 }

package/src/components/DragAndDropContext/UnusedPanel.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
-export declare function UnusedPanel({ items, disabled, title, dragItemText, }: {
-    title: string;
+export declare function UnusedPanel({ items, disabled, title, dragItemText, listId, }: {
+    title?: string;
     items: string[];
     disabled: boolean;
-    dragItemText: string;
+    dragItemText?: string;
+    listId?: string;
 }): React.JSX.Element;

package/src/components/DragAndDropContext/UnusedPanel.js

@@ -1,24 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { defaultDragProxyMove, DragList } from '../dnd';
 import { DragAndDropContext } from './DragAndDropContext';
-import { Box } from '../Flex';
-import clsx from 'clsx';
-export function UnusedPanel({ items, disabled, title, dragItemText, }) {
-    return (_jsxs(Box, { className: "ab-ModuleSelector__UnusedPanel twa:mb-2 twa:pb-1", "data-name": "unusedpanel-items", children: [_jsxs(Box, { className: "twa:p-2", children: [_jsx("b", { children: title }), " (", dragItemText, ")"] }), _jsx(UnusedItemList, { disabled: disabled, items: items })] }));
+import { scopeDragId, scopeListId } from './dragScope';
+import { Box, Flex } from '../Flex';
+import { Icon } from '../icons';
+import { cn } from '../../lib/utils';
+export function UnusedPanel({ items, disabled, title, dragItemText, listId = 'UNUSED', }) {
+    const showHeader = Boolean(title);
+    return (_jsxs(Box, { className: "ab-ModuleSelector__UnusedPanel twa:mb-2 twa:pb-1", "data-name": "unusedpanel-items", children: [showHeader ? (_jsxs(Box, { className: "twa:p-2", children: [_jsx("b", { children: title }), dragItemText ? _jsxs(_Fragment, { children: [" (", dragItemText, ")"] }) : null] })) : null, _jsx(UnusedItemList, { disabled: disabled, items: items, listId: listId })] }));
 }
 const EMPTY_ARRAY = [];
-function UnusedItemList({ items, disabled }) {
-    return (_jsx(DragList, { dragStrategy: "proxy", preserveDragSpace: true, dragListId: "UNUSED", orientation: "horizontal", onDragProxyMove: defaultDragProxyMove, acceptDropsFrom: EMPTY_ARRAY, onDragProxySetup: ({ proxyElement }) => {
+function UnusedItemList({ items, disabled, listId = 'UNUSED', }) {
+    const { dragScope } = React.useContext(DragAndDropContext);
+    return (_jsx(DragList, { dragStrategy: "proxy", preserveDragSpace: true, dragListId: scopeListId(dragScope, listId), orientation: "horizontal", onDragProxyMove: defaultDragProxyMove, acceptDropsFrom: EMPTY_ARRAY, onDragProxySetup: ({ proxyElement }) => {
             proxyElement.classList.add('twa:shadow-md');
-        }, onDrop: () => { }, children: (listDomProps) => (_jsx("div", { ...listDomProps, "data-name": "unusedpanel-items-list", className: clsx('twa:px-2 twa:flex-wrap twa:flex twa:flex-row twa:gap-1', listDomProps.className), children: items.map((unusedItem) => (_jsx(UnusedItem, { disabled: disabled, unusedItem: unusedItem }, unusedItem))) })) }));
+        }, onDrop: () => { }, children: (listDomProps) => (_jsx("div", { ...listDomProps, "data-name": "unusedpanel-items-list", className: cn('twa:px-2 twa:flex-wrap twa:flex twa:flex-row twa:gap-1', listDomProps.className), children: items.map((unusedItem) => (_jsx(UnusedItem, { disabled: disabled, unusedItem: unusedItem }, unusedItem))) })) }));
 }
 function UnusedItem({ unusedItem, disabled }) {
-    const { availableItems } = React.useContext(DragAndDropContext);
+    const { availableItems, dragScope } = React.useContext(DragAndDropContext);
     const currentItem = availableItems.find((t) => t.Id === unusedItem);
     const title = currentItem ? currentItem.Title : unusedItem;
-    return (_jsx(DragList.DraggableItem, { id: unusedItem, children: (itemDomProps) => {
+    return (_jsx(DragList.DraggableItem, { id: scopeDragId(dragScope, unusedItem), children: (itemDomProps) => {
             const { onPointerDown, ...restDomProps } = itemDomProps;
-            return (_jsx("div", { "data-name": "unused-item", ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: clsx('twa:rounded-md twa:text-sm twa:text-text-on-primary twa:p-2 twa:select-none', 'twa:bg-primary', restDomProps.className), children: title }));
+            return (_jsxs(Flex, { "data-name": "unused-item", alignItems: "center", ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: cn('ab-ModuleSelector__DraggableChip twa:rounded-standard twa:text-sm twa:px-2 twa:py-1 twa:select-none twa:gap-1', restDomProps.className), children: [_jsx(Icon, { name: "drag", className: "twa:shrink-0 twa:opacity-60", size: 14 }), _jsx("span", { children: title })] }));
         } }));
 }

package/src/components/DragAndDropContext/dragScope.d.ts

@@ -0,0 +1,6 @@
+export declare function scopeDragId(dragScope: string, id: string): string;
+export declare function unscopeDragId(scopedId: string): string;
+export declare function scopeListId(dragScope: string, listId: string): string;
+export declare function unscopeListId(scopedListId: string): string;
+export declare function tabIndexFromScopedListId(scopedListId: string): number | null;
+export declare function isScopedUnusedList(scopedListId: string): boolean;

package/src/components/DragAndDropContext/dragScope.js

@@ -0,0 +1,26 @@
+const SCOPE_SEP = '::';
+export function scopeDragId(dragScope, id) {
+    return `${dragScope}${SCOPE_SEP}${id}`;
+}
+export function unscopeDragId(scopedId) {
+    const sep = scopedId.indexOf(SCOPE_SEP);
+    return sep === -1 ? scopedId : scopedId.slice(sep + SCOPE_SEP.length);
+}
+export function scopeListId(dragScope, listId) {
+    return scopeDragId(dragScope, listId);
+}
+export function unscopeListId(scopedListId) {
+    return unscopeDragId(scopedListId);
+}
+export function tabIndexFromScopedListId(scopedListId) {
+    const listId = unscopeListId(scopedListId);
+    if (listId === 'UNUSED' || listId.startsWith('UNUSED-') || listId === 'TABS') {
+        return null;
+    }
+    const index = Number(listId);
+    return Number.isNaN(index) ? null : index;
+}
+export function isScopedUnusedList(scopedListId) {
+    const listId = unscopeListId(scopedListId);
+    return listId === 'UNUSED' || listId.startsWith('UNUSED-');
+}

package/src/components/DragAndDropContext/types.d.ts

@@ -6,3 +6,17 @@ export interface ModuleDraggableItem {
     Id: string;
     Title: string;
 }
+export interface UnusedItemGroup {
+    /** Drag-list id suffix (scoped under `dragScope`). Defaults to `UNUSED-{index}`. */
+    listId?: string;
+    title: string;
+    help?: string;
+    items: string[];
+    /**
+     * Optional flex weight when groups are laid out in a row. If any group
+     * sets this, the weights are used as `flex-grow` values (so e.g. 40 / 60
+     * gives a 40% / 60% split). When omitted on every group the layout falls
+     * back to equal-width columns.
+     */
+    flex?: number;
+}

package/src/components/Dropdown/Arrows.js

@@ -5,7 +5,6 @@ const Arrows = () => {
             display: 'flex',
             flexFlow: 'column',
             position: 'absolute',
-            // background: 'var(--ab-color-defaultbackground)',
             fill: 'var(--ab-cmp-dropdown__fill)',
             top: '50%',
             right: 'var(--ab-base-space)',

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

@@ -1,28 +1,36 @@
 import * as React from 'react';
+import { AccessLevel } from '../../AdaptableState/Common/Entitlement';
 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;
-    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;
+export type NewDropdownButtonItem = {
+    label?: React.ReactNode;
+    tooltip?: string;
+    onClick?: (e?: React.SyntheticEvent) => void;
+    disabled?: boolean;
+    dataName?: string;
+    separator?: boolean;
+    icon?: React.ReactNode;
+    /** When `false`, the menu stays open after this item is clicked (default `true`). */
+    closeOnClick?: boolean;
 };
-declare const DropdownButton: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<DropdownButtonProps>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export default DropdownButton;
+export type NewDropdownButtonProps = {
+    items: NewDropdownButtonItem[];
+    children?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    tooltip?: string;
+    variant?: SimpleButtonProps['variant'];
+    size?: SimpleButtonProps['size'];
+    accessLevel?: AccessLevel;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    align?: 'start' | 'center' | 'end';
+    'data-name'?: string;
+    tone?: SimpleButtonProps['tone'];
+    showDivider?: boolean;
+    id?: string;
+    'data-id'?: string;
+    'data-value'?: string | number;
+    'aria-label'?: string;
+    onMouseDown?: React.MouseEventHandler;
+    extraWidthChars?: number;
+};
+export declare const NewDropdownButton: React.ForwardRefExoticComponent<NewDropdownButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/src/components/DropdownButton/index.js

@@ -1,162 +1,28 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { cloneElement, useRef } from 'react';
-import join from '../utils/join';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../ui/dropdown-menu';
+import { NewTooltip } from '../NewTooltip';
+import { cn } from '../../lib/utils';
+import { ChevronDownIcon } from 'lucide-react';
 import SimpleButton from '../SimpleButton';
-import useExpanded from './useExpanded';
-import renderItem from './renderItem';
-import OverlayTrigger from '../OverlayTrigger';
-import clsx from 'clsx';
-export const DROPDOWN_ICON = (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", children: _jsx("path", { d: "M7 10l5 5 5-5H7z" }) }));
-const spacer = _jsx("div", { className: "twa:flex-1" });
-const baseClassName = 'ab-DropdownButton';
-const defaultListItemStyle = {
-    padding: 'var(--ab-cmp-dropdownbutton-list-item__padding)',
-};
-const DropdownButton = React.forwardRef((props, theRef) => {
-    let { columns, overlayProps, listOffset = 10, collapseOnItemClick = true, focusOnClear = true, idProperty = 'id', isItemDisabled, items, children, listMinWidth = 100, listStyle, listItemStyle, listItemClassName, constrainTo, showClearButton = false, onClear, clearButtonProps, onExpand, onCollapse, showToggleIcon = true, ...domProps } = props;
-    isItemDisabled = isItemDisabled || ((item) => item.disabled);
-    if (!columns) {
-        columns = ['icon', 'label'];
-    }
-    let content;
-    if (Array.isArray(items)) {
-        content = items.map((item, index) => {
-            if (item.separator) {
-                return (_jsx("tr", { className: `${baseClassName}__separator`, children: _jsx("td", { colSpan: 2 }) }, index));
-            }
-            if (typeof listItemStyle === 'function') {
-                listItemStyle = listItemStyle(item, index);
-            }
-            const disabled = isItemDisabled(item);
-            const itemStyle = { ...defaultListItemStyle, ...listItemStyle };
-            const itemClassName = join(`${baseClassName}__list-item`, item.clickable === false || disabled
-                ? `${baseClassName}__list-item--not-clickable`
-                : `${baseClassName}__list-item--clickable`, disabled ? `${baseClassName}__list-item--disabled` : '', listItemClassName);
-            const getItemHandler = (eventName) => {
-                return (e) => {
-                    if (!disabled) {
-                        if (item[eventName]) {
-                            item[eventName](e, item);
-                        }
+export const NewDropdownButton = React.forwardRef((props, ref) => {
+    const { items, children, className, disabled, tooltip, variant = 'text', accessLevel, side = 'bottom', align = 'start', 'data-name': dataName, tone = 'neutral', showDivider = true, id, 'data-id': dataId, 'data-value': dataValue, 'aria-label': ariaLabel, onMouseDown, } = props;
+    const isHidden = accessLevel === 'Hidden';
+    const isReadOnly = accessLevel === 'ReadOnly';
+    const isDisabled = disabled || isHidden || isReadOnly;
+    const trigger = (_jsxs(DropdownMenuTrigger, { render: _jsx(SimpleButton, { ref: ref, tone: tone, variant: variant, disabled: isDisabled, className: cn(className, 'twa:pr-1 twa:active:translate-y-0 twa:flex-row twa:flex-none', variant !== 'text' ? 'twa:gap-1' : 'twa:gap-0.5'), "data-name": dataName, id: id, "data-id": dataId, "data-value": dataValue, "aria-label": ariaLabel, onMouseDown: onMouseDown }), children: [children, showDivider && (_jsx("div", { className: cn('twa:h-full twa:my-1', variant !== 'text' ? 'twa:border-l twa:border-border' : '') })), _jsx(ChevronDownIcon, { className: "twa:size-3.5 twa:opacity-60 twa:transition-transform twa:duration-200 twa:[[data-popup-open]_&]:rotate-180" })] }));
+    const maxLabelLength = items.reduce((max, item) => Math.max(max, typeof item.label === 'string'
+        ? item.label.length
+        : typeof item.tooltip === 'string'
+            ? item.tooltip.length
+            : 0), 0);
+    return (_jsxs(DropdownMenu, { children: [tooltip ? _jsx(NewTooltip, { label: tooltip, children: trigger }) : trigger, _jsx(DropdownMenuContent, { side: side, align: align, style: {
+                    // minWidth: `min(max(${maxLabelLength + 5}ch, calc(var(--ab-base-space) * 32)),80vw)`,
+                    width: `max(${maxLabelLength + (props.extraWidthChars ?? 3)}ch, calc(var(--ab-base-space) * 20), var(--anchor-width))`,
+                }, children: items.map((item, index) => {
+                    if (item.separator) {
+                        return _jsx(DropdownMenuSeparator, {}, index);
                     }
-                    if (collapseOnItemClick) {
-                        if (!disabled) {
-                            setExpanded(false);
-                        }
-                        buttonRef.current?.focus();
-                    }
-                    else {
-                        e.nativeEvent.preventCollapse = true;
-                    }
-                };
-            };
-            const domProps = {};
-            if (item.onChange) {
-                domProps.onChange = getItemHandler('onChange');
-            }
-            const itemDataName = item['dataName'] || (typeof item['label'] === 'string' ? item['label'] : undefined);
-            if (itemDataName) {
-                domProps['data-name'] = itemDataName;
-            }
-            return renderItem({
-                index,
-                idProperty,
-                onItemClick: getItemHandler('onClick'),
-                domProps,
-                className: itemClassName,
-                style: itemStyle,
-                item,
-                columns: columns,
-            });
-        });
-        content = (_jsx("table", { className: `${baseClassName}__content`, children: _jsx("tbody", { children: content }) }));
-    }
-    const dropdownButtonClassName = props.className;
-    const className = join(props.className, baseClassName);
-    const positionerRef = useRef(null);
-    const { expanded, toggle, setExpanded, positionInfo } = useExpanded(props, positionerRef);
-    const { maxHeight: maxListHeight, maxWidth: maxListWidth } = positionInfo;
-    listStyle = {
-        minWidth: typeof maxListWidth === 'number' ? Math.min(listMinWidth, maxListWidth) : listMinWidth,
-        maxHeight: maxListHeight,
-        maxWidth: maxListWidth,
-        ...listStyle,
-    };
-    let icon = expanded
-        ? cloneElement(DROPDOWN_ICON, {
-            style: {
-                ...DROPDOWN_ICON.props.style,
-                transform: 'rotate(180deg) translate3d(0px, -2px, 0px)',
-            },
-        })
-        : DROPDOWN_ICON;
-    const hasClearButton = onClear || showClearButton;
-    const clearButton = hasClearButton ? (_jsx(SimpleButton, { disabled: domProps.disabled, as: "div", onClick: (event) => {
-            event.stopPropagation();
-            if (onClear) {
-                onClear();
-            }
-            buttonRef.current?.focus();
-        }, className: "twa:ml-2 twa:p-0", variant: 'text', icon: "close", ...clearButtonProps, style: {
-            ...clearButtonProps?.style,
-            visibility: showClearButton ? 'visible' : 'hidden',
-        } })) : null;
-    icon = (_jsxs(_Fragment, { children: [spacer, hasClearButton ? clearButton : null, icon] }));
-    const buttonRef = useRef(null);
-    return (_jsx(OverlayTrigger, { visible: expanded, targetOffset: listOffset, render: () => {
-            return (_jsx("div", { "data-name": `${dropdownButtonClassName || 'dropdown-button-list'}`, style: listStyle, className: `${baseClassName}__list`, onMouseDownCapture: (e) => {
-                    /**
-                     * This stops popups register clicks inside the dropdown
-                     * This is needed for column filter dropdows when redenred
-                     * inside ag-grid column filter
-                     */
-                    if (props.stopPropagationOnOverlay) {
-                        e.stopPropagation();
-                    }
-                }, children: content }));
-        }, ...overlayProps, children: _jsxs(SimpleButton, { iconPosition: "end", ...(showToggleIcon && { icon }), ...domProps, ref: (btn) => {
-                buttonRef.current = btn;
-                if (!theRef) {
-                    return;
-                }
-                if (typeof theRef === 'function') {
-                    theRef(btn);
-                }
-                else {
-                    theRef.current = btn;
-                }
-            }, style: domProps.style, className: clsx(className, {
-                'twa:pr-0': showToggleIcon,
-            }), onClick: (e) => {
-                if (domProps.onClick) {
-                    domProps.onClick(e);
-                }
-                if (e.nativeEvent.preventCollapse && expanded) {
-                    return;
-                }
-                toggle();
-            }, onKeyDown: (e) => {
-                if (domProps.onKeyDown) {
-                    domProps.onKeyDown(e);
-                }
-                if (expanded && e.key === 'Escape') {
-                    toggle();
-                }
-            }, onBlur: (e) => {
-                if (domProps.onBlur) {
-                    domProps.onBlur(e);
-                }
-                setExpanded(false);
-            }, children: [_jsx("div", { ref: positionerRef, tabIndex: -1, style: {
-                        position: 'absolute',
-                        height: '100%',
-                        width: '100%',
-                        zIndex: -1,
-                        pointerEvents: 'none',
-                        opacity: 0,
-                        top: 0,
-                        left: 0,
-                    } }), children] }) }));
+                    return (_jsxs(DropdownMenuItem, { disabled: item.disabled, "data-name": item.dataName, closeOnClick: item.closeOnClick, onClick: (e) => item.onClick?.(e), children: [item.icon, item.label] }, item.dataName ?? index));
+                }) })] }));
 });
-export default DropdownButton;

package/src/components/EmptyContent/index.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
 import { Box, Flex } from '../Flex';
-import clsx from 'clsx';
 const baseClassName = 'ab-EmptyContent';
 const EmptyContent = ({ children, className, style, ...flexProps }) => {
     if (typeof children === 'string') {
         children = _jsx("p", { children: children });
     }
-    return (_jsx(Box, { className: `${baseClassName}__wrapper twa:flex-1 twa:relative twa:size-full`, children: _jsx(Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...flexProps, className: clsx('twa:absolute twa:inset-0 twa:text-3 twa:text-center twa:p-4', 'twa:[&_p]:text-primary-foreground', baseClassName, className), style: style, children: children }) }));
+    return (_jsx(Box, { className: `${baseClassName}__wrapper twa:flex-1 twa:relative twa:size-full`, children: _jsx(Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...flexProps, className: cn('twa:absolute twa:inset-0 twa:text-3 twa:text-center twa:p-4', 'twa:[&_p]:text-primary-foreground', baseClassName, className), style: style, children: children }) }));
 };
 export default EmptyContent;

package/src/components/ErrorBox/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
 import { Box } from '../Flex';
-import clsx from 'clsx';
 export const baseClassName = 'ab-ErrorBox';
 const ErrorBox = (props) => {
-    return (_jsx(Box, { ...props, className: clsx('twa:p-3 twa:rounded-standard twa:bg-error twa:text-text-on-error', props.className, baseClassName) }));
+    return (_jsx(Box, { ...props, className: cn('twa:p-3 twa:rounded-standard twa:bg-destructive twa:text-destructive-foreground', props.className, baseClassName) }));
 };
 export default ErrorBox;

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -1,5 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as parser from '../../parser/src';
+import { cn } from '../../lib/utils';
 import * as React from 'react';
 import ErrorBox from '../ErrorBox';
 import { useSelectionRange } from '../utils/useSelectionRange';
@@ -21,7 +22,6 @@ import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import Radio from '../Radio';
 import { Box, Flex } from '../Flex';
 import { AdaptableFormControlTextClear } from '../../View/Components/Forms/AdaptableFormControlTextClear';
-import clsx from 'clsx';
 const filterableCategories = [
     'dates',
     'logical',
@@ -116,7 +116,7 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
      * - mouse leaves
      * - a function is inserted
      */
-    return (_jsx(OverlayTrigger, { ref: dropdownRef, showEvent: "mouseenter", hideEvent: "mouseleave", targetOffset: 5, render: () => (_jsxs(Flex, { className: `${baseClassName}__dropdown-functions-list-wrapper twa:max-w-[60vw] twa:shadow-md twa:bg-defaultbackground twa:text-foreground twa:text-3 twa:rounded-standard twa:p-3`, flexDirection: "column", onMouseLeave: () => hidePopup(), children: [_jsx(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", children: categoryOptions.map((option, index) => {
+    return (_jsx(OverlayTrigger, { ref: dropdownRef, showEvent: "mouseenter", hideEvent: "mouseleave", targetOffset: 5, render: () => (_jsxs(Flex, { className: `${baseClassName}__dropdown-functions-list-wrapper twa:max-w-[60vw] twa:shadow-md twa:bg-background twa:text-foreground twa:text-3 twa:rounded-standard twa:p-3`, flexDirection: "column", onMouseLeave: () => hidePopup(), children: [_jsx(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", children: categoryOptions.map((option, index) => {
                         return (_jsx(Radio, { onFocus: (event) => {
                                 event.preventDefault();
                                 event.stopPropagation();
@@ -151,8 +151,8 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
                                             return (_jsx(Box, { onMouseEnter: () => setOverFunction(functionName), onClick: () => hidePopup(), children: functionName === 'VAR' ? (_jsx(VarEditorButton, { className: buttonClassName }, functionName)) : (_jsx(EditorButton, { data: getEditorButtonData(functionName), className: buttonClassName, children: functionName }, functionName)) }, functionName));
                                         })
                                             .filter(Boolean);
-                                        return (_jsxs(Box, { className: clsx('twa:mb-2 twa:mx-1', fns.length === 0 ? 'twa:hidden' : ''), children: [_jsx(Tag, { className: "twa:mb-1 twa:bg-primarylight twa:text-text-on-primary twa:w-full", children: StringExtensions.Humanize(groupName) }), fns] }, groupName));
-                                    }) })] }), _jsx(Box, { className: clsx(`${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'), children: overFunction ? (_jsxs(_Fragment, { children: [_jsx(Tag, { className: "twa:bg-accent twa:text-accent-foreground", children: overFunction }), _jsx(ExpressionFunctionDocumentation, { expressionFunction: expressionFunctions[overFunction] })] })) : (_jsx(Flex, { className: "twa:size-full twa:items-center twa:justify-center twa:text-2 twa:italic", children: _jsxs("ul", { children: [_jsxs("li", { children: ["Hover over a Function to learn more", _jsx("br", {}), _jsx("br", {})] }), _jsx("li", { children: "Click a Function to add it to the Expression in the Editor" })] }) })) })] })] })), children: _jsx(SimpleButton, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', className: "twa:mr-1", children: _jsx(Flex, { className: "twa:mr-1 twa:text-2", children: _jsx(Icon, { name: "equation" }) }) }) }));
+                                        return (_jsxs(Box, { className: cn('twa:mb-2 twa:mx-1', fns.length === 0 ? 'twa:hidden' : ''), children: [_jsx(Tag, { className: "twa:mb-1 twa:bg-primarylight twa:text-primary-foreground twa:w-full", children: StringExtensions.Humanize(groupName) }), fns] }, groupName));
+                                    }) })] }), _jsx(Box, { className: cn(`${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'), children: overFunction ? (_jsxs(_Fragment, { children: [_jsx(Tag, { className: "twa:bg-accent twa:text-accent-foreground", children: overFunction }), _jsx(ExpressionFunctionDocumentation, { expressionFunction: expressionFunctions[overFunction] })] })) : (_jsx(Flex, { className: "twa:size-full twa:items-center twa:justify-center twa:text-2 twa:italic", children: _jsxs("ul", { children: [_jsxs("li", { children: ["Hover over a Function to learn more", _jsx("br", {}), _jsx("br", {})] }), _jsx("li", { children: "Click a Function to add it to the Expression in the Editor" })] }) })) })] })] })), children: _jsx(SimpleButton, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', className: "twa:mr-1", children: _jsx(Flex, { className: "twa:mr-1 twa:text-2", children: _jsx(Icon, { name: "equation" }) }) }) }));
 };
 export function BaseEditorInput(props) {
     const { expressionFunctions, testData, style, type } = props;

package/src/components/ExpressionEditor/ExpressionFunctionDocumentation.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tag } from '../Tag';
 import { Box } from '../Flex';
-const signatureClassName = 'twa:m-0 twa:whitespace-pre-wrap twa:bg-primary twa:text-text-on-primary twa:rounded-standard twa:p-1 twa:inline-block';
+const signatureClassName = 'twa:m-0 twa:whitespace-pre-wrap twa:bg-primary twa:text-primary-foreground twa:rounded-standard twa:p-1 twa:inline-block';
 export const ExpressionFunctionDocumentation = (props) => {
     return props.expressionFunction ? (_jsxs(Box, { "data-name": "expression-editor-documentation", className: "twa:my-2 twa:p-2 twa:rounded-standard twa:leading-normal", children: [props.expressionFunction.description && (_jsx(Box, { className: "twa:mb-3 twa:font-bold twa:whitespace-pre-wrap", "data-name": "expression-editor-documentation-description", children: props.expressionFunction.description })), props.expressionFunction.signatures && (_jsxs(Box, { "data-name": "expression-editor-documentation-signatures", children: [_jsx("b", { children: "Signatures" }), _jsx("ul", { className: "twa:flex twa:flex-col twa:gap-1", children: props.expressionFunction.signatures.map((signature, index) => (_jsx("li", { children: _jsx("pre", { className: signatureClassName, children: signature }) }, index))) })] })), props.expressionFunction.examples && (_jsxs(Box, { "data-name": "expression-editor-documentation-examples", children: [_jsx("b", { children: "Examples" }), _jsx("ul", { className: "twa:flex twa:flex-col twa:gap-1", children: props.expressionFunction.examples.map((example, index) => (_jsx("li", { children: _jsx("pre", { className: signatureClassName, children: example }) }, index))) })] })), props.expressionFunction.returnType && (_jsxs(Box, { "data-name": "expression-editor-documentation-examples", children: [_jsx("b", { children: "Return Type" }), _jsx(Tag, { className: "twa:bg-accentlight twa:text-accent twa:ml-3 twa:rounded-full twa:py-1", children: props.expressionFunction.returnType })] }))] })) : null;
 };