rsuite 5.40.0 → 5.42.0

package/esm/SelectPicker/SelectPicker.js

@@ -1,130 +1,117 @@
+'use client';
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-
 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 { PickerToggle, PickerToggleTrigger, PickerOverlay, SearchBar, useFocusItemValue, usePickerClassName, useSearch, usePublicMethods, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
-import Listbox from './Listbox';
+import { getDataGroupBy } from '../utils/getDataGroupBy';
+import { DropdownMenu, DropdownMenuItem, PickerToggle, PickerToggleTrigger, PickerOverlay, SearchBar, useFocusItemValue, usePickerClassName, useSearch, usePublicMethods, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
 var emptyArray = [];
 var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
-      Component = _props$as === void 0 ? 'div' : _props$as,
-      _props$appearance = props.appearance,
-      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
-      _props$data = props.data,
-      data = _props$data === void 0 ? emptyArray : _props$data,
-      _props$valueKey = props.valueKey,
-      valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
-      _props$labelKey = props.labelKey,
-      labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
-      valueProp = props.value,
-      _props$classPrefix = props.classPrefix,
-      classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,
-      placeholder = props.placeholder,
-      defaultValue = props.defaultValue,
-      disabled = props.disabled,
-      _props$cleanable = props.cleanable,
-      cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
-      _props$placement = props.placement,
-      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
-      menuClassName = props.menuClassName,
-      _props$menuAutoWidth = props.menuAutoWidth,
-      menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,
-      _props$menuMaxHeight = props.menuMaxHeight,
-      menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,
-      menuStyle = props.menuStyle,
-      groupBy = props.groupBy,
-      overrideLocale = props.locale,
-      toggleAs = props.toggleAs,
-      style = props.style,
-      _props$searchable = props.searchable,
-      searchable = _props$searchable === void 0 ? true : _props$searchable,
-      _props$disabledItemVa = props.disabledItemValues,
-      disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,
-      virtualized = props.virtualized,
-      listProps = props.listProps,
-      id = props.id,
-      onGroupTitleClick = props.onGroupTitleClick,
-      searchBy = props.searchBy,
-      onEntered = props.onEntered,
-      onExited = props.onExited,
-      onClean = props.onClean,
-      onChange = props.onChange,
-      onSelect = props.onSelect,
-      onSearch = props.onSearch,
-      onClose = props.onClose,
-      onOpen = props.onOpen,
-      sort = props.sort,
-      renderValue = props.renderValue,
-      renderMenu = props.renderMenu,
-      renderMenuGroup = props.renderMenuGroup,
-      renderMenuItem = props.renderMenuItem,
-      renderExtraFooter = props.renderExtraFooter,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "appearance", "data", "valueKey", "labelKey", "value", "classPrefix", "placeholder", "defaultValue", "disabled", "cleanable", "placement", "menuClassName", "menuAutoWidth", "menuMaxHeight", "menuStyle", "groupBy", "locale", "toggleAs", "style", "searchable", "disabledItemValues", "virtualized", "listProps", "id", "onGroupTitleClick", "searchBy", "onEntered", "onExited", "onClean", "onChange", "onSelect", "onSearch", "onClose", "onOpen", "sort", "renderValue", "renderMenu", "renderMenuGroup", "renderMenuItem", "renderExtraFooter"]);
-
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    _props$appearance = props.appearance,
+    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
+    _props$data = props.data,
+    data = _props$data === void 0 ? emptyArray : _props$data,
+    _props$valueKey = props.valueKey,
+    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
+    _props$labelKey = props.labelKey,
+    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
+    valueProp = props.value,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,
+    placeholder = props.placeholder,
+    defaultValue = props.defaultValue,
+    disabled = props.disabled,
+    _props$cleanable = props.cleanable,
+    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
+    menuClassName = props.menuClassName,
+    _props$menuAutoWidth = props.menuAutoWidth,
+    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,
+    _props$menuMaxHeight = props.menuMaxHeight,
+    menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,
+    menuStyle = props.menuStyle,
+    groupBy = props.groupBy,
+    overrideLocale = props.locale,
+    toggleAs = props.toggleAs,
+    style = props.style,
+    _props$searchable = props.searchable,
+    searchable = _props$searchable === void 0 ? true : _props$searchable,
+    _props$disabledItemVa = props.disabledItemValues,
+    disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,
+    virtualized = props.virtualized,
+    listProps = props.listProps,
+    id = props.id,
+    onGroupTitleClick = props.onGroupTitleClick,
+    searchBy = props.searchBy,
+    onEntered = props.onEntered,
+    onExited = props.onExited,
+    onClean = props.onClean,
+    onChange = props.onChange,
+    onSelect = props.onSelect,
+    onSearch = props.onSearch,
+    onClose = props.onClose,
+    onOpen = props.onOpen,
+    sort = props.sort,
+    renderValue = props.renderValue,
+    renderMenu = props.renderMenu,
+    renderMenuGroup = props.renderMenuGroup,
+    renderMenuItem = props.renderMenuItem,
+    renderExtraFooter = props.renderExtraFooter,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "appearance", "data", "valueKey", "labelKey", "value", "classPrefix", "placeholder", "defaultValue", "disabled", "cleanable", "placement", "menuClassName", "menuAutoWidth", "menuMaxHeight", "menuStyle", "groupBy", "locale", "toggleAs", "style", "searchable", "disabledItemValues", "virtualized", "listProps", "id", "onGroupTitleClick", "searchBy", "onEntered", "onExited", "onClean", "onChange", "onSelect", "onSearch", "onClose", "onOpen", "sort", "renderValue", "renderMenu", "renderMenuGroup", "renderMenuItem", "renderExtraFooter"]);
   var triggerRef = useRef(null);
   var targetRef = useRef(null);
   var overlayRef = useRef(null);
   var searchInputRef = useRef(null);
   var listRef = useRef(null);
-
   var _useCustom = useCustom('Picker', overrideLocale),
-      locale = _useCustom.locale;
-
+    locale = _useCustom.locale;
   var _ref = useControlled(valueProp, defaultValue),
-      value = _ref[0],
-      setValue = _ref[1]; // Used to hover the focus item  when trigger `onKeydown`
-
-
+    value = _ref[0],
+    setValue = _ref[1]; // Used to hover the focus item  when trigger `onKeydown`
   var _useFocusItemValue = useFocusItemValue(value, {
-    data: data,
-    valueKey: valueKey,
-    target: function target() {
-      return overlayRef.current;
-    }
-  }),
-      focusItemValue = _useFocusItemValue.focusItemValue,
-      setFocusItemValue = _useFocusItemValue.setFocusItemValue,
-      onFocusItem = _useFocusItemValue.onKeyDown; // Use search keywords to filter options.
-
-
+      data: data,
+      valueKey: valueKey,
+      target: function target() {
+        return overlayRef.current;
+      }
+    }),
+    focusItemValue = _useFocusItemValue.focusItemValue,
+    setFocusItemValue = _useFocusItemValue.setFocusItemValue,
+    onFocusItem = _useFocusItemValue.onKeyDown; // Use search keywords to filter options.
   var _useSearch = useSearch(data, {
-    labelKey: labelKey,
-    searchBy: searchBy,
-    callback: function callback(searchKeyword, filteredData, event) {
-      var _filteredData$;
-
-      // The first option after filtering is the focus.
-      setFocusItemValue(filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]);
-      onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);
-    }
-  }),
-      searchKeyword = _useSearch.searchKeyword,
-      filteredData = _useSearch.filteredData,
-      resetSearch = _useSearch.resetSearch,
-      handleSearch = _useSearch.handleSearch; // Use component active state to support keyboard events.
-
-
+      labelKey: labelKey,
+      searchBy: searchBy,
+      callback: function callback(searchKeyword, filteredData, event) {
+        var _filteredData$;
+        // The first option after filtering is the focus.
+        setFocusItemValue(filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]);
+        onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);
+      }
+    }),
+    searchKeyword = _useSearch.searchKeyword,
+    filteredData = _useSearch.filteredData,
+    resetSearch = _useSearch.resetSearch,
+    handleSearch = _useSearch.handleSearch; // Use component active state to support keyboard events.
   var _useState = useState(false),
-      active = _useState[0],
-      setActive = _useState[1];
-
+    active = _useState[0],
+    setActive = _useState[1];
   var handleClose = useCallback(function () {
     var _triggerRef$current, _triggerRef$current$c;
-
     (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);
   }, []);
   var handleSelect = useCallback(function (value, item, event) {
     var _targetRef$current;
-
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event);
     (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.focus();
   }, [onSelect]);
@@ -134,9 +121,9 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleMenuPressEnter = useCallback(function (event) {
     if (!focusItemValue) {
       return;
-    } // Find active `MenuItem` by `value`
-
+    }
 
+    // Find active `MenuItem` by `value`
     var focusItem = data.find(function (item) {
       return shallowEqual(item[valueKey], focusItemValue);
     });
@@ -156,7 +143,6 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (disabled || !cleanable) {
       return;
     }
-
     setValue(null);
     setFocusItemValue(value);
     handleChangeValue(null, event);
@@ -191,79 +177,76 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     overlayRef: overlayRef,
     targetRef: targetRef,
     listRef: listRef
-  }); // Find active `MenuItem` by `value`
+  });
 
+  // Find active `MenuItem` by `value`
   var activeItem = data.find(function (item) {
     return shallowEqual(item[valueKey], value);
   });
+
   /**
    * 1.Have a value and the value is valid.
    * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.
    */
-
   var hasValue = !!activeItem || !isNil(value) && isFunction(renderValue);
-
   var _useClassNames = useClassNames(classPrefix),
-      prefix = _useClassNames.prefix,
-      merge = _useClassNames.merge;
-
+    prefix = _useClassNames.prefix,
+    merge = _useClassNames.merge;
   var selectedElement = placeholder;
-
   if (activeItem !== null && activeItem !== void 0 && activeItem[labelKey]) {
     selectedElement = activeItem[labelKey];
   }
-
   if (!isNil(value) && isFunction(renderValue)) {
-    selectedElement = renderValue(value, activeItem, selectedElement); // If renderValue returns null or undefined, hasValue is false.
-
+    selectedElement = renderValue(value, activeItem, selectedElement);
+    // If renderValue returns null or undefined, hasValue is false.
     if (isNil(selectedElement)) {
       hasValue = false;
     }
   }
-
   var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
     var left = positionProps.left,
-        top = positionProps.top,
-        className = positionProps.className;
+      top = positionProps.top,
+      className = positionProps.className;
     var classes = merge(className, menuClassName, prefix('select-menu'));
-
     var styles = _extends({}, menuStyle, {
       left: left,
       top: top
     });
+    var items = filteredData;
 
-    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
-      });
-    }();
-
+    // Create a tree structure data when set `groupBy`
+    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,
@@ -278,17 +261,15 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       inputRef: searchInputRef
     }), renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
-
   var _usePickerClassName = usePickerClassName(_extends({}, props, {
-    classPrefix: classPrefix,
-    appearance: appearance,
-    hasValue: hasValue,
-    name: 'select',
-    cleanable: cleanable
-  })),
-      classes = _usePickerClassName[0],
-      usedClassNamePropKeys = _usePickerClassName[1];
-
+      classPrefix: classPrefix,
+      appearance: appearance,
+      hasValue: hasValue,
+      name: 'select',
+      cleanable: cleanable
+    })),
+    classes = _usePickerClassName[0],
+    usedClassNamePropKeys = _usePickerClassName[1];
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     pickerProps: pick(props, pickTriggerPropKeys),
     ref: triggerRef,
@@ -326,7 +307,6 @@ SelectPicker.propTypes = _extends({}, listPickerPropTypes, {
   onSelect: PropTypes.func,
   onGroupTitleClick: PropTypes.func,
   onSearch: PropTypes.func,
-
   /**
    * group by key in `data`
    */

package/esm/SelectPicker/index.js

@@ -1,2 +1,3 @@
+'use client';
 import SelectPicker from './SelectPicker';
 export default SelectPicker;

package/esm/Sidebar/Sidebar.js

@@ -1,3 +1,4 @@
+'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useContext, useEffect } from 'react';
@@ -6,37 +7,31 @@ import { useClassNames } from '../utils';
 import { ContainerContext } from '../Container/Container';
 var Sidebar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
-      Component = _props$as === void 0 ? 'aside' : _props$as,
-      _props$classPrefix = props.classPrefix,
-      classPrefix = _props$classPrefix === void 0 ? 'sidebar' : _props$classPrefix,
-      className = props.className,
-      collapsible = props.collapsible,
-      _props$width = props.width,
-      width = _props$width === void 0 ? 260 : _props$width,
-      style = props.style,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "collapsible", "width", "style"]);
-
+    Component = _props$as === void 0 ? 'aside' : _props$as,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'sidebar' : _props$classPrefix,
+    className = props.className,
+    collapsible = props.collapsible,
+    _props$width = props.width,
+    width = _props$width === void 0 ? 260 : _props$width,
+    style = props.style,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "collapsible", "width", "style"]);
   var _useClassNames = useClassNames(classPrefix),
-      withClassPrefix = _useClassNames.withClassPrefix,
-      merge = _useClassNames.merge;
-
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge;
   var classes = merge(className, withClassPrefix({
     collapse: collapsible
   }));
-
   var _useContext = useContext(ContainerContext),
-      setHasSidebar = _useContext.setHasSidebar;
-
+    setHasSidebar = _useContext.setHasSidebar;
   useEffect(function () {
     /** Notify the Container that the Sidebar is in the child node of the Container. */
     setHasSidebar === null || setHasSidebar === void 0 ? void 0 : setHasSidebar(true);
   }, [setHasSidebar]);
-
   var styles = _extends({
     flex: "0 0 " + width + "px",
     width: width
   }, style);
-
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: classes,

package/esm/Sidebar/index.js

@@ -1,2 +1,3 @@
+'use client';
 import Sidebar from './Sidebar';
 export default Sidebar;

package/esm/Sidenav/ExpandedSidenavDropdown.js

@@ -1,3 +1,4 @@
+'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useContext, useCallback } from 'react';
@@ -17,50 +18,48 @@ var ExpandedSidenavDropdown = /*#__PURE__*/React.forwardRef(function (props, ref
   var sidenav = useContext(SidenavContext);
   var nav = useContext(NavContext);
   var navMenu = useContext(NavMenuContext);
-
   if (!sidenav || !nav || !navMenu) {
     throw new Error('<SidenavDropdown> component is not supposed to be used standalone. Use <Nav.Menu> inside <Sidenav> instead.');
   }
-
   var _props$as = props.as,
-      Component = _props$as === void 0 ? 'div' : _props$as,
-      title = props.title,
-      children = props.children,
-      className = props.className,
-      menuStyle = props.menuStyle,
-      disabled = props.disabled,
-      renderTitle = props.renderTitle,
-      renderToggle = props.renderToggle,
-      _props$classPrefix = props.classPrefix,
-      classPrefix = _props$classPrefix === void 0 ? 'dropdown' : _props$classPrefix,
-      _props$placement = props.placement,
-      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
-      toggleClassName = props.toggleClassName,
-      icon = props.icon,
-      eventKey = props.eventKey,
-      toggleAs = props.toggleAs,
-      noCaret = props.noCaret,
-      style = props.style,
-      onOpen = props.onOpen,
-      onClose = props.onClose,
-      openProp = props.open,
-      onToggle = props.onToggle,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "title", "children", "className", "menuStyle", "disabled", "renderTitle", "renderToggle", "classPrefix", "placement", "toggleClassName", "icon", "eventKey", "toggleAs", "noCaret", "style", "onOpen", "onClose", "open", "onToggle"]);
-
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    title = props.title,
+    children = props.children,
+    className = props.className,
+    menuStyle = props.menuStyle,
+    disabled = props.disabled,
+    renderTitle = props.renderTitle,
+    renderToggle = props.renderToggle,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'dropdown' : _props$classPrefix,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
+    toggleClassName = props.toggleClassName,
+    icon = props.icon,
+    eventKey = props.eventKey,
+    toggleAs = props.toggleAs,
+    noCaret = props.noCaret,
+    style = props.style,
+    onOpen = props.onOpen,
+    onClose = props.onClose,
+    openProp = props.open,
+    onToggle = props.onToggle,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "title", "children", "className", "menuStyle", "disabled", "renderTitle", "renderToggle", "classPrefix", "placement", "toggleClassName", "icon", "eventKey", "toggleAs", "noCaret", "style", "onOpen", "onClose", "open", "onToggle"]);
   var _useClassNames = useClassNames(classPrefix),
-      merge = _useClassNames.merge,
-      withClassPrefix = _useClassNames.withClassPrefix;
-
+    merge = _useClassNames.merge,
+    withClassPrefix = _useClassNames.withClassPrefix;
   var internalId = useInternalId('SidenavDropdown');
   var uniqueKey = eventKey !== null && eventKey !== void 0 ? eventKey : internalId;
   var _sidenav$openKeys = sidenav.openKeys,
-      openKeys = _sidenav$openKeys === void 0 ? [] : _sidenav$openKeys,
-      onOpenChange = sidenav.onOpenChange;
+    openKeys = _sidenav$openKeys === void 0 ? [] : _sidenav$openKeys,
+    onOpenChange = sidenav.onOpenChange;
   var items = navMenu[0].items;
-  var hasSelectedItems = // has items that is active indicated by <Nav activeKey>
+  var hasSelectedItems =
+  // has items that is active indicated by <Nav activeKey>
   nav.activeKey && items.some(function (item) {
     return item.eventKey === nav.activeKey;
-  }) || // has items that is active indicated by <Nav.Item active>
+  }) ||
+  // has items that is active indicated by <Nav.Item active>
   items.some(function (item) {
     return item.active;
   });
@@ -70,7 +69,6 @@ var ExpandedSidenavDropdown = /*#__PURE__*/React.forwardRef(function (props, ref
     } else {
       onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     }
-
     onToggle === null || onToggle === void 0 ? void 0 : onToggle(open);
     onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(uniqueKey, event);
   }, [onClose, onOpen, onToggle, uniqueKey, onOpenChange]);
@@ -80,7 +78,6 @@ var ExpandedSidenavDropdown = /*#__PURE__*/React.forwardRef(function (props, ref
     onToggle: handleToggleDisclosure
   }, function (_ref, containerRef) {
     var _withClassPrefix;
-
     var open = _ref.open;
     var classes = merge(className, withClassPrefix((_withClassPrefix = {}, _withClassPrefix["placement-" + kebabCase(placementPolyfill(placement))] = placement, _withClassPrefix[open ? 'expand' : 'collapse'] = true, _withClassPrefix.disabled = disabled, _withClassPrefix['selected-within'] = hasSelectedItems, _withClassPrefix['no-caret'] = noCaret, _withClassPrefix)));
     return /*#__PURE__*/React.createElement(Component, _extends({