@uipath/apollo-wind 2.56.0 → 2.57.0

package/dist/components/ui/multi-select.js

@@ -1,21 +1,22 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronsUpDown, X } from "lucide-react";
 import { forwardRef, useId, useState } from "react";
 import { Badge } from "./badge.js";
 import { Button } from "./button.js";
 import { Checkbox } from "./checkbox.js";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { InputGroupTrigger } from "./input-group.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn } from "../../lib/index.js";
 import { FormFieldError } from "./form-field.js";
+import { useControlValidation, useInputGroup } from "./input-group-context.js";
 const MultiSelect = /*#__PURE__*/ forwardRef(({ id, options, selected, onChange, placeholder = 'Select items...', emptyMessage = 'No items found.', className, maxSelected, disabled = false, searchPlaceholder = 'Search...', clearAllText, onBlur, error, errorId, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref)=>{
     const [open, setOpen] = useState(false);
+    const group = useInputGroup();
+    const groupAnchor = group.anchor;
+    const grouped = group.inGroup;
     const generatedId = useId();
     const validationId = errorId ?? `${id ?? `multi-select-${generatedId.replace(/:/g, '')}`}-error`;
-    const describedBy = [
-        ariaDescribedBy,
-        error ? validationId : void 0
-    ].filter(Boolean).join(' ');
     const handleUnselect = (value)=>{
         onChange(selected.filter((s)=>s !== value));
     };
@@ -32,10 +33,74 @@ const MultiSelect = /*#__PURE__*/ forwardRef(({ id, options, selected, onChange,
     const handleClearAll = ()=>{
         onChange([]);
     };
+    const validation = useControlValidation(group, {
+        error,
+        errorId: validationId,
+        'aria-invalid': ariaInvalid,
+        'aria-describedby': ariaDescribedBy,
+        'aria-errormessage': ariaErrorMessage
+    });
+    const triggerProps = {
+        id,
+        role: 'combobox',
+        'aria-expanded': open,
+        ...validation.aria,
+        'aria-label': id ? void 0 : selected.length > 0 ? `${selected.length} ${1 === selected.length ? 'item' : 'items'} selected` : placeholder,
+        disabled: disabled || group.disabled
+    };
+    const triggerContent = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: cn('flex flex-wrap gap-1 flex-1', grouped && 'min-h-6.5 items-center py-0.5 future:min-h-6 future:py-px'),
+                children: 0 === selected.length ? /*#__PURE__*/ jsx("span", {
+                    className: "text-foreground-muted",
+                    children: placeholder
+                }) : selected.map((value)=>{
+                    const option = options.find((opt)=>opt.value === value);
+                    return /*#__PURE__*/ jsxs(Badge, {
+                        variant: "secondary",
+                        className: "mr-1 future:bg-surface-raised future:hover:bg-surface-raised",
+                        onClick: (e)=>{
+                            e.stopPropagation();
+                            handleUnselect(value);
+                        },
+                        children: [
+                            option?.label,
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                "aria-label": `Remove ${option?.label}`,
+                                className: "ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer bg-transparent border-0 p-0 inline-flex items-center",
+                                onMouseDown: (e)=>{
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                },
+                                onClick: (e)=>{
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    handleUnselect(value);
+                                },
+                                children: /*#__PURE__*/ jsx(X, {
+                                    className: "h-3 w-3 text-muted-foreground hover:text-foreground"
+                                })
+                            })
+                        ]
+                    }, value);
+                })
+            }),
+            grouped ? /*#__PURE__*/ jsx("span", {
+                className: "flex h-6.5 shrink-0 items-center self-start future:h-6",
+                children: /*#__PURE__*/ jsx(ChevronsUpDown, {
+                    className: "h-4 w-4 opacity-50"
+                })
+            }) : /*#__PURE__*/ jsx(ChevronsUpDown, {
+                className: "h-4 w-4 shrink-0 opacity-50"
+            })
+        ]
+    });
     return /*#__PURE__*/ jsxs("div", {
         ref: ref,
         "data-slot": "multi-select",
-        className: cn('relative', className),
+        className: cn('relative', grouped && 'min-w-0 flex-1', className),
         children: [
             /*#__PURE__*/ jsxs(Popover, {
                 open: open,
@@ -46,63 +111,22 @@ const MultiSelect = /*#__PURE__*/ forwardRef(({ id, options, selected, onChange,
                 children: [
                     /*#__PURE__*/ jsx(PopoverTrigger, {
                         asChild: true,
-                        children: /*#__PURE__*/ jsxs(Button, {
-                            id: id,
+                        children: grouped ? /*#__PURE__*/ jsx(InputGroupTrigger, {
+                            ...triggerProps,
+                            className: cn('items-start', selected.length > 0 && 'h-auto'),
+                            children: triggerContent
+                        }) : /*#__PURE__*/ jsx(Button, {
                             variant: "outline",
-                            role: "combobox",
-                            "aria-expanded": open,
-                            "aria-invalid": error ? true : ariaInvalid,
-                            "aria-describedby": describedBy || void 0,
-                            "aria-errormessage": error ? validationId : ariaErrorMessage,
-                            "aria-label": id ? void 0 : selected.length > 0 ? `${selected.length} ${1 === selected.length ? 'item' : 'items'} selected` : placeholder,
+                            ...triggerProps,
                             className: cn('w-full justify-between future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:hover:bg-surface-hover future:font-normal future:text-foreground future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', selected.length > 0 ? 'h-auto min-h-10' : 'h-10'),
-                            disabled: disabled,
-                            children: [
-                                /*#__PURE__*/ jsx("div", {
-                                    className: "flex flex-wrap gap-1 flex-1",
-                                    children: 0 === selected.length ? /*#__PURE__*/ jsx("span", {
-                                        className: "text-foreground-muted",
-                                        children: placeholder
-                                    }) : selected.map((value)=>{
-                                        const option = options.find((opt)=>opt.value === value);
-                                        return /*#__PURE__*/ jsxs(Badge, {
-                                            variant: "secondary",
-                                            className: "mr-1 future:bg-surface-raised future:hover:bg-surface-raised",
-                                            onClick: (e)=>{
-                                                e.stopPropagation();
-                                                handleUnselect(value);
-                                            },
-                                            children: [
-                                                option?.label,
-                                                /*#__PURE__*/ jsx("button", {
-                                                    type: "button",
-                                                    "aria-label": `Remove ${option?.label}`,
-                                                    className: "ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer bg-transparent border-0 p-0 inline-flex items-center",
-                                                    onMouseDown: (e)=>{
-                                                        e.preventDefault();
-                                                        e.stopPropagation();
-                                                    },
-                                                    onClick: (e)=>{
-                                                        e.preventDefault();
-                                                        e.stopPropagation();
-                                                        handleUnselect(value);
-                                                    },
-                                                    children: /*#__PURE__*/ jsx(X, {
-                                                        className: "h-3 w-3 text-muted-foreground hover:text-foreground"
-                                                    })
-                                                })
-                                            ]
-                                        }, value);
-                                    })
-                                }),
-                                /*#__PURE__*/ jsx(ChevronsUpDown, {
-                                    className: "h-4 w-4 shrink-0 opacity-50"
-                                })
-                            ]
+                            children: triggerContent
                         })
                     }),
+                    groupAnchor && /*#__PURE__*/ jsx(PopoverAnchor, {
+                        virtualRef: groupAnchor
+                    }),
                     /*#__PURE__*/ jsxs(PopoverContent, {
-                        className: "w-[--radix-popover-trigger-width] p-0",
+                        className: "w-(--radix-popover-trigger-width) p-0",
                         align: "start",
                         children: [
                             /*#__PURE__*/ jsxs(Command, {
@@ -156,7 +180,7 @@ const MultiSelect = /*#__PURE__*/ forwardRef(({ id, options, selected, onChange,
                     })
                 ]
             }),
-            /*#__PURE__*/ jsx(FormFieldError, {
+            validation.ownMessage && /*#__PURE__*/ jsx(FormFieldError, {
                 id: validationId,
                 children: error
             })

package/dist/components/ui/popover.cjs

@@ -35,6 +35,7 @@ const react_popover_namespaceObject = require("@radix-ui/react-popover");
 const external_react_namespaceObject = require("react");
 const external_portal_container_cjs_namespaceObject = require("./portal-container.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
+const external_input_group_context_cjs_namespaceObject = require("./input-group-context.cjs");
 const Popover = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_popover_namespaceObject.Root, {
         "data-slot": "popover",
         ...props
@@ -54,15 +55,18 @@ const PopoverAnchor = /*#__PURE__*/ external_react_namespaceObject.forwardRef((p
 PopoverAnchor.displayName = react_popover_namespaceObject.Anchor.displayName;
 const PopoverContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, align = 'center', sideOffset = 4, container, ...props }, ref)=>{
     const resolvedContainer = (0, external_portal_container_cjs_namespaceObject.useResolvedPortalContainer)(container);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_popover_namespaceObject.Portal, {
-        container: resolvedContainer,
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_popover_namespaceObject.Content, {
-            ref: ref,
-            "data-slot": "popover-content",
-            align: align,
-            sideOffset: sideOffset,
-            className: (0, index_cjs_namespaceObject.cn)('z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]', className),
-            ...props
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_context_cjs_namespaceObject.InputGroupContext.Provider, {
+        value: external_input_group_context_cjs_namespaceObject.NO_GROUP,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_popover_namespaceObject.Portal, {
+            container: resolvedContainer,
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_popover_namespaceObject.Content, {
+                ref: ref,
+                "data-slot": "popover-content",
+                align: align,
+                sideOffset: sideOffset,
+                className: (0, index_cjs_namespaceObject.cn)('z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]', className),
+                ...props
+            })
         })
     });
 });

package/dist/components/ui/popover.js

@@ -4,6 +4,7 @@ import { Anchor, Content, Portal, Root, Trigger } from "@radix-ui/react-popover"
 import { forwardRef } from "react";
 import { useResolvedPortalContainer } from "./portal-container.js";
 import { cn } from "../../lib/index.js";
+import { InputGroupContext, NO_GROUP } from "./input-group-context.js";
 const Popover = (props)=>/*#__PURE__*/ jsx(Root, {
         "data-slot": "popover",
         ...props
@@ -23,15 +24,18 @@ const PopoverAnchor = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(A
 PopoverAnchor.displayName = Anchor.displayName;
 const PopoverContent = /*#__PURE__*/ forwardRef(({ className, align = 'center', sideOffset = 4, container, ...props }, ref)=>{
     const resolvedContainer = useResolvedPortalContainer(container);
-    return /*#__PURE__*/ jsx(Portal, {
-        container: resolvedContainer,
-        children: /*#__PURE__*/ jsx(Content, {
-            ref: ref,
-            "data-slot": "popover-content",
-            align: align,
-            sideOffset: sideOffset,
-            className: cn('z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]', className),
-            ...props
+    return /*#__PURE__*/ jsx(InputGroupContext.Provider, {
+        value: NO_GROUP,
+        children: /*#__PURE__*/ jsx(Portal, {
+            container: resolvedContainer,
+            children: /*#__PURE__*/ jsx(Content, {
+                ref: ref,
+                "data-slot": "popover-content",
+                align: align,
+                sideOffset: sideOffset,
+                className: cn('z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]', className),
+                ...props
+            })
         })
     });
 });

package/dist/components/ui/select.cjs

@@ -38,11 +38,13 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_select_namespaceObject = require("@radix-ui/react-select");
+const external_class_variance_authority_namespaceObject = require("class-variance-authority");
 const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
 const external_portal_container_cjs_namespaceObject = require("./portal-container.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const external_form_field_cjs_namespaceObject = require("./form-field.cjs");
+const external_input_group_context_cjs_namespaceObject = require("./input-group-context.cjs");
 const Select = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_select_namespaceObject.Root, {
         "data-slot": "select",
         ...props
@@ -60,24 +62,40 @@ const SelectValue = /*#__PURE__*/ external_react_namespaceObject.forwardRef((pro
         ...props
     }));
 SelectValue.displayName = react_select_namespaceObject.Value.displayName;
+const selectTriggerVariants = (0, external_class_variance_authority_namespaceObject.cva)('flex w-full cursor-pointer items-center justify-between bg-transparent text-base transition-colors data-[placeholder]:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm [&>span]:line-clamp-1 future:font-normal', {
+    variants: {
+        grouped: {
+            false: 'h-9 rounded-md border border-input px-3 py-1 focus:outline-none focus:ring-2 focus:ring-ring focus-visible:ring-2 focus-visible:ring-ring future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:hover:bg-surface-hover future:px-4 future:gap-4 aria-invalid:border-error aria-invalid:focus-visible:ring-error future:aria-invalid:ring-1 future:aria-invalid:ring-error/40',
+            true: 'h-full min-h-5 min-w-0 flex-1 gap-2 p-0'
+        }
+    },
+    defaultVariants: {
+        grouped: false
+    }
+});
 const SelectTrigger = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, children, error, errorId, id, ...props }, ref)=>{
+    const group = (0, external_input_group_context_cjs_namespaceObject.useInputGroup)();
     const generatedId = external_react_namespaceObject.useId();
     const validationId = errorId ?? `${id ?? `select-${generatedId.replace(/:/g, '')}`}-error`;
-    const describedBy = [
-        ariaDescribedBy,
-        error ? validationId : void 0
-    ].filter(Boolean).join(' ');
+    const validation = (0, external_input_group_context_cjs_namespaceObject.useControlValidation)(group, {
+        error,
+        errorId: validationId,
+        'aria-invalid': ariaInvalid,
+        'aria-describedby': ariaDescribedBy,
+        'aria-errormessage': ariaErrorMessage
+    });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_select_namespaceObject.Trigger, {
                 ref: ref,
                 id: id,
-                "data-slot": "select-trigger",
-                "aria-describedby": describedBy || void 0,
-                "aria-errormessage": error ? validationId : ariaErrorMessage,
-                "aria-invalid": error ? true : ariaInvalid,
-                className: (0, index_cjs_namespaceObject.cn)('flex h-9 w-full cursor-pointer items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm [&>span]:line-clamp-1 future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:hover:bg-surface-hover future:px-4 future:gap-4 future:font-normal aria-invalid:border-error aria-invalid:focus-visible:ring-error future:aria-invalid:ring-1 future:aria-invalid:ring-error/40', className),
+                "data-slot": group.inGroup ? 'input-group-control' : 'select-trigger',
+                ...validation.aria,
+                className: (0, index_cjs_namespaceObject.cn)(selectTriggerVariants({
+                    grouped: group.inGroup
+                }), className),
                 ...props,
+                disabled: props.disabled || group.disabled,
                 children: [
                     children,
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_select_namespaceObject.Icon, {
@@ -88,7 +106,7 @@ const SelectTrigger = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
+            validation.ownMessage && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
                 id: validationId,
                 children: error
             })
@@ -116,24 +134,68 @@ const SelectScrollDownButton = /*#__PURE__*/ external_react_namespaceObject.forw
         })
     }));
 SelectScrollDownButton.displayName = react_select_namespaceObject.ScrollDownButton.displayName;
-const SelectContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, children, position = 'popper', container, ...props }, ref)=>{
+function useInputGroupFit(enabled) {
+    const groupAnchor = (0, external_input_group_context_cjs_namespaceObject.useInputGroup)().anchor;
+    const [offsets, setOffsets] = external_react_namespaceObject.useState(null);
+    const measure = external_react_namespaceObject.useCallback((content)=>{
+        const box = groupAnchor?.current;
+        if (!enabled || !content || !box) return;
+        const trigger = box.querySelector('[data-slot="input-group-control"][aria-expanded="true"]');
+        if (!trigger) return;
+        const boxRect = box.getBoundingClientRect();
+        const triggerRect = trigger.getBoundingClientRect();
+        const next = {
+            sideOffset: boxRect.bottom - triggerRect.bottom,
+            alignOffset: boxRect.left - triggerRect.left,
+            width: boxRect.width
+        };
+        setOffsets((prev)=>prev && prev.sideOffset === next.sideOffset && prev.alignOffset === next.alignOffset && prev.width === next.width ? prev : next);
+    }, [
+        enabled,
+        groupAnchor
+    ]);
+    return {
+        measure,
+        offsets: enabled && groupAnchor ? offsets : null
+    };
+}
+const SelectContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, children, position = 'popper', container, style, ...props }, ref)=>{
     const resolvedContainer = (0, external_portal_container_cjs_namespaceObject.useResolvedPortalContainer)(container);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_select_namespaceObject.Portal, {
-        container: resolvedContainer,
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_select_namespaceObject.Content, {
-            ref: ref,
-            "data-slot": "select-content",
-            className: (0, index_cjs_namespaceObject.cn)('relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]', 'popper' === position && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className),
-            position: position,
-            ...props,
-            children: [
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SelectScrollUpButton, {}),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_select_namespaceObject.Viewport, {
-                    className: (0, index_cjs_namespaceObject.cn)('p-1', 'popper' === position && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'),
-                    children: children
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SelectScrollDownButton, {})
-            ]
+    const fit = useInputGroupFit('popper' === position && (props.align ?? 'start') === 'start');
+    const setContent = external_react_namespaceObject.useCallback((node)=>{
+        fit.measure(node);
+        if ('function' == typeof ref) ref(node);
+        else if (ref) ref.current = node;
+    }, [
+        fit.measure,
+        ref
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_context_cjs_namespaceObject.InputGroupContext.Provider, {
+        value: external_input_group_context_cjs_namespaceObject.NO_GROUP,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_select_namespaceObject.Portal, {
+            container: resolvedContainer,
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_select_namespaceObject.Content, {
+                ref: setContent,
+                "data-slot": "select-content",
+                className: (0, index_cjs_namespaceObject.cn)('relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]', 'popper' === position && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className),
+                position: position,
+                ...props,
+                sideOffset: (props.sideOffset ?? 0) + (fit.offsets?.sideOffset ?? 0),
+                alignOffset: (props.alignOffset ?? 0) + (fit.offsets?.alignOffset ?? 0),
+                collisionPadding: props.collisionPadding ?? (fit.offsets ? 0 : void 0),
+                style: fit.offsets ? {
+                    width: fit.offsets.width,
+                    ...style
+                } : style,
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SelectScrollUpButton, {}),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_select_namespaceObject.Viewport, {
+                        className: (0, index_cjs_namespaceObject.cn)('p-1', 'popper' === position && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'),
+                        children: children
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SelectScrollDownButton, {})
+                ]
+            })
         })
     });
 });

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

@@ -19,6 +19,10 @@ export interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeo
 declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Inside an InputGroup, a `popper` panel aligned to `start` is fitted to the group's box, with its
+ * width set inline. Size it with `style.width` there, since a width class loses to the inline one.
+ */
 declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     container?: PortalContainerOverride;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/select.js

@@ -1,11 +1,13 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Content, Group, Icon, Item, ItemIndicator, ItemText, Label, Portal, Root, ScrollDownButton, ScrollUpButton, Separator, Trigger, Value, Viewport } from "@radix-ui/react-select";
+import { cva } from "class-variance-authority";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
-import { forwardRef, useId } from "react";
+import { forwardRef, useCallback, useId, useState } from "react";
 import { useResolvedPortalContainer } from "./portal-container.js";
 import { cn } from "../../lib/index.js";
 import { FormFieldError } from "./form-field.js";
+import { InputGroupContext, NO_GROUP, useControlValidation, useInputGroup } from "./input-group-context.js";
 const Select = (props)=>/*#__PURE__*/ jsx(Root, {
         "data-slot": "select",
         ...props
@@ -23,24 +25,40 @@ const SelectValue = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Val
         ...props
     }));
 SelectValue.displayName = Value.displayName;
+const selectTriggerVariants = cva('flex w-full cursor-pointer items-center justify-between bg-transparent text-base transition-colors data-[placeholder]:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm [&>span]:line-clamp-1 future:font-normal', {
+    variants: {
+        grouped: {
+            false: 'h-9 rounded-md border border-input px-3 py-1 focus:outline-none focus:ring-2 focus:ring-ring focus-visible:ring-2 focus-visible:ring-ring future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:hover:bg-surface-hover future:px-4 future:gap-4 aria-invalid:border-error aria-invalid:focus-visible:ring-error future:aria-invalid:ring-1 future:aria-invalid:ring-error/40',
+            true: 'h-full min-h-5 min-w-0 flex-1 gap-2 p-0'
+        }
+    },
+    defaultVariants: {
+        grouped: false
+    }
+});
 const SelectTrigger = /*#__PURE__*/ forwardRef(({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, children, error, errorId, id, ...props }, ref)=>{
+    const group = useInputGroup();
     const generatedId = useId();
     const validationId = errorId ?? `${id ?? `select-${generatedId.replace(/:/g, '')}`}-error`;
-    const describedBy = [
-        ariaDescribedBy,
-        error ? validationId : void 0
-    ].filter(Boolean).join(' ');
+    const validation = useControlValidation(group, {
+        error,
+        errorId: validationId,
+        'aria-invalid': ariaInvalid,
+        'aria-describedby': ariaDescribedBy,
+        'aria-errormessage': ariaErrorMessage
+    });
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsxs(Trigger, {
                 ref: ref,
                 id: id,
-                "data-slot": "select-trigger",
-                "aria-describedby": describedBy || void 0,
-                "aria-errormessage": error ? validationId : ariaErrorMessage,
-                "aria-invalid": error ? true : ariaInvalid,
-                className: cn('flex h-9 w-full cursor-pointer items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm [&>span]:line-clamp-1 future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:hover:bg-surface-hover future:px-4 future:gap-4 future:font-normal aria-invalid:border-error aria-invalid:focus-visible:ring-error future:aria-invalid:ring-1 future:aria-invalid:ring-error/40', className),
+                "data-slot": group.inGroup ? 'input-group-control' : 'select-trigger',
+                ...validation.aria,
+                className: cn(selectTriggerVariants({
+                    grouped: group.inGroup
+                }), className),
                 ...props,
+                disabled: props.disabled || group.disabled,
                 children: [
                     children,
                     /*#__PURE__*/ jsx(Icon, {
@@ -51,7 +69,7 @@ const SelectTrigger = /*#__PURE__*/ forwardRef(({ 'aria-describedby': ariaDescri
                     })
                 ]
             }),
-            /*#__PURE__*/ jsx(FormFieldError, {
+            validation.ownMessage && /*#__PURE__*/ jsx(FormFieldError, {
                 id: validationId,
                 children: error
             })
@@ -79,24 +97,68 @@ const SelectScrollDownButton = /*#__PURE__*/ forwardRef(({ className, ...props }
         })
     }));
 SelectScrollDownButton.displayName = ScrollDownButton.displayName;
-const SelectContent = /*#__PURE__*/ forwardRef(({ className, children, position = 'popper', container, ...props }, ref)=>{
+function useInputGroupFit(enabled) {
+    const groupAnchor = useInputGroup().anchor;
+    const [offsets, setOffsets] = useState(null);
+    const measure = useCallback((content)=>{
+        const box = groupAnchor?.current;
+        if (!enabled || !content || !box) return;
+        const trigger = box.querySelector('[data-slot="input-group-control"][aria-expanded="true"]');
+        if (!trigger) return;
+        const boxRect = box.getBoundingClientRect();
+        const triggerRect = trigger.getBoundingClientRect();
+        const next = {
+            sideOffset: boxRect.bottom - triggerRect.bottom,
+            alignOffset: boxRect.left - triggerRect.left,
+            width: boxRect.width
+        };
+        setOffsets((prev)=>prev && prev.sideOffset === next.sideOffset && prev.alignOffset === next.alignOffset && prev.width === next.width ? prev : next);
+    }, [
+        enabled,
+        groupAnchor
+    ]);
+    return {
+        measure,
+        offsets: enabled && groupAnchor ? offsets : null
+    };
+}
+const SelectContent = /*#__PURE__*/ forwardRef(({ className, children, position = 'popper', container, style, ...props }, ref)=>{
     const resolvedContainer = useResolvedPortalContainer(container);
-    return /*#__PURE__*/ jsx(Portal, {
-        container: resolvedContainer,
-        children: /*#__PURE__*/ jsxs(Content, {
-            ref: ref,
-            "data-slot": "select-content",
-            className: cn('relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]', 'popper' === position && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className),
-            position: position,
-            ...props,
-            children: [
-                /*#__PURE__*/ jsx(SelectScrollUpButton, {}),
-                /*#__PURE__*/ jsx(Viewport, {
-                    className: cn('p-1', 'popper' === position && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'),
-                    children: children
-                }),
-                /*#__PURE__*/ jsx(SelectScrollDownButton, {})
-            ]
+    const fit = useInputGroupFit('popper' === position && (props.align ?? 'start') === 'start');
+    const setContent = useCallback((node)=>{
+        fit.measure(node);
+        if ('function' == typeof ref) ref(node);
+        else if (ref) ref.current = node;
+    }, [
+        fit.measure,
+        ref
+    ]);
+    return /*#__PURE__*/ jsx(InputGroupContext.Provider, {
+        value: NO_GROUP,
+        children: /*#__PURE__*/ jsx(Portal, {
+            container: resolvedContainer,
+            children: /*#__PURE__*/ jsxs(Content, {
+                ref: setContent,
+                "data-slot": "select-content",
+                className: cn('relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]', 'popper' === position && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className),
+                position: position,
+                ...props,
+                sideOffset: (props.sideOffset ?? 0) + (fit.offsets?.sideOffset ?? 0),
+                alignOffset: (props.alignOffset ?? 0) + (fit.offsets?.alignOffset ?? 0),
+                collisionPadding: props.collisionPadding ?? (fit.offsets ? 0 : void 0),
+                style: fit.offsets ? {
+                    width: fit.offsets.width,
+                    ...style
+                } : style,
+                children: [
+                    /*#__PURE__*/ jsx(SelectScrollUpButton, {}),
+                    /*#__PURE__*/ jsx(Viewport, {
+                        className: cn('p-1', 'popper' === position && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'),
+                        children: children
+                    }),
+                    /*#__PURE__*/ jsx(SelectScrollDownButton, {})
+                ]
+            })
         })
     });
 });