@revikornmann/muka-ui 0.18.0 → 0.19.0

package/dist/cjs/components/Combobox/Combobox.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Combobox = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Sheet_1 = require("../Sheet");
-const SearchInput_1 = require("../SearchInput");
-const ListItem_1 = require("../ListItem");
-const Icon_1 = require("../Icon");
-const EmptyState_1 = require("../EmptyState");
+const Chip_1 = require("../Chip");
+const Menu_1 = require("../Menu");
 require("./Combobox.css");
 const defaultFilter = (option, query) => {
     if (!query)
@@ -16,71 +13,197 @@ const defaultFilter = (option, query) => {
     const hay = `${option.label} ${option.caption ?? ''}`.toLowerCase();
     return hay.includes(query);
 };
+const firstEnabledIndex = (items) => {
+    const index = items.findIndex((item) => !item.disabled);
+    return index === -1 ? 0 : index;
+};
+const nextEnabledIndex = (items, from, direction) => {
+    if (items.length === 0)
+        return 0;
+    let index = from;
+    for (let step = 0; step < items.length; step += 1) {
+        index = (index + direction + items.length) % items.length;
+        if (!items[index]?.disabled)
+            return index;
+    }
+    return from;
+};
 /**
- * Combobox — searchable select that opens as a bottom Sheet picker.
- *
- * Mobile-first: tap the trigger to open a full sheet with a search input and a
- * scrollable list of options. Works on desktop too — the sheet renders centered
- * by the underlying Vaul drawer's responsive behavior.
+ * Combobox — free-input multi-value field with chips and a suggestion Menu.
  *
- * For long lists, pass a custom `filter` to do fuzzy or async matching.
+ * Matches Figma "Input Combobox": type in the field, pick a suggestion (or
+ * press Enter to create), and selected values render as dismissible chips.
+ * Uses `Menu` for the suggestion list (not a Sheet).
  *
- * @accessibility
- * - Trigger is a native `<button>` with `aria-haspopup="listbox"`/`aria-expanded`
- * - The `clearable` control is a sibling `<button>`, not nested in the trigger:
- *   it is in the tab order, operable with Enter/Space, and its label stays out
- *   of the trigger's accessible name
- * - Clearing returns focus to the trigger, since the clear button unmounts
+ * For fixed-option single/multi select with a chevron, use `DropdownSelect`.
+ * For a native platform select, use `Select`.
  */
-const Combobox = ({ value, onChange, options, placeholder = 'Select…', title, searchable = true, searchPlaceholder = 'Search', emptyText = 'No results', clearable = false, disabled = false, size = 'md', filter = defaultFilter, 'aria-label': ariaLabel, name, id, className = '', }) => {
+const Combobox = ({ value, onChange, options = [], placeholder = 'Hint text', label, helperText, error = false, errorMessage, disabled = false, size = 'md', fullWidth = false, creatable = true, filter = defaultFilter, 'aria-label': ariaLabel, name, id, className = '', }) => {
     const generatedId = (0, react_1.useId)();
-    const triggerId = id || name || generatedId;
-    const triggerRef = (0, react_1.useRef)(null);
-    const [open, setOpen] = (0, react_1.useState)(false);
+    const fieldId = id || name || generatedId;
+    const helperTextId = `${fieldId}-helper`;
+    const errorMessageId = `${fieldId}-error`;
+    const listboxId = `${fieldId}-listbox`;
+    const inputRef = (0, react_1.useRef)(null);
     const [query, setQuery] = (0, react_1.useState)('');
-    const selected = (0, react_1.useMemo)(() => options.find((o) => o.value === value) ?? null, [options, value]);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    const selectedSet = (0, react_1.useMemo)(() => new Set(value), [value]);
+    const labelForValue = (entry) => options.find((o) => o.value === entry)?.label ?? entry;
     const filtered = (0, react_1.useMemo)(() => {
         const q = query.trim().toLowerCase();
-        if (!q)
-            return options;
-        return options.filter((o) => filter(o, q));
-    }, [options, query, filter]);
+        return options.filter((option) => {
+            if (selectedSet.has(option.value))
+                return false;
+            return filter(option, q);
+        });
+    }, [options, query, filter, selectedSet]);
+    const trimmedQuery = query.trim();
+    const exactOption = options.find((o) => o.label.toLowerCase() === trimmedQuery.toLowerCase());
+    const canCreate = creatable &&
+        trimmedQuery.length > 0 &&
+        !exactOption &&
+        !selectedSet.has(trimmedQuery);
+    const suggestions = (0, react_1.useMemo)(() => {
+        const items = [];
+        // Match Figma Typing states: when filtered options exist, those are the
+        // list (first row highlighted). Only offer a free-text create row when
+        // nothing matches the query.
+        for (const option of filtered) {
+            items.push({
+                id: `${listboxId}-option-${option.value}`,
+                kind: 'option',
+                value: option.value,
+                label: option.label,
+                disabled: option.disabled,
+            });
+        }
+        if (canCreate && filtered.length === 0) {
+            items.push({
+                id: `${listboxId}-create`,
+                kind: 'create',
+                value: trimmedQuery,
+                label: trimmedQuery,
+            });
+        }
+        return items;
+    }, [canCreate, filtered, listboxId, trimmedQuery]);
+    const showSuggestions = open &&
+        !disabled &&
+        // Match Figma: suggestions appear while typing, not on empty focus —
+        // so the text caret stays in the field immediately on focus.
+        trimmedQuery.length > 0 &&
+        suggestions.length > 0;
+    const suggestionKey = suggestions.map((item) => item.id).join('\0');
+    (0, react_1.useEffect)(() => {
+        setActiveIndex(firstEnabledIndex(suggestions));
+    }, [suggestionKey, suggestions]);
+    const activeSuggestion = suggestions[activeIndex];
+    const showError = error && errorMessage;
+    const describedBy = showError ? errorMessageId : helperText ? helperTextId : undefined;
+    const commitValue = (next) => {
+        if (!next || selectedSet.has(next))
+            return;
+        onChange([...value, next]);
+        setQuery('');
+        setOpen(true);
+        inputRef.current?.focus();
+    };
+    const commitActiveSuggestion = () => {
+        if (!activeSuggestion || activeSuggestion.disabled)
+            return;
+        commitValue(activeSuggestion.value);
+    };
+    const removeValue = (entry) => {
+        onChange(value.filter((v) => v !== entry));
+        inputRef.current?.focus();
+    };
     const handleOpenChange = (next) => {
+        if (disabled)
+            return;
         setOpen(next);
-        if (!next)
-            setQuery('');
     };
-    const handleSelect = (option) => {
-        if (option.disabled)
-            return;
-        onChange(option.value);
-        handleOpenChange(false);
+    const handleInputChange = (event) => {
+        setQuery(event.target.value);
+        setOpen(true);
     };
-    const showClear = clearable && !!selected && !disabled;
-    const handleClear = () => {
-        onChange(null);
-        // The clear button unmounts as soon as the selection goes — without this,
-        // focus would fall back to <body> and the keyboard user would lose their
-        // place. Hand it to the trigger, the control the clear belongs to.
-        triggerRef.current?.focus();
+    const handleKeyDown = (event) => {
+        if (event.key === 'Backspace' && query.length === 0 && value.length > 0) {
+            event.preventDefault();
+            removeValue(value[value.length - 1]);
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            if (!showSuggestions)
+                return;
+            event.preventDefault();
+            setActiveIndex((current) => nextEnabledIndex(suggestions, current, 1));
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            if (!showSuggestions)
+                return;
+            event.preventDefault();
+            setActiveIndex((current) => nextEnabledIndex(suggestions, current, -1));
+            return;
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            commitActiveSuggestion();
+            return;
+        }
+        if (event.key === 'Escape') {
+            setOpen(false);
+            setQuery('');
+        }
     };
-    const triggerClasses = [
+    const rootClasses = [
         'muka-combobox',
-        `muka-combobox--${size}`,
-        !selected && 'muka-combobox--placeholder',
-        disabled && 'muka-combobox--disabled',
-        showClear && 'muka-combobox--clearable',
+        fullWidth && 'muka-combobox--full-width',
         className,
     ]
         .filter(Boolean)
         .join(' ');
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "muka-combobox__trigger-group", children: [(0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", id: triggerId, name: name, className: triggerClasses, onClick: () => !disabled && setOpen(true), disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": ariaLabel, children: [selected?.icon && ((0, jsx_runtime_1.jsx)("span", { className: "muka-combobox__leading", "aria-hidden": "true", children: selected.icon })), (0, jsx_runtime_1.jsx)("span", { className: "muka-combobox__label", children: selected ? selected.label : placeholder })] }), (0, jsx_runtime_1.jsxs)("span", { className: "muka-combobox__actions", children: [showClear && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "muka-combobox__clear", onClick: handleClear, "aria-label": "Clear selection", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "close", size: "xs" }) })), (0, jsx_runtime_1.jsx)("span", { className: "muka-combobox__chevron", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-down-s", size: "sm" }) })] })] }), (0, jsx_runtime_1.jsx)(Sheet_1.Sheet, { open: open, onOpenChange: handleOpenChange, title: title || ariaLabel || placeholder, children: (0, jsx_runtime_1.jsxs)("div", { className: "muka-combobox__picker", children: [title && (0, jsx_runtime_1.jsx)("h2", { className: "muka-combobox__title", children: title }), searchable && ((0, jsx_runtime_1.jsx)("div", { className: "muka-combobox__search", children: (0, jsx_runtime_1.jsx)(SearchInput_1.SearchInput, { value: query, onChange: setQuery, placeholder: searchPlaceholder, 
-                                // The picker is a modal Sheet the user deliberately opened, and
-                                // search is its primary action — focus belongs in the field on
-                                // open. This is focus management on a modal, not a page-load
-                                // focus steal.
-                                // eslint-disable-next-line jsx-a11y/no-autofocus
-                                autoFocus: true }) })), (0, jsx_runtime_1.jsx)("div", { className: "muka-combobox__list", role: "listbox", "aria-label": title || placeholder, children: filtered.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.EmptyState, { title: emptyText })) : (filtered.map((option) => ((0, jsx_runtime_1.jsx)(ListItem_1.ListItem, { label: option.label, caption: option.caption, leadingIcon: option.icon, selected: option.value === value, "aria-selected": option.value === value, disabled: option.disabled, onClick: () => handleSelect(option) }, option.value)))) })] }) })] }));
+    const fieldClasses = [
+        'muka-combobox__field',
+        `muka-combobox__field--${size}`,
+        (open || showSuggestions) && 'muka-combobox__field--focused',
+        error && 'muka-combobox__field--error',
+        disabled && 'muka-combobox__field--disabled',
+        value.length > 2 && 'muka-combobox__field--multiline',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: rootClasses, children: [label && ((0, jsx_runtime_1.jsx)("label", { className: `muka-combobox__label muka-combobox__label--${size}`, htmlFor: fieldId, children: label })), (0, jsx_runtime_1.jsxs)(Menu_1.Menu, { trigger: "click", open: showSuggestions, onOpenChange: handleOpenChange, modal: false, children: [(0, jsx_runtime_1.jsxs)("div", { className: fieldClasses, onPointerDown: (event) => {
+                            if (disabled)
+                                return;
+                            // Keep the text caret in the input on press. Prevent default only when
+                            // the press landed outside the input (e.g. padding / chips), otherwise
+                            // the browser's native caret placement is left alone.
+                            if (event.target !== inputRef.current) {
+                                event.preventDefault();
+                            }
+                            // Re-assert focus after this event turn in case Menu/Radix moves it.
+                            queueMicrotask(() => {
+                                inputRef.current?.focus();
+                            });
+                        }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "muka-combobox__chips", children: [value.map((entry) => ((0, jsx_runtime_1.jsx)(Chip_1.Chip, { variant: "info", size: "md", removeButtonLabel: `Remove ${labelForValue(entry)}`, onRemove: (e) => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            if (!disabled)
+                                                removeValue(entry);
+                                        }, children: labelForValue(entry) }, entry))), (0, jsx_runtime_1.jsx)("input", { ref: inputRef, id: fieldId, name: name, type: "text", className: "muka-combobox__input", value: query, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: () => {
+                                            if (!disabled)
+                                                setOpen(true);
+                                        }, disabled: disabled, placeholder: value.length === 0 ? placeholder : undefined, "aria-label": ariaLabel || label || placeholder, "aria-invalid": error || undefined, "aria-describedby": describedBy, "aria-autocomplete": "list", "aria-controls": listboxId, "aria-expanded": showSuggestions, "aria-activedescendant": showSuggestions && activeSuggestion ? activeSuggestion.id : undefined, role: "combobox", autoComplete: "off", autoCorrect: "off", spellCheck: false })] }), (0, jsx_runtime_1.jsx)(Menu_1.MenuTrigger, { asChild: true, disabled: disabled, children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "muka-combobox__menu-anchor", tabIndex: -1, "aria-hidden": "true", disabled: disabled }) })] }), (0, jsx_runtime_1.jsx)(Menu_1.MenuContent, { align: "start", side: "bottom", sideOffset: 4, className: "muka-combobox__menu", onOpenAutoFocus: (event) => {
+                            // Keep the blinking caret in the text field while suggestions open.
+                            event.preventDefault();
+                            inputRef.current?.focus();
+                        }, onCloseAutoFocus: (event) => event.preventDefault(), loop: false, children: (0, jsx_runtime_1.jsx)("div", { id: listboxId, role: "listbox", "aria-label": label || placeholder, children: suggestions.map((suggestion, index) => ((0, jsx_runtime_1.jsx)(Menu_1.MenuItem, { id: suggestion.id, hint: "enter", disabled: suggestion.disabled, highlighted: index === activeIndex, textValue: suggestion.label, onSelect: (event) => {
+                                    event.preventDefault();
+                                    if (!suggestion.disabled)
+                                        commitValue(suggestion.value);
+                                }, children: suggestion.label }, suggestion.id))) }) })] }), showError && ((0, jsx_runtime_1.jsx)("p", { className: "muka-combobox__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && ((0, jsx_runtime_1.jsx)("p", { className: "muka-combobox__helper", id: helperTextId, children: helperText }))] }));
 };
 exports.Combobox = Combobox;
 exports.default = exports.Combobox;

package/dist/cjs/components/Combobox/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../../../components/Combobox/Combobox.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../../../components/Combobox/Combobox.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/Combobox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Combobox/index.ts"],"names":[],"mappings":";;;AAAA,uCAIoB;AAHlB,oGAAA,QAAQ,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Combobox/index.ts"],"names":[],"mappings":";;;AAAA,uCAA+E;AAAtE,oGAAA,QAAQ,OAAA"}

package/dist/cjs/components/DropdownSelect/DropdownSelect.css

@@ -0,0 +1,225 @@
+/* DropdownSelect — Figma Dropdown Menu form field (Menu + chips) */
+
+.muka-dropdown-select {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 200px;
+}
+
+.muka-dropdown-select--full-width {
+  width: 100%;
+}
+
+.muka-dropdown-select__label {
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-dropdown-select__label--sm {
+  font-family: var(--text-label-sm-semibold-fontFamily);
+  font-weight: var(--text-label-sm-semibold-fontWeight);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  line-height: var(--text-label-sm-semibold-lineHeight);
+}
+
+.muka-dropdown-select__label--md {
+  font-family: var(--text-label-md-semibold-fontFamily);
+  font-weight: var(--text-label-md-semibold-fontWeight);
+  font-size: var(--text-label-md-semibold-fontSize);
+  line-height: var(--text-label-md-semibold-lineHeight);
+}
+
+.muka-dropdown-select__label--lg {
+  font-family: var(--text-label-lg-semibold-fontFamily);
+  font-weight: var(--text-label-lg-semibold-fontWeight);
+  font-size: var(--text-label-lg-semibold-fontSize);
+  line-height: var(--text-label-lg-semibold-lineHeight);
+}
+
+.muka-dropdown-select__required {
+  color: var(--color-state-error-foreground);
+}
+
+.muka-dropdown-select__field {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  background-color: var(--input-field-color-default-background);
+  border: var(--border-width-regular) solid var(--input-field-color-default-border);
+  border-radius: var(--input-field-radius-lg);
+  padding: var(--spacing-2);
+  padding-right: calc(var(--spacing-2) + var(--size-2xl, 2rem));
+  text-align: left;
+  cursor: pointer;
+  color: var(--color-text-default-default);
+  transition: border-color 0.12s ease, background-color 0.12s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.muka-dropdown-select__field::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 1px 2px 0 rgba(26, 26, 26, 0.08);
+  pointer-events: none;
+}
+
+.muka-dropdown-select__field--sm {
+  min-height: var(--input-field-height-sm);
+  border-radius: var(--input-field-radius-sm);
+  padding-right: calc(var(--spacing-2) + var(--size-xl, 1.5rem));
+}
+
+.muka-dropdown-select__field--md {
+  min-height: var(--input-field-height-default);
+  border-radius: var(--input-field-radius-md);
+}
+
+.muka-dropdown-select__field--lg {
+  min-height: var(--input-field-height-lg);
+  border-radius: var(--input-field-radius-lg);
+}
+
+.muka-dropdown-select__field--focused:not(.muka-dropdown-select__field--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-focus-border);
+  background-color: var(--input-field-color-focus-background);
+  padding: calc(var(--spacing-2) - 1px);
+  padding-right: calc(var(--spacing-2) + var(--size-2xl, 2rem) - 1px);
+}
+
+.muka-dropdown-select__field--sm.muka-dropdown-select__field--focused:not(.muka-dropdown-select__field--disabled) {
+  padding-right: calc(var(--spacing-2) + var(--size-xl, 1.5rem) - 1px);
+}
+
+.muka-dropdown-select__field--error:not(.muka-dropdown-select__field--disabled) {
+  border-color: var(--color-state-error-border, var(--color-state-error-foreground));
+}
+
+.muka-dropdown-select__field--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.muka-dropdown-select__content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  align-items: center;
+  /* Let empty-field / value clicks reach the full-field MenuTrigger underneath. */
+  pointer-events: none;
+}
+
+.muka-dropdown-select__placeholder {
+  color: var(--color-text-subtle-default);
+  font-family: var(--text-label-md-regular-fontFamily);
+  font-size: var(--text-label-md-regular-fontSize);
+  font-weight: var(--text-label-md-regular-fontWeight);
+  line-height: var(--text-label-md-regular-lineHeight);
+  padding-inline: var(--spacing-1);
+}
+
+.muka-dropdown-select__value {
+  font-family: var(--text-label-md-regular-fontFamily);
+  font-size: var(--text-label-md-regular-fontSize);
+  font-weight: var(--text-label-md-regular-fontWeight);
+  line-height: var(--text-label-md-regular-lineHeight);
+  padding-inline: var(--spacing-1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.muka-dropdown-select__chips {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+  align-items: flex-start;
+  min-width: 0;
+  /* Chip remove controls must remain clickable above the field hit target. */
+  pointer-events: auto;
+}
+
+.muka-dropdown-select__field--multiline {
+  align-items: flex-start;
+  min-height: 7rem;
+}
+
+.muka-dropdown-select__menu-button {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: auto;
+  height: auto;
+  padding: 0;
+  padding-right: var(--spacing-2);
+  border: none;
+  border-radius: inherit;
+  background: transparent;
+  color: var(--color-text-subtle-default);
+  cursor: pointer;
+}
+
+.muka-dropdown-select__field--multiline .muka-dropdown-select__menu-button {
+  align-items: flex-start;
+  padding-top: calc(var(--spacing-2) + 8px);
+}
+
+.muka-dropdown-select__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-2xl, 2rem);
+  height: var(--size-2xl, 2rem);
+  pointer-events: none;
+  color: var(--color-text-subtle-default);
+}
+
+.muka-dropdown-select__chevron .muka-icon,
+.muka-dropdown-select__menu-button:hover .muka-dropdown-select__chevron,
+.muka-dropdown-select__menu-button:hover .muka-icon {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-dropdown-select__field--sm .muka-dropdown-select__chevron {
+  width: var(--size-xl, 1.5rem);
+  height: var(--size-xl, 1.5rem);
+}
+
+.muka-dropdown-select__menu-button:focus-visible {
+  outline: 2px solid var(--color-border-focus, var(--color-action-default));
+  outline-offset: 2px;
+}
+
+.muka-dropdown-select__helper {
+  margin: 0;
+  color: var(--color-text-subtle-default);
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-size: var(--text-label-sm-regular-fontSize);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  line-height: var(--text-label-sm-regular-lineHeight);
+}
+
+.muka-dropdown-select__error {
+  margin: 0;
+  color: var(--color-state-error-foreground);
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-size: var(--text-label-sm-regular-fontSize);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  line-height: var(--text-label-sm-regular-lineHeight);
+}
+
+.muka-dropdown-select__menu {
+  /* Uses Menu min-width (280px); grows with long labels; left-aligned to the field. */
+}

package/dist/cjs/components/DropdownSelect/DropdownSelect.js

@@ -0,0 +1,106 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownSelect = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Chip_1 = require("../Chip");
+const Icon_1 = require("../Icon");
+const Menu_1 = require("../Menu");
+require("./DropdownSelect.css");
+/**
+ * DropdownSelect — form select built on Menu (Figma "Dropdown Menu").
+ *
+ * Fixed options with optional search + scrollbar. Single-select shows the
+ * chosen label; multi-select renders dismissible chips and trailing checkmarks
+ * in the menu.
+ *
+ * Not the native `<Select>` — use that for simple platform-native fields.
+ * Not free-text — use `Combobox` for creatable chip input.
+ */
+const DropdownSelect = ({ options, value, onValueChange, multiple = false, placeholder = 'Select item...', label, helperText, error = false, errorMessage, disabled = false, size = 'md', fullWidth = false, required = false, searchable = true, searchPlaceholder = 'Search', scrollbar = false, open: openProp, onOpenChange, defaultOpen, name, id, 'aria-label': ariaLabel, className = '', }) => {
+    const generatedId = (0, react_1.useId)();
+    const fieldId = id || name || generatedId;
+    const helperTextId = `${fieldId}-helper`;
+    const errorMessageId = `${fieldId}-error`;
+    const fieldRef = (0, react_1.useRef)(null);
+    const [menuWidth, setMenuWidth] = (0, react_1.useState)(undefined);
+    const [uncontrolledOpen, setUncontrolledOpen] = (0, react_1.useState)(false);
+    const isControlled = openProp !== undefined;
+    const open = isControlled ? openProp : uncontrolledOpen;
+    (0, react_1.useEffect)(() => {
+        const el = fieldRef.current;
+        if (!el || typeof ResizeObserver === 'undefined')
+            return;
+        const update = () => setMenuWidth(el.offsetWidth);
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+    const handleOpenChange = (next) => {
+        if (disabled)
+            return;
+        if (!isControlled)
+            setUncontrolledOpen(next);
+        onOpenChange?.(next);
+    };
+    const selectedValues = (0, react_1.useMemo)(() => {
+        if (multiple) {
+            return Array.isArray(value) ? value : value ? [value] : [];
+        }
+        if (typeof value === 'string' && value)
+            return [value];
+        return [];
+    }, [multiple, value]);
+    const selectedSet = (0, react_1.useMemo)(() => new Set(selectedValues), [selectedValues]);
+    const selectedOptions = (0, react_1.useMemo)(() => selectedValues
+        .map((v) => options.find((o) => o.value === v))
+        .filter((o) => Boolean(o)), [options, selectedValues]);
+    const showError = error && errorMessage;
+    const describedBy = showError ? errorMessageId : helperText ? helperTextId : undefined;
+    const rootClasses = [
+        'muka-dropdown-select',
+        fullWidth && 'muka-dropdown-select--full-width',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const fieldClasses = [
+        'muka-dropdown-select__field',
+        `muka-dropdown-select__field--${size}`,
+        open && 'muka-dropdown-select__field--focused',
+        error && 'muka-dropdown-select__field--error',
+        disabled && 'muka-dropdown-select__field--disabled',
+        selectedOptions.length > 1 && 'muka-dropdown-select__field--multiline',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const removeValue = (next) => {
+        if (!multiple) {
+            onValueChange?.('');
+            return;
+        }
+        onValueChange?.(selectedValues.filter((v) => v !== next));
+    };
+    const toggleMulti = (optionValue, checked) => {
+        if (checked) {
+            if (selectedSet.has(optionValue))
+                return;
+            onValueChange?.([...selectedValues, optionValue]);
+            return;
+        }
+        onValueChange?.(selectedValues.filter((v) => v !== optionValue));
+    };
+    const singleValue = !multiple ? selectedValues[0] ?? '' : undefined;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: rootClasses, children: [label && ((0, jsx_runtime_1.jsxs)("label", { className: `muka-dropdown-select__label muka-dropdown-select__label--${size}`, htmlFor: fieldId, children: [label, required && ((0, jsx_runtime_1.jsxs)("span", { className: "muka-dropdown-select__required", "aria-hidden": "true", children: [' ', "*"] }))] })), (0, jsx_runtime_1.jsxs)(Menu_1.Menu, { trigger: "click", open: open, onOpenChange: handleOpenChange, defaultOpen: defaultOpen, modal: false, children: [(0, jsx_runtime_1.jsxs)("div", { ref: fieldRef, className: fieldClasses, children: [(0, jsx_runtime_1.jsx)(Menu_1.MenuTrigger, { asChild: true, disabled: disabled, children: (0, jsx_runtime_1.jsx)("button", { type: "button", id: fieldId, name: name, className: "muka-dropdown-select__menu-button", disabled: disabled, "aria-haspopup": "menu", "aria-expanded": open, "aria-describedby": describedBy, "aria-label": ariaLabel || label || placeholder, children: (0, jsx_runtime_1.jsx)("span", { className: "muka-dropdown-select__chevron", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-drop-up-down", size: size === 'sm' ? 'xs' : 'md' }) }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "muka-dropdown-select__content", children: selectedOptions.length === 0 ? ((0, jsx_runtime_1.jsx)("span", { className: "muka-dropdown-select__placeholder", children: placeholder })) : multiple ? ((0, jsx_runtime_1.jsx)("span", { className: "muka-dropdown-select__chips", children: selectedOptions.map((option) => ((0, jsx_runtime_1.jsx)(Chip_1.Chip, { variant: "info", size: "md", removeButtonLabel: `Remove ${option.label}`, onRemove: (e) => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            removeValue(option.value);
+                                        }, children: option.label }, option.value))) })) : ((0, jsx_runtime_1.jsx)("span", { className: "muka-dropdown-select__value", children: selectedOptions[0].label })) })] }), (0, jsx_runtime_1.jsxs)(Menu_1.MenuContent, { align: "start", side: "bottom", sideOffset: 4, searchable: searchable, scrollbar: scrollbar, className: "muka-dropdown-select__menu", style: menuWidth && menuWidth > 280
+                            ? { minWidth: menuWidth }
+                            : undefined, onCloseAutoFocus: (event) => event.preventDefault(), children: [searchable && ((0, jsx_runtime_1.jsx)(Menu_1.MenuSearch, { placeholder: searchPlaceholder, size: size === 'sm' ? 'sm' : 'md' })), multiple ? (options.map((option) => ((0, jsx_runtime_1.jsx)(Menu_1.MenuCheckboxItem, { checked: selectedSet.has(option.value), onCheckedChange: (checked) => toggleMulti(option.value, checked), disabled: option.disabled, indicator: "trailing", textValue: option.label, children: option.label }, option.value)))) : ((0, jsx_runtime_1.jsx)(Menu_1.MenuRadioGroup, { value: singleValue, onValueChange: (next) => onValueChange?.(next), children: options.map((option) => ((0, jsx_runtime_1.jsx)(Menu_1.MenuRadioItem, { value: option.value, disabled: option.disabled, indicator: "check", textValue: option.label, children: option.label }, option.value))) }))] })] }), showError && ((0, jsx_runtime_1.jsx)("p", { className: "muka-dropdown-select__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && ((0, jsx_runtime_1.jsx)("p", { className: "muka-dropdown-select__helper", id: helperTextId, children: helperText }))] }));
+};
+exports.DropdownSelect = DropdownSelect;
+exports.default = exports.DropdownSelect;
+//# sourceMappingURL=DropdownSelect.js.map