rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-2025031415

package/cjs/Grid/index.d.ts

@@ -1,4 +1,9 @@
 import Grid from './Grid';
+import Row from './Row';
+import Col from './Col';
 export type { GridProps } from './Grid';
-export { Grid };
+export type { RowProps } from './Row';
+export type { ColProps } from './Col';
+export type { RowAlignment, RowJustify } from './types';
+export { Grid, Row, Col };
 export default Grid;

package/cjs/Grid/index.js

@@ -6,6 +6,10 @@ exports.__esModule = true;
 exports.default = void 0;
 var _Grid = _interopRequireDefault(require("./Grid"));
 exports.Grid = _Grid.default;
+var _Row = _interopRequireDefault(require("./Row"));
+exports.Row = _Row.default;
+var _Col = _interopRequireDefault(require("./Col"));
+exports.Col = _Col.default;
 // export types
 // export components
 var _default = exports.default = _Grid.default;

package/cjs/Grid/types.d.ts

@@ -0,0 +1,65 @@
+export type RowAlignment = 'top' | 'middle' | 'bottom';
+export type RowJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
+/** @deprecated Use new responsive props format instead */
+export interface DeprecatedColProps {
+    /** @deprecated Use span={{ xs: number }} instead */
+    xs?: number;
+    /** @deprecated Use span={{ sm: number }} instead */
+    sm?: number;
+    /** @deprecated Use span={{ md: number }} instead */
+    md?: number;
+    /** @deprecated Use span={{ lg: number }} instead */
+    lg?: number;
+    /** @deprecated Use span={{ xl: number }} instead */
+    xl?: number;
+    /** @deprecated Use span={{ xxl: number }} instead */
+    xxl?: number;
+    /** @deprecated Use offset={{ xs: number }} instead */
+    xsOffset?: number;
+    /** @deprecated Use offset={{ sm: number }} instead */
+    smOffset?: number;
+    /** @deprecated Use offset={{ md: number }} instead */
+    mdOffset?: number;
+    /** @deprecated Use offset={{ lg: number }} instead */
+    lgOffset?: number;
+    /** @deprecated Use offset={{ xl: number }} instead */
+    xlOffset?: number;
+    /** @deprecated Use offset={{ xxl: number }} instead */
+    xxlOffset?: number;
+    /** @deprecated Use push={{ xs: number }} instead */
+    xsPush?: number;
+    /** @deprecated Use push={{ sm: number }} instead */
+    smPush?: number;
+    /** @deprecated Use push={{ md: number }} instead */
+    mdPush?: number;
+    /** @deprecated Use push={{ lg: number }} instead */
+    lgPush?: number;
+    /** @deprecated Use push={{ xl: number }} instead */
+    xlPush?: number;
+    /** @deprecated Use push={{ xxl: number }} instead */
+    xxlPush?: number;
+    /** @deprecated Use pull={{ xs: number }} instead */
+    xsPull?: number;
+    /** @deprecated Use pull={{ sm: number }} instead */
+    smPull?: number;
+    /** @deprecated Use pull={{ md: number }} instead */
+    mdPull?: number;
+    /** @deprecated Use pull={{ lg: number }} instead */
+    lgPull?: number;
+    /** @deprecated Use pull={{ xl: number }} instead */
+    xlPull?: number;
+    /** @deprecated Use pull={{ xxl: number }} instead */
+    xxlPull?: number;
+    /** @deprecated Use hidden={{ xs: true }} instead */
+    xsHidden?: boolean;
+    /** @deprecated Use hidden={{ sm: true }} instead */
+    smHidden?: boolean;
+    /** @deprecated Use hidden={{ md: true }} instead */
+    mdHidden?: boolean;
+    /** @deprecated Use hidden={{ lg: true }} instead */
+    lgHidden?: boolean;
+    /** @deprecated Use hidden={{ xl: true }} instead */
+    xlHidden?: boolean;
+    /** @deprecated Use hidden={{ xxl: true }} instead */
+    xxlHidden?: boolean;
+}

package/cjs/Grid/types.js

@@ -0,0 +1,4 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;

package/cjs/Heading/Heading.js

@@ -27,10 +27,10 @@ const Heading = (0, _utils.forwardRef)((props, ref) => {
     ...rest
   } = propsWithDefaults;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix());
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix());
   const Component = as || `h${level}`;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,

package/cjs/Highlight/Highlight.js

@@ -37,10 +37,10 @@ const Highlight = (0, _utils.forwardRef)((props, ref) => {
     ...rest
   } = propsWithDefaults;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix());
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix());
   const text = (0, _utils.stringifyReactNode)(children);
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref,

package/cjs/IconButton/IconButton.js

@@ -29,9 +29,9 @@ const IconButton = (0, _utils.forwardRef)((props, ref) => {
   } = propsWithDefaults;
   const {
     merge,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix(`placement-${placement}`, {
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix(`placement-${placement}`, {
     circle,
     'with-text': typeof children !== 'undefined'
   }));

package/cjs/Image/Image.js

@@ -40,9 +40,9 @@ const Image = (0, _utils.forwardRef)((props, ref) => {
   } = propsWithDefaults;
   const {
     merge,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix({
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix({
     circle,
     bordered,
     rounded,

package/cjs/InlineEdit/EditableControls.js

@@ -17,8 +17,7 @@ const EditableControls = /*#__PURE__*/_react.default.forwardRef(function Editabl
     ...rest
   } = props;
   return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({
-    ref: ref,
-    spacing: 6
+    ref: ref
   }, rest), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     size: "sm",
     icon: /*#__PURE__*/_react.default.createElement(_Check.default, null),

package/cjs/InlineEdit/InlineEdit.js

@@ -23,17 +23,17 @@ const InlineEdit = (0, _utils.forwardRef)((props, ref) => {
     classPrefix = 'inline-edit',
     className,
     disabled,
-    size,
+    size = 'md',
     showControls = true,
     stateOnBlur = 'save',
     placeholder,
     ...rest
   } = propsWithDefaults;
   const {
-    withClassPrefix,
+    withPrefix,
     merge,
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const {
     value,
     isEditing,
@@ -69,7 +69,7 @@ const InlineEdit = (0, _utils.forwardRef)((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: (0, _utils.mergeRefs)(root, ref),
     tabIndex: 0,
-    className: merge(className, withClassPrefix(size, {
+    className: merge(className, withPrefix(size, {
       disabled
     })),
     onClick: onClick,

package/cjs/InlineEdit/renderChildren.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ReactElement } from '../internals/types';
 export interface ChildrenProps {
     size?: 'lg' | 'md' | 'sm' | 'xs';
     disabled?: boolean;
@@ -9,4 +10,4 @@ export interface ChildrenProps {
     onBlur?: (event?: React.FocusEvent) => void;
 }
 export declare function defaultRenderInput(props: ChildrenProps, ref: React.Ref<any>): React.JSX.Element;
-export declare function renderChildren(children: ((props: ChildrenProps, ref: React.Ref<any>) => React.ReactElement) | React.ReactElement, props: ChildrenProps, ref: React.Ref<any>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare function renderChildren(children: ((props: ChildrenProps, ref: React.Ref<any>) => React.ReactElement) | React.ReactElement, props: ChildrenProps, ref: React.Ref<any>): ReactElement;

package/cjs/InlineEdit/renderChildren.js

@@ -31,11 +31,12 @@ function renderChildren(children, props, ref) {
       onBlur,
       ...rest
     } = props;
+    const childElement = children;
     const {
       onExit,
       onClean
-    } = children.props;
-    return /*#__PURE__*/_react.default.cloneElement(children, {
+    } = childElement.props;
+    return /*#__PURE__*/_react.default.cloneElement(childElement, {
       ...rest,
       // Pass onBlur to the child component to automatically save or cancel after the focus event is processed.
       // Special handling in the Picker component, call onBlur when onExit and onClean

package/cjs/InlineEdit/useFocusEvent.d.ts

@@ -7,8 +7,8 @@ interface FocusEventProps {
     onCancel?: (event?: React.FocusEvent | null) => void;
 }
 declare const useFocusEvent: ({ isEditing, stateOnBlur, onSave, onCancel }: FocusEventProps) => {
-    target: import("react").RefObject<HTMLInputElement | PickerHandle>;
-    root: import("react").RefObject<HTMLDivElement>;
+    target: import("react").RefObject<HTMLInputElement | PickerHandle | null>;
+    root: import("react").RefObject<HTMLDivElement | null>;
     onBlur: (...args: any[]) => any;
 };
 export default useFocusEvent;

package/cjs/Input/Input.d.ts

@@ -1,16 +1,16 @@
 import React from 'react';
 import { PrependParameters } from '../internals/types/utils';
-import type { WithAsProps, FormControlBaseProps, SizeType } from '../internals/types';
+import type { PropsWithoutChange, SanitizedInputProps, FormControlBaseProps, WithAsProps, Size } from '../internals/types';
 export interface LocaleType {
     unfilled: string;
 }
-export interface InputProps extends WithAsProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>, Omit<FormControlBaseProps, 'onChange'> {
+export interface InputProps extends WithAsProps, SanitizedInputProps, PropsWithoutChange<FormControlBaseProps> {
     /** The HTML input type */
     type?: string;
     /** The HTML input id */
     id?: string;
     /** A component can have different sizes */
-    size?: SizeType;
+    size?: Size;
     /** Ref of input element */
     inputRef?: React.Ref<any>;
     /**

package/cjs/Input/Input.js

@@ -24,6 +24,7 @@ const Input = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Input', props);
+  const inputGroup = (0, _react.useContext)(_InputGroup.InputGroupContext);
   const {
     className,
     classPrefix = 'input',
@@ -34,7 +35,7 @@ const Input = (0, _utils.forwardRef)((props, ref) => {
     defaultValue,
     inputRef,
     id,
-    size,
+    size = (inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.size) || 'md',
     htmlSize,
     plaintext,
     placeholder,
@@ -57,13 +58,12 @@ const Input = (0, _utils.forwardRef)((props, ref) => {
     onChange === null || onChange === void 0 || onChange((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value, event);
   };
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix(size, {
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix(size, {
     plaintext
   }));
-  const inputGroupContext = (0, _react.useContext)(_InputGroup.InputGroupContext);
   const {
     controlId
   } = (0, _FormGroup.useFormGroup)();
@@ -82,8 +82,8 @@ const Input = (0, _utils.forwardRef)((props, ref) => {
   if (inputable) {
     eventProps.onChange = handleChange;
     eventProps.onKeyDown = handleKeyDown;
-    eventProps.onFocus = (0, _utils.createChainedFunction)(onFocus, inputGroupContext === null || inputGroupContext === void 0 ? void 0 : inputGroupContext.onFocus);
-    eventProps.onBlur = (0, _utils.createChainedFunction)(onBlur, inputGroupContext === null || inputGroupContext === void 0 ? void 0 : inputGroupContext.onBlur);
+    eventProps.onFocus = (0, _utils.createChainedFunction)(onFocus, inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.onFocus);
+    eventProps.onBlur = (0, _utils.createChainedFunction)(onBlur, inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.onBlur);
   }
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, eventProps, {
     ref: (0, _utils.mergeRefs)(ref, inputRef),

package/cjs/InputGroup/InputGroup.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import { WithAsProps, SizeType } from '../internals/types';
+import { WithAsProps, Size } from '../internals/types';
 export declare const InputGroupContext: React.Context<{
     onFocus: () => void;
     onBlur: () => void;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
 } | null>;
 export interface InputGroupProps extends WithAsProps {
     /** Sets the composition content internally */
@@ -12,7 +13,7 @@ export interface InputGroupProps extends WithAsProps {
     /** Primary content */
     children?: React.ReactNode;
     /** A component can have different sizes */
-    size?: SizeType;
+    size?: Size;
 }
 /**
  * The `InputGroup` component is used to specify an input field with an add-on.

package/cjs/InputGroup/InputGroup.js

@@ -33,7 +33,7 @@ const InputGroup = (0, _utils.forwardRef)((props, ref) => {
     className,
     disabled,
     inside,
-    size,
+    size = 'md',
     children,
     ...rest
   } = propsWithDefaults;
@@ -45,10 +45,10 @@ const InputGroup = (0, _utils.forwardRef)((props, ref) => {
     setFocus(false);
   }, []);
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix(size, {
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix(size, {
     inside,
     focus,
     disabled
@@ -67,9 +67,10 @@ const InputGroup = (0, _utils.forwardRef)((props, ref) => {
     });
   }, [children, disabled]);
   const contextValue = (0, _react.useMemo)(() => ({
+    size,
     onFocus: handleFocus,
     onBlur: handleBlur
-  }), [handleFocus, handleBlur]);
+  }), [size, handleFocus, handleBlur]);
   return /*#__PURE__*/_react.default.createElement(InputGroupContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {

package/cjs/InputGroup/InputGroupAddon.js

@@ -21,10 +21,10 @@ const InputGroupAddon = (0, _utils.forwardRef)((props, ref) => {
     ...rest
   } = props;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix({
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix({
     disabled
   }));
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {

package/cjs/InputGroup/InputGroupButton.js

@@ -19,13 +19,10 @@ const InputGroupButton = /*#__PURE__*/_react.default.forwardRef((props, ref) =>
     ...rest
   } = props;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const {
-    withClassPrefix: withAddOnClassPrefix
-  } = (0, _hooks.useClassNames)('input-group-addon');
-  const classes = merge(withAddOnClassPrefix(), className, withClassPrefix());
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes

package/cjs/InputNumber/InputNumber.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps, SizeType, AppearanceType, FormControlBaseProps } from '../internals/types';
-export interface InputNumberProps<T = number | string | null> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'prefix'>, WithAsProps, FormControlBaseProps<T> {
+import type { SanitizedInputProps, FormControlBaseProps, AppearanceType, WithAsProps, Size } from '../internals/types';
+export interface InputNumberProps<T = number | string | null> extends Omit<SanitizedInputProps, 'value' | 'defaultValue' | 'prefix'>, WithAsProps, FormControlBaseProps<T> {
     /**
      * Button can have different appearances
      */
@@ -45,7 +45,7 @@ export interface InputNumberProps<T = number | string | null> extends Omit<React
     /**
      * An Input can have different sizes
      */
-    size?: SizeType;
+    size?: Size;
     /**
      * Whether the value can be changed through the wheel event
      */

package/cjs/InputNumber/InputNumber.js

@@ -111,13 +111,13 @@ const InputNumber = (0, _utils.forwardRef)((props, ref) => {
   const [value, setValue] = (0, _hooks.useControlled)(valueProp, defaultValue);
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const {
-    withClassPrefix,
+    withPrefix,
     merge,
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix());
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix());
   const [htmlInputProps, rest] = (0, _utils.partitionHTMLProps)(restProps);
-  const inputRef = (0, _react.useRef)();
+  const inputRef = (0, _react.useRef)(null);
   const getSafeValue = value => {
     if (!Number.isNaN(value)) {
       if (+value > max) {
@@ -281,14 +281,16 @@ const InputNumber = (0, _utils.forwardRef)((props, ref) => {
     className: prefix('touchspin-up'),
     onClick: handleStepUp,
     disabled: stepUpDisabled,
-    "aria-label": "Increment"
+    "aria-label": "Increment",
+    size: size
   }, /*#__PURE__*/_react.default.createElement(_ArrowUpLine.default, null)), /*#__PURE__*/_react.default.createElement(_Button.default, {
     tabIndex: -1,
     appearance: buttonAppearance,
     className: prefix('touchspin-down'),
     onClick: handleStepDown,
     disabled: stepDownDisabled,
-    "aria-label": "Decrement"
+    "aria-label": "Decrement",
+    size: size
   }, /*#__PURE__*/_react.default.createElement(_ArrowDownLine.default, null))), postfix && /*#__PURE__*/_react.default.createElement(_InputGroupAddon.default, null, postfix));
 });
 InputNumber.displayName = 'InputNumber';

package/cjs/InputPicker/InputPicker.d.ts

@@ -1,22 +1,22 @@
 import React from 'react';
-import { type InputItemDataType } from './hooks/useData';
+import { type InputOption } from './hooks/useData';
 import { PickerToggleProps } from '../internals/Picker';
-import type { ItemDataType, FormControlPickerProps } from '../internals/types';
+import type { Option, FormControlPickerProps } from '../internals/types';
 import type { InputPickerLocale } from '../locales';
 import type { SelectProps } from '../SelectPicker';
 export type ValueType = any;
-export interface InputPickerProps<V = ValueType> extends FormControlPickerProps<V, InputPickerLocale, InputItemDataType>, SelectProps<V>, Pick<PickerToggleProps, 'caretAs' | 'loading'> {
+export interface InputPickerProps<V = ValueType> extends FormControlPickerProps<V, InputPickerLocale, InputOption>, Omit<SelectProps<V>, 'renderValue'>, Pick<PickerToggleProps, 'caretAs' | 'loading'> {
     tabIndex?: number;
     /** Settings can create new options */
     creatable?: boolean;
     /** Option to cache value when searching asynchronously */
-    cacheData?: InputItemDataType<V>[];
+    cacheData?: InputOption<V>[];
     /** The `onBlur` attribute for the `input` element. */
     onBlur?: React.FocusEventHandler;
     /** The `onFocus` attribute for the `input` element. */
     onFocus?: React.FocusEventHandler;
     /** Called when the option is created */
-    onCreate?: (value: V, item: ItemDataType, event: React.SyntheticEvent) => void;
+    onCreate?: (value: V, item: Option, event: React.SyntheticEvent) => void;
     /**
      * Customize whether to display "Create option" action with given textbox value
      *
@@ -25,7 +25,8 @@ export interface InputPickerProps<V = ValueType> extends FormControlPickerProps<
      * @param searchKeyword Value of the textbox
      * @param filteredData The items filtered by the searchKeyword
      */
-    shouldDisplayCreateOption?: (searchKeyword: string, filteredData: InputItemDataType<V>[]) => boolean;
+    shouldDisplayCreateOption?: (searchKeyword: string, filteredData: InputOption<V>[]) => boolean;
+    renderValue?: (value: V, item: Option<V>, selectedElement: React.ReactNode) => React.ReactNode;
 }
 /**
  * Single item selector with text box input.

package/cjs/InputPicker/InputPicker.js

@@ -27,6 +27,7 @@ var _utils2 = require("./utils");
 var _CustomProvider = require("../CustomProvider");
 var _utils3 = require("../internals/utils");
 var _Picker = require("../internals/Picker");
+var _Position = require("../internals/Overlay/Position");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -54,16 +55,16 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
     locale,
     toggleAs,
     style,
-    size,
+    size = 'md',
     searchable = true,
     open: controlledOpen,
     placeholder,
     placement = 'bottomStart',
     groupBy,
-    menuClassName,
-    menuStyle,
-    menuAutoWidth = true,
-    menuMaxHeight = 320,
+    popupClassName,
+    popupStyle,
+    popupAutoWidth = true,
+    listboxMaxHeight = 320,
     creatable,
     shouldDisplayCreateOption,
     value: valueProp,
@@ -74,11 +75,11 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
     id,
     tabIndex,
     sort,
-    renderMenu,
+    renderListbox,
     renderExtraFooter,
     renderValue,
-    renderMenuItem,
-    renderMenuGroup,
+    renderOption,
+    renderOptionGroup,
     onEnter,
     onEntered,
     onExit,
@@ -114,7 +115,7 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
   const {
     prefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const [open, setOpen] = (0, _hooks.useControlled)(controlledOpen, defaultOpen);
   const {
     inputRef,
@@ -359,7 +360,13 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
     handleChange(val, event);
   });
   const handleClean = (0, _hooks.useEventCallback)(event => {
-    if (disabled || searchKeyword !== '') {
+    if (disabled) {
+      return;
+    }
+
+    // When there is a value in the search box and the user presses the delete key on the keyboard,
+    // do not trigger clearing
+    if (inputRef.current === event.target && searchKeyword !== '') {
       return;
     }
     setValue(null);
@@ -431,7 +438,7 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
   const renderListItem = (label, item) => {
     // 'Create option "{0}"' =>  Create option "xxxxx"
     const newLabel = item.create ? /*#__PURE__*/_react.default.createElement("span", null, (0, _utils3.tplTransform)((locale === null || locale === void 0 ? void 0 : locale.createOption) || '', label)) : label;
-    return renderMenuItem ? renderMenuItem(newLabel, item) : newLabel;
+    return renderOption ? renderOption(newLabel, item) : newLabel;
   };
   const checkValue = () => {
     if (multi) {
@@ -488,17 +495,13 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
   };
   const renderPopup = (positionProps, speakerRef) => {
     const {
+      className,
       left,
-      top,
-      className
+      top
     } = positionProps;
     const menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';
-    const classes = merge(className, menuClassName, prefix(multi ? 'check-menu' : 'select-menu'));
-    const styles = {
-      ...menuStyle,
-      left,
-      top
-    };
+    const classes = merge(className, popupClassName, prefix(multi ? 'check-menu' : 'select-menu'));
+    const mergedPopupStyle = (0, _utils3.mergeStyles)((0, _Position.getPositionStyle)(left, top), popupStyle);
     let items = (0, _utils.filterNodesOfTree)(data, checkShouldDisplay);
     if (creatable && (typeof shouldDisplayCreateOption === 'function' ? shouldDisplayCreateOption(searchKeyword, items) : searchKeyword && !items.find(item => item[valueKey] === searchKeyword))) {
       items = [...items, createOption(searchKeyword)];
@@ -515,7 +518,7 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
         ref: (0, _utils3.mergeRefs)(overlay, speakerRef)
       });
     }
-    const menu = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {
+    const listbox = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {
       listProps: listProps,
       listRef: list,
       disabledItemValues: disabledItemValues,
@@ -529,25 +532,25 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
       },
       activeItemValues: multi ? value : [value],
       focusItemValue: focusItemValue,
-      maxHeight: menuMaxHeight,
+      maxHeight: listboxMaxHeight,
       data: items,
       query: searchKeyword,
       groupBy: groupBy,
       onSelect: multi ? handleCheckTag : handleSelectItem,
-      renderMenuGroup: renderMenuGroup,
-      renderMenuItem: renderListItem,
+      renderOptionGroup: renderOptionGroup,
+      renderOption: renderListItem,
       virtualized: virtualized
     }) : /*#__PURE__*/_react.default.createElement("div", {
       className: prefix`none`
     }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
       ref: (0, _utils3.mergeRefs)(overlay, speakerRef),
-      autoWidth: menuAutoWidth,
+      autoWidth: popupAutoWidth,
       className: classes,
-      style: styles,
+      style: mergedPopupStyle,
       target: triggerRef,
       onKeyDown: onPickerKeyDown
-    }, renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
+    }, renderListbox ? renderListbox(listbox) : listbox, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
   const {
     isValid,
@@ -587,7 +590,6 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
       plaintextProps.as = _Stack.default;
       plaintextProps.spacing = 6;
       plaintextProps.wrap = true;
-      plaintextProps.childrenRenderMode = 'clone';
     }
     return /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({
       localeKey: "notSelected",
@@ -631,7 +633,7 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
     caret: !disabledOptions,
     size: size
   }), searching || multi && hasValue ? null : itemNode || placeholderNode), /*#__PURE__*/_react.default.createElement(_TextBox.default, {
-    showTagList: hasValue && multi,
+    showTagList: multi,
     inputRef: inputRef,
     inputValue: open ? searchKeyword : '',
     inputProps: inputProps,

package/cjs/InputPicker/InputSearch.d.ts

@@ -1,6 +1,6 @@
-import React, { HTMLAttributes } from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface InputSearchProps extends WithAsProps, Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {
+import React from 'react';
+import type { WithAsProps, HTMLPropsWithoutChange } from '../internals/types';
+export interface InputSearchProps extends WithAsProps, HTMLPropsWithoutChange<HTMLInputElement> {
     readOnly?: boolean;
     value?: string;
     inputStyle?: React.CSSProperties;