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

package/src/components/DragAndDropContext/TabList.js

@@ -11,9 +11,13 @@ const dnd_1 = require("../dnd");
 const icons_1 = require("../icons");
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
 const DragAndDropContext_1 = require("./DragAndDropContext");
+const dragScope_1 = require("./dragScope");
 const Flex_1 = require("../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
-function TabList({ tabs, onTabsChange, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, onNewTab, }) {
+const utils_1 = require("../../lib/utils");
+function TabList({ tabs, onTabsChange, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, onNewTab, variant = 'columns', }) {
+    const isRows = variant === 'rows';
+    const { dragScope } = React.useContext(DragAndDropContext_1.DragAndDropContext);
+    const tabsListId = (0, dragScope_1.scopeListId)(dragScope, 'TABS');
     const tabIdsRef = React.useRef(new WeakMap());
     const nextTabIdRef = React.useRef(0);
     const getTabStableId = React.useCallback((tab) => {
@@ -25,18 +29,22 @@ function TabList({ tabs, onTabsChange, onRemoveTab, onRemoveToolbar, onChangeTab
         tabIdsRef.current.set(tab, newId);
         return newId;
     }, []);
-    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragListId: "TABS", orientation: "horizontal", dragStrategy: "proxy", preserveDragSpace: true, onDragProxyMove: dnd_1.defaultDragProxyMove, onDrop: (sortedIndexes) => {
+    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragListId: tabsListId, orientation: isRows ? 'vertical' : 'horizontal', dragStrategy: "proxy", preserveDragSpace: true, onDragProxyMove: dnd_1.defaultDragProxyMove, onDrop: (sortedIndexes) => {
             const newTabs = sortedIndexes.map((i) => tabs[i]);
             onTabsChange(newTabs);
-        }, children: (listDomProps) => ((0, jsx_runtime_1.jsxs)("div", { ...listDomProps, className: (0, clsx_1.default)('ab-ModuleSelector__TabList twa:flex twa:flex-1 twa:overflow-auto', listDomProps.className), "data-name": "dashboard-tabs", children: [tabs.map((tab, tabIndex) => {
+        }, children: (listDomProps) => ((0, jsx_runtime_1.jsxs)("div", { ...listDomProps, className: (0, utils_1.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 ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)(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, children: (0, jsx_runtime_1.jsxs)("div", { className: "twa:text-8 twa:flex twa:flex-col twa:gap-4 twa:items-center twa:italic", children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "plus", size: 32 }), "Click to add tab"] }) })) : null] })) }));
+                    return ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsxs)(Flex_1.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: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "plus", size: 16 }), "Add tab"] })) : ((0, jsx_runtime_1.jsx)(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, children: (0, jsx_runtime_1.jsxs)("div", { className: "twa:text-8 twa:flex twa:flex-col twa:gap-4 twa:items-center twa:italic", children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "plus", size: 32 }), "Click to add tab"] }) }))) : null] })) }));
 }
-function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRemove, onRemoveToolbar, onChangeTabName, disabled, }) {
+function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRemove, onRemoveToolbar, onChangeTabName, disabled, variant = 'columns', }) {
     const context = React.useContext(DragAndDropContext_1.DragAndDropContext);
     const isDragDisabled = disabled || !context.permittedActions.dragAndDropTab;
-    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList.DraggableItem, { dragListId: "TABS", id: tabId, children: (itemDomProps) => {
+    const isRows = variant === 'rows';
+    const tabsListId = (0, dragScope_1.scopeListId)(context.dragScope, 'TABS');
+    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList.DraggableItem, { dragListId: tabsListId, id: (0, dragScope_1.scopeDragId)(context.dragScope, tabId), children: (itemDomProps) => {
             const { onPointerDown, ...restDomProps } = itemDomProps;
             let showHeader = true;
             if (tab.Name === '' &&
@@ -44,57 +52,63 @@ function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRemove, onRemoveT
                 !context.permittedActions.deleteTab) {
                 showHeader = false;
             }
-            return ((0, jsx_runtime_1.jsxs)("div", { ...restDomProps, className: (0, clsx_1.default)('twa:bg-defaultbackground', 'twa:select-none', 'ab-ModuleSelector__TabItem twa:min-w-32', restDomProps.className), "data-name": "dashboard-tab", children: [showHeader ? ((0, jsx_runtime_1.jsxs)("div", { className: "ab-ModuleSelector__TabItem__header", children: [(0, jsx_runtime_1.jsx)("div", { ...(!isDragDisabled ? { onPointerDown } : {}), style: context.permittedActions.dragAndDropTab ? {} : { display: 'none' }, children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "drag" }) }), context.permittedActions.editTabName ? ((0, jsx_runtime_1.jsx)("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, onChange: (event) => {
+            return ((0, jsx_runtime_1.jsxs)("div", { ...restDomProps, className: (0, utils_1.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 ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('ab-ModuleSelector__TabItem__header', isRows && 'ab-ModuleSelector__TabItem__header--row'), children: [(0, jsx_runtime_1.jsx)("div", { ...(!isDragDisabled ? { onPointerDown } : {}), style: context.permittedActions.dragAndDropTab ? {} : { display: 'none' }, children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "drag" }) }), context.permittedActions.editTabName ? ((0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove }))] })) : null, (0, jsx_runtime_1.jsx)(ToolbarList, { disabled: disabled, toolbars: tab.Items, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, onRemove: onRemoveToolbar })] }));
+                                } })) : (tab.Name), context.permittedActions.deleteTab && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove }))] })) : null, (0, jsx_runtime_1.jsx)(ToolbarList, { disabled: disabled, toolbars: tab.Items, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, onRemove: onRemoveToolbar, compact: isRows, embedded: isRows, orientation: isRows ? 'horizontal' : 'vertical' })] }));
         } }));
 }
-function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove, disabled, }) {
+function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove, disabled, orientation = 'vertical', compact = false, embedded = false, }) {
+    const { dragScope, unusedListIds } = React.useContext(DragAndDropContext_1.DragAndDropContext);
+    const listId = String(tabIndex);
+    const scopedListId = (0, dragScope_1.scopeListId)(dragScope, listId);
     const acceptDropsFrom = React.useMemo(() => {
-        const sources = ['UNUSED'];
+        const sources = unusedListIds.map((unusedListId) => (0, dragScope_1.scopeListId)(dragScope, unusedListId));
         tabs.forEach((_, i) => {
             if (i !== tabIndex)
-                sources.push(String(i));
+                sources.push((0, dragScope_1.scopeListId)(dragScope, String(i)));
         });
         return sources;
-    }, [tabIndex, tabs]);
-    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragListId: String(tabIndex), orientation: "vertical", acceptDropsFrom: [...acceptDropsFrom, String(tabIndex)], onDragProxyMove: dnd_1.defaultDragProxyMove, 
+    }, [dragScope, unusedListIds, tabIndex, tabs]);
+    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragListId: scopedListId, orientation: orientation, acceptDropsFrom: [...acceptDropsFrom, scopedListId], onDragProxyMove: dnd_1.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 = (0, dragScope_1.unscopeDragId)(dragItem.id);
+            const sourceTabIndex = (0, dragScope_1.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 = (0, dragScope_1.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) => ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { ...listDomProps, className: (0, clsx_1.default)('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) => ((0, jsx_runtime_1.jsx)(ToolbarItem, { disabled: disabled, toolbar: toolbar, onRemove: () => onRemove(toolbarIndex) }, toolbar))), toolbars.length === 0 ? ((0, jsx_runtime_1.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) => ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { ...listDomProps, className: (0, utils_1.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) => ((0, jsx_runtime_1.jsx)(ToolbarItem, { disabled: disabled, compact: compact, toolbar: toolbar, onRemove: () => onRemove(toolbarIndex) }, toolbar))), toolbars.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.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] })) }));
 }
-function ToolbarItem({ toolbar, onRemove, disabled, }) {
-    const { availableItems } = React.useContext(DragAndDropContext_1.DragAndDropContext);
+function ToolbarItem({ toolbar, onRemove, disabled, compact = false, }) {
+    const { availableItems, dragScope } = React.useContext(DragAndDropContext_1.DragAndDropContext);
     const currentItem = availableItems.find((t) => t.Id === toolbar);
     const title = currentItem ? currentItem.Title : toolbar;
-    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList.DraggableItem, { id: toolbar, children: (itemDomProps) => {
+    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList.DraggableItem, { id: (0, dragScope_1.scopeDragId)(dragScope, toolbar), children: (itemDomProps) => {
             const { onPointerDown, ...restDomProps } = itemDomProps;
-            return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: (0, clsx_1.default)('ab-ModuleSelector__ToolbarItem twa:mb-1 twa:pl-1 twa:text-3', 'twa:bg-primarylight', restDomProps.className), alignItems: "center", children: [(0, jsx_runtime_1.jsx)("div", { className: "twa:flex-1", children: title }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: disabled, icon: "close", variant: "text", className: "twa:p-1", onClick: onRemove })] }));
+            return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: (0, utils_1.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: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "drag", className: "twa:shrink-0 twa:opacity-60", size: 14 }), (0, jsx_runtime_1.jsx)("div", { className: "twa:flex-1 twa:min-w-0", children: title }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { 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

@@ -6,23 +6,27 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const dnd_1 = require("../dnd");
 const DragAndDropContext_1 = require("./DragAndDropContext");
+const dragScope_1 = require("./dragScope");
 const Flex_1 = require("../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
-function UnusedPanel({ items, disabled, title, dragItemText, }) {
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-ModuleSelector__UnusedPanel twa:mb-2 twa:pb-1", "data-name": "unusedpanel-items", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)("b", { children: title }), " (", dragItemText, ")"] }), (0, jsx_runtime_1.jsx)(UnusedItemList, { disabled: disabled, items: items })] }));
+const icons_1 = require("../icons");
+const utils_1 = require("../../lib/utils");
+function UnusedPanel({ items, disabled, title, dragItemText, listId = 'UNUSED', }) {
+    const showHeader = Boolean(title);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-ModuleSelector__UnusedPanel twa:mb-2 twa:pb-1", "data-name": "unusedpanel-items", children: [showHeader ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)("b", { children: title }), dragItemText ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [" (", dragItemText, ")"] }) : null] })) : null, (0, jsx_runtime_1.jsx)(UnusedItemList, { disabled: disabled, items: items, listId: listId })] }));
 }
 const EMPTY_ARRAY = [];
-function UnusedItemList({ items, disabled }) {
-    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragStrategy: "proxy", preserveDragSpace: true, dragListId: "UNUSED", orientation: "horizontal", onDragProxyMove: dnd_1.defaultDragProxyMove, acceptDropsFrom: EMPTY_ARRAY, onDragProxySetup: ({ proxyElement }) => {
+function UnusedItemList({ items, disabled, listId = 'UNUSED', }) {
+    const { dragScope } = React.useContext(DragAndDropContext_1.DragAndDropContext);
+    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragStrategy: "proxy", preserveDragSpace: true, dragListId: (0, dragScope_1.scopeListId)(dragScope, listId), orientation: "horizontal", onDragProxyMove: dnd_1.defaultDragProxyMove, acceptDropsFrom: EMPTY_ARRAY, onDragProxySetup: ({ proxyElement }) => {
             proxyElement.classList.add('twa:shadow-md');
-        }, onDrop: () => { }, children: (listDomProps) => ((0, jsx_runtime_1.jsx)("div", { ...listDomProps, "data-name": "unusedpanel-items-list", className: (0, clsx_1.default)('twa:px-2 twa:flex-wrap twa:flex twa:flex-row twa:gap-1', listDomProps.className), children: items.map((unusedItem) => ((0, jsx_runtime_1.jsx)(UnusedItem, { disabled: disabled, unusedItem: unusedItem }, unusedItem))) })) }));
+        }, onDrop: () => { }, children: (listDomProps) => ((0, jsx_runtime_1.jsx)("div", { ...listDomProps, "data-name": "unusedpanel-items-list", className: (0, utils_1.cn)('twa:px-2 twa:flex-wrap twa:flex twa:flex-row twa:gap-1', listDomProps.className), children: items.map((unusedItem) => ((0, jsx_runtime_1.jsx)(UnusedItem, { disabled: disabled, unusedItem: unusedItem }, unusedItem))) })) }));
 }
 function UnusedItem({ unusedItem, disabled }) {
-    const { availableItems } = React.useContext(DragAndDropContext_1.DragAndDropContext);
+    const { availableItems, dragScope } = React.useContext(DragAndDropContext_1.DragAndDropContext);
     const currentItem = availableItems.find((t) => t.Id === unusedItem);
     const title = currentItem ? currentItem.Title : unusedItem;
-    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList.DraggableItem, { id: unusedItem, children: (itemDomProps) => {
+    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList.DraggableItem, { id: (0, dragScope_1.scopeDragId)(dragScope, unusedItem), children: (itemDomProps) => {
             const { onPointerDown, ...restDomProps } = itemDomProps;
-            return ((0, jsx_runtime_1.jsx)("div", { "data-name": "unused-item", ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: (0, clsx_1.default)('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 ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { "data-name": "unused-item", alignItems: "center", ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: (0, utils_1.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: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "drag", className: "twa:shrink-0 twa:opacity-60", size: 14 }), (0, jsx_runtime_1.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,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scopeDragId = scopeDragId;
+exports.unscopeDragId = unscopeDragId;
+exports.scopeListId = scopeListId;
+exports.unscopeListId = unscopeListId;
+exports.tabIndexFromScopedListId = tabIndexFromScopedListId;
+exports.isScopedUnusedList = isScopedUnusedList;
+const SCOPE_SEP = '::';
+function scopeDragId(dragScope, id) {
+    return `${dragScope}${SCOPE_SEP}${id}`;
+}
+function unscopeDragId(scopedId) {
+    const sep = scopedId.indexOf(SCOPE_SEP);
+    return sep === -1 ? scopedId : scopedId.slice(sep + SCOPE_SEP.length);
+}
+function scopeListId(dragScope, listId) {
+    return scopeDragId(dragScope, listId);
+}
+function unscopeListId(scopedListId) {
+    return unscopeDragId(scopedListId);
+}
+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;
+}
+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

@@ -7,7 +7,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,166 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DROPDOWN_ICON = void 0;
+exports.NewDropdownButton = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const react_1 = require("react");
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
+const dropdown_menu_1 = require("../ui/dropdown-menu");
+const NewTooltip_1 = require("../NewTooltip");
+const utils_1 = require("../../lib/utils");
+const lucide_react_1 = require("lucide-react");
 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 = ((0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M7 10l5 5 5-5H7z" }) }));
-const spacer = (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)("tr", { className: `${baseClassName}__separator`, children: (0, jsx_runtime_1.jsx)("td", { colSpan: 2 }) }, index));
-            }
-            if (typeof listItemStyle === 'function') {
-                listItemStyle = listItemStyle(item, index);
-            }
-            const disabled = isItemDisabled(item);
-            const itemStyle = { ...defaultListItemStyle, ...listItemStyle };
-            const itemClassName = (0, join_1.default)(`${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);
-                        }
+exports.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 = ((0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuTrigger, { render: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { ref: ref, tone: tone, variant: variant, disabled: isDisabled, className: (0, utils_1.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 && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('twa:h-full twa:my-1', variant !== 'text' ? 'twa:border-l twa:border-border' : '') })), (0, jsx_runtime_1.jsx)(lucide_react_1.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 ((0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenu, { children: [tooltip ? (0, jsx_runtime_1.jsx)(NewTooltip_1.NewTooltip, { label: tooltip, children: trigger }) : trigger, (0, jsx_runtime_1.jsx)(dropdown_menu_1.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 (0, jsx_runtime_1.jsx)(dropdown_menu_1.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 (0, renderItem_1.default)({
-                index,
-                idProperty,
-                onItemClick: getItemHandler('onClick'),
-                domProps,
-                className: itemClassName,
-                style: itemStyle,
-                item,
-                columns: columns,
-            });
-        });
-        content = ((0, jsx_runtime_1.jsx)("table", { className: `${baseClassName}__content`, children: (0, jsx_runtime_1.jsx)("tbody", { children: content }) }));
-    }
-    const dropdownButtonClassName = props.className;
-    const className = (0, join_1.default)(props.className, baseClassName);
-    const positionerRef = (0, react_1.useRef)(null);
-    const { expanded, toggle, setExpanded, positionInfo } = (0, useExpanded_1.default)(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
-        ? (0, react_1.cloneElement)(exports.DROPDOWN_ICON, {
-            style: {
-                ...exports.DROPDOWN_ICON.props.style,
-                transform: 'rotate(180deg) translate3d(0px, -2px, 0px)',
-            },
-        })
-        : exports.DROPDOWN_ICON;
-    const hasClearButton = onClear || showClearButton;
-    const clearButton = hasClearButton ? ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { 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 = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [spacer, hasClearButton ? clearButton : null, icon] }));
-    const buttonRef = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, { visible: expanded, targetOffset: listOffset, render: () => {
-            return ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsxs)(SimpleButton_1.default, { 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: (0, clsx_1.default)(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: [(0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuItem, { disabled: item.disabled, "data-name": item.dataName, closeOnClick: item.closeOnClick, onClick: (e) => item.onClick?.(e), children: [item.icon, item.label] }, item.dataName ?? index));
+                }) })] }));
 });
-exports.default = DropdownButton;

package/src/components/EmptyContent/index.js

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../lib/utils");
 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 = (0, jsx_runtime_1.jsx)("p", { children: children });
     }
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${baseClassName}__wrapper twa:flex-1 twa:relative twa:size-full`, children: (0, jsx_runtime_1.jsx)(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: children }) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${baseClassName}__wrapper twa:flex-1 twa:relative twa:size-full`, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...flexProps, className: (0, utils_1.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 }) }));
 };
 exports.default = EmptyContent;

package/src/components/ErrorBox/index.js

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.baseClassName = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../lib/utils");
 const Flex_1 = require("../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 exports.baseClassName = 'ab-ErrorBox';
 const ErrorBox = (props) => {
-    return ((0, jsx_runtime_1.jsx)(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) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...props, className: (0, utils_1.cn)('twa:p-3 twa:rounded-standard twa:bg-destructive twa:text-destructive-foreground', props.className, exports.baseClassName) }));
 };
 exports.default = ErrorBox;

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -4,6 +4,7 @@ exports.BaseEditorInput = BaseEditorInput;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const parser = tslib_1.__importStar(require("../../parser/src"));
+const utils_1 = require("../../lib/utils");
 const React = tslib_1.__importStar(require("react"));
 const ErrorBox_1 = tslib_1.__importDefault(require("../ErrorBox"));
 const useSelectionRange_1 = require("../utils/useSelectionRange");
@@ -25,7 +26,6 @@ const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Exte
 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',
@@ -120,7 +120,7 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
      * - mouse leaves
      * - a function is inserted
      */
-    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, { ref: dropdownRef, showEvent: "mouseenter", hideEvent: "mouseleave", targetOffset: 5, render: () => ((0, jsx_runtime_1.jsxs)(Flex_1.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: [(0, jsx_runtime_1.jsx)(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", children: categoryOptions.map((option, index) => {
+    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, { ref: dropdownRef, showEvent: "mouseenter", hideEvent: "mouseleave", targetOffset: 5, render: () => ((0, jsx_runtime_1.jsxs)(Flex_1.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: [(0, jsx_runtime_1.jsx)(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", children: categoryOptions.map((option, index) => {
                         return ((0, jsx_runtime_1.jsx)(Radio_1.default, { onFocus: (event) => {
                                 event.preventDefault();
                                 event.stopPropagation();
@@ -155,8 +155,8 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
                                             return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { onMouseEnter: () => setOverFunction(functionName), onClick: () => hidePopup(), children: functionName === 'VAR' ? ((0, jsx_runtime_1.jsx)(VarEditorButton, { className: buttonClassName }, functionName)) : ((0, jsx_runtime_1.jsx)(EditorButton_1.default, { data: getEditorButtonData(functionName), className: buttonClassName, children: functionName }, functionName)) }, functionName));
                                         })
                                             .filter(Boolean);
-                                        return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, clsx_1.default)('twa:mb-2 twa:mx-1', fns.length === 0 ? 'twa:hidden' : ''), children: [(0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mb-1 twa:bg-primarylight twa:text-text-on-primary twa:w-full", children: StringExtensions_1.default.Humanize(groupName) }), fns] }, groupName));
-                                    }) })] }), (0, jsx_runtime_1.jsx)(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'), children: overFunction ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:bg-accent twa:text-accent-foreground", children: overFunction }), (0, jsx_runtime_1.jsx)(ExpressionFunctionDocumentation_1.ExpressionFunctionDocumentation, { expressionFunction: expressionFunctions[overFunction] })] })) : ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:size-full twa:items-center twa:justify-center twa:text-2 twa:italic", children: (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsxs)("li", { children: ["Hover over a Function to learn more", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {})] }), (0, jsx_runtime_1.jsx)("li", { children: "Click a Function to add it to the Expression in the Editor" })] }) })) })] })] })), children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', className: "twa:mr-1", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:mr-1 twa:text-2", children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "equation" }) }) }) }));
+                                        return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)('twa:mb-2 twa:mx-1', fns.length === 0 ? 'twa:hidden' : ''), children: [(0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mb-1 twa:bg-primarylight twa:text-primary-foreground twa:w-full", children: StringExtensions_1.default.Humanize(groupName) }), fns] }, groupName));
+                                    }) })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, utils_1.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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:bg-accent twa:text-accent-foreground", children: overFunction }), (0, jsx_runtime_1.jsx)(ExpressionFunctionDocumentation_1.ExpressionFunctionDocumentation, { expressionFunction: expressionFunctions[overFunction] })] })) : ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:size-full twa:items-center twa:justify-center twa:text-2 twa:italic", children: (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsxs)("li", { children: ["Hover over a Function to learn more", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {})] }), (0, jsx_runtime_1.jsx)("li", { children: "Click a Function to add it to the Expression in the Editor" })] }) })) })] })] })), children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', className: "twa:mr-1", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:mr-1 twa:text-2", children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "equation" }) }) }) }));
 };
 function BaseEditorInput(props) {
     const { expressionFunctions, testData, style, type } = props;