@crab-dev/rc-select 0.0.5 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,62 @@
 # @crab-dev/rc-select
 
+## 0.1.1
+
+### Patch Changes
+
+- [#22](https://github.com/hotlif/crab-dev/pull/22) [`20064d5`](https://github.com/hotlif/crab-dev/commit/20064d52b3442bda7eef16ca9045d9746cb28fce) Thanks [@hotlif](https://github.com/hotlif)! - 精修三体系控件反馈：浮动标签、分段标记及文字位置连续过渡，分离开关各部件与滑块光晕的空间和颜色反馈，将零散时序集中到组件令牌。保留开关 root.transition 覆盖，减少动画时保留必要的焦点、选中与加载反馈。
+
+- [#22](https://github.com/hotlif/crab-dev/pull/22) [`8f0ac0d`](https://github.com/hotlif/crab-dev/commit/8f0ac0dada263e35783626524c69509c64e39d96) Thanks [@hotlif](https://github.com/hotlif)! - Keep the popup indicator out of the page Tab sequence so keyboard users move directly between fields. Preserve the independent clear action's keyboard access.
+- Updated dependencies [[`8f0ac0d`](https://github.com/hotlif/crab-dev/commit/8f0ac0dada263e35783626524c69509c64e39d96), [`ab93160`](https://github.com/hotlif/crab-dev/commit/ab93160f53925f875c66bfabf871766e9e919af3), [`8f0ac0d`](https://github.com/hotlif/crab-dev/commit/8f0ac0dada263e35783626524c69509c64e39d96), [`8f0ac0d`](https://github.com/hotlif/crab-dev/commit/8f0ac0dada263e35783626524c69509c64e39d96), [`cb1361d`](https://github.com/hotlif/crab-dev/commit/cb1361d1e5fec7f6f73a10b48883d698aad729bd), [`8f0ac0d`](https://github.com/hotlif/crab-dev/commit/8f0ac0dada263e35783626524c69509c64e39d96), [`20064d5`](https://github.com/hotlif/crab-dev/commit/20064d52b3442bda7eef16ca9045d9746cb28fce), [`8f0ac0d`](https://github.com/hotlif/crab-dev/commit/8f0ac0dada263e35783626524c69509c64e39d96), [`8f0ac0d`](https://github.com/hotlif/crab-dev/commit/8f0ac0dada263e35783626524c69509c64e39d96)]:
+  - @crab-dev/rc-token-semantic@1.0.1
+  - @crab-dev/rc-dropdown-container@0.1.1
+  - @crab-dev/rc-config-provider@0.1.1
+  - @crab-dev/rc-line-edit@0.1.1
+  - @crab-dev/rc-hooks@0.1.1
+  - @crab-dev/rc-button@1.0.1
+  - @crab-dev/rc-spin@0.1.1
+
+## 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

package/cjs/_wake/src/select.cjs

@@ -2,11 +2,14 @@ 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("react");
-const __wake_namespace_4 = require("@crab-dev/rc-hooks");
-const __wake_namespace_5 = require("./hooks/useKeyboardNavigation.cjs");
-const __wake_namespace_6 = require("./selectInput.cjs");
-const __wake_namespace_7 = require("./selectOverlay.cjs");
+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);
@@ -61,26 +64,30 @@ const filterOptions = (flatOptions, searchable, searchText) => {
 const firstEnabledIndex = (flatOptions) => flatOptions.findIndex((opt) => !opt.disabled && !opt.isGroupLabel);
 const fieldStyle = "rc-select-0f3ecf945b98";
 const supportingStyle = "rc-select-3bd2a27273ad";
-const 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, onChange, onOpenChange, onFocus, onBlur, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...restProps }) => {
+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 listboxId = (0, __wake_namespace_3["useId"])();
-  const generatedId = (0, __wake_namespace_3["useId"])();
+  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_3["useState"])("");
-  const [selectedValues, setSelectedValues] = (0, __wake_namespace_4["useControllableValue"])({ value: value !== undefined ? asArray(value) : undefined, defaultValue: asArray(defaultValue) });
-  const [triggerWidth, setTriggerWidth] = (0, __wake_namespace_3["useState"])(0);
-  const onOpenChangeRef = (0, __wake_namespace_3["useRef"])(onOpenChange);
-  onOpenChangeRef.current = onOpenChange;
+  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_5 && __wake_namespace_5.__esModule ? __wake_namespace_5.default : __wake_namespace_5)({ filteredOptions, open: true });
-  const emitOpenChange = (nextOpen) => {
+  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]);
@@ -90,49 +97,58 @@ const Select = ({ ref, id, options, placeholder = "请选择", disabled = false,
       setSearchText("");
       resetHighlight();
     }
-    onOpenChangeRef.current?.(nextOpen);
   };
-  const updateValue = (nextValues) => {
+  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));
-      onChange?.(nextValues, nextOptions);
+      onValueChange?.(nextValues, { reason, options: nextOptions, event });
       return;
     }
     const nextValue = nextValues[0] ?? null;
     const nextOption = allPlainOptions.find((opt) => opt.value === nextValue);
-    onChange?.(nextValue, nextOption);
+    onValueChange?.(nextValue, { reason, option: nextOption, options: nextOption ? [nextOption] : [], event });
   };
-  const handleOptionSelect = (option) => {
-    if (option.disabled || option.isGroupLabel) {
+  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);
+      updateValue(nextValues, exists ? "deselect" : "select", event);
       return;
     }
-    updateValue([option.value]);
+    controlRef.current?.focus();
+    updateValue([option.value], "select", event);
   };
-  const handleClear = () => {
-    updateValue([]);
+  const handleClear = (event) => {
+    if (disabled) return;
+    updateValue([], "clear", event);
     setSearchText("");
   };
-  const handleRemoveTag = (val) => {
-    updateValue(selectedValues.filter((v) => v !== val));
+  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, { size: size, ...restProps, className: className, overlay: (0, __wake_namespace_0["jsx"])(__wake_namespace_7 && __wake_namespace_7.__esModule ? __wake_namespace_7.default : __wake_namespace_7, { multiple: multiple, loading: loading, filteredOptions: filteredOptions, selectedValues: selectedValues, triggerWidth: triggerWidth, highlightIndex: highlightIndex, listboxId: listboxId, notFoundContent: notFoundContent, popupClassName: popupClassName, optionRender: optionRender, dropdownRender: dropdownRender, onOptionSelect: handleOptionSelect, onOpenChange: emitOpenChange, onHighlightChange: setHighlightIndex }), floatingContainerProps: { style: floatingStyle }, children: (0, __wake_namespace_0["jsxs"])("div", { className: fieldStyle, children: [(0, __wake_namespace_0["jsx"])(__wake_namespace_6 && __wake_namespace_6.__esModule ? __wake_namespace_6.default : __wake_namespace_6, { ref: ref, 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, selectedOptions: selectedOptions, searchText: searchText, highlightIndex: highlightIndex, highlightedOption: highlightedOption, listboxId: listboxId, tagRender: tagRender, onSearchTextChange: handleSearchTextChange, onOpenChange: emitOpenChange, 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, children: description })] }) });
-};
+  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

@@ -6,9 +6,11 @@ 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("react");
+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);
@@ -16,37 +18,22 @@ const setRef = (ref, node) => {
     ref.current = node;
   }
 };
-const controlStyle = "rc-select-208f8e064cef";
-const materialFieldStyle = "rc-select-de4f87d60f05";
-const fieldLabelStyle = "rc-select-608ca49a02dc";
-const controlDisabledStyle = "rc-select-238e884e6a17";
-const controlErrorStyle = "rc-select-e0726e9ad481";
-const controlWarningStyle = "rc-select-79b739b32fcb";
-const valueWrapStyle = "rc-select-1356dfc74a7f";
-const singleValueStyle = "rc-select-52cbc5cc4f0f";
-const placeholderStyle = "rc-select-37ce25dfcd13";
-const searchInputStyle = "rc-select-50dd3c70bcdc";
-const caretStyle = "rc-select-d7edabfe7361";
-const caretOpenStyle = "rc-select-30173f5e3d41";
-const tagLabelStyle = "rc-select-2e4337f305d8";
-const suffixWrapStyle = "rc-select-ee9f2054c459";
-const actionStyle = "rc-select-8504d95b52bc";
-const loadingIconStyle = "rc-select-3ab2c2f8c427";
-const sizeMetricsMap = { large: "rc-select-df4a743b55e1", middle: "rc-select-de4a743b542e", small: "rc-select-dd4a743b527b" };
-const sizeHeightFixedMap = { large: "rc-select-b8fc5925a597", middle: "rc-select-b7fc5925a3e4", small: "rc-select-bafc5925a8fd" };
-const sizeHeightFlexibleMap = { large: "rc-select-5d07f79a2f4a", middle: "rc-select-5e07f79a30fd", small: "rc-select-5b07f79a2be4" };
+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, 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, onOpenChange, onWidthChange, onMoveHighlight, onSelectHighlighted, onClear, onRemoveTag, onFocus, onBlur }) => {
+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 controlRef = (0, __wake_namespace_7["useRef"])(null);
-  const inputRef = (0, __wake_namespace_7["useRef"])(null);
+  const { messages } = (0, __wake_namespace_7["useLocale"])();
+  const { designSystem } = (0, __wake_namespace_7["useConfig"])();
+  const inputRef = (0, __wake_namespace_8["useRef"])(null);
   const open = state.open;
-  const [hovered, setHovered] = (0, __wake_namespace_7["useState"])(false);
-  const [actionFocused, setActionFocused] = (0, __wake_namespace_7["useState"])(false);
-  const [withoutHover, setWithoutHover] = (0, __wake_namespace_7["useState"])(false);
-  (0, __wake_namespace_7["useEffect"])(() => {
+  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);
@@ -54,16 +41,15 @@ const SelectInput = ({ ref, id, ariaLabel, ariaLabelledBy, ariaDescribedBy, disa
     media.addEventListener("change", update);
     return () => media.removeEventListener("change", update);
   }, []);
-  const onOpenChangeRef = (0, __wake_namespace_7["useRef"])(onOpenChange);
-  onOpenChangeRef.current = onOpenChange;
-  const mergeRef = (0, __wake_namespace_7["useCallback"])((node) => {
+  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]);
-  (0, __wake_namespace_7["useEffect"])(() => {
+  }, [refs.setReference, ref, controlRef]);
+  (0, __wake_namespace_8["useEffect"])(() => {
     const el = controlRef.current;
     if (!el) {
       return;
@@ -76,23 +62,18 @@ const SelectInput = ({ ref, id, ariaLabel, ariaLabelledBy, ariaDescribedBy, disa
     observer.observe(el);
     return () => observer.disconnect();
   }, [onWidthChange]);
-  (0, __wake_namespace_7["useEffect"])(() => {
-    if (open && searchable) {
+  (0, __wake_namespace_8["useEffect"])(() => {
+    if (open && searchable && !disabled) {
       queueMicrotask(() => inputRef.current?.focus());
     }
-  }, [open, searchable]);
-  (0, __wake_namespace_7["useEffect"])(() => {
-    if (autoFocus && controlRef.current) {
+  }, [disabled, open, searchable]);
+  (0, __wake_namespace_8["useEffect"])(() => {
+    if (autoFocus && !disabled && controlRef.current) {
       controlRef.current.focus();
     }
-  }, [autoFocus]);
-  const isFirstOpenRender = (0, __wake_namespace_7["useRef"])(true);
-  (0, __wake_namespace_7["useEffect"])(() => {
-    if (isFirstOpenRender.current) {
-      isFirstOpenRender.current = false;
-      return;
-    }
-    onOpenChangeRef.current(open);
+  }, [autoFocus, disabled]);
+  (0, __wake_namespace_8["useEffect"])(() => {
+    syncOpen(open);
   }, [open]);
   const handleClick = () => {
     if (disabled) {
@@ -122,7 +103,7 @@ const SelectInput = ({ ref, id, ariaLabel, ariaLabelledBy, ariaDescribedBy, disa
       case "Enter":
         e.preventDefault();
         if (open && highlightedOption) {
-          onSelectHighlighted(highlightedOption);
+          onSelectHighlighted(highlightedOption, e);
           if (!multiple) {
             dispatch({ type: "setOpen", payload: false });
           }
@@ -141,29 +122,30 @@ const SelectInput = ({ ref, id, ariaLabel, ariaLabelledBy, ariaDescribedBy, disa
       case "Escape":
         if (open) {
           e.preventDefault();
-          dispatch({ type: "setOpen", payload: false });
+          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);
+          onRemoveTag(lastOption.value, e);
         }
         break;
       default:
         break;
     }
   };
-  const triggerClear = () => {
+  const triggerClear = (event) => {
     controlRef.current?.focus();
-    onClear();
+    onClear(event);
     if (open) {
       dispatch({ type: "setOpen", payload: false });
     }
   };
   const handleClearClick = (e) => {
     e.stopPropagation();
-    triggerClear();
+    triggerClear(e);
   };
   const handleClearKeyDown = (e) => {
     if (e.key === "Enter" || e.key === " ") {
@@ -173,11 +155,13 @@ const SelectInput = ({ ref, id, ariaLabel, ariaLabelledBy, ariaDescribedBy, disa
   const canClear = allowClear && !disabled && selectedOptions.length > 0;
   const showClear = canClear && (hovered || actionFocused || withoutHover);
   const renderTag = (opt) => {
-    const handleClose = () => onRemoveTag(opt.value);
+    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: true, closeAriaLabel: `Remove ${typeof opt.label === "string" ? opt.label : opt.value}`, onClose: handleClose, children: (0, __wake_namespace_0["jsx"])("span", { className: tagLabelStyle, children: opt.label }) }, 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) {
@@ -189,32 +173,32 @@ const SelectInput = ({ ref, id, ariaLabel, ariaLabelledBy, ariaDescribedBy, disa
   };
   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, bordered: false, value: searchText, placeholder: multiple && selectedOptions.length > 0 ? "" : placeholder, onChange: (e) => onSearchTextChange(e.target.value), onClick: (e) => e.stopPropagation(), className: searchInputStyle })] });
+      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", { className: placeholderStyle, children: placeholder });
+        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", { className: placeholderStyle, children: placeholder });
+      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: singleValueStyle, children: selectedOptions[0]?.label });
+    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", { 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, controlStyle, sizeMetricsMap[size], multiple ? sizeHeightFlexibleMap[size] : sizeHeightFixedMap[size], disabled && controlDisabledStyle, status === "error" && controlErrorStyle, status === "warning" && controlWarningStyle, materialFieldStyle), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: onFocus, onBlur: onBlur, onPointerOver: (event) => {
+  return (0, __wake_namespace_0["jsxs"])("div", { className: __wake_namespace_6["cx"].call(undefined, __wake_namespace_9["fieldLayoutStyle"], designSystem === "md3" && __wake_namespace_9["md3LabelMotionStyle"]), "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 && (0, __wake_namespace_0["jsxs"])("span", { id: labelId, "data-role": "select-label", className: fieldLabelStyle, children: [label, required ? " *" : ""] }), (0, __wake_namespace_0["jsx"])("div", { "data-role": "select-value", className: valueWrapStyle, children: renderContent() }), (0, __wake_namespace_0["jsxs"])("span", { "data-role": "select-suffix", className: suffixWrapStyle, children: [loading ? (0, __wake_namespace_0["jsx"])("span", { "aria-hidden": "true", className: 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: actionStyle, type: "button", appearance: "text", shape: "circle", size: size, disabled: disabled, "aria-label": showClear ? "Clear" : open ? "Close options" : "Open options", "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, caretStyle, open && caretOpenStyle), children: (0, __wake_namespace_0["jsx"])(CaretIcon, {}) }), onFocus: () => setActionFocused(true), onBlur: () => setActionFocused(false), onClick: (event) => {
+  }, 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", tabIndex: canClear ? 0 : -1, 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 })] })] });
+  }, onKeyDown: handleClearKeyDown })] })] })] });
 };
 const __wake_default_export = SelectInput;
 Object.defineProperty(exports, "default", { enumerable: true, get: function() {

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

@@ -0,0 +1,73 @@
+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 md3LabelMotionStyle = "rc-select-1dddd2d985da";
+Object.defineProperty(exports, "md3LabelMotionStyle", { enumerable: true, get: function() {
+  return md3LabelMotionStyle;
+} });
+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;
+} });