@kismet-ux/constellation 1.0.0

package/dist/form/Select/select.js

@@ -0,0 +1,857 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import inputStyles from '../Input/input.module.scss.js';
+import { Label } from '../Label/label.js';
+import { useBreakpoint } from '../../hooks/use-mobile.js';
+import { Typography } from '../../typography/Typography/typography.js';
+import cn from 'clsx';
+import { CheckIcon, ChevronDownIcon } from 'lucide-react';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import s from './select.module.scss.js';
+
+const SELECT_ANIMATION_DURATION = 200; // keep in sync with --select-duration in select.module.scss
+const DEFAULT_SEARCH_THRESHOLD = 5;
+const DEFAULT_COLLISION_PADDING = 8;
+const SelectContext = React.createContext(null);
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function readNodeText(node) {
+    if (node == null || typeof node === 'boolean') {
+        return '';
+    }
+    if (typeof node === 'string' || typeof node === 'number') {
+        return String(node);
+    }
+    if (Array.isArray(node)) {
+        return node.map(readNodeText).join(' ').trim();
+    }
+    if (React.isValidElement(node)) {
+        return readNodeText(node.props.children);
+    }
+    return '';
+}
+function collectSelectItems(node) {
+    const items = [];
+    const visit = (childNode) => {
+        React.Children.forEach(childNode, child => {
+            if (!React.isValidElement(child)) {
+                return;
+            }
+            if (child.props.value !== undefined) {
+                items.push({
+                    value: String(child.props.value),
+                    label: readNodeText(child.props.children).trim(),
+                    disabled: Boolean(child.props.disabled),
+                });
+                return;
+            }
+            if (child.props.children) {
+                visit(child.props.children);
+            }
+        });
+    };
+    visit(node);
+    return items;
+}
+function getNavigableItems(viewport, slot) {
+    if (!viewport) {
+        return [];
+    }
+    return Array.from(viewport.querySelectorAll(`[data-slot='${slot}']:not([data-disabled='true'])`));
+}
+function focusItemByValue(viewport, slot, value) {
+    const items = getNavigableItems(viewport, slot);
+    if (!items.length) {
+        return;
+    }
+    const target = value ? items.find(item => item.dataset.value === value) : undefined;
+    (target ?? items[0])?.focus();
+}
+function moveItemFocus(viewport, slot, direction) {
+    const items = getNavigableItems(viewport, slot);
+    if (!items.length) {
+        return;
+    }
+    if (direction === 'first') {
+        items[0]?.focus();
+        return;
+    }
+    if (direction === 'last') {
+        items[items.length - 1]?.focus();
+        return;
+    }
+    const currentIndex = items.findIndex(item => item === document.activeElement);
+    const fallbackIndex = direction === 'next' ? 0 : items.length - 1;
+    if (currentIndex === -1) {
+        items[fallbackIndex]?.focus();
+        return;
+    }
+    const nextIndex = direction === 'next'
+        ? (currentIndex + 1) % items.length
+        : (currentIndex - 1 + items.length) % items.length;
+    items[nextIndex]?.focus();
+}
+function useDismissibleLayer({ contentRef, onDismiss, open, triggerRef, }) {
+    React.useEffect(() => {
+        if (!open) {
+            return;
+        }
+        const handlePointer = (event) => {
+            const target = event.target;
+            if (target instanceof Node &&
+                (triggerRef.current?.contains(target) || contentRef.current?.contains(target))) {
+                return;
+            }
+            onDismiss();
+        };
+        const handleFocus = (event) => {
+            const target = event.target;
+            if (target instanceof Node &&
+                (triggerRef.current?.contains(target) || contentRef.current?.contains(target))) {
+                return;
+            }
+            onDismiss();
+        };
+        document.addEventListener('mousedown', handlePointer);
+        document.addEventListener('touchstart', handlePointer);
+        document.addEventListener('focusin', handleFocus);
+        return () => {
+            document.removeEventListener('mousedown', handlePointer);
+            document.removeEventListener('touchstart', handlePointer);
+            document.removeEventListener('focusin', handleFocus);
+        };
+    }, [contentRef, onDismiss, open, triggerRef]);
+}
+function useSurfacePosition({ align = 'start', collisionPadding = DEFAULT_COLLISION_PADDING, contentRef, displayOpen, position = 'popper', side = 'bottom', sideOffset = 4, triggerRef, }) {
+    const [computedStyle, setComputedStyle] = React.useState({
+        position: 'fixed',
+        visibility: 'hidden',
+    });
+    const [resolvedSide, setResolvedSide] = React.useState(side);
+    React.useLayoutEffect(() => {
+        if (!displayOpen) {
+            return;
+        }
+        const triggerElement = triggerRef.current;
+        const contentElement = contentRef.current;
+        if (!triggerElement || !contentElement) {
+            return;
+        }
+        const updatePosition = () => {
+            const triggerRect = triggerElement.getBoundingClientRect();
+            const contentRect = {
+                width: contentElement.offsetWidth,
+                height: contentElement.offsetHeight,
+            };
+            const padding = collisionPadding;
+            // The surface is portaled to <body> and positioned `fixed`, so the
+            // collision boundary is always the viewport — never an ancestor's box.
+            const boundaryLeft = 0;
+            const boundaryTop = 0;
+            const boundaryWidth = window.innerWidth;
+            const boundaryHeight = window.innerHeight;
+            const boundaryRight = boundaryWidth;
+            const boundaryBottom = boundaryHeight;
+            let nextSide = side;
+            if (side === 'bottom' || side === 'top') {
+                const canFitBelow = triggerRect.bottom + sideOffset + contentRect.height <= boundaryBottom - padding;
+                const canFitAbove = triggerRect.top - sideOffset - contentRect.height >= boundaryTop + padding;
+                if (side === 'bottom' && !canFitBelow && canFitAbove) {
+                    nextSide = 'top';
+                }
+                if (side === 'top' && !canFitAbove && canFitBelow) {
+                    nextSide = 'bottom';
+                }
+            }
+            else {
+                const canFitRight = triggerRect.right + sideOffset + contentRect.width <= boundaryRight - padding;
+                const canFitLeft = triggerRect.left - sideOffset - contentRect.width >= boundaryLeft + padding;
+                if (side === 'right' && !canFitRight && canFitLeft) {
+                    nextSide = 'left';
+                }
+                if (side === 'left' && !canFitLeft && canFitRight) {
+                    nextSide = 'right';
+                }
+            }
+            let top = triggerRect.bottom + sideOffset;
+            let left = triggerRect.left;
+            if (nextSide === 'bottom' || nextSide === 'top') {
+                top =
+                    nextSide === 'bottom'
+                        ? triggerRect.bottom + sideOffset
+                        : triggerRect.top - contentRect.height - sideOffset;
+                if (align === 'center') {
+                    left = triggerRect.left + (triggerRect.width - contentRect.width) / 2;
+                }
+                else if (align === 'end') {
+                    left = triggerRect.right - contentRect.width;
+                }
+                else {
+                    left = triggerRect.left;
+                }
+            }
+            else {
+                left =
+                    nextSide === 'right'
+                        ? triggerRect.right + sideOffset
+                        : triggerRect.left - contentRect.width - sideOffset;
+                if (align === 'center') {
+                    top = triggerRect.top + (triggerRect.height - contentRect.height) / 2;
+                }
+                else if (align === 'end') {
+                    top = triggerRect.bottom - contentRect.height;
+                }
+                else {
+                    top = triggerRect.top;
+                }
+            }
+            left = clamp(left, padding, Math.max(padding, boundaryWidth - contentRect.width - padding));
+            top = clamp(top, padding, Math.max(padding, boundaryHeight - contentRect.height - padding));
+            setResolvedSide(nextSide);
+            setComputedStyle({ position: 'fixed', top, left });
+        };
+        updatePosition();
+        const resizeObserver = new ResizeObserver(updatePosition);
+        resizeObserver.observe(triggerElement);
+        resizeObserver.observe(contentElement);
+        window.addEventListener('resize', updatePosition);
+        window.addEventListener('scroll', updatePosition, true);
+        return () => {
+            resizeObserver.disconnect();
+            window.removeEventListener('resize', updatePosition);
+            window.removeEventListener('scroll', updatePosition, true);
+        };
+    }, [align, collisionPadding, contentRef, displayOpen, position, side, sideOffset, triggerRef]);
+    return { computedStyle, resolvedSide };
+}
+function useSelectContext(componentName) {
+    const context = React.useContext(SelectContext);
+    if (!context) {
+        throw new Error(`${componentName} must be used within Select.`);
+    }
+    return context;
+}
+function Surface({ align = 'start', children, className, collisionPadding = DEFAULT_COLLISION_PADDING, contentRef, displayOpen, isClosing = false, onKeyDown, open, position = 'popper', side = 'bottom', sideOffset = 4, triggerRef, ...props }) {
+    const { computedStyle, resolvedSide } = useSurfacePosition({
+        align,
+        collisionPadding,
+        contentRef,
+        displayOpen,
+        position,
+        side,
+        sideOffset,
+        triggerRef,
+    });
+    if (!displayOpen || typeof document === 'undefined') {
+        return null;
+    }
+    return createPortal(jsx("div", { ref: contentRef, "data-state": open ? 'open' : 'closed', "data-closing": isClosing ? 'true' : undefined, "data-side": resolvedSide, className: className, style: computedStyle, onKeyDown: onKeyDown, ...props, children: children }), 
+    // Always <body>: a Dialog/Sheet shell scrolls its own overflow, which would
+    // clip a dropdown rendered inside it. The dialog dismisses via a click on
+    // its overlay (not a document listener) and its focus trap only intercepts
+    // Tab, so an out-of-tree surface stays safe on both counts.
+    document.body);
+}
+function Select({ open: openProp, defaultOpen, onOpenChange, value: valueProp, defaultValue, onValueChange, disabled = false, children, ...props }) {
+    const isOpenControlled = openProp !== undefined;
+    const isValueControlled = valueProp !== undefined;
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const [isClosing, setIsClosing] = React.useState(false);
+    const closeTimerRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const viewportRef = React.useRef(null);
+    const contentId = React.useId();
+    const currentOpen = isOpenControlled ? openProp : uncontrolledOpen;
+    const currentValue = isValueControlled ? valueProp : uncontrolledValue;
+    const displayOpen = currentOpen || isClosing;
+    const items = React.useMemo(() => collectSelectItems(children), [children]);
+    const selectedLabel = items.find(item => item.value === currentValue)?.label;
+    const clearCloseTimer = React.useCallback(() => {
+        if (closeTimerRef.current) {
+            clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = null;
+        }
+    }, []);
+    const setOpen = React.useCallback((nextOpen) => {
+        if (nextOpen) {
+            clearCloseTimer();
+            setIsClosing(false);
+            if (!isOpenControlled) {
+                setUncontrolledOpen(true);
+            }
+            onOpenChange?.(true);
+            return;
+        }
+        onOpenChange?.(false);
+        if (!isOpenControlled) {
+            setUncontrolledOpen(false);
+        }
+        setIsClosing(true);
+        clearCloseTimer();
+        closeTimerRef.current = setTimeout(() => {
+            setIsClosing(false);
+        }, SELECT_ANIMATION_DURATION);
+    }, [clearCloseTimer, isOpenControlled, onOpenChange]);
+    const setValue = React.useCallback((nextValue) => {
+        if (!isValueControlled) {
+            setUncontrolledValue(nextValue);
+        }
+        onValueChange?.(nextValue);
+        setOpen(false);
+        requestAnimationFrame(() => {
+            triggerRef.current?.focus();
+        });
+    }, [isValueControlled, onValueChange, setOpen]);
+    useDismissibleLayer({
+        contentRef,
+        onDismiss: () => setOpen(false),
+        open: currentOpen,
+        triggerRef,
+    });
+    React.useEffect(() => {
+        return () => clearCloseTimer();
+    }, [clearCloseTimer]);
+    const contextValue = React.useMemo(() => ({
+        contentId,
+        contentRef,
+        disabled,
+        displayOpen,
+        isClosing,
+        items,
+        open: currentOpen,
+        selectedLabel,
+        setOpen,
+        setValue,
+        triggerRef,
+        value: currentValue,
+        viewportRef,
+    }), [
+        contentId,
+        currentOpen,
+        currentValue,
+        disabled,
+        displayOpen,
+        isClosing,
+        items,
+        selectedLabel,
+        setOpen,
+        setValue,
+    ]);
+    return (jsx(SelectContext.Provider, { value: contextValue, children: jsx("div", { "data-slot": 'select', ...props, children: children }) }));
+}
+function SelectGroup({ ...props }) {
+    return jsx("div", { "data-slot": 'select-group', ...props });
+}
+function SelectValue({ children, placeholder, ...props }) {
+    const context = useSelectContext('SelectValue');
+    const content = children ?? context.selectedLabel ?? placeholder;
+    return (jsx("span", { "data-slot": 'select-value', ...props, children: content }));
+}
+function SelectTrigger({ className, children, onClick, onKeyDown, type, ...props }) {
+    const context = useSelectContext('SelectTrigger');
+    const handleClick = (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented || context.disabled) {
+            return;
+        }
+        context.setOpen(!context.open);
+    };
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || context.disabled) {
+            return;
+        }
+        if (event.key === 'Enter' ||
+            event.key === ' ' ||
+            event.key === 'ArrowDown' ||
+            event.key === 'ArrowUp') {
+            event.preventDefault();
+            context.setOpen(true);
+        }
+        // Only claim Escape when the surface is actually open — an unguarded
+        // preventDefault would swallow it from an enclosing Dialog/Sheet.
+        if (event.key === 'Escape' && context.open) {
+            event.preventDefault();
+            context.setOpen(false);
+        }
+    };
+    return (jsxs("button", { ref: context.triggerRef, "data-slot": 'select-trigger', type: type ?? 'button', "aria-controls": context.contentId, "aria-expanded": context.open, "aria-haspopup": 'listbox', disabled: context.disabled, className: cn(s.trigger, className), onClick: handleClick, onKeyDown: handleKeyDown, ...props, children: [children, jsx(ChevronDownIcon, { className: cn(s['trigger-icon']) })] }));
+}
+function SelectContent({ align = 'start', className, children, collisionPadding = DEFAULT_COLLISION_PADDING, onKeyDown, position = 'popper', side = 'bottom', sideOffset = 4, ...props }) {
+    const context = useSelectContext('SelectContent');
+    React.useEffect(() => {
+        if (!context.open) {
+            const content = context.contentRef.current;
+            if (content) {
+                content.style.maxWidth = '';
+            }
+            return;
+        }
+        const frame = requestAnimationFrame(() => {
+            const content = context.contentRef.current;
+            const triggerHasInput = context.triggerRef.current?.querySelector('input') != null;
+            if (!triggerHasInput && !content?.querySelector('input')) {
+                focusItemByValue(context.viewportRef.current, 'select-item', context.value);
+            }
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [context.open, context.value, context.contentRef, context.viewportRef, context.triggerRef]);
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented) {
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            context.setOpen(false);
+            context.triggerRef.current?.focus();
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            moveItemFocus(context.viewportRef.current, 'select-item', 'next');
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            moveItemFocus(context.viewportRef.current, 'select-item', 'prev');
+            return;
+        }
+        if (event.key === 'Home') {
+            event.preventDefault();
+            moveItemFocus(context.viewportRef.current, 'select-item', 'first');
+            return;
+        }
+        if (event.key === 'End') {
+            event.preventDefault();
+            moveItemFocus(context.viewportRef.current, 'select-item', 'last');
+        }
+    };
+    return (jsx(Surface, { "data-slot": 'select-content', open: context.open, displayOpen: context.displayOpen, isClosing: context.isClosing, triggerRef: context.triggerRef, contentRef: context.contentRef, align: align, side: side, sideOffset: sideOffset, collisionPadding: collisionPadding, position: position, className: cn(s.content, className), onKeyDown: handleKeyDown, ...props, children: jsx("div", { ref: context.viewportRef, className: cn(s.viewport, position === 'popper' && s['viewport-popper']), id: context.contentId, role: 'listbox', children: children }) }));
+}
+function SelectItem({ className, children, disabled = false, onClick, onMouseMove, value, ...props }) {
+    const context = useSelectContext('SelectItem');
+    const selected = context.value === value;
+    const handleClick = (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented || disabled) {
+            return;
+        }
+        context.setValue(value);
+    };
+    const handleMouseMove = (event) => {
+        onMouseMove?.(event);
+        if (disabled) {
+            return;
+        }
+        event.currentTarget.focus();
+    };
+    return (jsxs("button", { "data-slot": 'select-item', "data-value": value, "data-disabled": disabled ? 'true' : undefined, type: 'button', role: 'option', "aria-selected": selected, disabled: disabled, tabIndex: -1, className: cn(s.item, className), onClick: handleClick, onMouseMove: handleMouseMove, ...props, children: [jsx("span", { className: s['item-indicator'], children: selected ? jsx(CheckIcon, {}) : null }), jsx("span", { children: children })] }));
+}
+function SelectSeparator({ className, ...props }) {
+    return jsx("div", { "data-slot": 'select-separator', className: cn(s.separator, className), ...props });
+}
+function SelectInputTrigger({ className, id, onBlur, onFocus, placeholder, searchQuery, setSearchQuery, ...props }) {
+    const context = useSelectContext('SelectInputTrigger');
+    const inputRef = React.useRef(null);
+    const setWrapperRef = React.useCallback((el) => {
+        context.triggerRef.current = el;
+    }, [context.triggerRef]);
+    const displayValue = context.open ? searchQuery : (context.selectedLabel ?? '');
+    React.useEffect(() => {
+        if (context.open) {
+            requestAnimationFrame(() => {
+                inputRef.current?.focus();
+            });
+        }
+    }, [context.open]);
+    const handleClick = () => {
+        if (!context.disabled) {
+            context.setOpen(true);
+        }
+    };
+    const handleChange = (event) => {
+        if (!context.open) {
+            const nativeEvent = event.nativeEvent;
+            setSearchQuery(nativeEvent.data ?? '');
+            context.setOpen(true);
+        }
+        else {
+            setSearchQuery(event.target.value);
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (context.disabled) {
+            return;
+        }
+        if ((event.key === 'Backspace' || event.key === 'Delete') && !context.open) {
+            event.preventDefault();
+            return;
+        }
+        if (event.key === ' ' && !context.open) {
+            event.preventDefault();
+            context.setOpen(true);
+            return;
+        }
+        if (event.key === 'Escape' && context.open) {
+            event.preventDefault();
+            context.setOpen(false);
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            if (!context.open) {
+                context.setOpen(true);
+            }
+            requestAnimationFrame(() => {
+                moveItemFocus(context.viewportRef.current, 'select-item', 'next');
+            });
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            if (!context.open) {
+                context.setOpen(true);
+            }
+            requestAnimationFrame(() => {
+                moveItemFocus(context.viewportRef.current, 'select-item', 'prev');
+            });
+            return;
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            if (!context.open) {
+                context.setOpen(true);
+            }
+            else if (searchQuery) {
+                const firstItem = context.viewportRef.current?.querySelector('[data-slot="select-item"]:not([data-disabled="true"])');
+                firstItem?.click();
+            }
+            return;
+        }
+        if (!context.open && event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+            context.setOpen(true);
+        }
+    };
+    return (jsxs("div", { ref: setWrapperRef, tabIndex: -1, className: cn(s.trigger, s['input-trigger'], className), onClick: handleClick, onFocus: event => {
+            if (event.target === event.currentTarget) {
+                inputRef.current?.focus();
+            }
+        }, children: [jsx("input", { ref: inputRef, id: id, type: 'text', value: displayValue, placeholder: placeholder, onChange: handleChange, onKeyDown: handleKeyDown, onFocus: onFocus, onBlur: onBlur, disabled: context.disabled, "aria-controls": context.contentId, "aria-expanded": context.open, "aria-haspopup": 'listbox', className: s['search-trigger-input'], autoComplete: 'off', ...props }), jsx(ChevronDownIcon, { className: cn(s['trigger-icon']) })] }));
+}
+function MultiSelectField({ contentProps, defaultOpen, defaultValue, disabled = false, error, fieldClassName, filteredItems, getItemText, helperText, isFocused, isRequired, label, labelRef, minWidth, name, onOpenChange, onValueChange, open: openProp, placeholder, resolvedSize, searchable, selectableItems, searchQuery, setIsFocused, setSearchQuery, triggerId, value, }) {
+    const triggerRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const viewportRef = React.useRef(null);
+    const closeTimerRef = React.useRef(null);
+    const isOpenControlled = openProp !== undefined;
+    const isValueControlled = value !== undefined;
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? []);
+    const [isClosing, setIsClosing] = React.useState(false);
+    const currentOpen = isOpenControlled ? openProp : uncontrolledOpen;
+    const currentValue = isValueControlled ? value : uncontrolledValue;
+    const displayOpen = currentOpen || isClosing;
+    const selectedLabels = selectableItems
+        .filter(child => currentValue.includes(String(child.props.value)))
+        .map(getItemText)
+        .filter(Boolean);
+    const hasValue = currentValue.length > 0;
+    const clearCloseTimer = React.useCallback(() => {
+        if (closeTimerRef.current) {
+            clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = null;
+        }
+    }, []);
+    const setOpen = React.useCallback((nextOpen) => {
+        if (nextOpen) {
+            clearCloseTimer();
+            setIsClosing(false);
+            if (!isOpenControlled) {
+                setUncontrolledOpen(true);
+            }
+            onOpenChange?.(true);
+            return;
+        }
+        onOpenChange?.(false);
+        if (!isOpenControlled) {
+            setUncontrolledOpen(false);
+        }
+        setIsClosing(true);
+        clearCloseTimer();
+        closeTimerRef.current = setTimeout(() => {
+            setIsClosing(false);
+        }, SELECT_ANIMATION_DURATION);
+    }, [clearCloseTimer, isOpenControlled, onOpenChange]);
+    const setValues = React.useCallback((nextValue) => {
+        if (!isValueControlled) {
+            setUncontrolledValue(nextValue);
+        }
+        onValueChange?.(nextValue);
+    }, [isValueControlled, onValueChange]);
+    useDismissibleLayer({
+        contentRef,
+        onDismiss: () => setOpen(false),
+        open: currentOpen,
+        triggerRef: triggerRef,
+    });
+    React.useEffect(() => {
+        if (!displayOpen) {
+            setSearchQuery('');
+        }
+    }, [displayOpen, setSearchQuery]);
+    React.useEffect(() => {
+        return () => clearCloseTimer();
+    }, [clearCloseTimer]);
+    React.useEffect(() => {
+        if (!currentOpen) {
+            const content = contentRef.current;
+            if (content) {
+                content.style.maxWidth = '';
+            }
+            return;
+        }
+        const frame = requestAnimationFrame(() => {
+            const content = contentRef.current;
+            const triggerHasInput = triggerRef.current?.querySelector('input') != null;
+            if (!triggerHasInput && !content?.querySelector('input')) {
+                focusItemByValue(viewportRef.current, 'select-multi-item', currentValue[0]);
+            }
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [currentOpen, currentValue]);
+    React.useEffect(() => {
+        if (searchable && currentOpen) {
+            requestAnimationFrame(() => {
+                const input = triggerRef.current?.querySelector('input');
+                input?.focus();
+            });
+        }
+    }, [currentOpen, searchable]);
+    const containerClasses = cn(inputStyles.container, inputStyles[resolvedSize], { [inputStyles.error]: error }, { [inputStyles.disabled]: disabled }, { [inputStyles.placeholder]: placeholder }, { [inputStyles['has-value']]: hasValue }, { [inputStyles['is-focused']]: isFocused || currentOpen || isClosing }, fieldClassName);
+    const handleKeyDown = (event) => {
+        if (searchable) {
+            const input = triggerRef.current?.querySelector('input');
+            if (document.activeElement !== input) {
+                if (event.key === 'Backspace') {
+                    event.preventDefault();
+                    setSearchQuery(prev => prev.slice(0, -1));
+                    input?.focus();
+                    return;
+                }
+                if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+                    event.preventDefault();
+                    setSearchQuery(prev => prev + event.key);
+                    input?.focus();
+                    return;
+                }
+            }
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            setOpen(false);
+            const input = triggerRef.current?.querySelector('input');
+            (input ?? triggerRef.current)?.focus();
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            moveItemFocus(viewportRef.current, 'select-multi-item', 'next');
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            moveItemFocus(viewportRef.current, 'select-multi-item', 'prev');
+            return;
+        }
+        if (event.key === 'Home') {
+            event.preventDefault();
+            moveItemFocus(viewportRef.current, 'select-multi-item', 'first');
+            return;
+        }
+        if (event.key === 'End') {
+            event.preventDefault();
+            moveItemFocus(viewportRef.current, 'select-multi-item', 'last');
+        }
+    };
+    return (jsxs(Fragment, { children: [jsxs("div", { "data-constellation-field": true, className: containerClasses, style: minWidth ? { minWidth: Math.max(minWidth, 140) } : undefined, children: [jsxs("div", { className: inputStyles['input-container'], children: [jsx("div", { className: inputStyles['label-container'], children: jsxs(Label, { htmlFor: triggerId, ref: labelRef, children: [label, isRequired && jsx("span", { className: inputStyles.required, children: "*" })] }) }), searchable ? (jsxs("div", { ref: triggerRef, tabIndex: -1, className: cn(s.trigger, s['input-trigger']), "data-placeholder": !hasValue ? 'true' : undefined, onClick: () => {
+                                    if (!currentOpen) {
+                                        setOpen(true);
+                                    }
+                                }, onFocus: event => {
+                                    if (event.target === event.currentTarget) {
+                                        triggerRef.current?.querySelector('input')?.focus();
+                                    }
+                                }, children: [jsx("input", { id: triggerId, type: 'text', value: currentOpen ? searchQuery : hasValue ? selectedLabels.join(', ') : '', placeholder: placeholder, "aria-expanded": currentOpen, "aria-haspopup": 'listbox', "aria-invalid": error ? 'true' : undefined, "aria-describedby": helperText ? `${triggerId}-helper` : undefined, disabled: disabled, className: s['search-trigger-input'], autoComplete: 'off', onChange: event => {
+                                            if (!currentOpen) {
+                                                const nativeEvent = event.nativeEvent;
+                                                setSearchQuery(nativeEvent.data ?? '');
+                                                setOpen(true);
+                                            }
+                                            else {
+                                                setSearchQuery(event.target.value);
+                                            }
+                                        }, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), onKeyDown: event => {
+                                            if ((event.key === 'Backspace' || event.key === 'Delete') && !currentOpen) {
+                                                event.preventDefault();
+                                                return;
+                                            }
+                                            if (event.key === ' ' && !currentOpen) {
+                                                event.preventDefault();
+                                                setOpen(true);
+                                                return;
+                                            }
+                                            if (event.key === 'Escape' && currentOpen) {
+                                                event.preventDefault();
+                                                setOpen(false);
+                                                return;
+                                            }
+                                            if (event.key === 'ArrowDown') {
+                                                event.preventDefault();
+                                                if (!currentOpen) {
+                                                    setOpen(true);
+                                                }
+                                                requestAnimationFrame(() => {
+                                                    moveItemFocus(viewportRef.current, 'select-multi-item', 'next');
+                                                });
+                                                return;
+                                            }
+                                            if (event.key === 'ArrowUp') {
+                                                event.preventDefault();
+                                                if (!currentOpen) {
+                                                    setOpen(true);
+                                                }
+                                                requestAnimationFrame(() => {
+                                                    moveItemFocus(viewportRef.current, 'select-multi-item', 'prev');
+                                                });
+                                                return;
+                                            }
+                                            if (event.key === 'Enter') {
+                                                event.preventDefault();
+                                                if (!currentOpen) {
+                                                    setOpen(true);
+                                                }
+                                                return;
+                                            }
+                                            if (!currentOpen && event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+                                                setOpen(true);
+                                            }
+                                        } }), jsx(ChevronDownIcon, { className: s['trigger-icon'] })] })) : (jsxs("button", { ref: triggerRef, id: triggerId, type: 'button', "aria-expanded": currentOpen, "aria-haspopup": 'listbox', "aria-invalid": error ? 'true' : undefined, "aria-describedby": helperText ? `${triggerId}-helper` : undefined, disabled: disabled, className: cn(s.trigger, s['input-trigger']), "data-placeholder": !hasValue ? 'true' : undefined, onClick: () => setOpen(!currentOpen), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), onKeyDown: event => {
+                                    if (event.key === 'Enter' ||
+                                        event.key === ' ' ||
+                                        event.key === 'ArrowDown' ||
+                                        event.key === 'ArrowUp') {
+                                        event.preventDefault();
+                                        setOpen(true);
+                                    }
+                                }, children: [jsx("span", { className: s['trigger-value'], children: hasValue ? selectedLabels.join(', ') : placeholder }), jsx(ChevronDownIcon, { className: s['trigger-icon'] })] }))] }), helperText ? (jsx(Typography, { id: `${triggerId}-helper`, variant: 'caption', className: inputStyles['helper-text'], children: helperText })) : null, name
+                        ? currentValue.map(itemValue => (jsx("input", { type: 'hidden', name: name, value: itemValue }, itemValue)))
+                        : null] }), jsx(Surface, { "data-slot": 'select-content', open: currentOpen, displayOpen: displayOpen, isClosing: isClosing, triggerRef: triggerRef, contentRef: contentRef, align: contentProps?.align, side: contentProps?.side, sideOffset: contentProps?.sideOffset, collisionPadding: contentProps?.collisionPadding ?? DEFAULT_COLLISION_PADDING, className: cn(s.content, s['multi-content'], contentProps?.className), onKeyDown: handleKeyDown, children: jsx("div", { ref: viewportRef, className: cn(s.viewport, s['multi-options']), role: 'listbox', children: filteredItems.map(child => {
+                        const itemValue = String(child.props.value);
+                        const checked = currentValue.includes(itemValue);
+                        return (jsxs("button", { "data-slot": 'select-multi-item', "data-value": itemValue, "data-disabled": child.props.disabled ? 'true' : undefined, type: 'button', role: 'option', "aria-selected": checked, disabled: child.props.disabled, tabIndex: -1, className: cn(s.item, s['multi-item']), onClick: () => setValues(checked
+                                ? currentValue.filter(currentItem => currentItem !== itemValue)
+                                : [...currentValue, itemValue]), onMouseMove: event => {
+                                if (!child.props.disabled) {
+                                    event.currentTarget.focus();
+                                }
+                            }, children: [jsx("span", { className: s['item-indicator'], children: checked ? jsx(CheckIcon, {}) : null }), jsx("span", { children: child.props.children })] }, itemValue));
+                    }) }) })] }));
+}
+function SelectField(props) {
+    const { label, helperText, error = false, placeholder, children, fieldClassName, contentProps, id, sizeVariant, searchThreshold = DEFAULT_SEARCH_THRESHOLD, } = props;
+    const generatedId = React.useId();
+    const triggerId = id ?? generatedId;
+    const { isBelow } = useBreakpoint();
+    const resolvedSize = sizeVariant ?? (isBelow(900) ? 'sm' : 'md');
+    const [isFocused, setIsFocused] = React.useState(false);
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [searchQuery, setSearchQuery] = React.useState('');
+    const [minWidth, setMinWidth] = React.useState(undefined);
+    const labelRef = React.useRef(null);
+    const childArray = React.useMemo(() => React.Children.toArray(children).filter((child) => React.isValidElement(child)), [children]);
+    const selectableItems = React.useMemo(() => childArray.filter(child => child.props.value !== undefined), [childArray]);
+    const searchable = selectableItems.length >= searchThreshold;
+    const getItemText = React.useCallback((child) => {
+        return readNodeText(child.props.children).trim();
+    }, []);
+    const matchesQuery = React.useCallback((child) => {
+        if (!searchQuery) {
+            return true;
+        }
+        return getItemText(child).toLowerCase().includes(searchQuery.toLowerCase());
+    }, [getItemText, searchQuery]);
+    const filteredItems = React.useMemo(() => {
+        if (!searchQuery) {
+            return selectableItems;
+        }
+        return selectableItems.filter(matchesQuery);
+    }, [matchesQuery, searchQuery, selectableItems]);
+    React.useLayoutEffect(() => {
+        if (!label) {
+            setMinWidth(undefined);
+            return;
+        }
+        const labelElement = labelRef.current;
+        if (!labelElement) {
+            return;
+        }
+        const updateMinWidth = () => {
+            const labelWidth = labelElement.getBoundingClientRect().width;
+            const iconWidth = 16;
+            const horizontalPadding = resolvedSize === 'sm' ? 20 : 24;
+            const computedWidth = Math.ceil(labelWidth + iconWidth + horizontalPadding);
+            setMinWidth(Math.max(computedWidth, 0));
+        };
+        updateMinWidth();
+        const resizeObserver = new ResizeObserver(updateMinWidth);
+        resizeObserver.observe(labelElement);
+        return () => resizeObserver.disconnect();
+    }, [label, resolvedSize]);
+    const ariaRequired = props['aria-required'];
+    const isRequired = Boolean(ariaRequired || props.required);
+    const baseSelectProps = {
+        open: props.open,
+        defaultOpen: props.defaultOpen,
+        onOpenChange: props.onOpenChange,
+        disabled: props.disabled,
+        required: props.required,
+        name: props.name,
+    };
+    if (props.multiple) {
+        return (jsx(MultiSelectField, { ...props, contentProps: contentProps, error: error, fieldClassName: fieldClassName, filteredItems: filteredItems, getItemText: getItemText, helperText: helperText, isFocused: isFocused, isRequired: isRequired, label: label, labelRef: labelRef, minWidth: minWidth, placeholder: placeholder, resolvedSize: resolvedSize, searchable: searchable, selectableItems: selectableItems, searchQuery: searchQuery, setIsFocused: setIsFocused, setSearchQuery: setSearchQuery, triggerId: triggerId }));
+    }
+    const { value, defaultValue, onValueChange } = props;
+    const handleContentKeyDown = searchable
+        ? (event) => {
+            const triggerInput = document.getElementById(triggerId);
+            if (triggerInput instanceof HTMLInputElement && document.activeElement !== triggerInput) {
+                if (event.key === 'Backspace') {
+                    event.preventDefault();
+                    setSearchQuery(prev => prev.slice(0, -1));
+                    triggerInput.focus();
+                    return;
+                }
+                if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+                    event.preventDefault();
+                    setSearchQuery(prev => prev + event.key);
+                    triggerInput.focus();
+                    return;
+                }
+            }
+        }
+        : undefined;
+    return (jsxs(Select, { ...baseSelectProps, onOpenChange: nextOpen => {
+            props.onOpenChange?.(nextOpen);
+            setIsOpen(nextOpen);
+            if (!nextOpen) {
+                setSearchQuery('');
+            }
+        }, value: value, defaultValue: defaultValue, onValueChange: onValueChange, children: [jsxs("div", { "data-constellation-field": true, className: cn(inputStyles.container, inputStyles[resolvedSize], { [inputStyles.error]: error }, { [inputStyles.disabled]: props.disabled }, { [inputStyles.placeholder]: placeholder }, { [inputStyles['has-value']]: Boolean(value ?? defaultValue) }, { [inputStyles['is-focused']]: isFocused || isOpen }, fieldClassName), style: minWidth ? { minWidth: Math.max(minWidth, 140) } : undefined, children: [jsxs("div", { className: inputStyles['input-container'], children: [jsx("div", { className: inputStyles['label-container'], children: jsxs(Label, { htmlFor: triggerId, ref: labelRef, children: [label, isRequired && jsx("span", { className: inputStyles.required, children: "*" })] }) }), searchable ? (jsx(SelectInputTrigger, { id: triggerId, "aria-invalid": error ? 'true' : undefined, "aria-describedby": helperText ? `${triggerId}-helper` : undefined, placeholder: placeholder, searchQuery: searchQuery, setSearchQuery: setSearchQuery, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false) })) : (jsx(SelectTrigger, { id: triggerId, "aria-invalid": error ? 'true' : undefined, "aria-describedby": helperText ? `${triggerId}-helper` : undefined, className: s['input-trigger'], onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), children: jsx(SelectValue, { placeholder: placeholder }) }))] }), helperText ? (jsx(Typography, { id: `${triggerId}-helper`, variant: 'caption', className: inputStyles['helper-text'], children: helperText })) : null] }), jsx(SelectContent, { ...contentProps, onKeyDown: handleContentKeyDown, children: searchQuery ? filteredItems : childArray })] }));
+}
+
+export { Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectSeparator, SelectTrigger, SelectValue };
+//# sourceMappingURL=select.js.map