rsuite 5.37.4 → 5.39.0

package/esm/Calendar/Calendar.d.ts

@@ -17,12 +17,17 @@ export interface CalendarProps extends WithAsProps {
     locale?: CalendarLocale;
     /**  Callback fired before the value changed  */
     onChange?: (date: Date) => void;
-    /** Callback fired before the month changed */
+    /**
+     * Callback fired before the month changed
+     * @todo-Doma Change signature to `onMonthChange(year: number, month: number, reason: string)`?
+     */
     onMonthChange?: (date: Date) => void;
     /** Callback fired before the date selected */
     onSelect?: (date: Date) => void;
     /** Custom render calendar cells  */
     renderCell?: (date: Date) => React.ReactNode;
+    /** Custom cell classes base on it's date */
+    cellClassName?: (date: Date) => string | undefined;
 }
 declare const Calendar: RsRefForwardingComponent<typeof CalendarContainer, CalendarProps>;
 export default Calendar;

package/esm/Calendar/Calendar.js

@@ -25,7 +25,8 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onSelect = props.onSelect,
       renderCell = props.renderCell,
       value = props.value,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "bordered", "className", "classPrefix", "compact", "defaultValue", "isoWeek", "locale", "onChange", "onMonthChange", "onSelect", "renderCell", "value"]);
+      cellClassName = props.cellClassName,
+      rest = _objectWithoutPropertiesLoose(props, ["as", "bordered", "className", "classPrefix", "compact", "defaultValue", "isoWeek", "locale", "onChange", "onMonthChange", "onSelect", "renderCell", "value", "cellClassName"]);
 
   var _useCalendarDate = useCalendarDate(value, defaultValue),
       calendarDate = _useCalendarDate.calendarDate,
@@ -37,21 +38,18 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleChange = useCallback(function (nextValue) {
     setCalendarDate(nextValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
-  }, [setCalendarDate, onChange]);
+
+    if (!isSameMonth(nextValue, calendarDate)) {
+      onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(nextValue);
+    }
+  }, [setCalendarDate, onChange, calendarDate, onMonthChange]);
   var handleClickToday = useCallback(function () {
     handleChange(new Date());
   }, [handleChange]);
   var handleSelect = useCallback(function (nextValue) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextValue);
     handleChange(nextValue);
-  }, [handleChange, onSelect]); // Trigger onMonthChange when the month changes
-
-  var handleMonthChange = useCallback(function (nextValue) {
-    if (!isSameMonth(nextValue, calendarDate)) {
-      handleChange(nextValue);
-      onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(nextValue);
-    }
-  }, [calendarDate, handleChange, onMonthChange]);
+  }, [handleChange, onSelect]);
 
   var _useClassNames = useClassNames(classPrefix),
       prefix = _useClassNames.prefix,
@@ -89,9 +87,10 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
     },
     renderToolbar: renderToolbar,
     renderCell: customRenderCell,
-    onMoveForward: handleMonthChange,
-    onMoveBackward: handleMonthChange,
-    onChangeMonth: handleMonthChange,
+    cellClassName: cellClassName,
+    onMoveForward: handleChange,
+    onMoveBackward: handleChange,
+    onChangeMonth: handleChange,
     onSelect: handleSelect
   }));
 });

package/esm/Calendar/CalendarContainer.d.ts

@@ -52,6 +52,8 @@ export interface CalendarProps extends WithAsProps, Omit<HTMLAttributes<HTMLDivE
     onSelect?: (date: Date, event: React.MouseEvent) => void;
     /** Custom rendering cell*/
     renderCell?: (date: Date) => React.ReactNode;
+    /** Custom cell classes base on it's date */
+    cellClassName?: (date: Date) => string | undefined;
     /** Called when opening the month view */
     onToggleMonthDropdown?: (toggle: boolean) => void;
     /** Called when opening the time view */

package/esm/Calendar/CalendarContainer.js

@@ -40,13 +40,14 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onToggleMonthDropdown = props.onToggleMonthDropdown,
       onToggleTimeDropdown = props.onToggleTimeDropdown,
       calendarDate = props.calendarDate,
+      cellClassName = props.cellClassName,
       renderCell = props.renderCell,
       renderTitle = props.renderTitle,
       renderToolbar = props.renderToolbar,
       showMeridian = props.showMeridian,
       showWeekNumbers = props.showWeekNumbers,
       inline = props.inline,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "dateRange", "disabledBackward", "defaultState", "disabledDate", "disabledForward", "format", "hoverRangeValue", "isoWeek", "limitEndYear", "limitStartYear", "locale", "onChangeMonth", "onChangeTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "renderCell", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "dateRange", "disabledBackward", "defaultState", "disabledDate", "disabledForward", "format", "hoverRangeValue", "isoWeek", "limitEndYear", "limitStartYear", "locale", "onChangeMonth", "onChangeTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "cellClassName", "renderCell", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
 
   var _useClassNames = useClassNames(classPrefix),
       withClassPrefix = _useClassNames.withClassPrefix,
@@ -132,11 +133,12 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onChangeTime: onChangeTime,
       onMouseMove: onMouseMove,
       onSelect: onSelect,
+      cellClassName: cellClassName,
       renderCell: renderCell,
       showWeekNumbers: showWeekNumbers,
       inline: inline
     };
-  }, [calendarDate, dateRange, format, handleChangeMonth, hoverRangeValue, inSameThisMonthDate, inline, isDisabledDate, isoWeek, locale, onChangeTime, onMouseMove, onSelect, renderCell, showWeekNumbers]);
+  }, [calendarDate, dateRange, format, handleChangeMonth, hoverRangeValue, inSameThisMonthDate, inline, isDisabledDate, isoWeek, locale, onChangeTime, onMouseMove, onSelect, cellClassName, renderCell, showWeekNumbers]);
   return /*#__PURE__*/React.createElement(CalendarProvider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(Component, _extends({}, omitHideDisabledProps(rest), {

package/esm/Calendar/TableRow.js

@@ -25,6 +25,7 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
       isoWeek = _useCalendarContext.isoWeek,
       onMouseMove = _useCalendarContext.onMouseMove,
       onSelect = _useCalendarContext.onSelect,
+      cellClassName = _useCalendarContext.cellClassName,
       renderCell = _useCalendarContext.renderCell,
       overrideLocale = _useCalendarContext.locale,
       showWeekNumbers = _useCalendarContext.showWeekNumbers;
@@ -67,7 +68,9 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var unSameMonth = !(inSameMonth !== null && inSameMonth !== void 0 && inSameMonth(thisDate));
       var isStartSelected = !unSameMonth && selectedStartDate && DateUtils.isSameDay(thisDate, selectedStartDate);
       var isEndSelected = !unSameMonth && selectedEndDate && DateUtils.isSameDay(thisDate, selectedEndDate);
-      var isSelected = isRangeSelectionMode ? isStartSelected || isEndSelected : DateUtils.isSameDay(thisDate, selected);
+      var isSelected = isRangeSelectionMode ? isStartSelected || isEndSelected : DateUtils.isSameDay(thisDate, selected); // TODO-Doma Move those logic that's for DatePicker/DateRangePicker to a separate component
+      //           Calendar is not supposed to be reused this way
+
       var inRange = false; // for Selected
 
       if (selectedStartDate && selectedEndDate) {
@@ -91,7 +94,7 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
         }
       }
 
-      var _classes = prefix('cell', {
+      var _classes = merge(prefix('cell', {
         'cell-un-same-month': unSameMonth,
         'cell-is-today': isToday,
         'cell-selected': isSelected,
@@ -99,7 +102,7 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
         'cell-selected-end': isEndSelected,
         'cell-in-range': !unSameMonth && inRange,
         'cell-disabled': disabled
-      });
+      }), cellClassName === null || cellClassName === void 0 ? void 0 : cellClassName(thisDate));
 
       var title = formatDate ? formatDate(thisDate, formatStr) : DateUtils.format(thisDate, formatStr);
       days.push( /*#__PURE__*/React.createElement("div", {

package/esm/Calendar/types.d.ts

@@ -13,6 +13,7 @@ export interface CalendarInnerContextValue {
     onMouseMove?: (date: Date) => void;
     onSelect?: (date: Date, event: React.MouseEvent) => void;
     renderCell?: (date: Date) => React.ReactNode;
+    cellClassName?: (date: Date) => string | undefined;
     showWeekNumbers?: boolean;
     inline?: boolean;
 }

package/esm/SelectPicker/Listbox.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ListProps, ListHandle } from '../Windowing';
+import { CompareFn, Group } from '../utils/getDataGroupBy';
+import { StandardProps } from '../@types/common';
+interface ListboxProps<T, K> extends StandardProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    classPrefix: string;
+    options: readonly T[];
+    getOptionKey?: (option: T) => K;
+    sort?: <B extends boolean>(isGroup: B) => B extends true ? CompareFn<Group<T>> : CompareFn<T>;
+    groupBy?: string;
+    disabledOptionKeys?: readonly K[];
+    selectedOptionKey?: K;
+    activeOptionKey?: K;
+    maxHeight?: number;
+    labelKey?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    optionClassPrefix?: string;
+    rowHeight?: number;
+    rowGroupHeight?: number;
+    virtualized?: boolean;
+    listProps?: Partial<ListProps>;
+    listRef?: React.Ref<ListHandle>;
+    /** Custom selected option */
+    renderMenuItem?: (itemLabel: React.ReactNode, item: any) => React.ReactNode;
+    renderMenuGroup?: (title: React.ReactNode, item: any) => React.ReactNode;
+    onSelect?: (value: K, item: T, event: React.MouseEvent) => void;
+    onGroupTitleClick?: (event: React.MouseEvent) => void;
+}
+declare type ListboxComponent = <T, K>(p: ListboxProps<T, K> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => JSX.Element;
+declare const Listbox: ListboxComponent;
+export default Listbox;

package/esm/SelectPicker/Listbox.js

@@ -0,0 +1,240 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+import isUndefined from 'lodash/isUndefined';
+import getPosition from 'dom-lib/getPosition';
+import scrollTop from 'dom-lib/scrollTop';
+import getHeight from 'dom-lib/getHeight';
+import { List, AutoSizer } from '../Windowing';
+import shallowEqual from '../utils/shallowEqual';
+import { mergeRefs, useClassNames, useMount } from '../utils';
+import ListboxOptionGroup from './ListboxOptionGroup';
+import { groupOptions } from '../utils/getDataGroupBy';
+import ListboxOption from './ListboxOption';
+var Listbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
+  var _props$options = props.options,
+      options = _props$options === void 0 ? [] : _props$options,
+      getOptionKey = props.getOptionKey,
+      groupBy = props.groupBy,
+      sort = props.sort,
+      _props$maxHeight = props.maxHeight,
+      maxHeight = _props$maxHeight === void 0 ? 320 : _props$maxHeight,
+      selectedOptionKey = props.selectedOptionKey,
+      _props$disabledOption = props.disabledOptionKeys,
+      disabledOptionKeys = _props$disabledOption === void 0 ? [] : _props$disabledOption,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'dropdown-menu' : _props$classPrefix,
+      _props$labelKey = props.labelKey,
+      labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
+      virtualized = props.virtualized,
+      listProps = props.listProps,
+      virtualizedListRef = props.listRef,
+      className = props.className,
+      style = props.style,
+      activeOptionKey = props.activeOptionKey,
+      optionClassPrefix = props.optionClassPrefix,
+      _props$rowHeight = props.rowHeight,
+      rowHeight = _props$rowHeight === void 0 ? 36 : _props$rowHeight,
+      _props$rowGroupHeight = props.rowGroupHeight,
+      rowGroupHeight = _props$rowGroupHeight === void 0 ? 48 : _props$rowGroupHeight,
+      renderMenuGroup = props.renderMenuGroup,
+      renderMenuItem = props.renderMenuItem,
+      onGroupTitleClick = props.onGroupTitleClick,
+      onSelect = props.onSelect,
+      rest = _objectWithoutPropertiesLoose(props, ["options", "getOptionKey", "groupBy", "sort", "maxHeight", "selectedOptionKey", "disabledOptionKeys", "classPrefix", "labelKey", "virtualized", "listProps", "listRef", "className", "style", "activeOptionKey", "optionClassPrefix", "rowHeight", "rowGroupHeight", "renderMenuGroup", "renderMenuItem", "onGroupTitleClick", "onSelect"]);
+
+  var group = typeof groupBy !== 'undefined';
+
+  var _useClassNames = useClassNames(classPrefix),
+      withClassPrefix = _useClassNames.withClassPrefix,
+      prefix = _useClassNames.prefix,
+      merge = _useClassNames.merge;
+
+  var classes = merge(className, withClassPrefix('items', {
+    grouped: group
+  }));
+  var menuBodyContainerRef = useRef(null);
+  var listRef = useRef(null);
+
+  var _useState = useState([]),
+      foldedGroupKeys = _useState[0],
+      setFoldedGroupKeys = _useState[1];
+
+  var handleGroupTitleClick = useCallback(function (key, event) {
+    var _listRef$current;
+
+    var nextGroupKeys = foldedGroupKeys.filter(function (item) {
+      return item !== key;
+    });
+
+    if (nextGroupKeys.length === foldedGroupKeys.length) {
+      nextGroupKeys.push(key);
+    }
+
+    setFoldedGroupKeys(nextGroupKeys);
+    onGroupTitleClick === null || onGroupTitleClick === void 0 ? void 0 : onGroupTitleClick(event); // See example https://codesandbox.io/s/grouped-list-with-sticky-headers-shgok?fontsize=14&file=/index.js:1314-1381
+
+    (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.resetAfterIndex(0); // use group index to reduce calculation
+  }, [onGroupTitleClick, foldedGroupKeys]);
+  useEffect(function () {
+    var container = menuBodyContainerRef.current;
+
+    if (!container) {
+      return;
+    }
+
+    var activeItem = container.querySelector("." + prefix('item-focus'));
+
+    if (!activeItem) {
+      activeItem = container.querySelector("." + prefix('item-active'));
+    }
+
+    if (!activeItem) {
+      return;
+    }
+
+    var position = getPosition(activeItem, container);
+    var sTop = scrollTop(container);
+    var sHeight = getHeight(container);
+
+    if (sTop > position.top) {
+      scrollTop(container, Math.max(0, position.top - 20));
+    } else if (position.top > sTop + sHeight) {
+      scrollTop(container, Math.max(0, position.top - sHeight + 32));
+    }
+  }, [activeOptionKey, menuBodyContainerRef, prefix]);
+  useMount(function scrollToSelectedOption() {
+    if (virtualized && selectedOptionKey) {
+      if (typeof groupBy === 'undefined') {
+        var _listRef$current2;
+
+        var selectedOptionIndex = options.findIndex(function (option) {
+          return (getOptionKey === null || getOptionKey === void 0 ? void 0 : getOptionKey(option)) === selectedOptionKey;
+        });
+        (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.scrollToItem(selectedOptionIndex);
+      } else {
+        var _listRef$current3;
+
+        var groups = groupOptions(options, groupBy, sort === null || sort === void 0 ? void 0 : sort(false), sort === null || sort === void 0 ? void 0 : sort(true));
+        var selectedGroupIndex = groups.findIndex(function (group) {
+          return group.key === selectedOptionKey;
+        }); // TODO-Doma
+        // This only scrolls the list to the group, not to the selected item within the group
+        // .scrollToItem does not support specifying an px offset
+        // Find a way to scroll to the selected item within the group
+
+        (_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 ? void 0 : _listRef$current3.scrollToItem(selectedGroupIndex);
+      }
+    }
+  });
+  var renderOption = useCallback(function (option) {
+    var _getOptionKey;
+
+    var optionKey = (_getOptionKey = getOptionKey === null || getOptionKey === void 0 ? void 0 : getOptionKey(option)) !== null && _getOptionKey !== void 0 ? _getOptionKey : JSON.stringify(option);
+    var label = option[labelKey];
+    var disabled = disabledOptionKeys === null || disabledOptionKeys === void 0 ? void 0 : disabledOptionKeys.some(function (disabledValue) {
+      return shallowEqual(disabledValue, optionKey);
+    });
+    var selected = shallowEqual(selectedOptionKey, optionKey);
+    var focus = !isUndefined(activeOptionKey) && shallowEqual(activeOptionKey, optionKey);
+    return /*#__PURE__*/React.createElement(ListboxOption, {
+      key: optionKey,
+      disabled: disabled,
+      selected: selected,
+      active: focus,
+      "data-key": optionKey,
+      classPrefix: optionClassPrefix,
+      onClick: function onClick(event) {
+        if (!disabled) {
+          onSelect === null || onSelect === void 0 ? void 0 : onSelect(optionKey, option, event);
+        }
+      }
+    }, renderMenuItem ? renderMenuItem(label, option) : label);
+  }, [getOptionKey, labelKey, disabledOptionKeys, selectedOptionKey, activeOptionKey, optionClassPrefix, renderMenuItem, onSelect]);
+  var renderOptions = useCallback(function (options) {
+    return options.map(function (option) {
+      return renderOption(option);
+    });
+  }, [renderOption]);
+  var renderOptionGroup = useCallback(function (group) {
+    var groupKey = group.key;
+    var expanded = !foldedGroupKeys.includes(groupKey);
+    return /*#__PURE__*/React.createElement(ListboxOptionGroup, {
+      key: groupKey,
+      title: renderMenuGroup ? renderMenuGroup(groupKey, group) : groupKey,
+      classPrefix: 'picker-menu-group',
+      expanded: expanded,
+      onClickTitle: function onClickTitle(e) {
+        return handleGroupTitleClick(group.key, e);
+      }
+    }, renderOptions(group.options));
+  }, [foldedGroupKeys, handleGroupTitleClick, renderMenuGroup, renderOptions]);
+  var renderOptionGroups = useCallback(function (groupKey) {
+    var groups = groupOptions(options, groupKey, sort === null || sort === void 0 ? void 0 : sort(false), sort === null || sort === void 0 ? void 0 : sort(true));
+    return groups.map(function (group) {
+      return renderOptionGroup(group);
+    });
+  }, [options, renderOptionGroup, sort]);
+  var renderVirtualizedOptions = useCallback(function () {
+    return /*#__PURE__*/React.createElement(AutoSizer, {
+      defaultHeight: maxHeight,
+      style: {
+        width: 'auto',
+        height: 'auto'
+      }
+    }, function (_ref) {
+      var height = _ref.height;
+      return /*#__PURE__*/React.createElement(List, _extends({
+        ref: mergeRefs(listRef, virtualizedListRef),
+        height: height || maxHeight,
+        itemCount: options.length,
+        itemSize: rowHeight
+      }, listProps), function (_ref2) {
+        var index = _ref2.index;
+        return renderOption(options[index]);
+      });
+    });
+  }, [listProps, maxHeight, options, renderOption, rowHeight, virtualizedListRef]); // Example of rendering option groups in VariableSizeList
+  // https://github.com/bvaughn/react-window/issues/358
+
+  var renderVirtualizedOptionGroups = useCallback(function (groupKey) {
+    var groups = groupOptions(options, groupKey, sort === null || sort === void 0 ? void 0 : sort(false), sort === null || sort === void 0 ? void 0 : sort(true));
+    return /*#__PURE__*/React.createElement(AutoSizer, {
+      defaultHeight: maxHeight,
+      style: {
+        width: 'auto',
+        height: 'auto'
+      }
+    }, function (_ref3) {
+      var height = _ref3.height;
+      return /*#__PURE__*/React.createElement(List, _extends({
+        ref: mergeRefs(listRef, virtualizedListRef),
+        height: height || maxHeight,
+        itemCount: groups.length,
+        itemSize: function itemSize(index) {
+          var item = groups[index];
+          var expanded = !foldedGroupKeys.includes(item.key);
+
+          if (expanded) {
+            return item.options.length * rowHeight + rowGroupHeight;
+          }
+
+          return rowGroupHeight;
+        }
+      }, listProps), function (_ref4) {
+        var index = _ref4.index;
+        return renderOptionGroup(groups[index]);
+      });
+    });
+  }, [foldedGroupKeys, listProps, maxHeight, options, renderOptionGroup, rowGroupHeight, rowHeight, sort, virtualizedListRef]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    role: "listbox"
+  }, rest, {
+    className: classes,
+    ref: mergeRefs(menuBodyContainerRef, ref),
+    style: _extends({}, style, {
+      maxHeight: maxHeight
+    })
+  }), typeof groupBy === 'undefined' ? virtualized ? renderVirtualizedOptions() : renderOptions(options) : virtualized ? renderVirtualizedOptionGroups(groupBy) : renderOptionGroups(groupBy));
+});
+export default Listbox;

package/esm/SelectPicker/ListboxOption.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { StandardProps } from '../@types/common';
+interface ListboxOptionProps extends StandardProps, React.HTMLAttributes<HTMLDivElement> {
+    selected?: boolean;
+    disabled?: boolean;
+    active?: boolean;
+    title?: string;
+    onKeyDown?: (event: React.KeyboardEvent) => void;
+}
+declare const ListboxOption: React.ForwardRefExoticComponent<ListboxOptionProps & React.RefAttributes<HTMLDivElement>>;
+export default ListboxOption;

package/esm/SelectPicker/ListboxOption.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import { useClassNames } from '../utils';
+var ListboxOption = /*#__PURE__*/React.forwardRef(function ListboxOption(props, ref) {
+  var selected = props.selected,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'dropdown-menu-item' : _props$classPrefix,
+      children = props.children,
+      className = props.className,
+      disabled = props.disabled,
+      active = props.active,
+      onKeyDown = props.onKeyDown,
+      rest = _objectWithoutPropertiesLoose(props, ["selected", "classPrefix", "children", "className", "disabled", "active", "onKeyDown"]);
+
+  var _useClassNames = useClassNames(classPrefix),
+      withClassPrefix = _useClassNames.withClassPrefix;
+
+  var classes = withClassPrefix({
+    active: selected,
+    focus: active,
+    disabled: disabled
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    role: "option",
+    "aria-selected": selected || undefined,
+    "aria-disabled": disabled
+  }, rest, {
+    className: className,
+    onKeyDown: disabled ? undefined : onKeyDown
+  }), /*#__PURE__*/React.createElement("span", {
+    className: classes
+  }, children));
+});
+ListboxOption.displayName = 'Listbox.Option';
+export default ListboxOption;

package/esm/SelectPicker/ListboxOptionGroup.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { StandardProps } from '../@types/common';
+interface ListboxOptionGroupProps extends StandardProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    title?: React.ReactNode;
+    expanded?: boolean;
+    onClickTitle?: React.MouseEventHandler;
+}
+declare const ListboxOptionGroup: React.ForwardRefExoticComponent<ListboxOptionGroupProps & React.RefAttributes<HTMLDivElement>>;
+export default ListboxOptionGroup;

package/esm/SelectPicker/ListboxOptionGroup.js

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+var _templateObject, _templateObject2;
+
+import React from 'react';
+import classNames from 'classnames';
+import { useClassNames } from '../utils';
+import ArrowDown from '@rsuite/icons/legacy/ArrowDown';
+import useUniqueId from '../utils/useUniqueId';
+var ListboxOptionGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'dropdown-menu-group' : _props$classPrefix,
+      title = props.title,
+      children = props.children,
+      className = props.className,
+      _props$expanded = props.expanded,
+      expanded = _props$expanded === void 0 ? true : _props$expanded,
+      onClickTitle = props.onClickTitle,
+      rest = _objectWithoutPropertiesLoose(props, ["classPrefix", "title", "children", "className", "expanded", "onClickTitle"]);
+
+  var _useClassNames = useClassNames(classPrefix),
+      withClassPrefix = _useClassNames.withClassPrefix,
+      prefix = _useClassNames.prefix,
+      merge = _useClassNames.merge;
+
+  var classes = merge(className, withClassPrefix());
+  var groupId = useUniqueId('listbox-group-');
+  var labelId = groupId + '-label';
+  return /*#__PURE__*/React.createElement("div", _extends({
+    role: "group",
+    id: groupId,
+    "aria-expanded": expanded,
+    "aria-labelledby": labelId
+  }, rest, {
+    ref: ref,
+    className: classNames(classes, {
+      folded: !expanded
+    })
+  }), /*#__PURE__*/React.createElement("div", {
+    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["title"]))),
+    tabIndex: -1,
+    onClick: onClickTitle
+  }, /*#__PURE__*/React.createElement("span", {
+    id: labelId
+  }, title), /*#__PURE__*/React.createElement(ArrowDown, {
+    "aria-hidden": true,
+    className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["caret"])))
+  })), children);
+});
+ListboxOptionGroup.displayName = 'Listbox.OptionGroup';
+export default ListboxOptionGroup;

package/esm/SelectPicker/SelectPicker.js

@@ -7,13 +7,12 @@ var _templateObject;
 import React, { useRef, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
-import isUndefined from 'lodash/isUndefined';
 import isNil from 'lodash/isNil';
 import isFunction from 'lodash/isFunction';
 import omit from 'lodash/omit';
 import { createChainedFunction, useCustom, useClassNames, useControlled, mergeRefs, shallowEqual } from '../utils';
-import { getDataGroupBy } from '../utils/getDataGroupBy';
-import { DropdownMenu, DropdownMenuItem, PickerToggle, PickerToggleTrigger, PickerOverlay, SearchBar, useFocusItemValue, usePickerClassName, useSearch, usePublicMethods, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
+import { PickerToggle, PickerToggleTrigger, PickerOverlay, SearchBar, useFocusItemValue, usePickerClassName, useSearch, usePublicMethods, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
+import Listbox from './Listbox';
 var emptyArray = [];
 var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
@@ -233,40 +232,38 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       top: top
     });
 
-    var items = filteredData; // Create a tree structure data when set `groupBy`
+    var menu = function () {
+      if (!filteredData.length) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["none"])))
+        }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);
+      }
+
+      return /*#__PURE__*/React.createElement(Listbox, {
+        options: filteredData,
+        getOptionKey: function getOptionKey(option) {
+          return option[valueKey];
+        },
+        id: id ? id + "-listbox" : undefined,
+        listProps: listProps,
+        listRef: listRef,
+        disabledOptionKeys: disabledItemValues,
+        labelKey: labelKey,
+        renderMenuGroup: renderMenuGroup,
+        renderMenuItem: renderMenuItem,
+        maxHeight: menuMaxHeight,
+        classPrefix: 'picker-select-menu',
+        optionClassPrefix: 'picker-select-menu-item',
+        selectedOptionKey: value,
+        activeOptionKey: focusItemValue,
+        groupBy: groupBy,
+        sort: sort,
+        onSelect: handleItemSelect,
+        onGroupTitleClick: onGroupTitleClick,
+        virtualized: virtualized
+      });
+    }();
 
-    if (groupBy) {
-      items = getDataGroupBy(items, groupBy, sort);
-    } else if (typeof sort === 'function') {
-      items = items.sort(sort(false));
-    }
-
-    var menu = items.length ? /*#__PURE__*/React.createElement(DropdownMenu, {
-      id: id ? id + "-listbox" : undefined,
-      listProps: listProps,
-      listRef: listRef,
-      disabledItemValues: disabledItemValues,
-      valueKey: valueKey,
-      labelKey: labelKey,
-      renderMenuGroup: renderMenuGroup,
-      renderMenuItem: renderMenuItem,
-      maxHeight: menuMaxHeight,
-      classPrefix: 'picker-select-menu',
-      dropdownMenuItemClassPrefix: 'picker-select-menu-item',
-      dropdownMenuItemAs: DropdownMenuItem,
-      activeItemValues: [value],
-      focusItemValue: focusItemValue,
-      data: items // FIXME-Doma
-      // `group` is redundant so long as `groupBy` exists
-      ,
-      group: !isUndefined(groupBy),
-      groupBy: groupBy,
-      onSelect: handleItemSelect,
-      onGroupTitleClick: onGroupTitleClick,
-      virtualized: virtualized
-    }) : /*#__PURE__*/React.createElement("div", {
-      className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["none"])))
-    }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);
     return /*#__PURE__*/React.createElement(PickerOverlay, {
       ref: mergeRefs(overlayRef, speakerRef),
       autoWidth: menuAutoWidth,

package/esm/Windowing/List.d.ts

@@ -2,7 +2,7 @@ import { VariableSizeList, ListItemKeySelector, ListOnScrollProps, ListOnItemsRe
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export interface ListProps<T = any> extends WithAsProps {
     /**
-     * @deprecated use itemSize instead
+     * @deprecated use {@link itemSize} instead
      * Either a fixed row height (number) or a function that returns the height of a row given its index: ({ index: number }): number
      */
     rowHeight?: number | (({ index: number }: {
@@ -34,7 +34,7 @@ export interface ListProps<T = any> extends WithAsProps {
      */
     onScroll?: (props: ListOnScrollProps) => void;
 }
-export interface ListHandle extends Partial<VariableSizeList> {
+export interface ListHandle extends Pick<VariableSizeList, 'resetAfterIndex' | 'scrollTo' | 'scrollToItem'> {
     /**
      * @deprecated use scrollToItem instead
      * Ensure row is visible. This method can be used to safely scroll back to a cell that a user has scrolled away from even if it was previously scrolled to.