@crab-dev/rc-select 0.0.3 → 0.1.0

package/declarations/index.d.ts

@@ -1,79 +1,4 @@
-import { ReactNode, HTMLAttributes, Ref, FC } from 'react';
-
-/**
- * 单个选项
- * - `label`: 渲染时显示的内容（可以是字符串或 React 节点）
- * - `value`: 选项的唯一标识（字符串）
- * - `disabled`: 可选，是否禁用该选项
- */
-interface SelectOption {
-    label: ReactNode;
-    value: string;
-    disabled?: boolean;
-}
-/**
- * 选项分组
- * - `label`: 分组标题（用于在下拉列表中显示）
- * - `options`: 该分组包含的多个 `SelectOption`
- */
-interface SelectOptionGroup {
-    label: ReactNode;
-    options: SelectOption[];
-}
-type SelectOptionOrGroup = SelectOption | SelectOptionGroup;
-/**
- * 基础 Props，适用于单选和多选。继承自 div 的 HTML 属性，但排除了
- * `onChange` 和 `defaultValue`，因为它们在单选/多选中有不同签名。
- */
-interface BaseSelectProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
-    ref?: Ref<HTMLDivElement>;
-    options: SelectOptionOrGroup[];
-    placeholder?: string;
-    disabled?: boolean;
-    searchable?: boolean;
-    size?: "large" | "middle" | "small";
-    status?: "error" | "warning";
-    allowClear?: boolean;
-    loading?: boolean;
-    maxTagCount?: number;
-    autoFocus?: boolean;
-    notFoundContent?: ReactNode;
-    popupClassName?: string;
-    popupMatchSelectWidth?: boolean;
-    optionRender?: (option: SelectOption, info: {
-        selected: boolean;
-    }) => ReactNode;
-    tagRender?: (option: SelectOption, onClose: () => void) => ReactNode;
-    dropdownRender?: (menu: ReactNode) => ReactNode;
-    onOpenChange?: (open: boolean) => void;
-    onFocus?: () => void;
-    onBlur?: () => void;
-}
-/**
- * 单选模式 Props
- * - `multiple` 可选或 false
- * - `value` / `defaultValue` 为单个字符串或 undefined
- */
-interface SingleSelectProps extends BaseSelectProps {
-    multiple?: false;
-    value?: string;
-    defaultValue?: string;
-    onChange?: (value: string | undefined, option: SelectOption | undefined) => void;
-}
-/**
- * 多选模式 Props
- * - `multiple` 必须为 true
- * - `value` / `defaultValue` 为字符串数组
- */
-interface MultiSelectProps extends BaseSelectProps {
-    multiple: true;
-    value?: string[];
-    defaultValue?: string[];
-    onChange?: (value: string[], options: SelectOption[]) => void;
-}
-type SelectProps = SingleSelectProps | MultiSelectProps;
-
-declare const Select: FC<SelectProps>;
-
-export { Select as default };
-export type { SelectOption, SelectOptionGroup, SelectOptionOrGroup, SelectProps };
+import Select from './_wake/src/select.js';
+export type { SelectOption, SelectOptionGroup, SelectOptionOrGroup, SelectProps, SelectChangeDetails } from './_wake/src/types.js';
+export default Select;
+export { vars as TokenVars } from './_wake/src/token.js';

package/esm/_wake/src/hooks/useKeyboardNavigation.mjs

@@ -0,0 +1,36 @@
+import { useState } from "react";
+;
+;
+const useKeyboardNavigation = ({ filteredOptions, open }) => {
+  const [highlightIndex, setHighlightIndex] = useState(-1);
+  const findNextEnabledIndex = (startIndex, direction) => {
+    const len = filteredOptions.length;
+    if (len === 0) {
+      return -1;
+    }
+    let index = startIndex;
+    for (let i = 0; i < len; i += 1) {
+      index = ((index + direction) % len + len) % len;
+      const opt = filteredOptions[index];
+      if (!opt.disabled && !opt.isGroupLabel) {
+        return index;
+      }
+    }
+    return -1;
+  };
+  const moveHighlight = (direction) => {
+    if (!open) {
+      return;
+    }
+    setHighlightIndex((prev) => {
+      const start = prev === -1 ? direction === 1 ? -1 : 0 : prev;
+      return findNextEnabledIndex(start, direction);
+    });
+  };
+  const resetHighlight = () => {
+    setHighlightIndex(-1);
+  };
+  const highlightedOption = highlightIndex >= 0 && highlightIndex < filteredOptions.length ? filteredOptions[highlightIndex] : undefined;
+  return { highlightIndex, highlightedOption, moveHighlight, resetHighlight, setHighlightIndex };
+};
+export default useKeyboardNavigation;

package/esm/_wake/src/select.mjs

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useComponentSize, useLocale } from "@crab-dev/rc-config-provider";
+import RcDropdownContainer from "@crab-dev/rc-dropdown-container";
+import { useDropdownPositionReference } from "@crab-dev/rc-dropdown-container/internal";
+import semanticToken from "@crab-dev/rc-token-semantic";
+import { useId, useRef, useState } from "react";
+;
+import { useControllableValue } from "@crab-dev/rc-hooks";
+import useKeyboardNavigation from "./hooks/useKeyboardNavigation.mjs";
+import SelectInput from "./selectInput.mjs";
+import SelectOverlay from "./selectOverlay.mjs";
+import token from "./token.mjs";
+;
+const isGroup = (item) => "options" in item && Array.isArray(item.options);
+const asArray = (value) => {
+  if (value == null) {
+    return [];
+  }
+  return Array.isArray(value) ? value : [value];
+};
+const flattenOptions = (options) => {
+  const result = [];
+  options.forEach((item, index) => {
+    if (isGroup(item)) {
+      result.push({ label: item.label, value: `__group_${index}`, isGroupLabel: true });
+      for (const opt of item.options) {
+        result.push(opt);
+      }
+    } else {
+      result.push(item);
+    }
+  });
+  return result;
+};
+const flattenPlainOptions = (options) => {
+  const result = [];
+  for (const item of options) {
+    if (isGroup(item)) {
+      for (const opt of item.options) {
+        result.push(opt);
+      }
+    } else {
+      result.push(item);
+    }
+  }
+  return result;
+};
+const filterOptions = (flatOptions, searchable, searchText) => {
+  if (!searchable || searchText.trim() === "") {
+    return flatOptions;
+  }
+  const keyword = searchText.trim().toLowerCase();
+  return flatOptions.filter((opt) => {
+    if (opt.isGroupLabel) {
+      return false;
+    }
+    if (typeof opt.label === "string") {
+      return opt.label.toLowerCase().includes(keyword);
+    }
+    return opt.value.toLowerCase().includes(keyword);
+  });
+};
+const firstEnabledIndex = (flatOptions) => flatOptions.findIndex((opt) => !opt.disabled && !opt.isGroupLabel);
+const fieldStyle = "rc-select-0f3ecf945b98";
+const supportingStyle = "rc-select-3bd2a27273ad";
+function SelectField({ children }) {
+  const setPositionReference = useDropdownPositionReference();
+  return _jsx("div", { className: fieldStyle, ref: setPositionReference, children: children });
+}
+function Select({ ref, id, options, placeholder, disabled = false, searchable = false, multiple = false, size: sizeProp, status, appearance = "outlined", label, supportingText, errorText, required, allowClear = false, loading = false, maxTagCount, autoFocus = false, notFoundContent, popupClassName, popupMatchSelectWidth = true, optionRender, tagRender, dropdownRender, value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, onFocus, onBlur, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...restProps }) {
+  const size = useComponentSize(sizeProp);
+  const { messages } = useLocale();
+  const listboxId = useId();
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const labelId = `${generatedId}-label`;
+  const descriptionId = `${generatedId}-description`;
+  const fieldStatus = errorText ? "error" : status;
+  const description = errorText || supportingText;
+  const [searchText, setSearchText] = useState("");
+  const [selectedValues, setSelectedValues] = useControllableValue({ value: value !== undefined ? asArray(value) : undefined, defaultValue: asArray(defaultValue) });
+  const [triggerWidth, setTriggerWidth] = useState(0);
+  const controlRef = useRef(null);
+  const allPlainOptions = flattenPlainOptions(options);
+  const selectedOptions = allPlainOptions.filter((opt) => selectedValues.includes(opt.value));
+  const flatOptions = flattenOptions(options);
+  const filteredOptions = filterOptions(flatOptions, searchable, searchText);
+  const { highlightIndex, highlightedOption, moveHighlight, resetHighlight, setHighlightIndex } = useKeyboardNavigation({ filteredOptions, open: true });
+  const syncOpenState = (nextOpen) => {
+    if (nextOpen) {
+      if (!multiple && selectedValues.length > 0) {
+        const selectedIndex = filteredOptions.findIndex((opt) => opt.value === selectedValues[0]);
+        setHighlightIndex(selectedIndex);
+      }
+    } else {
+      setSearchText("");
+      resetHighlight();
+    }
+  };
+  const emitOpenChange = (nextOpen, details) => {
+    onOpenChange?.(nextOpen, details);
+  };
+  const openProps = open === undefined ? { defaultOpen } : { open };
+  const updateValue = (nextValues, reason, event) => {
+    if (disabled) return;
+    if (nextValues.length === selectedValues.length && nextValues.every((item, index) => item === selectedValues[index])) return;
+    setSelectedValues(nextValues);
+    if (multiple) {
+      const nextOptions = allPlainOptions.filter((opt) => nextValues.includes(opt.value));
+      onValueChange?.(nextValues, { reason, options: nextOptions, event });
+      return;
+    }
+    const nextValue = nextValues[0] ?? null;
+    const nextOption = allPlainOptions.find((opt) => opt.value === nextValue);
+    onValueChange?.(nextValue, { reason, option: nextOption, options: nextOption ? [nextOption] : [], event });
+  };
+  const handleOptionSelect = (option, event) => {
+    if (disabled || option.disabled || option.isGroupLabel) {
+      return;
+    }
+    if (multiple) {
+      const exists = selectedValues.includes(option.value);
+      const nextValues = exists ? selectedValues.filter((v) => v !== option.value) : [...selectedValues, option.value];
+      updateValue(nextValues, exists ? "deselect" : "select", event);
+      return;
+    }
+    controlRef.current?.focus();
+    updateValue([option.value], "select", event);
+  };
+  const handleClear = (event) => {
+    if (disabled) return;
+    updateValue([], "clear", event);
+    setSearchText("");
+  };
+  const handleRemoveTag = (val, event) => {
+    updateValue(selectedValues.filter((v) => v !== val), "remove", event);
+  };
+  const handleTriggerWidthChange = (width) => {
+    setTriggerWidth(width);
+  };
+  const handleSearchTextChange = (text) => {
+    if (disabled) return;
+    setSearchText(text);
+    const nextFiltered = filterOptions(flatOptions, searchable, text);
+    setHighlightIndex(firstEnabledIndex(nextFiltered));
+  };
+  const floatingStyle = popupMatchSelectWidth ? { width: triggerWidth } : { minWidth: triggerWidth };
+  return _jsx(RcDropdownContainer, { ...openProps, onOpenChange: emitOpenChange, size: size, ...restProps, className: className, overlay: _jsx(SelectOverlay, { size: size, multiple: multiple, disabled: disabled, loading: loading, filteredOptions: filteredOptions, selectedValues: selectedValues, triggerWidth: triggerWidth, highlightIndex: highlightIndex, listboxId: listboxId, notFoundContent: notFoundContent, popupClassName: popupClassName, optionRender: optionRender, dropdownRender: dropdownRender, onOptionSelect: handleOptionSelect, onHighlightChange: setHighlightIndex }), floatingContainerProps: { style: floatingStyle }, children: _jsxs(SelectField, { children: [_jsx(SelectInput, { ref: ref, controlRef: controlRef, id: inputId, ariaLabel: ariaLabel, ariaLabelledBy: ariaLabelledBy ?? (label ? labelId : undefined), ariaDescribedBy: [ariaDescribedBy, description ? descriptionId : undefined].filter(Boolean).join(" ") || undefined, disabled: disabled, searchable: searchable, multiple: multiple, size: size, status: fieldStatus, appearance: appearance, label: label, labelId: labelId, required: required, allowClear: allowClear, loading: loading, maxTagCount: maxTagCount, autoFocus: autoFocus, placeholder: placeholder ?? messages.select.placeholder, selectedOptions: selectedOptions, searchText: searchText, highlightIndex: highlightIndex, highlightedOption: highlightedOption, listboxId: listboxId, tagRender: tagRender, onSearchTextChange: handleSearchTextChange, onOpenStateChange: syncOpenState, onWidthChange: handleTriggerWidthChange, onMoveHighlight: moveHighlight, onSelectHighlighted: handleOptionSelect, onClear: handleClear, onRemoveTag: handleRemoveTag, onFocus: onFocus, onBlur: onBlur }), description && _jsx("div", { id: descriptionId, className: supportingStyle, "data-status": fieldStatus, role: errorText ? "alert" : undefined, children: description })] }) });
+}
+;
+export default Select;

package/esm/_wake/src/selectInput.mjs

@@ -0,0 +1,201 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useDropdownContext } from "@crab-dev/rc-dropdown-container";
+import RcLineEdit from "@crab-dev/rc-line-edit";
+import Button from "@crab-dev/rc-button";
+import { SpinIndicator } from "@crab-dev/rc-spin";
+import Tag from "@crab-dev/rc-tag";
+import { cx } from "@crab-dev/css";
+import { useLocale } from "@crab-dev/rc-config-provider";
+import { useCallback, useEffect, useEffectEvent, useRef, useState } from "react";
+import token, { vars } from "./token.mjs";
+;
+import { controlStyle, fieldControlStyle, fieldLayoutStyle, controlDisabledStyle, controlErrorStyle, controlWarningStyle, valueWrapStyle, singleValueStyle, placeholderStyle, searchInputStyle, caretStyle, caretOpenStyle, tagLabelStyle, suffixWrapStyle, actionStyle, loadingIconStyle } from "./selectInput.styles.mjs";
+const setRef = (ref, node) => {
+  if (typeof ref === "function") {
+    ref(node);
+  } else if (ref) {
+    ref.current = node;
+  }
+};
+const sizeMetricsMap = { large: "rc-select-df4a743b55e1", medium: "rc-select-de4a743b542e", small: "rc-select-dd4a743b527b" };
+const sizeHeightFixedMap = { large: "rc-select-b8fc5925a597", medium: "rc-select-b7fc5925a3e4", small: "rc-select-bafc5925a8fd" };
+const sizeHeightFlexibleMap = { large: "rc-select-5d07f79a2f4a", medium: "rc-select-5e07f79a30fd", small: "rc-select-5b07f79a2be4" };
+const CaretIcon = () => _jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "m7 10 5 5 5-5z" }) });
+const ClearIcon = () => _jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m18 6-12 12M6 6l12 12" }) });
+;
+const SelectInput = ({ ref, controlRef, id, ariaLabel, ariaLabelledBy, ariaDescribedBy, disabled, searchable, multiple, size, status, appearance, label, labelId, required, allowClear, loading, maxTagCount, autoFocus, placeholder, selectedOptions, searchText, highlightIndex, highlightedOption, listboxId, tagRender, onSearchTextChange, onOpenStateChange, onWidthChange, onMoveHighlight, onSelectHighlighted, onClear, onRemoveTag, onFocus, onBlur }) => {
+  const { state, refs, dispatch } = useDropdownContext();
+  const { messages } = useLocale();
+  const inputRef = useRef(null);
+  const open = state.open;
+  const [hovered, setHovered] = useState(false);
+  const [actionFocused, setActionFocused] = useState(false);
+  const [withoutHover, setWithoutHover] = useState(false);
+  useEffect(() => {
+    const media = window.matchMedia?.("(hover: none)");
+    if (!media) return;
+    const update = () => setWithoutHover(media.matches);
+    update();
+    media.addEventListener("change", update);
+    return () => media.removeEventListener("change", update);
+  }, []);
+  const syncOpen = useEffectEvent(onOpenStateChange);
+  const mergeRef = useCallback((node) => {
+    controlRef.current = node;
+    if (typeof refs.setReference === "function") {
+      refs.setReference(node);
+    }
+    setRef(ref, node);
+  }, [refs.setReference, ref, controlRef]);
+  useEffect(() => {
+    const el = controlRef.current;
+    if (!el) {
+      return;
+    }
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        onWidthChange(entry.target.getBoundingClientRect().width);
+      }
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [onWidthChange]);
+  useEffect(() => {
+    if (open && searchable && !disabled) {
+      queueMicrotask(() => inputRef.current?.focus());
+    }
+  }, [disabled, open, searchable]);
+  useEffect(() => {
+    if (autoFocus && !disabled && controlRef.current) {
+      controlRef.current.focus();
+    }
+  }, [autoFocus, disabled]);
+  useEffect(() => {
+    syncOpen(open);
+  }, [open]);
+  const handleClick = () => {
+    if (disabled) {
+      return;
+    }
+    dispatch({ type: "setOpen", payload: !open });
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) {
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (!open) {
+          dispatch({ type: "setOpen", payload: true });
+        }
+        onMoveHighlight(1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (!open) {
+          dispatch({ type: "setOpen", payload: true });
+        }
+        onMoveHighlight(-1);
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (open && highlightedOption) {
+          onSelectHighlighted(highlightedOption, e);
+          if (!multiple) {
+            dispatch({ type: "setOpen", payload: false });
+          }
+        } else if (!open) {
+          dispatch({ type: "setOpen", payload: true });
+        }
+        break;
+      case " ":
+        if (!searchable || !open) {
+          e.preventDefault();
+          if (!open) {
+            dispatch({ type: "setOpen", payload: true });
+          }
+        }
+        break;
+      case "Escape":
+        if (open) {
+          e.preventDefault();
+          controlRef.current?.focus();
+          dispatch({ type: "setOpen", payload: false, details: { reason: "escape", event: e.nativeEvent } });
+        }
+        break;
+      case "Backspace":
+        if (multiple && searchText === "" && selectedOptions.length > 0) {
+          const lastOption = selectedOptions[selectedOptions.length - 1];
+          onRemoveTag(lastOption.value, e);
+        }
+        break;
+      default:
+        break;
+    }
+  };
+  const triggerClear = (event) => {
+    controlRef.current?.focus();
+    onClear(event);
+    if (open) {
+      dispatch({ type: "setOpen", payload: false });
+    }
+  };
+  const handleClearClick = (e) => {
+    e.stopPropagation();
+    triggerClear(e);
+  };
+  const handleClearKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.stopPropagation();
+    }
+  };
+  const canClear = allowClear && !disabled && selectedOptions.length > 0;
+  const showClear = canClear && (hovered || actionFocused || withoutHover);
+  const renderTag = (opt) => {
+    const handleClose = (event) => {
+      if (!disabled) onRemoveTag(opt.value, event);
+    };
+    if (tagRender) {
+      return _jsx("span", { children: tagRender(opt, handleClose) }, opt.value);
+    }
+    return _jsx(Tag, { size: "small", closable: !disabled, closeAriaLabel: messages.select.removeTag(typeof opt.label === "string" ? opt.label : opt.value), onClose: handleClose, children: _jsx("span", { className: tagLabelStyle, children: opt.label }) }, opt.value);
+  };
+  const renderTags = () => {
+    if (maxTagCount !== undefined && selectedOptions.length > maxTagCount) {
+      const visible = selectedOptions.slice(0, maxTagCount);
+      const overflowCount = selectedOptions.length - maxTagCount;
+      return _jsxs(_Fragment, { children: [visible.map(renderTag), _jsxs(Tag, { size: "small", children: ["+", overflowCount] })] });
+    }
+    return selectedOptions.map(renderTag);
+  };
+  const renderContent = () => {
+    if (searchable && open) {
+      return _jsxs(_Fragment, { children: [multiple && renderTags(), _jsx(RcLineEdit, { ref: inputRef, "aria-label": ariaLabel ?? label ?? placeholder, bordered: false, disabled: disabled, value: searchText, placeholder: multiple && selectedOptions.length > 0 ? "" : placeholder, onChange: (e) => onSearchTextChange(e.target.value), onClick: (e) => e.stopPropagation(), className: searchInputStyle })] });
+    }
+    if (multiple) {
+      if (selectedOptions.length === 0) {
+        return _jsx("span", { "data-role": "select-placeholder", className: placeholderStyle, children: placeholder });
+      }
+      return renderTags();
+    }
+    if (selectedOptions.length === 0) {
+      return _jsx("span", { "data-role": "select-placeholder", className: placeholderStyle, children: placeholder });
+    }
+    return _jsx("span", { className: singleValueStyle, children: selectedOptions[0]?.label });
+  };
+  const activeDescendantId = open && highlightIndex >= 0 ? `${listboxId}-option-${highlightIndex}` : undefined;
+  return _jsxs("div", { className: fieldLayoutStyle, "data-labeled": Boolean(label), "data-appearance": appearance, "data-floating": Boolean(open || selectedOptions.length > 0 || searchText), "data-open": open, "data-status": status, "data-disabled": disabled || undefined, children: [label && _jsxs("span", { "data-role": "select-label", children: [_jsx("span", { id: labelId, children: label }), required && _jsx("span", { "data-required-marker": "", "aria-hidden": "true", children: "*" })] }), _jsxs("div", { id: id, role: "combobox", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-required": required || undefined, "aria-expanded": open, "aria-disabled": disabled, "aria-busy": loading || undefined, "aria-haspopup": "listbox", "aria-controls": open ? listboxId : undefined, "aria-activedescendant": activeDescendantId, "aria-invalid": status === "error" ? true : undefined, "data-appearance": appearance, "data-clearable": canClear, "data-labeled": Boolean(label), "data-floating": Boolean(open || selectedOptions.length > 0 || searchText), "data-status": status, tabIndex: disabled ? -1 : 0, ref: mergeRef, className: cx.call(undefined, controlStyle, sizeMetricsMap[size], multiple ? sizeHeightFlexibleMap[size] : sizeHeightFixedMap[size], disabled && controlDisabledStyle, status === "error" && controlErrorStyle, status === "warning" && controlWarningStyle, fieldControlStyle), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: onFocus, onBlur: onBlur, onPointerOver: (event) => {
+    if (event.pointerType !== "touch") setHovered(true);
+  }, onPointerOut: (event) => {
+    if (!(event.relatedTarget instanceof Node) || !event.currentTarget.contains(event.relatedTarget)) {
+      setHovered(false);
+    }
+  }, children: [label && appearance === "outlined" && _jsx("fieldset", { "aria-hidden": "true", children: _jsxs("legend", { children: [label, required ? " *" : ""] }) }), _jsx("div", { "data-role": "select-value", className: valueWrapStyle, children: renderContent() }), _jsxs("span", { "data-role": "select-suffix", className: suffixWrapStyle, children: [loading ? _jsx("span", { "aria-hidden": "true", className: loadingIconStyle, children: _jsx(SpinIndicator, {}) }) : null, _jsx(Button, { "data-role": showClear ? "select-clear" : "select-caret", className: actionStyle, type: "button", appearance: "text", shape: "circle", size: size === "small" ? "xs" : size === "large" ? "m" : "s", disabled: disabled, "aria-label": showClear ? messages.common.clear : open ? messages.select.closeOptions : messages.select.openOptions, "aria-expanded": showClear ? undefined : open, icon: showClear ? _jsx(ClearIcon, {}) : _jsx("span", { "aria-hidden": "true", className: cx.call(undefined, caretStyle, open && caretOpenStyle), children: _jsx(CaretIcon, {}) }), onFocus: () => setActionFocused(true), onBlur: () => setActionFocused(false), onClick: (event) => {
+    if (showClear) handleClearClick(event); else {
+      event.stopPropagation();
+      handleClick();
+    }
+  }, onKeyDown: handleClearKeyDown })] })] })] });
+};
+export default SelectInput;

package/esm/_wake/src/selectInput.styles.mjs

@@ -0,0 +1,20 @@
+import { TokenVars as buttonVars } from "@crab-dev/rc-button";
+import { TokenVars as spinVars } from "@crab-dev/rc-spin";
+import semanticToken from "@crab-dev/rc-token-semantic";
+import token, { vars } from "./token.mjs";
+export const controlStyle = "rc-select-5e896678dc89";
+export const fieldControlStyle = "rc-select-29edc097b42b";
+export const fieldLayoutStyle = "rc-select-910e459fbbe0";
+export const controlDisabledStyle = "rc-select-82fbf3807561";
+export const controlErrorStyle = "rc-select-6d2a034155e7";
+export const controlWarningStyle = "rc-select-36466465840d";
+export const valueWrapStyle = "rc-select-f0b8a9c0c369";
+export const singleValueStyle = "rc-select-bcd33343d38d";
+export const placeholderStyle = "rc-select-30719d992205";
+export const searchInputStyle = "rc-select-c91210473c12";
+export const caretStyle = "rc-select-8ca15a371517";
+export const caretOpenStyle = "rc-select-72a72768a0ef";
+export const tagLabelStyle = "rc-select-113a9493f812";
+export const suffixWrapStyle = "rc-select-5032f5885db7";
+export const actionStyle = "rc-select-aa51540f6a1a";
+export const loadingIconStyle = "rc-select-14f1c2e4ccd5";

package/esm/_wake/src/selectOverlay.mjs

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Checkbox from "@crab-dev/rc-checkbox";
+import { componentDensityMetrics, useConfig, useLocale } from "@crab-dev/rc-config-provider";
+import { SpinIndicator } from "@crab-dev/rc-spin";
+import RcVirtual from "@crab-dev/rc-virtual";
+import { useMediaQuery } from "@crab-dev/rc-hooks";
+import { cx } from "@crab-dev/css";
+import { useDropdownContext } from "@crab-dev/rc-dropdown-container";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+;
+import { overlayStyle, optionStyle, optionHighlightStyle, measureStyle, optionSelectedStyle, optionSelectedSingleStyle, optionDisabledStyle, optionLabelStyle, checkIconStyle, checkboxIndicatorStyle, emptyStyle, groupLabelStyle, groupedOptionStyle, virtualTopSpacerStyle, virtualBottomSpacerStyle, loadingStyle } from "./selectOverlay.styles.mjs";
+const hasGroups = (options) => options.some((opt) => opt.isGroupLabel);
+const DROPDOWN_PADDING = 4;
+const MAX_VIEWPORT_HEIGHT = 256;
+;
+const SelectOverlay = ({ size, multiple, disabled, loading, filteredOptions, selectedValues, triggerWidth, highlightIndex, listboxId, notFoundContent, popupClassName, optionRender, dropdownRender, onOptionSelect, onHighlightChange }) => {
+  const { dispatch } = useDropdownContext();
+  const coarsePointer = useMediaQuery("(pointer: coarse)");
+  const overlayRef = useRef(null);
+  const [measuredRowHeight, setMeasuredRowHeight] = useState(0);
+  const [measuredContentWidth, setMeasuredContentWidth] = useState(0);
+  const { density } = useConfig();
+  const { messages } = useLocale();
+  const rowHeight = Math.max(coarsePointer ? 48 : componentDensityMetrics[density].item, measuredRowHeight);
+  useLayoutEffect(() => {
+    const overlay = overlayRef.current;
+    const option = overlay?.querySelector("[data-select-option-measure]");
+    if (!overlay || !option) return;
+    const measure = () => {
+      const height = option.getBoundingClientRect().height;
+      if (height > 0) {
+        overlayRef.current?.style.setProperty("--select-option-measured-height", `${height}px`);
+        setMeasuredRowHeight(height);
+      }
+      const style = overlay.ownerDocument.defaultView?.getComputedStyle(overlay);
+      const paddingStart = Number.parseFloat(style?.paddingLeft ?? "") || 0;
+      const paddingEnd = Number.parseFloat(style?.paddingRight ?? "") || 0;
+      const width = overlay.clientWidth - paddingStart - paddingEnd;
+      if (width > 0) setMeasuredContentWidth(width);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(option);
+    observer.observe(overlay);
+    return () => observer.disconnect();
+  }, [coarsePointer, density, filteredOptions.length, loading, size]);
+  const gridRef = useRef(null);
+  useEffect(() => {
+    if (highlightIndex < 0) {
+      return;
+    }
+    gridRef.current?.scrollToCell({ rowIndex: highlightIndex });
+  }, [highlightIndex]);
+  const rowCount = filteredOptions.length;
+  const contentWidth = measuredContentWidth || Math.max(triggerWidth - DROPDOWN_PADDING * 2, 160);
+  const viewportHeight = Math.min(MAX_VIEWPORT_HEIGHT, rowCount * rowHeight);
+  const rows = Array(rowCount).fill(rowHeight);
+  const columns = [contentWidth];
+  if (loading) {
+    return _jsx("div", { id: listboxId, role: "listbox", "aria-busy": "true", "data-select-overlay": true, className: cx.call(undefined, overlayStyle, popupClassName), children: _jsx("div", { className: loadingStyle, children: _jsx(SpinIndicator, {}) }) });
+  }
+  if (filteredOptions.length === 0) {
+    return _jsx("div", { id: listboxId, role: "listbox", "data-select-overlay": true, className: cx.call(undefined, overlayStyle, popupClassName), children: _jsx("div", { className: emptyStyle, children: notFoundContent ?? messages.select.empty }) });
+  }
+  const isGrouped = hasGroups(filteredOptions);
+  const menu = _jsx(RcVirtual, { gridRef: gridRef, viewportWidth: contentWidth, viewportHeight: viewportHeight, gridTemplateColumns: columns, gridTemplateRows: rows, overscanRowCount: 4, renderRows: (rowRange) => {
+    const nodes = [_jsx("div", { "data-select-virtual-spacer": "top", className: virtualTopSpacerStyle }, "__select-top-padding__")];
+    for (let i = rowRange[0]; i <= rowRange[1]; i += 1) {
+      const option = filteredOptions[i];
+      if (option.isGroupLabel) {
+        nodes.push(_jsx("div", { "data-group-label": true, className: groupLabelStyle, children: option.label }, option.value));
+        continue;
+      }
+      const selected = selectedValues.includes(option.value);
+      const highlighted = i === highlightIndex;
+      const content = optionRender ? optionRender(option, { selected }) : _jsxs(_Fragment, { children: [multiple ? _jsx(Checkbox, { className: checkboxIndicatorStyle, checked: selected, disabled: disabled || option.disabled, tabIndex: -1, "aria-label": typeof option.label === "string" ? option.label : option.value }) : null, _jsx("span", { className: optionLabelStyle, children: option.label }), !multiple && selected ? _jsx("span", { className: checkIconStyle, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M20 6 9 17l-5-5" }) }) }) : null] });
+      const optionAriaLabel = multiple ? typeof option.label === "string" ? option.label : option.value : undefined;
+      nodes.push(_jsx("div", { id: `${listboxId}-option-${i}`, role: "option", "aria-selected": selected, "aria-disabled": disabled || option.disabled || undefined, "data-highlighted": highlighted || undefined, "aria-label": optionAriaLabel, className: cx.call(undefined, optionStyle, isGrouped && groupedOptionStyle, selected && (multiple ? optionSelectedStyle : optionSelectedSingleStyle), highlighted && optionHighlightStyle, (disabled || option.disabled) && optionDisabledStyle), onMouseEnter: () => {
+        if (!disabled) onHighlightChange(i);
+      }, onClick: (event) => {
+        if (disabled) return;
+        onOptionSelect(option, event);
+        if (!multiple && !option.disabled) {
+          dispatch({ type: "setOpen", payload: false });
+        }
+      }, children: content }, option.value));
+    }
+    nodes.push(_jsx("div", { "data-select-virtual-spacer": "bottom", className: virtualBottomSpacerStyle }, "__select-bottom-padding__"));
+    return nodes;
+  } });
+  return _jsxs("div", { id: listboxId, ref: overlayRef, "data-select-overlay": true, className: cx.call(undefined, overlayStyle, popupClassName), role: "listbox", "aria-multiselectable": multiple || undefined, "aria-disabled": disabled || undefined, children: [_jsx("div", { "aria-hidden": "true", "data-select-option-measure": "", className: cx(optionStyle, measureStyle), children: "M" }), dropdownRender ? dropdownRender(menu) : menu] });
+};
+export default SelectOverlay;

package/esm/_wake/src/selectOverlay.styles.mjs

@@ -0,0 +1,19 @@
+import { TokenVars as checkboxVars } from "@crab-dev/rc-checkbox";
+import { TokenVars as spinVars } from "@crab-dev/rc-spin";
+import token from "./token.mjs";
+export const overlayStyle = "rc-select-2b62562b9766";
+export const optionStyle = "rc-select-4c26800476b7";
+export const optionHighlightStyle = "rc-select-868bf53a2d33";
+export const measureStyle = "rc-select-f4efdbe79bde";
+export const optionSelectedStyle = "rc-select-dca4819751f4";
+export const optionSelectedSingleStyle = "rc-select-b8e7cfd3837c";
+export const optionDisabledStyle = "rc-select-fd6a969fdc3f";
+export const optionLabelStyle = "rc-select-d58ef5724e7d";
+export const checkIconStyle = "rc-select-bbb208831319";
+export const checkboxIndicatorStyle = "rc-select-52f500f177fc";
+export const emptyStyle = "rc-select-e84bd23bdc99";
+export const groupLabelStyle = "rc-select-3ce923bc7749";
+export const groupedOptionStyle = "rc-select-16181d2683cf";
+export const virtualTopSpacerStyle = "rc-select-7804943b918e";
+export const virtualBottomSpacerStyle = "rc-select-86002077b8c2";
+export const loadingStyle = "rc-select-3809e79e5752";