rsuite 5.3.0 → 5.4.3

package/cjs/Cascader/utils.d.ts

@@ -2,16 +2,16 @@
 import { CascaderProps } from './Cascader';
 import { ItemDataType } from '../@types/common';
 export declare function getColumnsAndPaths<T extends ItemDataType>(data: T[], value: any, options: any): {
-    columns: ItemDataType[][];
+    columns: ItemDataType<string | number>[][];
     paths: T[];
 };
 export declare function usePaths(props: CascaderProps): {
     enforceUpdate: (nextValue: any, isAttachChildren?: boolean | undefined) => void;
-    columnData: ItemDataType[][];
-    valueToPaths: ItemDataType[];
-    selectedPaths: ItemDataType[];
-    setValueToPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType[]>>;
-    setColumnData: import("react").Dispatch<import("react").SetStateAction<ItemDataType[][]>>;
-    setSelectedPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType[]>>;
+    columnData: ItemDataType<string | number>[][];
+    valueToPaths: ItemDataType<string | number>[];
+    selectedPaths: ItemDataType<string | number>[];
+    setValueToPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[]>>;
+    setColumnData: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[][]>>;
+    setSelectedPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[]>>;
     addColumn: (column: ItemDataType[], index: number) => void;
 };

package/cjs/CheckPicker/CheckPicker.d.ts

@@ -1,13 +1,21 @@
+import React, { Ref } from 'react';
 import { PickerLocale } from '../locales';
-import { PickerComponent } from '../Picker';
+import { PickerInstance } from '../Picker';
 import { ItemDataType, FormControlPickerProps } from '../@types/common';
-import { SelectProps } from '../SelectPicker';
+import type { MultipleSelectProps } from '../SelectPicker';
 export declare type ValueType = (number | string)[];
-export interface CheckPickerProps<T = ValueType> extends FormControlPickerProps<T, PickerLocale, ItemDataType>, SelectProps<T> {
+export interface CheckPickerProps<T> extends FormControlPickerProps<T[], PickerLocale, ItemDataType<T>>, MultipleSelectProps<T> {
     /** Top the selected option in the options */
     sticky?: boolean;
     /** A picker that can be counted */
     countable?: boolean;
 }
-declare const CheckPicker: PickerComponent<CheckPickerProps>;
+export interface CheckPickerComponent {
+    <T>(props: CheckPickerProps<T> & {
+        ref?: Ref<PickerInstance>;
+    }): JSX.Element | null;
+    displayName?: string;
+    propTypes?: React.WeakValidationMap<CheckPickerProps<any>>;
+}
+declare const CheckPicker: CheckPickerComponent;
 export default CheckPicker;

package/cjs/CheckPicker/test/CheckPicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/CheckPicker/test/CheckPicker.test.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _tsExpect = require("ts-expect");
+
+var _CheckPicker = _interopRequireDefault(require("../CheckPicker"));
+
+// Infer value and onChange types from data
+var numberValuedData = [{
+  label: 'One',
+  value: 1
+}];
+
+/*#__PURE__*/
+_react.default.createElement(_CheckPicker.default, {
+  data: numberValuedData,
+  value: [1]
+}); // @ts-expect-error should not accept single value
+
+
+/*#__PURE__*/
+_react.default.createElement(_CheckPicker.default, {
+  data: numberValuedData,
+  value: 1
+}); // @ts-expect-error should not accept string value
+
+
+/*#__PURE__*/
+_react.default.createElement(_CheckPicker.default, {
+  data: numberValuedData,
+  value: ['1']
+});
+
+/*#__PURE__*/
+_react.default.createElement(_CheckPicker.default, {
+  data: numberValuedData,
+  onChange: function onChange(newValue) {
+    (0, _tsExpect.expectType)(newValue);
+  }
+});
+
+var stringValuedData = [{
+  label: 'One',
+  value: 'One'
+}];
+
+/*#__PURE__*/
+_react.default.createElement(_CheckPicker.default, {
+  data: stringValuedData,
+  value: ['1']
+}); // @ts-expect-error should not accept single value
+
+
+/*#__PURE__*/
+_react.default.createElement(_CheckPicker.default, {
+  data: numberValuedData,
+  value: "1"
+}); // @ts-expect-error should not accept number value
+
+
+/*#__PURE__*/
+_react.default.createElement(_CheckPicker.default, {
+  data: stringValuedData,
+  value: [1]
+});
+
+/*#__PURE__*/
+_react.default.createElement(_CheckPicker.default, {
+  data: stringValuedData,
+  onChange: function onChange(newValue) {
+    (0, _tsExpect.expectType)(newValue);
+  }
+});
+
+var pickerRef = /*#__PURE__*/_react.default.createRef();
+
+/*#__PURE__*/
+_react.default.createElement(_CheckPicker.default, {
+  ref: pickerRef,
+  data: []
+});

package/cjs/CheckTree/index.js

@@ -16,12 +16,13 @@ var _CheckTreePicker = _interopRequireDefault(require("../CheckTreePicker"));
 var _TreeContext = _interopRequireDefault(require("../Tree/TreeContext"));
 
 var CheckTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var dragNodeRef = (0, _react.useRef)();
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      inline: true
+    };
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_TreeContext.default.Provider, {
-    value: {
-      inline: true,
-      dragNodeRef: dragNodeRef
-    }
+    value: contextValue
   }, /*#__PURE__*/_react.default.createElement(_CheckTreePicker.default, (0, _extends2.default)({
     ref: ref
   }, props)));

package/cjs/Container/Container.js

@@ -41,10 +41,13 @@ var Container = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var classes = merge(className, withClassPrefix({
     'has-sidebar': hasSidebar
   }));
-  return /*#__PURE__*/_react.default.createElement(ContainerContext.Provider, {
-    value: {
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
       setHasSidebar: setHasSidebar
-    }
+    };
+  }, [setHasSidebar]);
+  return /*#__PURE__*/_react.default.createElement(ContainerContext.Provider, {
+    value: contextValue
   }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes

package/cjs/DatePicker/DatePicker.js

@@ -402,6 +402,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       top: top
     };
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
+      role: "dialog",
       className: classes,
       ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
       style: styles,
@@ -439,7 +440,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
     return (_renderValue = renderValue === null || renderValue === void 0 ? void 0 : renderValue(value, formatStr)) !== null && _renderValue !== void 0 ? _renderValue : formatDate(value, formatStr);
   }, [formatStr, formatDate, placeholder, renderValue, value]);
-  var caretComponent = (0, _react.useMemo)(function () {
+  var caretAs = (0, _react.useMemo)(function () {
     return _utils.DateUtils.shouldOnlyTime(formatStr) ? _ClockO.default : _Calendar.default;
   }, [formatStr]);
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
@@ -475,7 +476,8 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     active: active,
     placement: placement,
     disabled: disabled,
-    caretComponent: caretComponent
+    caretAs: caretAs,
+    "aria-haspopup": "dialog"
   }), renderDate())));
 });
 

package/cjs/DateRangePicker/DateRangePicker.js

@@ -211,7 +211,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }
 
     return isPlaintext ? '' : placeholder || rangeFormatStr;
-  }, [character, formatDate, formatStr, placeholder, rangeFormatStr, renderValue, value]);
+  }, [character, formatDate, formatStr, placeholder, rangeFormatStr, renderValue]);
   /**
    * preset hover range
    */
@@ -263,7 +263,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     if (closeOverlay !== false) {
       handleCloseDropdown();
     }
-  }, [formatStr, handleCloseDropdown, onChange, selectedDates, setValue, value]);
+  }, [formatStr, handleCloseDropdown, onChange, setValue, value]);
   /**
    * Select the date range. If oneTap is not set, you need to click twice to select the start time and end time.
    * The MouseMove event is called between the first click and the second click to update the selection state.
@@ -293,7 +293,11 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     } else if (!(0, _isNil.default)(nextHoverDateRange)) {
       setHoverDateRange(nextHoverDateRange);
     }
-  }, [getHoverRangeValue, hoverRange]);
+  }, [getHoverRangeValue]);
+  /**
+   * Callback for selecting a date cell in the calendar grid
+   */
+
   var handleSelectDate = (0, _react.useCallback)(function (date, event) {
     var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];
     var hoverRangeValue = getHoverRangeValue(date);
@@ -329,7 +333,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       nextSelectDates.reverse();
     }
 
-    setHoverDateRange(nextSelectDates.length === 2 ? nextSelectDates : null);
+    setHoverDateRange(nextSelectDates.length === 2 ? nextSelectDates : [nextSelectDates[0], nextSelectDates[0]]);
     setSelectedDates(nextSelectDates);
     updateCalendarDate(nextSelectDates);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);
@@ -628,7 +632,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     hasValue: hasValue,
     active: isPickerToggleActive,
     placement: placement,
-    caretComponent: _Calendar.default,
+    caretAs: _Calendar.default,
     disabled: disabled
   }), getDisplayString(value))));
 });

package/cjs/Disclosure/Disclosure.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import DisclosureButton from './DisclosureButton';
 import DisclosureContent from './DisclosureContent';
-export interface DisclosureRenderProps {
+export declare type DisclosureTrigger = 'click' | 'mouseover';
+export interface DisclosureRenderProps extends Pick<React.HTMLAttributes<HTMLElement>, 'onMouseOver' | 'onMouseOut'> {
     open: boolean;
 }
 export interface DisclosureProps {
@@ -13,10 +14,12 @@ export interface DisclosureProps {
     hideOnClickOutside?: boolean;
     /** Callback when disclosure button is being activated to update the open state */
     onToggle?: (open: boolean, event: React.SyntheticEvent) => void;
+    /** What mouse events should disclosure reacts to */
+    trigger?: DisclosureTrigger[];
 }
-declare function Disclosure(props: DisclosureProps): JSX.Element;
-declare namespace Disclosure {
-    var Button: typeof DisclosureButton;
-    var Content: typeof DisclosureContent;
+export interface DisclosureComponent extends React.FC<DisclosureProps> {
+    Button: typeof DisclosureButton;
+    Content: typeof DisclosureContent;
 }
+declare const Disclosure: DisclosureComponent;
 export default Disclosure;

package/cjs/Disclosure/Disclosure.js

@@ -41,14 +41,17 @@ function disclosureReducer(state, action) {
   return state;
 }
 
-function Disclosure(props) {
+var Disclosure = /*#__PURE__*/_react.default.memo(function (props) {
   var children = props.children,
       openProp = props.open,
       _props$defaultOpen = props.defaultOpen,
       defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
       _props$hideOnClickOut = props.hideOnClickOutside,
       hideOnClickOutside = _props$hideOnClickOut === void 0 ? false : _props$hideOnClickOut,
-      onToggle = props.onToggle;
+      onToggle = props.onToggle,
+      _props$trigger = props.trigger,
+      trigger = _props$trigger === void 0 ? ['click'] : _props$trigger;
+  var parentDisclosure = (0, _react.useContext)(_DisclosureContext.default);
 
   var _useReducer = (0, _react.useReducer)(disclosureReducer, (0, _extends2.default)({}, initialDisclosureState, {
     open: defaultOpen
@@ -71,19 +74,56 @@ function Disclosure(props) {
       });
     }
   });
-  var context = (0, _react.useMemo)(function () {
+  var onMouseOver = (0, _react.useCallback)(function (event) {
+    if (!open) {
+      dispatch({
+        type: _DisclosureContext.DisclosureActionTypes.Show
+      });
+      onToggle === null || onToggle === void 0 ? void 0 : onToggle(true, event);
+    }
+  }, [open, dispatch, onToggle]);
+  var onMouseOut = (0, _react.useCallback)(function (event) {
+    if (open) {
+      dispatch({
+        type: _DisclosureContext.DisclosureActionTypes.Hide
+      });
+      onToggle === null || onToggle === void 0 ? void 0 : onToggle(false, event);
+    }
+  }, [open, dispatch, onToggle]);
+  var contextValue = (0, _react.useMemo)(function () {
+    var cascadeDispatch = function cascadeDispatch(action) {
+      var result = dispatch(action);
+
+      if ('cascade' in action) {
+        parentDisclosure === null || parentDisclosure === void 0 ? void 0 : parentDisclosure[1](action);
+      }
+
+      return result;
+    };
+
     return [{
       open: open
-    }, dispatch, {
-      onToggle: onToggle
+    }, cascadeDispatch, {
+      onToggle: onToggle,
+      trigger: trigger
     }];
-  }, [open, dispatch, onToggle]);
+  }, [parentDisclosure, open, dispatch, onToggle, trigger]);
+  var renderProps = (0, _react.useMemo)(function () {
+    var renderProps = {
+      open: open
+    };
+
+    if (trigger.includes('mouseover')) {
+      renderProps.onMouseOver = onMouseOver;
+      renderProps.onMouseOut = onMouseOut;
+    }
+
+    return renderProps;
+  }, [open, trigger, onMouseOver, onMouseOut]);
   return /*#__PURE__*/_react.default.createElement(_DisclosureContext.default.Provider, {
-    value: context
-  }, children({
-    open: open
-  }, containerElementRef));
-}
+    value: contextValue
+  }, children(renderProps, containerElementRef));
+});
 
 Disclosure.Button = _DisclosureButton.default;
 Disclosure.Content = _DisclosureContent.default;

package/cjs/Disclosure/DisclosureButton.d.ts

@@ -3,9 +3,9 @@ export interface DisclosureButtonRenderProps {
     open: boolean;
 }
 export interface DisclosureButtonProps {
-    children: (props: React.ButtonHTMLAttributes<HTMLButtonElement> & DisclosureButtonRenderProps, ref: React.Ref<HTMLButtonElement>) => React.ReactElement<React.HTMLAttributes<HTMLButtonElement>>;
+    children: (props: React.HTMLAttributes<HTMLElement> & DisclosureButtonRenderProps, ref: React.Ref<HTMLElement>) => React.ReactElement<React.HTMLAttributes<HTMLElement>>;
 }
-declare function DisclosureButton(props: DisclosureButtonProps): React.ReactElement<React.HTMLAttributes<HTMLButtonElement>, string | React.JSXElementConstructor<any>>;
+declare function DisclosureButton(props: DisclosureButtonProps): React.ReactElement<React.HTMLAttributes<HTMLElement>, string | React.JSXElementConstructor<any>>;
 declare namespace DisclosureButton {
     var displayName: string;
 }

package/cjs/Disclosure/DisclosureContext.d.ts

@@ -1,4 +1,5 @@
 import React, { Dispatch } from 'react';
+import type { DisclosureTrigger } from './Disclosure';
 export interface DisclosureState {
     open: boolean;
 }
@@ -7,12 +8,16 @@ export declare enum DisclosureActionTypes {
     Hide = 1
 }
 export declare type DisclosureAction = {
-    type: DisclosureActionTypes;
+    type: DisclosureActionTypes.Show;
+} | {
+    type: DisclosureActionTypes.Hide;
+    cascade?: boolean;
 };
 export declare type DisclosureContextProps = [
     DisclosureState,
     Dispatch<DisclosureAction>,
     {
+        trigger: DisclosureTrigger[];
         onToggle?: (open: boolean, event: React.SyntheticEvent) => void;
     }
 ];

package/cjs/Dropdown/Dropdown.js

@@ -41,7 +41,7 @@ var _MenuItem = _interopRequireDefault(require("../Menu/MenuItem"));
 
 var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 
-var _Navbar = require("../Navbar/Navbar");
+var _Navbar = require("../Navbar");
 
 var _Disclosure = _interopRequireDefault(require("../Disclosure/Disclosure"));
 

package/cjs/Dropdown/DropdownItem.js

@@ -33,8 +33,6 @@ var _SidenavDropdownItem = _interopRequireDefault(require("../Sidenav/SidenavDro
 
 var _DisclosureContext = _interopRequireWildcard(require("../Disclosure/DisclosureContext"));
 
-var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));
-
 var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
 
 var _useInternalId = _interopRequireDefault(require("../utils/useInternalId"));
@@ -87,7 +85,8 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
 
   var handleClickNavbarDropdownItem = (0, _react.useCallback)(function (event) {
     dispatchDisclosure === null || dispatchDisclosure === void 0 ? void 0 : dispatchDisclosure({
-      type: _DisclosureContext.DisclosureActionTypes.Hide
+      type: _DisclosureContext.DisclosureActionTypes.Hide,
+      cascade: true
     });
     handleSelectItem === null || handleSelectItem === void 0 ? void 0 : handleSelectItem(event);
   }, [dispatchDisclosure, handleSelectItem]);
@@ -154,16 +153,16 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       dataAttributes['data-event-key-type'] = typeof eventKey;
     }
 
-    return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_SafeAnchor.default, (0, _extends2.default)({
+    return renderDropdownItem((0, _extends2.default)({
       ref: ref,
       className: classes,
-      "aria-current": selected || undefined
+      'aria-current': selected || undefined
     }, dataAttributes, restProps, {
-      as: Component,
-      onClick: (0, _utils.createChainedFunction)(handleClickNavbarDropdownItem, restProps.onClick)
-    }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
-      className: prefix('menu-icon')
-    }), children));
+      onClick: (0, _utils.createChainedFunction)(handleClickNavbarDropdownItem, restProps.onClick),
+      children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.cloneElement(icon, {
+        className: prefix('menu-icon')
+      }), children)
+    }));
   }
 
   return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {

package/cjs/Dropdown/DropdownMenu.js

@@ -35,11 +35,15 @@ var _useCustom2 = _interopRequireDefault(require("../utils/useCustom"));
 
 var _DropdownContext = _interopRequireDefault(require("./DropdownContext"));
 
+var _Navbar = require("../Navbar");
+
 var _Menubar = _interopRequireDefault(require("../Menu/Menubar"));
 
 var _SidenavDropdownMenu = _interopRequireDefault(require("../Sidenav/SidenavDropdownMenu"));
 
-var _templateObject, _templateObject2;
+var _Disclosure = _interopRequireDefault(require("../Disclosure"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 /**
  * The <Dropdown.Menu> API
@@ -71,6 +75,7 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["onToggle", "eventKey", "title", "activeKey", "onSelect", "classPrefix", "children"]);
   var dropdown = (0, _react.useContext)(_DropdownContext.default);
   var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
+  var withinNavbar = Boolean((0, _react.useContext)(_Navbar.NavbarContext));
 
   var _useCustom = (0, _useCustom2.default)('DropdownMenu'),
       rtl = _useCustom.rtl;
@@ -91,17 +96,20 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var _useClassNames3 = (0, _utils.useClassNames)('dropdown-item'),
       mergeItemClassNames = _useClassNames3.merge,
       withItemClassPrefix = _useClassNames3.withClassPrefix,
-      prefixItemClassName = _useClassNames3.prefix; // <Dropdown.Menu> is used outside of <Dropdown>
+      prefixItemClassName = _useClassNames3.prefix;
+
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      activeKey: activeKey,
+      onSelect: onSelect
+    };
+  }, [activeKey, onSelect]); // <Dropdown.Menu> is used outside of <Dropdown>
   // renders a vertical `menubar`
 
-
   if (!dropdown) {
     var classes = merge(props.className, withClassPrefix());
     return /*#__PURE__*/_react.default.createElement(_DropdownContext.default.Provider, {
-      value: {
-        activeKey: activeKey,
-        onSelect: onSelect
-      }
+      value: contextValue
     }, /*#__PURE__*/_react.default.createElement(_Menubar.default, {
       vertical: true,
       onActivateItem: function onActivateItem(event) {
@@ -132,19 +140,69 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       disabled = _omit.disabled,
       menuProps = (0, _objectWithoutPropertiesLoose2.default)(_omit, ["icon", "className", "disabled"]);
 
-  var Icon = rtl ? _AngleLeft.default : _AngleRight.default;
+  var Icon = rtl ? _AngleLeft.default : _AngleRight.default; // Renders a disclosure when used within <Navbar>
+
+  if (withinNavbar) {
+    return /*#__PURE__*/_react.default.createElement(_Disclosure.default, {
+      hideOnClickOutside: true,
+      trigger: ['click', 'mouseover']
+    }, function (_ref, containerRef) {
+      var open = _ref.open,
+          props = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["open"]);
+      var classes = mergeItemClassNames(className, withItemClassPrefix({
+        disabled: disabled,
+        open: open,
+        submenu: true // focus: hasFocus
+
+      }));
+      return /*#__PURE__*/_react.default.createElement("li", (0, _extends2.default)({
+        ref: (0, _utils.mergeRefs)(ref, containerRef),
+        className: classes
+      }, props), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Button, null, function (_ref2, buttonRef) {
+        var open = _ref2.open,
+            buttonProps = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["open"]);
+        var classes = mergeItemClassNames(className, prefixItemClassName("pull-" + (rtl ? 'left' : 'right')), prefixItemClassName(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["toggle"]))), // prefixItemClassName`submenu`,
+        withItemClassPrefix({
+          'with-icon': icon,
+          open: open,
+          // active: selected,
+          disabled: disabled // focus: active
+
+        }));
+        return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+          ref: (0, _utils.mergeRefs)(buttonRef, buttonRef),
+          className: classes,
+          "data-event-key": eventKey,
+          "data-event-key-type": typeof eventKey
+        }, buttonProps), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
+          className: prefix('menu-icon')
+        }), title, /*#__PURE__*/_react.default.createElement(Icon, {
+          className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["toggle-icon"])))
+        }));
+      }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Content, null, function (_ref3, elementRef) {
+        var open = _ref3.open;
+        var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());
+        return /*#__PURE__*/_react.default.createElement("ul", (0, _extends2.default)({
+          ref: elementRef,
+          className: menuClassName,
+          hidden: !open
+        }, menuProps), children);
+      }));
+    });
+  }
+
   return /*#__PURE__*/_react.default.createElement(_Menu.default, {
     openMenuOn: ['mouseover', 'click'],
-    renderMenuButton: function renderMenuButton(_ref, buttonRef) {
-      var open = _ref.open,
-          menuButtonProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["open"]);
+    renderMenuButton: function renderMenuButton(_ref4, buttonRef) {
+      var open = _ref4.open,
+          menuButtonProps = (0, _objectWithoutPropertiesLoose2.default)(_ref4, ["open"]);
       return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
         disabled: disabled
-      }, function (_ref2, menuitemRef) {
-        var selected = _ref2.selected,
-            active = _ref2.active,
-            menuitem = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["selected", "active"]);
-        var classes = mergeItemClassNames(className, prefixItemClassName("pull-" + (rtl ? 'left' : 'right')), prefixItemClassName(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["toggle"]))), // prefixItemClassName`submenu`,
+      }, function (_ref5, menuitemRef) {
+        var selected = _ref5.selected,
+            active = _ref5.active,
+            menuitem = (0, _objectWithoutPropertiesLoose2.default)(_ref5, ["selected", "active"]);
+        var classes = mergeItemClassNames(className, prefixItemClassName("pull-" + (rtl ? 'left' : 'right')), prefixItemClassName(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["toggle"]))), // prefixItemClassName`submenu`,
         withItemClassPrefix({
           'with-icon': icon,
           open: open,
@@ -160,13 +218,13 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
         }, menuitem, (0, _omit2.default)(menuButtonProps, ['role'])), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
           className: prefix('menu-icon')
         }), title, /*#__PURE__*/_react.default.createElement(Icon, {
-          className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["toggle-icon"])))
+          className: prefix(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["toggle-icon"])))
         }));
       });
     },
-    renderMenuPopup: function renderMenuPopup(_ref3, popupRef) {
-      var open = _ref3.open,
-          popupProps = (0, _objectWithoutPropertiesLoose2.default)(_ref3, ["open"]);
+    renderMenuPopup: function renderMenuPopup(_ref6, popupRef) {
+      var open = _ref6.open,
+          popupProps = (0, _objectWithoutPropertiesLoose2.default)(_ref6, ["open"]);
       var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());
       return /*#__PURE__*/_react.default.createElement("ul", (0, _extends2.default)({
         ref: popupRef,
@@ -175,9 +233,9 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       }, popupProps, menuProps), children);
     },
     onToggleMenu: handleToggleSubmenu
-  }, function (_ref4, menuContainerRef) {
-    var open = _ref4.open,
-        menuContainer = (0, _objectWithoutPropertiesLoose2.default)(_ref4, ["open"]);
+  }, function (_ref7, menuContainerRef) {
+    var open = _ref7.open,
+        menuContainer = (0, _objectWithoutPropertiesLoose2.default)(_ref7, ["open"]);
     var classes = mergeItemClassNames(className, withItemClassPrefix({
       disabled: disabled,
       open: open,

package/cjs/Dropdown/DropdownToggle.js

@@ -23,6 +23,8 @@ var _useToggleCaret = _interopRequireDefault(require("../utils/useToggleCaret"))
 
 var _Sidenav = require("../Sidenav/Sidenav");
 
+var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
+
 var DropdownToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? _Button.default : _props$as,
@@ -38,6 +40,9 @@ var DropdownToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "renderToggle", "children", "icon", "noCaret", "placement"]);
   var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
 
+  var _useContext = (0, _react.useContext)(_NavContext.default),
+      withinNav = _useContext.withinNav;
+
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       prefix = _useClassNames.prefix,
       withClassPrefix = _useClassNames.withClassPrefix,
@@ -50,7 +55,9 @@ var DropdownToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref
 
   var Caret = (0, _useToggleCaret.default)(inSidenav ? 'bottomStart' : placement);
 
-  var toggle = /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  var toggle = /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    appearance: withinNav ? 'subtle' : undefined
+  }, rest, {
     ref: ref,
     className: classes
   }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {