rsuite 5.2.4 → 5.4.2

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
@@ -56,12 +59,14 @@ function Disclosure(props) {
       openState = _useReducer[0].open,
       dispatch = _useReducer[1];
 
-  var containerElementRef = (0, _react.useRef)();
+  var containerElementRef = (0, _react.useRef)(null);
   var open = openProp !== null && openProp !== void 0 ? openProp : openState;
   (0, _useClickOutside.default)({
     enabled: hideOnClickOutside,
     isOutside: function isOutside(event) {
-      return !containerElementRef.current.contains(event.target);
+      var _containerElementRef$;
+
+      return !((_containerElementRef$ = containerElementRef.current) !== null && _containerElementRef$ !== void 0 && _containerElementRef$.contains(event.target));
     },
     handle: function handle() {
       return dispatch({
@@ -69,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/DisclosureButton.js

@@ -1,24 +1,26 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
 exports.default = void 0;
 
 var _react = require("react");
 
-var _DisclosureContext = _interopRequireWildcard(require("./DisclosureContext"));
+var _DisclosureContext = require("./DisclosureContext");
 
 var _utils = require("../utils");
 
+var _useDisclosureContext2 = _interopRequireDefault(require("./useDisclosureContext"));
+
 function DisclosureButton(props) {
   var children = props.children;
-  var buttonRef = (0, _react.useRef)();
+  var buttonRef = (0, _react.useRef)(null);
 
-  var _useContext = (0, _react.useContext)(_DisclosureContext.default),
-      open = _useContext[0].open,
-      dispatch = _useContext[1],
-      onToggle = _useContext[2].onToggle;
+  var _useDisclosureContext = (0, _useDisclosureContext2.default)(DisclosureButton.displayName),
+      open = _useDisclosureContext[0].open,
+      dispatch = _useDisclosureContext[1],
+      onToggle = _useDisclosureContext[2].onToggle;
 
   var toggle = (0, _react.useCallback)(function (event) {
     if (!open) {

package/cjs/Disclosure/DisclosureContent.js

@@ -7,15 +7,13 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _DisclosureContext = _interopRequireDefault(require("./DisclosureContext"));
+var _useDisclosureContext = _interopRequireDefault(require("./useDisclosureContext"));
 
 function DisclosureContent(props) {
   var children = props.children;
-  var elementRef = (0, _react.useRef)();
-
-  var _useContext = (0, _react.useContext)(_DisclosureContext.default),
-      open = _useContext[0].open;
-
+  var elementRef = (0, _react.useRef)(null);
+  var disclosure = (0, _useDisclosureContext.default)(DisclosureContent.displayName);
+  var open = disclosure[0].open;
   return children({
     open: open
   }, elementRef);

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,14 +8,18 @@ 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>,
     {
-        onToggle: (open: boolean, event?: React.SyntheticEvent) => void;
+        trigger: DisclosureTrigger[];
+        onToggle?: (open: boolean, event: React.SyntheticEvent) => void;
     }
 ];
-declare const DisclosureContext: React.Context<DisclosureContextProps>;
+declare const DisclosureContext: React.Context<DisclosureContextProps | null>;
 export default DisclosureContext;

package/cjs/Disclosure/useDisclosureContext.d.ts

@@ -0,0 +1,2 @@
+import { DisclosureContextProps } from './DisclosureContext';
+export default function useDisclosureContext(component: string): DisclosureContextProps;

package/cjs/Disclosure/useDisclosureContext.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = useDisclosureContext;
+
+var _react = require("react");
+
+var _DisclosureContext = _interopRequireDefault(require("./DisclosureContext"));
+
+function useDisclosureContext(component) {
+  var context = (0, _react.useContext)(_DisclosureContext.default);
+
+  if (!context) {
+    throw new Error("<" + component + "> component must be rendered within a <Disclosure>");
+  }
+
+  return context;
+}

package/cjs/Dropdown/Dropdown.d.ts

@@ -45,7 +45,7 @@ export interface DropdownProps<T = any> extends WithAsProps, Omit<React.HTMLAttr
     /** Callback function for menu state switching */
     onToggle?: (open?: boolean) => void;
     /** Selected callback function */
-    onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
+    onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
 }
 export interface DropdownComponent extends RsRefForwardingComponent<'div', DropdownProps> {
     Item: typeof DropdownItem;

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/DropdownContext.d.ts

@@ -2,9 +2,9 @@ import React, { Dispatch } from 'react';
 import { DropdownAction } from './DropdownState';
 export interface DropdownContextProps {
     activeKey?: string;
-    onSelect: (eventKey: string, event: React.SyntheticEvent) => void;
+    onSelect?: (eventKey: string | undefined, event: React.SyntheticEvent) => void;
     hasSelectedItem?: boolean;
     dispatch?: Dispatch<DropdownAction>;
 }
-declare const DropdownContext: React.Context<DropdownContextProps>;
+declare const DropdownContext: React.Context<DropdownContextProps | null>;
 export default DropdownContext;

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"));
@@ -86,8 +84,9 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       dispatchDisclosure = _ref[1];
 
   var handleClickNavbarDropdownItem = (0, _react.useCallback)(function (event) {
-    dispatchDisclosure({
-      type: _DisclosureContext.DisclosureActionTypes.Hide
+    dispatchDisclosure === null || dispatchDisclosure === void 0 ? void 0 : dispatchDisclosure({
+      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.d.ts

@@ -19,8 +19,8 @@ export interface DropdownMenuProps<T = string> extends StandardProps {
     disabled?: boolean;
     activeKey?: T;
     trigger?: 'hover' | 'click';
-    onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
-    onToggle?: (eventKey: T, event: React.SyntheticEvent) => void;
+    onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
+    onToggle?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
 }
 /**
  * The <Dropdown.Menu> API
@@ -40,5 +40,5 @@ export interface DropdownMenuProps<T = string> extends StandardProps {
  *   </Dropdown.Menu>
  * </Dropdown>
  */
-declare const DropdownMenu: React.ForwardRefExoticComponent<DropdownMenuProps<string> & Omit<React.HTMLAttributes<HTMLUListElement>, "title" | "onSelect"> & React.RefAttributes<unknown>>;
+declare const DropdownMenu: React.ForwardRefExoticComponent<DropdownMenuProps<string> & Omit<React.HTMLAttributes<HTMLUListElement>, "title" | "onSelect"> & React.RefAttributes<HTMLElement>>;
 export default DropdownMenu;

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/DropdownState.d.ts

@@ -33,5 +33,5 @@ export declare type DropdownAction = {
         id: string;
     };
 };
-export declare function reducer(state: DropdownState, action: DropdownAction): DropdownState;
+export declare function reducer(state: DropdownState | undefined, action: DropdownAction): DropdownState;
 export {};

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,
@@ -33,10 +35,14 @@ var DropdownToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       children = props.children,
       icon = props.icon,
       noCaret = props.noCaret,
-      placement = props.placement,
+      _props$placement = props.placement,
+      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
       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,
@@ -49,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, {

package/cjs/Dropdown/useRenderDropdownItem.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare function useRenderDropdownItem(Component: React.ElementType): (props: any, OverrideComponent?: React.ElementType) => JSX.Element;
+export declare function useRenderDropdownItem(Component: React.ElementType): (props: any, OverrideComponent?: React.ElementType<any> | undefined) => JSX.Element;

package/cjs/Form/Form.js

@@ -250,7 +250,7 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setFormValue(nextFormValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextFormValue, event);
   }, [onChange, getFormValue]);
-  var rootRef = (0, _react.useRef)();
+  var rootRef = (0, _react.useRef)(null);
   var formContextValue = (0, _react.useMemo)(function () {
     return {
       model: model,

package/cjs/Form/FormContext.d.ts

@@ -19,6 +19,6 @@ export interface FormContextValue<T = Record<string, any>, errorMsgType = any, E
 export declare const FormContext: React.Context<FormContextValue<Record<string, any>, any, {
     [x: string]: any;
 }>>;
-export declare const FormValueContext: React.Context<Record<string, any>>;
+export declare const FormValueContext: React.Context<Record<string, any> | undefined>;
 export declare const FormPlaintextContext: React.Context<boolean>;
 export default FormContext;

package/cjs/FormControl/FormControl.d.ts

@@ -32,7 +32,7 @@ export interface FormControlProps<P = any, ValueType = any> extends WithAsProps,
 interface FormControlComponent extends React.FC<FormControlProps> {
     <Accepter extends React.ElementType = typeof Input>(props: FormControlProps & {
         accepter?: Accepter;
-    } & React.ComponentPropsWithRef<Accepter>): React.ReactElement;
+    } & React.ComponentPropsWithRef<Accepter>): React.ReactElement | null;
 }
 declare const FormControl: FormControlComponent;
 export default FormControl;

package/cjs/FormControl/FormControl.js

@@ -68,7 +68,8 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       disabled = _props$disabled === void 0 ? disabledContext : _props$disabled,
       onChange = props.onChange,
       onBlur = props.onBlur,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "accepter", "classPrefix", "className", "checkAsync", "checkTrigger", "errorPlacement", "errorMessage", "name", "value", "readOnly", "plaintext", "disabled", "onChange", "onBlur"]);
+      defaultValue = props.defaultValue,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "accepter", "classPrefix", "className", "checkAsync", "checkTrigger", "errorPlacement", "errorMessage", "name", "value", "readOnly", "plaintext", "disabled", "onChange", "onBlur", "defaultValue"]);
 
   var _useContext2 = (0, _react.useContext)(_FormGroup.FormGroupContext),
       controlId = _useContext2.controlId;
@@ -118,12 +119,12 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var nextFormValue = (0, _extends3.default)({}, formValue, (_extends2 = {}, _extends2[name] = value, _extends2));
 
     if (checkAsync) {
-      return model.checkForFieldAsync(name, nextFormValue).then(function (checkResult) {
+      return model === null || model === void 0 ? void 0 : model.checkForFieldAsync(name, nextFormValue).then(function (checkResult) {
         return callbackEvents(checkResult);
       });
     }
 
-    return Promise.resolve(callbackEvents(model.checkForField(name, nextFormValue)));
+    return Promise.resolve(callbackEvents(model === null || model === void 0 ? void 0 : model.checkForField(name, nextFormValue)));
   };
 
   var messageNode = null;
@@ -157,7 +158,7 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     name: name,
     onChange: handleFieldChange,
     onBlur: handleFieldBlur,
-    defaultValue: formDefaultValue[name],
+    defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : formDefaultValue[name],
     value: val
   })), /*#__PURE__*/_react.default.createElement(_FormErrorMessage.default, {
     id: controlId + "-error-message",

package/cjs/FormGroup/FormGroup.d.ts

@@ -8,7 +8,7 @@ export interface FormGroupProps extends WithAsProps {
     controlId?: string;
 }
 export declare const FormGroupContext: React.Context<{
-    controlId?: string;
+    controlId?: string | undefined;
 }>;
 declare const FormGroup: RsRefForwardingComponent<'div', FormGroupProps>;
 export default FormGroup;

package/cjs/FormGroup/FormGroup.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -9,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -33,10 +35,13 @@ var FormGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       merge = _useClassNames.merge;
 
   var classes = merge(className, withClassPrefix());
-  return /*#__PURE__*/_react.default.createElement(FormGroupContext.Provider, {
-    value: {
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
       controlId: controlId
-    }
+    };
+  }, [controlId]);
+  return /*#__PURE__*/_react.default.createElement(FormGroupContext.Provider, {
+    value: contextValue
   }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes,