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

package/src/components/ui/combobox.js

@@ -1,20 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RESIZABLE_VIRTUALIZED_SCROLL_CLASS = exports.RESIZABLE_VIRTUALIZED_LIST_CLASS = exports.Combobox = exports.ComboboxPrimitive = exports.useFilteredItems = void 0;
-exports.ComboboxClear = ComboboxClear;
-exports.ComboboxInput = ComboboxInput;
+exports.RESIZABLE_VIRTUALIZED_SCROLL_CLASS = exports.RESIZABLE_VIRTUALIZED_LIST_CLASS = exports.ComboboxTrigger = exports.ComboboxChipsInput = exports.ComboboxChip = exports.ComboboxChips = exports.ComboboxSeparator = exports.ComboboxEmpty = exports.ComboboxLabel = exports.ComboboxGroup = exports.ComboboxItem = exports.ComboboxList = exports.ComboboxInput = exports.Combobox = exports.ComboboxClear = exports.ComboboxPrimitive = exports.useFilteredItems = void 0;
 exports.ComboboxContent = ComboboxContent;
-exports.ComboboxList = ComboboxList;
-exports.ComboboxItem = ComboboxItem;
-exports.ComboboxGroup = ComboboxGroup;
-exports.ComboboxLabel = ComboboxLabel;
 exports.ComboboxCollection = ComboboxCollection;
-exports.ComboboxEmpty = ComboboxEmpty;
-exports.ComboboxSeparator = ComboboxSeparator;
-exports.ComboboxChips = ComboboxChips;
-exports.ComboboxChip = ComboboxChip;
-exports.ComboboxChipsInput = ComboboxChipsInput;
-exports.ComboboxTrigger = ComboboxTrigger;
 exports.ComboboxValue = ComboboxValue;
 exports.useComboboxAnchor = useComboboxAnchor;
 const tslib_1 = require("tslib");
@@ -39,16 +27,18 @@ exports.RESIZABLE_VIRTUALIZED_SCROLL_CLASS = RESIZABLE_VIRTUALIZED_SCROLL_CLASS;
 function ComboboxValue({ ...props }) {
     return (0, jsx_runtime_1.jsx)(react_1.Combobox.Value, { "data-slot": "combobox-value", ...props });
 }
-function ComboboxTrigger({ className, children, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)(react_1.Combobox.Trigger, { "data-slot": "combobox-trigger", className: (0, utils_1.cn)('twa:[&_svg:not([class*=size-])]:size-4', className), ...props, children: [children, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDownIcon, { className: "twa:pointer-events-none twa:size-4 twa:text-muted-foreground" })] }));
-}
-function ComboboxClear({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.Clear, { "data-slot": "combobox-clear", render: (0, jsx_runtime_1.jsx)(input_group_1.InputGroupButton, { variant: "ghost", size: "icon-xs", className: "twa:min-h-auto!" }), className: (0, utils_1.cn)(className), ...props, children: (0, jsx_runtime_1.jsx)(lucide_react_1.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 ((0, jsx_runtime_1.jsxs)(react_1.Combobox.Trigger, { "data-slot": "combobox-trigger", className: (0, utils_1.cn)('twa:[&_svg:not([class*=size-])]:size-4', className), ref: ref, ...props, children: [children, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDownIcon, { className: "twa:pointer-events-none twa:size-4 twa:text-muted-foreground" })] }));
+});
+exports.ComboboxTrigger = ComboboxTrigger;
+exports.ComboboxClear = React.forwardRef(function ComboboxClear({ className, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.Clear, { "data-slot": "combobox-clear", render: (0, jsx_runtime_1.jsx)(input_group_1.InputGroupButton, { variant: "ghost", size: "icon-xs", className: "twa:min-h-auto!" }), className: className, ref: ref, ...props, children: (0, jsx_runtime_1.jsx)(lucide_react_1.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 ((0, jsx_runtime_1.jsxs)(input_group_1.InputGroup, { ref: groupRef, className: (0, utils_1.cn)('twa:w-auto', className), "aria-label": ariaLabel, children: [(0, jsx_runtime_1.jsx)(react_1.Combobox.Input, { render: (0, jsx_runtime_1.jsx)(input_group_1.InputGroupInput, { disabled: disabled }), ...rest }), (0, jsx_runtime_1.jsxs)(input_group_1.InputGroupAddon, { align: "inline-end", children: [isLoading && ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), showTrigger && ((0, jsx_runtime_1.jsx)(input_group_1.InputGroupButton, { size: "icon-xs", variant: "ghost", render: (0, jsx_runtime_1.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 && (0, jsx_runtime_1.jsx)(ComboboxClear, { disabled: disabled })] }), children] }));
-}
+    return ((0, jsx_runtime_1.jsxs)(input_group_1.InputGroup, { ref: groupRef, className: (0, utils_1.cn)('twa:w-auto', className), "aria-label": ariaLabel, children: [(0, jsx_runtime_1.jsx)(react_1.Combobox.Input, { ref: ref, render: (0, jsx_runtime_1.jsx)(input_group_1.InputGroupInput, { disabled: disabled }), ...rest }), (0, jsx_runtime_1.jsxs)(input_group_1.InputGroupAddon, { align: "inline-end", children: [isLoading && ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), showTrigger && ((0, jsx_runtime_1.jsx)(input_group_1.InputGroupButton, { size: "icon-xs", variant: "ghost", render: (0, jsx_runtime_1.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 && (0, jsx_runtime_1.jsx)(exports.ComboboxClear, { disabled: disabled })] }), children] }));
+});
+exports.ComboboxInput = ComboboxInput;
 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);
@@ -73,36 +63,43 @@ function ComboboxContent({ className, side = 'bottom', sideOffset = 6, align = '
         : undefined;
     return ((0, jsx_runtime_1.jsx)(react_1.Combobox.Portal, { children: (0, jsx_runtime_1.jsx)(react_1.Combobox.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: `twa:isolate ${utils_1.POPUP_Z_INDEX}`, children: (0, jsx_runtime_1.jsx)(react_1.Combobox.Popup, { ref: popupRef, "data-slot": "combobox-content", "data-chips": !!anchor, "data-resizable": resizable || undefined, style: { ...resizableStyle, ...style }, className: (0, utils_1.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 ((0, jsx_runtime_1.jsx)(react_1.Combobox.List, { "data-slot": "combobox-list", className: (0, utils_1.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 ((0, jsx_runtime_1.jsx)(react_1.Combobox.List, { "data-slot": "combobox-list", className: (0, utils_1.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 }));
+});
+exports.ComboboxList = ComboboxList;
 const checkboxIndicatorRender = (props, state) => {
     const clsForSquare = state.selected ? 'twa:ring-1 twa:ring-accent-foreground' : '';
     return ((0, jsx_runtime_1.jsx)(CheckBox_1.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 ((0, jsx_runtime_1.jsxs)(react_1.Combobox.Item, { className: (0, utils_1.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 ? ((0, jsx_runtime_1.jsx)(react_1.Combobox.ItemIndicator, { keepMounted: true, render: renderCheckboxIndicator === true ? checkboxIndicatorRender : renderCheckboxIndicator })) : null, children, !renderCheckboxIndicator && ((0, jsx_runtime_1.jsx)(react_1.Combobox.ItemIndicator, { render: (0, jsx_runtime_1.jsx)("span", { className: "twa:pointer-events-none twa:absolute twa:right-2 twa:flex twa:size-4 twa:items-center twa:justify-center" }), children: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckIcon, { className: "twa:pointer-events-none" }) }))] }));
-}
-function ComboboxGroup({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.Group, { "data-slot": "combobox-group", className: (0, utils_1.cn)(className), ...props }));
-}
-function ComboboxLabel({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.GroupLabel, { "data-slot": "combobox-label", className: (0, utils_1.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 ((0, jsx_runtime_1.jsxs)(react_1.Combobox.Item, { ref: ref, className: (0, utils_1.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 ? ((0, jsx_runtime_1.jsx)(react_1.Combobox.ItemIndicator, { keepMounted: true, render: renderCheckboxIndicator === true ? checkboxIndicatorRender : renderCheckboxIndicator })) : null, children, !renderCheckboxIndicator && ((0, jsx_runtime_1.jsx)(react_1.Combobox.ItemIndicator, { render: (0, jsx_runtime_1.jsx)("span", { className: "twa:pointer-events-none twa:absolute twa:right-2 twa:flex twa:size-4 twa:items-center twa:justify-center" }), children: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckIcon, { className: "twa:pointer-events-none" }) }))] }));
+});
+exports.ComboboxItem = ComboboxItem;
+const ComboboxGroup = React.forwardRef(function ComboboxGroup({ className, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.Group, { "data-slot": "combobox-group", className: (0, utils_1.cn)(className), ref: ref, ...props }));
+});
+exports.ComboboxGroup = ComboboxGroup;
+const ComboboxLabel = React.forwardRef(function ComboboxLabel({ className, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.GroupLabel, { "data-slot": "combobox-label", className: (0, utils_1.cn)('twa:px-2 twa:py-1.5 twa:text-xs twa:text-muted-foreground', className), ref: ref, ...props }));
+});
+exports.ComboboxLabel = ComboboxLabel;
 function ComboboxCollection({ ...props }) {
     return (0, jsx_runtime_1.jsx)(react_1.Combobox.Collection, { "data-slot": "combobox-collection", ...props });
 }
-function ComboboxEmpty({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.Empty, { "data-slot": "combobox-empty", className: (0, utils_1.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 ((0, jsx_runtime_1.jsx)(react_1.Combobox.Separator, { "data-slot": "combobox-separator", className: (0, utils_1.cn)('twa:-mx-1 twa:my-1 twa:h-px twa:bg-border', className), ...props }));
-}
-function ComboboxChips({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.Chips, { "data-slot": "combobox-chips", className: (0, utils_1.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 ((0, jsx_runtime_1.jsxs)(react_1.Combobox.Chip, { "data-slot": "combobox-chip", className: (0, utils_1.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 ((0, jsx_runtime_1.jsx)(react_1.Combobox.Empty, { "data-slot": "combobox-empty", className: (0, utils_1.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 }));
+});
+exports.ComboboxEmpty = ComboboxEmpty;
+const ComboboxSeparator = React.forwardRef(function ComboboxSeparator({ className, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.Separator, { "data-slot": "combobox-separator", className: (0, utils_1.cn)('twa:-mx-1 twa:my-1 twa:h-px twa:bg-border', className), ref: ref, ...props }));
+});
+exports.ComboboxSeparator = ComboboxSeparator;
+const ComboboxChips = React.forwardRef(function ComboboxChips({ className, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.Chips, { "data-slot": "combobox-chips", className: (0, utils_1.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 }));
+});
+exports.ComboboxChips = ComboboxChips;
+const ComboboxChip = React.forwardRef(function ComboboxChip({ className, children, showRemove = true, onRemove, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Combobox.Chip, { ref: ref, "data-slot": "combobox-chip", className: (0, utils_1.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 ? ((0, jsx_runtime_1.jsx)(button_1.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.
@@ -114,10 +111,12 @@ function ComboboxChip({ className, children, showRemove = true, onRemove, ...pro
                         e.stopPropagation();
                         onRemove(e);
                     }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.XIcon, { className: "twa:pointer-events-none" }) })) : ((0, jsx_runtime_1.jsx)(react_1.Combobox.ChipRemove, { render: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "ghost", size: "icon-xs" }), className: "twa:-ml-1 twa:opacity-50 twa:hover:opacity-100", "data-slot": "combobox-chip-remove", children: (0, jsx_runtime_1.jsx)(lucide_react_1.XIcon, { className: "twa:pointer-events-none" }) })))] }));
-}
-function ComboboxChipsInput({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.Input, { "data-slot": "combobox-chip-input", className: (0, utils_1.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 }));
-}
+});
+exports.ComboboxChip = ComboboxChip;
+const ComboboxChipsInput = React.forwardRef(function ComboboxChipsInput({ className, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.Input, { "data-slot": "combobox-chip-input", className: (0, utils_1.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 }));
+});
+exports.ComboboxChipsInput = ComboboxChipsInput;
 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,21 +1,21 @@
 'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputGroup = InputGroup;
+exports.InputGroupTextarea = exports.InputGroupInput = exports.InputGroupButton = exports.InputGroup = void 0;
 exports.InputGroupAddon = InputGroupAddon;
-exports.InputGroupButton = InputGroupButton;
 exports.InputGroupText = InputGroupText;
-exports.InputGroupInput = InputGroupInput;
-exports.InputGroupTextarea = InputGroupTextarea;
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
 const class_variance_authority_1 = require("class-variance-authority");
 const utils_1 = require("../../lib/utils");
 const button_1 = require("./button");
 const input_1 = require("./input");
 const textarea_1 = require("./textarea");
-function InputGroup({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "input-group", role: "group", className: (0, utils_1.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 ((0, jsx_runtime_1.jsx)("div", { ref: ref, "data-slot": "input-group", role: "group", className: (0, utils_1.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 }));
+});
+exports.InputGroup = InputGroup;
 const inputGroupAddonVariants = (0, class_variance_authority_1.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: {
@@ -50,15 +50,18 @@ const inputGroupButtonVariants = (0, class_variance_authority_1.cva)('twa:flex t
         size: 'xs',
     },
 });
-function InputGroupButton({ className, type = 'button', variant = 'ghost', size = 'xs', ...props }) {
-    return ((0, jsx_runtime_1.jsx)(button_1.Button, { type: type, "data-size": size, variant: variant, className: (0, utils_1.cn)(inputGroupButtonVariants({ size }), className), ...props }));
-}
+const InputGroupButton = React.forwardRef(function InputGroupButton({ className, type = 'button', variant = 'ghost', size = 'xs', ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(button_1.Button, { type: type, "data-size": size, variant: variant, className: (0, utils_1.cn)(inputGroupButtonVariants({ size }), className), ref: ref, ...props }));
+});
+exports.InputGroupButton = InputGroupButton;
 function InputGroupText({ className, ...props }) {
     return ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.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 ((0, jsx_runtime_1.jsx)(input_1.Input, { "data-slot": "input-group-control", className: (0, utils_1.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 ((0, jsx_runtime_1.jsx)(textarea_1.Textarea, { "data-slot": "input-group-control", className: (0, utils_1.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 ((0, jsx_runtime_1.jsx)(input_1.Input, { "data-slot": "input-group-control", className: (0, utils_1.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 }));
+});
+exports.InputGroupInput = InputGroupInput;
+const InputGroupTextarea = React.forwardRef(function InputGroupTextarea({ className, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(textarea_1.Textarea, { "data-slot": "input-group-control", className: (0, utils_1.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 }));
+});
+exports.InputGroupTextarea = InputGroupTextarea;

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

@@ -1,3 +1,3 @@
-import * as React from "react";
-declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+import * as React from 'react';
+declare const Input: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export { Input };

package/src/components/ui/input.js

@@ -1,9 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = Input;
+exports.Input = void 0;
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
 const input_1 = require("@base-ui/react/input");
 const utils_1 = require("../../lib/utils");
-function Input({ className, type, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(input_1.Input, { type: type, "data-slot": "input", className: (0, utils_1.cn)("twa:h-9 twa:w-full twa:min-w-0 twa:rounded-md twa:border twa:border-input twa:bg-transparent twa:px-2.5 twa:py-1 twa:text-base twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:file:inline-flex twa:file:h-7 twa:file:border-0 twa:file:bg-transparent twa:file:text-sm twa:file:font-medium twa:file:text-foreground twa:placeholder:text-muted-foreground twa:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50 twa:disabled:pointer-events-none twa:disabled:cursor-not-allowed twa:disabled:opacity-50 twa:aria-invalid:border-destructive twa:aria-invalid:ring-3 twa:aria-invalid:ring-destructive/20 twa:md:text-sm twa:dark:bg-input/30 twa:dark:aria-invalid:border-destructive/50 twa:dark:aria-invalid:ring-destructive/40", className), ...props }));
-}
+const Input = React.forwardRef(function Input({ className, type, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(input_1.Input, { ref: ref, type: type, "data-slot": "input", className: (0, utils_1.cn)('twa:h-9 twa:w-full twa:min-w-0 twa:rounded-md twa:border twa:border-input twa:bg-transparent twa:px-2.5 twa:py-1 twa:text-base twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:file:inline-flex twa:file:h-7 twa:file:border-0 twa:file:bg-transparent twa:file:text-sm twa:file:font-medium twa:file:text-foreground twa:placeholder:text-muted-foreground twa:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50 twa:disabled:pointer-events-none twa:disabled:cursor-not-allowed twa:disabled:opacity-50 twa:aria-invalid:border-destructive twa:aria-invalid:ring-3 twa:aria-invalid:ring-destructive/20 twa:md:text-sm twa:dark:aria-invalid:border-destructive/50 twa:dark:aria-invalid:ring-destructive/40', className), ...props }));
+});
+exports.Input = Input;

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

@@ -1,9 +1,9 @@
-import * as React from "react";
-import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import * as React from 'react';
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
 declare function Popover({ ...props }: PopoverPrimitive.Root.Props): React.JSX.Element;
 declare function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props): React.JSX.Element;
-declare function PopoverContent({ className, align, alignOffset, side, sideOffset, ...props }: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): React.JSX.Element;
-declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function PopoverContent({ className, align, alignOffset, side, sideOffset, ...props }: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>): React.JSX.Element;
+declare function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 declare function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props): React.JSX.Element;
 declare function PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props): React.JSX.Element;
-export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, };
+export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };

package/src/components/ui/popover.js

@@ -15,15 +15,15 @@ function Popover({ ...props }) {
 function PopoverTrigger({ ...props }) {
     return (0, jsx_runtime_1.jsx)(popover_1.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
 }
-function PopoverContent({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(popover_1.Popover.Portal, { children: (0, jsx_runtime_1.jsx)(popover_1.Popover.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: `twa:isolate ${utils_1.POPUP_Z_INDEX}`, children: (0, jsx_runtime_1.jsx)(popover_1.Popover.Popup, { "data-slot": "popover-content", className: (0, utils_1.cn)("twa:flex twa:w-72 twa:origin-(--transform-origin) twa:flex-col twa:gap-4 twa:rounded-md twa:bg-popover twa:p-4 twa:text-sm twa:text-popover-foreground twa:shadow-md twa:ring-1 twa:ring-foreground/10 twa:outline-hidden 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-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", className), ...props }) }) }));
+function PopoverContent({ className, align = 'center', alignOffset = 0, side = 'bottom', sideOffset = 4, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(popover_1.Popover.Portal, { children: (0, jsx_runtime_1.jsx)(popover_1.Popover.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: `twa:isolate ${utils_1.POPUP_Z_INDEX}`, children: (0, jsx_runtime_1.jsx)(popover_1.Popover.Popup, { "data-slot": "popover-content", className: (0, utils_1.cn)('twa:flex twa:w-72 twa:origin-(--transform-origin) twa:flex-col twa:gap-4 twa:rounded-standard twa:bg-popover twa:p-4 twa:text-sm twa:text-popover-foreground twa:shadow-md twa:ring-1 twa:ring-foreground/10 twa:outline-hidden 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-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', className), ...props }) }) }));
 }
 function PopoverHeader({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "popover-header", className: (0, utils_1.cn)("twa:flex twa:flex-col twa:gap-1 twa:text-sm", className), ...props }));
+    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "popover-header", className: (0, utils_1.cn)('twa:flex twa:flex-col twa:gap-1 twa:text-sm', className), ...props }));
 }
 function PopoverTitle({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(popover_1.Popover.Title, { "data-slot": "popover-title", className: (0, utils_1.cn)("twa: twa:font-medium", className), ...props }));
+    return ((0, jsx_runtime_1.jsx)(popover_1.Popover.Title, { "data-slot": "popover-title", className: (0, utils_1.cn)('twa: twa:font-medium', className), ...props }));
 }
 function PopoverDescription({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(popover_1.Popover.Description, { "data-slot": "popover-description", className: (0, utils_1.cn)("twa:text-muted-foreground", className), ...props }));
+    return ((0, jsx_runtime_1.jsx)(popover_1.Popover.Description, { "data-slot": "popover-description", className: (0, utils_1.cn)('twa:text-muted-foreground', className), ...props }));
 }

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

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { Select as SelectPrimitive } from '@base-ui/react/select';
 declare const Select: typeof SelectPrimitive.Root;
-declare function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props): React.JSX.Element;
+declare const SelectGroup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare function SelectValue({ className, ...props }: SelectPrimitive.Value.Props): React.JSX.Element;
-declare function SelectTrigger({ className, size, children, ...props }: SelectPrimitive.Trigger.Props & {
-    size?: 'sm' | 'default';
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectTriggerProps & {
+    size?: "sm" | "default";
     'data-name'?: string;
-}): React.JSX.Element;
+    icon?: React.ReactNode;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare function SelectContent({ className, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, container, stopMouseDownPropagation, ...props }: SelectPrimitive.Popup.Props & Pick<SelectPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'> & {
     /** Portal mount node (e.g. popover body) so nested floating UI stays “inside” the parent surface. */
     container?: React.ComponentProps<typeof SelectPrimitive.Portal>['container'];
@@ -18,8 +19,8 @@ declare function SelectContent({ className, children, side, sideOffset, align, a
      */
     stopMouseDownPropagation?: boolean;
 }): React.JSX.Element;
-declare function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props): React.JSX.Element;
-declare function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props): React.JSX.Element;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectItemProps, "ref"> & React.RefAttributes<HTMLElement>>;
 declare function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props): React.JSX.Element;
 declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>): React.JSX.Element;
 declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>): React.JSX.Element;

package/src/components/ui/select.js

@@ -1,30 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = void 0;
+exports.SelectTrigger = exports.SelectLabel = exports.SelectItem = exports.SelectGroup = exports.Select = void 0;
 exports.SelectContent = SelectContent;
-exports.SelectGroup = SelectGroup;
-exports.SelectItem = SelectItem;
-exports.SelectLabel = SelectLabel;
 exports.SelectScrollDownButton = SelectScrollDownButton;
 exports.SelectScrollUpButton = SelectScrollUpButton;
 exports.SelectSeparator = SelectSeparator;
-exports.SelectTrigger = SelectTrigger;
 exports.SelectValue = SelectValue;
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
 const select_1 = require("@base-ui/react/select");
 const utils_1 = require("../../lib/utils");
 const lucide_react_1 = require("lucide-react");
 const Select = select_1.Select.Root;
 exports.Select = Select;
-function SelectGroup({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(select_1.Select.Group, { "data-slot": "select-group", className: (0, utils_1.cn)('twa:scroll-my-1 twa:p-1', className), ...props }));
-}
+const SelectGroup = React.forwardRef(function SelectGroup({ className, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(select_1.Select.Group, { "data-slot": "select-group", className: (0, utils_1.cn)('twa:scroll-my-1 twa:p-1', className), ref: ref, ...props }));
+});
+exports.SelectGroup = SelectGroup;
 function SelectValue({ className, ...props }) {
     return ((0, jsx_runtime_1.jsx)(select_1.Select.Value, { "data-slot": "select-value", className: (0, utils_1.cn)('twa:text-input-foreground twa:flex twa:flex-1 twa:text-left', className), ...props }));
 }
-function SelectTrigger({ className, size = 'default', children, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)(select_1.Select.Trigger, { "data-slot": "select-trigger", "data-size": size, className: (0, utils_1.cn)('twa:flex twa:w-fit twa:items-center twa:justify-between twa:gap-1.5 twa:rounded-input twa:border twa:border-input twa:py-1.5 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:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50 twa:disabled:cursor-not-allowed twa:disabled:opacity-50 twa:aria-invalid:border-destructive twa:aria-invalid:ring-3 twa:aria-invalid:ring-destructive/20 twa:data-placeholder:text-muted-foreground twa:data-[size=default]:min-h-input twa:data-[size=sm]:h-7 twa:data-[size=sm]:min-h-auto twa:*:data-[slot=select-value]:line-clamp-1 twa:*:data-[slot=select-value]:flex twa:*:data-[slot=select-value]:items-center twa:*:data-[slot=select-value]:gap-1.5 twa:bg-input-background twa:hover:bg-input-background/80 twa:dark:aria-invalid:border-destructive/50 twa:dark:aria-invalid:ring-destructive/40 twa:[&_svg]:pointer-events-none twa:[&_svg]:shrink-0 twa:[&_svg:not([class*=size-])]:size-4', className), ...props, "data-name": props['data-name'], children: [children, (0, jsx_runtime_1.jsx)(select_1.Select.Icon, { render: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDownIcon, { className: "twa:pointer-events-none twa:size-4 twa:text-muted-foreground" }) })] }));
-}
+const SelectTrigger = React.forwardRef(function SelectTrigger({ className, size = 'default', children, icon, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsxs)(select_1.Select.Trigger, { ref: ref, "data-slot": "select-trigger", "data-size": size, className: (0, utils_1.cn)('twa:flex twa:w-fit twa:items-center twa:justify-between twa:gap-1.5 twa:rounded-input twa:border twa:border-input twa:py-1.5 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:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50 twa:disabled:cursor-not-allowed twa:disabled:opacity-50 twa:aria-invalid:border-destructive twa:aria-invalid:ring-3 twa:aria-invalid:ring-destructive/20 twa:data-placeholder:text-muted-foreground twa:data-[size=default]:min-h-input twa:data-[size=sm]:h-7 twa:data-[size=sm]:min-h-auto twa:*:data-[slot=select-value]:line-clamp-1 twa:*:data-[slot=select-value]:flex twa:*:data-[slot=select-value]:items-center twa:*:data-[slot=select-value]:gap-1.5 twa:bg-input-background twa:hover:bg-input-background/80 twa:dark:aria-invalid:border-destructive/50 twa:dark:aria-invalid:ring-destructive/40 twa:[&_svg]:pointer-events-none twa:[&_svg]:shrink-0 twa:[&_svg:not([class*=size-])]:size-4', className), ...props, "data-name": props['data-name'], children: [children, icon !== undefined ? (icon) : ((0, jsx_runtime_1.jsx)(select_1.Select.Icon, { render: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDownIcon, { className: "twa:pointer-events-none twa:size-4 twa:text-muted-foreground" }) }))] }));
+});
+exports.SelectTrigger = SelectTrigger;
 function SelectContent({ className, children, side = 'bottom', sideOffset = 4, align = 'center', alignOffset = 0, alignItemWithTrigger = true, container, stopMouseDownPropagation = false, ...props }) {
     const onMouseDown = stopMouseDownPropagation
         ? (e) => {
@@ -33,12 +33,14 @@ function SelectContent({ className, children, side = 'bottom', sideOffset = 4, a
         : undefined;
     return ((0, jsx_runtime_1.jsx)(select_1.Select.Portal, { container: container, children: (0, jsx_runtime_1.jsx)(select_1.Select.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, alignItemWithTrigger: alignItemWithTrigger, className: `twa:isolate ${utils_1.POPUP_Z_INDEX}`, children: (0, jsx_runtime_1.jsxs)(select_1.Select.Popup, { "data-slot": "select-content", "data-align-trigger": alignItemWithTrigger, onMouseDown: onMouseDown, className: (0, utils_1.cn)('twa:relative twa:isolate twa:z-50 twa:max-h-(--available-height) twa:min-w-36 twa:origin-(--transform-origin) twa:overflow-x-hidden twa:overflow-y-auto 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-[align-trigger=true]:animate-none 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-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:w-(--anchor-width)', 'twa:max-w-[min(var(--available-width),80vw)]', className), ...props, children: [(0, jsx_runtime_1.jsx)(SelectScrollUpButton, {}), (0, jsx_runtime_1.jsx)(select_1.Select.List, { children: children }), (0, jsx_runtime_1.jsx)(SelectScrollDownButton, {})] }) }) }));
 }
-function SelectLabel({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(select_1.Select.GroupLabel, { "data-slot": "select-label", className: (0, utils_1.cn)('twa:px-2 twa:py-1.5 twa:text-xs twa:text-muted-foreground', className), ...props }));
-}
-function SelectItem({ className, children, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)(select_1.Select.Item, { className: (0, utils_1.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:pr-8 twa:pl-2 twa:text-sm twa:outline-hidden twa:select-none twa:focus:bg-accent twa:focus:text-accent-foreground twa:not-data-[variant=destructive]:focus:**: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:*:[span]:last:flex twa:*:[span]:last:items-center twa:*:[span]:last:gap-2', className), ...props, "data-slot": "select-item", children: [(0, jsx_runtime_1.jsx)(select_1.Select.ItemText, { className: "twa:block twa:min-w-0 twa:flex-1 twa:truncate", children: children }), (0, jsx_runtime_1.jsx)(select_1.Select.ItemIndicator, { render: (0, jsx_runtime_1.jsx)("span", { className: "twa:pointer-events-none twa:absolute twa:right-2 twa:flex twa:size-4 twa:items-center twa:justify-center" }), children: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckIcon, { className: "twa:pointer-events-none" }) })] }));
-}
+const SelectLabel = React.forwardRef(function SelectLabel({ className, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(select_1.Select.GroupLabel, { "data-slot": "select-label", className: (0, utils_1.cn)('twa:px-2 twa:py-1.5 twa:text-xs twa:text-muted-foreground', className), ref: ref, ...props }));
+});
+exports.SelectLabel = SelectLabel;
+const SelectItem = React.forwardRef(function SelectItem({ className, children, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsxs)(select_1.Select.Item, { ref: ref, className: (0, utils_1.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:pr-8 twa:pl-2 twa:text-sm twa:outline-hidden twa:select-none twa:focus:bg-accent twa:focus:text-accent-foreground twa:not-data-[variant=destructive]:focus:**: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:*:[span]:last:flex twa:*:[span]:last:items-center twa:*:[span]:last:gap-2', className), ...props, "data-slot": "select-item", children: [(0, jsx_runtime_1.jsx)(select_1.Select.ItemText, { className: "twa:block twa:min-w-0 twa:flex-1 twa:truncate", children: children }), (0, jsx_runtime_1.jsx)(select_1.Select.ItemIndicator, { render: (0, jsx_runtime_1.jsx)("span", { className: "twa:pointer-events-none twa:absolute twa:right-2 twa:flex twa:size-4 twa:items-center twa:justify-center" }), children: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckIcon, { className: "twa:pointer-events-none" }) })] }));
+});
+exports.SelectItem = SelectItem;
 function SelectSeparator({ className, ...props }) {
     return ((0, jsx_runtime_1.jsx)(select_1.Select.Separator, { "data-slot": "select-separator", className: (0, utils_1.cn)('twa:pointer-events-none twa:-mx-1 twa:my-1 twa:h-px twa:bg-border', className), ...props }));
 }

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

@@ -1,3 +1,3 @@
-import * as React from "react";
-declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
+import * as React from 'react';
+declare const Textarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 export { Textarea };

package/src/components/ui/textarea.js

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Textarea = Textarea;
+exports.Textarea = void 0;
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../lib/utils");
-function Textarea({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("textarea", { "data-slot": "textarea", className: (0, utils_1.cn)("twa:flex twa:field-sizing-content twa:min-h-16 twa:w-full twa:rounded-md twa:border twa:border-input twa:bg-transparent twa:px-2.5 twa:py-2 twa:text-base twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:placeholder:text-muted-foreground twa:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50 twa:disabled:cursor-not-allowed twa:disabled:opacity-50 twa:aria-invalid:border-destructive twa:aria-invalid:ring-3 twa:aria-invalid:ring-destructive/20 twa:md:text-sm twa:dark:bg-input/30 twa:dark:aria-invalid:border-destructive/50 twa:dark:aria-invalid:ring-destructive/40", className), ...props }));
-}
+const Textarea = React.forwardRef(function Textarea({ className, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)("textarea", { "data-slot": "textarea", className: (0, utils_1.cn)('twa:flex twa:field-sizing-content twa:min-h-16 twa:w-full twa:rounded-md twa:border twa:border-input twa:bg-transparent twa:px-2.5 twa:py-2 twa:text-base twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:placeholder:text-muted-foreground twa:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50 twa:disabled:cursor-not-allowed twa:disabled:opacity-50 twa:aria-invalid:border-destructive twa:aria-invalid:ring-3 twa:aria-invalid:ring-destructive/20 twa:md:text-sm twa:dark:aria-invalid:border-destructive/50 twa:dark:aria-invalid:ring-destructive/40', className), ref: ref, ...props }));
+});
+exports.Textarea = Textarea;

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

@@ -1,6 +1,7 @@
-import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
-declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.Props): import("react").JSX.Element;
-declare function Tooltip({ ...props }: TooltipPrimitive.Root.Props): import("react").JSX.Element;
-declare function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props): import("react").JSX.Element;
-declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): import("react").JSX.Element;
+import * as React from 'react';
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
+declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.Props): React.JSX.Element;
+declare function Tooltip({ ...props }: TooltipPrimitive.Root.Props): React.JSX.Element;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.Trigger.Props<unknown>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>): React.JSX.Element;
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/components/ui/tooltip.js

@@ -1,21 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipTrigger = void 0;
 exports.Tooltip = Tooltip;
-exports.TooltipTrigger = TooltipTrigger;
 exports.TooltipContent = TooltipContent;
 exports.TooltipProvider = TooltipProvider;
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
 const tooltip_1 = require("@base-ui/react/tooltip");
 const utils_1 = require("../../lib/utils");
 function TooltipProvider({ delay = 0, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Provider, { "data-slot": "tooltip-provider", delay: delay, ...props }));
+    return (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Provider, { "data-slot": "tooltip-provider", delay: delay, ...props });
 }
 function Tooltip({ ...props }) {
     return (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Root, { "data-slot": "tooltip", ...props });
 }
-function TooltipTrigger({ ...props }) {
-    return (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
-}
-function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Portal, { children: (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: `twa:isolate ${utils_1.POPUP_Z_INDEX}`, children: (0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip.Popup, { "data-slot": "tooltip-content", className: (0, utils_1.cn)("twa:z-50 twa:inline-flex twa:w-fit twa:max-w-xs twa:origin-(--transform-origin) twa:items-center twa:gap-1.5 twa:rounded-md twa:bg-foreground twa:px-3 twa:py-1.5 twa:text-xs twa:text-background twa:has-data-[slot=kbd]:pr-1.5 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=kbd]:relative twa:**:data-[slot=kbd]:isolate twa:**:data-[slot=kbd]:z-50 twa:**:data-[slot=kbd]:rounded-sm twa:data-[state=delayed-open]:animate-in twa:data-[state=delayed-open]:fade-in-0 twa:data-[state=delayed-open]:zoom-in-95 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", className), ...props, children: [children, (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Arrow, { className: "twa:z-50 twa:size-2.5 twa:translate-y-[calc(-50%-2px)] twa:rotate-45 twa:rounded-[2px] twa:bg-foreground twa:fill-foreground twa:data-[side=bottom]:top-1 twa:data-[side=inline-end]:top-1/2! twa:data-[side=inline-end]:-left-1 twa:data-[side=inline-end]:-translate-y-1/2 twa:data-[side=inline-start]:top-1/2! twa:data-[side=inline-start]:-right-1 twa:data-[side=inline-start]:-translate-y-1/2 twa:data-[side=left]:top-1/2! twa:data-[side=left]:-right-1 twa:data-[side=left]:-translate-y-1/2 twa:data-[side=right]:top-1/2! twa:data-[side=right]:-left-1 twa:data-[side=right]:-translate-y-1/2 twa:data-[side=top]:-bottom-2.5" })] }) }) }));
+const TooltipTrigger = React.forwardRef(function TooltipTrigger({ ...props }, ref) {
+    return (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ref: ref, ...props });
+});
+exports.TooltipTrigger = TooltipTrigger;
+function TooltipContent({ className, side = 'top', sideOffset = 4, align = 'center', alignOffset = 0, children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Portal, { children: (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: `twa:isolate ${utils_1.POPUP_Z_INDEX}`, children: (0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip.Popup, { "data-slot": "tooltip-content", className: (0, utils_1.cn)('twa:z-50 twa:inline-flex twa:w-fit twa:max-w-xs twa:origin-(--transform-origin) twa:items-center twa:gap-1.5 twa:rounded-md twa:bg-foreground twa:px-3 twa:py-1.5 twa:text-xs twa:text-background twa:has-data-[slot=kbd]:pr-1.5 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=kbd]:relative twa:**:data-[slot=kbd]:isolate twa:**:data-[slot=kbd]:z-50 twa:**:data-[slot=kbd]:rounded-sm twa:data-[state=delayed-open]:animate-in twa:data-[state=delayed-open]:fade-in-0 twa:data-[state=delayed-open]:zoom-in-95 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', className), ...props, children: [children, (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Arrow, { className: "twa:z-50 twa:size-2.5 twa:translate-y-[calc(-50%-2px)] twa:rotate-45 twa:rounded-[2px] twa:bg-foreground twa:fill-foreground twa:data-[side=bottom]:top-1 twa:data-[side=inline-end]:top-1/2! twa:data-[side=inline-end]:-left-1 twa:data-[side=inline-end]:-translate-y-1/2 twa:data-[side=inline-start]:top-1/2! twa:data-[side=inline-start]:-right-1 twa:data-[side=inline-start]:-translate-y-1/2 twa:data-[side=left]:top-1/2! twa:data-[side=left]:-right-1 twa:data-[side=left]:-translate-y-1/2 twa:data-[side=right]:top-1/2! twa:data-[side=right]:-left-1 twa:data-[side=right]:-translate-y-1/2 twa:data-[side=top]:-bottom-2.5" })] }) }) }));
 }

package/src/env.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1780401819925 || Date.now(),
-    VERSION: "23.0.0-canary.1" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1780656149577 || Date.now(),
+    VERSION: "23.0.0-canary.3" || '--current-version--',
 };

package/src/layout-manager/src/LayoutManagerModel.d.ts

@@ -1,4 +1,4 @@
-import { ColumnSizingMap, LayoutRowSelection } from '../../AdaptableState/LayoutState';
+import { ColumnSizingMap, LayoutRowSelection, RowGroupDisplayType } from '../../AdaptableState/LayoutState';
 import { XOR } from '../../Utilities/Extensions/TypeExtensions';
 /**
  * Defines how a Column is sorted
@@ -17,7 +17,7 @@ export interface BaseLayoutModel {
     /**
      * @defaultValue 'single'
      */
-    RowGroupDisplayType?: 'single' | 'multi';
+    RowGroupDisplayType?: RowGroupDisplayType;
     /**
      * Those are not actually used by the LayoutManager,
      * but we need to keep them here so we can give the layout

package/src/layout-manager/src/index.js

@@ -5,6 +5,7 @@ const infinite_react_1 = require("@infinite-table/infinite-react");
 const isPivotLayoutModel_1 = require("./isPivotLayoutModel");
 const LMEmitter_1 = require("./LMEmitter");
 const normalizeLayoutModel_1 = require("./normalizeLayoutModel");
+const rowGroupDisplayType_1 = require("./rowGroupDisplayType");
 const isLayoutEqual_1 = require("./isLayoutEqual");
 const simplifyLayoutModel_1 = require("./simplifyLayoutModel");
 const sortColumnIdsByOrder_1 = require("./sortColumnIdsByOrder");
@@ -555,7 +556,7 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
                 if (groupDisplayType === 'singleColumn') {
                     colsInLayout.add(normalizeLayoutModel_1.AUTO_GROUP_COLUMN_ID__SINGLE);
                 }
-                else {
+                else if (groupDisplayType === 'multipleColumns') {
                     this.currentLayout.RowGroupedColumns.forEach((colId) => {
                         colsInLayout.add(`${normalizeLayoutModel_1.AUTO_GROUP_COLUMN_ID__MULTI_PREFIX}${colId}`);
                     });
@@ -763,7 +764,7 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
             ColumnGroupValues,
             GrandTotalRow: this.gridApi.getGridOption('grandTotalRow'),
             SuppressAggFuncInHeader: this.gridApi.getGridOption('suppressAggFuncInHeader'),
-            RowGroupDisplayType: this.gridApi.getGridOption('groupDisplayType') === 'multipleColumns' ? 'multi' : 'single',
+            RowGroupDisplayType: (0, rowGroupDisplayType_1.gridOptionToRowGroupDisplayType)(this.gridApi.getGridOption('groupDisplayType')),
             RowSelection: this.getRowSelectionFromGrid(),
         });
         return layout;
@@ -1317,7 +1318,7 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
             // this.gridApi.applyColumnState(state);
             const hasGroupedColumns = layout.RowGroupedColumns && layout.RowGroupedColumns.length;
             if (hasGroupedColumns) {
-                const displayTypeFromLayout = layout.RowGroupDisplayType === 'multi' ? 'multipleColumns' : 'singleColumn';
+                const displayTypeFromLayout = (0, rowGroupDisplayType_1.rowGroupDisplayTypeToGridOption)(layout.RowGroupDisplayType);
                 const groupDisplayType = this.gridApi.getGridOption('groupDisplayType');
                 if (groupDisplayType !== displayTypeFromLayout) {
                     this.gridApi.setGridOption('groupDisplayType', displayTypeFromLayout);
@@ -1680,7 +1681,7 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
             this.applyPivotTotals(layout);
             const hasGroupedColumns = layout.PivotGroupedColumns && !!layout.PivotGroupedColumns.length;
             if (hasGroupedColumns) {
-                const displayTypeFromLayout = layout.RowGroupDisplayType === 'multi' ? 'multipleColumns' : 'singleColumn';
+                const displayTypeFromLayout = (0, rowGroupDisplayType_1.rowGroupDisplayTypeToGridOption)(layout.RowGroupDisplayType);
                 const groupDisplayType = this.gridApi.getGridOption('groupDisplayType');
                 if (groupDisplayType !== displayTypeFromLayout) {
                     this.gridApi.setGridOption('groupDisplayType', displayTypeFromLayout);