rsuite 5.37.4 → 5.39.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# [5.39.0](https://github.com/rsuite/rsuite/compare/v5.38.0...v5.39.0) (2023-09-04)
+
+### Bug Fixes
+
+- **Nav.Item:** fix vertical mis-alignment of icon ([#3344](https://github.com/rsuite/rsuite/issues/3344)) ([283c013](https://github.com/rsuite/rsuite/commit/283c013b656e19f12ec9b628af83fb1798bc5086))
+
+### Features
+
+- **i18n:** Create ne_NP.ts for Nepali Locale Support. ([#3351](https://github.com/rsuite/rsuite/issues/3351)) ([4b16982](https://github.com/rsuite/rsuite/commit/4b16982b5ac5cec06d9eb707b1ba37ae616cf19f))
+
+### Reverts
+
+- Revert "ci: run ci check on \*.x branches" ([0a98b0c](https://github.com/rsuite/rsuite/commit/0a98b0c765270923f321f1d859ccebbf7adeed37))
+
+# [5.38.0](https://github.com/rsuite/rsuite/compare/v5.37.4...v5.38.0) (2023-08-18)
+
+### Bug Fixes
+
+- **Calendar:** fix onMonthChange not fired when clicking on dates ([#3335](https://github.com/rsuite/rsuite/issues/3335)) ([035d287](https://github.com/rsuite/rsuite/commit/035d287c0f998e1f1aeed62dca7d2cfeded46167))
+- **InputPicker:** cursor should be text ([#3334](https://github.com/rsuite/rsuite/issues/3334)) ([eed2337](https://github.com/rsuite/rsuite/commit/eed2337546665878c51cf3d88d0801c8a37a908d))
+
+### Features
+
+- **Calendar:** add cellClassName prop ([#3336](https://github.com/rsuite/rsuite/issues/3336)) ([cb7c2ae](https://github.com/rsuite/rsuite/commit/cb7c2aee30985219cb0d29155a3ae3d2f739d1d2)), closes [#3333](https://github.com/rsuite/rsuite/issues/3333)
+
 ## [5.37.4](https://github.com/rsuite/rsuite/compare/v5.37.3...v5.37.4) (2023-08-11)
 
 ### Bug Fixes

package/Dropdown/styles/mixin.less

@@ -39,7 +39,6 @@
   padding-right: @dropdown-toggle-padding-right;
   // Fixed: Content is not centered when customizing renderTitle.
   display: inline-block;
-  cursor: pointer;
 }
 
 // Horizontal dividers

package/Nav/styles/index.less

@@ -98,6 +98,12 @@
 .rs-nav-horizontal {
   white-space: nowrap;
 
+  > .rs-nav-item {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: top;
+  }
+
   // Waterline
   .rs-nav-bar {
     position: absolute;
@@ -112,19 +118,12 @@
   }
 }
 
-.rs-nav-item,
-.rs-dropdown {
-  .rs-nav-horizontal > & {
-    display: inline-block;
-    vertical-align: top;
-  }
-
-  .rs-nav-vertical > & {
-    display: block;
+.rs-nav-vertical {
+  > .rs-nav-item {
+    display: flex;
+    align-items: center;
   }
-}
 
-.rs-nav-vertical {
   > .rs-dropdown {
     width: 100%;
 

package/SelectPicker/styles/index.less

@@ -11,10 +11,6 @@
   .picker-menu-group-common(picker);
   .picker-menu-group-title(picker);
   .picker-menu-group-closed(picker);
-
-  .rs-picker-menu-group ~ [role='option'] > .rs-picker-select-menu-item {
-    padding-left: 26px;
-  }
 }
 
 // Menu item (the option)
@@ -45,3 +41,11 @@
     padding-left: @picker-group-children-padding-left;
   }
 }
+
+.rs-picker-menu-group .rs-picker-select-menu-item {
+  padding-left: @picker-group-children-padding-left;
+}
+
+.rs-picker-menu-group.folded [role='option'] {
+  display: none;
+}

package/cjs/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/cjs/Calendar/Calendar.js

@@ -44,7 +44,8 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onSelect = props.onSelect,
       renderCell = props.renderCell,
       value = props.value,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "bordered", "className", "classPrefix", "compact", "defaultValue", "isoWeek", "locale", "onChange", "onMonthChange", "onSelect", "renderCell", "value"]);
+      cellClassName = props.cellClassName,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "bordered", "className", "classPrefix", "compact", "defaultValue", "isoWeek", "locale", "onChange", "onMonthChange", "onSelect", "renderCell", "value", "cellClassName"]);
 
   var _useCalendarDate = (0, _useCalendarDate2.default)(value, defaultValue),
       calendarDate = _useCalendarDate.calendarDate,
@@ -56,21 +57,18 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var handleChange = (0, _react.useCallback)(function (nextValue) {
     setCalendarDate(nextValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
-  }, [setCalendarDate, onChange]);
+
+    if (!(0, _isSameMonth.default)(nextValue, calendarDate)) {
+      onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(nextValue);
+    }
+  }, [setCalendarDate, onChange, calendarDate, onMonthChange]);
   var handleClickToday = (0, _react.useCallback)(function () {
     handleChange(new Date());
   }, [handleChange]);
   var handleSelect = (0, _react.useCallback)(function (nextValue) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextValue);
     handleChange(nextValue);
-  }, [handleChange, onSelect]); // Trigger onMonthChange when the month changes
-
-  var handleMonthChange = (0, _react.useCallback)(function (nextValue) {
-    if (!(0, _isSameMonth.default)(nextValue, calendarDate)) {
-      handleChange(nextValue);
-      onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(nextValue);
-    }
-  }, [calendarDate, handleChange, onMonthChange]);
+  }, [handleChange, onSelect]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       prefix = _useClassNames.prefix,
@@ -108,9 +106,10 @@ var Calendar = /*#__PURE__*/_react.default.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/cjs/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/cjs/Calendar/CalendarContainer.js

@@ -63,13 +63,14 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
       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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _utils.useClassNames)(classPrefix),
       withClassPrefix = _useClassNames.withClassPrefix,
@@ -155,11 +156,12 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
       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.default.createElement(_CalendarContext.CalendarProvider, {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, (0, _dateUtils.omitHideDisabledProps)(rest), {

package/cjs/Calendar/TableRow.js

@@ -41,6 +41,7 @@ var TableRow = /*#__PURE__*/_react.default.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;
@@ -89,7 +90,9 @@ var TableRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
       var isEndSelected = !unSameMonth && selectedEndDate && _utils.DateUtils.isSameDay(thisDate, selectedEndDate);
 
-      var isSelected = isRangeSelectionMode ? isStartSelected || isEndSelected : _utils.DateUtils.isSameDay(thisDate, selected);
+      var isSelected = isRangeSelectionMode ? isStartSelected || isEndSelected : _utils.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) {
@@ -113,7 +116,7 @@ var TableRow = /*#__PURE__*/_react.default.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,
@@ -121,7 +124,7 @@ var TableRow = /*#__PURE__*/_react.default.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) : _utils.DateUtils.format(thisDate, formatStr);
       days.push( /*#__PURE__*/_react.default.createElement("div", {

package/cjs/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/cjs/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/cjs/SelectPicker/Listbox.js

@@ -0,0 +1,263 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
+
+var _getPosition = _interopRequireDefault(require("dom-lib/getPosition"));
+
+var _scrollTop = _interopRequireDefault(require("dom-lib/scrollTop"));
+
+var _getHeight = _interopRequireDefault(require("dom-lib/getHeight"));
+
+var _Windowing = require("../Windowing");
+
+var _shallowEqual = _interopRequireDefault(require("../utils/shallowEqual"));
+
+var _utils = require("../utils");
+
+var _ListboxOptionGroup = _interopRequireDefault(require("./ListboxOptionGroup"));
+
+var _getDataGroupBy = require("../utils/getDataGroupBy");
+
+var _ListboxOption = _interopRequireDefault(require("./ListboxOption"));
+
+var Listbox = /*#__PURE__*/_react.default.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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _utils.useClassNames)(classPrefix),
+      withClassPrefix = _useClassNames.withClassPrefix,
+      prefix = _useClassNames.prefix,
+      merge = _useClassNames.merge;
+
+  var classes = merge(className, withClassPrefix('items', {
+    grouped: group
+  }));
+  var menuBodyContainerRef = (0, _react.useRef)(null);
+  var listRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)([]),
+      foldedGroupKeys = _useState[0],
+      setFoldedGroupKeys = _useState[1];
+
+  var handleGroupTitleClick = (0, _react.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]);
+  (0, _react.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 = (0, _getPosition.default)(activeItem, container);
+    var sTop = (0, _scrollTop.default)(container);
+    var sHeight = (0, _getHeight.default)(container);
+
+    if (sTop > position.top) {
+      (0, _scrollTop.default)(container, Math.max(0, position.top - 20));
+    } else if (position.top > sTop + sHeight) {
+      (0, _scrollTop.default)(container, Math.max(0, position.top - sHeight + 32));
+    }
+  }, [activeOptionKey, menuBodyContainerRef, prefix]);
+  (0, _utils.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 = (0, _getDataGroupBy.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 = (0, _react.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 (0, _shallowEqual.default)(disabledValue, optionKey);
+    });
+    var selected = (0, _shallowEqual.default)(selectedOptionKey, optionKey);
+    var focus = !(0, _isUndefined.default)(activeOptionKey) && (0, _shallowEqual.default)(activeOptionKey, optionKey);
+    return /*#__PURE__*/_react.default.createElement(_ListboxOption.default, {
+      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 = (0, _react.useCallback)(function (options) {
+    return options.map(function (option) {
+      return renderOption(option);
+    });
+  }, [renderOption]);
+  var renderOptionGroup = (0, _react.useCallback)(function (group) {
+    var groupKey = group.key;
+    var expanded = !foldedGroupKeys.includes(groupKey);
+    return /*#__PURE__*/_react.default.createElement(_ListboxOptionGroup.default, {
+      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 = (0, _react.useCallback)(function (groupKey) {
+    var groups = (0, _getDataGroupBy.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 = (0, _react.useCallback)(function () {
+    return /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {
+      defaultHeight: maxHeight,
+      style: {
+        width: 'auto',
+        height: 'auto'
+      }
+    }, function (_ref) {
+      var height = _ref.height;
+      return /*#__PURE__*/_react.default.createElement(_Windowing.List, (0, _extends2.default)({
+        ref: (0, _utils.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 = (0, _react.useCallback)(function (groupKey) {
+    var groups = (0, _getDataGroupBy.groupOptions)(options, groupKey, sort === null || sort === void 0 ? void 0 : sort(false), sort === null || sort === void 0 ? void 0 : sort(true));
+    return /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {
+      defaultHeight: maxHeight,
+      style: {
+        width: 'auto',
+        height: 'auto'
+      }
+    }, function (_ref3) {
+      var height = _ref3.height;
+      return /*#__PURE__*/_react.default.createElement(_Windowing.List, (0, _extends2.default)({
+        ref: (0, _utils.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.default.createElement("div", (0, _extends2.default)({
+    role: "listbox"
+  }, rest, {
+    className: classes,
+    ref: (0, _utils.mergeRefs)(menuBodyContainerRef, ref),
+    style: (0, _extends2.default)({}, style, {
+      maxHeight: maxHeight
+    })
+  }), typeof groupBy === 'undefined' ? virtualized ? renderVirtualizedOptions() : renderOptions(options) : virtualized ? renderVirtualizedOptionGroups(groupBy) : renderOptionGroups(groupBy));
+});
+
+var _default = Listbox;
+exports.default = _default;

package/cjs/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/cjs/SelectPicker/ListboxOption.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _utils = require("../utils");
+
+var ListboxOption = /*#__PURE__*/_react.default.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 = (0, _objectWithoutPropertiesLoose2.default)(props, ["selected", "classPrefix", "children", "className", "disabled", "active", "onKeyDown"]);
+
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+      withClassPrefix = _useClassNames.withClassPrefix;
+
+  var classes = withClassPrefix({
+    active: selected,
+    focus: active,
+    disabled: disabled
+  });
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: ref,
+    role: "option",
+    "aria-selected": selected || undefined,
+    "aria-disabled": disabled
+  }, rest, {
+    className: className,
+    onKeyDown: disabled ? undefined : onKeyDown
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: classes
+  }, children));
+});
+
+ListboxOption.displayName = 'Listbox.Option';
+var _default = ListboxOption;
+exports.default = _default;

package/cjs/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;