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

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" | "xs" | "sm" | "lg" | "icon" | "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 }));
-}
+import { cn } from '../../lib/utils';
+import { Button } from './button';
+import { Input } from './input';
+import { Textarea } from './textarea';
+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, };

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,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Input as InputPrimitive } from "@base-ui/react/input";
-import { cn } from "../../lib/utils";
-function Input({ className, type, ...props }) {
-    return (_jsx(InputPrimitive, { type: type, "data-slot": "input", className: 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 }));
-}
+import * as React from 'react';
+import { Input as InputPrimitive } from '@base-ui/react/input';
+import { cn } from '../../lib/utils';
+const Input = React.forwardRef(function Input({ className, type, ...props }, ref) {
+    return (_jsx(InputPrimitive, { ref: ref, type: type, "data-slot": "input", className: 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 }));
+});
 export { 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

@@ -1,22 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
-import { cn, POPUP_Z_INDEX } from "../../lib/utils";
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
+import { cn, POPUP_Z_INDEX } from '../../lib/utils';
 function Popover({ ...props }) {
     return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({ ...props }) {
     return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
-function PopoverContent({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }) {
-    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: `twa:isolate ${POPUP_Z_INDEX}`, children: _jsx(PopoverPrimitive.Popup, { "data-slot": "popover-content", className: 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 (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: `twa:isolate ${POPUP_Z_INDEX}`, children: _jsx(PopoverPrimitive.Popup, { "data-slot": "popover-content", className: 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 (_jsx("div", { "data-slot": "popover-header", className: cn("twa:flex twa:flex-col twa:gap-1 twa:text-sm", className), ...props }));
+    return (_jsx("div", { "data-slot": "popover-header", className: cn('twa:flex twa:flex-col twa:gap-1 twa:text-sm', className), ...props }));
 }
 function PopoverTitle({ className, ...props }) {
-    return (_jsx(PopoverPrimitive.Title, { "data-slot": "popover-title", className: cn("twa: twa:font-medium", className), ...props }));
+    return (_jsx(PopoverPrimitive.Title, { "data-slot": "popover-title", className: cn('twa: twa:font-medium', className), ...props }));
 }
 function PopoverDescription({ className, ...props }) {
-    return (_jsx(PopoverPrimitive.Description, { "data-slot": "popover-description", className: cn("twa:text-muted-foreground", className), ...props }));
+    return (_jsx(PopoverPrimitive.Description, { "data-slot": "popover-description", className: cn('twa:text-muted-foreground', className), ...props }));
 }
-export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, };
+export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };

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,31 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
 import { Select as SelectPrimitive } from '@base-ui/react/select';
-import { cn, POPUP_Z_INDEX } from "../../lib/utils";
+import { cn, POPUP_Z_INDEX } from '../../lib/utils';
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from 'lucide-react';
 const Select = SelectPrimitive.Root;
-function SelectGroup({ className, ...props }) {
-    return (_jsx(SelectPrimitive.Group, { "data-slot": "select-group", className: cn('twa:scroll-my-1 twa:p-1', className), ...props }));
-}
+const SelectGroup = React.forwardRef(function SelectGroup({ className, ...props }, ref) {
+    return (_jsx(SelectPrimitive.Group, { "data-slot": "select-group", className: cn('twa:scroll-my-1 twa:p-1', className), ref: ref, ...props }));
+});
 function SelectValue({ className, ...props }) {
     return (_jsx(SelectPrimitive.Value, { "data-slot": "select-value", className: cn('twa:text-input-foreground twa:flex twa:flex-1 twa:text-left', className), ...props }));
 }
-function SelectTrigger({ className, size = 'default', children, ...props }) {
-    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: 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, _jsx(SelectPrimitive.Icon, { render: _jsx(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 (_jsxs(SelectPrimitive.Trigger, { ref: ref, "data-slot": "select-trigger", "data-size": size, className: 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) : (_jsx(SelectPrimitive.Icon, { render: _jsx(ChevronDownIcon, { className: "twa:pointer-events-none twa:size-4 twa:text-muted-foreground" }) }))] }));
+});
 function SelectContent({ className, children, side = 'bottom', sideOffset = 4, align = 'center', alignOffset = 0, alignItemWithTrigger = true, container, stopMouseDownPropagation = false, ...props }) {
-    const onMouseDown = stopMouseDownPropagation
+    const stopEventPropagation = stopMouseDownPropagation
         ? (e) => {
+            e.stopPropagation();
             e.nativeEvent?.stopPropagation?.();
         }
         : undefined;
-    return (_jsx(SelectPrimitive.Portal, { container: container, children: _jsx(SelectPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, alignItemWithTrigger: alignItemWithTrigger, className: `twa:isolate ${POPUP_Z_INDEX}`, children: _jsxs(SelectPrimitive.Popup, { "data-slot": "select-content", "data-align-trigger": alignItemWithTrigger, onMouseDown: onMouseDown, className: 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: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.List, { children: children }), _jsx(SelectScrollDownButton, {})] }) }) }));
-}
-function SelectLabel({ className, ...props }) {
-    return (_jsx(SelectPrimitive.GroupLabel, { "data-slot": "select-label", className: cn('twa:px-2 twa:py-1.5 twa:text-xs twa:text-muted-foreground', className), ...props }));
-}
-function SelectItem({ className, children, ...props }) {
-    return (_jsxs(SelectPrimitive.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: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: [_jsx(SelectPrimitive.ItemText, { className: "twa:block twa:min-w-0 twa:flex-1 twa:truncate", children: children }), _jsx(SelectPrimitive.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" }) })] }));
-}
+    return (_jsx(SelectPrimitive.Portal, { container: container, children: _jsx(SelectPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, alignItemWithTrigger: alignItemWithTrigger, className: `twa:isolate ${POPUP_Z_INDEX}`, children: _jsxs(SelectPrimitive.Popup, { "data-slot": "select-content", "data-align-trigger": alignItemWithTrigger, onMouseDown: stopEventPropagation, onClick: stopEventPropagation, className: 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: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.List, { children: children }), _jsx(SelectScrollDownButton, {})] }) }) }));
+}
+const SelectLabel = React.forwardRef(function SelectLabel({ className, ...props }, ref) {
+    return (_jsx(SelectPrimitive.GroupLabel, { "data-slot": "select-label", className: cn('twa:px-2 twa:py-1.5 twa:text-xs twa:text-muted-foreground', className), ref: ref, ...props }));
+});
+const SelectItem = React.forwardRef(function SelectItem({ className, children, ...props }, ref) {
+    return (_jsxs(SelectPrimitive.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: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: [_jsx(SelectPrimitive.ItemText, { className: "twa:block twa:min-w-0 twa:flex-1 twa:truncate", children: children }), _jsx(SelectPrimitive.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 SelectSeparator({ className, ...props }) {
     return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: 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,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../lib/utils";
-function Textarea({ className, ...props }) {
-    return (_jsx("textarea", { "data-slot": "textarea", className: 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 }));
-}
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+const Textarea = React.forwardRef(function Textarea({ className, ...props }, ref) {
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn('twa:text-input-foreground 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 }));
+});
 export { 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,16 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
-import { cn, POPUP_Z_INDEX } from "../../lib/utils";
+import * as React from 'react';
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
+import { cn, POPUP_Z_INDEX } from '../../lib/utils';
 function TooltipProvider({ delay = 0, ...props }) {
-    return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delay: delay, ...props }));
+    return _jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delay: delay, ...props });
 }
 function Tooltip({ ...props }) {
     return _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
 }
-function TooltipTrigger({ ...props }) {
-    return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
-}
-function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
-    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: `twa:isolate ${POPUP_Z_INDEX}`, children: _jsxs(TooltipPrimitive.Popup, { "data-slot": "tooltip-content", className: 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, _jsx(TooltipPrimitive.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 _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ref: ref, ...props });
+});
+function TooltipContent({ className, side = 'top', sideOffset = 4, align = 'center', alignOffset = 0, children, ...props }) {
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: `twa:isolate ${POPUP_Z_INDEX}`, children: _jsxs(TooltipPrimitive.Popup, { "data-slot": "tooltip-content", className: 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, _jsx(TooltipPrimitive.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" })] }) }) }));
 }
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/env.js

@@ -1,5 +1,5 @@
 export 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: 1780401790580 || Date.now(),
-    VERSION: "23.0.0-canary.1" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1782199086573 || Date.now(),
+    VERSION: "23.0.0-canary.10" || '--current-version--',
 };

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

@@ -1,4 +1,4 @@
-import { ColumnSizingMap, LayoutRowSelection } from '../../AdaptableState/LayoutState';
+import { ColumnSizingMap, LayoutOpenChart, 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
@@ -53,6 +53,10 @@ export interface BaseLayoutModel {
     Ignore_AdaptableVersion?: string;
     Ignore_Uuid?: string;
     Ignore_Metadata?: any;
+    /**
+     * AG Grid charts to open when this layout is selected (not used by LayoutManager)
+     */
+    Ignore_OpenCharts?: LayoutOpenChart[];
     /**
      * The Layout Name
      */

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

@@ -2,6 +2,7 @@ import { debounce, DeepMap } from '@infinite-table/infinite-react';
 import { isPivotLayoutModel } from './isPivotLayoutModel';
 import { LMEmitter } from './LMEmitter';
 import { AUTO_GROUP_COLUMN_ID__MULTI_PREFIX, AUTO_GROUP_COLUMN_ID__SINGLE, normalizeLayoutModel, normalizePivotLayoutModel, normalizeTableLayoutModel, } from './normalizeLayoutModel';
+import { gridOptionToRowGroupDisplayType, rowGroupDisplayTypeToGridOption, } from './rowGroupDisplayType';
 import { getChanges, isLayoutEqual } from './isLayoutEqual';
 import { simplifyLayoutModel, simplifyPivotLayoutModel, simplifyTableLayoutModel, } from './simplifyLayoutModel';
 import { sortColumnIdsByOrder } from './sortColumnIdsByOrder';
@@ -9,7 +10,6 @@ import { destructurePivotColumnId } from './destructurePivotColumnId';
 import { isPivotAggTotalColumn } from './isPivotAggTotalColumn';
 import { isPivotGrandTotal } from './isPivotGrandTotal';
 import { isPivotColumnTotal } from './isPivotColumnTotal';
-import { isParameterizedAggFuncName } from '../../Aggregation/ParameterizedAggregationRegistry';
 import { getMarker } from '../../devTools';
 export const PIVOT_ANY_TOTAL_COL_TYPE = 'pivotAnyTotal';
 export const PIVOT_GRAND_TOTAL_COL_TYPE = 'pivotGrandTotal';
@@ -490,9 +490,13 @@ export class LayoutManager extends LMEmitter {
             // if it's different from the initial default column width
             else if (colState.width && initialWidth != colState.width) {
                 const colSizing = { ...ColumnSizing[colId] };
-                delete colSizing.Flex;
-                colSizing.Width = colState.width;
-                ColumnSizing[colId] = colSizing;
+                // Flex columns often report a computed width without flex in column state —
+                // keep explicit Flex sizing from the layout instead of replacing it with pixels.
+                if (colSizing.Flex == null) {
+                    delete colSizing.Flex;
+                    colSizing.Width = colState.width;
+                    ColumnSizing[colId] = colSizing;
+                }
             }
             if (colState.hide) {
                 acc[colId] = false;
@@ -522,24 +526,18 @@ export class LayoutManager extends LMEmitter {
             });
         }
         if (gridState.aggregation) {
-            TableAggregationColumns = gridState.aggregation.aggregationModel
-                .map((agg) => {
+            TableAggregationColumns = gridState.aggregation.aggregationModel.map((agg) => {
                 const prevAggForColumn = prevAggColumnsMap?.[agg.colId];
                 if (prevAggForColumn && prevAggForColumn.AggFunc.aggFunc === agg.aggFunc) {
                     return prevAggForColumn;
                 }
-                // Parameterized aggs require layout metadata (e.g. weight column); ignore incomplete picks.
-                if (isParameterizedAggFuncName(agg.aggFunc)) {
-                    return prevAggForColumn ?? null;
-                }
                 return {
                     ColumnId: agg.colId,
                     AggFunc: {
                         aggFunc: agg.aggFunc,
                     },
                 };
-            })
-                .filter(Boolean);
+            });
         }
         // if there's a current layout set
         // we want to only return the AG Grid columns that are also in the current layout
@@ -552,7 +550,7 @@ export class LayoutManager extends LMEmitter {
                 if (groupDisplayType === 'singleColumn') {
                     colsInLayout.add(AUTO_GROUP_COLUMN_ID__SINGLE);
                 }
-                else {
+                else if (groupDisplayType === 'multipleColumns') {
                     this.currentLayout.RowGroupedColumns.forEach((colId) => {
                         colsInLayout.add(`${AUTO_GROUP_COLUMN_ID__MULTI_PREFIX}${colId}`);
                     });
@@ -760,7 +758,7 @@ export class LayoutManager extends LMEmitter {
             ColumnGroupValues,
             GrandTotalRow: this.gridApi.getGridOption('grandTotalRow'),
             SuppressAggFuncInHeader: this.gridApi.getGridOption('suppressAggFuncInHeader'),
-            RowGroupDisplayType: this.gridApi.getGridOption('groupDisplayType') === 'multipleColumns' ? 'multi' : 'single',
+            RowGroupDisplayType: gridOptionToRowGroupDisplayType(this.gridApi.getGridOption('groupDisplayType')),
             RowSelection: this.getRowSelectionFromGrid(),
         });
         return layout;
@@ -1314,7 +1312,7 @@ export class LayoutManager extends LMEmitter {
             // this.gridApi.applyColumnState(state);
             const hasGroupedColumns = layout.RowGroupedColumns && layout.RowGroupedColumns.length;
             if (hasGroupedColumns) {
-                const displayTypeFromLayout = layout.RowGroupDisplayType === 'multi' ? 'multipleColumns' : 'singleColumn';
+                const displayTypeFromLayout = rowGroupDisplayTypeToGridOption(layout.RowGroupDisplayType);
                 const groupDisplayType = this.gridApi.getGridOption('groupDisplayType');
                 if (groupDisplayType !== displayTypeFromLayout) {
                     this.gridApi.setGridOption('groupDisplayType', displayTypeFromLayout);
@@ -1677,7 +1675,7 @@ export class LayoutManager extends LMEmitter {
             this.applyPivotTotals(layout);
             const hasGroupedColumns = layout.PivotGroupedColumns && !!layout.PivotGroupedColumns.length;
             if (hasGroupedColumns) {
-                const displayTypeFromLayout = layout.RowGroupDisplayType === 'multi' ? 'multipleColumns' : 'singleColumn';
+                const displayTypeFromLayout = rowGroupDisplayTypeToGridOption(layout.RowGroupDisplayType);
                 const groupDisplayType = this.gridApi.getGridOption('groupDisplayType');
                 if (groupDisplayType !== displayTypeFromLayout) {
                     this.gridApi.setGridOption('groupDisplayType', displayTypeFromLayout);

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

@@ -1,4 +1,4 @@
-import isDeepEqual from '../../Utilities/utils/isEqual';
+import { isEqual as isDeepEqual } from '../../Utilities/Extensions/ObjectExtensions';
 import { debug as debugFactory } from '@infinite-table/infinite-react';
 import { isPivotLayoutModel } from './isPivotLayoutModel';
 import { normalizePivotLayoutModel, normalizeTableLayoutModel } from './normalizeLayoutModel';

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

@@ -1,4 +1,5 @@
 import { isPivotLayoutModel } from './isPivotLayoutModel';
+import { isRowGroupAutoColumnId } from './rowGroupDisplayType';
 export const AUTO_GROUP_COLUMN_ID__SINGLE = 'ag-Grid-AutoColumn';
 export const AUTO_GROUP_COLUMN_ID__MULTI_PREFIX = 'ag-Grid-AutoColumn-';
 export function normalizeTableLayoutModel(layout, options) {
@@ -60,7 +61,10 @@ export function normalizeTableLayoutModel(layout, options) {
             displayType = displayType || 'single';
             layout.RowGroupDisplayType = displayType;
         }
-        if (displayType === 'single') {
+        if (displayType === 'groupRows') {
+            layout.TableColumns = layout.TableColumns.filter((colId) => !isRowGroupAutoColumnId(colId));
+        }
+        else if (displayType === 'single') {
             if (!ColumnOrderSet.has(AUTO_GROUP_COLUMN_ID__SINGLE)) {
                 layout.TableColumns = [AUTO_GROUP_COLUMN_ID__SINGLE, ...layout.TableColumns];
             }

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

@@ -0,0 +1,6 @@
+import { GridOptions } from 'ag-grid-enterprise';
+import { RowGroupDisplayType } from '../../AdaptableState/LayoutState';
+export type { RowGroupDisplayType };
+export declare function rowGroupDisplayTypeToGridOption(displayType: RowGroupDisplayType | undefined): GridOptions['groupDisplayType'];
+export declare function gridOptionToRowGroupDisplayType(groupDisplayType: GridOptions['groupDisplayType'] | undefined): RowGroupDisplayType;
+export declare function isRowGroupAutoColumnId(colId: string): boolean;

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

@@ -0,0 +1,24 @@
+import { AUTO_GROUP_COLUMN_ID__MULTI_PREFIX, AUTO_GROUP_COLUMN_ID__SINGLE, } from './normalizeLayoutModel';
+export function rowGroupDisplayTypeToGridOption(displayType) {
+    switch (displayType ?? 'single') {
+        case 'multi':
+            return 'multipleColumns';
+        case 'groupRows':
+            return 'groupRows';
+        case 'single':
+        default:
+            return 'singleColumn';
+    }
+}
+export function gridOptionToRowGroupDisplayType(groupDisplayType) {
+    if (groupDisplayType === 'multipleColumns') {
+        return 'multi';
+    }
+    if (groupDisplayType === 'groupRows') {
+        return 'groupRows';
+    }
+    return 'single';
+}
+export function isRowGroupAutoColumnId(colId) {
+    return colId === AUTO_GROUP_COLUMN_ID__SINGLE || colId.startsWith(AUTO_GROUP_COLUMN_ID__MULTI_PREFIX);
+}

package/src/lib/utils.d.ts

@@ -1,3 +1,23 @@
 import { type ClassValue } from 'clsx';
 export declare function cn(...inputs: ClassValue[]): string;
 export declare const POPUP_Z_INDEX = "twa:z-[9999999]";
+export declare const getFocusableElements: (root: HTMLElement) => HTMLElement[];
+type CaptureTabEvent = Pick<KeyboardEvent, 'key' | 'shiftKey' | 'preventDefault'>;
+type CaptureTabTarget = HTMLElement | null | {
+    current: HTMLElement | null;
+};
+/**
+ * Traps Tab / Shift+Tab navigation within `node` so focus cycles between the
+ * first and last focusable elements instead of escaping the container.
+ *
+ * Only acts when the currently focused element is within `node` — popups that
+ * portal elsewhere (selects, datepickers) keep managing their own navigation.
+ *
+ * `node` may be an element directly or a React ref to one.
+ *
+ * Can be called directly (`captureTab(node, event)`) or curried by omitting the
+ * event (`captureTab(node)`) to get a handler that only expects the event.
+ */
+export declare function captureTab(node: CaptureTabTarget): (event: CaptureTabEvent) => void;
+export declare function captureTab(node: CaptureTabTarget, event: CaptureTabEvent): void;
+export {};

package/src/lib/utils.js

@@ -4,3 +4,48 @@ export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
 export const POPUP_Z_INDEX = 'twa:z-[9999999]';
+const FOCUSABLE_SELECTOR = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');
+export const getFocusableElements = (root) => {
+    return Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el) => {
+        if (el.hasAttribute('disabled') || el.getAttribute('aria-hidden') === 'true') {
+            return false;
+        }
+        // ignore elements that aren't actually rendered (e.g. display:none)
+        return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
+    });
+};
+export function captureTab(node, event) {
+    if (event === undefined) {
+        return (deferredEvent) => captureTab(node, deferredEvent);
+    }
+    if (event.key !== 'Tab')
+        return;
+    const root = node instanceof HTMLElement ? node : (node?.current ?? null);
+    if (!root)
+        return;
+    const active = document.activeElement;
+    if (!active || !root.contains(active))
+        return;
+    const focusable = getFocusableElements(root);
+    if (focusable.length === 0)
+        return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (event.shiftKey) {
+        if (active === first) {
+            event.preventDefault();
+            last.focus();
+        }
+    }
+    else if (active === last) {
+        event.preventDefault();
+        first.focus();
+    }
+}