rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-20250315

package/cjs/PanelGroup/PanelGroup.js

@@ -34,11 +34,11 @@ const PanelGroup = (0, _utils.forwardRef)((props, ref) => {
     ...rest
   } = propsWithDefaults;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const [activeKey, setActiveKey] = (0, _hooks.useControlled)(activeProp, defaultActiveKey);
-  const classes = merge(className, withClassPrefix({
+  const classes = merge(className, withPrefix({
     accordion,
     bordered
   }));

package/cjs/Placeholder/PlaceholderGraph.js

@@ -20,29 +20,28 @@ const PlaceholderGraph = (0, _utils.forwardRef)((props, ref) => {
   const {
     as: Component = 'div',
     className,
+    classPrefix = 'placeholder',
     width,
-    height = 200,
+    height,
     style,
     active,
-    classPrefix = 'placeholder',
     ...rest
   } = propsWithDefaults;
   const {
     merge,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix('graph', {
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix('graph', {
     active
   }));
   const styles = {
-    width: width || '100%',
-    height,
-    ...style
+    '--rs-placeholder-graph-width': (0, _utils.getCssValue)(width),
+    '--rs-placeholder-graph-height': (0, _utils.getCssValue)(height)
   };
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes,
-    style: styles
+    style: (0, _utils.mergeStyles)(styles, style)
   }));
 });
 PlaceholderGraph.displayName = 'PlaceholderGraph';

package/cjs/Placeholder/PlaceholderGrid.js

@@ -25,20 +25,24 @@ const PlaceholderGrid = (0, _utils.forwardRef)((props, ref) => {
     classPrefix = 'placeholder',
     rows = 5,
     columns = 5,
-    rowHeight = 10,
-    rowMargin = 20,
-    rowSpacing = rowMargin,
+    rowHeight,
+    rowSpacing,
     active,
+    style,
     ...rest
   } = propsWithDefaults;
   const {
     merge,
     prefix,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix('grid', {
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix('grid', {
     active
   }));
+  const styles = {
+    '--rs-placeholder-row-height': (0, _utils.getCssValue)(rowHeight),
+    '--rs-placeholder-row-spacing': (0, _utils.getCssValue)(rowSpacing)
+  };
   const items = (0, _react.useMemo)(() => {
     const colItems = [];
     const rowClassName = prefix`row`;
@@ -48,10 +52,6 @@ const PlaceholderGrid = (0, _utils.forwardRef)((props, ref) => {
       for (let j = 0; j < rows; j++) {
         rowItems.push(/*#__PURE__*/_react.default.createElement("div", {
           key: j,
-          style: {
-            height: rowHeight,
-            marginTop: j > 0 ? rowSpacing : undefined
-          },
           className: rowClassName
         }));
       }
@@ -64,7 +64,8 @@ const PlaceholderGrid = (0, _utils.forwardRef)((props, ref) => {
   }, [columns, prefix, rowHeight, rowSpacing, rows]);
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
-    className: classes
+    className: classes,
+    style: (0, _utils.mergeStyles)(styles, style)
   }), items);
 });
 PlaceholderGrid.displayName = 'PlaceholderGrid';

package/cjs/Placeholder/PlaceholderParagraph.js

@@ -22,43 +22,43 @@ const PlaceholderParagraph = (0, _utils.forwardRef)((props, ref) => {
   const {
     as: Component = 'div',
     className,
-    rows = 2,
-    rowHeight = 10,
-    rowMargin = 20,
-    rowSpacing = rowMargin,
+    classPrefix = 'placeholder',
+    rows = 3,
+    rowHeight,
+    rowSpacing,
     graph,
     active,
-    classPrefix = 'placeholder',
+    style,
     ...rest
   } = propsWithDefaults;
   const {
     merge,
     prefix,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
   const graphShape = graph === true ? 'square' : graph;
+  const styles = {
+    '--rs-placeholder-row-height': (0, _utils.getCssValue)(rowHeight),
+    '--rs-placeholder-row-spacing': (0, _utils.getCssValue)(rowSpacing)
+  };
   const rowElements = (0, _react.useMemo)(() => {
     const rowArr = [];
     for (let i = 0; i < rows; i++) {
-      const styles = {
-        height: rowHeight,
-        marginTop: i > 0 ? rowSpacing : Number(rowSpacing) / 2
-      };
       rowArr.push(/*#__PURE__*/_react.default.createElement("div", {
         key: i,
-        style: styles,
         className: prefix`row`
       }));
     }
     return rowArr;
-  }, [prefix, rowHeight, rowSpacing, rows]);
-  const classes = merge(className, withClassPrefix('paragraph', {
+  }, [prefix, rows]);
+  const classes = merge(className, withPrefix('paragraph', {
     active
   }));
   const graphClasses = prefix('paragraph-graph', `paragraph-graph-${graphShape}`);
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
-    className: classes
+    className: classes,
+    style: (0, _utils.mergeStyles)(styles, style)
   }), graphShape && /*#__PURE__*/_react.default.createElement("div", {
     className: graphClasses
   }, /*#__PURE__*/_react.default.createElement("span", {

package/cjs/Popover/Popover.js

@@ -5,11 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _Heading = _interopRequireDefault(require("../Heading"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
+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; }
 /**
  * The `Popover` component is used to display a popup window for a target component.
  * @see https://rsuitejs.com/components/popover
@@ -31,18 +33,16 @@ const Popover = (0, _utils.forwardRef)((props, ref) => {
     ...rest
   } = propsWithDefaults;
   const {
-    withClassPrefix,
+    withPrefix,
     merge,
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix({
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix({
     full
   }));
-  const styles = {
-    display: 'block',
-    opacity: visible ? 1 : undefined,
-    ...style
-  };
+  const styles = (0, _react.useMemo)(() => (0, _utils.mergeStyles)(style, {
+    ['--rs-opacity']: visible ? 1 : undefined
+  }), [visible, style]);
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     role: "dialog"
   }, rest, {

package/cjs/Progress/ProgressCircle.js

@@ -88,9 +88,9 @@ const ProgressCircle = (0, _utils.forwardRef)((props, ref) => {
   const {
     prefix,
     merge,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix('circle', {
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix('circle', {
     [`circle-${status || ''}`]: !!status
   }));
   const showIcon = status && status !== 'active';

package/cjs/Progress/ProgressLine.js

@@ -35,8 +35,8 @@ const ProgressLine = (0, _utils.forwardRef)((props, ref) => {
   const {
     merge,
     prefix,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
   const lineInnerStyle = {
     backgroundColor: trailColor,
     [vertical ? 'width' : 'height']: trailWidth || strokeWidth
@@ -46,7 +46,7 @@ const ProgressLine = (0, _utils.forwardRef)((props, ref) => {
     backgroundColor: strokeColor,
     [vertical ? 'width' : 'height']: strokeWidth
   };
-  const classes = merge(className, withClassPrefix('line', {
+  const classes = merge(className, withPrefix('line', {
     'line-vertical': vertical,
     [`line-${status}`]: !!status
   }));

package/cjs/Radio/Radio.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
-import type { WithAsProps, ColorType } from '../internals/types';
-export interface RadioProps<T = string | number> extends WithAsProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+import type { WithAsProps, Color, HTMLPropsWithoutChange } from '../internals/types';
+export interface RadioProps<T = string | number> extends WithAsProps, HTMLPropsWithoutChange {
     /**
      * The color of the radio when checked
      *
      * @version 5.56.0
      */
-    color?: ColorType;
+    color?: Color;
     /**
      * The disable of component
      */

package/cjs/Radio/Radio.js

@@ -55,10 +55,10 @@ const Radio = (0, _utils.forwardRef)((props, ref) => {
   const [checked, setChecked, selfControlled] = (0, _hooks.useControlled)(typeof groupValue !== 'undefined' ? groupValue === value : checkedProp, defaultChecked || false);
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix(color, {
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix(color, {
     inline,
     disabled,
     checked

package/cjs/RadioGroup/RadioGroup.js

@@ -40,9 +40,9 @@ const RadioGroup = (0, _utils.forwardRef)((props, ref) => {
   } = propsWithDefaults;
   const {
     merge,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix(appearance, {
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix(appearance, {
     inline
   }));
   const [value, setValue, isControlled] = (0, _hooks.useControlled)(valueProp, defaultValue);

package/cjs/RadioTile/RadioTile.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface RadioTileProps<T = string | number> extends WithAsProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+import type { WithAsProps, HTMLPropsWithoutChange } from '../internals/types';
+export interface RadioTileProps<T = string | number> extends WithAsProps, HTMLPropsWithoutChange {
     /** Additional description, if needed*/
     children?: React.ReactNode;
     /** Specifies whether the radio is selected */
@@ -26,6 +26,6 @@ export interface RadioTileProps<T = string | number> extends WithAsProps, Omit<R
  * @see https://rsuitejs.com/components/radio-tile/
  */
 declare const RadioTile: import("../internals/types").InternalRefForwardingComponent<import("../internals/types").InternalRefForwardingComponent<"div", import("../Stack").StackProps, never> & {
-    Item: typeof import("../Stack/StackItem").default;
+    Item: import("../internals/types").InternalRefForwardingComponent<"div", import("../Stack/StackItem").StackItemProps, never> & Record<string, never>;
 }, RadioTileProps<string | number>, never> & Record<string, never>;
 export default RadioTile;

package/cjs/RadioTile/RadioTile.js

@@ -49,15 +49,15 @@ const RadioTile = (0, _utils.forwardRef)((props, ref) => {
   const [htmlInputProps, restProps] = (0, _utils.partitionHTMLProps)(rest);
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const handleChange = (0, _react.useCallback)(event => {
     setChecked(true);
     onGroupChange === null || onGroupChange === void 0 || onGroupChange(value, event);
     onChange === null || onChange === void 0 || onChange(value, event);
   }, [onChange, onGroupChange, setChecked, value]);
-  const classes = merge(className, withClassPrefix({
+  const classes = merge(className, withPrefix({
     checked,
     disabled
   }));
@@ -65,7 +65,6 @@ const RadioTile = (0, _utils.forwardRef)((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     spacing: 6
   }, restProps, {
-    childrenRenderMode: "clone",
     ref: ref,
     className: classes,
     as: "label"

package/cjs/RadioTileGroup/RadioTileGroup.js

@@ -38,9 +38,9 @@ const RadioTileGroup = (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());
   const [value, setValue] = (0, _hooks.useControlled)(valueProp, defaultValue);
   const handleChange = (0, _react.useCallback)((nextValue, event) => {
     setValue(nextValue);
@@ -59,7 +59,6 @@ const RadioTileGroup = (0, _utils.forwardRef)((props, ref) => {
     spacing: 10
   }, rest, {
     role: "radiogroup",
-    childrenRenderMode: "clone",
     direction: inline ? 'row' : 'column',
     ref: ref,
     className: classes

package/cjs/RangeSlider/RangeSlider.js

@@ -64,13 +64,13 @@ const RangeSlider = (0, _utils.forwardRef)((props, ref) => {
   const handleIndexs = (0, _react.useRef)([0, 1]);
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const {
     rtl
   } = (0, _CustomProvider.useCustom)('RangeSlider');
-  const classes = merge(className, withClassPrefix({
+  const classes = merge(className, withPrefix({
     vertical,
     disabled,
     graduated,

package/cjs/Rate/Character.js

@@ -35,10 +35,10 @@ const Character = (0, _utils.forwardRef)((props, ref) => {
   const {
     merge,
     prefix,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
   const beforeRef = (0, _react.useRef)(null);
-  const classes = merge(className, withClassPrefix(!(0, _isNil.default)(status) && characterStatus[status]));
+  const classes = merge(className, withPrefix(!(0, _isNil.default)(status) && characterStatus[status]));
   const handleMouseMove = (0, _hooks.useEventCallback)(event => {
     onMouseMove === null || onMouseMove === void 0 || onMouseMove(getKey(beforeRef.current, event.target), event);
   });

package/cjs/Rate/Rate.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
-import type { WithAsProps, ColorType, FormControlBaseProps, SizeType } from '../internals/types';
+import type { WithAsProps, Color, FormControlBaseProps, Size } from '../internals/types';
 export interface RateProps<T = number> extends WithAsProps, FormControlBaseProps<T> {
     allowHalf?: boolean;
     character?: React.ReactNode;
     classPrefix?: string;
     cleanable?: boolean;
     /** A rate can have different sizes */
-    size?: SizeType;
+    size?: Size;
     /** A rate can have different colors */
-    color?: ColorType | React.CSSProperties['color'];
+    color?: Color | React.CSSProperties['color'];
     max?: number;
     vertical?: boolean;
     renderCharacter?: (value: number, index: number) => React.ReactNode;

package/cjs/Rate/Rate.js

@@ -55,9 +55,9 @@ const Rate = (0, _utils.forwardRef)((props, ref) => {
   const hoverValue = (0, _utils2.transformCharacterMapToValue)(characterMap);
   const {
     merge,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix(size, (0, _utils.isPresetColor)(color) && color, {
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix(size, (0, _utils.isPresetColor)(color) && color, {
     disabled,
     readonly: readOnly
   }));

package/cjs/Row/index.d.ts

@@ -1,4 +1,4 @@
-import Row from './Row';
-export type { RowProps } from './Row';
+import Row from '../Grid/Row';
+export type { RowProps } from '../Grid/Row';
 export { Row };
 export default Row;

package/cjs/Row/index.js

@@ -4,7 +4,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
-var _Row = _interopRequireDefault(require("./Row"));
+var _Row = _interopRequireDefault(require("../Grid/Row"));
 exports.Row = _Row.default;
 // export types
 // export components

package/cjs/SelectPicker/SelectPicker.d.ts

@@ -2,8 +2,8 @@ import React from 'react';
 import { PickerLocale } from '../locales';
 import { PickerToggleProps } from '../internals/Picker';
 import type { ListProps } from '../internals/Windowing';
-import type { FormControlPickerProps, ItemDataType } from '../internals/types';
-export interface SelectProps<T> {
+import type { FormControlPickerProps, Option, ListboxProps, PopupProps, DeprecatedMenuProps } from '../internals/types';
+export interface SelectProps<T> extends ListboxProps, PopupProps, DeprecatedMenuProps {
     /** Set group condition key in data */
     groupBy?: string;
     /** Whether dispaly search input box */
@@ -15,19 +15,13 @@ export interface SelectProps<T> {
      */
     listProps?: Partial<ListProps>;
     /** Custom search rules. */
-    searchBy?: (keyword: string, label: React.ReactNode, item: ItemDataType) => boolean;
+    searchBy?: (keyword: string, label: React.ReactNode, item: Option) => boolean;
     /** Sort options */
     sort?: (isGroup: boolean) => (a: any, b: any) => number;
-    /** Customizing the Rendering Menu list */
-    renderMenu?: (menu: React.ReactNode) => React.ReactNode;
-    /** Custom render menuItems */
-    renderMenuItem?: (label: React.ReactNode, item: ItemDataType) => React.ReactNode;
-    /** Custom render menu group */
-    renderMenuGroup?: (title: React.ReactNode, item: ItemDataType) => React.ReactNode;
     /** Custom render selected items */
-    renderValue?: (value: T, item: ItemDataType | ItemDataType[], selectedElement: React.ReactNode) => React.ReactNode;
+    renderValue?: (value: T, item: Option<T>, selectedElement: React.ReactNode) => React.ReactNode;
     /** Called when the option is selected */
-    onSelect?: (value: any, item: ItemDataType, event: React.SyntheticEvent) => void;
+    onSelect?: (value: any, item: Option<T>, event: React.SyntheticEvent) => void;
     /** Called after clicking the group title */
     onGroupTitleClick?: (event: React.SyntheticEvent) => void;
     /** Called when searching */
@@ -35,11 +29,7 @@ export interface SelectProps<T> {
     /** Called when clean */
     onClean?: (event: React.SyntheticEvent) => void;
 }
-export interface MultipleSelectProps<T> extends Omit<SelectProps<T>, 'renderValue'> {
-    /** Custom render selected items */
-    renderValue?: (value: T[], item: ItemDataType<T>[], selectedElement: React.ReactNode) => React.ReactNode;
-}
-export interface SelectPickerProps<T = any> extends Omit<FormControlPickerProps<T, PickerLocale, ItemDataType<T>>, 'value' | 'defaultValue' | 'onChange'>, SelectProps<T>, Pick<PickerToggleProps, 'caretAs' | 'label' | 'loading'> {
+export interface SelectPickerProps<T = any> extends Omit<FormControlPickerProps<T, PickerLocale, Option<T>>, 'value' | 'defaultValue' | 'onChange'>, SelectProps<T>, Pick<PickerToggleProps, 'caretAs' | 'label' | 'loading'> {
     /** Initial value */
     defaultValue?: T;
     /** Current value of the component. Creates a controlled component */
@@ -48,7 +38,7 @@ export interface SelectPickerProps<T = any> extends Omit<FormControlPickerProps<
     onChange?: (value: T | null, event: React.SyntheticEvent) => void;
 }
 export interface SelectPickerComponent {
-    <T>(props: SelectPickerProps<T>): JSX.Element | null;
+    <T>(props: SelectPickerProps<T>): React.ReactElement | null;
     displayName?: string;
 }
 /**

package/cjs/SelectPicker/SelectPicker.js

@@ -39,10 +39,10 @@ const SelectPicker = (0, _utils.forwardRef)((props, ref) => {
     disabled,
     cleanable = true,
     placement = 'bottomStart',
-    menuClassName,
-    menuAutoWidth = true,
-    menuMaxHeight = 320,
-    menuStyle,
+    popupClassName,
+    popupAutoWidth = true,
+    popupStyle,
+    listboxMaxHeight = 320,
     groupBy,
     locale,
     toggleAs,
@@ -62,9 +62,9 @@ const SelectPicker = (0, _utils.forwardRef)((props, ref) => {
     onSearch,
     sort,
     renderValue,
-    renderMenu,
-    renderMenuGroup,
-    renderMenuItem,
+    renderListbox,
+    renderOptionGroup,
+    renderOption,
     renderExtraFooter,
     ...rest
   } = propsWithDefaults;
@@ -181,7 +181,7 @@ const SelectPicker = (0, _utils.forwardRef)((props, ref) => {
   const {
     prefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   let selectedElement = placeholder;
   if (activeItem !== null && activeItem !== void 0 && activeItem[labelKey]) {
     selectedElement = activeItem[labelKey];
@@ -195,16 +195,9 @@ const SelectPicker = (0, _utils.forwardRef)((props, ref) => {
   }
   const renderPopup = (positionProps, speakerRef) => {
     const {
-      left,
-      top,
       className
     } = positionProps;
-    const classes = merge(className, menuClassName, prefix('select-menu'));
-    const styles = {
-      ...menuStyle,
-      left,
-      top
-    };
+    const classes = merge(className, popupClassName, prefix('select-menu'));
     let items = filteredData;
 
     // Create a tree structure data when set `groupBy`
@@ -213,15 +206,15 @@ const SelectPicker = (0, _utils.forwardRef)((props, ref) => {
     } else if (typeof sort === 'function') {
       items = items.sort(sort(false));
     }
-    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,
       valueKey: valueKey,
       labelKey: labelKey,
-      renderMenuGroup: renderMenuGroup,
-      renderMenuItem: renderMenuItem,
-      maxHeight: menuMaxHeight,
+      renderOptionGroup: renderOptionGroup,
+      renderOption: renderOption,
+      maxHeight: listboxMaxHeight,
       classPrefix: 'picker-select-menu',
       listItemClassPrefix: 'picker-select-menu-item',
       listItemAs: _Picker.ListItem,
@@ -238,9 +231,9 @@ const SelectPicker = (0, _utils.forwardRef)((props, ref) => {
     }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
       ref: (0, _utils.mergeRefs)(overlay, speakerRef),
-      autoWidth: menuAutoWidth,
+      autoWidth: popupAutoWidth,
       className: classes,
-      style: styles,
+      style: popupStyle,
       onKeyDown: onPickerKeyDown,
       target: trigger
     }, searchable && /*#__PURE__*/_react.default.createElement(_SearchBox.default, {
@@ -248,7 +241,7 @@ const SelectPicker = (0, _utils.forwardRef)((props, ref) => {
       onChange: handleSearch,
       value: searchKeyword,
       inputRef: searchInput
-    }), 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 [classes, usedClassNamePropKeys] = (0, _Picker.usePickerClassName)({
     ...props,

package/cjs/SelectPicker/index.d.ts

@@ -1,4 +1,4 @@
 import SelectPicker from './SelectPicker';
-export type { SelectProps, MultipleSelectProps, SelectPickerProps } from './SelectPicker';
+export type { SelectProps, SelectPickerProps } from './SelectPicker';
 export { SelectPicker };
 export default SelectPicker;

package/cjs/Sidebar/Sidebar.js

@@ -30,10 +30,10 @@ const Sidebar = (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({
     collapse: collapsible
   }));
   const {
@@ -43,11 +43,10 @@ const Sidebar = (0, _utils.forwardRef)((props, ref) => {
     /** Notify the Container that the Sidebar is in the child node of the Container. */
     setHasSidebar === null || setHasSidebar === void 0 || setHasSidebar(true);
   }, [setHasSidebar]);
-  const styles = {
+  const styles = (0, _utils.mergeStyles)(style, {
     flex: `0 0 ${width}px`,
-    width,
-    ...style
-  };
+    width
+  });
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes,