@adaptabletools/adaptable 23.0.0-canary.2 → 23.0.0-canary.4

package/src/components/Datepicker/index.js

@@ -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

@@ -106,7 +106,7 @@ 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] }));
+        }, onKeyDown: onKeyDown, className: clsx('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: clsx(`${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/TabList.js

@@ -37,7 +37,7 @@ export function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRemove, on
                 !context.permittedActions.deleteTab) {
                 showHeader = false;
             }
-            return (_jsxs("div", { ...restDomProps, className: clsx('twa:bg-defaultbackground', 'twa:select-none', 'ab-ModuleSelector__TabItem twa:min-w-32', restDomProps.className), "data-name": "dashboard-tab", children: [showHeader ? (_jsxs("div", { className: "ab-ModuleSelector__TabItem__header", children: [_jsx("div", { ...(!isDragDisabled ? { onPointerDown } : {}), style: context.permittedActions.dragAndDropTab ? {} : { display: 'none' }, children: _jsx(Icon, { name: "drag" }) }), context.permittedActions.editTabName ? (_jsx("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, onChange: (event) => {
+            return (_jsxs("div", { ...restDomProps, className: clsx('twa:bg-background', 'twa:select-none', 'ab-ModuleSelector__TabItem twa:min-w-32', restDomProps.className), "data-name": "dashboard-tab", children: [showHeader ? (_jsxs("div", { className: "ab-ModuleSelector__TabItem__header", children: [_jsx("div", { ...(!isDragDisabled ? { onPointerDown } : {}), style: context.permittedActions.dragAndDropTab ? {} : { display: 'none' }, children: _jsx(Icon, { name: "drag" }) }), context.permittedActions.editTabName ? (_jsx("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, onChange: (event) => {
                                     onChangeTabName(event.target.value);
                                 } })) : (tab.Name), context.permittedActions.deleteTab && (_jsx(SimpleButton, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove }))] })) : null, _jsx(ToolbarList, { disabled: disabled, toolbars: tab.Items, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, onRemove: onRemoveToolbar })] }));
         } }));

package/src/components/Dropdown/Arrows.js

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

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -116,7 +116,7 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
      * - mouse leaves
      * - a function is inserted
      */
-    return (_jsx(OverlayTrigger, { ref: dropdownRef, showEvent: "mouseenter", hideEvent: "mouseleave", targetOffset: 5, render: () => (_jsxs(Flex, { className: `${baseClassName}__dropdown-functions-list-wrapper twa:max-w-[60vw] twa:shadow-md twa:bg-defaultbackground twa:text-foreground twa:text-3 twa:rounded-standard twa:p-3`, flexDirection: "column", onMouseLeave: () => hidePopup(), children: [_jsx(Flex, { className: "twa:md:gap-3 twa:gap-2 twa:pb-2 twa:md:justify-between twa:justify-start twa:flex-wrap twa:border-b twa:border-primarydark/30 twa:mb-2", children: categoryOptions.map((option, index) => {
+    return (_jsx(OverlayTrigger, { ref: dropdownRef, showEvent: "mouseenter", hideEvent: "mouseleave", targetOffset: 5, render: () => (_jsxs(Flex, { className: `${baseClassName}__dropdown-functions-list-wrapper twa:max-w-[60vw] twa:shadow-md twa:bg-background twa:text-foreground twa:text-3 twa:rounded-standard twa:p-3`, flexDirection: "column", onMouseLeave: () => hidePopup(), children: [_jsx(Flex, { className: "twa:md:gap-3 twa:gap-2 twa:pb-2 twa:md:justify-between twa:justify-start twa:flex-wrap twa:border-b twa:border-primarydark/30 twa:mb-2", children: categoryOptions.map((option, index) => {
                         return (_jsx(Radio, { onFocus: (event) => {
                                 event.preventDefault();
                                 event.stopPropagation();

package/src/components/ExpressionEditor/index.js

@@ -76,7 +76,7 @@ export function ExpressionEditor(props) {
                 }
             }, children: _jsxs(Flex, { className: "twa:flex-1 twa:text-2", flexDirection: "row", "data-name": "expression-editor", style: { minHeight: 0 }, children: [_jsxs(Flex, { className: "twa:flex-1 twa:pr-2 twa:overflow-auto twa:min-h-0", "data-name": "expression-builder", flexDirection: "column", children: [editorInput, StringExtensions.IsNotNullOrEmpty(expressionText?.trim()) && (_jsx(ExpressionFunctionDocumentation, { expressionFunction: selectedFunction })), 
                             /* displayed for advanced queries (observable&Aggregation) to give the users a starting point */
-                            StringExtensions.IsNullOrEmpty(expressionText?.trim()) && renderQueryHints(type), showDocumentationLinks && (_jsxs(HelpBlock, { "data-name": "query-documentation", className: "twa:my-2 twa:p-2 twa:text-3", children: [_jsx(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(queryDocumentationLink, '_blank') }), "See documentation for more details and examples"] })), _jsx(Box, { className: "twa:flex-1" }), showNamedQueryStuff && saveAsNamedQueryElement] }), _jsx(Box, { className: `${baseClassName}__sidebar twa:pb-2 twa:px-2 twa:overflow-auto twa:h-full twa:w-[280px]`, "data-name": "expression-sidebar", children: _jsx(Box, { className: "twa:h-full twa:p-2 twa:rounded-standard twa:shadow-md twa:bg-defaultbackground twa:text-foreground", children: _jsxs(Tabs, { className: "twa:h-full", children: [_jsx(Tabs.Tab, { value: "column", children: "Columns" }), _jsx(Tabs.Tab, { value: "field", children: "Fields" }), _jsx(Tabs.Tab, { value: "named-query", children: "Named Queries" }), _jsx(Tabs.Content, { className: "twa:flex-1 twa:h-full", children: _jsx(DataTableEditor, { type: "column", dataFormatter: (value) => `[${value}]`, fields: queryableColumns.map((column) => ({
+                            StringExtensions.IsNullOrEmpty(expressionText?.trim()) && renderQueryHints(type), showDocumentationLinks && (_jsxs(HelpBlock, { "data-name": "query-documentation", className: "twa:my-2 twa:p-2 twa:text-3", children: [_jsx(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(queryDocumentationLink, '_blank') }), "See documentation for more details and examples"] })), _jsx(Box, { className: "twa:flex-1" }), showNamedQueryStuff && saveAsNamedQueryElement] }), _jsx(Box, { className: `${baseClassName}__sidebar twa:pb-2 twa:px-2 twa:overflow-auto twa:h-full twa:w-[280px]`, "data-name": "expression-sidebar", children: _jsx(Box, { className: "twa:h-full twa:p-2 twa:rounded-standard twa:shadow-md twa:bg-background twa:text-foreground", children: _jsxs(Tabs, { className: "twa:h-full", children: [_jsx(Tabs.Tab, { value: "column", children: "Columns" }), _jsx(Tabs.Tab, { value: "field", children: "Fields" }), _jsx(Tabs.Tab, { value: "named-query", children: "Named Queries" }), _jsx(Tabs.Content, { className: "twa:flex-1 twa:h-full", children: _jsx(DataTableEditor, { type: "column", dataFormatter: (value) => `[${value}]`, fields: queryableColumns.map((column) => ({
                                                 label: column.friendlyName,
                                                 value: column.columnId,
                                                 dataType: column.dataType,

package/src/components/Input/index.js

@@ -14,7 +14,7 @@ const Input = React.forwardRef((props, ref) => {
         type = 'text';
     }
     return (_jsx(Box, { as: as ?? 'input', ref: ref, ...inputProps, type: type, disabled: disabled, className: cn(baseClassName, 'twa:min-h-input', 'twa:rounded-input', targetOwn.focusOutline, type ? `${baseClassName}--type-${type}` : '', disabled ? `${baseClassName}--disabled` : '', {
-            'twa:bg-(--ab-cmp-input__background)': !disabled,
+            'twa:bg-input-background': !disabled,
             'twa:bg-(--ab-cmp-input--disabled__background)': disabled,
         }, className) }));
 });

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

@@ -22,5 +22,6 @@ export type NewDropdownButtonProps = {
     align?: 'start' | 'center' | 'end';
     'data-name'?: string;
     tone?: SimpleButtonProps['tone'];
+    showDivider?: boolean;
 };
 export declare const NewDropdownButton: React.ForwardRefExoticComponent<NewDropdownButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/src/components/NewDropdownButton/index.js

@@ -6,11 +6,11 @@ import { cn } from '../../lib/utils';
 import { ChevronDownIcon } from 'lucide-react';
 import SimpleButton from '../SimpleButton';
 export const NewDropdownButton = React.forwardRef((props, ref) => {
-    const { items, children, className, disabled, tooltip, variant = 'text', accessLevel, side = 'bottom', align = 'start', 'data-name': dataName, tone = 'neutral', } = props;
+    const { items, children, className, disabled, tooltip, variant = 'text', accessLevel, side = 'bottom', align = 'start', 'data-name': dataName, tone = 'neutral', showDivider = true, } = props;
     const isHidden = accessLevel === 'Hidden';
     const isReadOnly = accessLevel === 'ReadOnly';
     const isDisabled = disabled || isHidden || isReadOnly;
-    const trigger = (_jsxs(DropdownMenuTrigger, { render: _jsx(SimpleButton, { ref: ref, tone: tone, variant: variant, disabled: isDisabled, className: cn(className, 'twa:pr-1 twa:active:translate-y-0 twa:flex-row twa:flex-none', variant !== 'text' ? 'twa:gap-1' : 'twa:gap-0.5'), "data-name": dataName }), children: [children, _jsx("div", { className: cn('twa:h-full twa:my-1', variant !== 'text' ? 'twa:border-l twa:border-border' : '') }), _jsx(ChevronDownIcon, { className: "twa:size-3.5 twa:opacity-60 twa:transition-transform twa:duration-200 twa:[[data-popup-open]_&]:rotate-180" })] }));
+    const trigger = (_jsxs(DropdownMenuTrigger, { render: _jsx(SimpleButton, { ref: ref, tone: tone, variant: variant, disabled: isDisabled, className: cn(className, 'twa:pr-1 twa:active:translate-y-0 twa:flex-row twa:flex-none', variant !== 'text' ? 'twa:gap-1' : 'twa:gap-0.5'), "data-name": dataName }), children: [children, showDivider && (_jsx("div", { className: cn('twa:h-full twa:my-1', variant !== 'text' ? 'twa:border-l twa:border-border' : '') })), _jsx(ChevronDownIcon, { className: "twa:size-3.5 twa:opacity-60 twa:transition-transform twa:duration-200 twa:[[data-popup-open]_&]:rotate-180" })] }));
     const maxLabelLength = items.reduce((max, item) => Math.max(max, typeof item.label === 'string' ? item.label.length : 0), 0);
     return (_jsxs(DropdownMenu, { children: [tooltip ? _jsx(NewTooltip, { label: tooltip, children: trigger }) : trigger, _jsx(DropdownMenuContent, { side: side, align: align, style: {
                     // minWidth: `min(max(${maxLabelLength + 5}ch, calc(var(--ab-base-space) * 32)),80vw)`,

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

@@ -9,10 +9,12 @@ type SelectGroupType<T extends SelectItemType> = {
     items: T[];
 };
 type NewSelectBaseProps<T extends SelectItemType> = {
+    chevronIcon?: React.ReactNode;
     'data-name'?: string;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     showClear?: boolean;
+    extraWidthChars?: number;
     multiple?: boolean;
     disabled?: boolean;
     value?: T['value'] | T['value'][];

package/src/components/NewSelect/index.js

@@ -30,9 +30,13 @@ const NewSelect = (props) => {
         ];
         allItems = props.items;
     }
-    const maxLabelLength = allItems.reduce((max, item) => Math.max(max, typeof item.label === 'string' ? item.label.length : 0), 0);
+    const maxLabelLength = allItems.reduce((max, item) => Math.max(max, typeof item.label === 'string'
+        ? item.label.length
+        : typeof item.tooltip === 'string'
+            ? item.tooltip.length
+            : 0), 0);
     const contentStyle = {
-        width: `max(${maxLabelLength + 3}ch, calc(var(--ab-base-space) * 20), var(--anchor-width))`,
+        width: `max(${maxLabelLength + (props.extraWidthChars ?? 3)}ch, calc(var(--ab-base-space) * 20), var(--anchor-width))`,
     };
     const renderValueProp = props.renderValue;
     const renderValueChild = renderValueProp
@@ -48,13 +52,12 @@ const NewSelect = (props) => {
             return item !== undefined ? renderValueProp(item) : undefined;
         }
         : undefined;
-    return (_jsxs(Select, { multiple: props.multiple, open: props.open, onOpenChange: props.onOpenChange, isItemEqualToValue: isItemEqualToValue, items: allItems, disabled: props.disabled, value: props.value, onValueChange: props.onValueChange, "aria-label": props.ariaLabel, defaultValue: props.defaultValue, children: [_jsx(SelectTrigger, { size: props.size === 'small' ? 'sm' : 'default', className: cn('twa:max-w-80 ab-Select', props.className), "aria-invalid": isInvalid, "aria-label": props.ariaLabel, "data-name": props['data-name'], children: _jsx(SelectValue, { placeholder: props.placeholder, className: 'twa:truncate twa:block!', children: renderValueChild }) }), _jsx(SelectContent, { alignItemWithTrigger: false, container: props.container, stopMouseDownPropagation: props.stopMouseDownPropagation, style: contentStyle, children: groups.map((group, index) => {
+    return (_jsxs(Select, { multiple: props.multiple, open: props.open, onOpenChange: props.onOpenChange, isItemEqualToValue: isItemEqualToValue, items: allItems, disabled: props.disabled, value: props.value, onValueChange: props.onValueChange, "aria-label": props.ariaLabel, defaultValue: props.defaultValue, children: [_jsx(SelectTrigger, { size: props.size === 'small' ? 'sm' : 'default', className: cn('twa:max-w-80 ab-Select', props.className), "aria-invalid": isInvalid, "aria-label": props.ariaLabel, "data-name": props['data-name'], icon: props.chevronIcon, children: _jsx(SelectValue, { placeholder: props.placeholder, className: 'twa:truncate twa:block!', children: renderValueChild }) }), _jsx(SelectContent, { "aria-label": props.ariaLabel ? `${props.ariaLabel} content` : undefined, alignItemWithTrigger: false, container: props.container, stopMouseDownPropagation: props.stopMouseDownPropagation, style: contentStyle, children: groups.map((group, index) => {
                     return (_jsxs(React.Fragment, { children: [_jsxs(SelectGroup, { children: [group.label && _jsx(SelectLabel, { children: group.label }), group.items.map((item) => {
-                                        const tooltipText = props.showItemTooltip
-                                            ? getItemTitle(item.label, item.value)
-                                            : undefined;
+                                        const itemTitle = getItemTitle(item.label, item.value);
+                                        const tooltipText = props.showItemTooltip ? itemTitle : undefined;
                                         const itemContent = item.label;
-                                        const itemElement = (_jsx(SelectItem, { value: item.value, className: 'ab-Select-Row', disabled: item.disabled, children: itemContent }, item.value));
+                                        const itemElement = (_jsx(SelectItem, { value: item.value, "aria-label": itemTitle || undefined, className: 'ab-Select-Row', disabled: item.disabled, 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));
                                         }

package/src/components/Panel/index.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { Box, Flex } from '../Flex';
 import { twMerge } from '../../twMerge';
 export const baseClassName = 'ab-Panel';
-const DEFAULT_BODY_CLS = 'twa:relative twa:flex-1 twa:p-2 twa:bg-defaultbackground twa:text-foreground';
+const DEFAULT_BODY_CLS = 'twa:relative twa:flex-1 twa:p-2 twa:bg-background twa:text-foreground';
 const Header = ({ children, variant = 'default', className, style, onClick, ...flexProps }) => {
     if (!children) {
         return null;

package/src/components/SimpleButton/index.js

@@ -92,7 +92,7 @@ const SimpleButton = React.forwardRef((givenProps, theRef) => {
         }, variant === 'text' ? 'twa:bg-transparent' : '', variant === 'ghost'
             ? 'twa:hover:bg-muted twa:hover:text-foreground twa:aria-expanded:bg-muted twa:aria-expanded:text-foreground twa:dark:hover:bg-muted/50'
             : '', variant === 'outlined'
-            ? 'twa:bg-defaultbackground twa:border-input-border twa:border'
+            ? 'twa:bg-background twa:border-input-border twa:border'
             : '', variant === 'raised'
             ? {
                 'twa:text-text-on-primary twa:shadow-(--ab-cmp-simple-button__box-shadow) twa:hover:not-disabled:shadow-(--ab-cmp-simple-button__hover-box-shadow) twa:transition-(--ab-cmp-simple-button__transition) twa:duration-200 twa:focus:shadow-(--ab-focus__box-shadow)': true,

package/src/components/Tabs/index.js

@@ -66,7 +66,7 @@ export const Tabs = (props) => {
             selectedIndex,
             tabCount: tabs.length,
             setSelectedIndex,
-        }, children: _jsxs(Box, { ...boxProps, className: join(boxProps.className, 'ab-Tabs twa:flex twa:flex-col'), "data-selected-index": selectedIndex, children: [_jsxs(Flex, { flexDirection: "row", className: clsx('ab-Tabs__Strip', 'twa:bg-(--ab-cmp-tabs-strip__background)'), children: [_jsx(Box, { className: fillerClassName }), tabs, _jsx(Flex, { className: clsx(fillerClassName, 'twa:flex-1') })] }), _jsx(Box, { ...contentProps, className: `ab-Tabs__Body twa:p-2 twa:flex-1 ${contentProps.className || ''} `, children: currentContent })] }) }));
+        }, children: _jsxs(Box, { ...boxProps, className: join(boxProps.className, 'ab-Tabs twa:flex twa:flex-col'), "data-selected-index": selectedIndex, children: [_jsxs(Flex, { flexDirection: "row", className: clsx('ab-Tabs__Strip', 'twa:bg-(--ab-cmp-tabs-strip__background)', 'twa:pt-0.5'), children: [_jsx(Box, { className: fillerClassName }), tabs, _jsx(Flex, { className: clsx(fillerClassName, 'twa:flex-1') })] }), _jsx(Box, { ...contentProps, className: `ab-Tabs__Body twa:p-2 twa:flex-1 ${contentProps.className || ''} `, children: currentContent })] }) }));
 };
 export const Tab = (props) => {
     const { index, autoFocus, keyboardNavigation = true, className: propsClassName, ...boxProps } = props;

package/src/components/Tree/TreeDropdown/index.js

@@ -3,7 +3,7 @@ import { useCallback, useMemo, useState } from 'react';
 import clsx from 'clsx';
 import { ChevronRightIcon, ChevronDownIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, } from 'lucide-react';
 import { TreeExpandState, TreeSelectionState } from '../../InfiniteTable';
-import { MultiCombobox } from '../../Combobox';
+import { GRID_FILTER_COMBBOX_ADJUSTMENTS_CLASSNAME, MultiCombobox, } from '../../Combobox';
 import { ComboboxChip } from '../../ui/combobox';
 import { toDisplayValueDefault, toDisplayValueFromOptionTree } from '../treeUtils';
 import { cn } from '../../../lib/utils';
@@ -57,15 +57,9 @@ function TreeItemLabel(props) {
     // that base-ui's boolean indicator can't.
     const indent = node.depth > 0 ? `calc(${node.depth} * var(--ab-tree-indent-size))` : 0;
     const iconProps = {
-        style: {
-            // override this explicitly since the parent ComboboxItem
-            // sets this on highlighted items, but the color is not appropriate
-            //@ts-ignore ignore
-            '--ab-color-accent-foreground': 'var(--ab-color-accent)',
-        },
         className: 'twa:size-4',
     };
-    return (_jsxs(_Fragment, { children: [node.hasChildren ? (_jsx("button", { type: "button", tabIndex: -1, "aria-label": isExpanded ? 'Collapse' : 'Expand', "data-name": "expand-collapse-icon", onMouseDown: handleChevronMouseDown, onClick: handleChevronClick, style: { order: -1, marginLeft: indent }, className: cn('twa:inline-flex twa:shrink-0 twa:items-center twa:justify-center twa:rounded', 'twa:cursor-pointer'), children: isExpanded ? _jsx(ChevronDownIcon, { ...iconProps }) : _jsx(ChevronRightIcon, { ...iconProps }) })) : reserveExpandSpace ? (_jsx("span", { "aria-hidden": "true", style: { order: -1, marginLeft: indent }, className: "twa:inline-block twa:size-4 twa:shrink-0" })) : null, _jsx(CheckBox, { checked: selected, checkSquareClassName: clsx(selected === true && 'twa:ring-1 twa:ring-accent-foreground') }), _jsx("span", { className: "twa:truncate twa:min-w-0 twa:flex-1", children: node.label })] }));
+    return (_jsxs(_Fragment, { children: [node.hasChildren ? (_jsx("button", { type: "button", tabIndex: -1, "aria-label": isExpanded ? 'Collapse' : 'Expand', "data-name": "expand-collapse-icon", onMouseDown: handleChevronMouseDown, onClick: handleChevronClick, style: { order: -1, marginLeft: indent }, className: cn('twa:bg-transparent twa:text-foreground', 'twa:inline-flex twa:shrink-0 twa:items-center twa:justify-center twa:rounded', 'twa:cursor-pointer'), children: isExpanded ? _jsx(ChevronDownIcon, { ...iconProps }) : _jsx(ChevronRightIcon, { ...iconProps }) })) : reserveExpandSpace ? (_jsx("span", { "aria-hidden": "true", style: { order: -1, marginLeft: indent }, className: "twa:inline-block twa:size-4 twa:shrink-0" })) : null, _jsx(CheckBox, { checked: selected, checkSquareClassName: clsx(selected === true && 'twa:ring-1 twa:ring-accent-foreground') }), _jsx("span", { className: "twa:truncate twa:min-w-0 twa:flex-1", children: node.label })] }));
 }
 export function TreeDropdown(props) {
     const { isLoading = false } = props;
@@ -454,7 +448,7 @@ export function TreeDropdown(props) {
             }, onClick: (e) => {
                 e.preventDefault();
                 toggleExpandAll();
-            }, className: cn('ab-NewTreeDropdown-expand-all', 'twa:inline-flex twa:shrink-0 twa:items-center twa:justify-center', 'twa:bg-defaultbackground', 'twa:size-6 twa:rounded-md twa:text-muted-foreground', 'twa:hover:text-foreground twa:hover:bg-ring/50 twa:cursor-pointer'
+            }, className: cn('ab-NewTreeDropdown-expand-all', 'twa:inline-flex twa:shrink-0 twa:items-center twa:justify-center', 'twa:bg-background', 'twa:size-6 twa:rounded-md twa:text-muted-foreground', 'twa:hover:text-foreground twa:hover:bg-ring/50 twa:cursor-pointer'
             // 'twa:-mr-1'
             ), children: anyBranchExpanded ? (_jsx(ChevronsDownUpIcon, { className: "twa:size-4" })) : (_jsx(ChevronsUpDownIcon, { className: "twa:size-4" })) }));
     }, [branchNodes.length, anyBranchExpanded, toggleExpandAll]);
@@ -479,6 +473,8 @@ export function TreeDropdown(props) {
         resizable: props.resizable,
         placeholder: props.placeholder,
         showClear: showRemoveChip,
+        //@ts-ignore ignore
+        'data-name': props['data-name'] ?? 'Select Values',
         renderItemLabel: (defaultLabel) => {
             return defaultLabel;
         },
@@ -520,10 +516,6 @@ export function GridFilterTreeDropdown(props) {
         }
         return (_jsxs("div", { className: "twa:text-ellipsis twa:overflow-hidden twa:whitespace-nowrap twa:flex-1000", "data-slot": "combobox-selected-values", children: [showSelectedCount && selectedLeafPaths.length > 0 && (_jsxs("span", { "data-name": "multiple-values-count", className: "twa:mr-0.5", children: ["(", selectedLeafPaths.length, ")"] })), children] }));
     }, [placeholder, showSelectedCount]);
-    const mergedClassName = cn(
-    // Match the restyling GridFilterCombobox uses: remove the field border,
-    // flatten the shadow and absolutely position so the component fits the
-    // grid's floating-filter input box.
-    '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!', className);
+    const mergedClassName = cn(GRID_FILTER_COMBBOX_ADJUSTMENTS_CLASSNAME, className);
     return (_jsx(TreeDropdown, { ...rest, placeholder: placeholder, className: mergedClassName, showClear: rest.showClear ?? false, resizable: rest.resizable ?? true, renderSelectedValues: renderSelectedValues }));
 }

package/src/components/ui/button.d.ts

@@ -1,8 +1,11 @@
-import { Button as ButtonPrimitive } from '@base-ui/react/button';
+import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: {
     variant?: "link" | "secondary" | "default" | "ghost" | "outline" | "destructive";
     size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg";
 } & import("class-variance-authority/dist/types").ClassProp) => string;
-declare function Button({ className, variant, size, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>): import("react").JSX.Element;
+declare const Button: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/button").ButtonProps & VariantProps<(props?: {
+    variant?: "link" | "secondary" | "default" | "ghost" | "outline" | "destructive";
+    size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg";
+} & import("class-variance-authority/dist/types").ClassProp) => string>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { Button, buttonVariants };

package/src/components/ui/button.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
 import { Button as ButtonPrimitive } from '@base-ui/react/button';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../lib/utils';
@@ -6,7 +7,7 @@ const buttonVariants = cva('twa:group/button twa:inline-flex twa:shrink-0 twa:it
     variants: {
         variant: {
             default: 'twa:bg-primary twa:text-primary-foreground twa:hover:bg-primary/80',
-            outline: 'twa:border-border twa:bg-background twa:shadow-xs twa:hover:bg-muted twa:hover:text-foreground twa:aria-expanded:bg-muted twa:aria-expanded:text-foreground twa:dark:border-input twa:dark:bg-input/30 twa:dark:hover:bg-input/50',
+            outline: 'twa:border-border twa:bg-background twa:shadow-xs twa:hover:bg-muted twa:hover:text-foreground twa:aria-expanded:bg-muted twa:aria-expanded:text-foreground twa:dark:border-input  twa:dark:hover:bg-input/50',
             secondary: 'twa:bg-secondary twa:text-secondary-foreground twa:hover:bg-secondary/80 twa:aria-expanded:bg-secondary twa:aria-expanded:text-secondary-foreground',
             ghost: 'twa:bg-transparent twa:hover:bg-muted twa:hover:text-foreground twa:aria-expanded:bg-muted twa:aria-expanded:text-foreground twa:dark:hover:bg-muted/50',
             destructive: 'twa:bg-destructive/10 twa:text-destructive twa:hover:bg-destructive/20 twa:focus-visible:border-destructive/40 twa:focus-visible:ring-destructive/20 twa:dark:bg-destructive/20 twa:dark:hover:bg-destructive/30 twa:dark:focus-visible:ring-destructive/40',
@@ -28,7 +29,7 @@ const buttonVariants = cva('twa:group/button twa:inline-flex twa:shrink-0 twa:it
         size: 'default',
     },
 });
-function Button({ className, variant = 'default', size = 'default', ...props }) {
-    return (_jsx(ButtonPrimitive, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props }));
-}
+const Button = React.forwardRef(function Button({ className, variant = 'default', size = 'default', ...props }, ref) {
+    return (_jsx(ButtonPrimitive, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props }));
+});
 export { Button, buttonVariants };

package/src/components/ui/combobox.d.ts

@@ -6,32 +6,32 @@ declare const Combobox: typeof ComboboxPrimitive.Root;
 declare const RESIZABLE_VIRTUALIZED_LIST_CLASS = "twa:group-data-resizable/combobox-content:max-h-none twa:group-data-resizable/combobox-content:flex-1 twa:group-data-resizable/combobox-content:min-h-0 twa:group-data-resizable/combobox-content:flex twa:group-data-resizable/combobox-content:flex-col";
 declare const RESIZABLE_VIRTUALIZED_SCROLL_CLASS = "twa:group-data-resizable/combobox-content:h-auto twa:group-data-resizable/combobox-content:max-h-none twa:group-data-resizable/combobox-content:flex-1 twa:group-data-resizable/combobox-content:min-h-0";
 declare function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props): React.JSX.Element;
-declare function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props): React.JSX.Element;
-export declare function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props): React.JSX.Element;
-declare function ComboboxInput({ className, children, disabled, isLoading, showTrigger, showClear, groupRef, ...props }: ComboboxPrimitive.Input.Props & {
+declare const ComboboxTrigger: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const ComboboxClear: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const ComboboxInput: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteInputProps & {
     isLoading?: boolean;
     showTrigger?: boolean;
     showClear?: boolean;
     /** Ref to the visible `InputGroup` wrapper. Use as the popup anchor so the popup
      * lines up with the perceived combobox box (input + buttons), not just the bare input. */
     groupRef?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+}, "ref"> & React.RefAttributes<HTMLInputElement>>;
 declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, resizable, contentRef, style, ...props }: ComboboxPrimitive.Popup.Props & Pick<ComboboxPrimitive.Positioner.Props, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'> & {
     resizable?: boolean;
     contentRef?: (el: HTMLDivElement | null) => void;
     maxLabelLength?: number;
 }): React.JSX.Element;
-declare function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props): React.JSX.Element;
-declare function ComboboxItem({ className, children, renderCheckboxIndicator, ...props }: ComboboxPrimitive.Item.Props & {
-    renderCheckboxIndicator?: boolean | null | ComboboxPrimitive.ItemIndicator.Props['render'];
-}): React.JSX.Element;
-declare function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props): React.JSX.Element;
-declare function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props): React.JSX.Element;
+declare const ComboboxList: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ComboboxItem: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxItemProps & {
+    renderCheckboxIndicator?: boolean | null | ComboboxPrimitive.ItemIndicator.Props["render"];
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ComboboxGroup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ComboboxLabel: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props): React.JSX.Element;
-declare function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props): React.JSX.Element;
-declare function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props): React.JSX.Element;
-declare function ComboboxChips({ className, ...props }: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props): React.JSX.Element;
-declare function ComboboxChip({ className, children, showRemove, onRemove, ...props }: ComboboxPrimitive.Chip.Props & {
+declare const ComboboxEmpty: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ComboboxSeparator: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ComboboxChips: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxChipsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ComboboxChip: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxChipProps & {
     showRemove?: boolean;
     /**
      * Optional override for the remove action. When provided, a plain button
@@ -42,7 +42,7 @@ declare function ComboboxChip({ className, children, showRemove, onRemove, ...pr
      * the chip's composite list index and would target the wrong value.
      */
     onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-}): React.JSX.Element;
-declare function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props): React.JSX.Element;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ComboboxChipsInput: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 declare function useComboboxAnchor(): React.RefObject<HTMLDivElement>;
 export { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, useComboboxAnchor, RESIZABLE_VIRTUALIZED_LIST_CLASS, RESIZABLE_VIRTUALIZED_SCROLL_CLASS, };

package/src/components/ui/combobox.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Combobox as ComboboxPrimitive } from '@base-ui/react';
 import { cn, POPUP_Z_INDEX } from '../../lib/utils';
 import { Button } from './button';
-import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from './input-group';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from './input-group';
 import { CheckIcon, ChevronDownIcon, XIcon, Loader2Icon } from 'lucide-react';
 import { CheckBox } from '../CheckBox';
 const useFilteredItems = ComboboxPrimitive.useFilteredItems;
@@ -15,16 +15,16 @@ const RESIZABLE_VIRTUALIZED_SCROLL_CLASS = 'twa:group-data-resizable/combobox-co
 function ComboboxValue({ ...props }) {
     return _jsx(ComboboxPrimitive.Value, { "data-slot": "combobox-value", ...props });
 }
-function ComboboxTrigger({ className, children, ...props }) {
-    return (_jsxs(ComboboxPrimitive.Trigger, { "data-slot": "combobox-trigger", className: cn('twa:[&_svg:not([class*=size-])]:size-4', className), ...props, children: [children, _jsx(ChevronDownIcon, { className: "twa:pointer-events-none twa:size-4 twa:text-muted-foreground" })] }));
-}
-export function ComboboxClear({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.Clear, { "data-slot": "combobox-clear", render: _jsx(InputGroupButton, { variant: "ghost", size: "icon-xs", className: "twa:min-h-auto!" }), className: cn(className), ...props, children: _jsx(XIcon, { className: "twa:pointer-events-none", strokeWidth: 1 }) }));
-}
-function ComboboxInput({ className, children, disabled = false, isLoading = false, showTrigger = true, showClear = false, groupRef, ...props }) {
+const ComboboxTrigger = React.forwardRef(function ComboboxTrigger({ className, children, ...props }, ref) {
+    return (_jsxs(ComboboxPrimitive.Trigger, { "data-slot": "combobox-trigger", className: cn('twa:[&_svg:not([class*=size-])]:size-4', className), ref: ref, ...props, children: [children, _jsx(ChevronDownIcon, { className: "twa:pointer-events-none twa:size-4 twa:text-muted-foreground" })] }));
+});
+export const ComboboxClear = React.forwardRef(function ComboboxClear({ className, ...props }, ref) {
+    return (_jsx(ComboboxPrimitive.Clear, { "data-slot": "combobox-clear", render: _jsx(InputGroupButton, { variant: "ghost", size: "icon-xs", className: "twa:min-h-auto!" }), className: className, ref: ref, ...props, children: _jsx(XIcon, { className: "twa:pointer-events-none", strokeWidth: 1 }) }));
+});
+const ComboboxInput = React.forwardRef(function ComboboxInput({ className, children, disabled = false, isLoading = false, showTrigger = true, showClear = false, groupRef, ...props }, ref) {
     const { 'aria-label': ariaLabel, ...rest } = props;
-    return (_jsxs(InputGroup, { ref: groupRef, className: cn('twa:w-auto', className), "aria-label": ariaLabel, children: [_jsx(ComboboxPrimitive.Input, { render: _jsx(InputGroupInput, { disabled: disabled }), ...rest }), _jsxs(InputGroupAddon, { align: "inline-end", children: [isLoading && (_jsx(Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), showTrigger && (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, {}), "data-slot": "input-group-button", className: "twa:group-has-data-[slot=combobox-clear]/input-group:hidden twa:data-pressed:bg-transparent twa:min-h-auto!", disabled: disabled })), showClear && _jsx(ComboboxClear, { disabled: disabled })] }), children] }));
-}
+    return (_jsxs(InputGroup, { ref: groupRef, className: cn('twa:w-auto', className), "aria-label": ariaLabel, children: [_jsx(ComboboxPrimitive.Input, { ref: ref, render: _jsx(InputGroupInput, { disabled: disabled }), ...rest }), _jsxs(InputGroupAddon, { align: "inline-end", children: [isLoading && (_jsx(Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), showTrigger && (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, {}), "data-slot": "combobox-toggle", className: "twa:group-has-data-[slot=combobox-clear]/input-group:hidden twa:data-pressed:bg-transparent twa:min-h-auto!", disabled: disabled })), showClear && _jsx(ComboboxClear, { disabled: disabled })] }), children] }));
+});
 function ComboboxContent({ className, side = 'bottom', sideOffset = 6, align = 'start', alignOffset = 0, anchor, resizable = false, contentRef, style, ...props }) {
     const sizeRef = React.useRef(null);
     const popupElRef = React.useRef(null);
@@ -49,36 +49,36 @@ function ComboboxContent({ className, side = 'bottom', sideOffset = 6, align = '
         : undefined;
     return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: `twa:isolate ${POPUP_Z_INDEX}`, children: _jsx(ComboboxPrimitive.Popup, { ref: popupRef, "data-slot": "combobox-content", "data-chips": !!anchor, "data-resizable": resizable || undefined, style: { ...resizableStyle, ...style }, className: cn('twa:group/combobox-content twa:relative twa:origin-(--transform-origin) twa:overflow-hidden twa:rounded-input twa:bg-popover twa:text-popover-foreground twa:shadow-md twa:ring-1 twa:ring-foreground/10 twa:duration-100 twa:data-[side=bottom]:slide-in-from-top-2 twa:data-[side=inline-end]:slide-in-from-left-2 twa:data-[side=inline-start]:slide-in-from-right-2 twa:data-[side=left]:slide-in-from-right-2 twa:data-[side=right]:slide-in-from-left-2 twa:data-[side=top]:slide-in-from-bottom-2 twa:*:data-[slot=input-group]:m-1 twa:*:data-[slot=input-group]:mb-0 twa:*:data-[slot=input-group]:h-8 twa:*:data-[slot=input-group]:border-input/30 twa:*:data-[slot=input-group]:bg-input/30 twa:*:data-[slot=input-group]:shadow-none twa:data-open:animate-in twa:data-open:fade-in-0 twa:data-open:zoom-in-95 twa:data-closed:animate-out twa:data-closed:fade-out-0 twa:data-closed:zoom-out-95', 'twa:max-h-[min(var(--available-height),80vh)]', 'twa:max-w-[min(var(--available-width),80vw)]', 'twa:min-w-[min(calc(var(--anchor-width)+--spacing(7)),var(--available-width),80vw)]', resizable ? 'twa:flex twa:flex-col twa:min-h-24' : 'twa:w-(--anchor-width)', className), ...props }) }) }));
 }
-function ComboboxList({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", className: cn('twa:no-scrollbar twa:max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] twa:scroll-py-1 twa:overflow-y-auto twa:overscroll-contain twa:p-1 twa:data-empty:p-0', RESIZABLE_LIST_CLASS, className), ...props }));
-}
+const ComboboxList = React.forwardRef(function ComboboxList({ className, ...props }, ref) {
+    return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", className: cn('twa:no-scrollbar twa:max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] twa:scroll-py-1 twa:overflow-y-auto twa:overscroll-contain twa:p-1 twa:data-empty:p-0', RESIZABLE_LIST_CLASS, className), ref: ref, ...props }));
+});
 const checkboxIndicatorRender = (props, state) => {
     const clsForSquare = state.selected ? 'twa:ring-1 twa:ring-accent-foreground' : '';
     return (_jsx(CheckBox, { checked: state.selected, tabIndex: -1, checkSquareClassName: clsForSquare, className: "twa:p-0 twa:m-0 twa:cursor-pointer" }));
 };
-function ComboboxItem({ className, children, renderCheckboxIndicator, ...props }) {
-    return (_jsxs(ComboboxPrimitive.Item, { className: cn('twa:relative twa:flex twa:w-full twa:cursor-default twa:items-center twa:gap-2 twa:rounded-input twa:py-1.5 twa:pl-2 twa:text-sm twa:outline-hidden twa:select-none twa:data-highlighted:bg-accent twa:data-highlighted:text-accent-foreground twa:not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground twa:data-disabled:pointer-events-none twa:data-disabled:opacity-50 twa:[&_svg]:pointer-events-none twa:[&_svg]:shrink-0 twa:[&_svg:not([class*=size-])]:size-4', 'twa:cursor-pointer', renderCheckboxIndicator ? 'twa:pr-2' : 'twa:pr-8', className), ...props, "data-slot": "combobox-item", children: [renderCheckboxIndicator ? (_jsx(ComboboxPrimitive.ItemIndicator, { keepMounted: true, render: renderCheckboxIndicator === true ? checkboxIndicatorRender : renderCheckboxIndicator })) : null, children, !renderCheckboxIndicator && (_jsx(ComboboxPrimitive.ItemIndicator, { render: _jsx("span", { className: "twa:pointer-events-none twa:absolute twa:right-2 twa:flex twa:size-4 twa:items-center twa:justify-center" }), children: _jsx(CheckIcon, { className: "twa:pointer-events-none" }) }))] }));
-}
-function ComboboxGroup({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.Group, { "data-slot": "combobox-group", className: cn(className), ...props }));
-}
-function ComboboxLabel({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.GroupLabel, { "data-slot": "combobox-label", className: cn('twa:px-2 twa:py-1.5 twa:text-xs twa:text-muted-foreground', className), ...props }));
-}
+const ComboboxItem = React.forwardRef(function ComboboxItem({ className, children, renderCheckboxIndicator, ...props }, ref) {
+    return (_jsxs(ComboboxPrimitive.Item, { ref: ref, className: cn('twa:relative twa:flex twa:w-full twa:cursor-default twa:items-center twa:gap-2 twa:rounded-input twa:py-1.5 twa:pl-2 twa:text-sm twa:outline-hidden twa:select-none twa:data-highlighted:bg-accent twa:data-highlighted:text-accent-foreground twa:not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground twa:data-disabled:pointer-events-none twa:data-disabled:opacity-50 twa:[&_svg]:pointer-events-none twa:[&_svg]:shrink-0 twa:[&_svg:not([class*=size-])]:size-4', 'twa:cursor-pointer', renderCheckboxIndicator ? 'twa:pr-2' : 'twa:pr-8', className), ...props, "data-slot": "combobox-item", children: [renderCheckboxIndicator ? (_jsx(ComboboxPrimitive.ItemIndicator, { keepMounted: true, render: renderCheckboxIndicator === true ? checkboxIndicatorRender : renderCheckboxIndicator })) : null, children, !renderCheckboxIndicator && (_jsx(ComboboxPrimitive.ItemIndicator, { render: _jsx("span", { className: "twa:pointer-events-none twa:absolute twa:right-2 twa:flex twa:size-4 twa:items-center twa:justify-center" }), children: _jsx(CheckIcon, { className: "twa:pointer-events-none" }) }))] }));
+});
+const ComboboxGroup = React.forwardRef(function ComboboxGroup({ className, ...props }, ref) {
+    return (_jsx(ComboboxPrimitive.Group, { "data-slot": "combobox-group", className: cn(className), ref: ref, ...props }));
+});
+const ComboboxLabel = React.forwardRef(function ComboboxLabel({ className, ...props }, ref) {
+    return (_jsx(ComboboxPrimitive.GroupLabel, { "data-slot": "combobox-label", className: cn('twa:px-2 twa:py-1.5 twa:text-xs twa:text-muted-foreground', className), ref: ref, ...props }));
+});
 function ComboboxCollection({ ...props }) {
     return _jsx(ComboboxPrimitive.Collection, { "data-slot": "combobox-collection", ...props });
 }
-function ComboboxEmpty({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.Empty, { "data-slot": "combobox-empty", className: cn('twa:hidden twa:w-full twa:justify-center twa:py-2 twa:text-center twa:text-sm twa:text-muted-foreground twa:group-data-empty/combobox-content:flex', className), ...props }));
-}
-function ComboboxSeparator({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.Separator, { "data-slot": "combobox-separator", className: cn('twa:-mx-1 twa:my-1 twa:h-px twa:bg-border', className), ...props }));
-}
-function ComboboxChips({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn('twa:focus-within:outline-none', 'twa:flex twa:flex-wrap twa:items-center twa:gap-1.5 twa:rounded-input twa:border twa:border-input twa:bg-input-background twa:bg-clip-padding twa:text-sm twa:shadow-xs twa:transition-[color,box-shadow] twa:focus-within:border-ring twa:focus-within:ring-3 twa:focus-within:ring-ring/50 twa:has-aria-invalid:border-destructive twa:has-aria-invalid:ring-3 twa:has-aria-invalid:ring-destructive/20 twa:has-data-[slot=combobox-chip]:px-1.5 twa:dark:bg-input/30 twa:dark:has-aria-invalid:border-destructive/50 twa:dark:has-aria-invalid:ring-destructive/40', 'twa:py-1', 'twa:px-2.5', 'twa:min-h-input', 'twa:[&>input]:max-h-[calc(var(--ab-input-height)-1.5*var(--ab-base-space))]!', className), ...props }));
-}
-function ComboboxChip({ className, children, showRemove = true, onRemove, ...props }) {
-    return (_jsxs(ComboboxPrimitive.Chip, { "data-slot": "combobox-chip", className: cn('twa:flex twa:h-[calc(--spacing(5.5))] twa:w-fit twa:items-center twa:justify-center twa:gap-1 twa:rounded-input twa:bg-muted twa:px-1.5 twa:text-xs twa:font-medium twa:whitespace-nowrap twa:text-input-foreground twa:has-disabled:pointer-events-none twa:has-disabled:cursor-not-allowed twa:has-disabled:opacity-50 twa:has-data-[slot=combobox-chip-remove]:pr-0', className), ...props, children: [children, showRemove &&
+const ComboboxEmpty = React.forwardRef(function ComboboxEmpty({ className, ...props }, ref) {
+    return (_jsx(ComboboxPrimitive.Empty, { "data-slot": "combobox-empty", className: cn('twa:hidden twa:w-full twa:justify-center twa:py-2 twa:text-center twa:text-sm twa:text-muted-foreground twa:group-data-empty/combobox-content:flex', className), ref: ref, ...props }));
+});
+const ComboboxSeparator = React.forwardRef(function ComboboxSeparator({ className, ...props }, ref) {
+    return (_jsx(ComboboxPrimitive.Separator, { "data-slot": "combobox-separator", className: cn('twa:-mx-1 twa:my-1 twa:h-px twa:bg-border', className), ref: ref, ...props }));
+});
+const ComboboxChips = React.forwardRef(function ComboboxChips({ className, ...props }, ref) {
+    return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn('twa:focus-within:outline-none', 'twa:flex twa:flex-wrap twa:items-center twa:gap-1.5 twa:rounded-input twa:border twa:border-input twa:bg-input-background twa:bg-clip-padding twa:text-sm twa:shadow-xs twa:transition-[color,box-shadow] twa:focus-within:border-ring twa:focus-within:ring-3 twa:focus-within:ring-ring/50 twa:has-aria-invalid:border-destructive twa:has-aria-invalid:ring-3 twa:has-aria-invalid:ring-destructive/20 twa:has-data-[slot=combobox-chip]:px-1.5 twa:dark:has-aria-invalid:border-destructive/50 twa:dark:has-aria-invalid:ring-destructive/40', 'twa:py-1', 'twa:px-2.5', 'twa:min-h-input', 'twa:[&>input]:max-h-[calc(var(--ab-input-height)-1.5*var(--ab-base-space))]!', className), ref: ref, ...props }));
+});
+const ComboboxChip = React.forwardRef(function ComboboxChip({ className, children, showRemove = true, onRemove, ...props }, ref) {
+    return (_jsxs(ComboboxPrimitive.Chip, { ref: ref, "data-slot": "combobox-chip", className: cn('twa:flex twa:h-[calc(--spacing(5.5))] twa:w-fit twa:items-center twa:justify-center twa:gap-1 twa:rounded-input twa:bg-muted twa:px-1.5 twa:text-xs twa:font-medium twa:whitespace-nowrap twa:text-input-foreground twa:has-disabled:pointer-events-none twa:has-disabled:cursor-not-allowed twa:has-disabled:opacity-50 twa:has-data-[slot=combobox-chip-remove]:pr-0', className), ...props, children: [children, showRemove &&
                 (onRemove ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", tabIndex: -1, "data-slot": "combobox-chip-remove", className: "twa:-ml-1 twa:opacity-50 twa:hover:opacity-100", onMouseDown: (e) => {
                         // Don't let base-ui's Chip onMouseDown steal focus back to the
                         // input before the click fires.
@@ -90,10 +90,10 @@ function ComboboxChip({ className, children, showRemove = true, onRemove, ...pro
                         e.stopPropagation();
                         onRemove(e);
                     }, children: _jsx(XIcon, { className: "twa:pointer-events-none" }) })) : (_jsx(ComboboxPrimitive.ChipRemove, { render: _jsx(Button, { variant: "ghost", size: "icon-xs" }), className: "twa:-ml-1 twa:opacity-50 twa:hover:opacity-100", "data-slot": "combobox-chip-remove", children: _jsx(XIcon, { className: "twa:pointer-events-none" }) })))] }));
-}
-function ComboboxChipsInput({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.Input, { "data-slot": "combobox-chip-input", className: cn('twa:placeholder:text-muted-foreground twa:min-w-16 twa:flex-1 twa:px-2.5 twa:outline-none twa:border-none twa:bg-transparent twa:min-h-auto!', className), ...props }));
-}
+});
+const ComboboxChipsInput = React.forwardRef(function ComboboxChipsInput({ className, ...props }, ref) {
+    return (_jsx(ComboboxPrimitive.Input, { "data-slot": "combobox-chip-input", className: cn('twa:placeholder:text-muted-foreground twa:min-w-16 twa:flex-1 twa:px-2.5 twa:outline-none twa:border-none twa:bg-transparent twa:min-h-auto!', className), ref: ref, ...props }));
+});
 function useComboboxAnchor() {
     return React.useRef(null);
 }

package/src/components/ui/input-group.d.ts

@@ -1,18 +1,19 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
-import { Button } from './button';
-declare function InputGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare const InputGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const inputGroupAddonVariants: (props?: {
     align?: "inline-end" | "inline-start" | "block-end" | "block-start";
 } & import("class-variance-authority/dist/types").ClassProp) => string;
 declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
-declare const inputGroupButtonVariants: (props?: {
+declare const InputGroupButton: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react").ButtonProps & VariantProps<(props?: {
+    variant?: "link" | "secondary" | "default" | "ghost" | "outline" | "destructive";
+    size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg";
+} & import("class-variance-authority/dist/types").ClassProp) => string>, "ref"> & React.RefAttributes<HTMLButtonElement>, "type" | "size"> & VariantProps<(props?: {
     size?: "xs" | "sm" | "icon-xs" | "icon-sm";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
-declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> & VariantProps<typeof inputGroupButtonVariants> & {
-    type?: 'button' | 'submit' | 'reset';
-}): React.JSX.Element;
+} & import("class-variance-authority/dist/types").ClassProp) => string> & {
+    type?: "button" | "submit" | "reset";
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare function InputGroupText({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
-declare function InputGroupInput({ className, ...props }: React.ComponentProps<'input'>): React.JSX.Element;
-declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>): React.JSX.Element;
+declare const InputGroupInput: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const InputGroupTextarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };

package/src/components/ui/input-group.js

@@ -1,13 +1,14 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../lib/utils';
 import { Button } from './button';
 import { Input } from './input';
 import { Textarea } from './textarea';
-function InputGroup({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn('twa:group/input-group twa:relative twa:flex twa:h-input twa:w-full twa:min-w-0 twa:items-center twa:rounded-input twa:border twa:border-input twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:in-data-[slot=combobox-content]:focus-within:border-inherit twa:in-data-[slot=combobox-content]:focus-within:ring-0 twa:has-[[data-slot=input-group-control]:focus-visible]:border-ring twa:has-[[data-slot=input-group-control]:focus-visible]:ring-3 twa:has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 twa:has-[[data-slot][aria-invalid=true]]:border-destructive twa:has-[[data-slot][aria-invalid=true]]:ring-3 twa:has-[[data-slot][aria-invalid=true]]:ring-destructive/20 twa:has-[>[data-align=block-end]]:h-auto twa:has-[>[data-align=block-end]]:flex-col twa:has-[>[data-align=block-start]]:h-auto twa:has-[>[data-align=block-start]]:flex-col twa:has-[>textarea]:h-auto twa:dark:bg-input/30 twa:dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 twa:has-[>[data-align=block-end]]:[&>input]:pt-3 twa:has-[>[data-align=block-start]]:[&>input]:pb-3 twa:has-[>[data-align=inline-end]]:[&>input]:pr-1.5 twa:has-[>[data-align=inline-start]]:[&>input]:pl-1.5', className), ...props }));
-}
+const InputGroup = React.forwardRef(function InputGroup({ className, ...props }, ref) {
+    return (_jsx("div", { ref: ref, "data-slot": "input-group", role: "group", className: cn('twa:group/input-group twa:relative twa:flex twa:h-input twa:w-full twa:min-w-0 twa:items-center twa:rounded-input twa:border twa:border-input twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:in-data-[slot=combobox-content]:focus-within:border-inherit twa:in-data-[slot=combobox-content]:focus-within:ring-0 twa:has-[[data-slot=input-group-control]:focus-visible]:border-ring twa:has-[[data-slot=input-group-control]:focus-visible]:ring-3 twa:has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 twa:has-[[data-slot][aria-invalid=true]]:border-destructive twa:has-[[data-slot][aria-invalid=true]]:ring-3 twa:has-[[data-slot][aria-invalid=true]]:ring-destructive/20 twa:has-[>[data-align=block-end]]:h-auto twa:has-[>[data-align=block-end]]:flex-col twa:has-[>[data-align=block-start]]:h-auto twa:has-[>[data-align=block-start]]:flex-col twa:has-[>textarea]:h-auto twa:dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 twa:has-[>[data-align=block-end]]:[&>input]:pt-3 twa:has-[>[data-align=block-start]]:[&>input]:pb-3 twa:has-[>[data-align=inline-end]]:[&>input]:pr-1.5 twa:has-[>[data-align=inline-start]]:[&>input]:pl-1.5', className), ...props }));
+});
 const inputGroupAddonVariants = cva('twa:flex twa:h-auto twa:cursor-text twa:items-center twa:justify-center twa:gap-2 twa:py-1.5 twa:text-sm twa:font-medium twa:text-muted-foreground twa:select-none twa:group-data-[disabled=true]/input-group:opacity-50 twa:[&>kbd]:rounded-[calc(var(--ab-border-radius))] twa:[&>svg:not([class*=size-])]:size-4', {
     variants: {
         align: {
@@ -42,16 +43,16 @@ const inputGroupButtonVariants = cva('twa:flex twa:items-center twa:gap-2 twa:te
         size: 'xs',
     },
 });
-function InputGroupButton({ className, type = 'button', variant = 'ghost', size = 'xs', ...props }) {
-    return (_jsx(Button, { type: type, "data-size": size, variant: variant, className: cn(inputGroupButtonVariants({ size }), className), ...props }));
-}
+const InputGroupButton = React.forwardRef(function InputGroupButton({ className, type = 'button', variant = 'ghost', size = 'xs', ...props }, ref) {
+    return (_jsx(Button, { type: type, "data-size": size, variant: variant, className: cn(inputGroupButtonVariants({ size }), className), ref: ref, ...props }));
+});
 function InputGroupText({ className, ...props }) {
     return (_jsx("span", { className: cn('twa:flex twa:items-center twa:gap-2 twa:text-sm twa:text-muted-foreground twa:[&_svg]:pointer-events-none twa:[&_svg:not([class*=size-])]:size-4', className), ...props }));
 }
-function InputGroupInput({ className, ...props }) {
-    return (_jsx(Input, { "data-slot": "input-group-control", className: cn('twa:flex-1 twa:rounded-none twa:border-0 twa:bg-transparent twa:shadow-none twa:ring-0 twa:focus-visible:ring-0 twa:aria-invalid:ring-0 twa:dark:bg-transparent', className), ...props }));
-}
-function InputGroupTextarea({ className, ...props }) {
-    return (_jsx(Textarea, { "data-slot": "input-group-control", className: cn('twa:flex-1 twa:resize-none twa:rounded-none twa:border-0 twa:bg-transparent twa:py-2 twa:shadow-none twa:ring-0 twa:focus-visible:ring-0 twa:aria-invalid:ring-0 twa:dark:bg-transparent', className), ...props }));
-}
+const InputGroupInput = React.forwardRef(function InputGroupInput({ className, ...props }, ref) {
+    return (_jsx(Input, { "data-slot": "input-group-control", className: cn('twa:flex-1 twa:rounded-none twa:border-0 twa:bg-transparent twa:shadow-none twa:ring-0 twa:focus-visible:ring-0 twa:aria-invalid:ring-0 twa:dark:bg-transparent', className), ref: ref, ...props }));
+});
+const InputGroupTextarea = React.forwardRef(function InputGroupTextarea({ className, ...props }, ref) {
+    return (_jsx(Textarea, { "data-slot": "input-group-control", className: cn('twa:flex-1 twa:resize-none twa:rounded-none twa:border-0 twa:bg-transparent twa:py-2 twa:shadow-none twa:ring-0 twa:focus-visible:ring-0 twa:aria-invalid:ring-0 twa:dark:bg-transparent', className), ...props, ref: ref }));
+});
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };