@ifhover/leaf-ui 0.5.0 → 0.6.0

package/dist/esm/browser/modules/segmented/segmented.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented/segmented.js","sources":["../../../../../src/segmented/segmented.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode, useId, useRef } from 'react';\nimport { useLeafConfig } from '../config-provider/context';\nimport { useFormField } from '../form/form';\nimport { classes } from '../shared/classes';\nimport { FormValue, useFieldValue, useMergedRef } from '../shared/field';\nimport type { ControlSize } from '../shared/types';\nimport { useMovingIndicator } from '../tabs/use-moving-indicator';\nexport interface SegmentedOption {\n  value: string;\n  label: ReactNode;\n  icon?: ReactNode;\n  disabled?: boolean;\n}\nexport interface SegmentedProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  options: readonly (string | SegmentedOption)[];\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  disabled?: boolean;\n  size?: ControlSize;\n  block?: boolean;\n  name?: string;\n  form?: string;\n}\nexport const Segmented = forwardRef<HTMLDivElement, SegmentedProps>(function Segmented(\n  {\n    options,\n    value,\n    defaultValue,\n    onChange,\n    disabled: disabledProp,\n    size = 'md',\n    block = false,\n    name,\n    form,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const field = useFormField();\n  const { direction } = useLeafConfig();\n  const root = useRef<HTMLDivElement>(null);\n  const marker = useRef<HTMLSpanElement>(null);\n  const merged = useMergedRef(root, ref);\n  const disabled = disabledProp || field?.disabled;\n  const entries = options.map((option) =>\n    typeof option === 'string' ? { label: option, value: option } : option,\n  );\n  const first = entries.find((option) => !option.disabled)?.value ?? '';\n  const trigger = useRef<HTMLButtonElement>(null);\n  const [current, setCurrent] = useFieldValue(value, defaultValue ?? first, trigger, form);\n  useMovingIndicator(root, marker, '[aria-checked=\"true\"]', `${current}-${direction}`);\n  const id = useId();\n  return (\n    <div\n      {...props}\n      ref={merged}\n      role=\"radiogroup\"\n      aria-disabled={disabled || undefined}\n      className={classes(\n        'leaf-segmented',\n        `leaf-segmented--${size}`,\n        block && 'leaf-segmented--block',\n        className,\n      )}\n    >\n      <span ref={marker} className=\"leaf-segmented__indicator\" aria-hidden=\"true\" />\n      {entries.map((option, index) => (\n        // biome-ignore lint/a11y/useSemanticElements: Segmented buttons implement roving focus and radio-group selection with a shared form proxy.\n        <button\n          key={option.value}\n          type=\"button\"\n          ref={index === 0 ? trigger : undefined}\n          role=\"radio\"\n          data-leaf-indicator-item=\"\"\n          aria-checked={current === option.value}\n          disabled={disabled || option.disabled}\n          tabIndex={\n            current === option.value ||\n            (!entries.some((entry) => entry.value === current && !entry.disabled) &&\n              option.value === first)\n              ? 0\n              : -1\n          }\n          id={`${id}-${index}`}\n          onClick={() => {\n            setCurrent(option.value);\n            onChange?.(option.value);\n          }}\n          onKeyDown={(event) => {\n            const available = entries.filter((entry) => !entry.disabled);\n            const position = available.findIndex((entry) => entry.value === option.value);\n            const next =\n              event.key === 'Home'\n                ? available[0]\n                : event.key === 'End'\n                  ? available.at(-1)\n                  : ['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].includes(event.key)\n                    ? available[\n                        (position +\n                          (event.key === 'ArrowUp' ||\n                          event.key === (direction === 'rtl' ? 'ArrowRight' : 'ArrowLeft')\n                            ? -1\n                            : 1) +\n                          available.length) %\n                          available.length\n                      ]\n                    : undefined;\n            if (!next || disabled) return;\n            event.preventDefault();\n            setCurrent(next.value);\n            onChange?.(next.value);\n            document\n              .getElementById(`${id}-${entries.findIndex((entry) => entry.value === next.value)}`)\n              ?.focus();\n          }}\n        >\n          {option.icon && <span aria-hidden=\"true\">{option.icon}</span>}\n          {option.label}\n        </button>\n      ))}\n      {name && (\n        <FormValue\n          value={current}\n          name={name}\n          form={form}\n          disabled={disabled}\n          triggerRef={trigger}\n        />\n      )}\n    </div>\n  );\n});\n"],"names":["Segmented","forwardRef","options","value","defaultValue","onChange","disabledProp","size","block","name","form","className","props","ref","field","useFormField","direction","useLeafConfig","root","useRef","marker","merged","useMergedRef","disabled","entries","option","first","trigger","current","setCurrent","useFieldValue","useMovingIndicator","id","useId","undefined","classes","index","entry","event","available","position","next","document","FormValue"],"mappings":"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"}
+{"version":3,"file":"segmented/segmented.js","sources":["../../../../../src/segmented/segmented.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode, useId, useRef } from 'react';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { useLeafConfig } from '../config-provider/context';\nimport { useFormField } from '../form/form';\nimport { classes } from '../shared/classes';\nimport { FormValue, useFieldValue, useMergedRef } from '../shared/field';\nimport type { ControlSize } from '../shared/types';\nimport { useMovingIndicator } from '../tabs/use-moving-indicator';\nexport interface SegmentedOption {\n  value: string;\n  label: ReactNode;\n  icon?: ReactNode;\n  disabled?: boolean;\n}\nexport interface SegmentedProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  options: readonly (string | SegmentedOption)[];\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  disabled?: boolean;\n  size?: ControlSize;\n  block?: boolean;\n  name?: string;\n  form?: string;\n}\nexport const Segmented = forwardRef<HTMLDivElement, SegmentedProps>(function Segmented(\n  rawProps: SegmentedProps,\n  ref,\n) {\n  const {\n    options,\n    value,\n    defaultValue,\n    onChange,\n    disabled: disabledProp,\n    size = 'md',\n    block = false,\n    name,\n    form,\n    className,\n    ...props\n  } = useComponentProps('Segmented', rawProps);\n  const field = useFormField();\n  const { direction } = useLeafConfig();\n  const root = useRef<HTMLDivElement>(null);\n  const marker = useRef<HTMLSpanElement>(null);\n  const merged = useMergedRef(root, ref);\n  const disabled = disabledProp || field?.disabled;\n  const entries = options.map((option) =>\n    typeof option === 'string' ? { label: option, value: option } : option,\n  );\n  const first = entries.find((option) => !option.disabled)?.value ?? '';\n  const trigger = useRef<HTMLButtonElement>(null);\n  const [current, setCurrent] = useFieldValue(value, defaultValue ?? first, trigger, form);\n  useMovingIndicator(root, marker, '[aria-checked=\"true\"]', `${current}-${direction}`);\n  const id = useId();\n  return (\n    <div\n      {...props}\n      ref={merged}\n      role=\"radiogroup\"\n      aria-disabled={disabled || undefined}\n      className={classes(\n        'leaf-segmented',\n        `leaf-segmented--${size}`,\n        block && 'leaf-segmented--block',\n        className,\n      )}\n    >\n      <span ref={marker} className=\"leaf-segmented__indicator\" aria-hidden=\"true\" />\n      {entries.map((option, index) => (\n        // biome-ignore lint/a11y/useSemanticElements: Segmented buttons implement roving focus and radio-group selection with a shared form proxy.\n        <button\n          key={option.value}\n          type=\"button\"\n          ref={index === 0 ? trigger : undefined}\n          role=\"radio\"\n          data-leaf-indicator-item=\"\"\n          aria-checked={current === option.value}\n          disabled={disabled || option.disabled}\n          tabIndex={\n            current === option.value ||\n            (!entries.some((entry) => entry.value === current && !entry.disabled) &&\n              option.value === first)\n              ? 0\n              : -1\n          }\n          id={`${id}-${index}`}\n          onClick={() => {\n            setCurrent(option.value);\n            onChange?.(option.value);\n          }}\n          onKeyDown={(event) => {\n            const available = entries.filter((entry) => !entry.disabled);\n            const position = available.findIndex((entry) => entry.value === option.value);\n            const next =\n              event.key === 'Home'\n                ? available[0]\n                : event.key === 'End'\n                  ? available.at(-1)\n                  : ['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].includes(event.key)\n                    ? available[\n                        (position +\n                          (event.key === 'ArrowUp' ||\n                          event.key === (direction === 'rtl' ? 'ArrowRight' : 'ArrowLeft')\n                            ? -1\n                            : 1) +\n                          available.length) %\n                          available.length\n                      ]\n                    : undefined;\n            if (!next || disabled) return;\n            event.preventDefault();\n            setCurrent(next.value);\n            onChange?.(next.value);\n            document\n              .getElementById(`${id}-${entries.findIndex((entry) => entry.value === next.value)}`)\n              ?.focus();\n          }}\n        >\n          {option.icon && <span aria-hidden=\"true\">{option.icon}</span>}\n          {option.label}\n        </button>\n      ))}\n      {name && (\n        <FormValue\n          value={current}\n          name={name}\n          form={form}\n          disabled={disabled}\n          triggerRef={trigger}\n        />\n      )}\n    </div>\n  );\n});\n"],"names":["Segmented","forwardRef","rawProps","ref","options","value","defaultValue","onChange","disabledProp","size","block","name","form","className","props","useComponentProps","field","useFormField","direction","useLeafConfig","root","useRef","marker","merged","useMergedRef","disabled","entries","option","first","trigger","current","setCurrent","useFieldValue","useMovingIndicator","id","useId","undefined","classes","index","entry","event","available","position","next","document","FormValue"],"mappings":"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"}

package/dist/esm/browser/modules/select/index.js

@@ -1,2 +1,2 @@
 "use client";
-export * from "./select.js";
+export { Select } from "./select.js";

package/dist/esm/browser/modules/select/select.js

@@ -1,23 +1,28 @@
 "use client";
+import '../../../styles/foundation.css';
 import '../../../styles/components/select.css';
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { Check, ChevronDown, LoaderCircle, Plus, X } from "lucide-react";
+import { Check, ChevronDown, LoaderCircle, Plus } from "lucide-react";
 import { forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
+import { useComponentProps } from "../config-provider/component-defaults.js";
 import { useLeafConfig } from "../config-provider/context.js";
+import { estimateControlHeight } from "../density.js";
 import { useFormField } from "../form/form.js";
 import { classes } from "../shared/classes.js";
 import { ClearButton } from "../shared/clear-button.js";
 import { FormValue, useFieldValue, useMergedRef } from "../shared/field.js";
 import { FloatingPanel, useActiveOption, useFloatingDismiss, usePopupState } from "../shared/floating.js";
+import { FloatingFeedback } from "../shared/floating-feedback.js";
 import { FloatingHighlight, useFloatingHighlight } from "../shared/floating-highlight.js";
 import { useListMotion } from "../shared/motion.js";
-import { useText } from "../shared/use-text.js";
+import { SelectionContent } from "../shared/selection-content.js";
+import { useFormattedText } from "../shared/use-formatted-text.js";
 const empty = [];
 const searchText = (option)=>option.searchLabel ?? ('string' == typeof option.label || 'number' == typeof option.label ? String(option.label) : option.value);
-const select_Select = /*#__PURE__*/ forwardRef(function(props, forwardedRef) {
-    const { options: suppliedOptions, size = 'md', status: statusProp, placeholder, value, defaultValue, name, required: requiredProp, allowClear = false, form, className, style, disabled: disabledProp, id: idProp, onOpenChange, open: controlledOpen, defaultOpen, inputReadOnly, labelRender, tagRender, popupRender, onPopupScroll, onClick, onKeyDown, onBlur, multiple = false, showSearch: searchProp = false, filterOption = true, onSearch, popupWidth = 'auto', popupMaxWidth = 420, popupClassName, popupStyle, popupPlacement, getPopupContainer, loading = false, notFoundContent, optionRender, maxCount, maxTagCount, allowCreate = false, onCreate, virtual: virtualProp, listHeight = 248, optionHeight = 36, onChange: _onChange, ...inputProps } = props;
-    const t = useText();
+const select_SelectControl = /*#__PURE__*/ forwardRef(function(props, forwardedRef) {
+    const { options: suppliedOptions, size = 'md', status: statusProp, placeholder, value, defaultValue, name, required: requiredProp, allowClear = false, form, className, style, disabled: disabledProp, id: idProp, onOpenChange, open: controlledOpen, defaultOpen, inputReadOnly, labelRender, tagRender, popupRender, onPopupScroll, onClick, onKeyDown, onBeforeInput, onCompositionStart, onPaste, onBlur, multiple = false, showSearch: searchProp = false, filterOption = true, onSearch, popupWidth = 'auto', popupMaxWidth = 420, popupClassName, popupStyle, popupPlacement, getPopupContainer, loading = false, notFoundContent, optionRender, maxCount, maxTagCount, tagWrap = true, allowCreate = false, onCreate, virtual: virtualProp, listHeight = 248, optionHeight: optionHeightProp, onChange: _onChange, ...inputProps } = props;
+    const format = useFormattedText();
     const showSearch = searchProp || allowCreate;
     const [created, setCreated] = useState([]);
     const baseOptions = useMemo(()=>suppliedOptions.flatMap((entry)=>'options' in entry ? [
@@ -41,7 +46,8 @@ const select_Select = /*#__PURE__*/ forwardRef(function(props, forwardedRef) {
         suppliedOptions
     ]);
     const virtual = virtualProp ?? options.length > 100;
-    const { messages } = useLeafConfig();
+    const { messages, theme, density } = useLeafConfig();
+    const optionHeight = optionHeightProp ?? Math.max(24, estimateControlHeight(theme, density) - 4);
     const field = useFormField();
     const disabled = disabledProp || field?.disabled;
     const required = requiredProp ?? field?.required;
@@ -55,34 +61,6 @@ const select_Select = /*#__PURE__*/ forwardRef(function(props, forwardedRef) {
     const values = 'string' == typeof selected ? selected ? [
         selected
     ] : [] : selected;
-    const [responsiveCount, setResponsiveCount] = useState(3);
-    useEffect(()=>{
-        if ('responsive' !== maxTagCount || !root.current) return;
-        const measure = ()=>{
-            const width = root.current?.clientWidth ?? 0;
-            let used = 90;
-            let count = 0;
-            for (const tag of root.current?.querySelectorAll('[data-leaf-tag-measure]') ?? []){
-                used += tag.getBoundingClientRect().width + 4;
-                if (used > width) break;
-                count++;
-            }
-            setResponsiveCount(count);
-        };
-        const observer = "u" < typeof ResizeObserver ? void 0 : new ResizeObserver(measure);
-        observer?.observe(root.current);
-        window.addEventListener('resize', measure);
-        measure();
-        return ()=>{
-            observer?.disconnect();
-            window.removeEventListener('resize', measure);
-        };
-    }, [
-        maxTagCount,
-        values
-    ]);
-    const visibleTagCount = 'responsive' === maxTagCount ? responsiveCount : void 0 === maxTagCount ? values.length : Math.max(0, Math.floor(maxTagCount));
-    useListMotion(root, JSON.stringify(values.slice(0, visibleTagCount)), '.leaf-select__tag[data-motion-key]');
     useListMotion(root, values[0], multiple ? '' : '.leaf-select__input-wrap[data-motion-key]');
     const atLimit = multiple && void 0 !== maxCount && values.length >= Math.max(0, Math.floor(maxCount));
     const unavailable = (option)=>option.disabled || atLimit && !values.includes(option.value);
@@ -97,11 +75,12 @@ const select_Select = /*#__PURE__*/ forwardRef(function(props, forwardedRef) {
             value: key,
             label: key
         });
-    const [query, setQuery] = useState('');
+    const [query, setQuery] = useState(null);
+    const searchQuery = query ?? '';
     const [open, setOpen] = usePopupState(disabled || inputProps.readOnly, onOpenChange, controlledOpen, defaultOpen);
     const [highlighted, setHighlighted] = useState(-1);
-    const matched = query && showSearch && false !== filterOption ? options.filter((option)=>'function' == typeof filterOption ? filterOption(query, option) : searchText(option).toLocaleLowerCase().includes(query.toLocaleLowerCase())) : options;
-    const newValue = query.trim();
+    const matched = searchQuery && showSearch && false !== filterOption ? options.filter((option)=>'function' == typeof filterOption ? filterOption(searchQuery, option) : searchText(option).toLocaleLowerCase().includes(searchQuery.toLocaleLowerCase())) : options;
+    const newValue = searchQuery.trim();
     const createOption = allowCreate && newValue && !options.some((option)=>option.value === newValue || searchText(option) === newValue) ? {
         value: newValue,
         label: newValue
@@ -164,13 +143,14 @@ const select_Select = /*#__PURE__*/ forwardRef(function(props, forwardedRef) {
     };
     const close = ()=>{
         setOpen(false);
-        if (query) updateQuery('');
+        setQuery(null);
+        if (searchQuery) onSearch?.('');
     };
     useFloatingDismiss(open, close, input, panel, root);
     useActiveOption(open, highlighted >= 0 ? `${panelId}-${highlighted}` : void 0, panel);
-    const highlight = useFloatingHighlight(open, panel, highlighted >= 0 ? `${panelId}-${highlighted}` : void 0, `${query}:${filtered[highlighted]?.value}:${rows.length}:${virtualizer.range?.startIndex}:${virtualizer.range?.endIndex}`);
+    const highlight = useFloatingHighlight(open, panel, highlighted >= 0 ? `${panelId}-${highlighted}` : void 0, `${searchQuery}:${filtered[highlighted]?.value}:${rows.length}:${virtualizer.range?.startIndex}:${virtualizer.range?.endIndex}`);
     useEffect(()=>{
-        if (!open) setQuery('');
+        if (!open) setQuery(null);
     }, [
         open
     ]);
@@ -199,6 +179,11 @@ const select_Select = /*#__PURE__*/ forwardRef(function(props, forwardedRef) {
         setHighlighted(active >= 0 ? active : filtered.findIndex((option)=>!unavailable(option)));
         setOpen(true);
     };
+    const beginSearch = ()=>{
+        if (!showSearch || disabled || inputProps.readOnly || inputReadOnly) return;
+        if (!multiple && null === query) input.current?.select();
+        if (!open) openMenu();
+    };
     const selectOption = (option)=>{
         if (unavailable(option) || inputProps.readOnly) return;
         if (createOption && option.value === createOption.value) {
@@ -249,18 +234,17 @@ const select_Select = /*#__PURE__*/ forwardRef(function(props, forwardedRef) {
             onClick: ()=>selectOption(option),
             children: [
                 /*#__PURE__*/ jsx("span", {
-                    className: "leaf-select__option-label",
+                    className: "leaf-floating__option-label",
                     children: createOption?.value === option.value ? /*#__PURE__*/ jsxs(Fragment, {
                         children: [
                             /*#__PURE__*/ jsx(Plus, {
                                 size: 14,
                                 "aria-hidden": "true"
                             }),
-                            " ",
-                            t('创建', 'Create'),
-                            " “",
-                            option.label,
-                            "”"
+                            ' ',
+                            format('select.create', {
+                                label: 'string' == typeof option.label ? option.label : option.value
+                            })
                         ]
                     }) : optionRender ? optionRender(option) : option.label
                 }),
@@ -273,8 +257,15 @@ const select_Select = /*#__PURE__*/ forwardRef(function(props, forwardedRef) {
         }, option.value);
     const displayLabel = selectedOptions[0] ? labelRender?.(selectedOptions[0]) ?? selectedOptions[0].label : void 0;
     const textLabel = 'string' == typeof displayLabel || 'number' == typeof displayLabel ? String(displayLabel) : '';
-    const inputValue = multiple || showSearch && open ? query : textLabel;
+    const inputValue = multiple ? searchQuery : showSearch && open ? query ?? textLabel : textLabel;
     const clearable = allowClear && values.length > 0 && !disabled && !inputProps.readOnly;
+    const listboxProps = {
+        id: panelId,
+        role: 'listbox',
+        'aria-busy': loading || void 0,
+        'aria-label': inputProps['aria-label'] ?? messages.select.placeholder,
+        'aria-multiselectable': multiple || void 0
+    };
     return /*#__PURE__*/ jsxs("div", {
         ref: root,
         className: classes('leaf-select', `leaf-select--${size}`, multiple && 'leaf-select--multiple', className),
@@ -294,166 +285,136 @@ const select_Select = /*#__PURE__*/ forwardRef(function(props, forwardedRef) {
             }
         },
         children: [
-            /*#__PURE__*/ jsxs("div", {
+            /*#__PURE__*/ jsx(SelectionContent, {
                 className: "leaf-select__content",
-                children: [
-                    multiple && values.slice(0, visibleTagCount).map((value)=>{
-                        const option = nextCache.get(value) ?? {
-                            value,
-                            label: value
-                        };
-                        const remove = ()=>change(values.filter((item)=>item !== value));
-                        if (tagRender) return /*#__PURE__*/ jsx("span", {
-                            className: "leaf-select__tag",
-                            "data-motion-key": value,
-                            children: tagRender(option, remove)
-                        }, value);
-                        return /*#__PURE__*/ jsxs("span", {
-                            className: "leaf-select__tag",
-                            "data-motion-key": value,
-                            children: [
-                                /*#__PURE__*/ jsx("span", {
-                                    children: option?.label ?? value
-                                }),
-                                !disabled && !inputProps.readOnly && !option?.disabled && /*#__PURE__*/ jsx("button", {
-                                    type: "button",
-                                    tabIndex: -1,
-                                    "aria-label": `${messages.remove} ${option ? searchText(option) : value}`,
-                                    onMouseDown: (event)=>event.preventDefault(),
-                                    onClick: ()=>{
-                                        change(values.filter((item)=>item !== value));
-                                        input.current?.focus();
-                                    },
-                                    children: /*#__PURE__*/ jsx(X, {
-                                        size: 12,
-                                        "aria-hidden": "true"
-                                    })
-                                })
-                            ]
-                        }, value);
-                    }),
-                    multiple && values.length > visibleTagCount && /*#__PURE__*/ jsxs("span", {
-                        className: "leaf-select__tag",
-                        children: [
-                            "+",
-                            values.length - visibleTagCount
-                        ]
-                    }),
-                    multiple && 'responsive' === maxTagCount && /*#__PURE__*/ jsx("span", {
-                        "aria-hidden": "true",
-                        style: {
-                            position: 'absolute',
-                            visibility: 'hidden',
-                            pointerEvents: 'none',
-                            display: 'flex'
-                        },
-                        children: selectedOptions.map((option)=>/*#__PURE__*/ jsxs("span", {
-                                "data-leaf-tag-measure": true,
-                                className: "leaf-select__tag",
-                                children: [
-                                    option.label,
-                                    /*#__PURE__*/ jsx(X, {
-                                        size: 12
-                                    })
-                                ]
-                            }, option.value))
-                    }),
-                    /*#__PURE__*/ jsxs("div", {
-                        className: "leaf-select__input-wrap",
-                        "data-motion-key": values[0] ?? '',
-                        children: [
-                            !multiple && !query && null != displayLabel && (!textLabel || showSearch && open) && /*#__PURE__*/ jsx("span", {
-                                className: "leaf-select__value",
-                                children: displayLabel
-                            }),
-                            /*#__PURE__*/ jsx("input", {
-                                ...inputProps,
-                                ref: merged,
-                                id: idProp ?? field?.id,
-                                form: form,
-                                type: "text",
-                                className: "leaf-select__input",
-                                disabled: disabled,
-                                readOnly: !showSearch || inputProps.readOnly || inputReadOnly,
-                                value: inputValue,
-                                placeholder: values.length ? '' : placeholder ?? messages.select,
-                                autoComplete: "off",
-                                role: "combobox",
-                                "aria-expanded": open,
-                                "aria-haspopup": "listbox",
-                                "aria-controls": panelId,
-                                "aria-autocomplete": showSearch ? 'list' : void 0,
-                                "aria-activedescendant": open && filtered[highlighted] ? `${panelId}-${highlighted}` : void 0,
-                                "aria-required": required || void 0,
-                                "aria-invalid": 'error' === status ? true : inputProps['aria-invalid'],
-                                "aria-describedby": [
-                                    inputProps['aria-describedby'],
-                                    field?.descriptionId
-                                ].filter(Boolean).join(' ') || void 0,
-                                onClick: (event)=>{
-                                    onClick?.(event);
-                                    if (!event.defaultPrevented) {
-                                        if (open && !showSearch) close();
-                                        else if (!open) openMenu();
-                                    }
-                                },
-                                onBlur: (event)=>{
-                                    onBlur?.(event);
-                                    if (!event.defaultPrevented && !root.current?.contains(event.relatedTarget) && !panel.current?.contains(event.relatedTarget)) close();
-                                },
-                                onChange: (event)=>{
-                                    if (!open) openMenu();
-                                    updateQuery(event.target.value);
-                                    setHighlighted(-1);
-                                },
-                                onKeyDown: (event)=>{
-                                    onKeyDown?.(event);
-                                    if (event.defaultPrevented || event.nativeEvent.isComposing) return;
-                                    if ('ArrowDown' === event.key || 'ArrowUp' === event.key) {
-                                        event.preventDefault();
-                                        if (open) move('ArrowDown' === event.key ? 1 : -1);
-                                        else openMenu();
-                                    } else if (('Home' === event.key || 'End' === event.key) && open && !showSearch) {
+                tagClassName: "leaf-select__tag",
+                tagWrap: tagWrap,
+                maxTagCount: maxTagCount,
+                searchable: showSearch && !inputProps.readOnly && !inputReadOnly,
+                query: searchQuery,
+                removeLabel: messages.common.remove,
+                items: multiple ? selectedOptions.map((option)=>{
+                    const remove = ()=>{
+                        if (disabled || inputProps.readOnly || option.disabled) return;
+                        change(values.filter((item)=>item !== option.value));
+                        input.current?.focus();
+                    };
+                    return {
+                        key: option.value,
+                        label: option.label,
+                        text: searchText(option),
+                        remove: disabled || inputProps.readOnly || option.disabled ? void 0 : remove,
+                        render: tagRender?.(option, remove)
+                    };
+                }) : void 0,
+                children: /*#__PURE__*/ jsxs("span", {
+                    className: "leaf-select__input-wrap",
+                    "data-motion-key": values[0] ?? '',
+                    children: [
+                        !multiple && !textLabel && null != displayLabel && (!showSearch || !open || null === query) && /*#__PURE__*/ jsx("span", {
+                            className: "leaf-select__value",
+                            children: displayLabel
+                        }),
+                        /*#__PURE__*/ jsx("input", {
+                            ...inputProps,
+                            ref: merged,
+                            id: idProp ?? field?.id,
+                            form: form,
+                            type: "text",
+                            className: "leaf-select__input",
+                            disabled: disabled,
+                            readOnly: !showSearch || inputProps.readOnly || inputReadOnly,
+                            value: inputValue,
+                            placeholder: values.length ? '' : placeholder ?? messages.select.placeholder,
+                            autoComplete: "off",
+                            role: "combobox",
+                            "aria-expanded": open,
+                            "aria-haspopup": "listbox",
+                            "aria-controls": panelId,
+                            "aria-autocomplete": showSearch ? 'list' : void 0,
+                            "aria-activedescendant": open && filtered[highlighted] ? `${panelId}-${highlighted}` : void 0,
+                            "aria-required": required || void 0,
+                            "aria-invalid": 'error' === status ? true : inputProps['aria-invalid'],
+                            "aria-describedby": [
+                                inputProps['aria-describedby'],
+                                field?.descriptionId
+                            ].filter(Boolean).join(' ') || void 0,
+                            onClick: (event)=>{
+                                onClick?.(event);
+                                if (!event.defaultPrevented) {
+                                    if (open && !showSearch) close();
+                                    else if (!open) openMenu();
+                                }
+                            },
+                            onBlur: (event)=>{
+                                onBlur?.(event);
+                                if (!event.defaultPrevented && !root.current?.contains(event.relatedTarget) && !panel.current?.contains(event.relatedTarget)) close();
+                            },
+                            onChange: (event)=>{
+                                if (!open) openMenu();
+                                updateQuery(event.target.value);
+                                setHighlighted(-1);
+                            },
+                            onBeforeInput: (event)=>{
+                                onBeforeInput?.(event);
+                                if (!event.defaultPrevented) beginSearch();
+                            },
+                            onCompositionStart: (event)=>{
+                                onCompositionStart?.(event);
+                                if (!event.defaultPrevented) beginSearch();
+                            },
+                            onPaste: (event)=>{
+                                onPaste?.(event);
+                                if (!event.defaultPrevented) beginSearch();
+                            },
+                            onKeyDown: (event)=>{
+                                onKeyDown?.(event);
+                                if (event.defaultPrevented || event.nativeEvent.isComposing) return;
+                                if (!event.ctrlKey && !event.metaKey && !event.altKey && (1 === event.key.length || 'Backspace' === event.key || 'Delete' === event.key)) beginSearch();
+                                if ('ArrowDown' === event.key || 'ArrowUp' === event.key) {
+                                    event.preventDefault();
+                                    if (open) move('ArrowDown' === event.key ? 1 : -1);
+                                    else openMenu();
+                                } else if (('Home' === event.key || 'End' === event.key) && open && !showSearch) {
+                                    event.preventDefault();
+                                    const candidates = filtered.map((option, index)=>({
+                                            option,
+                                            index
+                                        })).filter(({ option })=>!unavailable(option));
+                                    setHighlighted(('Home' === event.key ? candidates[0] : candidates.at(-1))?.index ?? -1);
+                                } else if ('Enter' !== event.key && (' ' !== event.key || showSearch)) {
+                                    if ('Escape' === event.key && open) {
                                         event.preventDefault();
-                                        const candidates = filtered.map((option, index)=>({
-                                                option,
-                                                index
-                                            })).filter(({ option })=>!unavailable(option));
-                                        setHighlighted(('Home' === event.key ? candidates[0] : candidates.at(-1))?.index ?? -1);
-                                    } else if ('Enter' !== event.key && (' ' !== event.key || showSearch)) {
-                                        if ('Escape' === event.key && open) {
+                                        event.stopPropagation();
+                                        close();
+                                    } else if ('Tab' === event.key && open) close();
+                                    else if ('Backspace' === event.key && multiple && !searchQuery && !inputProps.readOnly) {
+                                        const last = [
+                                            ...values
+                                        ].reverse().find((value)=>!options.find((option)=>option.value === value)?.disabled);
+                                        if (last) {
                                             event.preventDefault();
-                                            event.stopPropagation();
-                                            close();
-                                        } else if ('Tab' === event.key && open) close();
-                                        else if ('Backspace' === event.key && multiple && !query && !inputProps.readOnly) {
-                                            const last = [
-                                                ...values
-                                            ].reverse().find((value)=>!options.find((option)=>option.value === value)?.disabled);
-                                            if (last) {
-                                                event.preventDefault();
-                                                change(values.filter((value)=>value !== last));
-                                            }
+                                            change(values.filter((value)=>value !== last));
                                         }
-                                    } else {
-                                        event.preventDefault();
-                                        if (open) {
-                                            const option = filtered[highlighted] ?? filtered.find((option)=>!unavailable(option));
-                                            if (option) selectOption(option);
-                                        } else openMenu();
                                     }
+                                } else {
+                                    event.preventDefault();
+                                    if (open) {
+                                        const option = filtered[highlighted] ?? filtered.find((option)=>!unavailable(option));
+                                        if (option) selectOption(option);
+                                    } else openMenu();
                                 }
-                            })
-                        ]
-                    })
-                ]
+                            }
+                        })
+                    ]
+                })
             }),
             /*#__PURE__*/ jsx("button", {
                 type: "button",
                 className: "leaf-select__arrow",
                 tabIndex: -1,
                 disabled: disabled,
-                "aria-label": messages.select,
+                "aria-label": messages.select.placeholder,
                 onMouseDown: (event)=>event.preventDefault(),
                 onClick: ()=>{
                     if (open) close();
@@ -470,7 +431,7 @@ const select_Select = /*#__PURE__*/ forwardRef(function(props, forwardedRef) {
                 })
             }),
             clearable && /*#__PURE__*/ jsx(ClearButton, {
-                label: messages.clearSelection,
+                label: messages.select.clear,
                 beforeArrow: true,
                 onClear: ()=>{
                     change(empty);
@@ -503,7 +464,7 @@ const select_Select = /*#__PURE__*/ forwardRef(function(props, forwardedRef) {
                 width: 'trigger' === popupWidth ? void 0 : 'auto' === popupWidth ? 'max-content' : popupWidth,
                 minWidth: 'auto' === popupWidth ? 'trigger' : void 0,
                 maxWidth: popupMaxWidth,
-                id: panelId,
+                ...filtered.length ? listboxProps : {},
                 className: classes('leaf-floating', 'leaf-select__panel', popupClassName),
                 "data-hover-motion": "",
                 style: {
@@ -511,17 +472,17 @@ const select_Select = /*#__PURE__*/ forwardRef(function(props, forwardedRef) {
                     ...popupStyle
                 },
                 onScroll: onPopupScroll,
-                role: "listbox",
-                "aria-busy": loading || void 0,
-                "aria-label": inputProps['aria-label'] ?? messages.select,
-                "aria-multiselectable": multiple || void 0,
                 children: [
+                    !filtered.length && /*#__PURE__*/ jsx("div", {
+                        ...listboxProps
+                    }),
                     /*#__PURE__*/ jsx(FloatingHighlight, {
-                        style: highlight
+                        style: highlight,
+                        selected: values.includes(filtered[highlighted]?.value ?? '')
                     }),
-                    (popupRender ?? ((content)=>content))(loading && !filtered.length ? /*#__PURE__*/ jsx("div", {
-                        className: "leaf-floating__empty",
-                        children: messages.loading
+                    (popupRender ?? ((content)=>content))(loading && !filtered.length ? /*#__PURE__*/ jsx(FloatingFeedback, {
+                        loading: true,
+                        children: messages.common.loading
                     }) : filtered.length ? virtual ? /*#__PURE__*/ jsx("div", {
                         style: {
                             height: virtualizer.getTotalSize(),
@@ -550,16 +511,23 @@ const select_Select = /*#__PURE__*/ forwardRef(function(props, forwardedRef) {
                     }) : rows.map((row)=>row.option ? renderOption(row.option, row.index) : /*#__PURE__*/ jsx("div", {
                             className: "leaf-select__group",
                             children: row.group
-                        }, row.key)) : /*#__PURE__*/ jsx("div", {
-                        className: "leaf-floating__empty",
-                        children: notFoundContent ?? messages.empty
+                        }, row.key)) : /*#__PURE__*/ jsx(FloatingFeedback, {
+                        children: notFoundContent ?? messages.select.empty
                     }))
                 ]
             })
         ]
     });
 });
+select_SelectControl.displayName = 'SelectControl';
+const select_Select = /*#__PURE__*/ forwardRef(function(rawProps, ref) {
+    const props = useComponentProps('Select', rawProps);
+    return /*#__PURE__*/ jsx(select_SelectControl, {
+        ...props,
+        ref: ref
+    });
+});
 select_Select.displayName = 'Select';
-export { select_Select as Select };
+export { select_Select as Select, select_SelectControl as SelectControl };
 
 //# sourceMappingURL=select.js.map