rsuite 5.38.0 → 5.40.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [5.40.0](https://github.com/rsuite/rsuite/compare/v5.39.0...v5.40.0) (2023-09-10)
+
+### Bug Fixes
+
+- **CheckTree:** searchKeyword is not updated as expected ([#3354](https://github.com/rsuite/rsuite/issues/3354)) ([b642da3](https://github.com/rsuite/rsuite/commit/b642da31c158481eeea8d46e9e3088edfb83acd1)), closes [#3196](https://github.com/rsuite/rsuite/issues/3196)
+
+# [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

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/CheckTreePicker/CheckTreePicker.js

@@ -239,7 +239,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       });
     }
 
-    return (0, _utils2.getFormattedTree)(filteredData, flattenNodes, {
+    return (0, _utils2.getFormattedTree)(flattenNodes, filteredData, {
       childrenKey: childrenKey,
       cascade: cascade
     }).map(function (node) {

package/cjs/CheckTreePicker/utils.d.ts

@@ -37,7 +37,7 @@ export declare function isEveryFirstLevelNodeUncheckable(nodes: TreeNodesType, u
  * @param {*} node
  */
 export declare function isNodeUncheckable(node: any, props: Required<Pick<CheckTreePickerProps, 'uncheckableItemValues' | 'valueKey'>>): boolean;
-export declare function getFormattedTree(data: any[], nodes: TreeNodesType, props: Required<Pick<CheckTreePickerProps, 'childrenKey' | 'cascade'>>): any[];
+export declare function getFormattedTree(nodes: TreeNodesType, data: any[], props: Required<Pick<CheckTreePickerProps, 'childrenKey' | 'cascade'>>): any[];
 export declare function getDisabledState(nodes: TreeNodesType, node: TreeNodeType, props: Required<Pick<CheckTreePickerProps, 'disabledItemValues' | 'valueKey'>>): boolean;
 export declare function getCheckTreePickerDefaultValue(value: any[], uncheckableItemValues: any[]): any[];
 export declare function getSelectedItems(nodes: TreeNodesType, values: ValueType): TreeNodeType[];

package/cjs/CheckTreePicker/utils.js

@@ -130,7 +130,7 @@ function isNodeUncheckable(node, props) {
   });
 }
 
-function getFormattedTree(data, nodes, props) {
+function getFormattedTree(nodes, data, props) {
   var childrenKey = props.childrenKey,
       cascade = props.cascade;
   return data.map(function (node) {
@@ -153,7 +153,7 @@ function getFormattedTree(data, nodes, props) {
       formatted.checkState = checkState;
 
       if (((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) > 0) {
-        formatted[childrenKey] = getFormattedTree(formatted[childrenKey], nodes, props);
+        formatted[childrenKey] = getFormattedTree(nodes, formatted[childrenKey], props);
       }
     }
 

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;

package/cjs/SelectPicker/ListboxOptionGroup.js

@@ -0,0 +1,69 @@
+"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 _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _utils = require("../utils");
+
+var _ArrowDown = _interopRequireDefault(require("@rsuite/icons/legacy/ArrowDown"));
+
+var _useUniqueId = _interopRequireDefault(require("../utils/useUniqueId"));
+
+var _templateObject, _templateObject2;
+
+var ListboxOptionGroup = /*#__PURE__*/_react.default.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 = (0, _objectWithoutPropertiesLoose2.default)(props, ["classPrefix", "title", "children", "className", "expanded", "onClickTitle"]);
+
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+      withClassPrefix = _useClassNames.withClassPrefix,
+      prefix = _useClassNames.prefix,
+      merge = _useClassNames.merge;
+
+  var classes = merge(className, withClassPrefix());
+  var groupId = (0, _useUniqueId.default)('listbox-group-');
+  var labelId = groupId + '-label';
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    role: "group",
+    id: groupId,
+    "aria-expanded": expanded,
+    "aria-labelledby": labelId
+  }, rest, {
+    ref: ref,
+    className: (0, _classnames.default)(classes, {
+      folded: !expanded
+    })
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["title"]))),
+    tabIndex: -1,
+    onClick: onClickTitle
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    id: labelId
+  }, title), /*#__PURE__*/_react.default.createElement(_ArrowDown.default, {
+    "aria-hidden": true,
+    className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["caret"])))
+  })), children);
+});
+
+ListboxOptionGroup.displayName = 'Listbox.OptionGroup';
+var _default = ListboxOptionGroup;
+exports.default = _default;

package/cjs/SelectPicker/SelectPicker.js

@@ -19,8 +19,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _pick = _interopRequireDefault(require("lodash/pick"));
 
-var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
-
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 
 var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
@@ -29,10 +27,10 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
 
 var _utils = require("../utils");
 
-var _getDataGroupBy = require("../utils/getDataGroupBy");
-
 var _Picker = require("../Picker");
 
+var _Listbox = _interopRequireDefault(require("./Listbox"));
+
 var _templateObject;
 
 var emptyArray = [];
@@ -252,40 +250,39 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       left: left,
       top: top
     });
-    var items = filteredData; // Create a tree structure data when set `groupBy`
 
-    if (groupBy) {
-      items = (0, _getDataGroupBy.getDataGroupBy)(items, groupBy, sort);
-    } else if (typeof sort === 'function') {
-      items = items.sort(sort(false));
-    }
+    var menu = function () {
+      if (!filteredData.length) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["none"])))
+        }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_Listbox.default, {
+        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
+      });
+    }();
 
-    var menu = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.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: _Picker.DropdownMenuItem,
-      activeItemValues: [value],
-      focusItemValue: focusItemValue,
-      data: items // FIXME-Doma
-      // `group` is redundant so long as `groupBy` exists
-      ,
-      group: !(0, _isUndefined.default)(groupBy),
-      groupBy: groupBy,
-      onSelect: handleItemSelect,
-      onGroupTitleClick: onGroupTitleClick,
-      virtualized: virtualized
-    }) : /*#__PURE__*/_react.default.createElement("div", {
-      className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["none"])))
-    }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
       ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
       autoWidth: menuAutoWidth,