rsuite 6.0.0-canary-2025032014 → 6.0.0-canary-20250416

package/esm/RangeSlider/RangeSlider.js

@@ -7,6 +7,7 @@ import getOffset from 'dom-lib/getOffset';
 import ProgressBar from "../Slider/ProgressBar.js";
 import Handle from "../Slider/Handle.js";
 import Graduated from "../Slider/Graduated.js";
+import Plaintext from "../internals/Plaintext/index.js";
 import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
@@ -35,16 +36,21 @@ const RangeSlider = forwardRef((props, ref) => {
     disabled,
     graduated,
     progress = true,
+    keepTooltipOpen = false,
     vertical,
     readOnly,
     min = 0,
     max: maxProp = 100,
     step = 1,
+    size = 'sm',
     value: valueProp,
     handleClassName,
     handleStyle,
     handleTitle,
     tooltip = true,
+    marks,
+    plaintext,
+    placeholder,
     getAriaValueText,
     renderTooltip,
     renderMark,
@@ -260,7 +266,6 @@ const RangeSlider = forwardRef((props, ref) => {
     position: (value[1] - min) / (max - min) * 100
   }], [ariaValuetext, getAriaValueText, max, min, value]);
   const handleCommonProps = {
-    rtl,
     disabled,
     vertical,
     tooltip,
@@ -276,12 +281,21 @@ const RangeSlider = forwardRef((props, ref) => {
     'aria-valuemax': max,
     'aria-valuemin': min,
     'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledby
+    'aria-labelledby': ariaLabelledby,
+    keepTooltipOpen
   };
+  if (plaintext) {
+    return /*#__PURE__*/React.createElement(Plaintext, {
+      localeKey: "notSelected",
+      ref: ref,
+      placeholder: placeholder
+    }, value && (value[0] || value[1]) ? value.join('~') : null);
+  }
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: as,
     ref: ref,
-    className: classes
+    className: classes,
+    "data-size": size
   }, rest), /*#__PURE__*/React.createElement("div", {
     className: merge(barClassName, prefix('bar')),
     ref: barRef,
@@ -297,6 +311,7 @@ const RangeSlider = forwardRef((props, ref) => {
     max: max,
     count: count,
     value: value,
+    marks: marks,
     renderMark: renderMark
   })), /*#__PURE__*/React.createElement(Handle, _extends({
     "data-range": value

package/esm/Rate/Character.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import { BoxProps } from '../internals/Box';
+import type { StarStatus } from './types';
 interface CharacterProps extends BoxProps {
     vertical?: boolean;
-    status?: 0 | 0.5 | 1;
+    status?: StarStatus;
     disabled?: boolean;
-    onMouseMove?: (key: any, event: React.MouseEvent) => void;
-    onClick?: (key: any, event: React.MouseEvent) => void;
+    onMouseMove?: (key: 'before' | 'after', event: React.MouseEvent) => void;
+    onClick?: (key: 'before' | 'after', event: React.MouseEvent) => void;
     onKeyDown?: (event: React.KeyboardEvent) => void;
 }
 declare const Character: import("../internals/types").InternalRefForwardingComponent<"li", CharacterProps, never> & Record<string, never>;

package/esm/Rate/Character.js

@@ -1,17 +1,14 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useRef } from 'react';
+import React, { useRef, useMemo } from 'react';
 import contains from 'dom-lib/contains';
-import isNil from 'lodash/isNil';
 import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
+import { getStarStatus } from "./utils.js";
 import { useStyles, useEventCallback } from "../internals/hooks/index.js";
-const characterStatus = {
-  [0]: 'empty',
-  [0.5]: 'half',
-  [1]: 'full'
+const getKey = (element, target) => {
+  return element && target && contains(element, target) ? 'before' : 'after';
 };
-const getKey = (a, b) => contains(a, b) ? 'before' : 'after';
 const Character = forwardRef((props, ref) => {
   const {
     as = 'li',
@@ -27,27 +24,34 @@ const Character = forwardRef((props, ref) => {
     ...rest
   } = props;
   const {
-    merge,
     prefix,
-    withPrefix
+    withPrefix,
+    merge
   } = useStyles(classPrefix);
   const beforeRef = useRef(null);
-  const classes = merge(className, withPrefix(!isNil(status) && characterStatus[status]));
   const handleMouseMove = useEventCallback(event => {
     onMouseMove === null || onMouseMove === void 0 || onMouseMove(getKey(beforeRef.current, event.target), event);
   });
   const handleClick = useEventCallback(event => {
     onClick === null || onClick === void 0 || onClick(getKey(beforeRef.current, event.target), event);
   });
+  const eventHandlers = useMemo(() => {
+    if (disabled) {
+      return null;
+    }
+    return {
+      onClick: handleClick,
+      onKeyDown,
+      onMouseMove: handleMouseMove
+    };
+  }, [disabled, handleClick, onKeyDown, handleMouseMove]);
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: as,
     ref: ref,
-    className: classes,
-    tabIndex: 0,
-    onClick: disabled ? null : handleClick,
-    onKeyDown: disabled ? null : onKeyDown,
-    onMouseMove: disabled ? null : handleMouseMove
-  }, rest), /*#__PURE__*/React.createElement("div", {
+    className: merge(className, withPrefix()),
+    tabIndex: disabled ? -1 : 0,
+    "data-status": getStarStatus(status)
+  }, eventHandlers, rest), /*#__PURE__*/React.createElement("div", {
     ref: beforeRef,
     className: prefix('before', {
       vertical

package/esm/Rate/Rate.d.ts

@@ -1,18 +1,26 @@
 import React from 'react';
-import { BoxProps } from '../internals/Box';
+import { StyledBoxProps } from '../internals/StyledBox';
 import type { Color, FormControlBaseProps, Size } from '../internals/types';
-export interface RateProps<T = number> extends BoxProps, FormControlBaseProps<T> {
+export interface RateProps<T = number> extends Omit<StyledBoxProps, 'name'>, FormControlBaseProps<T> {
+    /** Whether to allow semi selection */
     allowHalf?: boolean;
+    /** Custom character of rate */
     character?: React.ReactNode;
+    /** The prefix of the component CSS class */
     classPrefix?: string;
+    /** Whether to allow cancel selection */
     cleanable?: boolean;
     /** A rate can have different sizes */
     size?: Size;
     /** A rate can have different colors */
     color?: Color | React.CSSProperties['color'];
+    /** Maximum rate */
     max?: number;
+    /** Vertical Rate half */
     vertical?: boolean;
+    /** Render custom character */
     renderCharacter?: (value: number, index: number) => React.ReactNode;
+    /** Callback function when hover state changes */
     onChangeActive?: (value: T, event: React.SyntheticEvent) => void;
 }
 /**

package/esm/Rate/Rate.js

@@ -1,15 +1,16 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useEffect, useCallback, useState, useMemo } from 'react';
+import React from 'react';
 import isNil from 'lodash/isNil';
 import Star from '@rsuite/icons/Star';
 import Character from "./Character.js";
 import Plaintext from "../internals/Plaintext/index.js";
-import Box from "../internals/Box/index.js";
+import StyledBox from "../internals/StyledBox/index.js";
 import { KEY_VALUES } from "../internals/constants/index.js";
 import { useControlled, useStyles, useEventCallback } from "../internals/hooks/index.js";
-import { forwardRef, shallowEqualArray, isPresetColor, createColorVariables, mergeStyles } from "../internals/utils/index.js";
-import { transformValueToCharacterMap, transformCharacterMapToValue } from "./utils.js";
+import { forwardRef, shallowEqualArray, mergeStyles } from "../internals/utils/index.js";
+import { transformStarStatusToValue, getFractionalValue } from "./utils.js";
+import { useRatingStates } from "./useRatingStates.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
  * The `Rate` component is used for rating. It can be used to evaluate the quality of the content.
@@ -28,7 +29,7 @@ const Rate = forwardRef((props, ref) => {
     max = 5,
     readOnly,
     vertical,
-    size = 'md',
+    size,
     color,
     allowHalf = false,
     value: valueProp,
@@ -42,39 +43,37 @@ const Rate = forwardRef((props, ref) => {
     ...rest
   } = propsWithDefaults;
   const [value, setValue] = useControlled(valueProp, defaultValue);
-  const getCharacterMap = useCallback(v => {
-    return transformValueToCharacterMap(typeof v !== 'undefined' ? v : value, max, allowHalf);
-  }, [allowHalf, max, value]);
-  const [characterMap, setCharacterMap] = useState(getCharacterMap());
-  const hoverValue = transformCharacterMapToValue(characterMap);
   const {
     merge,
     withPrefix
   } = useStyles(classPrefix);
-  const classes = merge(className, withPrefix(size, isPresetColor(color) && color, {
-    disabled,
-    readonly: readOnly
-  }));
-  const styles = useMemo(() => mergeStyles(style, createColorVariables(color, '--rs-rate-symbol-checked')), [style, color]);
-  const resetCharacterMap = useCallback(() => {
-    setCharacterMap(getCharacterMap());
-  }, [getCharacterMap]);
-  useEffect(() => {
-    // Update characterMap when value is updated.
-    setCharacterMap(getCharacterMap(valueProp));
-  }, [valueProp]);
+  const classes = merge(className, withPrefix());
+
+  // Use the custom hook to manage rating star states
+  const {
+    starStates,
+    setStarStates,
+    resetStarStates,
+    hoverValue,
+    getStarStates
+  } = useRatingStates({
+    value,
+    max,
+    allowHalf,
+    valueProp
+  });
   const handleMouseLeave = useEventCallback(event => {
-    resetCharacterMap();
+    resetStarStates();
     onChangeActive === null || onChangeActive === void 0 || onChangeActive(value, event);
   });
   const handleChangeValue = useEventCallback((index, event) => {
-    let nextValue = transformCharacterMapToValue(characterMap);
-    if (cleanable && value === nextValue && getCharacterMap(value)[index] === characterMap[index]) {
+    let nextValue = transformStarStatusToValue(starStates);
+    if (cleanable && value === nextValue && getStarStates(value)[index] === starStates[index]) {
       nextValue = 0;
     }
     if (nextValue !== value) {
       setValue(nextValue);
-      setCharacterMap(getCharacterMap(nextValue));
+      setStarStates(getStarStates(nextValue));
       onChange === null || onChange === void 0 || onChange(nextValue, event);
     }
   });
@@ -82,59 +81,67 @@ const Rate = forwardRef((props, ref) => {
     const {
       key
     } = event;
-    let nextValue = transformCharacterMapToValue(characterMap);
+    let nextValue = transformStarStatusToValue(starStates);
     if (key === KEY_VALUES.RIGHT && nextValue < max) {
       nextValue = allowHalf ? nextValue + 0.5 : nextValue + 1;
     } else if (key === KEY_VALUES.LEFT && nextValue > 0) {
       nextValue = allowHalf ? nextValue - 0.5 : nextValue - 1;
     }
-    setCharacterMap(getCharacterMap(nextValue));
+    setStarStates(getStarStates(nextValue));
     if (key === KEY_VALUES.ENTER) {
       handleChangeValue(index, event);
     }
   });
-  const handleChangeCharacterMap = useEventCallback((index, key, event) => {
-    const nextCharacterMap = characterMap.map((_item, i) => {
+  const handleChangeStarStates = useEventCallback((index, key, event) => {
+    const nextStarStates = starStates.map((_item, i) => {
       if (i === index && key === 'before' && allowHalf) {
         return 0.5;
       }
       return index >= i ? 1 : 0;
     });
-    if (!shallowEqualArray(characterMap, nextCharacterMap)) {
-      setCharacterMap(nextCharacterMap);
-      onChangeActive === null || onChangeActive === void 0 || onChangeActive(transformCharacterMapToValue(nextCharacterMap), event);
+    if (!shallowEqualArray(starStates, nextStarStates)) {
+      setStarStates(nextStarStates);
+      onChangeActive === null || onChangeActive === void 0 || onChangeActive(transformStarStatusToValue(nextStarStates), event);
     }
   });
   const handleClick = useEventCallback((index, key, event) => {
-    handleChangeCharacterMap(index, key, event);
+    handleChangeStarStates(index, key, event);
     handleChangeValue(index, event);
   });
   if (plaintext) {
     return /*#__PURE__*/React.createElement(Plaintext, {
       localeKey: "notSelected",
       className: className
-    }, !isNil(value) ? `${value}(${max})` : null);
+    }, !isNil(value) ? `${value}/${max}` : null);
   }
-  return /*#__PURE__*/React.createElement(Box, _extends({
+  const mergedStyle = mergeStyles(style, {
+    '--rs-rate-before-size': getFractionalValue(value)
+  });
+  return /*#__PURE__*/React.createElement(StyledBox, _extends({
     as: as,
+    name: "rate",
+    size: size,
+    color: color,
     role: "radiogroup",
-    tabIndex: 0,
+    tabIndex: disabled ? -1 : 0,
     ref: ref,
     className: classes,
-    style: styles,
-    onMouseLeave: handleMouseLeave
-  }, rest), characterMap.map((item, index) => /*#__PURE__*/React.createElement(Character, {
+    style: mergedStyle,
+    onMouseLeave: handleMouseLeave,
+    "data-disabled": disabled,
+    "data-readonly": readOnly
+  }, rest), starStates.map((status, index) => /*#__PURE__*/React.createElement(Character, {
     role: "radio",
     "aria-posinset": index + 1,
     "aria-setsize": max,
     "aria-checked": value === index + 1,
     key: index,
-    status: item,
+    status: status,
     disabled: disabled || readOnly,
     vertical: vertical,
     onClick: (key, event) => handleClick(index, key, event),
     onKeyDown: event => handleKeyDown(index, event),
-    onMouseMove: (key, event) => handleChangeCharacterMap(index, key, event)
+    onMouseMove: (key, event) => handleChangeStarStates(index, key, event)
   }, renderCharacter ? renderCharacter(hoverValue, index) : character)));
 });
 Rate.displayName = 'Rate';

package/esm/Rate/types.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Represents the status of a star in a rating system.
+ * 0: Empty star
+ * 0.5: Half-filled star
+ * 1: Fully filled star
+ * number: Any other fractional value for custom fill levels
+ */
+export type StarStatus = 0 | 0.5 | 1 | number;

package/esm/Rate/types.js

@@ -0,0 +1,2 @@
+'use client';
+export {};

package/esm/Rate/useRatingStates.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import type { StarStatus } from './types';
+interface UseRatingStatesParams {
+    value: number;
+    max: number;
+    allowHalf: boolean;
+    valueProp?: number;
+}
+interface UseRatingStatesReturn {
+    starStates: StarStatus[];
+    hoverValue: number;
+    setStarStates: React.Dispatch<React.SetStateAction<StarStatus[]>>;
+    resetStarStates: () => void;
+    getStarStates: (v?: number) => StarStatus[];
+}
+/**
+ * Custom hook to manage rating star states for Rate component
+ */
+export declare const useRatingStates: ({ value, max, allowHalf, valueProp }: UseRatingStatesParams) => UseRatingStatesReturn;
+export {};

package/esm/Rate/useRatingStates.js

@@ -0,0 +1,43 @@
+'use client';
+import { useState, useCallback, useEffect } from 'react';
+import { transformValueToStarStatus, transformStarStatusToValue } from "./utils.js";
+/**
+ * Custom hook to manage rating star states for Rate component
+ */
+export const useRatingStates = _ref => {
+  let {
+    value,
+    max,
+    allowHalf,
+    valueProp
+  } = _ref;
+  // Create a function to generate star states based on value
+  const getStarStates = useCallback(v => {
+    return transformValueToStarStatus(typeof v !== 'undefined' ? v : value, max, allowHalf);
+  }, [allowHalf, max, value]);
+
+  // Initialize star states
+  const [starStates, setStarStates] = useState(getStarStates());
+
+  // Calculate hover value from star states
+  const hoverValue = transformStarStatusToValue(starStates);
+
+  // Function to reset star states to current value
+  const resetStarStates = useCallback(() => {
+    setStarStates(getStarStates());
+  }, [getStarStates]);
+
+  // Update star states when value prop changes
+  useEffect(() => {
+    if (typeof valueProp !== 'undefined') {
+      setStarStates(getStarStates(valueProp));
+    }
+  }, [valueProp, getStarStates]);
+  return {
+    starStates,
+    setStarStates,
+    resetStarStates,
+    hoverValue,
+    getStarStates
+  };
+};

package/esm/Rate/utils.d.ts

@@ -1,3 +1,14 @@
-export type CharacterType = 0 | 0.5 | 1;
-export declare const transformValueToCharacterMap: (value: number, max: number, allowHalf: boolean) => CharacterType[];
-export declare const transformCharacterMapToValue: (characterMap: CharacterType[]) => number;
+import type { StarStatus } from './types';
+/**
+ * Transforms a numeric value into a character map array.
+ */
+export declare const transformValueToStarStatus: (value: number, max: number, allowHalf: boolean) => StarStatus[];
+/**
+ * Transforms a character map array into a numeric value.
+ */
+export declare const transformStarStatusToValue: (characterMap: StarStatus[]) => number;
+/**
+ * Calculates the fractional part of a value as a percentage string.
+ */
+export declare const getFractionalValue: (value: number) => string | undefined;
+export declare const getStarStatus: (status?: StarStatus) => any;

package/esm/Rate/utils.js

@@ -1,19 +1,58 @@
 'use client';
-export const transformValueToCharacterMap = (value, max, allowHalf) => {
+/**
+ * Transforms a numeric value into a character map array.
+ */
+export const transformValueToStarStatus = (value, max, allowHalf) => {
   const characterMap = [];
   for (let i = 0; i < max; i++) {
-    if (i < value) {
-      if (allowHalf && i + 1 > value) {
-        value && characterMap.push(0.5);
+    if (i < value && value >= i + 1) {
+      // Fully filled star
+      characterMap.push(1);
+    } else if (i < value && value < i + 1) {
+      // Partially filled star
+      if (allowHalf) {
+        // Use 0.5 to represent partial fill when half ratings are allowed
+        characterMap.push(0.5);
       } else {
-        characterMap.push(1);
+        // Extract the decimal part
+        characterMap.push(value - i);
       }
     } else {
+      // Empty star
       characterMap.push(0);
     }
   }
   return characterMap;
 };
-export const transformCharacterMapToValue = characterMap => characterMap.reduce((total, currentValue) => {
+
+/**
+ * Transforms a character map array into a numeric value.
+ */
+export const transformStarStatusToValue = characterMap => characterMap.reduce((total, currentValue) => {
   return total + currentValue;
-});
+});
+
+/**
+ * Calculates the fractional part of a value as a percentage string.
+ */
+export const getFractionalValue = value => {
+  if (!value) {
+    return undefined;
+  }
+  const integer = Math.floor(value);
+  const decimal = value - integer;
+
+  // Round to avoid floating-point precision issues
+  return decimal ? `${Math.round(decimal * 100)}%` : undefined;
+};
+const starStatusMap = {
+  [0]: 'empty',
+  [0.5]: 'half',
+  [1]: 'full'
+};
+export const getStarStatus = status => {
+  if (typeof status === 'number') {
+    return starStatusMap[status] || 'frac';
+  }
+  return null;
+};

package/esm/SelectPicker/SelectPicker.js

@@ -4,12 +4,10 @@ import React, { useState } from 'react';
 import pick from 'lodash/pick';
 import isNil from 'lodash/isNil';
 import isFunction from 'lodash/isFunction';
-import omit from 'lodash/omit';
 import SearchBox from "../internals/SearchBox/index.js";
-import Box from "../internals/Box/index.js";
 import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef, createChainedFunction, mergeRefs, shallowEqual, getDataGroupBy } from "../internals/utils/index.js";
-import { Listbox, ListItem, PickerToggle, PickerToggleTrigger, PickerPopup, useFocusItemValue, usePickerClassName, useSearch, useToggleKeyDownEvent, usePickerRef, pickTriggerPropKeys, omitTriggerPropKeys } from "../internals/Picker/index.js";
+import { Listbox, ListItem, PickerToggle, PickerToggleTrigger, PickerPopup, useFocusItemValue, useSearch, useToggleKeyDownEvent, usePickerRef, triggerPropKeys } from "../internals/Picker/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 const emptyArray = [];
 /**
@@ -21,45 +19,47 @@ const SelectPicker = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('SelectPicker', props);
   const {
-    as,
     appearance = 'default',
-    data = emptyArray,
-    valueKey = 'value',
-    labelKey = 'label',
-    value: valueProp,
+    as,
+    block,
+    className,
+    cleanable = true,
     classPrefix = 'picker',
-    placeholder,
+    data = emptyArray,
     defaultValue,
     disabled,
-    cleanable = true,
+    disabledItemValues = emptyArray,
+    groupBy,
+    id,
+    labelKey = 'label',
+    listProps,
+    listboxMaxHeight = 320,
+    locale,
+    placeholder,
     placement = 'bottomStart',
-    popupClassName,
     popupAutoWidth = true,
+    popupClassName,
     popupStyle,
-    listboxMaxHeight = 320,
-    groupBy,
-    locale,
-    toggleAs,
-    style,
     searchable = true,
-    disabledItemValues = emptyArray,
+    style,
+    toggleAs,
+    value: valueProp,
+    valueKey = 'value',
     virtualized,
-    listProps,
-    id,
-    onGroupTitleClick,
-    searchBy,
-    onEntered,
-    onExited,
-    onClean,
-    onChange,
-    onSelect,
-    onSearch,
     sort,
+    searchBy,
     renderValue,
     renderListbox,
     renderOptionGroup,
     renderOption,
     renderExtraFooter,
+    onGroupTitleClick,
+    onEnter,
+    onExit,
+    onClean,
+    onChange,
+    onSelect,
+    onSearch,
     ...rest
   } = propsWithDefaults;
   const {
@@ -153,13 +153,13 @@ const SelectPicker = forwardRef((props, ref) => {
     onMenuPressEnter: handleMenuPressEnter,
     ...rest
   });
-  const handleExited = useEventCallback(() => {
+  const handleExit = useEventCallback(() => {
     resetSearch();
     setActive(false);
     onSearch === null || onSearch === void 0 || onSearch('');
     setFocusItemValue(null);
   });
-  const handleEntered = useEventCallback(() => {
+  const handleEnter = useEventCallback(() => {
     setActive(true);
     setFocusItemValue(value);
   });
@@ -237,28 +237,27 @@ const SelectPicker = forwardRef((props, ref) => {
       inputRef: searchInput
     }), renderListbox ? renderListbox(listbox) : listbox, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
-  const [classes, usedClassNamePropKeys] = usePickerClassName({
-    ...props,
-    classPrefix,
-    appearance,
-    hasValue,
-    name: 'select',
-    cleanable
-  });
+  const triggerProps = {
+    ...pick(props, triggerPropKeys),
+    onEnter: createChainedFunction(handleEnter, onEnter),
+    onExit: createChainedFunction(handleExit, onExit)
+  };
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
+    as: as,
     id: id,
-    pickerProps: pick(props, pickTriggerPropKeys),
+    name: "select",
+    block: block,
+    disabled: disabled,
+    appearance: appearance,
+    triggerProps: triggerProps,
     ref: trigger,
     placement: placement,
-    onEntered: createChainedFunction(handleEntered, onEntered),
-    onExited: createChainedFunction(handleExited, onExited),
-    speaker: renderPopup
-  }, /*#__PURE__*/React.createElement(Box, {
-    as: as,
-    className: classes,
+    speaker: renderPopup,
+    rootRef: root,
     style: style,
-    ref: root
-  }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [...omitTriggerPropKeys, ...usedClassNamePropKeys]), {
+    classPrefix: classPrefix,
+    className: className
+  }, /*#__PURE__*/React.createElement(PickerToggle, _extends({
     ref: target,
     appearance: appearance,
     onClean: createChainedFunction(handleClean, onClean),
@@ -271,7 +270,7 @@ const SelectPicker = forwardRef((props, ref) => {
     focusItemValue: focusItemValue,
     active: active,
     placement: placement
-  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));
+  }, rest), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder)));
 });
 SelectPicker.displayName = 'SelectPicker';
 export default SelectPicker;