@lobehub/ui 5.20.1 → 5.20.2

package/es/base-ui/Select/Select.mjs

@@ -14,13 +14,14 @@ import { Select } from "@base-ui/react/select";
 const Select$1 = memo(({ allowClear, autoFocus, className, classNames, defaultOpen, defaultValue, disabled, id, labelRender, listHeight = 512, listItemHeight, loading, mode, name, onChange, onOpenChange, onSelect, open, optionRender, options, placeholder, popupClassName, popupMatchSelectWidth, prefix, readOnly, required, behaviorVariant = "default", selectedIndicatorVariant = "check", shadow, showSearch, size = "middle", style, suffixIcon, suffixIconProps, tokenSeparators, value, variant, virtual }) => {
 	const { isDarkMode } = useThemeMode();
 	const resolvedVariant = variant ?? (isDarkMode ? "filled" : "outlined");
+	const isTags = mode === "tags";
 	const isMultiple = mode === "multiple" || mode === "tags";
 	const isItemAligned = behaviorVariant === "item-aligned";
 	const [extraOptions, setExtraOptions] = useState([]);
 	useEffect(() => {
 		if (mode !== "tags" && extraOptions.length > 0) setExtraOptions([]);
 	}, [mode, extraOptions.length]);
-	const { appendTagValues, getOption, handleValueChange, normalizedValue, normalizeValue, resolvedOptions, valueArray } = useSelectValue({
+	const { appendTagValues, getOption, handleValueChange, normalizedValue, normalizeValue, removeLastTagValue, resolvedOptions, valueArray } = useSelectValue({
 		defaultValue,
 		extraOptions,
 		isMultiple,
@@ -35,11 +36,20 @@ const Select$1 = memo(({ allowClear, autoFocus, className, classNames, defaultOp
 		onOpenChange,
 		open
 	});
+	const handleRootValueChange = useCallback((nextValue) => {
+		if (!(isTags && !mergedOpen)) handleValueChange(nextValue);
+	}, [
+		handleValueChange,
+		isTags,
+		mergedOpen
+	]);
+	const handleRemoveTag = useCallback((index) => handleValueChange(valueArray.filter((_, itemIndex) => itemIndex !== index)), [handleValueChange, valueArray]);
 	const { filteredOptions, handleSearchChange, handleSearchKeyDown, searchValue, shouldShowSearch, stopSearchPropagation } = useSelectSearch({
 		appendTagValues,
 		handleOpenChange,
 		mergedOpen,
 		mode,
+		removeLastTagValue,
 		resolvedOptions,
 		showSearch,
 		tokenSeparators
@@ -55,12 +65,16 @@ const Select$1 = memo(({ allowClear, autoFocus, className, classNames, defaultOp
 	const renderValue = useMemo(() => createTriggerValueRenderer({
 		getOption,
 		isMultiple,
+		isTags,
 		labelRender,
 		normalizeValue,
-		placeholder
+		onRemoveValue: handleRemoveTag,
+		placeholder: isTags ? void 0 : placeholder
 	}), [
 		getOption,
+		handleRemoveTag,
 		isMultiple,
+		isTags,
 		labelRender,
 		normalizeValue,
 		placeholder
@@ -130,11 +144,13 @@ const Select$1 = memo(({ allowClear, autoFocus, className, classNames, defaultOp
 		required,
 		value: normalizedValue,
 		onOpenChange: handleOpenChange,
-		onValueChange: handleValueChange,
+		onValueChange: handleRootValueChange,
 		children: [/* @__PURE__ */ jsxs(Select.Trigger, {
-			autoFocus,
+			autoFocus: !isTags && autoFocus,
 			className: triggerClassName,
 			disabled,
+			nativeButton: !isTags,
+			render: isTags ? /* @__PURE__ */ jsx("div", {}) : void 0,
 			style,
 			children: [
 				prefixNode !== null && prefixNode !== void 0 && /* @__PURE__ */ jsx("span", {
@@ -142,9 +158,21 @@ const Select$1 = memo(({ allowClear, autoFocus, className, classNames, defaultOp
 					children: prefixNode
 				}),
 				/* @__PURE__ */ jsx(Select.Value, {
-					className: cx(styles$1.value, classNames?.value),
+					className: cx(styles$1.value, isTags && styles$1.tagsValue, classNames?.value),
 					children: renderValue
 				}),
+				isTags && /* @__PURE__ */ jsx(SelectSearchInput, {
+					inline: true,
+					autoFocus,
+					classNames,
+					disabled,
+					placeholder: valueArray.length === 0 ? placeholder : void 0,
+					readOnly,
+					stopPropagation: stopSearchPropagation,
+					value: searchValue,
+					onChange: handleSearchChange,
+					onKeyDown: handleSearchKeyDown
+				}),
 				/* @__PURE__ */ jsx(SelectTriggerSuffix, {
 					classNames,
 					showClear,
@@ -163,7 +191,7 @@ const Select$1 = memo(({ allowClear, autoFocus, className, classNames, defaultOp
 				children: /* @__PURE__ */ jsxs(Select.Popup, {
 					style: popupStyle,
 					className: cx(styles.popup, styles$1.popup, popupClassName, classNames?.popup, classNames?.dropdown),
-					children: [shouldShowSearch && /* @__PURE__ */ jsx(SelectSearchInput, {
+					children: [shouldShowSearch && !isTags && /* @__PURE__ */ jsx(SelectSearchInput, {
 						classNames,
 						placeholder,
 						stopPropagation: stopSearchPropagation,
@@ -172,6 +200,7 @@ const Select$1 = memo(({ allowClear, autoFocus, className, classNames, defaultOp
 						onKeyDown: handleSearchKeyDown
 					}), /* @__PURE__ */ jsx(SelectListSection, {
 						classNames,
+						hasSearch: shouldShowSearch && !isTags,
 						isEmpty,
 						listContent,
 						listItemHeight,

package/es/base-ui/Select/Select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.mjs","names":["Select","menuStyles","styles","BaseSelect"],"sources":["../../../src/base-ui/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport { cx, useThemeMode } from 'antd-style';\nimport { type MouseEvent } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { styles as menuStyles } from '@/base-ui/DropdownMenu/sharedStyle';\n\nimport { SelectPositioner } from './atoms';\nimport { isValueEmpty } from './helpers';\nimport {\n  usePortalContainer,\n  useSelectOpen,\n  useSelectSearch,\n  useSelectValue,\n  useSelectVirtual,\n} from './hooks';\nimport {\n  createTriggerValueRenderer,\n  EmptyContent,\n  resolveIconNode,\n  resolveSuffixIcon,\n  SelectListSection,\n  SelectSearchInput,\n  SelectTriggerSuffix,\n} from './parts';\nimport { renderOptions } from './renderOptions';\nimport { styles, triggerVariants } from './style';\nimport { type SelectOption, type SelectProps } from './type';\n\nconst Select = memo<SelectProps<any>>(\n  ({\n    allowClear,\n    autoFocus,\n    className,\n    classNames,\n    defaultOpen,\n    defaultValue,\n    disabled,\n    id,\n    labelRender,\n    listHeight = 512,\n    listItemHeight,\n    loading,\n    mode,\n    name,\n    onChange,\n    onOpenChange,\n    onSelect,\n    open,\n    optionRender,\n    options,\n    placeholder,\n    popupClassName,\n    popupMatchSelectWidth,\n    prefix,\n    readOnly,\n    required,\n    behaviorVariant = 'default',\n    selectedIndicatorVariant = 'check',\n    shadow,\n    showSearch,\n    size = 'middle',\n    style,\n    suffixIcon,\n    suffixIconProps,\n    tokenSeparators,\n    value,\n    variant,\n    virtual,\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const resolvedVariant = variant ?? (isDarkMode ? 'filled' : 'outlined');\n    const isMultiple = mode === 'multiple' || mode === 'tags';\n    const isItemAligned = behaviorVariant === 'item-aligned';\n\n    const [extraOptions, setExtraOptions] = useState<SelectOption<any>[]>([]);\n\n    useEffect(() => {\n      if (mode !== 'tags' && extraOptions.length > 0) {\n        setExtraOptions([]);\n      }\n    }, [mode, extraOptions.length]);\n\n    const {\n      appendTagValues,\n      getOption,\n      handleValueChange,\n      normalizedValue,\n      normalizeValue,\n      resolvedOptions,\n      valueArray,\n    } = useSelectValue({\n      defaultValue,\n      extraOptions,\n      isMultiple,\n      onChange,\n      onSelect,\n      options,\n      setExtraOptions,\n      value,\n    });\n\n    const { handleOpenChange, mergedOpen } = useSelectOpen({ defaultOpen, onOpenChange, open });\n\n    const {\n      filteredOptions,\n      handleSearchChange,\n      handleSearchKeyDown,\n      searchValue,\n      shouldShowSearch,\n      stopSearchPropagation,\n    } = useSelectSearch({\n      appendTagValues,\n      handleOpenChange,\n      mergedOpen,\n      mode,\n      resolvedOptions,\n      showSearch,\n      tokenSeparators,\n    });\n\n    const virtualState = useSelectVirtual({\n      filteredOptions,\n      listItemHeight,\n      size,\n      valueArray,\n      virtual,\n    });\n\n    const portalContainer = usePortalContainer();\n\n    const renderValue = useMemo(\n      () =>\n        createTriggerValueRenderer({\n          getOption,\n          isMultiple,\n          labelRender,\n          normalizeValue,\n          placeholder,\n        }),\n      [getOption, isMultiple, labelRender, normalizeValue, placeholder],\n    );\n\n    const hasValue = isMultiple ? valueArray.length > 0 : !isValueEmpty(normalizedValue);\n    const showClear = Boolean(allowClear && hasValue && !disabled && !readOnly);\n\n    const handleClear = useCallback(\n      (event: MouseEvent) => {\n        event.preventDefault();\n        event.stopPropagation();\n        handleValueChange(isMultiple ? [] : null);\n      },\n      [handleValueChange, isMultiple],\n    );\n\n    const prefixNode = useMemo(() => resolveIconNode(prefix), [prefix]);\n    const suffixIconNode = useMemo(\n      () => resolveSuffixIcon(suffixIcon, suffixIconProps, loading),\n      [loading, suffixIcon, suffixIconProps],\n    );\n\n    const popupStyle = useMemo(() => {\n      const maxHeight = isItemAligned ? '80vh' : `${listHeight}px`;\n      const baseStyle: React.CSSProperties = {\n        maxHeight,\n        maxWidth: 'var(--available-width)',\n        minWidth: 'var(--anchor-width)',\n        ['--lobe-select-popup-max-height' as any]: maxHeight,\n      };\n\n      if (popupMatchSelectWidth === undefined || popupMatchSelectWidth === true) {\n        return baseStyle;\n      }\n      if (typeof popupMatchSelectWidth === 'number') {\n        return {\n          ...baseStyle,\n          minWidth: popupMatchSelectWidth,\n          width: popupMatchSelectWidth,\n        };\n      }\n      return { ...baseStyle, minWidth: 'max-content' };\n    }, [isItemAligned, listHeight, popupMatchSelectWidth]);\n\n    const triggerClassName = cx(\n      triggerVariants({ shadow, size, variant: resolvedVariant }),\n      className,\n      classNames?.root,\n      classNames?.trigger,\n    );\n\n    const isBoldIndicator = selectedIndicatorVariant === 'bold';\n    const itemTextClassName = cx(\n      optionRender ? menuStyles.itemContent : menuStyles.label,\n      styles.itemText,\n      classNames?.itemText,\n    );\n\n    const isEmpty = filteredOptions.length === 0;\n    const listContent = isEmpty ? (\n      <EmptyContent classNames={classNames} />\n    ) : (\n      renderOptions({\n        classNames,\n        isBoldIndicator,\n        items: filteredOptions,\n        itemTextClassName,\n        listItemHeight,\n        optionRender,\n        renderVirtualItem: virtualState.renderVirtualItem,\n        virtual,\n      })\n    );\n\n    return (\n      <BaseSelect.Root\n        disabled={disabled}\n        id={id}\n        modal={isItemAligned}\n        multiple={isMultiple}\n        name={name}\n        open={mergedOpen}\n        readOnly={readOnly}\n        required={required}\n        value={normalizedValue}\n        onOpenChange={handleOpenChange}\n        onValueChange={handleValueChange}\n      >\n        <BaseSelect.Trigger\n          autoFocus={autoFocus}\n          className={triggerClassName}\n          disabled={disabled}\n          style={style}\n        >\n          {prefixNode !== null && prefixNode !== undefined && (\n            <span className={cx(styles.prefix, classNames?.prefix)}>{prefixNode}</span>\n          )}\n          <BaseSelect.Value className={cx(styles.value, classNames?.value)}>\n            {renderValue}\n          </BaseSelect.Value>\n          <SelectTriggerSuffix\n            classNames={classNames}\n            showClear={showClear}\n            suffixIconNode={suffixIconNode}\n            onClear={handleClear}\n          />\n        </BaseSelect.Trigger>\n\n        <BaseSelect.Portal container={portalContainer}>\n          <SelectPositioner\n            align=\"start\"\n            alignItemWithTrigger={isItemAligned}\n            className={styles.positioner}\n            side=\"bottom\"\n            sideOffset={6}\n          >\n            <BaseSelect.Popup\n              style={popupStyle}\n              className={cx(\n                menuStyles.popup,\n                styles.popup,\n                popupClassName,\n                classNames?.popup,\n                classNames?.dropdown,\n              )}\n            >\n              {shouldShowSearch && (\n                <SelectSearchInput\n                  classNames={classNames}\n                  placeholder={placeholder}\n                  stopPropagation={stopSearchPropagation}\n                  value={searchValue}\n                  onChange={handleSearchChange}\n                  onKeyDown={handleSearchKeyDown}\n                />\n              )}\n              <SelectListSection\n                classNames={classNames}\n                isEmpty={isEmpty}\n                listContent={listContent}\n                listItemHeight={listItemHeight}\n                virtual={virtual}\n                virtualState={virtualState}\n              />\n            </BaseSelect.Popup>\n          </SelectPositioner>\n        </BaseSelect.Portal>\n      </BaseSelect.Root>\n    );\n  },\n);\n\nSelect.displayName = 'Select';\n\nexport default Select;\n"],"mappings":"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"}
+{"version":3,"file":"Select.mjs","names":["Select","menuStyles","styles","BaseSelect"],"sources":["../../../src/base-ui/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport { cx, useThemeMode } from 'antd-style';\nimport { type MouseEvent } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { styles as menuStyles } from '@/base-ui/DropdownMenu/sharedStyle';\n\nimport { SelectPositioner } from './atoms';\nimport { isValueEmpty } from './helpers';\nimport {\n  usePortalContainer,\n  useSelectOpen,\n  useSelectSearch,\n  useSelectValue,\n  useSelectVirtual,\n} from './hooks';\nimport {\n  createTriggerValueRenderer,\n  EmptyContent,\n  resolveIconNode,\n  resolveSuffixIcon,\n  SelectListSection,\n  SelectSearchInput,\n  SelectTriggerSuffix,\n} from './parts';\nimport { renderOptions } from './renderOptions';\nimport { styles, triggerVariants } from './style';\nimport { type SelectOption, type SelectProps } from './type';\n\nconst Select = memo<SelectProps<any>>(\n  ({\n    allowClear,\n    autoFocus,\n    className,\n    classNames,\n    defaultOpen,\n    defaultValue,\n    disabled,\n    id,\n    labelRender,\n    listHeight = 512,\n    listItemHeight,\n    loading,\n    mode,\n    name,\n    onChange,\n    onOpenChange,\n    onSelect,\n    open,\n    optionRender,\n    options,\n    placeholder,\n    popupClassName,\n    popupMatchSelectWidth,\n    prefix,\n    readOnly,\n    required,\n    behaviorVariant = 'default',\n    selectedIndicatorVariant = 'check',\n    shadow,\n    showSearch,\n    size = 'middle',\n    style,\n    suffixIcon,\n    suffixIconProps,\n    tokenSeparators,\n    value,\n    variant,\n    virtual,\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const resolvedVariant = variant ?? (isDarkMode ? 'filled' : 'outlined');\n    const isTags = mode === 'tags';\n    const isMultiple = mode === 'multiple' || mode === 'tags';\n    const isItemAligned = behaviorVariant === 'item-aligned';\n\n    const [extraOptions, setExtraOptions] = useState<SelectOption<any>[]>([]);\n\n    useEffect(() => {\n      if (mode !== 'tags' && extraOptions.length > 0) {\n        setExtraOptions([]);\n      }\n    }, [mode, extraOptions.length]);\n\n    const {\n      appendTagValues,\n      getOption,\n      handleValueChange,\n      normalizedValue,\n      normalizeValue,\n      removeLastTagValue,\n      resolvedOptions,\n      valueArray,\n    } = useSelectValue({\n      defaultValue,\n      extraOptions,\n      isMultiple,\n      onChange,\n      onSelect,\n      options,\n      setExtraOptions,\n      value,\n    });\n\n    const { handleOpenChange, mergedOpen } = useSelectOpen({ defaultOpen, onOpenChange, open });\n\n    const handleRootValueChange = useCallback(\n      (nextValue: any) => {\n        if (!(isTags && !mergedOpen)) handleValueChange(nextValue);\n      },\n      [handleValueChange, isTags, mergedOpen],\n    );\n\n    const handleRemoveTag = useCallback(\n      (index: number) =>\n        handleValueChange(valueArray.filter((_, itemIndex) => itemIndex !== index)),\n      [handleValueChange, valueArray],\n    );\n\n    const {\n      filteredOptions,\n      handleSearchChange,\n      handleSearchKeyDown,\n      searchValue,\n      shouldShowSearch,\n      stopSearchPropagation,\n    } = useSelectSearch({\n      appendTagValues,\n      handleOpenChange,\n      mergedOpen,\n      mode,\n      removeLastTagValue,\n      resolvedOptions,\n      showSearch,\n      tokenSeparators,\n    });\n\n    const virtualState = useSelectVirtual({\n      filteredOptions,\n      listItemHeight,\n      size,\n      valueArray,\n      virtual,\n    });\n\n    const portalContainer = usePortalContainer();\n\n    const renderValue = useMemo(\n      () =>\n        createTriggerValueRenderer({\n          getOption,\n          isMultiple,\n          isTags,\n          labelRender,\n          normalizeValue,\n          onRemoveValue: handleRemoveTag,\n          placeholder: isTags ? undefined : placeholder,\n        }),\n      [getOption, handleRemoveTag, isMultiple, isTags, labelRender, normalizeValue, placeholder],\n    );\n\n    const hasValue = isMultiple ? valueArray.length > 0 : !isValueEmpty(normalizedValue);\n    const showClear = Boolean(allowClear && hasValue && !disabled && !readOnly);\n\n    const handleClear = useCallback(\n      (event: MouseEvent) => {\n        event.preventDefault();\n        event.stopPropagation();\n        handleValueChange(isMultiple ? [] : null);\n      },\n      [handleValueChange, isMultiple],\n    );\n\n    const prefixNode = useMemo(() => resolveIconNode(prefix), [prefix]);\n    const suffixIconNode = useMemo(\n      () => resolveSuffixIcon(suffixIcon, suffixIconProps, loading),\n      [loading, suffixIcon, suffixIconProps],\n    );\n\n    const popupStyle = useMemo(() => {\n      const maxHeight = isItemAligned ? '80vh' : `${listHeight}px`;\n      const baseStyle: React.CSSProperties = {\n        maxHeight,\n        maxWidth: 'var(--available-width)',\n        minWidth: 'var(--anchor-width)',\n        ['--lobe-select-popup-max-height' as any]: maxHeight,\n      };\n\n      if (popupMatchSelectWidth === undefined || popupMatchSelectWidth === true) {\n        return baseStyle;\n      }\n      if (typeof popupMatchSelectWidth === 'number') {\n        return {\n          ...baseStyle,\n          minWidth: popupMatchSelectWidth,\n          width: popupMatchSelectWidth,\n        };\n      }\n      return { ...baseStyle, minWidth: 'max-content' };\n    }, [isItemAligned, listHeight, popupMatchSelectWidth]);\n\n    const triggerClassName = cx(\n      triggerVariants({ shadow, size, variant: resolvedVariant }),\n      className,\n      classNames?.root,\n      classNames?.trigger,\n    );\n\n    const isBoldIndicator = selectedIndicatorVariant === 'bold';\n    const itemTextClassName = cx(\n      optionRender ? menuStyles.itemContent : menuStyles.label,\n      styles.itemText,\n      classNames?.itemText,\n    );\n\n    const isEmpty = filteredOptions.length === 0;\n    const listContent = isEmpty ? (\n      <EmptyContent classNames={classNames} />\n    ) : (\n      renderOptions({\n        classNames,\n        isBoldIndicator,\n        items: filteredOptions,\n        itemTextClassName,\n        listItemHeight,\n        optionRender,\n        renderVirtualItem: virtualState.renderVirtualItem,\n        virtual,\n      })\n    );\n\n    return (\n      <BaseSelect.Root\n        disabled={disabled}\n        id={id}\n        modal={isItemAligned}\n        multiple={isMultiple}\n        name={name}\n        open={mergedOpen}\n        readOnly={readOnly}\n        required={required}\n        value={normalizedValue}\n        onOpenChange={handleOpenChange}\n        onValueChange={handleRootValueChange}\n      >\n        <BaseSelect.Trigger\n          autoFocus={!isTags && autoFocus}\n          className={triggerClassName}\n          disabled={disabled}\n          nativeButton={!isTags}\n          render={isTags ? <div /> : undefined}\n          style={style}\n        >\n          {prefixNode !== null && prefixNode !== undefined && (\n            <span className={cx(styles.prefix, classNames?.prefix)}>{prefixNode}</span>\n          )}\n          <BaseSelect.Value\n            className={cx(styles.value, isTags && styles.tagsValue, classNames?.value)}\n          >\n            {renderValue}\n          </BaseSelect.Value>\n          {isTags && (\n            <SelectSearchInput\n              inline\n              autoFocus={autoFocus}\n              classNames={classNames}\n              disabled={disabled}\n              placeholder={valueArray.length === 0 ? placeholder : undefined}\n              readOnly={readOnly}\n              stopPropagation={stopSearchPropagation}\n              value={searchValue}\n              onChange={handleSearchChange}\n              onKeyDown={handleSearchKeyDown}\n            />\n          )}\n          <SelectTriggerSuffix\n            classNames={classNames}\n            showClear={showClear}\n            suffixIconNode={suffixIconNode}\n            onClear={handleClear}\n          />\n        </BaseSelect.Trigger>\n\n        <BaseSelect.Portal container={portalContainer}>\n          <SelectPositioner\n            align=\"start\"\n            alignItemWithTrigger={isItemAligned}\n            className={styles.positioner}\n            side=\"bottom\"\n            sideOffset={6}\n          >\n            <BaseSelect.Popup\n              style={popupStyle}\n              className={cx(\n                menuStyles.popup,\n                styles.popup,\n                popupClassName,\n                classNames?.popup,\n                classNames?.dropdown,\n              )}\n            >\n              {shouldShowSearch && !isTags && (\n                <SelectSearchInput\n                  classNames={classNames}\n                  placeholder={placeholder}\n                  stopPropagation={stopSearchPropagation}\n                  value={searchValue}\n                  onChange={handleSearchChange}\n                  onKeyDown={handleSearchKeyDown}\n                />\n              )}\n              <SelectListSection\n                classNames={classNames}\n                hasSearch={shouldShowSearch && !isTags}\n                isEmpty={isEmpty}\n                listContent={listContent}\n                listItemHeight={listItemHeight}\n                virtual={virtual}\n                virtualState={virtualState}\n              />\n            </BaseSelect.Popup>\n          </SelectPositioner>\n        </BaseSelect.Portal>\n      </BaseSelect.Root>\n    );\n  },\n);\n\nSelect.displayName = 'Select';\n\nexport default Select;\n"],"mappings":"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"}

package/es/base-ui/Select/helpers.mjs

@@ -2,8 +2,8 @@
 const isGroupOption = (option) => Boolean(option.options);
 const getOptionSearchText = (option) => {
 	if (typeof option.label === "string" || typeof option.label === "number") return String(option.label);
-	if (typeof option.value === "string" || typeof option.value === "number") return String(option.value);
 	if (option.title) return option.title;
+	if (typeof option.value === "string" || typeof option.value === "number") return String(option.value);
 	return "";
 };
 const escapeRegExp = (value) => value.replaceAll(/[$()*+.?[\\\]^{|}]/g, "\\$&");

package/es/base-ui/Select/helpers.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.mjs","names":[],"sources":["../../../src/base-ui/Select/helpers.ts"],"sourcesContent":["import { type SelectOption, type SelectOptionGroup, type SelectOptions } from './type';\n\nexport const isGroupOption = <Value>(\n  option: SelectOption<Value> | SelectOptionGroup<Value>,\n): option is SelectOptionGroup<Value> => Boolean((option as SelectOptionGroup<Value>).options);\n\nexport const getOptionSearchText = <Value>(option: SelectOption<Value>) => {\n  if (typeof option.label === 'string' || typeof option.label === 'number') {\n    return String(option.label);\n  }\n  if (typeof option.value === 'string' || typeof option.value === 'number') {\n    return String(option.value);\n  }\n  if (option.title) return option.title;\n  return '';\n};\n\nconst escapeRegExp = (value: string) => value.replaceAll(/[$()*+.?[\\\\\\]^{|}]/g, '\\\\$&');\n\nexport const splitBySeparators = (value: string, separators?: string[]) => {\n  if (!separators || separators.length === 0) return [value];\n  const pattern = separators.map(escapeRegExp).join('|');\n  return value.split(new RegExp(pattern, 'g'));\n};\n\nexport const countVirtualItems = (items: SelectOptions) =>\n  items.reduce((count, item) => {\n    if (isGroupOption(item)) {\n      return count + item.options.length + 1;\n    }\n    return count + 1;\n  }, 0);\n\nexport const isValueEmpty = (value: unknown) =>\n  value === null || value === undefined || value === '';\n\nexport const normalizeValueFor = (isMultiple: boolean) => (nextValue: any) => {\n  if (isMultiple) {\n    if (Array.isArray(nextValue)) return nextValue;\n    if (nextValue === null || nextValue === undefined) return [];\n    return [nextValue];\n  }\n  if (Array.isArray(nextValue)) return nextValue[0] ?? null;\n  return nextValue === undefined ? null : nextValue;\n};\n"],"mappings":";AAEA,MAAa,iBACX,WACuC,QAAS,OAAoC,QAAQ;AAE9F,MAAa,uBAA8B,WAAgC;AACzE,KAAI,OAAO,OAAO,UAAU,YAAY,OAAO,OAAO,UAAU,SAC9D,QAAO,OAAO,OAAO,MAAM;AAE7B,KAAI,OAAO,OAAO,UAAU,YAAY,OAAO,OAAO,UAAU,SAC9D,QAAO,OAAO,OAAO,MAAM;AAE7B,KAAI,OAAO,MAAO,QAAO,OAAO;AAChC,QAAO;;AAGT,MAAM,gBAAgB,UAAkB,MAAM,WAAW,uBAAuB,OAAO;AAEvF,MAAa,qBAAqB,OAAe,eAA0B;AACzE,KAAI,CAAC,cAAc,WAAW,WAAW,EAAG,QAAO,CAAC,MAAM;CAC1D,MAAM,UAAU,WAAW,IAAI,aAAa,CAAC,KAAK,IAAI;AACtD,QAAO,MAAM,MAAM,IAAI,OAAO,SAAS,IAAI,CAAC;;AAG9C,MAAa,qBAAqB,UAChC,MAAM,QAAQ,OAAO,SAAS;AAC5B,KAAI,cAAc,KAAK,CACrB,QAAO,QAAQ,KAAK,QAAQ,SAAS;AAEvC,QAAO,QAAQ;GACd,EAAE;AAEP,MAAa,gBAAgB,UAC3B,UAAU,QAAQ,UAAU,KAAA,KAAa,UAAU;AAErD,MAAa,qBAAqB,gBAAyB,cAAmB;AAC5E,KAAI,YAAY;AACd,MAAI,MAAM,QAAQ,UAAU,CAAE,QAAO;AACrC,MAAI,cAAc,QAAQ,cAAc,KAAA,EAAW,QAAO,EAAE;AAC5D,SAAO,CAAC,UAAU;;AAEpB,KAAI,MAAM,QAAQ,UAAU,CAAE,QAAO,UAAU,MAAM;AACrD,QAAO,cAAc,KAAA,IAAY,OAAO"}
+{"version":3,"file":"helpers.mjs","names":[],"sources":["../../../src/base-ui/Select/helpers.ts"],"sourcesContent":["import { type SelectOption, type SelectOptionGroup, type SelectOptions } from './type';\n\nexport const isGroupOption = <Value>(\n  option: SelectOption<Value> | SelectOptionGroup<Value>,\n): option is SelectOptionGroup<Value> => Boolean((option as SelectOptionGroup<Value>).options);\n\nexport const getOptionSearchText = <Value>(option: SelectOption<Value>) => {\n  if (typeof option.label === 'string' || typeof option.label === 'number') {\n    return String(option.label);\n  }\n  if (option.title) return option.title;\n  if (typeof option.value === 'string' || typeof option.value === 'number') {\n    return String(option.value);\n  }\n  return '';\n};\n\nconst escapeRegExp = (value: string) => value.replaceAll(/[$()*+.?[\\\\\\]^{|}]/g, '\\\\$&');\n\nexport const splitBySeparators = (value: string, separators?: string[]) => {\n  if (!separators || separators.length === 0) return [value];\n  const pattern = separators.map(escapeRegExp).join('|');\n  return value.split(new RegExp(pattern, 'g'));\n};\n\nexport const countVirtualItems = (items: SelectOptions) =>\n  items.reduce((count, item) => {\n    if (isGroupOption(item)) {\n      return count + item.options.length + 1;\n    }\n    return count + 1;\n  }, 0);\n\nexport const isValueEmpty = (value: unknown) =>\n  value === null || value === undefined || value === '';\n\nexport const normalizeValueFor = (isMultiple: boolean) => (nextValue: any) => {\n  if (isMultiple) {\n    if (Array.isArray(nextValue)) return nextValue;\n    if (nextValue === null || nextValue === undefined) return [];\n    return [nextValue];\n  }\n  if (Array.isArray(nextValue)) return nextValue[0] ?? null;\n  return nextValue === undefined ? null : nextValue;\n};\n"],"mappings":";AAEA,MAAa,iBACX,WACuC,QAAS,OAAoC,QAAQ;AAE9F,MAAa,uBAA8B,WAAgC;AACzE,KAAI,OAAO,OAAO,UAAU,YAAY,OAAO,OAAO,UAAU,SAC9D,QAAO,OAAO,OAAO,MAAM;AAE7B,KAAI,OAAO,MAAO,QAAO,OAAO;AAChC,KAAI,OAAO,OAAO,UAAU,YAAY,OAAO,OAAO,UAAU,SAC9D,QAAO,OAAO,OAAO,MAAM;AAE7B,QAAO;;AAGT,MAAM,gBAAgB,UAAkB,MAAM,WAAW,uBAAuB,OAAO;AAEvF,MAAa,qBAAqB,OAAe,eAA0B;AACzE,KAAI,CAAC,cAAc,WAAW,WAAW,EAAG,QAAO,CAAC,MAAM;CAC1D,MAAM,UAAU,WAAW,IAAI,aAAa,CAAC,KAAK,IAAI;AACtD,QAAO,MAAM,MAAM,IAAI,OAAO,SAAS,IAAI,CAAC;;AAG9C,MAAa,qBAAqB,UAChC,MAAM,QAAQ,OAAO,SAAS;AAC5B,KAAI,cAAc,KAAK,CACrB,QAAO,QAAQ,KAAK,QAAQ,SAAS;AAEvC,QAAO,QAAQ;GACd,EAAE;AAEP,MAAa,gBAAgB,UAC3B,UAAU,QAAQ,UAAU,KAAA,KAAa,UAAU;AAErD,MAAa,qBAAqB,gBAAyB,cAAmB;AAC5E,KAAI,YAAY;AACd,MAAI,MAAM,QAAQ,UAAU,CAAE,QAAO;AACrC,MAAI,cAAc,QAAQ,cAAc,KAAA,EAAW,QAAO,EAAE;AAC5D,SAAO,CAAC,UAAU;;AAEpB,KAAI,MAAM,QAAQ,UAAU,CAAE,QAAO,UAAU,MAAM;AACrD,QAAO,cAAc,KAAA,IAAY,OAAO"}

package/es/base-ui/Select/hooks.mjs

@@ -71,7 +71,7 @@ function useSelectValue({ defaultValue, extraOptions, isMultiple, onChange, onSe
 		} else {
 			if (!isValueEmpty(normalizedNextValue) && !Object.is(previousValue, normalizedNextValue)) onSelect?.(normalizedNextValue, getOption(normalizedNextValue));
 			if (value === void 0) setUncontrolledValue(normalizedNextValue);
-			onChange?.(normalizedNextValue, isValueEmpty(normalizedNextValue) ? void 0 : getOption(normalizedNextValue));
+			onChange?.(isValueEmpty(normalizedNextValue) ? void 0 : normalizedNextValue, isValueEmpty(normalizedNextValue) ? void 0 : getOption(normalizedNextValue));
 		}
 		previousValueRef.current = normalizedNextValue;
 	}, [
@@ -86,7 +86,7 @@ function useSelectValue({ defaultValue, extraOptions, isMultiple, onChange, onSe
 		appendTagValues: useCallback((rawValues) => {
 			const valuesToAdd = rawValues.map((val) => val.trim()).filter(Boolean);
 			if (!valuesToAdd.length) return;
-			const nextValues = [...valueArray];
+			const nextValues = [...Array.isArray(previousValueRef.current) ? previousValueRef.current : valueArray];
 			const newOptionValues = valuesToAdd.filter((val) => !optionMap.has(val));
 			if (newOptionValues.length > 0) setExtraOptions((prev) => {
 				const existingValues = new Set(prev.map((item) => item.value));
@@ -115,6 +115,10 @@ function useSelectValue({ defaultValue, extraOptions, isMultiple, onChange, onSe
 		normalizeValue,
 		optionMap,
 		resolvedOptions,
+		removeLastTagValue: useCallback(() => {
+			const currentValues = Array.isArray(previousValueRef.current) ? previousValueRef.current : valueArray;
+			if (currentValues.length > 0) handleValueChange(currentValues.slice(0, -1));
+		}, [handleValueChange, valueArray]),
 		valueArray
 	};
 }
@@ -132,7 +136,7 @@ function useSelectOpen({ defaultOpen, onOpenChange, open }) {
 		mergedOpen
 	};
 }
-function useSelectSearch({ appendTagValues, handleOpenChange, mergedOpen, mode, resolvedOptions, showSearch, tokenSeparators }) {
+function useSelectSearch({ appendTagValues, handleOpenChange, mergedOpen, mode, removeLastTagValue, resolvedOptions, showSearch, tokenSeparators }) {
 	const [searchValue, setSearchValue] = useState("");
 	const shouldShowSearch = Boolean(showSearch || mode === "tags");
 	useEffect(() => {
@@ -162,6 +166,11 @@ function useSelectSearch({ appendTagValues, handleOpenChange, mergedOpen, mode,
 			return;
 		}
 		if (mode !== "tags") return;
+		if (event.key === "Backspace" && !searchValue) {
+			event.preventDefault();
+			removeLastTagValue();
+			return;
+		}
 		const isSeparator = tokenSeparators?.includes(event.key);
 		if (event.key === "Enter" || isSeparator) {
 			event.preventDefault();
@@ -173,6 +182,7 @@ function useSelectSearch({ appendTagValues, handleOpenChange, mergedOpen, mode,
 		appendTagValues,
 		handleOpenChange,
 		mode,
+		removeLastTagValue,
 		searchValue,
 		tokenSeparators
 	]);

package/es/base-ui/Select/hooks.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.mjs","names":[],"sources":["../../../src/base-ui/Select/hooks.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ChangeEvent,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MutableRefObject,\n  type Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useAppElement } from '@/ThemeProvider';\n\nimport {\n  countVirtualItems,\n  getOptionSearchText,\n  isGroupOption,\n  isValueEmpty,\n  normalizeValueFor,\n  splitBySeparators,\n} from './helpers';\nimport {\n  type SelectOption,\n  type SelectOptions,\n  type SelectProps,\n  type SelectRootChangeEventDetails,\n  type SelectSize,\n} from './type';\n\ninterface UseSelectValueParams {\n  defaultValue: SelectProps['defaultValue'];\n  extraOptions: SelectOption<any>[];\n  isMultiple: boolean;\n  onChange: SelectProps['onChange'];\n  onSelect: SelectProps['onSelect'];\n  options: SelectOptions<any> | undefined;\n  setExtraOptions: React.Dispatch<React.SetStateAction<SelectOption<any>[]>>;\n  value: SelectProps['value'];\n}\n\nexport function useSelectValue({\n  defaultValue,\n  extraOptions,\n  isMultiple,\n  onChange,\n  onSelect,\n  options,\n  setExtraOptions,\n  value,\n}: UseSelectValueParams) {\n  const [uncontrolledValue, setUncontrolledValue] = useState<any>(() => {\n    if (defaultValue !== undefined) return defaultValue;\n    return isMultiple ? [] : null;\n  });\n\n  const normalizeValue = useMemo(() => normalizeValueFor(isMultiple), [isMultiple]);\n\n  const mergedValue = value !== undefined ? value : uncontrolledValue;\n  const normalizedValue = useMemo(() => normalizeValue(mergedValue), [mergedValue, normalizeValue]);\n\n  const valueArray = useMemo(() => {\n    if (isMultiple) return normalizedValue as any[];\n    return isValueEmpty(normalizedValue) ? [] : [normalizedValue];\n  }, [isMultiple, normalizedValue]);\n\n  const { optionMap, resolvedOptions } = useMemo(() => {\n    const baseOptions = options ?? [];\n    const optionValueMap = new Map<any, SelectOption<any>>();\n\n    const addOption = (item: SelectOption<any>) => {\n      if (!optionValueMap.has(item.value)) {\n        optionValueMap.set(item.value, item);\n      }\n    };\n\n    baseOptions.forEach((item) => {\n      if (isGroupOption(item)) {\n        item.options.forEach(addOption);\n      } else {\n        addOption(item);\n      }\n    });\n\n    const filteredExtraOptions = extraOptions.filter((item) => !optionValueMap.has(item.value));\n    filteredExtraOptions.forEach(addOption);\n    const mergedOptions: SelectOptions<any> = [...baseOptions, ...filteredExtraOptions];\n\n    const missingValueOptions: SelectOption<any>[] = valueArray\n      .filter((val) => !optionValueMap.has(val))\n      .map((val) => ({ label: String(val), value: val }));\n    missingValueOptions.forEach(addOption);\n\n    return {\n      optionMap: optionValueMap,\n      resolvedOptions: missingValueOptions.length\n        ? [...mergedOptions, ...missingValueOptions]\n        : mergedOptions,\n    };\n  }, [extraOptions, options, valueArray]);\n\n  const getOption = useCallback(\n    (optionValue: any): SelectOption<any> => {\n      const matched = optionMap.get(optionValue);\n      if (matched) return matched;\n      if (optionValue && typeof optionValue === 'object' && 'label' in optionValue) {\n        return { label: (optionValue as any).label, value: optionValue };\n      }\n      return { label: String(optionValue), value: optionValue };\n    },\n    [optionMap],\n  );\n\n  const previousValueRef = useRef<any>(normalizedValue);\n  useEffect(() => {\n    previousValueRef.current = normalizedValue;\n  }, [normalizedValue]);\n\n  const handleValueChange = useCallback(\n    (nextValue: any) => {\n      const normalizedNextValue = normalizeValue(nextValue);\n      const previousValue = previousValueRef.current;\n\n      if (isMultiple) {\n        const prevValues = Array.isArray(previousValue) ? previousValue : [];\n        const nextValues = Array.isArray(normalizedNextValue) ? normalizedNextValue : [];\n        const addedValues = nextValues.filter(\n          (val) => !prevValues.some((prev) => Object.is(prev, val)),\n        );\n        addedValues.forEach((val) => onSelect?.(val, getOption(val)));\n\n        if (value === undefined) setUncontrolledValue(nextValues);\n        onChange?.(\n          nextValues,\n          nextValues.map((val) => getOption(val)),\n        );\n      } else {\n        if (!isValueEmpty(normalizedNextValue) && !Object.is(previousValue, normalizedNextValue)) {\n          onSelect?.(normalizedNextValue, getOption(normalizedNextValue));\n        }\n        if (value === undefined) setUncontrolledValue(normalizedNextValue);\n        onChange?.(\n          normalizedNextValue,\n          isValueEmpty(normalizedNextValue) ? undefined : getOption(normalizedNextValue),\n        );\n      }\n\n      previousValueRef.current = normalizedNextValue;\n    },\n    [getOption, isMultiple, normalizeValue, onChange, onSelect, value],\n  );\n\n  const appendTagValues = useCallback(\n    (rawValues: string[]) => {\n      const valuesToAdd = rawValues.map((val) => val.trim()).filter(Boolean);\n      if (!valuesToAdd.length) return;\n\n      const nextValues = [...valueArray];\n      const newOptionValues = valuesToAdd.filter((val) => !optionMap.has(val));\n\n      if (newOptionValues.length > 0) {\n        setExtraOptions((prev) => {\n          const existingValues = new Set(prev.map((item) => item.value));\n          const merged = [...prev];\n          newOptionValues.forEach((val) => {\n            if (!existingValues.has(val)) {\n              merged.push({ label: val, value: val });\n            }\n          });\n          return merged;\n        });\n      }\n\n      valuesToAdd.forEach((val) => {\n        if (!nextValues.some((item) => Object.is(item, val))) {\n          nextValues.push(val);\n        }\n      });\n\n      if (nextValues.length !== valueArray.length) {\n        handleValueChange(nextValues);\n      }\n    },\n    [handleValueChange, optionMap, setExtraOptions, valueArray],\n  );\n\n  return {\n    appendTagValues,\n    getOption,\n    handleValueChange,\n    normalizedValue,\n    normalizeValue,\n    optionMap,\n    resolvedOptions,\n    valueArray,\n  };\n}\n\ninterface UseSelectOpenParams {\n  defaultOpen: boolean | undefined;\n  onOpenChange: SelectProps['onOpenChange'];\n  open: boolean | undefined;\n}\n\nexport function useSelectOpen({ defaultOpen, onOpenChange, open }: UseSelectOpenParams) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n\n  useEffect(() => {\n    if (open !== undefined) setUncontrolledOpen(open);\n  }, [open]);\n\n  const mergedOpen = open ?? uncontrolledOpen;\n\n  const handleOpenChange = useCallback(\n    (nextOpen: boolean, eventDetails?: SelectRootChangeEventDetails) => {\n      onOpenChange?.(nextOpen, eventDetails);\n      if (open === undefined) setUncontrolledOpen(nextOpen);\n    },\n    [onOpenChange, open],\n  );\n\n  return { handleOpenChange, mergedOpen };\n}\n\ninterface UseSelectSearchParams {\n  appendTagValues: (values: string[]) => void;\n  handleOpenChange: (nextOpen: boolean) => void;\n  mergedOpen: boolean;\n  mode: SelectProps['mode'];\n  resolvedOptions: SelectOptions;\n  showSearch: boolean | undefined;\n  tokenSeparators: string[] | undefined;\n}\n\nexport function useSelectSearch({\n  appendTagValues,\n  handleOpenChange,\n  mergedOpen,\n  mode,\n  resolvedOptions,\n  showSearch,\n  tokenSeparators,\n}: UseSelectSearchParams) {\n  const [searchValue, setSearchValue] = useState('');\n  const shouldShowSearch = Boolean(showSearch || mode === 'tags');\n\n  useEffect(() => {\n    if (!mergedOpen) setSearchValue('');\n  }, [mergedOpen]);\n\n  const handleSearchChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      const nextValue = event.target.value;\n      if (mode === 'tags') {\n        const parts = splitBySeparators(nextValue, tokenSeparators);\n        if (parts.length > 1) {\n          const pending = parts.pop() ?? '';\n          appendTagValues(parts.filter(Boolean));\n          setSearchValue(pending);\n          return;\n        }\n      }\n      setSearchValue(nextValue);\n    },\n    [appendTagValues, mode, tokenSeparators],\n  );\n\n  const handleSearchKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLInputElement>) => {\n      event.stopPropagation();\n\n      if (event.key === 'Escape') {\n        handleOpenChange(false);\n        return;\n      }\n      if (mode !== 'tags') return;\n\n      const isSeparator = tokenSeparators?.includes(event.key);\n      if (event.key === 'Enter' || isSeparator) {\n        event.preventDefault();\n        event.stopPropagation();\n        appendTagValues([searchValue]);\n        setSearchValue('');\n      }\n    },\n    [appendTagValues, handleOpenChange, mode, searchValue, tokenSeparators],\n  );\n\n  // Stop propagation in capture phase + on keyup to block base-ui Popup-level\n  // `useTypeahead` (and any ancestor typeahead) from hijacking the search\n  // input's first-letter focus behavior. Do not remove.\n  const stopSearchPropagation = useCallback((event: KeyboardEvent<HTMLInputElement>) => {\n    event.stopPropagation();\n  }, []);\n\n  const filteredOptions = useMemo(() => {\n    if (!shouldShowSearch || !searchValue.trim()) return resolvedOptions;\n    const query = searchValue.trim().toLowerCase();\n\n    return resolvedOptions\n      .map((item) => {\n        if (isGroupOption(item)) {\n          const groupItems = item.options.filter((option) =>\n            getOptionSearchText(option).toLowerCase().includes(query),\n          );\n          if (!groupItems.length) return null;\n          return { ...item, options: groupItems };\n        }\n        return getOptionSearchText(item).toLowerCase().includes(query) ? item : null;\n      })\n      .filter(Boolean) as SelectOptions;\n  }, [resolvedOptions, searchValue, shouldShowSearch]);\n\n  return {\n    filteredOptions,\n    handleSearchChange,\n    handleSearchKeyDown,\n    searchValue,\n    shouldShowSearch,\n    stopSearchPropagation,\n  };\n}\n\ninterface UseSelectVirtualParams {\n  filteredOptions: SelectOptions;\n  listItemHeight: number | undefined;\n  size: SelectSize;\n  valueArray: any[];\n  virtual: boolean | undefined;\n}\n\nexport function useSelectVirtual({\n  filteredOptions,\n  listItemHeight,\n  size,\n  valueArray,\n  virtual,\n}: UseSelectVirtualParams) {\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const pointerScrollRef = useRef(false);\n  const pointerScrollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const renderVirtualItem = useCallback((props: HTMLAttributes<HTMLDivElement>) => {\n    const { ref, ...rest } = props as HTMLAttributes<HTMLDivElement> & {\n      ref?: Ref<HTMLDivElement>;\n    };\n\n    return (\n      <div\n        {...rest}\n        ref={(node) => {\n          if (node) {\n            node.scrollIntoView = (...args) => {\n              if (!pointerScrollRef.current) {\n                HTMLElement.prototype.scrollIntoView.call(node, ...args);\n              }\n            };\n          }\n          if (typeof ref === 'function') {\n            ref(node);\n          } else if (ref && 'current' in ref) {\n            (ref as MutableRefObject<HTMLDivElement | null>).current = node;\n          }\n        }}\n      />\n    );\n  }, []);\n\n  const markPointerScroll = useCallback(() => {\n    pointerScrollRef.current = true;\n    if (pointerScrollTimeoutRef.current) {\n      clearTimeout(pointerScrollTimeoutRef.current);\n    }\n    pointerScrollTimeoutRef.current = setTimeout(() => {\n      pointerScrollRef.current = false;\n    }, 120);\n  }, []);\n\n  const handleListScroll = useCallback(() => {\n    if (!virtual || !pointerScrollRef.current) return;\n    const listElement = listRef.current;\n    const activeElement = document.activeElement;\n    if (listElement && activeElement && listElement.contains(activeElement)) {\n      listElement.focus({ preventScroll: true });\n    }\n  }, [virtual]);\n\n  useEffect(() => {\n    return () => {\n      if (pointerScrollTimeoutRef.current) {\n        clearTimeout(pointerScrollTimeoutRef.current);\n      }\n    };\n  }, []);\n\n  const virtualListStyle = useMemo(() => {\n    if (!virtual) return undefined;\n    const rowCount = countVirtualItems(filteredOptions);\n    const maxVisibleRows = 6;\n    const estimatedRowHeight =\n      listItemHeight ?? (size === 'large' ? 40 : size === 'small' ? 28 : 32);\n    const visibleRows = Math.min(Math.max(rowCount, 1), maxVisibleRows);\n    const estimatedHeight = visibleRows * estimatedRowHeight + 8;\n\n    return {\n      height: `min(${estimatedHeight}px, var(--lobe-select-available-height, var(--available-height)))`,\n    };\n  }, [filteredOptions, listItemHeight, size, virtual]);\n\n  const keepMountedIndices = useMemo(() => {\n    if (!virtual || valueArray.length === 0) return undefined;\n    const selectedSet = new Set(valueArray);\n    const indices: number[] = [];\n    let index = 0;\n\n    filteredOptions.forEach((item) => {\n      if (isGroupOption(item)) {\n        if (item.options.some((option) => selectedSet.has(option.value))) {\n          indices.push(index);\n        }\n        index += 1;\n        return;\n      }\n      if (selectedSet.has(item.value)) indices.push(index);\n      index += 1;\n    });\n\n    return indices.length ? indices : undefined;\n  }, [filteredOptions, valueArray, virtual]);\n\n  return {\n    handleListScroll,\n    keepMountedIndices,\n    listRef,\n    markPointerScroll,\n    renderVirtualItem,\n    virtualListStyle,\n  };\n}\n\nexport function usePortalContainer() {\n  const appElement = useAppElement();\n  // `appElement` is the ThemeProvider wrapper div, which uses `display: contents`\n  // so it has no layout box. `@base-ui/react/select` fails to mount its Popup\n  // into a `display: contents` container in certain hosts (editor/chat inputs\n  // with focus traps). Fall back to `document.body` in that case; keep the\n  // original behavior when the wrapper has a real layout (older themes, SSR\n  // snapshot, etc.).\n  return useMemo(() => {\n    if (typeof window === 'undefined') return appElement;\n    if (!(appElement instanceof HTMLElement)) return undefined;\n    const display = window.getComputedStyle(appElement).display;\n    return display === 'contents' ? document.body : appElement;\n  }, [appElement]);\n}\n"],"mappings":"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"}
+{"version":3,"file":"hooks.mjs","names":[],"sources":["../../../src/base-ui/Select/hooks.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ChangeEvent,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MutableRefObject,\n  type Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useAppElement } from '@/ThemeProvider';\n\nimport {\n  countVirtualItems,\n  getOptionSearchText,\n  isGroupOption,\n  isValueEmpty,\n  normalizeValueFor,\n  splitBySeparators,\n} from './helpers';\nimport {\n  type SelectOption,\n  type SelectOptions,\n  type SelectProps,\n  type SelectRootChangeEventDetails,\n  type SelectSize,\n} from './type';\n\ninterface UseSelectValueParams {\n  defaultValue: SelectProps['defaultValue'];\n  extraOptions: SelectOption<any>[];\n  isMultiple: boolean;\n  onChange: SelectProps['onChange'];\n  onSelect: SelectProps['onSelect'];\n  options: SelectOptions<any> | undefined;\n  setExtraOptions: React.Dispatch<React.SetStateAction<SelectOption<any>[]>>;\n  value: SelectProps['value'];\n}\n\nexport function useSelectValue({\n  defaultValue,\n  extraOptions,\n  isMultiple,\n  onChange,\n  onSelect,\n  options,\n  setExtraOptions,\n  value,\n}: UseSelectValueParams) {\n  const [uncontrolledValue, setUncontrolledValue] = useState<any>(() => {\n    if (defaultValue !== undefined) return defaultValue;\n    return isMultiple ? [] : null;\n  });\n\n  const normalizeValue = useMemo(() => normalizeValueFor(isMultiple), [isMultiple]);\n\n  const mergedValue = value !== undefined ? value : uncontrolledValue;\n  const normalizedValue = useMemo(() => normalizeValue(mergedValue), [mergedValue, normalizeValue]);\n\n  const valueArray = useMemo(() => {\n    if (isMultiple) return normalizedValue as any[];\n    return isValueEmpty(normalizedValue) ? [] : [normalizedValue];\n  }, [isMultiple, normalizedValue]);\n\n  const { optionMap, resolvedOptions } = useMemo(() => {\n    const baseOptions = options ?? [];\n    const optionValueMap = new Map<any, SelectOption<any>>();\n\n    const addOption = (item: SelectOption<any>) => {\n      if (!optionValueMap.has(item.value)) {\n        optionValueMap.set(item.value, item);\n      }\n    };\n\n    baseOptions.forEach((item) => {\n      if (isGroupOption(item)) {\n        item.options.forEach(addOption);\n      } else {\n        addOption(item);\n      }\n    });\n\n    const filteredExtraOptions = extraOptions.filter((item) => !optionValueMap.has(item.value));\n    filteredExtraOptions.forEach(addOption);\n    const mergedOptions: SelectOptions<any> = [...baseOptions, ...filteredExtraOptions];\n\n    const missingValueOptions: SelectOption<any>[] = valueArray\n      .filter((val) => !optionValueMap.has(val))\n      .map((val) => ({ label: String(val), value: val }));\n    missingValueOptions.forEach(addOption);\n\n    return {\n      optionMap: optionValueMap,\n      resolvedOptions: missingValueOptions.length\n        ? [...mergedOptions, ...missingValueOptions]\n        : mergedOptions,\n    };\n  }, [extraOptions, options, valueArray]);\n\n  const getOption = useCallback(\n    (optionValue: any): SelectOption<any> => {\n      const matched = optionMap.get(optionValue);\n      if (matched) return matched;\n      if (optionValue && typeof optionValue === 'object' && 'label' in optionValue) {\n        return { label: (optionValue as any).label, value: optionValue };\n      }\n      return { label: String(optionValue), value: optionValue };\n    },\n    [optionMap],\n  );\n\n  const previousValueRef = useRef<any>(normalizedValue);\n  useEffect(() => {\n    previousValueRef.current = normalizedValue;\n  }, [normalizedValue]);\n\n  const handleValueChange = useCallback(\n    (nextValue: any) => {\n      const normalizedNextValue = normalizeValue(nextValue);\n      const previousValue = previousValueRef.current;\n\n      if (isMultiple) {\n        const prevValues = Array.isArray(previousValue) ? previousValue : [];\n        const nextValues = Array.isArray(normalizedNextValue) ? normalizedNextValue : [];\n        const addedValues = nextValues.filter(\n          (val) => !prevValues.some((prev) => Object.is(prev, val)),\n        );\n        addedValues.forEach((val) => onSelect?.(val, getOption(val)));\n\n        if (value === undefined) setUncontrolledValue(nextValues);\n        onChange?.(\n          nextValues,\n          nextValues.map((val) => getOption(val)),\n        );\n      } else {\n        if (!isValueEmpty(normalizedNextValue) && !Object.is(previousValue, normalizedNextValue)) {\n          onSelect?.(normalizedNextValue, getOption(normalizedNextValue));\n        }\n        if (value === undefined) setUncontrolledValue(normalizedNextValue);\n        onChange?.(\n          isValueEmpty(normalizedNextValue) ? undefined : normalizedNextValue,\n          isValueEmpty(normalizedNextValue) ? undefined : getOption(normalizedNextValue),\n        );\n      }\n\n      previousValueRef.current = normalizedNextValue;\n    },\n    [getOption, isMultiple, normalizeValue, onChange, onSelect, value],\n  );\n\n  const appendTagValues = useCallback(\n    (rawValues: string[]) => {\n      const valuesToAdd = rawValues.map((val) => val.trim()).filter(Boolean);\n      if (!valuesToAdd.length) return;\n\n      const currentValues = Array.isArray(previousValueRef.current)\n        ? previousValueRef.current\n        : valueArray;\n      const nextValues = [...currentValues];\n      const newOptionValues = valuesToAdd.filter((val) => !optionMap.has(val));\n\n      if (newOptionValues.length > 0) {\n        setExtraOptions((prev) => {\n          const existingValues = new Set(prev.map((item) => item.value));\n          const merged = [...prev];\n          newOptionValues.forEach((val) => {\n            if (!existingValues.has(val)) {\n              merged.push({ label: val, value: val });\n            }\n          });\n          return merged;\n        });\n      }\n\n      valuesToAdd.forEach((val) => {\n        if (!nextValues.some((item) => Object.is(item, val))) {\n          nextValues.push(val);\n        }\n      });\n\n      if (nextValues.length !== valueArray.length) {\n        handleValueChange(nextValues);\n      }\n    },\n    [handleValueChange, optionMap, setExtraOptions, valueArray],\n  );\n\n  const removeLastTagValue = useCallback(() => {\n    const currentValues = Array.isArray(previousValueRef.current)\n      ? previousValueRef.current\n      : valueArray;\n    if (currentValues.length > 0) handleValueChange(currentValues.slice(0, -1));\n  }, [handleValueChange, valueArray]);\n\n  return {\n    appendTagValues,\n    getOption,\n    handleValueChange,\n    normalizedValue,\n    normalizeValue,\n    optionMap,\n    resolvedOptions,\n    removeLastTagValue,\n    valueArray,\n  };\n}\n\ninterface UseSelectOpenParams {\n  defaultOpen: boolean | undefined;\n  onOpenChange: SelectProps['onOpenChange'];\n  open: boolean | undefined;\n}\n\nexport function useSelectOpen({ defaultOpen, onOpenChange, open }: UseSelectOpenParams) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n\n  useEffect(() => {\n    if (open !== undefined) setUncontrolledOpen(open);\n  }, [open]);\n\n  const mergedOpen = open ?? uncontrolledOpen;\n\n  const handleOpenChange = useCallback(\n    (nextOpen: boolean, eventDetails?: SelectRootChangeEventDetails) => {\n      onOpenChange?.(nextOpen, eventDetails);\n      if (open === undefined) setUncontrolledOpen(nextOpen);\n    },\n    [onOpenChange, open],\n  );\n\n  return { handleOpenChange, mergedOpen };\n}\n\ninterface UseSelectSearchParams {\n  appendTagValues: (values: string[]) => void;\n  handleOpenChange: (nextOpen: boolean) => void;\n  mergedOpen: boolean;\n  mode: SelectProps['mode'];\n  removeLastTagValue: () => void;\n  resolvedOptions: SelectOptions;\n  showSearch: boolean | undefined;\n  tokenSeparators: string[] | undefined;\n}\n\nexport function useSelectSearch({\n  appendTagValues,\n  handleOpenChange,\n  mergedOpen,\n  mode,\n  removeLastTagValue,\n  resolvedOptions,\n  showSearch,\n  tokenSeparators,\n}: UseSelectSearchParams) {\n  const [searchValue, setSearchValue] = useState('');\n  const shouldShowSearch = Boolean(showSearch || mode === 'tags');\n\n  useEffect(() => {\n    if (!mergedOpen) setSearchValue('');\n  }, [mergedOpen]);\n\n  const handleSearchChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      const nextValue = event.target.value;\n      if (mode === 'tags') {\n        const parts = splitBySeparators(nextValue, tokenSeparators);\n        if (parts.length > 1) {\n          const pending = parts.pop() ?? '';\n          appendTagValues(parts.filter(Boolean));\n          setSearchValue(pending);\n          return;\n        }\n      }\n      setSearchValue(nextValue);\n    },\n    [appendTagValues, mode, tokenSeparators],\n  );\n\n  const handleSearchKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLInputElement>) => {\n      event.stopPropagation();\n\n      if (event.key === 'Escape') {\n        handleOpenChange(false);\n        return;\n      }\n      if (mode !== 'tags') return;\n\n      if (event.key === 'Backspace' && !searchValue) {\n        event.preventDefault();\n        removeLastTagValue();\n        return;\n      }\n\n      const isSeparator = tokenSeparators?.includes(event.key);\n      if (event.key === 'Enter' || isSeparator) {\n        event.preventDefault();\n        event.stopPropagation();\n        appendTagValues([searchValue]);\n        setSearchValue('');\n      }\n    },\n    [appendTagValues, handleOpenChange, mode, removeLastTagValue, searchValue, tokenSeparators],\n  );\n\n  // Stop propagation in capture phase + on keyup to block base-ui Popup-level\n  // `useTypeahead` (and any ancestor typeahead) from hijacking the search\n  // input's first-letter focus behavior. Do not remove.\n  const stopSearchPropagation = useCallback((event: KeyboardEvent<HTMLInputElement>) => {\n    event.stopPropagation();\n  }, []);\n\n  const filteredOptions = useMemo(() => {\n    if (!shouldShowSearch || !searchValue.trim()) return resolvedOptions;\n    const query = searchValue.trim().toLowerCase();\n\n    return resolvedOptions\n      .map((item) => {\n        if (isGroupOption(item)) {\n          const groupItems = item.options.filter((option) =>\n            getOptionSearchText(option).toLowerCase().includes(query),\n          );\n          if (!groupItems.length) return null;\n          return { ...item, options: groupItems };\n        }\n        return getOptionSearchText(item).toLowerCase().includes(query) ? item : null;\n      })\n      .filter(Boolean) as SelectOptions;\n  }, [resolvedOptions, searchValue, shouldShowSearch]);\n\n  return {\n    filteredOptions,\n    handleSearchChange,\n    handleSearchKeyDown,\n    searchValue,\n    shouldShowSearch,\n    stopSearchPropagation,\n  };\n}\n\ninterface UseSelectVirtualParams {\n  filteredOptions: SelectOptions;\n  listItemHeight: number | undefined;\n  size: SelectSize;\n  valueArray: any[];\n  virtual: boolean | undefined;\n}\n\nexport function useSelectVirtual({\n  filteredOptions,\n  listItemHeight,\n  size,\n  valueArray,\n  virtual,\n}: UseSelectVirtualParams) {\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const pointerScrollRef = useRef(false);\n  const pointerScrollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const renderVirtualItem = useCallback((props: HTMLAttributes<HTMLDivElement>) => {\n    const { ref, ...rest } = props as HTMLAttributes<HTMLDivElement> & {\n      ref?: Ref<HTMLDivElement>;\n    };\n\n    return (\n      <div\n        {...rest}\n        ref={(node) => {\n          if (node) {\n            node.scrollIntoView = (...args) => {\n              if (!pointerScrollRef.current) {\n                HTMLElement.prototype.scrollIntoView.call(node, ...args);\n              }\n            };\n          }\n          if (typeof ref === 'function') {\n            ref(node);\n          } else if (ref && 'current' in ref) {\n            (ref as MutableRefObject<HTMLDivElement | null>).current = node;\n          }\n        }}\n      />\n    );\n  }, []);\n\n  const markPointerScroll = useCallback(() => {\n    pointerScrollRef.current = true;\n    if (pointerScrollTimeoutRef.current) {\n      clearTimeout(pointerScrollTimeoutRef.current);\n    }\n    pointerScrollTimeoutRef.current = setTimeout(() => {\n      pointerScrollRef.current = false;\n    }, 120);\n  }, []);\n\n  const handleListScroll = useCallback(() => {\n    if (!virtual || !pointerScrollRef.current) return;\n    const listElement = listRef.current;\n    const activeElement = document.activeElement;\n    if (listElement && activeElement && listElement.contains(activeElement)) {\n      listElement.focus({ preventScroll: true });\n    }\n  }, [virtual]);\n\n  useEffect(() => {\n    return () => {\n      if (pointerScrollTimeoutRef.current) {\n        clearTimeout(pointerScrollTimeoutRef.current);\n      }\n    };\n  }, []);\n\n  const virtualListStyle = useMemo(() => {\n    if (!virtual) return undefined;\n    const rowCount = countVirtualItems(filteredOptions);\n    const maxVisibleRows = 6;\n    const estimatedRowHeight =\n      listItemHeight ?? (size === 'large' ? 40 : size === 'small' ? 28 : 32);\n    const visibleRows = Math.min(Math.max(rowCount, 1), maxVisibleRows);\n    const estimatedHeight = visibleRows * estimatedRowHeight + 8;\n\n    return {\n      height: `min(${estimatedHeight}px, var(--lobe-select-available-height, var(--available-height)))`,\n    };\n  }, [filteredOptions, listItemHeight, size, virtual]);\n\n  const keepMountedIndices = useMemo(() => {\n    if (!virtual || valueArray.length === 0) return undefined;\n    const selectedSet = new Set(valueArray);\n    const indices: number[] = [];\n    let index = 0;\n\n    filteredOptions.forEach((item) => {\n      if (isGroupOption(item)) {\n        if (item.options.some((option) => selectedSet.has(option.value))) {\n          indices.push(index);\n        }\n        index += 1;\n        return;\n      }\n      if (selectedSet.has(item.value)) indices.push(index);\n      index += 1;\n    });\n\n    return indices.length ? indices : undefined;\n  }, [filteredOptions, valueArray, virtual]);\n\n  return {\n    handleListScroll,\n    keepMountedIndices,\n    listRef,\n    markPointerScroll,\n    renderVirtualItem,\n    virtualListStyle,\n  };\n}\n\nexport function usePortalContainer() {\n  const appElement = useAppElement();\n  // `appElement` is the ThemeProvider wrapper div, which uses `display: contents`\n  // so it has no layout box. `@base-ui/react/select` fails to mount its Popup\n  // into a `display: contents` container in certain hosts (editor/chat inputs\n  // with focus traps). Fall back to `document.body` in that case; keep the\n  // original behavior when the wrapper has a real layout (older themes, SSR\n  // snapshot, etc.).\n  return useMemo(() => {\n    if (typeof window === 'undefined') return appElement;\n    if (!(appElement instanceof HTMLElement)) return undefined;\n    const display = window.getComputedStyle(appElement).display;\n    return display === 'contents' ? document.body : appElement;\n  }, [appElement]);\n}\n"],"mappings":"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"}

package/es/base-ui/Select/parts.mjs

@@ -36,7 +36,7 @@ function resolveSuffixIcon(suffixIcon, suffixIconProps, loading) {
 		}
 	});
 }
-function createTriggerValueRenderer({ getOption, isMultiple, labelRender, normalizeValue, placeholder }) {
+function createTriggerValueRenderer({ getOption, isMultiple, isTags, labelRender, normalizeValue, onRemoveValue, placeholder }) {
 	return function renderValue(currentValue) {
 		const resolved = normalizeValue(currentValue);
 		const placeholderNode = placeholder === void 0 ? null : /* @__PURE__ */ jsx("span", {
@@ -51,9 +51,26 @@ function createTriggerValueRenderer({ getOption, isMultiple, labelRender, normal
 				children: values.map((val, index) => {
 					const option = getOption(val);
 					const content = labelRender ? labelRender(option) : option.label ?? String(val);
-					return /* @__PURE__ */ jsx("span", {
+					return /* @__PURE__ */ jsxs("span", {
 						className: styles$1.tag,
-						children: content
+						"data-role": "lobe-select-tag",
+						children: [content, isTags && /* @__PURE__ */ jsx("span", {
+							"aria-label": `Remove ${String(val)}`,
+							className: styles$1.tagClose,
+							"data-role": "lobe-select-tag-remove",
+							role: "button",
+							tabIndex: 0,
+							onClick: (event) => {
+								event.preventDefault();
+								event.stopPropagation();
+								onRemoveValue(index);
+							},
+							onPointerDown: (event) => {
+								event.preventDefault();
+								event.stopPropagation();
+							},
+							children: /* @__PURE__ */ jsx(X, { size: 12 })
+						})]
 					}, `${String(val)}-${index}`);
 				})
 			});
@@ -67,8 +84,8 @@ function createTriggerValueRenderer({ getOption, isMultiple, labelRender, normal
 		});
 	};
 }
-function SelectListSection({ classNames, isEmpty, listContent, listItemHeight, virtual, virtualState }) {
-	const listClassName = cx(styles$1.list, classNames?.list);
+function SelectListSection({ classNames, hasSearch, isEmpty, listContent, listItemHeight, virtual, virtualState }) {
+	const listClassName = cx(styles$1.list, hasSearch && styles$1.listWithSearch, classNames?.list);
 	if (!virtual || isEmpty) return /* @__PURE__ */ jsx(Select.List, {
 		className: listClassName,
 		"data-virtual": virtual || void 0,
@@ -98,16 +115,18 @@ function EmptyContent({ classNames }) {
 		children: "No data"
 	});
 }
-function SelectSearchInput({ classNames, onChange, onKeyDown, placeholder, stopPropagation, value }) {
+function SelectSearchInput({ autoFocus, classNames, disabled, inline, onChange, onKeyDown, placeholder, readOnly, stopPropagation, value }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cx(styles$1.search, classNames?.search),
+		className: cx(inline ? styles$1.tagsSearch : styles$1.search, classNames?.search),
 		children: /* @__PURE__ */ jsx("input", {
+			autoFocus,
 			className: styles$1.searchInput,
+			disabled,
 			placeholder: typeof placeholder === "string" ? placeholder : void 0,
+			readOnly,
 			value,
 			onChange,
-			onKeyDown,
-			onKeyDownCapture: stopPropagation,
+			onKeyDownCapture: onKeyDown,
 			onKeyUp: stopPropagation,
 			onKeyUpCapture: stopPropagation
 		})

package/es/base-ui/Select/parts.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"parts.mjs","names":["styles","BaseSelect","menuStyles"],"sources":["../../../src/base-ui/Select/parts.tsx"],"sourcesContent":["'use client';\n\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport { cx } from 'antd-style';\nimport { ChevronDown, Loader2, X } from 'lucide-react';\nimport {\n  type ChangeEvent,\n  isValidElement,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n} from 'react';\nimport { Virtualizer } from 'virtua';\n\nimport { styles as menuStyles } from '@/base-ui/DropdownMenu/sharedStyle';\nimport Icon, { type IconProps } from '@/Icon';\n\nimport { isValueEmpty } from './helpers';\nimport { type useSelectVirtual } from './hooks';\nimport { styles } from './style';\nimport { type SelectClassNames, type SelectOption, type SelectProps } from './type';\n\nexport function resolveIconNode(node: ReactNode | IconProps['icon'] | undefined | null) {\n  if (node === undefined || node === null) return null;\n  if (isValidElement(node) || typeof node === 'string' || typeof node === 'number') {\n    return node;\n  }\n  return <Icon icon={node as any} size={'small'} />;\n}\n\nexport function resolveSuffixIcon(\n  suffixIcon: SelectProps['suffixIcon'],\n  suffixIconProps: SelectProps['suffixIconProps'],\n  loading: boolean | undefined,\n) {\n  if (loading) return <Icon spin icon={Loader2} size={'small'} />;\n  if (suffixIcon === null) return null;\n  if (\n    isValidElement(suffixIcon) ||\n    typeof suffixIcon === 'string' ||\n    typeof suffixIcon === 'number'\n  ) {\n    return suffixIcon;\n  }\n  return (\n    <Icon\n      icon={(suffixIcon as any) || ChevronDown}\n      size={'small'}\n      {...suffixIconProps}\n      style={{\n        pointerEvents: 'none',\n        ...suffixIconProps?.style,\n      }}\n    />\n  );\n}\n\ninterface TriggerValueRendererParams {\n  getOption: (value: any) => SelectOption<any>;\n  isMultiple: boolean;\n  labelRender: SelectProps['labelRender'];\n  normalizeValue: (value: any) => any;\n  placeholder: ReactNode;\n}\n\nexport function createTriggerValueRenderer({\n  getOption,\n  isMultiple,\n  labelRender,\n  normalizeValue,\n  placeholder,\n}: TriggerValueRendererParams) {\n  return function renderValue(currentValue: any): ReactNode {\n    const resolved = normalizeValue(currentValue);\n    const placeholderNode =\n      placeholder === undefined ? null : <span className={styles.valueText}>{placeholder}</span>;\n\n    if (isMultiple) {\n      const values = Array.isArray(resolved) ? resolved : [];\n      if (values.length === 0) return placeholderNode;\n      return (\n        <span className={styles.tags}>\n          {values.map((val, index) => {\n            const option = getOption(val);\n            const content = labelRender ? labelRender(option) : (option.label ?? String(val));\n            return (\n              <span className={styles.tag} key={`${String(val)}-${index}`}>\n                {content}\n              </span>\n            );\n          })}\n        </span>\n      );\n    }\n\n    if (isValueEmpty(resolved)) return placeholderNode;\n    const option = getOption(resolved);\n    const content = labelRender ? labelRender(option) : (option.label ?? String(resolved));\n    return <span className={styles.valueText}>{content}</span>;\n  };\n}\n\ntype SelectVirtualReturn = ReturnType<typeof useSelectVirtual>;\n\ninterface SelectListSectionProps {\n  classNames: SelectClassNames | undefined;\n  isEmpty: boolean;\n  listContent: ReactNode;\n  listItemHeight: number | undefined;\n  virtual: boolean | undefined;\n  virtualState: SelectVirtualReturn;\n}\n\nexport function SelectListSection({\n  classNames,\n  isEmpty,\n  listContent,\n  listItemHeight,\n  virtual,\n  virtualState,\n}: SelectListSectionProps) {\n  const listClassName = cx(styles.list, classNames?.list);\n\n  if (!virtual || isEmpty) {\n    return (\n      <BaseSelect.List className={listClassName} data-virtual={virtual || undefined}>\n        {listContent}\n      </BaseSelect.List>\n    );\n  }\n\n  const { handleListScroll, keepMountedIndices, listRef, markPointerScroll, virtualListStyle } =\n    virtualState;\n\n  return (\n    <BaseSelect.List\n      data-virtual\n      className={listClassName}\n      ref={listRef}\n      style={virtualListStyle}\n      tabIndex={-1}\n      onPointerDown={markPointerScroll}\n      onScroll={handleListScroll}\n      onTouchMove={markPointerScroll}\n      onWheel={markPointerScroll}\n    >\n      <Virtualizer itemSize={listItemHeight} keepMounted={keepMountedIndices}>\n        {listContent}\n      </Virtualizer>\n    </BaseSelect.List>\n  );\n}\n\ninterface EmptyContentProps {\n  classNames: SelectClassNames | undefined;\n}\n\nexport function EmptyContent({ classNames }: EmptyContentProps) {\n  return (\n    <div className={cx(menuStyles.item, menuStyles.empty, styles.empty, classNames?.empty)}>\n      No data\n    </div>\n  );\n}\n\ninterface SelectSearchInputProps {\n  classNames: SelectClassNames | undefined;\n  onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n  onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;\n  placeholder: ReactNode;\n  stopPropagation: (event: KeyboardEvent<HTMLInputElement>) => void;\n  value: string;\n}\n\nexport function SelectSearchInput({\n  classNames,\n  onChange,\n  onKeyDown,\n  placeholder,\n  stopPropagation,\n  value,\n}: SelectSearchInputProps) {\n  return (\n    <div className={cx(styles.search, classNames?.search)}>\n      <input\n        className={styles.searchInput}\n        placeholder={typeof placeholder === 'string' ? placeholder : undefined}\n        value={value}\n        onChange={onChange}\n        onKeyDown={onKeyDown}\n        onKeyDownCapture={stopPropagation}\n        onKeyUp={stopPropagation}\n        onKeyUpCapture={stopPropagation}\n      />\n    </div>\n  );\n}\n\ninterface SelectTriggerSuffixProps {\n  classNames: SelectClassNames | undefined;\n  onClear: (event: MouseEvent) => void;\n  showClear: boolean;\n  suffixIconNode: ReactNode;\n}\n\nexport function SelectTriggerSuffix({\n  classNames,\n  onClear,\n  showClear,\n  suffixIconNode,\n}: SelectTriggerSuffixProps) {\n  return (\n    <span className={cx(styles.suffix, classNames?.suffix)}>\n      {showClear && (\n        <span\n          className={cx(styles.clear, classNames?.clear)}\n          data-role=\"lobe-select-clear\"\n          onClick={onClear}\n        >\n          <Icon icon={X} size={'small'} />\n        </span>\n      )}\n      {suffixIconNode !== null && suffixIconNode !== undefined && (\n        <BaseSelect.Icon className={cx(styles.icon, classNames?.icon)}>\n          {suffixIconNode}\n        </BaseSelect.Icon>\n      )}\n    </span>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"parts.mjs","names":["styles","BaseSelect","menuStyles"],"sources":["../../../src/base-ui/Select/parts.tsx"],"sourcesContent":["'use client';\n\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport { cx } from 'antd-style';\nimport { ChevronDown, Loader2, X } from 'lucide-react';\nimport {\n  type ChangeEvent,\n  isValidElement,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n} from 'react';\nimport { Virtualizer } from 'virtua';\n\nimport { styles as menuStyles } from '@/base-ui/DropdownMenu/sharedStyle';\nimport Icon, { type IconProps } from '@/Icon';\n\nimport { isValueEmpty } from './helpers';\nimport { type useSelectVirtual } from './hooks';\nimport { styles } from './style';\nimport { type SelectClassNames, type SelectOption, type SelectProps } from './type';\n\nexport function resolveIconNode(node: ReactNode | IconProps['icon'] | undefined | null) {\n  if (node === undefined || node === null) return null;\n  if (isValidElement(node) || typeof node === 'string' || typeof node === 'number') {\n    return node;\n  }\n  return <Icon icon={node as any} size={'small'} />;\n}\n\nexport function resolveSuffixIcon(\n  suffixIcon: SelectProps['suffixIcon'],\n  suffixIconProps: SelectProps['suffixIconProps'],\n  loading: boolean | undefined,\n) {\n  if (loading) return <Icon spin icon={Loader2} size={'small'} />;\n  if (suffixIcon === null) return null;\n  if (\n    isValidElement(suffixIcon) ||\n    typeof suffixIcon === 'string' ||\n    typeof suffixIcon === 'number'\n  ) {\n    return suffixIcon;\n  }\n  return (\n    <Icon\n      icon={(suffixIcon as any) || ChevronDown}\n      size={'small'}\n      {...suffixIconProps}\n      style={{\n        pointerEvents: 'none',\n        ...suffixIconProps?.style,\n      }}\n    />\n  );\n}\n\ninterface TriggerValueRendererParams {\n  getOption: (value: any) => SelectOption<any>;\n  isMultiple: boolean;\n  isTags: boolean;\n  labelRender: SelectProps['labelRender'];\n  normalizeValue: (value: any) => any;\n  onRemoveValue: (index: number) => void;\n  placeholder: ReactNode;\n}\n\nexport function createTriggerValueRenderer({\n  getOption,\n  isMultiple,\n  isTags,\n  labelRender,\n  normalizeValue,\n  onRemoveValue,\n  placeholder,\n}: TriggerValueRendererParams) {\n  return function renderValue(currentValue: any): ReactNode {\n    const resolved = normalizeValue(currentValue);\n    const placeholderNode =\n      placeholder === undefined ? null : <span className={styles.valueText}>{placeholder}</span>;\n\n    if (isMultiple) {\n      const values = Array.isArray(resolved) ? resolved : [];\n      if (values.length === 0) return placeholderNode;\n      return (\n        <span className={styles.tags}>\n          {values.map((val, index) => {\n            const option = getOption(val);\n            const content = labelRender ? labelRender(option) : (option.label ?? String(val));\n            return (\n              <span\n                className={styles.tag}\n                data-role=\"lobe-select-tag\"\n                key={`${String(val)}-${index}`}\n              >\n                {content}\n                {isTags && (\n                  <span\n                    aria-label={`Remove ${String(val)}`}\n                    className={styles.tagClose}\n                    data-role=\"lobe-select-tag-remove\"\n                    role=\"button\"\n                    tabIndex={0}\n                    onClick={(event) => {\n                      event.preventDefault();\n                      event.stopPropagation();\n                      onRemoveValue(index);\n                    }}\n                    onPointerDown={(event) => {\n                      event.preventDefault();\n                      event.stopPropagation();\n                    }}\n                  >\n                    <X size={12} />\n                  </span>\n                )}\n              </span>\n            );\n          })}\n        </span>\n      );\n    }\n\n    if (isValueEmpty(resolved)) return placeholderNode;\n    const option = getOption(resolved);\n    const content = labelRender ? labelRender(option) : (option.label ?? String(resolved));\n    return <span className={styles.valueText}>{content}</span>;\n  };\n}\n\ntype SelectVirtualReturn = ReturnType<typeof useSelectVirtual>;\n\ninterface SelectListSectionProps {\n  classNames: SelectClassNames | undefined;\n  hasSearch: boolean;\n  isEmpty: boolean;\n  listContent: ReactNode;\n  listItemHeight: number | undefined;\n  virtual: boolean | undefined;\n  virtualState: SelectVirtualReturn;\n}\n\nexport function SelectListSection({\n  classNames,\n  hasSearch,\n  isEmpty,\n  listContent,\n  listItemHeight,\n  virtual,\n  virtualState,\n}: SelectListSectionProps) {\n  const listClassName = cx(styles.list, hasSearch && styles.listWithSearch, classNames?.list);\n\n  if (!virtual || isEmpty) {\n    return (\n      <BaseSelect.List className={listClassName} data-virtual={virtual || undefined}>\n        {listContent}\n      </BaseSelect.List>\n    );\n  }\n\n  const { handleListScroll, keepMountedIndices, listRef, markPointerScroll, virtualListStyle } =\n    virtualState;\n\n  return (\n    <BaseSelect.List\n      data-virtual\n      className={listClassName}\n      ref={listRef}\n      style={virtualListStyle}\n      tabIndex={-1}\n      onPointerDown={markPointerScroll}\n      onScroll={handleListScroll}\n      onTouchMove={markPointerScroll}\n      onWheel={markPointerScroll}\n    >\n      <Virtualizer itemSize={listItemHeight} keepMounted={keepMountedIndices}>\n        {listContent}\n      </Virtualizer>\n    </BaseSelect.List>\n  );\n}\n\ninterface EmptyContentProps {\n  classNames: SelectClassNames | undefined;\n}\n\nexport function EmptyContent({ classNames }: EmptyContentProps) {\n  return (\n    <div className={cx(menuStyles.item, menuStyles.empty, styles.empty, classNames?.empty)}>\n      No data\n    </div>\n  );\n}\n\ninterface SelectSearchInputProps {\n  autoFocus?: boolean;\n  classNames: SelectClassNames | undefined;\n  disabled?: boolean;\n  inline?: boolean;\n  onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n  onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;\n  placeholder: ReactNode;\n  readOnly?: boolean;\n  stopPropagation: (event: KeyboardEvent<HTMLInputElement>) => void;\n  value: string;\n}\n\nexport function SelectSearchInput({\n  autoFocus,\n  classNames,\n  disabled,\n  inline,\n  onChange,\n  onKeyDown,\n  placeholder,\n  readOnly,\n  stopPropagation,\n  value,\n}: SelectSearchInputProps) {\n  return (\n    <div className={cx(inline ? styles.tagsSearch : styles.search, classNames?.search)}>\n      <input\n        autoFocus={autoFocus}\n        className={styles.searchInput}\n        disabled={disabled}\n        placeholder={typeof placeholder === 'string' ? placeholder : undefined}\n        readOnly={readOnly}\n        value={value}\n        onChange={onChange}\n        onKeyDownCapture={onKeyDown}\n        onKeyUp={stopPropagation}\n        onKeyUpCapture={stopPropagation}\n      />\n    </div>\n  );\n}\n\ninterface SelectTriggerSuffixProps {\n  classNames: SelectClassNames | undefined;\n  onClear: (event: MouseEvent) => void;\n  showClear: boolean;\n  suffixIconNode: ReactNode;\n}\n\nexport function SelectTriggerSuffix({\n  classNames,\n  onClear,\n  showClear,\n  suffixIconNode,\n}: SelectTriggerSuffixProps) {\n  return (\n    <span className={cx(styles.suffix, classNames?.suffix)}>\n      {showClear && (\n        <span\n          className={cx(styles.clear, classNames?.clear)}\n          data-role=\"lobe-select-clear\"\n          onClick={onClear}\n        >\n          <Icon icon={X} size={'small'} />\n        </span>\n      )}\n      {suffixIconNode !== null && suffixIconNode !== undefined && (\n        <BaseSelect.Icon className={cx(styles.icon, classNames?.icon)}>\n          {suffixIconNode}\n        </BaseSelect.Icon>\n      )}\n    </span>\n  );\n}\n"],"mappings":"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"}

package/es/base-ui/Select/style.mjs

@@ -74,6 +74,9 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     min-height: 0;
     max-height: var(--lobe-select-available-height, var(--available-height));
     padding-block: 0;
+  `,
+	listWithSearch: css`
+    padding-block-start: 4px;
   `,
 	outlined: cx(staticStylish.variantOutlined, css`
       --lobe-select-open-bg: ${cssVar.colorFillTertiary};
@@ -177,12 +180,39 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     color: ${cssVar.colorText};
 
     background: ${cssVar.colorFillTertiary};
+
+    &:hover [data-role='lobe-select-tag-remove'] {
+      opacity: 1;
+    }
+  `,
+	tagClose: css`
+    cursor: pointer;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    margin-inline-start: 4px;
+
+    color: ${cssVar.colorTextSecondary};
+
+    opacity: 0;
+
+    transition: opacity 150ms ${cssVar.motionEaseOut};
   `,
 	tags: css`
     display: flex;
     flex-wrap: wrap;
     gap: 4px;
     align-items: center;
+  `,
+	tagsValue: css`
+    flex: none;
+  `,
+	tagsSearch: css`
+    display: flex;
+    flex: 1;
+    min-width: 48px;
   `,
 	trigger: css`
     cursor: pointer;

package/es/base-ui/Select/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Select/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { controlHeight } from '@/base-ui/controlSize';\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  arrow: css`\n    display: flex;\n    width: 12px;\n    height: 6px;\n\n    & > svg {\n      width: 100%;\n      height: 100%;\n    }\n  `,\n  borderless: cx(\n    lobeStaticStylish.variantBorderless,\n    css`\n      --lobe-select-open-bg: ${cssVar.colorFillTertiary};\n      --lobe-select-readonly-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 70%, transparent);\n      --lobe-select-disabled-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 55%, transparent);\n    `,\n  ),\n  clear: css`\n    display: inline-flex;\n    align-items: center;\n\n    color: ${cssVar.colorTextTertiary};\n\n    opacity: 0;\n\n    transition: opacity 150ms ${cssVar.motionEaseOut};\n\n    &:hover {\n      color: ${cssVar.colorTextSecondary};\n    }\n  `,\n  empty: css``,\n  filled: cx(\n    lobeStaticStylish.variantFilled,\n    css`\n      --lobe-select-open-bg: ${cssVar.colorFillSecondary};\n      --lobe-select-readonly-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 70%, transparent);\n      --lobe-select-disabled-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 55%, transparent);\n    `,\n  ),\n  group: css``,\n  groupLabel: css``,\n  icon: css`\n    display: inline-flex;\n    align-items: center;\n    transition: transform 150ms ${cssVar.motionEaseOut};\n\n    &[data-popup-open] {\n      transform: rotate(180deg);\n    }\n  `,\n  item: css``,\n  itemBoldSelected: css`\n    &[data-selected] {\n      font-weight: 600;\n    }\n  `,\n  itemIndicator: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-inline-start: auto;\n    padding-inline-start: 8px;\n\n    color: ${cssVar.colorPrimary};\n  `,\n  itemText: css``,\n  list: css`\n    overflow-y: auto;\n    flex: 1;\n\n    min-height: 0;\n    max-height: var(--lobe-select-available-height, var(--available-height));\n    padding-block: 0;\n  `,\n  outlined: cx(\n    lobeStaticStylish.variantOutlined,\n    css`\n      --lobe-select-open-bg: ${cssVar.colorFillTertiary};\n      --lobe-select-readonly-bg: color-mix(in srgb, ${cssVar.colorBgContainer} 75%, transparent);\n      --lobe-select-disabled-bg: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);\n    `,\n  ),\n  popup: css`\n    --lobe-select-available-height: min(\n      var(--available-height),\n      var(--lobe-select-popup-max-height, var(--available-height))\n    );\n\n    transform-origin: var(--transform-origin);\n\n    display: flex;\n    flex-direction: column;\n\n    box-sizing: border-box;\n\n    transition:\n      opacity 150ms ${cssVar.motionEaseOut},\n      transform 150ms ${cssVar.motionEaseOut};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: scaleY(0.92);\n      opacity: 0;\n    }\n  `,\n  positioner: css`\n    z-index: 1100;\n    outline: none;\n  `,\n  prefix: css`\n    display: inline-flex;\n    align-items: center;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  scrollArrow: css`\n    cursor: default;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    height: 16px;\n\n    color: ${cssVar.colorTextSecondary};\n\n    background: ${cssVar.colorBgElevated};\n  `,\n  search: css`\n    cursor: text;\n\n    display: flex;\n    align-items: center;\n\n    min-height: 36px;\n    margin-inline: -4px;\n    padding-block: 8px;\n    padding-inline: 12px;\n    border-block-end: 1px solid ${cssVar.colorFillSecondary};\n  `,\n  searchInput: css`\n    flex: 1;\n\n    min-width: 0;\n    padding-block: 0;\n    padding-inline: 4px;\n    border: 0;\n\n    font-size: 14px;\n    line-height: 20px;\n    color: ${cssVar.colorText};\n\n    background: transparent;\n    outline: none;\n\n    &::placeholder {\n      color: ${cssVar.colorTextPlaceholder};\n    }\n  `,\n  shadow: lobeStaticStylish.shadow,\n  suffix: css`\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  tag: css`\n    display: inline-flex;\n    align-items: center;\n\n    max-width: 100%;\n    padding-block: 0;\n    padding-inline: 6px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    line-height: 20px;\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  tags: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    align-items: center;\n  `,\n  trigger: css`\n    cursor: pointer;\n    user-select: none;\n\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n\n    box-sizing: border-box;\n    width: 100%;\n    border: 1px solid transparent;\n    border-radius: ${cssVar.borderRadius};\n\n    font-family: inherit;\n    color: ${cssVar.colorText};\n\n    background: transparent;\n    outline: none;\n\n    transition: all 150ms ${cssVar.motionEaseOut};\n\n    &:not([data-disabled], [data-readonly])[data-popup-open],\n    &:not([data-disabled], [data-readonly])[data-open],\n    &:not([data-disabled], [data-readonly])[data-state='open'],\n    &:not([data-disabled], [data-readonly])[aria-expanded='true'] {\n      background: var(--lobe-select-open-bg, ${cssVar.colorFillTertiary});\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n\n    &:hover [data-role='lobe-select-clear'] {\n      opacity: 1;\n    }\n\n    &[data-placeholder] [data-role='lobe-select-clear'] {\n      pointer-events: none;\n      opacity: 0;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n      background: var(--lobe-select-disabled-bg, transparent);\n\n      &:hover {\n        background: var(--lobe-select-disabled-bg, transparent);\n      }\n    }\n\n    &[data-readonly] {\n      cursor: default;\n      color: ${cssVar.colorTextSecondary};\n      background: var(--lobe-select-readonly-bg, transparent);\n\n      &:hover {\n        background: var(--lobe-select-readonly-bg, transparent);\n      }\n    }\n\n    &[data-disabled] [data-role='lobe-select-clear'] {\n      pointer-events: none;\n      opacity: 0;\n    }\n  `,\n  triggerLarge: css`\n    min-height: ${controlHeight.large}px;\n    padding-block: 6px;\n    padding-inline: 12px;\n\n    font-size: 16px;\n    line-height: 24px;\n  `,\n  triggerMiddle: css`\n    min-height: ${controlHeight.middle}px;\n    padding-block: 4px;\n    padding-inline: 11px;\n\n    font-size: 14px;\n    line-height: 20px;\n  `,\n  triggerSmall: css`\n    min-height: ${controlHeight.small}px;\n    padding-block: 0;\n    padding-inline: 8px;\n\n    font-size: 12px;\n    line-height: 18px;\n  `,\n  value: css`\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    gap: 4px;\n    align-items: center;\n\n    min-width: 0;\n\n    color: inherit;\n\n    &[data-placeholder] {\n      color: ${cssVar.colorTextPlaceholder};\n    }\n  `,\n  valueText: css`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n}));\n\nexport const triggerVariants = cva(styles.trigger, {\n  defaultVariants: {\n    shadow: false,\n    size: 'middle',\n    variant: 'outlined',\n  },\n  variants: {\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n    size: {\n      large: styles.triggerLarge,\n      middle: styles.triggerMiddle,\n      small: styles.triggerSmall,\n    },\n    variant: {\n      borderless: styles.borderless,\n      filled: styles.filled,\n      outlined: styles.outlined,\n    },\n  },\n});\n"],"mappings":";;;;;AAMA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;CAUV,YAAY,GACVA,cAAkB,mBAClB,GAAG;+BACwB,OAAO,kBAAkB;sDACF,OAAO,kBAAkB;sDACzB,OAAO,kBAAkB;MAE5E;CACD,OAAO,GAAG;;;;aAIC,OAAO,kBAAkB;;;;gCAIN,OAAO,cAAc;;;eAGtC,OAAO,mBAAmB;;;CAGvC,OAAO,GAAG;CACV,QAAQ,GACNA,cAAkB,eAClB,GAAG;+BACwB,OAAO,mBAAmB;sDACH,OAAO,kBAAkB;sDACzB,OAAO,kBAAkB;MAE5E;CACD,OAAO,GAAG;CACV,YAAY,GAAG;CACf,MAAM,GAAG;;;kCAGuB,OAAO,cAAc;;;;;;CAMrD,MAAM,GAAG;CACT,kBAAkB,GAAG;;;;;CAKrB,eAAe,GAAG;;;;;;;;aAQP,OAAO,aAAa;;CAE/B,UAAU,GAAG;CACb,MAAM,GAAG;;;;;;;;CAQT,UAAU,GACRA,cAAkB,iBAClB,GAAG;+BACwB,OAAO,kBAAkB;sDACF,OAAO,iBAAiB;sDACxB,OAAO,iBAAiB;MAE3E;CACD,OAAO,GAAG;;;;;;;;;;;;;;sBAcU,OAAO,cAAc;wBACnB,OAAO,cAAc;;;;;;;;CAQ3C,YAAY,GAAG;;;;CAIf,QAAQ,GAAG;;;aAGA,OAAO,mBAAmB;;CAErC,aAAa,GAAG;;;;;;;;;aASL,OAAO,mBAAmB;;kBAErB,OAAO,gBAAgB;;CAEvC,QAAQ,GAAG;;;;;;;;;;kCAUqB,OAAO,mBAAmB;;CAE1D,aAAa,GAAG;;;;;;;;;;aAUL,OAAO,UAAU;;;;;;eAMf,OAAO,qBAAqB;;;CAGzC,QAAQA,cAAkB;CAC1B,QAAQ,GAAG;;;;aAIA,OAAO,mBAAmB;;CAErC,KAAK,GAAG;;;;;;;qBAOW,OAAO,eAAe;;;;aAI9B,OAAO,UAAU;;kBAEZ,OAAO,kBAAkB;;CAEzC,MAAM,GAAG;;;;;;CAMT,SAAS,GAAG;;;;;;;;;;;qBAWO,OAAO,aAAa;;;aAG5B,OAAO,UAAU;;;;;4BAKF,OAAO,cAAc;;;;;;+CAMF,OAAO,kBAAkB;;;;2BAI7C,OAAO,mBAAmB;;;;;;;;;;;;;;;eAetC,OAAO,kBAAkB;;;;;;;;;;eAUzB,OAAO,mBAAmB;;;;;;;;;;;;;CAavC,cAAc,GAAG;kBACD,cAAc,MAAM;;;;;;;CAOpC,eAAe,GAAG;kBACF,cAAc,OAAO;;;;;;;CAOrC,cAAc,GAAG;kBACD,cAAc,MAAM;;;;;;;CAOpC,OAAO,GAAG;;;;;;;;;;;;eAYG,OAAO,qBAAqB;;;CAGzC,WAAW,GAAG;;;;;CAKf,EAAE;AAEH,MAAa,kBAAkB,IAAI,OAAO,SAAS;CACjD,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,SAAS;EACV;CACD,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACD,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;GACf;EACD,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;GAClB;EACF;CACF,CAAC"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Select/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { controlHeight } from '@/base-ui/controlSize';\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  arrow: css`\n    display: flex;\n    width: 12px;\n    height: 6px;\n\n    & > svg {\n      width: 100%;\n      height: 100%;\n    }\n  `,\n  borderless: cx(\n    lobeStaticStylish.variantBorderless,\n    css`\n      --lobe-select-open-bg: ${cssVar.colorFillTertiary};\n      --lobe-select-readonly-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 70%, transparent);\n      --lobe-select-disabled-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 55%, transparent);\n    `,\n  ),\n  clear: css`\n    display: inline-flex;\n    align-items: center;\n\n    color: ${cssVar.colorTextTertiary};\n\n    opacity: 0;\n\n    transition: opacity 150ms ${cssVar.motionEaseOut};\n\n    &:hover {\n      color: ${cssVar.colorTextSecondary};\n    }\n  `,\n  empty: css``,\n  filled: cx(\n    lobeStaticStylish.variantFilled,\n    css`\n      --lobe-select-open-bg: ${cssVar.colorFillSecondary};\n      --lobe-select-readonly-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 70%, transparent);\n      --lobe-select-disabled-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 55%, transparent);\n    `,\n  ),\n  group: css``,\n  groupLabel: css``,\n  icon: css`\n    display: inline-flex;\n    align-items: center;\n    transition: transform 150ms ${cssVar.motionEaseOut};\n\n    &[data-popup-open] {\n      transform: rotate(180deg);\n    }\n  `,\n  item: css``,\n  itemBoldSelected: css`\n    &[data-selected] {\n      font-weight: 600;\n    }\n  `,\n  itemIndicator: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-inline-start: auto;\n    padding-inline-start: 8px;\n\n    color: ${cssVar.colorPrimary};\n  `,\n  itemText: css``,\n  list: css`\n    overflow-y: auto;\n    flex: 1;\n\n    min-height: 0;\n    max-height: var(--lobe-select-available-height, var(--available-height));\n    padding-block: 0;\n  `,\n  listWithSearch: css`\n    padding-block-start: 4px;\n  `,\n  outlined: cx(\n    lobeStaticStylish.variantOutlined,\n    css`\n      --lobe-select-open-bg: ${cssVar.colorFillTertiary};\n      --lobe-select-readonly-bg: color-mix(in srgb, ${cssVar.colorBgContainer} 75%, transparent);\n      --lobe-select-disabled-bg: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);\n    `,\n  ),\n  popup: css`\n    --lobe-select-available-height: min(\n      var(--available-height),\n      var(--lobe-select-popup-max-height, var(--available-height))\n    );\n\n    transform-origin: var(--transform-origin);\n\n    display: flex;\n    flex-direction: column;\n\n    box-sizing: border-box;\n\n    transition:\n      opacity 150ms ${cssVar.motionEaseOut},\n      transform 150ms ${cssVar.motionEaseOut};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: scaleY(0.92);\n      opacity: 0;\n    }\n  `,\n  positioner: css`\n    z-index: 1100;\n    outline: none;\n  `,\n  prefix: css`\n    display: inline-flex;\n    align-items: center;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  scrollArrow: css`\n    cursor: default;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    height: 16px;\n\n    color: ${cssVar.colorTextSecondary};\n\n    background: ${cssVar.colorBgElevated};\n  `,\n  search: css`\n    cursor: text;\n\n    display: flex;\n    align-items: center;\n\n    min-height: 36px;\n    margin-inline: -4px;\n    padding-block: 8px;\n    padding-inline: 12px;\n    border-block-end: 1px solid ${cssVar.colorFillSecondary};\n  `,\n  searchInput: css`\n    flex: 1;\n\n    min-width: 0;\n    padding-block: 0;\n    padding-inline: 4px;\n    border: 0;\n\n    font-size: 14px;\n    line-height: 20px;\n    color: ${cssVar.colorText};\n\n    background: transparent;\n    outline: none;\n\n    &::placeholder {\n      color: ${cssVar.colorTextPlaceholder};\n    }\n  `,\n  shadow: lobeStaticStylish.shadow,\n  suffix: css`\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  tag: css`\n    display: inline-flex;\n    align-items: center;\n\n    max-width: 100%;\n    padding-block: 0;\n    padding-inline: 6px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    line-height: 20px;\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorFillTertiary};\n\n    &:hover [data-role='lobe-select-tag-remove'] {\n      opacity: 1;\n    }\n  `,\n  tagClose: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-inline-start: 4px;\n\n    color: ${cssVar.colorTextSecondary};\n\n    opacity: 0;\n\n    transition: opacity 150ms ${cssVar.motionEaseOut};\n  `,\n  tags: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    align-items: center;\n  `,\n  tagsValue: css`\n    flex: none;\n  `,\n  tagsSearch: css`\n    display: flex;\n    flex: 1;\n    min-width: 48px;\n  `,\n  trigger: css`\n    cursor: pointer;\n    user-select: none;\n\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n\n    box-sizing: border-box;\n    width: 100%;\n    border: 1px solid transparent;\n    border-radius: ${cssVar.borderRadius};\n\n    font-family: inherit;\n    color: ${cssVar.colorText};\n\n    background: transparent;\n    outline: none;\n\n    transition: all 150ms ${cssVar.motionEaseOut};\n\n    &:not([data-disabled], [data-readonly])[data-popup-open],\n    &:not([data-disabled], [data-readonly])[data-open],\n    &:not([data-disabled], [data-readonly])[data-state='open'],\n    &:not([data-disabled], [data-readonly])[aria-expanded='true'] {\n      background: var(--lobe-select-open-bg, ${cssVar.colorFillTertiary});\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n\n    &:hover [data-role='lobe-select-clear'] {\n      opacity: 1;\n    }\n\n    &[data-placeholder] [data-role='lobe-select-clear'] {\n      pointer-events: none;\n      opacity: 0;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n      background: var(--lobe-select-disabled-bg, transparent);\n\n      &:hover {\n        background: var(--lobe-select-disabled-bg, transparent);\n      }\n    }\n\n    &[data-readonly] {\n      cursor: default;\n      color: ${cssVar.colorTextSecondary};\n      background: var(--lobe-select-readonly-bg, transparent);\n\n      &:hover {\n        background: var(--lobe-select-readonly-bg, transparent);\n      }\n    }\n\n    &[data-disabled] [data-role='lobe-select-clear'] {\n      pointer-events: none;\n      opacity: 0;\n    }\n  `,\n  triggerLarge: css`\n    min-height: ${controlHeight.large}px;\n    padding-block: 6px;\n    padding-inline: 12px;\n\n    font-size: 16px;\n    line-height: 24px;\n  `,\n  triggerMiddle: css`\n    min-height: ${controlHeight.middle}px;\n    padding-block: 4px;\n    padding-inline: 11px;\n\n    font-size: 14px;\n    line-height: 20px;\n  `,\n  triggerSmall: css`\n    min-height: ${controlHeight.small}px;\n    padding-block: 0;\n    padding-inline: 8px;\n\n    font-size: 12px;\n    line-height: 18px;\n  `,\n  value: css`\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    gap: 4px;\n    align-items: center;\n\n    min-width: 0;\n\n    color: inherit;\n\n    &[data-placeholder] {\n      color: ${cssVar.colorTextPlaceholder};\n    }\n  `,\n  valueText: css`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n}));\n\nexport const triggerVariants = cva(styles.trigger, {\n  defaultVariants: {\n    shadow: false,\n    size: 'middle',\n    variant: 'outlined',\n  },\n  variants: {\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n    size: {\n      large: styles.triggerLarge,\n      middle: styles.triggerMiddle,\n      small: styles.triggerSmall,\n    },\n    variant: {\n      borderless: styles.borderless,\n      filled: styles.filled,\n      outlined: styles.outlined,\n    },\n  },\n});\n"],"mappings":";;;;;AAMA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;CAUV,YAAY,GACVA,cAAkB,mBAClB,GAAG;+BACwB,OAAO,kBAAkB;sDACF,OAAO,kBAAkB;sDACzB,OAAO,kBAAkB;MAE5E;CACD,OAAO,GAAG;;;;aAIC,OAAO,kBAAkB;;;;gCAIN,OAAO,cAAc;;;eAGtC,OAAO,mBAAmB;;;CAGvC,OAAO,GAAG;CACV,QAAQ,GACNA,cAAkB,eAClB,GAAG;+BACwB,OAAO,mBAAmB;sDACH,OAAO,kBAAkB;sDACzB,OAAO,kBAAkB;MAE5E;CACD,OAAO,GAAG;CACV,YAAY,GAAG;CACf,MAAM,GAAG;;;kCAGuB,OAAO,cAAc;;;;;;CAMrD,MAAM,GAAG;CACT,kBAAkB,GAAG;;;;;CAKrB,eAAe,GAAG;;;;;;;;aAQP,OAAO,aAAa;;CAE/B,UAAU,GAAG;CACb,MAAM,GAAG;;;;;;;;CAQT,gBAAgB,GAAG;;;CAGnB,UAAU,GACRA,cAAkB,iBAClB,GAAG;+BACwB,OAAO,kBAAkB;sDACF,OAAO,iBAAiB;sDACxB,OAAO,iBAAiB;MAE3E;CACD,OAAO,GAAG;;;;;;;;;;;;;;sBAcU,OAAO,cAAc;wBACnB,OAAO,cAAc;;;;;;;;CAQ3C,YAAY,GAAG;;;;CAIf,QAAQ,GAAG;;;aAGA,OAAO,mBAAmB;;CAErC,aAAa,GAAG;;;;;;;;;aASL,OAAO,mBAAmB;;kBAErB,OAAO,gBAAgB;;CAEvC,QAAQ,GAAG;;;;;;;;;;kCAUqB,OAAO,mBAAmB;;CAE1D,aAAa,GAAG;;;;;;;;;;aAUL,OAAO,UAAU;;;;;;eAMf,OAAO,qBAAqB;;;CAGzC,QAAQA,cAAkB;CAC1B,QAAQ,GAAG;;;;aAIA,OAAO,mBAAmB;;CAErC,KAAK,GAAG;;;;;;;qBAOW,OAAO,eAAe;;;;aAI9B,OAAO,UAAU;;kBAEZ,OAAO,kBAAkB;;;;;;CAMzC,UAAU,GAAG;;;;;;;;;aASF,OAAO,mBAAmB;;;;gCAIP,OAAO,cAAc;;CAEnD,MAAM,GAAG;;;;;;CAMT,WAAW,GAAG;;;CAGd,YAAY,GAAG;;;;;CAKf,SAAS,GAAG;;;;;;;;;;;qBAWO,OAAO,aAAa;;;aAG5B,OAAO,UAAU;;;;;4BAKF,OAAO,cAAc;;;;;;+CAMF,OAAO,kBAAkB;;;;2BAI7C,OAAO,mBAAmB;;;;;;;;;;;;;;;eAetC,OAAO,kBAAkB;;;;;;;;;;eAUzB,OAAO,mBAAmB;;;;;;;;;;;;;CAavC,cAAc,GAAG;kBACD,cAAc,MAAM;;;;;;;CAOpC,eAAe,GAAG;kBACF,cAAc,OAAO;;;;;;;CAOrC,cAAc,GAAG;kBACD,cAAc,MAAM;;;;;;;CAOpC,OAAO,GAAG;;;;;;;;;;;;eAYG,OAAO,qBAAqB;;;CAGzC,WAAW,GAAG;;;;;CAKf,EAAE;AAEH,MAAa,kBAAkB,IAAI,OAAO,SAAS;CACjD,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,SAAS;EACV;CACD,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACD,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;GACf;EACD,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;GAClB;EACF;CACF,CAAC"}

package/es/base-ui/Select/type.d.mts

@@ -73,7 +73,7 @@ interface SelectProps<Value = string> {
   loading?: boolean;
   mode?: 'multiple' | 'tags';
   name?: string;
-  onChange?: (value: Value | Value[] | null, option?: SelectOption<Value> | SelectOption<Value>[]) => void;
+  onChange?: (value: Value | Value[] | null | undefined, option?: SelectOption<Value> | SelectOption<Value>[]) => void;
   onOpenChange?: (open: boolean, eventDetails?: SelectRootChangeEventDetails) => void;
   onSelect?: (value: Value, option?: SelectOption<Value>) => void;
   open?: boolean;

package/es/base-ui/Switch/atoms.mjs

@@ -5,7 +5,7 @@ import { createContext, use, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { cx } from "antd-style";
 import { useReducedMotion } from "motion/react";
-import useMergeState from "use-merge-value";
+import useControlledState from "use-merge-value";
 import { Switch } from "@base-ui/react/switch";
 //#region src/base-ui/Switch/atoms.tsx
 const SwitchContext = createContext(null);
@@ -18,7 +18,7 @@ const SwitchRoot = ({ checked, className, defaultChecked, onCheckedChange, onCli
 	const Motion = useMotionComponent();
 	const [isPressed, setIsPressed] = useState(false);
 	const lastEventRef = useRef(null);
-	const [isChecked, setIsChecked] = useMergeState(defaultChecked ?? false, {
+	const [isChecked, setIsChecked] = useControlledState(defaultChecked ?? false, {
 		defaultValue: defaultChecked,
 		onChange: (value) => {
 			if (lastEventRef.current) onCheckedChange?.(value, lastEventRef.current);
@@ -47,6 +47,7 @@ const SwitchRoot = ({ checked, className, defaultChecked, onCheckedChange, onCli
 	return /* @__PURE__ */ jsx(SwitchContext, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx(Switch.Root, {
+			nativeButton: true,
 			checked: isChecked,
 			defaultChecked,
 			disabled,