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

package/src/components/Combobox/comboboxUtils.d.ts

@@ -9,7 +9,9 @@ export type ComboboxItemType = {
     value: any;
     disabled?: boolean;
 };
-export declare function getItemTextLabel<T extends ComboboxItemType>(item: T): string;
+export declare function getItemTextLabel<T extends ComboboxItemType>(item: T & {
+    tooltip?: string;
+}): string;
 export type ComboboxGroupType<T extends ComboboxItemType> = {
     label: React.ReactNode;
     items: T[];
@@ -45,6 +47,7 @@ export type ComboboxCommonProps<T extends ComboboxItemType> = {
     renderItemLabel?: (defaultLabel: React.ReactNode, item: T) => React.ReactNode;
     multiple?: boolean;
     showClear?: boolean;
+    clearOnEscape?: boolean;
     searchable?: boolean | 'inline' | 'menulist';
     /**
      * Custom filter function, or `null` to disable built-in filtering
@@ -74,6 +77,7 @@ export type ComboboxCommonProps<T extends ComboboxItemType> = {
      */
     renderSearchInputTrailing?: React.ReactNode | (() => React.ReactNode);
     renderCheckboxIndicator?: boolean | null | ComboboxPrimitive.ItemIndicator.Props['render'];
+    showTrigger?: boolean;
 };
 export type AdaptableComboboxProps<T extends ComboboxItemType> = ComboboxCommonProps<T> & ComboboxDataProps<T>;
 export declare function valueToItem<T extends ComboboxItemType>(stringValue: T['value'] | undefined | null, lookup: Map<any, T>): T | undefined;

package/src/components/Combobox/comboboxUtils.js

@@ -5,6 +5,8 @@ export function getItemTextLabel(item) {
         return item.label;
     if (typeof item.label === 'number')
         return String(item.label);
+    if (typeof item.tooltip === 'string')
+        return String(item.tooltip);
     return String(item.value);
 }
 export function valueToItem(stringValue, lookup) {

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

@@ -35,4 +35,5 @@ export declare const MultiCombobox: <T extends ComboboxItemType>(props: MultiCom
 export type GridFilterComboboxProps<T extends ComboboxItemType> = Omit<MultiComboboxProps<T>, 'showSelectAllCheckbox' | 'searchable' | 'renderInput' | 'renderInputValues'> & {
     showSelectedCount?: boolean;
 };
+export declare const GRID_FILTER_COMBBOX_ADJUSTMENTS_CLASSNAME: string;
 export declare const GridFilterCombobox: <T extends ComboboxItemType>(props: GridFilterComboboxProps<T>) => React.JSX.Element;

package/src/components/Combobox/index.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxPrimitive, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor, RESIZABLE_VIRTUALIZED_LIST_CLASS, } from "../ui/combobox";
+import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxPrimitive, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor, RESIZABLE_VIRTUALIZED_LIST_CLASS, } from '../ui/combobox';
 import { cn } from '../../lib/utils';
 import { ChevronDownIcon, Loader2Icon, PlusIcon } from 'lucide-react';
 import { useMemo } from 'react';
 import { InputGroupAddon, InputGroupButton } from '../ui/input-group';
-import clsx from 'clsx';
 import { getItemTextLabel, toStringValue, toStringValues, valueToItem, valueToItems, } from './comboboxUtils';
 import { VirtualizedList } from './VirtualizedList';
 import { CheckBox } from '../CheckBox';
@@ -31,9 +30,13 @@ const AdaptableComboboxList = (props) => {
         const label = isUncreatedCreatable ? `Create "${item.label}"` : item.label;
         const itemLabel = props.renderItemLabel ? props.renderItemLabel(label, item) : label;
         const itemContent = isUncreatedCreatable ? (_jsxs(_Fragment, { children: [_jsx(PlusIcon, {}), " ", itemLabel] })) : (itemLabel);
-        const textLabel = props.showItemTooltip ? getItemTextLabel(item) : undefined;
-        const tooltipText = textLabel != null ? (isUncreatedCreatable ? `Create "${textLabel}"` : textLabel) : undefined;
-        const itemElement = (_jsx(ComboboxItem, { value: item, className: 'ab-Combobox-Row', disabled: item.disabled, renderCheckboxIndicator: props.renderCheckboxIndicator, children: itemContent }, item.value));
+        const itemText = getItemTextLabel(item);
+        const tooltipText = props.showItemTooltip && itemText != null
+            ? isUncreatedCreatable
+                ? `Create "${itemText}"`
+                : itemText
+            : undefined;
+        const itemElement = (_jsx(ComboboxItem, { value: item, "aria-label": itemText ?? undefined, className: 'ab-Combobox-Row', disabled: item.disabled, renderCheckboxIndicator: props.renderCheckboxIndicator, children: itemContent }, item.value));
         if (tooltipText != null) {
             return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: itemElement, children: itemContent }), _jsx(TooltipContent, { side: "right", children: tooltipText })] }, item.value));
         }
@@ -88,9 +91,15 @@ const AdaptableCombobox_Root = (props) => {
     const internalDefaultValue = props.multiple
         ? valueToItems(props.defaultValue, itemByValue)
         : valueToItem(props.defaultValue, itemByValue);
-    const handleValueChange = (next) => {
+    const handleValueChange = (next, eventDetails) => {
         if (!props.onValueChange)
             return;
+        // base-ui clears the selected value when Escape is pressed
+        // we only want to allow this if the clearOnEscape prop is true
+        if (eventDetails?.reason === 'escape-key' && !props.clearOnEscape) {
+            eventDetails.cancel?.();
+            return;
+        }
         if (Array.isArray(next)) {
             props.onValueChange(toStringValues(next), next);
         }
@@ -98,6 +107,15 @@ const AdaptableCombobox_Root = (props) => {
             props.onValueChange(toStringValue(next), next);
         }
     };
+    const handleInputValueChange = (next, eventDetails) => {
+        // base-ui blanks the input text (and then the selected value) when Escape is pressed
+        // we only want to allow this if the clearOnEscape prop is true
+        if (eventDetails?.reason === 'escape-key' && !props.clearOnEscape) {
+            eventDetails.cancel?.();
+            return;
+        }
+        props.onInputValueChange?.(next);
+    };
     let comboboxItems = props.groups ?? props.items;
     if (props.isCreatable && allItems[allItems.length - 1]?.creatable) {
         // let's detect all "creatable" items and add them to the combobox items
@@ -113,7 +131,7 @@ const AdaptableCombobox_Root = (props) => {
         }
         comboboxItems = [...comboboxItems, ...creatableItems];
     }
-    return (_jsx(Combobox, { ...props, items: comboboxItems, isItemEqualToValue: isItemEqualToValue, itemToStringLabel: getItemTextLabel, value: internalValue, defaultValue: internalDefaultValue, onValueChange: handleValueChange, "aria-label": props.ariaLabel || props['aria-label'], "data-name": props['data-name'], disabled: props.disabled, open: props.open, onOpenChange: props.onOpenChange, multiple: props.multiple, filter: props.filter, autoHighlight: true, children: props.children }));
+    return (_jsx(Combobox, { ...props, items: comboboxItems, isItemEqualToValue: isItemEqualToValue, itemToStringLabel: getItemTextLabel, value: internalValue, defaultValue: internalDefaultValue, onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, "aria-label": props.ariaLabel || props['aria-label'], "data-name": props['data-name'], disabled: props.disabled, open: props.open, onOpenChange: props.onOpenChange, multiple: props.multiple, filter: props.filter, autoHighlight: true, children: props.children }));
 };
 const useGetAllItems = (props) => {
     const allItems = props.groups
@@ -161,15 +179,15 @@ function useCreatable(props, allItems, itemByValue) {
         if (props.isCreatable && itemsToCreate.length > 0) {
             savingCreatableItem = true;
             itemsAllNumeric = allItems.every((item) => !item.creatable ? typeof item.value === 'number' : true);
+            newCreatedItems = itemsToCreate.map((item) => ({
+                ...item,
+                creatable: true,
+                created: true,
+                // if all other items are numeric, and the value for the created item is a valid number, then convert the value to a number
+                // we'll also have to correctly call onValueChange with the new value
+                value: itemsAllNumeric && !Number.isNaN(Number(item.value)) ? Number(item.value) : item.value,
+            }));
             setAlreadySavedCreatableItems((current) => {
-                newCreatedItems = itemsToCreate.map((item) => ({
-                    ...item,
-                    creatable: true,
-                    created: true,
-                    // if all other items are numeric, and the value for the created item is a valid number, then convert the value to a number
-                    // we'll also have to correctly call onValueChange with the new value
-                    value: itemsAllNumeric && !Number.isNaN(Number(item.value)) ? Number(item.value) : item.value,
-                }));
                 const mergedItems = [...current, ...newCreatedItems];
                 const seenValues = new Set();
                 return mergedItems.filter((item) => {
@@ -337,7 +355,7 @@ const SingleCombobox_MenuListSearchable = (props) => {
                 'twa:flex twa:w-full twa:cursor-default twa:items-center twa:justify-between twa:gap-1.5 twa:rounded-input twa:border twa:border-input twa:bg-transparent twa:py-2 twa:pr-2 twa:pl-2.5 twa:text-sm twa:whitespace-nowrap twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:select-none twa:focus:border-ring twa:focus:ring-3 twa:focus:ring-ring/50 twa:disabled:cursor-not-allowed twa:disabled:opacity-50 twa:data-placeholder:text-muted-foreground twa:h-9', triggerClassName), disabled: isDisabled, onFocus: handleFocus, onBlur: handleBlur, children: _jsx(ComboboxValue, { placeholder: _jsx("span", { children: props.placeholder }), children: (value) => {
                         return (_jsxs(React.Fragment, { children: [_jsx("span", { className: "twa:flex twa:flex-1 twa:truncate twa:text-left", "data-slot": "combobox-value", children: _jsx(ComboboxValue, { placeholder: _jsx("span", { children: props.placeholder }) }) }), _jsx("input", { type: "hidden", "data-slot": "combobox-value-input", readOnly: true, value: value ? getItemTextLabel(value) : '' }), props.isLoading && (_jsx(Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), value && showClear ? (_jsx(ComboboxClear, { disabled: isDisabled, onMouseDown: (e) => {
                                         e.preventBaseUIHandler();
-                                    } })) : (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", className: 'twa:min-h-auto!', children: _jsx(ChevronDownIcon, { className: "twa:pointer-events-none twa:size-4 twa:shrink-0 twa:text-muted-foreground" }) }))] }));
+                                    } })) : props.showTrigger !== false ? (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", className: 'twa:min-h-auto!', children: _jsx(ChevronDownIcon, { className: "twa:pointer-events-none twa:size-4 twa:shrink-0 twa:text-muted-foreground" }) })) : null] }));
                     } }) }), _jsxs(ComboboxContent, { anchor: anchor, style: getContentStyle({ maxLabelLength }), resizable: props.resizable, contentRef: contentRefCallback, className: props.contentClassName, children: [_jsx(ComboboxInput, { className: searchInputClassName, placeholder: props.placeholder, showClear: false, showTrigger: false, disabled: isDisabled, ref: searchInputRef, onFocus: handleFocus, onBlur: handleBlur }), _jsx(AdaptableComboboxList, { renderItemLabel: props.renderItemLabel, searchable: props.searchable, emptyText: emptyText, groups: props.groups, virtualized: !!props.virtualized, showItemTooltip: !!props.showItemTooltip, open: props.open, isLoading: props.isLoading })] })] }));
 };
 const SingleCombobox_SimpleSearchable = (props) => {
@@ -348,7 +366,7 @@ const SingleCombobox_SimpleSearchable = (props) => {
     const searchable = props.searchable === false ? false : 'inline';
     const isDisabled = props.disabled;
     const { allItems, itemByValue, maxLabelLength, inputValue, onInputValueChange, onValueChange, value, } = useGetAllItems(props);
-    return (_jsxs(AdaptableCombobox_Root, { ...props, value: value, itemByValue: itemByValue, inputValue: inputValue, onInputValueChange: onInputValueChange, onValueChange: onValueChange, allItems: allItems, children: [_jsx(ComboboxInput, { className: className, groupRef: anchor, placeholder: props.placeholder, showClear: showClear, showTrigger: true, isLoading: props.isLoading, disabled: isDisabled, readOnly: searchable === false, "aria-label": props.ariaLabel || props['aria-label'], "data-name": props['data-name'], onFocus: props.onFocus, onBlur: props.onBlur }), _jsx(ComboboxContent, { anchor: anchor, style: getContentStyle({ maxLabelLength }), resizable: props.resizable, children: _jsx(AdaptableComboboxList, { searchable: props.searchable, renderItemLabel: props.renderItemLabel, emptyText: emptyText, groups: props.groups, virtualized: !!props.virtualized, showItemTooltip: !!props.showItemTooltip, open: props.open, isLoading: props.isLoading }) })] }));
+    return (_jsxs(AdaptableCombobox_Root, { ...props, value: value, itemByValue: itemByValue, inputValue: inputValue, onInputValueChange: onInputValueChange, onValueChange: onValueChange, allItems: allItems, children: [_jsx(ComboboxInput, { className: className, groupRef: anchor, placeholder: props.placeholder, showClear: showClear, showTrigger: props.showTrigger !== false, isLoading: props.isLoading, disabled: isDisabled, readOnly: searchable === false, "aria-label": props.ariaLabel || props['aria-label'], "data-name": props['data-name'], onFocus: props.onFocus, onBlur: props.onBlur }), _jsx(ComboboxContent, { anchor: anchor, style: getContentStyle({ maxLabelLength }), resizable: props.resizable, children: _jsx(AdaptableComboboxList, { searchable: props.searchable, renderItemLabel: props.renderItemLabel, emptyText: emptyText, groups: props.groups, virtualized: !!props.virtualized, showItemTooltip: !!props.showItemTooltip, open: props.open, isLoading: props.isLoading }) })] }));
 };
 const MultiCombobox_SimpleSearchable = (props) => {
     const anchor = useComboboxAnchor();
@@ -381,13 +399,13 @@ const MultiCombobox_SimpleSearchable = (props) => {
                     if (!menuOpen) {
                         onOpenChange(true);
                     }
-                }, ref: anchor, className: clsx('twa:relative', props.className), children: _jsx(ComboboxValue, { children: (selectedItems) => {
+                }, ref: anchor, className: cn('twa:relative', props.className), children: _jsx(ComboboxValue, { children: (selectedItems) => {
                         const shouldKeepTrigger = props.searchable === false && selectedItems.length > 0;
                         return (_jsxs(React.Fragment, { children: [props.renderInputValues ? (props.renderInputValues(selectedItems)) : (_jsx(MultiComboboxChips, { selectedItems: selectedItems, showClear: showClear })), props.renderInput !== false ? (_jsxs(_Fragment, { children: [_jsx(ComboboxChipsInput, { placeholder: selectedItems.length > 0 ? '' : props.placeholder, readOnly: props.searchable === false, onFocus: props.onFocus, onBlur: props.onBlur, className: props.searchable === false && selectedItems.length > 0
                                                 ? 'twa:absolute! twa:inset-0 twa:min-h-auto! twa:max-h-auto!' // so we fill the parent container and on click we can open the combobox as usual
-                                                : 'twa:flex-1' }), props.searchable === false && selectedItems.length > 0 ? (_jsx("div", { className: "twa:flex-1" })) : null, _jsx("div", { "data-slot": "input-group", role: "group", className: "twa:group/input-group twa:z-10", children: _jsxs(InputGroupAddon, { align: "inline-end", className: "twa:p-0 px twa:gap-0.5", children: [props.isLoading && (_jsx(Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), _jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, { className: "twa:min-h-auto!" }), "data-slot": "input-group-button", className: clsx(`twa:data-pressed:bg-transparent`, shouldKeepTrigger
+                                                : 'twa:flex-1' }), props.searchable === false && selectedItems.length > 0 ? (_jsx("div", { className: "twa:flex-1" })) : null, _jsx("div", { "data-slot": "input-group", role: "group", className: "twa:group/input-group twa:z-10", children: _jsxs(InputGroupAddon, { align: "inline-end", className: "twa:p-0 px twa:gap-0.5", children: [props.isLoading && (_jsx(Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), props.showTrigger !== false ? (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, { className: "twa:min-h-auto!" }), "data-slot": "combobox-toggle", className: cn(`twa:data-pressed:bg-transparent`, shouldKeepTrigger
                                                             ? ''
-                                                            : 'twa:group-has-data-[slot=combobox-clear]/input-group:hidden'), disabled: isDisabled }), showClear && _jsx(ComboboxClear, { disabled: isDisabled })] }) })] })) : null] }));
+                                                            : 'twa:group-has-data-[slot=combobox-clear]/input-group:hidden'), disabled: isDisabled })) : null, showClear && _jsx(ComboboxClear, { disabled: isDisabled })] }) })] })) : null] }));
                     } }) }), _jsx(ComboboxContent, { anchor: anchor, style: getContentStyle({ maxLabelLength }), resizable: props.resizable, children: _jsx(AdaptableComboboxList, { searchable: props.searchable, emptyText: emptyText, renderItemLabel: props.renderItemLabel, showSelectAllCheckbox: props.showSelectAllCheckbox, renderCheckboxIndicator: props.renderCheckboxIndicator ?? true, onCheckAllChange: onCheckAllChange, totalCount: allItems.length, groups: props.groups, virtualized: !!props.virtualized, showItemTooltip: !!props.showItemTooltip, open: props.open, isLoading: props.isLoading }) })] }));
 };
 const MultiComboboxChips = (props) => {
@@ -473,15 +491,15 @@ const MultiCombobox_MenuListSearchable = (props) => {
                     hasFocusRef.current = false;
                     props.onBlur?.();
                 }
-            }, className: clsx('twa:relative', props.className, _props?.className), children: _jsx(ComboboxValue, { children: (selectedItems) => {
-                    return (_jsxs(React.Fragment, { children: [props.renderInputValues ? (props.renderInputValues(selectedItems)) : (_jsx(MultiComboboxChips, { selectedItems: selectedItems, showClear: showClear })), props.renderInput !== false ? (_jsx(_Fragment, { children: _jsx(ComboboxChipsInput, { ref: chipsInputRef, placeholder: selectedItems.length > 0 ? '' : props.placeholder, readOnly: true, value: '', className: 'twa:flex-1' }) })) : (_jsx("div", { className: "twa:flex-1" })), _jsx("div", { "data-slot": "input-group", role: "group", className: "twa:group/input-group", children: _jsxs(InputGroupAddon, { align: "inline-end", className: "twa:p-0 px", children: [props.isLoading && (_jsx(Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), _jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, { className: "twa:min-h-auto!", ref: chevronRef, "data-slot": "input-group-button", 
+            }, className: cn('twa:relative', props.className, _props?.className), children: _jsx(ComboboxValue, { children: (selectedItems) => {
+                    return (_jsxs(React.Fragment, { children: [props.renderInputValues ? (props.renderInputValues(selectedItems)) : (_jsx(MultiComboboxChips, { selectedItems: selectedItems, showClear: showClear })), props.renderInput !== false ? (_jsx(_Fragment, { children: _jsx(ComboboxChipsInput, { ref: chipsInputRef, placeholder: selectedItems.length > 0 ? '' : props.placeholder, readOnly: true, value: '', className: 'twa:flex-1' }) })) : (_jsx("div", { className: "twa:flex-1" })), _jsx("div", { "data-slot": "input-group", role: "group", className: "twa:group/input-group", children: _jsxs(InputGroupAddon, { align: "inline-end", className: "twa:p-0 px", children: [props.isLoading && (_jsx(Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), props.showTrigger !== false ? (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, { className: "twa:min-h-auto!", ref: chevronRef, "data-slot": "combobox-toggle", 
                                                 // we already have the role="combobox" on the parent
                                                 // so we want to avoid the same role twice in the component,
                                                 // hence we use the role="widget" here.
-                                                role: "widget" }), "data-slot": "input-group-button", className: clsx(`twa:data-pressed:bg-transparent`, 'twa:group-has-data-[slot=combobox-clear]/input-group:hidden'), disabled: isDisabled }), showClear && _jsx(ComboboxClear, { disabled: isDisabled })] }) })] }));
+                                                role: "widget" }), "data-slot": "combobox-toggle", className: cn(`twa:data-pressed:bg-transparent`, 'twa:group-has-data-[slot=combobox-clear]/input-group:hidden'), disabled: isDisabled })) : null, showClear && _jsx(ComboboxClear, { disabled: isDisabled })] }) })] }));
                 } }) }));
     };
-    return (_jsxs(AdaptableCombobox_Root, { ...props, value: value, multiple: true, allItems: allItems, itemByValue: itemByValue, inputValue: inputValue, onInputValueChange: onInputValueChange, onValueChange: onValueChange, onOpenChange: onOpenChange, children: [props.renderInput === false ? (_jsx(ComboboxTrigger, { nativeButton: false, render: renderChips })) : (renderChips(undefined)), _jsxs(ComboboxContent, { anchor: anchor, style: getContentStyle({ maxLabelLength }), resizable: props.resizable, contentRef: contentRefCallback, children: [_jsx(ComboboxInput, { placeholder: 'Filter...', showClear: false, ref: searchInputRef, showTrigger: false, disabled: isDisabled, onFocus: handleFocus, onBlur: handleBlur, role: "searchbox", className: 'twa:min-h-input', children: typeof props.renderSearchInputTrailing === 'function'
+    return (_jsxs(AdaptableCombobox_Root, { ...props, value: value, multiple: true, allItems: allItems, itemByValue: itemByValue, inputValue: inputValue, onInputValueChange: onInputValueChange, onValueChange: onValueChange, onOpenChange: onOpenChange, children: [props.renderInput === false ? (_jsx(ComboboxTrigger, { nativeButton: false, render: renderChips, icon: props.showTrigger !== false ? undefined : null })) : (renderChips(undefined)), _jsxs(ComboboxContent, { anchor: anchor, style: getContentStyle({ maxLabelLength }), resizable: props.resizable, contentRef: contentRefCallback, children: [_jsx(ComboboxInput, { placeholder: 'Filter...', showClear: false, ref: searchInputRef, showTrigger: false, disabled: isDisabled, onFocus: handleFocus, onBlur: handleBlur, role: "searchbox", className: 'twa:min-h-input', children: typeof props.renderSearchInputTrailing === 'function'
                             ? props.renderSearchInputTrailing()
                             : undefined }), _jsx(AdaptableComboboxList, { renderItemLabel: props.renderItemLabel, emptyText: emptyText, searchable: props.searchable, showSelectAllCheckbox: props.showSelectAllCheckbox, selectAllCheckboxValue: props.selectAllCheckboxValue, renderCheckboxIndicator: props.renderCheckboxIndicator ?? true, onCheckAllChange: onCheckAllChange, totalCount: allItems.length, groups: props.groups, virtualized: !!props.virtualized, showItemTooltip: !!props.showItemTooltip, open: props.open, isLoading: props.isLoading })] })] }));
 };
@@ -495,6 +513,16 @@ export const MultiCombobox = (props) => {
     const showItemTooltip = props.showItemTooltip ?? !!props.virtualized;
     return searchable === 'menulist' ? (_jsx(MultiCombobox_MenuListSearchable, { renderInput: false, ...props, multiple: true, open: open, onOpenChange: onOpenChange, searchable: searchable, showItemTooltip: showItemTooltip })) : (_jsx(MultiCombobox_SimpleSearchable, { ...props, open: open, multiple: true, onOpenChange: onOpenChange, searchable: searchable, showItemTooltip: showItemTooltip }));
 };
+export const GRID_FILTER_COMBBOX_ADJUSTMENTS_CLASSNAME = cn(
+// remove the border/shadow and position it properly
+// to adjust for outline on the input
+'twa:[.ab-FloatingFilter_&]:border-none twa:[.ab-FloatingFilter_&]:inset-y-0.5 twa:[.ab-FloatingFilter_&]:inset-x-0 twa:[.ab-FloatingFilter_&]:absolute twa:[.ab-FloatingFilter_&]:shadow-none twa:[.ab-FloatingFilter_&]:min-h-auto!', 
+// more adjustments for very compact ag grid themes
+'twa:[.ab-FloatingFilter_&]:[line-height:1]', 'twa:[.ab-FloatingFilter_[data-slot=combobox-trigger]]:py-0', 
+// also for very compact ag grid themes
+// make the floating-filter combobox a size container so the toggle can
+// shrink purely via CSS when the control is small in height (see ColumnFilter/base.css)
+'twa:[.ab-FloatingFilter_&]:[container-type:size]');
 export const GridFilterCombobox = (props) => {
     const { showSelectedCount = false, placeholder = 'Select...', ...comboboxProps } = props;
     const sharedProps = {
@@ -506,6 +534,8 @@ export const GridFilterCombobox = (props) => {
         virtualized: true,
         resizable: true,
         showClear: false,
+        // don't show a chevron icon in the grid filter combobox
+        showTrigger: false,
         renderInputValues: (items) => {
             let children = items.map((item) => getItemTextLabel(item)).join(', ');
             if (items.length === 0) {
@@ -514,10 +544,7 @@ export const GridFilterCombobox = (props) => {
             return (_jsx(_Fragment, { children: _jsxs("div", { className: "twa:text-ellipsis twa:overflow-hidden twa:whitespace-nowrap twa:flex-1000", "data-slot": "combobox-selected-values", children: [showSelectedCount && items.length > 0 && (_jsxs("span", { "data-name": "multiple-values-count", className: "twa:mr-0.5", children: ["(", items.length, ")"] })), children] }) }));
         },
     };
-    const className = cn(
-    // remove the border/shadow and position it properly
-    // to adjust for outline on the input
-    'twa:[.ab-FloatingFilter_&]:border-none twa:[.ab-FloatingFilter_&]:inset-y-0.5 twa:[.ab-FloatingFilter_&]:inset-x-0 twa:[.ab-FloatingFilter_&]:absolute twa:[.ab-FloatingFilter_&]:shadow-none twa:[.ab-FloatingFilter_&]:min-h-auto!', comboboxProps.className);
+    const className = cn(GRID_FILTER_COMBBOX_ADJUSTMENTS_CLASSNAME, comboboxProps.className);
     const mergedProps = {
         ...sharedProps,
         ...comboboxProps,

package/src/components/Dashboard/DashboardManager.js

@@ -2,8 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { ModuleManager } from '../DragAndDropContext/ModuleManager';
 const DashboardManager = ({ tabs, onTabsChange, availableToolbars, api, disabled, }) => {
-    const moduleService = api.internalApi.getModuleService();
-    const moduleInfo = moduleService.getModuleInfoByModule('Dashboard');
     const moduleTabs = tabs.map((tab) => {
         return {
             Name: tab.Name,
@@ -16,7 +14,7 @@ const DashboardManager = ({ tabs, onTabsChange, availableToolbars, api, disabled
             Toolbars: tab.Items,
         }));
         onTabsChange(dashboardTabs);
-    }, []);
-    return (_jsx(ModuleManager, { availableItems: availableToolbars, disabled: disabled, onTabsChange: handleTabsChange, tabs: moduleTabs, tabsTitle: moduleInfo.FriendlyName + ' Tabs', unusedPanelTitle: 'Available Toolbars', dragItemText: "Drag into a Tab below" }));
+    }, [onTabsChange]);
+    return (_jsx(ModuleManager, { dragScope: "dashboard-tabs", layout: "rows", availableItems: availableToolbars, disabled: disabled, onTabsChange: handleTabsChange, tabs: moduleTabs }));
 };
 export default DashboardManager;

package/src/components/Datepicker/index.js

@@ -4,15 +4,15 @@ import { useEffect, useLayoutEffect, useState } from 'react';
 import useProperty from '../utils/useProperty';
 import SimpleButton from '../SimpleButton';
 import { ACCESS_LEVEL_FULL } from '../../Utilities/Constants/GeneralConstants';
-import { DateFormatter } from '../../Utilities/Helpers/FormatHelper';
+import { DateFormatter } from '../../Utilities/Helpers/DisplayFormatHelper';
 import { useDatepickerContext } from './DatepickerContext';
 import { AdaptableDateInlineInput } from '../../View/Components/AdaptableInput/AdaptableDateInlineInput';
 import { isValid, addYears, endOfYear, startOfYear, addDays, addBusinessDays, } from 'date-fns';
 import { Flex } from '../Flex';
-import { cn } from "../../lib/utils";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
-import { Calendar } from "../ui/calendar";
-import { InputGroup, InputGroupAddon } from "../ui/input-group";
+import { cn } from '../../lib/utils';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
+import { Calendar } from '../ui/calendar';
+import { InputGroup, InputGroupAddon } from '../ui/input-group';
 import { SingleSelect } from '../NewSelect';
 import { targetOwn } from '../twUtils';
 // ── Caption dropdown components (month/year) ──────────────────────────
@@ -249,12 +249,12 @@ export const Datepicker = React.forwardRef((props, ref) => {
                         width: style?.width,
                         maxWidth: style?.maxWidth,
                         border: style?.border,
-                    }, tabIndex: -1, className: cn('ab-Datepicker twa:flex twa:flex-row', 'twa:bg-(--ab-cmp-input__background)', targetOwn.focusWithinOutline, open && 'twa:border-ring twa:ring-3 twa:ring-ring/50', className), children: [_jsx(AdaptableDateInlineInput, { ref: ref, "data-slot": "input-group-control", value: inputValue, placeholder: placeholder ?? '', onChange: (v) => {
+                    }, tabIndex: -1, className: cn('ab-Datepicker twa:flex twa:flex-row twa:shadow-none', 'twa:bg-input-background', targetOwn.focusWithinOutline, open && 'twa:border-ring twa:ring-3 twa:ring-ring/50', className), children: [_jsx(AdaptableDateInlineInput, { ref: ref, "data-slot": "input-group-control", value: inputValue, placeholder: placeholder ?? '', onChange: (v) => {
                                 const date = new Date(v);
                                 if (isValid(date)) {
                                     updateValue(date);
                                 }
-                            }, className: "twa:h-auto twa:min-w-0 twa:outline-none twa:min-h-auto twa:py-0 twa:flex-1 twa:rounded-none twa:border-0 twa:bg-transparent twa:shadow-none twa:ring-0 twa:focus-visible:ring-0 twa:dark:bg-transparent", style: style, disabled: disabled }), _jsxs(InputGroupAddon, { align: "inline-end", children: [inputValue ? clearButton : null, calendarButton] })] }) }), _jsx(PopoverContent, { className: "twa:w-auto twa:p-0", align: "start", sideOffset: 6, children: _jsx("div", { ref: popupRefCallback, tabIndex: -1, role: "region", "aria-label": "Calendar", className: "twa:relative twa:isolate twa:overflow-visible twa:outline-none", onKeyDown: () => {
+                            }, className: "twa:h-auto twa:min-w-0 twa:outline-none twa:min-h-auto twa:py-0 twa:flex-1 twa:rounded-none twa:border-0 twa:bg-transparent twa:shadow-none twa:ring-0 twa:focus-visible:ring-0 twa:dark:bg-transparent", style: style, disabled: disabled }), _jsxs(InputGroupAddon, { align: "inline-end", children: [inputValue ? clearButton : null, calendarButton] })] }) }), _jsx(PopoverContent, { className: "twa:w-auto twa:p-0", align: "start", sideOffset: 8, children: _jsx("div", { ref: popupRefCallback, tabIndex: -1, role: "region", "aria-label": "Calendar", className: cn('twa:relative twa:isolate twa:overflow-visible twa:outline-none twa:rounded-standard', targetOwn.focusWithinOutline), onKeyDown: () => {
                         // console.log('onKeyDown', e.key);
                         // return;
                         // if (e.key === 'Tab') {

package/src/components/Dialog/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { cn } from '../../lib/utils';
 import { useRef, useEffect } from 'react';
 import contains from '../utils/contains';
 import captureTabNavigation from '../utils/captureTabNavigation';
@@ -9,7 +10,6 @@ import useAutoFocus from '../utils/useAutoFocus';
 import { Icon } from '../icons';
 import { WindowModal } from '../WindowModal';
 import { Box } from '../Flex';
-import clsx from 'clsx';
 import { targetOwn } from '../twUtils';
 const baseClassName = 'ab-Dialog';
 export const Dialog = React.forwardRef((props, dialogRef) => {
@@ -95,7 +95,7 @@ export const Dialog = React.forwardRef((props, dialogRef) => {
     if (!isOpen) {
         return null;
     }
-    const closeButton = showCloseButton ? (_jsx(Box, { title: "Close dialog", onClick: () => setIsOpen(false), className: clsx(`${baseClassName}__close-button twa:p-1`, 'twa:text-accentlight', 'twa:text-shadow-[0_1px_0_#fff]', `twa:text-3 twa:cursor-pointer twa:leading-none twa:font-bold`, 'twa:absolute twa:top-[6px] twa:right-[6px]'), children: _jsx(Icon, { size: 20, name: "close" }) })) : null;
+    const closeButton = showCloseButton ? (_jsx(Box, { title: "Close dialog", onClick: () => setIsOpen(false), className: cn(`${baseClassName}__close-button twa:p-1`, 'twa:text-accentlight', 'twa:text-shadow-[0_1px_0_#fff]', `twa:text-3 twa:cursor-pointer twa:leading-none twa:font-bold`, 'twa:absolute twa:top-[6px] twa:right-[6px]'), children: _jsx(Icon, { size: 20, name: "close" }) })) : null;
     const setPreventDismissFlag = (e) => {
         if (dismissOnClickOutside) {
             e.nativeEvent.preventDialogDismiss = true;
@@ -106,8 +106,8 @@ export const Dialog = React.forwardRef((props, dialogRef) => {
             if (boxProps && boxProps.onClick) {
                 boxProps.onClick(e);
             }
-        }, onKeyDown: onKeyDown, className: clsx('twa:relative', 'twa:bg-defaultbackground', 'twa:text-foreground', 'twa:fill-foreground', 'twa:rounded-standard', 'twa:flex twa:flex-col', targetOwn.focusOutline, targetOwn.focusWithinOutline, baseClassName, modal ? `${baseClassName}--modal` : `${baseClassName}--not-modal`, className), ref: boxRef, children: [children, closeButton] }));
-    const content = fixed ? (_jsx("div", { onClick: setPreventDismissFlag, className: clsx(`${baseClassName}-fixed-wrapper`, 'twa:fixed twa:inset-0', 'twa:m-auto', 'twa:flex twa:items-center twa:justify-center'), children: box })) : (box);
+        }, onKeyDown: onKeyDown, className: cn('twa:relative', 'twa:bg-background', 'twa:text-foreground', 'twa:fill-foreground', 'twa:rounded-standard', 'twa:flex twa:flex-col', targetOwn.focusOutline, targetOwn.focusWithinOutline, baseClassName, modal ? `${baseClassName}--modal` : `${baseClassName}--not-modal`, className), ref: boxRef, children: [children, closeButton] }));
+    const content = fixed ? (_jsx("div", { onClick: setPreventDismissFlag, className: cn(`${baseClassName}-fixed-wrapper`, 'twa:fixed twa:inset-0', 'twa:m-auto', 'twa:flex twa:items-center twa:justify-center'), children: box })) : (box);
     if (windowModal) {
         return _jsx(WindowModal, { ...windowModalProps, children: content });
     }

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

@@ -1,7 +1,12 @@
 import * as React from 'react';
 import { ModuleManagerProps } from './ModuleManager';
 import { ModuleDraggableItem } from './types';
+export declare const DEFAULT_UNUSED_LIST_ID = "UNUSED";
 export declare const DragAndDropContext: React.Context<{
     availableItems: ModuleDraggableItem[];
     permittedActions: ModuleManagerProps["permittedActions"];
+    /** Prefixes drag list / item ids so multiple ModuleManagers on one page do not interfere. */
+    dragScope: string;
+    /** Drag-list ids for unused / available item pools (accept-drop sources for toolbar lists). */
+    unusedListIds: string[];
 }>;

package/src/components/DragAndDropContext/DragAndDropContext.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+export const DEFAULT_UNUSED_LIST_ID = 'UNUSED';
 export const DragAndDropContext = React.createContext({
     availableItems: [],
     permittedActions: {
@@ -7,4 +8,6 @@ export const DragAndDropContext = React.createContext({
         dragAndDropTab: true,
         deleteTab: true,
     },
+    dragScope: 'default',
+    unusedListIds: [DEFAULT_UNUSED_LIST_ID],
 });

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseModuleTab, ModuleDraggableItem } from './types';
+import { BaseModuleTab, ModuleDraggableItem, UnusedItemGroup } from './types';
 export interface ModuleManagerProps {
     availableItems: ModuleDraggableItem[];
     filterOutSelectedItems?: boolean;
@@ -7,8 +7,12 @@ export interface ModuleManagerProps {
     disabled: boolean;
     onTabsChange: (tabs: BaseModuleTab[]) => void;
     tabs: BaseModuleTab[];
-    unusedPanelTitle: string;
-    dragItemText: string;
+    unusedPanelTitle?: string;
+    dragItemText?: string;
+    /** When set, renders multiple available-item pools instead of a single unused panel. */
+    unusedItemGroups?: UnusedItemGroup[];
+    /** Layout for `unusedItemGroups` when more than one group is provided. */
+    unusedItemGroupsLayout?: 'column' | 'row';
     tabsTitle?: string;
     permittedActions?: {
         createTab?: boolean;
@@ -16,5 +20,13 @@ export interface ModuleManagerProps {
         dragAndDropTab?: boolean;
         deleteTab?: boolean;
     };
+    /**
+     * `strip`: single horizontal drop row (e.g. pinned toolbars).
+     * `rows`: named tabs stacked vertically, each with a horizontal toolbar strip.
+     * `tabs`: multi-column tab editor (default, e.g. status bar).
+     */
+    layout?: 'tabs' | 'strip' | 'rows';
+    /** Unique per ModuleManager instance when more than one appears on the same screen. */
+    dragScope?: string;
 }
 export declare const ModuleManager: React.FunctionComponent<ModuleManagerProps>;

package/src/components/DragAndDropContext/ModuleManager.js

@@ -1,14 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { DragDropProvider } from '../dnd';
-import { DragAndDropContext } from './DragAndDropContext';
-import { TabList } from './TabList';
+import { DragAndDropContext, DEFAULT_UNUSED_LIST_ID } from './DragAndDropContext';
+import { TabList, ToolbarList } from './TabList';
 import { UnusedPanel } from './UnusedPanel';
-import { Flex } from '../Flex';
-import clsx from 'clsx';
+import { Box, Flex } from '../Flex';
 import { Card } from '../Card';
+import { cn } from '../../lib/utils';
 export const ModuleManager = (props) => {
-    const { availableItems, tabs, onTabsChange, tabsTitle, disabled, unusedPanelTitle, dragItemText, permittedActions, className, } = props;
+    const { availableItems, tabs, onTabsChange, tabsTitle, disabled, unusedPanelTitle, dragItemText, unusedItemGroups, unusedItemGroupsLayout = 'row', permittedActions, className, layout = 'tabs', dragScope = 'default', } = props;
+    const unusedListIds = React.useMemo(() => {
+        if (unusedItemGroups?.length) {
+            return unusedItemGroups.map((group, index) => group.listId ?? `UNUSED-${index}`);
+        }
+        return [DEFAULT_UNUSED_LIST_ID];
+    }, [unusedItemGroups]);
     const contextValue = React.useMemo(() => {
         const preparedPermittedAction = {
             createTab: true,
@@ -20,8 +26,10 @@ export const ModuleManager = (props) => {
         return {
             permittedActions: preparedPermittedAction,
             availableItems: props.availableItems,
+            dragScope,
+            unusedListIds,
         };
-    }, [props.availableItems, props.permittedActions]);
+    }, [props.availableItems, props.permittedActions, dragScope, unusedListIds, permittedActions]);
     const allowedItems = React.useMemo(() => {
         let result = availableItems.map((t) => t.Id);
         if (props.filterOutSelectedItems) {
@@ -57,5 +65,39 @@ export const ModuleManager = (props) => {
             };
         }));
     };
-    return (_jsx(DragDropProvider, { children: _jsx(DragAndDropContext.Provider, { value: contextValue, children: _jsxs(Flex, { flexDirection: "column", className: clsx('ab-ModuleSelector twa:flex-1', className), children: [_jsx(UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: allowedItems, dragItemText: dragItemText }), _jsxs(Card, { className: "twa:flex-1 twa:m-2 ab-ModuleSelector-UsedPanel", children: [_jsx(Card.Title, { border: false, children: tabsTitle }), _jsx(Card.Body, { className: "twa:px-2", children: _jsx(TabList, { disabled: disabled, tabs: tabs, onTabsChange: onTabsChange, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName, onNewTab: contextValue.permittedActions.createTab ? handleTabAdd : undefined }) })] })] }) }) }));
+    const renderUnusedItemGroups = () => {
+        const groupsLayout = unusedItemGroups.length > 1 ? unusedItemGroupsLayout : 'column';
+        return (_jsxs(_Fragment, { children: [dragItemText ? (_jsx(Box, { className: "twa:pb-2 twa:text-sm twa:opacity-80", children: dragItemText })) : null, _jsx(Flex, { flexDirection: groupsLayout === 'row' ? 'row' : 'column', className: cn('twa:gap-2 ab-ModuleSelector__UnusedGroups', {
+                        'ab-ModuleSelector__UnusedGroups--row': groupsLayout === 'row',
+                    }), children: unusedItemGroups.map((group, index) => {
+                        const listId = group.listId ?? `UNUSED-${index}`;
+                        const isRow = groupsLayout === 'row';
+                        const hasCustomFlex = typeof group.flex === 'number';
+                        return (_jsxs(Card, { className: cn('twa:m-0 ab-ModuleSelector__UnusedGroup', {
+                                'twa:min-w-0': isRow,
+                                'twa:flex-1': isRow && !hasCustomFlex,
+                            }), style: isRow && hasCustomFlex ? { flex: group.flex } : undefined, children: [_jsxs(Card.Title, { border: false, className: "twa:py-2", children: [_jsx(Box, { className: "twa:text-sm twa:font-medium", children: group.title }), group.help ? (_jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal", children: group.help })) : null] }), _jsx(Card.Body, { className: "twa:px-0 twa:pt-0", children: _jsx(UnusedPanel, { listId: listId, disabled: disabled, items: group.items }) })] }, listId));
+                    }) })] }));
+    };
+    const renderAvailableItemPanels = (options) => {
+        const includeOuterPadding = options?.includeOuterPadding ?? true;
+        if (unusedItemGroups?.length) {
+            const content = renderUnusedItemGroups();
+            if (!includeOuterPadding) {
+                return content;
+            }
+            return _jsx(Box, { className: "twa:px-2 twa:mb-2", children: content });
+        }
+        return (_jsx(UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: allowedItems, dragItemText: dragItemText }));
+    };
+    const renderUsedPanelCard = () => (_jsxs(Card, { className: "twa:m-0 ab-ModuleSelector-UsedPanel", children: [tabsTitle ? _jsx(Card.Title, { border: false, children: tabsTitle }) : null, _jsx(Card.Body, { className: "twa:px-2", children: _jsx(TabList, { variant: layout === 'rows' ? 'rows' : 'columns', disabled: disabled, tabs: tabs, onTabsChange: onTabsChange, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName, onNewTab: contextValue.permittedActions.createTab ? handleTabAdd : undefined }) })] }));
+    if (layout === 'strip') {
+        const stripTab = tabs[0] ?? { Name: '', Items: [] };
+        return (_jsx(DragDropProvider, { children: _jsx(DragAndDropContext.Provider, { value: contextValue, children: _jsxs(Flex, { flexDirection: "column", className: cn('ab-ModuleSelector ab-ModuleSelector--strip', className), children: [_jsx(Box, { className: "twa:pb-1", children: renderAvailableItemPanels() }), _jsx(Box, { className: "twa:px-2 twa:pb-1", children: _jsx(ToolbarList, { compact: true, orientation: "horizontal", disabled: disabled, toolbars: stripTab.Items ?? [], tabIndex: 0, tabs: tabs, onTabsChange: onTabsChange, onRemove: (toolbarIndex) => handleRemoveToolbar(0, toolbarIndex) }) })] }) }) }));
+    }
+    if (layout === 'rows') {
+        const alignUsedPanelWithGroups = Boolean(unusedItemGroups?.length);
+        return (_jsx(DragDropProvider, { children: _jsx(DragAndDropContext.Provider, { value: contextValue, children: _jsx(Flex, { flexDirection: "column", className: cn('ab-ModuleSelector ab-ModuleSelector--rows', className), children: alignUsedPanelWithGroups ? (_jsxs(Box, { className: "twa:px-2 twa:flex twa:flex-col twa:gap-2", children: [renderAvailableItemPanels({ includeOuterPadding: false }), renderUsedPanelCard()] })) : (_jsxs(_Fragment, { children: [_jsx(Box, { className: "twa:pb-1", children: renderAvailableItemPanels() }), renderUsedPanelCard()] })) }) }) }));
+    }
+    return (_jsx(DragDropProvider, { children: _jsx(DragAndDropContext.Provider, { value: contextValue, children: _jsxs(Flex, { flexDirection: "column", className: cn('ab-ModuleSelector twa:flex-1', className), children: [renderAvailableItemPanels(), _jsxs(Card, { className: "twa:flex-1 twa:m-0 ab-ModuleSelector-UsedPanel", children: [tabsTitle ? _jsx(Card.Title, { border: false, children: tabsTitle }) : null, _jsx(Card.Body, { className: "twa:px-2", children: _jsx(TabList, { disabled: disabled, tabs: tabs, onTabsChange: onTabsChange, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName, onNewTab: contextValue.permittedActions.createTab ? handleTabAdd : undefined }) })] })] }) }) }));
 };

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { BaseModuleTab } from './types';
-export declare function TabList({ tabs, onTabsChange, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, onNewTab, }: {
+export type TabListVariant = 'columns' | 'rows';
+export declare function TabList({ tabs, onTabsChange, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, onNewTab, variant, }: {
     disabled: boolean;
     tabs: BaseModuleTab[];
     onTabsChange: (tabs: BaseModuleTab[]) => void;
@@ -8,8 +9,9 @@ export declare function TabList({ tabs, onTabsChange, onRemoveTab, onRemoveToolb
     onRemoveToolbar: (tabIndex: number, toolbarIndex: number) => void;
     onChangeTabName: (tabIndex: number, tabName: string) => void;
     onNewTab?: () => void;
+    variant?: TabListVariant;
 }): React.JSX.Element;
-export declare function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRemove, onRemoveToolbar, onChangeTabName, disabled, }: {
+export declare function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRemove, onRemoveToolbar, onChangeTabName, disabled, variant, }: {
     tab: BaseModuleTab;
     tabId: string;
     tabIndex: number;
@@ -19,17 +21,22 @@ export declare function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRe
     onRemove: () => void;
     onRemoveToolbar: (toolbarIndex: number) => void;
     onChangeTabName: (tabName: string) => void;
+    variant?: TabListVariant;
 }): React.JSX.Element;
-export declare function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove, disabled, }: {
+export declare function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove, disabled, orientation, compact, embedded, }: {
     toolbars: string[];
     tabIndex: number;
     tabs: BaseModuleTab[];
     onTabsChange: (tabs: BaseModuleTab[]) => void;
     disabled: boolean;
     onRemove: (toolbarIndex: number) => void;
+    orientation?: 'vertical' | 'horizontal';
+    compact?: boolean;
+    embedded?: boolean;
 }): React.JSX.Element;
-export declare function ToolbarItem({ toolbar, onRemove, disabled, }: {
+export declare function ToolbarItem({ toolbar, onRemove, disabled, compact, }: {
     disabled: boolean;
     toolbar: string;
     onRemove: () => void;
+    compact?: boolean;
 }): React.JSX.Element;