entangle-ui 0.8.2 → 0.9.0

package/dist/esm/assets/src/components/navigation/Pagination/Pagination.css.ts.vanilla-CmlFyyjh.css

@@ -0,0 +1,103 @@
+.Pagination_paginationRootStyle__17bx4kb0 {
+  display: inline-flex;
+  align-items: center;
+}
+.Pagination_paginationListRecipe__17bx4kb1 {
+  display: inline-flex;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.Pagination_paginationListRecipe_size_sm__17bx4kb2 {
+  gap: var(--etui-spacing-xs);
+}
+.Pagination_paginationListRecipe_size_md__17bx4kb3 {
+  gap: var(--etui-spacing-xs);
+}
+.Pagination_paginationListRecipe_size_lg__17bx4kb4 {
+  gap: var(--etui-spacing-sm);
+}
+.Pagination_paginationItemStyle__17bx4kb5 {
+  display: inline-flex;
+}
+.Pagination_paginationButtonRecipe__17bx4kb6 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0 var(--etui-spacing-xs);
+  font-family: var(--etui-font-family-sans);
+  font-weight: var(--etui-font-weight-medium);
+  line-height: 1;
+  color: var(--etui-color-text-primary);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--etui-radius-md);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--etui-transition-fast), color var(--etui-transition-fast), border-color var(--etui-transition-fast);
+}
+.Pagination_paginationButtonRecipe__17bx4kb6:hover:not(:disabled) {
+  background: var(--etui-color-surface-hover);
+}
+.Pagination_paginationButtonRecipe__17bx4kb6:focus-visible {
+  outline: 2px solid var(--etui-color-border-focus);
+  outline-offset: 2px;
+}
+.Pagination_paginationButtonRecipe__17bx4kb6:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.Pagination_paginationButtonRecipe_size_sm__17bx4kb7 {
+  min-width: 24px;
+  height: 24px;
+  font-size: var(--etui-font-size-xs);
+}
+.Pagination_paginationButtonRecipe_size_md__17bx4kb8 {
+  min-width: 32px;
+  height: 32px;
+  font-size: var(--etui-font-size-sm);
+}
+.Pagination_paginationButtonRecipe_size_lg__17bx4kb9 {
+  min-width: 40px;
+  height: 40px;
+  font-size: var(--etui-font-size-md);
+}
+.Pagination_paginationButtonRecipe_selected_true__17bx4kba {
+  background: var(--etui-color-accent-primary);
+  color: white;
+  border-color: var(--etui-color-accent-primary);
+}
+.Pagination_paginationButtonRecipe_selected_true__17bx4kba:hover:not(:disabled) {
+  background: var(--etui-color-accent-secondary);
+  border-color: var(--etui-color-accent-secondary);
+}
+.Pagination_paginationEllipsisRecipe__17bx4kbb {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  color: var(--etui-color-text-secondary);
+  user-select: none;
+}
+.Pagination_paginationEllipsisRecipe_size_sm__17bx4kbc {
+  min-width: 24px;
+  height: 24px;
+  font-size: var(--etui-font-size-xs);
+}
+.Pagination_paginationEllipsisRecipe_size_md__17bx4kbd {
+  min-width: 32px;
+  height: 32px;
+  font-size: var(--etui-font-size-sm);
+}
+.Pagination_paginationEllipsisRecipe_size_lg__17bx4kbe {
+  min-width: 40px;
+  height: 40px;
+  font-size: var(--etui-font-size-md);
+}
+.Pagination_paginationIconStyle__17bx4kbf {
+  display: inline-flex;
+  width: 1em;
+  height: 1em;
+}

package/dist/esm/assets/src/components/primitives/HoverCard/HoverCard.css.ts.vanilla-BYT0qbLp.css

@@ -0,0 +1,41 @@
+.HoverCard_hoverCardContentRecipe__1aj59sj0 {
+  z-index: var(--etui-z-popover);
+  background: var(--etui-color-bg-elevated);
+  border: 1px solid var(--etui-color-border-default);
+  border-radius: var(--etui-radius-lg);
+  box-shadow: var(--etui-shadow-lg);
+  color: var(--etui-color-text-primary);
+  font-size: var(--etui-font-size-sm);
+  font-family: var(--etui-font-family-sans);
+  transition: opacity var(--etui-transition-fast), transform var(--etui-transition-fast);
+}
+.HoverCard_hoverCardContentRecipe__1aj59sj0:focus {
+  outline: none;
+}
+.HoverCard_hoverCardContentRecipe_padding_none__1aj59sj1 {
+  padding: 0;
+}
+.HoverCard_hoverCardContentRecipe_padding_sm__1aj59sj2 {
+  padding: var(--etui-spacing-sm);
+}
+.HoverCard_hoverCardContentRecipe_padding_md__1aj59sj3 {
+  padding: var(--etui-spacing-md);
+}
+.HoverCard_hoverCardContentRecipe_padding_lg__1aj59sj4 {
+  padding: var(--etui-spacing-lg);
+}
+.HoverCard_hoverCardContentRecipe_visible_true__1aj59sj5 {
+  opacity: 1;
+  transform: scale(1);
+  pointer-events: auto;
+}
+.HoverCard_hoverCardContentRecipe_visible_false__1aj59sj6 {
+  opacity: 0;
+  transform: scale(0.96);
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .HoverCard_hoverCardContentRecipe__1aj59sj0 {
+    transition: none;
+  }
+}

package/dist/esm/components/Icons/CloudUploadIcon.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Cloud upload icon — a cloud silhouette with an upward arrow inside.
+ *
+ * Use for file-upload drop zones, "send to cloud" actions, and any other
+ * upload-to-remote affordance. For a generic up-arrow without the cloud,
+ * use `UploadIcon` instead.
+ *
+ * @example
+ * ```tsx
+ * <CloudUploadIcon size="lg" color="muted" />
+ * ```
+ */
+const CloudUploadIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("path", { d: "M7 18a4 4 0 1 1 .5-7.97A6 6 0 0 1 18 11h.5a3.5 3.5 0 0 1 0 7H7z" }), jsx("path", { d: "M12 13v5m0-5l-2 2m2-2l2 2" })] }));
+});
+CloudUploadIcon.displayName = 'CloudUploadIcon';
+
+export { CloudUploadIcon };
+//# sourceMappingURL=CloudUploadIcon.js.map

package/dist/esm/components/Icons/CloudUploadIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloudUploadIcon.js","sources":["../../../../../src/components/Icons/CloudUploadIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;AAWG;AACI;AAGL;AAMF;AAEA;;"}

package/dist/esm/components/Icons/ExternalLinkIcon.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * External link icon — a box with an arrow exiting the top-right corner.
+ *
+ * Use for links that open in a new tab/window or otherwise navigate
+ * outside the current surface. For an in-app link (chain shape) use
+ * `LinkIcon` instead.
+ *
+ * @example
+ * ```tsx
+ * <Link href="https://example.com" target="_blank">
+ *   Docs <ExternalLinkIcon size="sm" decorative />
+ * </Link>
+ * ```
+ */
+const ExternalLinkIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("path", { d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" }), jsx("polyline", { points: "15 3 21 3 21 9" }), jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })] }));
+});
+ExternalLinkIcon.displayName = 'ExternalLinkIcon';
+
+export { ExternalLinkIcon };
+//# sourceMappingURL=ExternalLinkIcon.js.map

package/dist/esm/components/Icons/ExternalLinkIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalLinkIcon.js","sources":["../../../../../src/components/Icons/ExternalLinkIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;AAaG;AACI;AAGL;AAOF;AAEA;;"}

package/dist/esm/components/Icons/FirstIcon.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Skip to first icon — vertical bar plus a leftward chevron.
+ *
+ * Used by Pagination's "first page" button and similar
+ * jump-to-start controls.
+ *
+ * @example
+ * ```tsx
+ * <IconButton aria-label="First page"><FirstIcon /></IconButton>
+ * ```
+ */
+const FirstIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsx(Icon, { ...props, children: jsx("path", { d: "M6 5v14M18 5l-7 7 7 7" }) }));
+});
+FirstIcon.displayName = 'FirstIcon';
+
+export { FirstIcon };
+//# sourceMappingURL=FirstIcon.js.map

package/dist/esm/components/Icons/FirstIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FirstIcon.js","sources":["../../../../../src/components/Icons/FirstIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;AAUG;AACI;AAEH;AAKF;AAGF;;"}

package/dist/esm/components/Icons/LastIcon.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Skip to last icon — rightward chevron plus a vertical bar.
+ *
+ * Used by Pagination's "last page" button and similar
+ * jump-to-end controls.
+ *
+ * @example
+ * ```tsx
+ * <IconButton aria-label="Last page"><LastIcon /></IconButton>
+ * ```
+ */
+const LastIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsx(Icon, { ...props, children: jsx("path", { d: "M18 5v14M6 5l7 7-7 7" }) }));
+});
+LastIcon.displayName = 'LastIcon';
+
+export { LastIcon };
+//# sourceMappingURL=LastIcon.js.map

package/dist/esm/components/Icons/LastIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LastIcon.js","sources":["../../../../../src/components/Icons/LastIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;AAUG;AACI;AAEH;AAKF;AAGF;;"}

package/dist/esm/components/Icons/UnlinkIcon.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Unlink icon — a broken chain.
+ *
+ * Indicates that two values are decoupled (no longer linked). Pair with
+ * `LinkIcon` to render a toggle: link → unlink. Common in coordinate
+ * inputs, transform locks, color-channel groups.
+ *
+ * @example
+ * ```tsx
+ * <IconButton aria-label="Unlink axes">
+ *   <UnlinkIcon />
+ * </IconButton>
+ * ```
+ */
+const UnlinkIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("path", { d: "M9 17H7A5 5 0 0 1 7 7h2" }), jsx("path", { d: "M15 7h2a5 5 0 0 1 0 10h-2" }), jsx("line", { x1: "3", y1: "3", x2: "21", y2: "21" })] }));
+});
+UnlinkIcon.displayName = 'UnlinkIcon';
+
+export { UnlinkIcon };
+//# sourceMappingURL=UnlinkIcon.js.map

package/dist/esm/components/Icons/UnlinkIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnlinkIcon.js","sources":["../../../../../src/components/Icons/UnlinkIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;AAaG;AACI;AAEH;AAOF;AAGF;;"}

package/dist/esm/components/controls/Combobox/Combobox.css.js

@@ -0,0 +1,20 @@
+import './../../../assets/src/components/controls/Combobox/Combobox.css.ts.vanilla-B7B5ttkq.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var checkmarkStyle = 'Combobox_checkmarkStyle__1pazsaxx';
+var chevronButtonStyle = 'Combobox_chevronButtonStyle__1pazsaxg';
+var chevronIconRecipe = createRuntimeFn({defaultClassName:'Combobox_chevronIconRecipe__1pazsaxh',variantClassNames:{open:{true:'Combobox_chevronIconRecipe_open_true__1pazsaxi',false:'Combobox_chevronIconRecipe_open_false__1pazsaxj'}},defaultVariants:{open:false},compoundVariants:[]});
+var clearButtonStyle = 'Combobox_clearButtonStyle__1pazsaxf';
+var containerStyle = 'Combobox_containerStyle__1pazsax0';
+var createRowStyle = 'Combobox_createRowStyle__1pazsaxy';
+var dropdownStyle = 'Combobox_dropdownStyle__1pazsaxl';
+var emptyMessageStyle = 'Combobox_emptyMessageStyle__1pazsaxw';
+var inputStyle = 'Combobox_inputStyle__1pazsaxe';
+var inputWrapperRecipe = createRuntimeFn({defaultClassName:'Combobox_inputWrapperRecipe__1pazsax1',variantClassNames:{size:{sm:'Combobox_inputWrapperRecipe_size_sm__1pazsax2',md:'Combobox_inputWrapperRecipe_size_md__1pazsax3',lg:'Combobox_inputWrapperRecipe_size_lg__1pazsax4'},variant:{'default':'Combobox_inputWrapperRecipe_variant_default__1pazsax5',ghost:'Combobox_inputWrapperRecipe_variant_ghost__1pazsax6',filled:'Combobox_inputWrapperRecipe_variant_filled__1pazsax7'},focused:{true:'Combobox_inputWrapperRecipe_focused_true__1pazsax8',false:'Combobox_inputWrapperRecipe_focused_false__1pazsax9'},error:{true:'Combobox_inputWrapperRecipe_error_true__1pazsaxa',false:'Combobox_inputWrapperRecipe_error_false__1pazsaxb'},disabled:{true:'Combobox_inputWrapperRecipe_disabled_true__1pazsaxc',false:'Combobox_inputWrapperRecipe_disabled_false__1pazsaxd'}},defaultVariants:{size:'md',variant:'default',focused:false,error:false,disabled:false},compoundVariants:[]});
+var optionDescriptionStyle = 'Combobox_optionDescriptionStyle__1pazsaxv';
+var optionItemRecipe = createRuntimeFn({defaultClassName:'Combobox_optionItemRecipe__1pazsaxn',variantClassNames:{active:{true:'Combobox_optionItemRecipe_active_true__1pazsaxo',false:'Combobox_optionItemRecipe_active_false__1pazsaxp'},selected:{true:'Combobox_optionItemRecipe_selected_true__1pazsaxq',false:'Combobox_optionItemRecipe_selected_false__1pazsaxr'},disabled:{true:'Combobox_optionItemRecipe_disabled_true__1pazsaxs',false:'Combobox_optionItemRecipe_disabled_false__1pazsaxt'}},defaultVariants:{active:false,selected:false,disabled:false},compoundVariants:[]});
+var optionLabelStyle = 'Combobox_optionLabelStyle__1pazsaxu';
+var optionsListStyle = 'Combobox_optionsListStyle__1pazsaxm';
+
+export { checkmarkStyle, chevronButtonStyle, chevronIconRecipe, clearButtonStyle, containerStyle, createRowStyle, dropdownStyle, emptyMessageStyle, inputStyle, inputWrapperRecipe, optionDescriptionStyle, optionItemRecipe, optionLabelStyle, optionsListStyle };
+//# sourceMappingURL=Combobox.css.js.map

package/dist/esm/components/controls/Combobox/Combobox.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/controls/Combobox/Combobox.js

@@ -0,0 +1,354 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useId, useRef, useCallback, useState, useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { CheckIcon } from '../../Icons/CheckIcon.js';
+import { ChevronDownIcon } from '../../Icons/ChevronDownIcon.js';
+import { CloseIcon } from '../../Icons/CloseIcon.js';
+import { fuzzyScore } from '../../feedback/CommandPalette/fuzzySearch.js';
+import { FormHelperText } from '../../form/FormHelperText.js';
+import { FormLabel } from '../../form/FormLabel.js';
+import { ScrollArea } from '../../layout/ScrollArea/ScrollArea.js';
+import { Spinner } from '../../feedback/Spinner/Spinner.js';
+import { useControlledState } from '../../../hooks/useControlledState/useControlledState.js';
+import { useListboxNav } from '../../../hooks/useListboxNav/useListboxNav.js';
+import { useMergedRef } from '../../../hooks/useMergedRef/useMergedRef.js';
+import { cx } from '../../../utils/cx.js';
+import { inputStyle, clearButtonStyle, chevronButtonStyle, chevronIconRecipe, inputWrapperRecipe, dropdownStyle, optionsListStyle, containerStyle, emptyMessageStyle, optionLabelStyle, optionDescriptionStyle, checkmarkStyle, createRowStyle, optionItemRecipe } from './Combobox.css.js';
+
+const CHEVRON_SIZES = {
+    sm: 10,
+    md: 12,
+    lg: 14,
+};
+const CREATE_ROW_VALUE = '__combobox_create__';
+function defaultFilter(option, query) {
+    const haystack = `${option.label ?? option.value} ${option.description ?? ''}`;
+    return fuzzyScore(query, haystack);
+}
+function applyFilter(options, query, custom) {
+    if (!query)
+        return options;
+    const scored = [];
+    for (const option of options) {
+        let score;
+        if (custom) {
+            const result = custom(option, query);
+            if (typeof result === 'boolean') {
+                score = result ? 1 : 0;
+            }
+            else {
+                score = result;
+            }
+        }
+        else {
+            score = defaultFilter(option, query);
+        }
+        if (score > 0)
+            scored.push({ option, score });
+    }
+    scored.sort((a, b) => b.score - a.score);
+    return scored.map(entry => entry.option);
+}
+/**
+ * Single-value select with an editable input. Filters the option list as the
+ * user types (built-in fuzzy matcher, configurable via `filterFn`), supports
+ * controlled and uncontrolled modes, optional `freeSolo` typing, optional
+ * `creatable` mode for adding new entries, and an `loading` state for async
+ * data sources.
+ *
+ * @example
+ * ```tsx
+ * <Combobox
+ *   label="Framework"
+ *   options={[
+ *     { value: 'react', label: 'React' },
+ *     { value: 'vue', label: 'Vue' },
+ *   ]}
+ *   value={framework}
+ *   onChange={setFramework}
+ * />
+ * ```
+ */
+function Combobox({ value, defaultValue, options, placeholder, filterFn, emptyMessage = 'No results found', loading = false, loadingMessage = 'Loading...', freeSolo = false, creatable = false, createLabel, openOnFocus = false, size = 'md', variant = 'default', label, helperText, error = false, errorMessage, disabled = false, required = false, readOnly = false, clearable = false, maxDropdownHeight = 240, minDropdownWidth, name, onChange, onInputChange, onCreate, onOpenChange, className, style, testId, ref, id: idProp, ...rest }) {
+    const autoId = useId();
+    const fieldId = idProp ?? autoId;
+    const labelId = `${fieldId}-label`;
+    const helperId = `${fieldId}-helper`;
+    const listboxId = `${fieldId}-listbox`;
+    const inputRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const setInputRef = useMergedRef(inputRef, ref);
+    const [selected, setSelected] = useControlledState({
+        value,
+        defaultValue,
+        onChange,
+        fallback: null,
+    });
+    const labelOf = useCallback((val) => {
+        if (val === null)
+            return '';
+        const found = options.find(o => o.value === val);
+        return found?.label ?? String(val);
+    }, [options]);
+    const [query, setQuery] = useState(() => labelOf(selected));
+    const [isOpen, setIsOpen] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [dropdownPos, setDropdownPos] = useState({});
+    const isEditingRef = useRef(false);
+    // Sync the query with the selected label when it changes externally and the
+    // user is not actively typing.
+    useEffect(() => {
+        if (!isEditingRef.current) {
+            setQuery(labelOf(selected));
+        }
+    }, [labelOf, selected]);
+    const effectiveCreatable = creatable;
+    const effectiveFreeSolo = freeSolo || creatable;
+    const filteredOptions = useMemo(() => applyFilter(options, 
+    // When the user hasn't typed yet (query equals the selected label) we
+    // show the full list so the dropdown serves as a browseable menu.
+    isEditingRef.current ? query : '', filterFn), [filterFn, options, query]);
+    const hasExactMatch = useMemo(() => {
+        if (!query)
+            return false;
+        const q = query.toLowerCase();
+        return options.some(o => (o.label ?? o.value).toLowerCase() === q);
+    }, [options, query]);
+    const showCreateRow = effectiveCreatable && query.length > 0 && !hasExactMatch && !loading;
+    // The list passed to useListboxNav. The "create" row is appended at the
+    // end as a synthetic option so the same navigation works.
+    const navItems = useMemo(() => {
+        const list = [...filteredOptions];
+        if (showCreateRow) {
+            list.push({
+                value: CREATE_ROW_VALUE,
+                label: query,
+            });
+        }
+        return list;
+    }, [filteredOptions, query, showCreateRow]);
+    const open = useCallback(() => {
+        if (disabled || readOnly)
+            return;
+        if (isOpen)
+            return;
+        setIsOpen(true);
+        onOpenChange?.(true);
+    }, [disabled, readOnly, isOpen, onOpenChange]);
+    const close = useCallback(() => {
+        if (!isOpen)
+            return;
+        setIsOpen(false);
+        onOpenChange?.(false);
+    }, [isOpen, onOpenChange]);
+    const commitOption = useCallback((opt) => {
+        if (opt.disabled)
+            return;
+        if (opt.value === CREATE_ROW_VALUE) {
+            const created = query;
+            if (onCreate)
+                onCreate(created);
+            else
+                setSelected(created);
+        }
+        else {
+            setSelected(opt.value);
+        }
+        isEditingRef.current = false;
+        setQuery(opt.value === CREATE_ROW_VALUE
+            ? query
+            : (opt.label ?? String(opt.value)));
+        close();
+    }, [close, onCreate, query, setSelected]);
+    const listbox = useListboxNav({
+        items: navItems,
+        isItemDisabled: opt => Boolean(opt.disabled),
+        onSelect: commitOption,
+        onEscape: close,
+    });
+    const updateDropdownPosition = useCallback(() => {
+        const wrapper = wrapperRef.current;
+        if (!wrapper)
+            return;
+        const rect = wrapper.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const openAbove = spaceBelow < maxDropdownHeight + 8 && rect.top > spaceBelow;
+        const dropdownW = minDropdownWidth !== undefined
+            ? Math.max(rect.width, minDropdownWidth)
+            : rect.width;
+        setDropdownPos({
+            left: rect.left,
+            width: dropdownW,
+            ...(openAbove
+                ? {
+                    bottom: window.innerHeight - rect.top + 4,
+                    transformOrigin: 'bottom',
+                }
+                : { top: rect.bottom + 4, transformOrigin: 'top' }),
+        });
+    }, [maxDropdownHeight, minDropdownWidth]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        updateDropdownPosition();
+    }, [isOpen, updateDropdownPosition]);
+    // Outside click
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClick = (e) => {
+            const target = e.target;
+            if (!wrapperRef.current?.contains(target) &&
+                !dropdownRef.current?.contains(target)) {
+                close();
+            }
+        };
+        document.addEventListener('mousedown', handleClick);
+        return () => {
+            document.removeEventListener('mousedown', handleClick);
+        };
+    }, [close, isOpen]);
+    const handleInputChange = useCallback((event) => {
+        const next = event.target.value;
+        isEditingRef.current = true;
+        setQuery(next);
+        onInputChange?.(next);
+        if (!isOpen)
+            open();
+        // Clearing the input clears the selection.
+        if (next === '' && selected !== null) {
+            setSelected(null);
+        }
+    }, [isOpen, onInputChange, open, selected, setSelected]);
+    const handleInputKeyDown = useCallback((event) => {
+        if (disabled || readOnly)
+            return;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            if (!isOpen) {
+                event.preventDefault();
+                open();
+                return;
+            }
+        }
+        if (event.key === 'Enter') {
+            // freeSolo / creatable take precedence when no suggestion is active.
+            if (effectiveFreeSolo && listbox.activeIndex < 0 && query.length > 0) {
+                event.preventDefault();
+                if (effectiveCreatable && !hasExactMatch) {
+                    if (onCreate)
+                        onCreate(query);
+                    else
+                        setSelected(query);
+                }
+                else {
+                    setSelected(query);
+                }
+                isEditingRef.current = false;
+                close();
+                return;
+            }
+        }
+        if (event.key === 'Tab' && isOpen) {
+            // Commit the active suggestion if any, otherwise close.
+            if (listbox.activeIndex >= 0) {
+                listbox.selectActive();
+            }
+            else {
+                close();
+            }
+            return;
+        }
+        listbox.handleKeyDown(event);
+    }, [
+        close,
+        disabled,
+        effectiveCreatable,
+        effectiveFreeSolo,
+        hasExactMatch,
+        isOpen,
+        listbox,
+        onCreate,
+        open,
+        query,
+        readOnly,
+        setSelected,
+    ]);
+    const handleFocus = useCallback(() => {
+        setFocused(true);
+        if (openOnFocus)
+            open();
+    }, [open, openOnFocus]);
+    const handleBlur = useCallback(() => {
+        setFocused(false);
+        isEditingRef.current = false;
+        // Restore the last selected label unless freeSolo allowed the typed value.
+        if (!effectiveFreeSolo) {
+            setQuery(labelOf(selected));
+        }
+    }, [effectiveFreeSolo, labelOf, selected]);
+    const handleClear = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setSelected(null);
+        setQuery('');
+        isEditingRef.current = false;
+        inputRef.current?.focus();
+    }, [setSelected]);
+    const handleToggleClick = useCallback(() => {
+        if (disabled || readOnly)
+            return;
+        if (isOpen)
+            close();
+        else
+            open();
+        inputRef.current?.focus();
+    }, [close, disabled, isOpen, open, readOnly]);
+    const showHelperText = error && errorMessage ? errorMessage : helperText;
+    const chevronSize = CHEVRON_SIZES[size];
+    const renderOptions = () => {
+        if (loading) {
+            return (jsxs("div", { className: emptyMessageStyle, children: [jsx(Spinner, { size: "xs" }), " ", loadingMessage] }));
+        }
+        if (navItems.length === 0) {
+            return jsx("div", { className: emptyMessageStyle, children: emptyMessage });
+        }
+        return navItems.map((opt, idx) => {
+            const isCreate = opt.value === CREATE_ROW_VALUE;
+            const isSelected = !isCreate && opt.value === selected;
+            const isActive = idx === listbox.activeIndex;
+            const isDisabled = opt.disabled ?? false;
+            return (jsxs("div", { role: "option", "aria-selected": isSelected, "aria-disabled": isDisabled || undefined, id: `${listboxId}-${String(idx)}`, className: cx(optionItemRecipe({
+                    active: isActive,
+                    selected: isSelected,
+                    disabled: isDisabled,
+                }), isCreate && createRowStyle), onClick: () => {
+                    commitOption(opt);
+                }, onMouseEnter: () => {
+                    if (!isDisabled)
+                        listbox.setActiveIndex(idx);
+                }, children: [opt.icon && jsx("span", { children: opt.icon }), jsx("span", { className: optionLabelStyle, children: isCreate
+                            ? (createLabel?.(query) ?? jsxs(Fragment, { children: ["Create \"", query, "\""] }))
+                            : (opt.label ?? opt.value) }), opt.description && !isCreate && (jsx("span", { className: optionDescriptionStyle, children: opt.description })), isSelected && (jsx("span", { className: checkmarkStyle, children: jsx(CheckIcon, { size: 10, decorative: true }) }))] }, isCreate ? `create-${query}` : `${opt.value}-${String(idx)}`));
+        });
+    };
+    const formValue = selected ?? '';
+    const displayValue = focused || isOpen ? query : labelOf(selected);
+    return (jsxs("div", { className: cx(containerStyle, className), style: style, children: [label && (jsx(FormLabel, { id: labelId, htmlFor: fieldId, required: required, disabled: disabled, children: label })), jsxs("div", { ref: wrapperRef, className: inputWrapperRecipe({
+                    size,
+                    variant,
+                    focused,
+                    error,
+                    disabled,
+                }), children: [jsx("input", { ref: setInputRef, id: fieldId, type: "text", role: "combobox", "aria-expanded": isOpen, "aria-controls": isOpen ? listboxId : undefined, "aria-autocomplete": "list", "aria-activedescendant": isOpen && listbox.activeIndex >= 0
+                            ? `${listboxId}-${String(listbox.activeIndex)}`
+                            : undefined, "aria-labelledby": label ? labelId : undefined, "aria-required": required || undefined, "aria-invalid": error || undefined, "aria-describedby": showHelperText ? helperId : undefined, autoComplete: "off", spellCheck: false, disabled: disabled, readOnly: readOnly, required: required, placeholder: placeholder, value: displayValue, className: inputStyle, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onFocus: handleFocus, onBlur: handleBlur, "data-testid": testId, ...rest }), clearable && selected !== null && !disabled && !readOnly && (jsx("button", { type: "button", tabIndex: -1, "aria-label": "Clear selection", className: clearButtonStyle, onMouseDown: handleClear, children: jsx(CloseIcon, { size: "sm", decorative: true }) })), jsx("button", { type: "button", tabIndex: -1, "aria-label": isOpen ? 'Close suggestions' : 'Open suggestions', className: chevronButtonStyle, onMouseDown: e => {
+                            e.preventDefault();
+                        }, onClick: handleToggleClick, disabled: disabled, children: jsx("span", { className: chevronIconRecipe({ open: isOpen }), children: jsx(ChevronDownIcon, { size: chevronSize, decorative: true }) }) })] }), name && jsx("input", { type: "hidden", name: name, value: formValue }), isOpen &&
+                createPortal(jsx("div", { ref: dropdownRef, role: "listbox", id: listboxId, "aria-labelledby": label ? labelId : undefined, className: dropdownStyle, style: dropdownPos, tabIndex: -1, children: jsx(ScrollArea, { className: optionsListStyle, maxHeight: maxDropdownHeight, scrollbarWidth: 4, scrollbarVisibility: "auto", hideDelay: 600, children: renderOptions() }) }), document.body), showHelperText && (jsx(FormHelperText, { id: helperId, error: error, children: showHelperText }))] }));
+}
+Combobox.displayName = 'Combobox';
+
+export { Combobox };
+//# sourceMappingURL=Combobox.js.map