@lobehub/ui 5.61.0 → 5.61.1

package/es/base-ui/Input/style.d.mts

@@ -30,7 +30,7 @@ declare const styles: {
 };
 declare const rootVariants: (props?: ({
   shadow?: boolean | null | undefined;
-  size?: "small" | "middle" | "large" | null | undefined;
+  size?: "large" | "middle" | "small" | null | undefined;
   variant?: "filled" | "outlined" | "borderless" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

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

@@ -2,7 +2,7 @@
 import { styles } from "../DropdownMenu/sharedStyle.mjs";
 import { styles as styles$1, triggerVariants } from "./style.mjs";
 import { SelectPositioner } from "./atoms.mjs";
-import { isValueEmpty } from "./helpers.mjs";
+import { isValueEmpty, shouldIgnoreRootValueChange } from "./helpers.mjs";
 import { usePortalContainer, useSelectOpen, useSelectSearch, useSelectValue, useSelectVirtual } from "./hooks.mjs";
 import { EmptyContent, SelectListSection, SelectSearchInput, SelectTriggerSuffix, createTriggerValueRenderer, resolveIconNode, resolveSuffixIcon } from "./parts.mjs";
 import { renderOptions } from "./renderOptions.mjs";
@@ -36,13 +36,6 @@ 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,
@@ -54,6 +47,20 @@ const Select$1 = memo(({ allowClear, autoFocus, className, classNames, defaultOp
 		showSearch,
 		tokenSeparators
 	});
+	const handleRootValueChange = useCallback((nextValue, eventDetails) => {
+		if (isTags && !mergedOpen) return;
+		if (shouldIgnoreRootValueChange({
+			mergedOpen,
+			reason: eventDetails?.reason,
+			searchValue
+		})) return;
+		handleValueChange(nextValue);
+	}, [
+		handleValueChange,
+		isTags,
+		mergedOpen,
+		searchValue
+	]);
 	const virtualState = useSelectVirtual({
 		filteredOptions,
 		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 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        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      })\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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"}
+{"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, shouldIgnoreRootValueChange } 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 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    // Base UI prunes selected values that are missing from the registered (filtered) options\n    // and reports it with reason 'none'. Ignore it while open or while closing with a stale\n    // search term, so searching never mutates the value. Closed typeahead stays valid.\n    const handleRootValueChange = useCallback(\n      (nextValue: any, eventDetails?: { reason?: string }) => {\n        if (isTags && !mergedOpen) return;\n        if (shouldIgnoreRootValueChange({ mergedOpen, reason: eventDetails?.reason, searchValue }))\n          return;\n        handleValueChange(nextValue);\n      },\n      [handleValueChange, isTags, mergedOpen, searchValue],\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        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      })\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

@@ -26,7 +26,14 @@ const normalizeValueFor = (isMultiple) => (nextValue) => {
 	if (Array.isArray(nextValue)) return nextValue[0] ?? null;
 	return nextValue === void 0 ? null : nextValue;
 };
+/**
+* Base UI reports value changes it derives itself (e.g. pruning selected values that are
+* missing from the filtered options) with reason 'none'. While the popup is open, or while
+* it is closing and the search term has not been reset yet, those are not user selections.
+* A 'none' change on a fully closed select is a typeahead selection and stays valid.
+*/
+const shouldIgnoreRootValueChange = ({ mergedOpen, reason, searchValue }) => reason === "none" && (mergedOpen || searchValue !== "");
 //#endregion
-export { countVirtualItems, getOptionSearchText, isGroupOption, isValueEmpty, normalizeValueFor, splitBySeparators };
+export { countVirtualItems, getOptionSearchText, isGroupOption, isValueEmpty, normalizeValueFor, shouldIgnoreRootValueChange, splitBySeparators };
 
 //# sourceMappingURL=helpers.mjs.map

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 (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,OAAO;AAE7F,MAAa,uBAA8B,WAAgC;CACzE,IAAI,OAAO,OAAO,UAAU,YAAY,OAAO,OAAO,UAAU,UAC9D,OAAO,OAAO,OAAO,KAAK;CAE5B,IAAI,OAAO,OAAO,OAAO,OAAO;CAChC,IAAI,OAAO,OAAO,UAAU,YAAY,OAAO,OAAO,UAAU,UAC9D,OAAO,OAAO,OAAO,KAAK;CAE5B,OAAO;AACT;AAEA,MAAM,gBAAgB,UAAkB,MAAM,WAAW,uBAAuB,MAAM;AAEtF,MAAa,qBAAqB,OAAe,eAA0B;CACzE,IAAI,CAAC,cAAc,WAAW,WAAW,GAAG,OAAO,CAAC,KAAK;CACzD,MAAM,UAAU,WAAW,IAAI,YAAY,CAAC,CAAC,KAAK,GAAG;CACrD,OAAO,MAAM,MAAM,IAAI,OAAO,SAAS,GAAG,CAAC;AAC7C;AAEA,MAAa,qBAAqB,UAChC,MAAM,QAAQ,OAAO,SAAS;CAC5B,IAAI,cAAc,IAAI,GACpB,OAAO,QAAQ,KAAK,QAAQ,SAAS;CAEvC,OAAO,QAAQ;AACjB,GAAG,CAAC;AAEN,MAAa,gBAAgB,UAC3B,UAAU,QAAQ,UAAU,KAAA,KAAa,UAAU;AAErD,MAAa,qBAAqB,gBAAyB,cAAmB;CAC5E,IAAI,YAAY;EACd,IAAI,MAAM,QAAQ,SAAS,GAAG,OAAO;EACrC,IAAI,cAAc,QAAQ,cAAc,KAAA,GAAW,OAAO,CAAC;EAC3D,OAAO,CAAC,SAAS;CACnB;CACA,IAAI,MAAM,QAAQ,SAAS,GAAG,OAAO,UAAU,MAAM;CACrD,OAAO,cAAc,KAAA,IAAY,OAAO;AAC1C"}
+{"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\n/**\n * Base UI reports value changes it derives itself (e.g. pruning selected values that are\n * missing from the filtered options) with reason 'none'. While the popup is open, or while\n * it is closing and the search term has not been reset yet, those are not user selections.\n * A 'none' change on a fully closed select is a typeahead selection and stays valid.\n */\nexport const shouldIgnoreRootValueChange = ({\n  mergedOpen,\n  reason,\n  searchValue,\n}: {\n  mergedOpen: boolean;\n  reason?: string;\n  searchValue: string;\n}) => reason === 'none' && (mergedOpen || searchValue !== '');\n"],"mappings":";AAEA,MAAa,iBACX,WACuC,QAAS,OAAoC,OAAO;AAE7F,MAAa,uBAA8B,WAAgC;CACzE,IAAI,OAAO,OAAO,UAAU,YAAY,OAAO,OAAO,UAAU,UAC9D,OAAO,OAAO,OAAO,KAAK;CAE5B,IAAI,OAAO,OAAO,OAAO,OAAO;CAChC,IAAI,OAAO,OAAO,UAAU,YAAY,OAAO,OAAO,UAAU,UAC9D,OAAO,OAAO,OAAO,KAAK;CAE5B,OAAO;AACT;AAEA,MAAM,gBAAgB,UAAkB,MAAM,WAAW,uBAAuB,MAAM;AAEtF,MAAa,qBAAqB,OAAe,eAA0B;CACzE,IAAI,CAAC,cAAc,WAAW,WAAW,GAAG,OAAO,CAAC,KAAK;CACzD,MAAM,UAAU,WAAW,IAAI,YAAY,CAAC,CAAC,KAAK,GAAG;CACrD,OAAO,MAAM,MAAM,IAAI,OAAO,SAAS,GAAG,CAAC;AAC7C;AAEA,MAAa,qBAAqB,UAChC,MAAM,QAAQ,OAAO,SAAS;CAC5B,IAAI,cAAc,IAAI,GACpB,OAAO,QAAQ,KAAK,QAAQ,SAAS;CAEvC,OAAO,QAAQ;AACjB,GAAG,CAAC;AAEN,MAAa,gBAAgB,UAC3B,UAAU,QAAQ,UAAU,KAAA,KAAa,UAAU;AAErD,MAAa,qBAAqB,gBAAyB,cAAmB;CAC5E,IAAI,YAAY;EACd,IAAI,MAAM,QAAQ,SAAS,GAAG,OAAO;EACrC,IAAI,cAAc,QAAQ,cAAc,KAAA,GAAW,OAAO,CAAC;EAC3D,OAAO,CAAC,SAAS;CACnB;CACA,IAAI,MAAM,QAAQ,SAAS,GAAG,OAAO,UAAU,MAAM;CACrD,OAAO,cAAc,KAAA,IAAY,OAAO;AAC1C;;;;;;;AAQA,MAAa,+BAA+B,EAC1C,YACA,QACA,kBAKI,WAAW,WAAW,cAAc,gBAAgB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "5.61.0",
+  "version": "5.61.1",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",