@crab-dev/rc-select 0.0.3 → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,59 @@
+# @crab-dev/rc-select
+
+## 0.1.0
+
+### Minor Changes
+
+- [`d11001f`](https://github.com/hotlif/crab-dev/commit/d11001fa35d4af4f53d0571c074de4b3e9806903) Thanks [@hotlif](https://github.com/hotlif)! - Rebuild the component library around a single package inventory, independent architecture and usage classifications, and three design systems: MD3 Expressive (md3), Apple (apple), and shadcn/ui (shadcn).
+  
+  This is a breaking pre-1.0 migration: unify controlled/uncontrolled values, selection callbacks, component APIs, sizes, and density contracts; replace legacy theme identifiers and remove old API aliases. Only stored browser appearance preferences are migrated automatically.
+  
+  Declare required React/ReactDOM ^19.2.0 peers through runtime dependency chains while retaining development dependencies. Correct runtime token dependencies, public/internal exports, strict declaration consumption, and independent offline PnP package verification.
+  
+  Correct RTL layout and overlay placement, field validation placement, embedded editor composition and focus, native virtual-scroll synchronization, and composed button feedback. Define independent multiline field geometry and preserve all eight configuration axes across controlled previews and PDF Web Components. Built-in error messages follow locale without replacing application-owned error data.
+  
+  Restore compiled focus and disabled styles by using valid CSS template comments, keep Tree focus indicators inside measured containers and above selected row backgrounds, accommodate localized color-channel labels, preserve physical Table column geometry with RTL content, and accept PDF byte sources from iframe realms without treating them as URLs. Respect reduced motion in the property-driven Canvas animation example and let the pill Tabs example inherit the configured size.
+  
+  Follow .website/docs/guides/migration.mdx before upgrading. All affected packages remain experimental; minor bumps represent the coordinated pre-1.0 breaking release and do not declare a stable 1.0 contract.
+
+### Patch Changes
+
+- [`ec1f759`](https://github.com/hotlif/crab-dev/commit/ec1f759d51a83a456b4eb7f608f2e4908d4d46da) Thanks [@hotlif](https://github.com/hotlif)! - 补齐选择、导航和浮层的三体系规格、公开示例与包内 Playwright 状态矩阵，覆盖真实键盘、Portal 配置与草稿保留。颜色面板的轨道、宽度与操作间距归入组件令牌，窄屏操作区支持换行，强制颜色下保留清晰的触发器焦点边界。
+  
+  恢复颜色选择器公开的 showEyeDropper 屏幕取色入口，按所属浏览器能力显示，取消或拒绝不改值，卸载中止原生取色会话。
+  
+  补充水平与折叠菜单真实展开、Dialog 确认/取消 pending 动态场景，以及 Drawer 包公开的 iframe/Shadow DOM 组合示例；分别记录共享底层回归与真实浏览器验收范围，保留未运行、未复审部分。
+
+- [`d11001f`](https://github.com/hotlif/crab-dev/commit/d11001fa35d4af4f53d0571c074de4b3e9806903) Thanks [@hotlif](https://github.com/hotlif)! - Restore focus after an accepted keyboard tab close, position Select popups outside their own supporting text, preserve design-specific disabled placeholders, and keep menu focus and color trigger feedback visible. Fix the appointment dialog example to retain Form's grid layout.
+  
+  Register dropdown Escape layers when delayed Portal elements actually mount, and preserve explicit close reasons and native events through consumer dispatch.
+  
+  Use the date placeholder for the appointment form's empty state instead of presenting a fake selected value.
+- Updated dependencies [[`d11001f`](https://github.com/hotlif/crab-dev/commit/d11001fa35d4af4f53d0571c074de4b3e9806903), [`ec1f759`](https://github.com/hotlif/crab-dev/commit/ec1f759d51a83a456b4eb7f608f2e4908d4d46da), [`ec1f759`](https://github.com/hotlif/crab-dev/commit/ec1f759d51a83a456b4eb7f608f2e4908d4d46da), [`d11001f`](https://github.com/hotlif/crab-dev/commit/d11001fa35d4af4f53d0571c074de4b3e9806903), [`d11001f`](https://github.com/hotlif/crab-dev/commit/d11001fa35d4af4f53d0571c074de4b3e9806903), [`d11001f`](https://github.com/hotlif/crab-dev/commit/d11001fa35d4af4f53d0571c074de4b3e9806903), [`ec1f759`](https://github.com/hotlif/crab-dev/commit/ec1f759d51a83a456b4eb7f608f2e4908d4d46da), [`d11001f`](https://github.com/hotlif/crab-dev/commit/d11001fa35d4af4f53d0571c074de4b3e9806903), [`ec1f759`](https://github.com/hotlif/crab-dev/commit/ec1f759d51a83a456b4eb7f608f2e4908d4d46da), [`ec1f759`](https://github.com/hotlif/crab-dev/commit/ec1f759d51a83a456b4eb7f608f2e4908d4d46da), [`ec1f759`](https://github.com/hotlif/crab-dev/commit/ec1f759d51a83a456b4eb7f608f2e4908d4d46da), [`ec1f759`](https://github.com/hotlif/crab-dev/commit/ec1f759d51a83a456b4eb7f608f2e4908d4d46da), [`d11001f`](https://github.com/hotlif/crab-dev/commit/d11001fa35d4af4f53d0571c074de4b3e9806903), [`d11001f`](https://github.com/hotlif/crab-dev/commit/d11001fa35d4af4f53d0571c074de4b3e9806903), [`d11001f`](https://github.com/hotlif/crab-dev/commit/d11001fa35d4af4f53d0571c074de4b3e9806903), [`d11001f`](https://github.com/hotlif/crab-dev/commit/d11001fa35d4af4f53d0571c074de4b3e9806903), [`d11001f`](https://github.com/hotlif/crab-dev/commit/d11001fa35d4af4f53d0571c074de4b3e9806903), [`ec1f759`](https://github.com/hotlif/crab-dev/commit/ec1f759d51a83a456b4eb7f608f2e4908d4d46da)]:
+  - @crab-dev/rc-dropdown-container@0.1.0
+  - @crab-dev/rc-hooks@0.1.0
+  - @crab-dev/rc-tag@0.1.0
+  - @crab-dev/rc-button@1.0.0
+  - @crab-dev/rc-checkbox@0.1.0
+  - @crab-dev/rc-config-provider@0.1.0
+  - @crab-dev/rc-line-edit@0.1.0
+  - @crab-dev/rc-spin@0.1.0
+  - @crab-dev/rc-token-semantic@1.0.0
+  - @crab-dev/rc-virtual@0.2.0
+
+## 0.0.5
+
+### Patch Changes
+
+- [`3a32293`](https://github.com/hotlif/crab-dev/commit/3a32293c30ac0e77d5f0a6fa0e2173e9293cd462) Thanks [@hotlif](https://github.com/hotlif)! - Use cached axis metrics, binary-search range lookup, configurable overscan, and animation-frame coalescing to reduce virtual scrolling work.
+
+- [`01b9bde`](https://github.com/hotlif/crab-dev/commit/01b9bde4201bf08eced59f222a53bb3d018460e3) Thanks [@hotlif](https://github.com/hotlif)! - Remove the extra leading line box before the first virtualized select option.
+- Updated dependencies [[`35d5f5a`](https://github.com/hotlif/crab-dev/commit/35d5f5ab65b8e038d34e1c889de56e1aecad53d0), [`3a32293`](https://github.com/hotlif/crab-dev/commit/3a32293c30ac0e77d5f0a6fa0e2173e9293cd462), [`f991b0e`](https://github.com/hotlif/crab-dev/commit/f991b0eede1ead4d70534302bd51f47b0a4ab143)]:
+  - @crab-dev/rc-button@0.0.3
+  - @crab-dev/rc-virtual@0.1.4
+  - @crab-dev/rc-dropdown-container@0.0.5
+  - @crab-dev/rc-line-edit@0.0.5
+  - @crab-dev/rc-spin@0.0.4
+  - @crab-dev/rc-checkbox@0.0.4
+  - @crab-dev/rc-config-provider@0.0.2
+  - @crab-dev/rc-tag@0.0.3

package/README.md

@@ -1,20 +1,15 @@
-下拉选择器，支持单选、多选和搜索
+# @crab-dev/rc-select
 
-## ✨ 特性
+在下拉列表中选择一个或多个值，支持搜索选项。
 
-- 提供下拉选择能力，适用于结构化选项录入
-- 支持在有限空间内高效完成选项检索与选择
-- 适用于表单字段、筛选面板与配置项编辑
-- 当前版本：`0.0.1`
-- 示例数量：`10` 个 Demo
-- 主题能力：支持 Design Token（token.toml）
+## 主要功能
 
-## 🔨 使用示例
+- 支持单选、多选、搜索过滤和禁用选项。
+- 提供受控与非受控用法，适用于表单和筛选面板。
 
-<demos />
+## 文档
 
-## API
+- [使用说明与 API](./docs/index.mdx)
+- [示例源码](./docs/demos/)
 
-<api />
-
-> 其余原生属性按底层实现透传，详见 API。
+在当前包目录运行 `yarn start` 可打开组件工作台，查看交互示例。

package/cjs/_wake/src/hooks/useKeyboardNavigation.cjs

@@ -0,0 +1,40 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const __wake_namespace_0 = require("react");
+;
+;
+const useKeyboardNavigation = ({ filteredOptions, open }) => {
+  const [highlightIndex, setHighlightIndex] = (0, __wake_namespace_0["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 };
+};
+const __wake_default_export = useKeyboardNavigation;
+Object.defineProperty(exports, "default", { enumerable: true, get: function() {
+  return __wake_default_export;
+} });

package/cjs/_wake/src/select.cjs

@@ -0,0 +1,155 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const __wake_namespace_0 = require("react/jsx-runtime");
+const __wake_namespace_1 = require("@crab-dev/rc-config-provider");
+const __wake_namespace_2 = require("@crab-dev/rc-dropdown-container");
+const __wake_namespace_3 = require("@crab-dev/rc-dropdown-container/internal");
+require("@crab-dev/rc-token-semantic");
+const __wake_namespace_4 = require("react");
+;
+const __wake_namespace_5 = require("@crab-dev/rc-hooks");
+const __wake_namespace_6 = require("./hooks/useKeyboardNavigation.cjs");
+const __wake_namespace_7 = require("./selectInput.cjs");
+const __wake_namespace_8 = require("./selectOverlay.cjs");
+require("./token.cjs");
+;
+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 = (0, __wake_namespace_3["useDropdownPositionReference"])();
+  return (0, __wake_namespace_0["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 = (0, __wake_namespace_1["useComponentSize"])(sizeProp);
+  const { messages } = (0, __wake_namespace_1["useLocale"])();
+  const listboxId = (0, __wake_namespace_4["useId"])();
+  const generatedId = (0, __wake_namespace_4["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] = (0, __wake_namespace_4["useState"])("");
+  const [selectedValues, setSelectedValues] = (0, __wake_namespace_5["useControllableValue"])({ value: value !== undefined ? asArray(value) : undefined, defaultValue: asArray(defaultValue) });
+  const [triggerWidth, setTriggerWidth] = (0, __wake_namespace_4["useState"])(0);
+  const controlRef = (0, __wake_namespace_4["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 } = (0, __wake_namespace_6 && __wake_namespace_6.__esModule ? __wake_namespace_6.default : __wake_namespace_6)({ 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 (0, __wake_namespace_0["jsx"])(__wake_namespace_2 && __wake_namespace_2.__esModule ? __wake_namespace_2.default : __wake_namespace_2, { ...openProps, onOpenChange: emitOpenChange, size: size, ...restProps, className: className, overlay: (0, __wake_namespace_0["jsx"])(__wake_namespace_8 && __wake_namespace_8.__esModule ? __wake_namespace_8.default : __wake_namespace_8, { 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: (0, __wake_namespace_0["jsxs"])(SelectField, { children: [(0, __wake_namespace_0["jsx"])(__wake_namespace_7 && __wake_namespace_7.__esModule ? __wake_namespace_7.default : __wake_namespace_7, { 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 && (0, __wake_namespace_0["jsx"])("div", { id: descriptionId, className: supportingStyle, "data-status": fieldStatus, role: errorText ? "alert" : undefined, children: description })] }) });
+}
+;
+const __wake_default_export = Select;
+Object.defineProperty(exports, "default", { enumerable: true, get: function() {
+  return __wake_default_export;
+} });

package/cjs/_wake/src/selectInput.cjs

@@ -0,0 +1,205 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const __wake_namespace_0 = require("react/jsx-runtime");
+const __wake_namespace_1 = require("@crab-dev/rc-dropdown-container");
+const __wake_namespace_2 = require("@crab-dev/rc-line-edit");
+const __wake_namespace_3 = require("@crab-dev/rc-button");
+const __wake_namespace_4 = require("@crab-dev/rc-spin");
+const __wake_namespace_5 = require("@crab-dev/rc-tag");
+const __wake_namespace_6 = require("@crab-dev/css");
+const __wake_namespace_7 = require("@crab-dev/rc-config-provider");
+const __wake_namespace_8 = require("react");
+require("./token.cjs");
+;
+const __wake_namespace_9 = require("./selectInput.styles.cjs");
+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 = () => (0, __wake_namespace_0["jsx"])("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", fill: "currentColor", children: (0, __wake_namespace_0["jsx"])("path", { d: "m7 10 5 5 5-5z" }) });
+const ClearIcon = () => (0, __wake_namespace_0["jsx"])("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, __wake_namespace_0["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 } = (0, __wake_namespace_1["useDropdownContext"])();
+  const { messages } = (0, __wake_namespace_7["useLocale"])();
+  const inputRef = (0, __wake_namespace_8["useRef"])(null);
+  const open = state.open;
+  const [hovered, setHovered] = (0, __wake_namespace_8["useState"])(false);
+  const [actionFocused, setActionFocused] = (0, __wake_namespace_8["useState"])(false);
+  const [withoutHover, setWithoutHover] = (0, __wake_namespace_8["useState"])(false);
+  (0, __wake_namespace_8["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 = (0, __wake_namespace_8["useEffectEvent"])(onOpenStateChange);
+  const mergeRef = (0, __wake_namespace_8["useCallback"])((node) => {
+    controlRef.current = node;
+    if (typeof refs.setReference === "function") {
+      refs.setReference(node);
+    }
+    setRef(ref, node);
+  }, [refs.setReference, ref, controlRef]);
+  (0, __wake_namespace_8["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]);
+  (0, __wake_namespace_8["useEffect"])(() => {
+    if (open && searchable && !disabled) {
+      queueMicrotask(() => inputRef.current?.focus());
+    }
+  }, [disabled, open, searchable]);
+  (0, __wake_namespace_8["useEffect"])(() => {
+    if (autoFocus && !disabled && controlRef.current) {
+      controlRef.current.focus();
+    }
+  }, [autoFocus, disabled]);
+  (0, __wake_namespace_8["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 (0, __wake_namespace_0["jsx"])("span", { children: tagRender(opt, handleClose) }, opt.value);
+    }
+    return (0, __wake_namespace_0["jsx"])(__wake_namespace_5 && __wake_namespace_5.__esModule ? __wake_namespace_5.default : __wake_namespace_5, { size: "small", closable: !disabled, closeAriaLabel: messages.select.removeTag(typeof opt.label === "string" ? opt.label : opt.value), onClose: handleClose, children: (0, __wake_namespace_0["jsx"])("span", { className: __wake_namespace_9["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 (0, __wake_namespace_0["jsxs"])(__wake_namespace_0["Fragment"], { children: [visible.map(renderTag), (0, __wake_namespace_0["jsxs"])(__wake_namespace_5 && __wake_namespace_5.__esModule ? __wake_namespace_5.default : __wake_namespace_5, { size: "small", children: ["+", overflowCount] })] });
+    }
+    return selectedOptions.map(renderTag);
+  };
+  const renderContent = () => {
+    if (searchable && open) {
+      return (0, __wake_namespace_0["jsxs"])(__wake_namespace_0["Fragment"], { children: [multiple && renderTags(), (0, __wake_namespace_0["jsx"])(__wake_namespace_2 && __wake_namespace_2.__esModule ? __wake_namespace_2.default : __wake_namespace_2, { 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: __wake_namespace_9["searchInputStyle"] })] });
+    }
+    if (multiple) {
+      if (selectedOptions.length === 0) {
+        return (0, __wake_namespace_0["jsx"])("span", { "data-role": "select-placeholder", className: __wake_namespace_9["placeholderStyle"], children: placeholder });
+      }
+      return renderTags();
+    }
+    if (selectedOptions.length === 0) {
+      return (0, __wake_namespace_0["jsx"])("span", { "data-role": "select-placeholder", className: __wake_namespace_9["placeholderStyle"], children: placeholder });
+    }
+    return (0, __wake_namespace_0["jsx"])("span", { className: __wake_namespace_9["singleValueStyle"], children: selectedOptions[0]?.label });
+  };
+  const activeDescendantId = open && highlightIndex >= 0 ? `${listboxId}-option-${highlightIndex}` : undefined;
+  return (0, __wake_namespace_0["jsxs"])("div", { className: __wake_namespace_9["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 && (0, __wake_namespace_0["jsxs"])("span", { "data-role": "select-label", children: [(0, __wake_namespace_0["jsx"])("span", { id: labelId, children: label }), required && (0, __wake_namespace_0["jsx"])("span", { "data-required-marker": "", "aria-hidden": "true", children: "*" })] }), (0, __wake_namespace_0["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: __wake_namespace_6["cx"].call(undefined, __wake_namespace_9["controlStyle"], sizeMetricsMap[size], multiple ? sizeHeightFlexibleMap[size] : sizeHeightFixedMap[size], disabled && __wake_namespace_9["controlDisabledStyle"], status === "error" && __wake_namespace_9["controlErrorStyle"], status === "warning" && __wake_namespace_9["controlWarningStyle"], __wake_namespace_9["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" && (0, __wake_namespace_0["jsx"])("fieldset", { "aria-hidden": "true", children: (0, __wake_namespace_0["jsxs"])("legend", { children: [label, required ? " *" : ""] }) }), (0, __wake_namespace_0["jsx"])("div", { "data-role": "select-value", className: __wake_namespace_9["valueWrapStyle"], children: renderContent() }), (0, __wake_namespace_0["jsxs"])("span", { "data-role": "select-suffix", className: __wake_namespace_9["suffixWrapStyle"], children: [loading ? (0, __wake_namespace_0["jsx"])("span", { "aria-hidden": "true", className: __wake_namespace_9["loadingIconStyle"], children: (0, __wake_namespace_0["jsx"])(__wake_namespace_4["SpinIndicator"], {}) }) : null, (0, __wake_namespace_0["jsx"])(__wake_namespace_3 && __wake_namespace_3.__esModule ? __wake_namespace_3.default : __wake_namespace_3, { "data-role": showClear ? "select-clear" : "select-caret", className: __wake_namespace_9["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 ? (0, __wake_namespace_0["jsx"])(ClearIcon, {}) : (0, __wake_namespace_0["jsx"])("span", { "aria-hidden": "true", className: __wake_namespace_6["cx"].call(undefined, __wake_namespace_9["caretStyle"], open && __wake_namespace_9["caretOpenStyle"]), children: (0, __wake_namespace_0["jsx"])(CaretIcon, {}) }), onFocus: () => setActionFocused(true), onBlur: () => setActionFocused(false), onClick: (event) => {
+    if (showClear) handleClearClick(event); else {
+      event.stopPropagation();
+      handleClick();
+    }
+  }, onKeyDown: handleClearKeyDown })] })] })] });
+};
+const __wake_default_export = SelectInput;
+Object.defineProperty(exports, "default", { enumerable: true, get: function() {
+  return __wake_default_export;
+} });

package/cjs/_wake/src/selectInput.styles.cjs

@@ -0,0 +1,69 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@crab-dev/rc-button");
+require("@crab-dev/rc-spin");
+require("@crab-dev/rc-token-semantic");
+require("./token.cjs");
+const controlStyle = "rc-select-5e896678dc89";
+Object.defineProperty(exports, "controlStyle", { enumerable: true, get: function() {
+  return controlStyle;
+} });
+const fieldControlStyle = "rc-select-29edc097b42b";
+Object.defineProperty(exports, "fieldControlStyle", { enumerable: true, get: function() {
+  return fieldControlStyle;
+} });
+const fieldLayoutStyle = "rc-select-910e459fbbe0";
+Object.defineProperty(exports, "fieldLayoutStyle", { enumerable: true, get: function() {
+  return fieldLayoutStyle;
+} });
+const controlDisabledStyle = "rc-select-82fbf3807561";
+Object.defineProperty(exports, "controlDisabledStyle", { enumerable: true, get: function() {
+  return controlDisabledStyle;
+} });
+const controlErrorStyle = "rc-select-6d2a034155e7";
+Object.defineProperty(exports, "controlErrorStyle", { enumerable: true, get: function() {
+  return controlErrorStyle;
+} });
+const controlWarningStyle = "rc-select-36466465840d";
+Object.defineProperty(exports, "controlWarningStyle", { enumerable: true, get: function() {
+  return controlWarningStyle;
+} });
+const valueWrapStyle = "rc-select-f0b8a9c0c369";
+Object.defineProperty(exports, "valueWrapStyle", { enumerable: true, get: function() {
+  return valueWrapStyle;
+} });
+const singleValueStyle = "rc-select-bcd33343d38d";
+Object.defineProperty(exports, "singleValueStyle", { enumerable: true, get: function() {
+  return singleValueStyle;
+} });
+const placeholderStyle = "rc-select-30719d992205";
+Object.defineProperty(exports, "placeholderStyle", { enumerable: true, get: function() {
+  return placeholderStyle;
+} });
+const searchInputStyle = "rc-select-c91210473c12";
+Object.defineProperty(exports, "searchInputStyle", { enumerable: true, get: function() {
+  return searchInputStyle;
+} });
+const caretStyle = "rc-select-8ca15a371517";
+Object.defineProperty(exports, "caretStyle", { enumerable: true, get: function() {
+  return caretStyle;
+} });
+const caretOpenStyle = "rc-select-72a72768a0ef";
+Object.defineProperty(exports, "caretOpenStyle", { enumerable: true, get: function() {
+  return caretOpenStyle;
+} });
+const tagLabelStyle = "rc-select-113a9493f812";
+Object.defineProperty(exports, "tagLabelStyle", { enumerable: true, get: function() {
+  return tagLabelStyle;
+} });
+const suffixWrapStyle = "rc-select-5032f5885db7";
+Object.defineProperty(exports, "suffixWrapStyle", { enumerable: true, get: function() {
+  return suffixWrapStyle;
+} });
+const actionStyle = "rc-select-aa51540f6a1a";
+Object.defineProperty(exports, "actionStyle", { enumerable: true, get: function() {
+  return actionStyle;
+} });
+const loadingIconStyle = "rc-select-14f1c2e4ccd5";
+Object.defineProperty(exports, "loadingIconStyle", { enumerable: true, get: function() {
+  return loadingIconStyle;
+} });