rsuite 5.2.4 → 5.4.2

package/esm/Disclosure/Disclosure.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 // Headless Disclosure
 // Ref: https://w3c.github.io/aria-practices/#disclosure
-import React, { useMemo, useReducer, useRef } from 'react';
+import React, { useMemo, useReducer, useRef, useCallback, useContext } from 'react';
 import DisclosureContext, { DisclosureActionTypes } from './DisclosureContext';
 import DisclosureButton from './DisclosureButton';
 import DisclosureContent from './DisclosureContent';
@@ -26,14 +26,17 @@ function disclosureReducer(state, action) {
   return state;
 }
 
-function Disclosure(props) {
+var Disclosure = /*#__PURE__*/React.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 = useContext(DisclosureContext);
 
   var _useReducer = useReducer(disclosureReducer, _extends({}, initialDisclosureState, {
     open: defaultOpen
@@ -41,12 +44,14 @@ function Disclosure(props) {
       openState = _useReducer[0].open,
       dispatch = _useReducer[1];
 
-  var containerElementRef = useRef();
+  var containerElementRef = useRef(null);
   var open = openProp !== null && openProp !== void 0 ? openProp : openState;
   useClickOutside({
     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({
@@ -54,20 +59,56 @@ function Disclosure(props) {
       });
     }
   });
-  var context = useMemo(function () {
+  var onMouseOver = useCallback(function (event) {
+    if (!open) {
+      dispatch({
+        type: DisclosureActionTypes.Show
+      });
+      onToggle === null || onToggle === void 0 ? void 0 : onToggle(true, event);
+    }
+  }, [open, dispatch, onToggle]);
+  var onMouseOut = useCallback(function (event) {
+    if (open) {
+      dispatch({
+        type: DisclosureActionTypes.Hide
+      });
+      onToggle === null || onToggle === void 0 ? void 0 : onToggle(false, event);
+    }
+  }, [open, dispatch, onToggle]);
+  var contextValue = 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]);
-  return /*#__PURE__*/React.createElement(DisclosureContext.Provider, {
-    value: context
-  }, children({
-    open: open
-  }, containerElementRef));
-}
+  }, [parentDisclosure, open, dispatch, onToggle, trigger]);
+  var renderProps = 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.createElement(DisclosureContext.Provider, {
+    value: contextValue
+  }, children(renderProps, containerElementRef));
+});
 Disclosure.Button = DisclosureButton;
 Disclosure.Content = DisclosureContent;
 export default Disclosure;

package/esm/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/esm/Disclosure/DisclosureButton.js

@@ -1,15 +1,16 @@
-import { useCallback, useContext, useRef } from 'react';
-import DisclosureContext, { DisclosureActionTypes } from './DisclosureContext';
+import { useCallback, useRef } from 'react';
+import { DisclosureActionTypes } from './DisclosureContext';
 import { KEY_VALUES } from '../utils';
+import useDisclosureContext from './useDisclosureContext';
 
 function DisclosureButton(props) {
   var children = props.children;
-  var buttonRef = useRef();
+  var buttonRef = useRef(null);
 
-  var _useContext = useContext(DisclosureContext),
-      open = _useContext[0].open,
-      dispatch = _useContext[1],
-      onToggle = _useContext[2].onToggle;
+  var _useDisclosureContext = useDisclosureContext(DisclosureButton.displayName),
+      open = _useDisclosureContext[0].open,
+      dispatch = _useDisclosureContext[1],
+      onToggle = _useDisclosureContext[2].onToggle;
 
   var toggle = useCallback(function (event) {
     if (!open) {

package/esm/Disclosure/DisclosureContent.js

@@ -1,13 +1,11 @@
-import { useContext, useRef } from 'react';
-import DisclosureContext from './DisclosureContext';
+import { useRef } from 'react';
+import useDisclosureContext from './useDisclosureContext';
 
 function DisclosureContent(props) {
   var children = props.children;
-  var elementRef = useRef();
-
-  var _useContext = useContext(DisclosureContext),
-      open = _useContext[0].open;
-
+  var elementRef = useRef(null);
+  var disclosure = useDisclosureContext(DisclosureContent.displayName);
+  var open = disclosure[0].open;
   return children({
     open: open
   }, elementRef);

package/esm/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/esm/Disclosure/useDisclosureContext.d.ts

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

package/esm/Disclosure/useDisclosureContext.js

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import DisclosureContext from './DisclosureContext';
+export default function useDisclosureContext(component) {
+  var context = useContext(DisclosureContext);
+
+  if (!context) {
+    throw new Error("<" + component + "> component must be rendered within a <Disclosure>");
+  }
+
+  return context;
+}

package/esm/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/esm/Dropdown/Dropdown.js

@@ -15,7 +15,7 @@ import DropdownToggle from './DropdownToggle';
 import MenuContext from '../Menu/MenuContext';
 import MenuItem from '../Menu/MenuItem';
 import kebabCase from 'lodash/kebabCase';
-import { NavbarContext } from '../Navbar/Navbar';
+import { NavbarContext } from '../Navbar';
 import Disclosure from '../Disclosure/Disclosure';
 import SidenavDropdown from '../Sidenav/SidenavDropdown';
 import NavContext from '../Nav/NavContext';

package/esm/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/esm/Dropdown/DropdownItem.js

@@ -11,7 +11,6 @@ import { createChainedFunction, mergeRefs, shallowEqual, useClassNames } from '.
 import { NavbarContext } from '../Navbar/Navbar';
 import SidenavDropdownItem from '../Sidenav/SidenavDropdownItem';
 import DisclosureContext, { DisclosureActionTypes } from '../Disclosure/DisclosureContext';
-import SafeAnchor from '../SafeAnchor';
 import NavContext from '../Nav/NavContext';
 import useInternalId from '../utils/useInternalId';
 import { DropdownActionType } from './DropdownState';
@@ -61,8 +60,9 @@ var DropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       dispatchDisclosure = _ref[1];
 
   var handleClickNavbarDropdownItem = useCallback(function (event) {
-    dispatchDisclosure({
-      type: DisclosureActionTypes.Hide
+    dispatchDisclosure === null || dispatchDisclosure === void 0 ? void 0 : dispatchDisclosure({
+      type: DisclosureActionTypes.Hide,
+      cascade: true
     });
     handleSelectItem === null || handleSelectItem === void 0 ? void 0 : handleSelectItem(event);
   }, [dispatchDisclosure, handleSelectItem]);
@@ -129,16 +129,16 @@ var DropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       dataAttributes['data-event-key-type'] = typeof eventKey;
     }
 
-    return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(SafeAnchor, _extends({
+    return renderDropdownItem(_extends({
       ref: ref,
       className: classes,
-      "aria-current": selected || undefined
+      'aria-current': selected || undefined
     }, dataAttributes, restProps, {
-      as: Component,
-      onClick: createChainedFunction(handleClickNavbarDropdownItem, restProps.onClick)
-    }), icon && /*#__PURE__*/React.cloneElement(icon, {
-      className: prefix('menu-icon')
-    }), children));
+      onClick: createChainedFunction(handleClickNavbarDropdownItem, restProps.onClick),
+      children: /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.cloneElement(icon, {
+        className: prefix('menu-icon')
+      }), children)
+    }));
   }
 
   return /*#__PURE__*/React.createElement(MenuItem, {

package/esm/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/esm/Dropdown/DropdownMenu.js

@@ -2,9 +2,9 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-import React, { useCallback, useContext } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import omit from 'lodash/omit';
 import Menu from '../Menu/Menu';
 import MenuItem from '../Menu/MenuItem';
@@ -15,8 +15,10 @@ import AngleLeft from '@rsuite/icons/legacy/AngleLeft';
 import AngleRight from '@rsuite/icons/legacy/AngleRight';
 import useCustom from '../utils/useCustom';
 import DropdownContext from './DropdownContext';
+import { NavbarContext } from '../Navbar';
 import Menubar from '../Menu/Menubar';
 import SidenavDropdownMenu from '../Sidenav/SidenavDropdownMenu';
+import Disclosure from '../Disclosure';
 
 /**
  * The <Dropdown.Menu> API
@@ -49,6 +51,7 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var dropdown = useContext(DropdownContext);
   var sidenav = useContext(SidenavContext);
+  var withinNavbar = Boolean(useContext(NavbarContext));
 
   var _useCustom = useCustom('DropdownMenu'),
       rtl = _useCustom.rtl;
@@ -69,17 +72,20 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useClassNames3 = useClassNames('dropdown-item'),
       mergeItemClassNames = _useClassNames3.merge,
       withItemClassPrefix = _useClassNames3.withClassPrefix,
-      prefixItemClassName = _useClassNames3.prefix; // <Dropdown.Menu> is used outside of <Dropdown>
+      prefixItemClassName = _useClassNames3.prefix;
+
+  var contextValue = 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.createElement(DropdownContext.Provider, {
-      value: {
-        activeKey: activeKey,
-        onSelect: onSelect
-      }
+      value: contextValue
     }, /*#__PURE__*/React.createElement(Menubar, {
       vertical: true,
       onActivateItem: function onActivateItem(event) {
@@ -110,21 +116,73 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
       disabled = _omit.disabled,
       menuProps = _objectWithoutPropertiesLoose(_omit, ["icon", "className", "disabled"]);
 
-  var Icon = rtl ? AngleLeft : AngleRight;
+  var Icon = rtl ? AngleLeft : AngleRight; // Renders a disclosure when used within <Navbar>
+
+  if (withinNavbar) {
+    return /*#__PURE__*/React.createElement(Disclosure, {
+      hideOnClickOutside: true,
+      trigger: ['click', 'mouseover']
+    }, function (_ref, containerRef) {
+      var open = _ref.open,
+          props = _objectWithoutPropertiesLoose(_ref, ["open"]);
+
+      var classes = mergeItemClassNames(className, withItemClassPrefix({
+        disabled: disabled,
+        open: open,
+        submenu: true // focus: hasFocus
+
+      }));
+      return /*#__PURE__*/React.createElement("li", _extends({
+        ref: mergeRefs(ref, containerRef),
+        className: classes
+      }, props), /*#__PURE__*/React.createElement(Disclosure.Button, null, function (_ref2, buttonRef) {
+        var open = _ref2.open,
+            buttonProps = _objectWithoutPropertiesLoose(_ref2, ["open"]);
+
+        var classes = mergeItemClassNames(className, prefixItemClassName("pull-" + (rtl ? 'left' : 'right')), prefixItemClassName(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["toggle"]))), // prefixItemClassName`submenu`,
+        withItemClassPrefix({
+          'with-icon': icon,
+          open: open,
+          // active: selected,
+          disabled: disabled // focus: active
+
+        }));
+        return /*#__PURE__*/React.createElement("div", _extends({
+          ref: mergeRefs(buttonRef, buttonRef),
+          className: classes,
+          "data-event-key": eventKey,
+          "data-event-key-type": typeof eventKey
+        }, buttonProps), icon && /*#__PURE__*/React.cloneElement(icon, {
+          className: prefix('menu-icon')
+        }), title, /*#__PURE__*/React.createElement(Icon, {
+          className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["toggle-icon"])))
+        }));
+      }), /*#__PURE__*/React.createElement(Disclosure.Content, null, function (_ref3, elementRef) {
+        var open = _ref3.open;
+        var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());
+        return /*#__PURE__*/React.createElement("ul", _extends({
+          ref: elementRef,
+          className: menuClassName,
+          hidden: !open
+        }, menuProps), children);
+      }));
+    });
+  }
+
   return /*#__PURE__*/React.createElement(Menu, {
     openMenuOn: ['mouseover', 'click'],
-    renderMenuButton: function renderMenuButton(_ref, buttonRef) {
-      var open = _ref.open,
-          menuButtonProps = _objectWithoutPropertiesLoose(_ref, ["open"]);
+    renderMenuButton: function renderMenuButton(_ref4, buttonRef) {
+      var open = _ref4.open,
+          menuButtonProps = _objectWithoutPropertiesLoose(_ref4, ["open"]);
 
       return /*#__PURE__*/React.createElement(MenuItem, {
         disabled: disabled
-      }, function (_ref2, menuitemRef) {
-        var selected = _ref2.selected,
-            active = _ref2.active,
-            menuitem = _objectWithoutPropertiesLoose(_ref2, ["selected", "active"]);
+      }, function (_ref5, menuitemRef) {
+        var selected = _ref5.selected,
+            active = _ref5.active,
+            menuitem = _objectWithoutPropertiesLoose(_ref5, ["selected", "active"]);
 
-        var classes = mergeItemClassNames(className, prefixItemClassName("pull-" + (rtl ? 'left' : 'right')), prefixItemClassName(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["toggle"]))), // prefixItemClassName`submenu`,
+        var classes = mergeItemClassNames(className, prefixItemClassName("pull-" + (rtl ? 'left' : 'right')), prefixItemClassName(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["toggle"]))), // prefixItemClassName`submenu`,
         withItemClassPrefix({
           'with-icon': icon,
           open: open,
@@ -140,13 +198,13 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
         }, menuitem, omit(menuButtonProps, ['role'])), icon && /*#__PURE__*/React.cloneElement(icon, {
           className: prefix('menu-icon')
         }), title, /*#__PURE__*/React.createElement(Icon, {
-          className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["toggle-icon"])))
+          className: prefix(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["toggle-icon"])))
         }));
       });
     },
-    renderMenuPopup: function renderMenuPopup(_ref3, popupRef) {
-      var open = _ref3.open,
-          popupProps = _objectWithoutPropertiesLoose(_ref3, ["open"]);
+    renderMenuPopup: function renderMenuPopup(_ref6, popupRef) {
+      var open = _ref6.open,
+          popupProps = _objectWithoutPropertiesLoose(_ref6, ["open"]);
 
       var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());
       return /*#__PURE__*/React.createElement("ul", _extends({
@@ -156,9 +214,9 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }, popupProps, menuProps), children);
     },
     onToggleMenu: handleToggleSubmenu
-  }, function (_ref4, menuContainerRef) {
-    var open = _ref4.open,
-        menuContainer = _objectWithoutPropertiesLoose(_ref4, ["open"]);
+  }, function (_ref7, menuContainerRef) {
+    var open = _ref7.open,
+        menuContainer = _objectWithoutPropertiesLoose(_ref7, ["open"]);
 
     var classes = mergeItemClassNames(className, withItemClassPrefix({
       disabled: disabled,

package/esm/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/esm/Dropdown/DropdownToggle.js

@@ -6,6 +6,7 @@ import Button from '../Button';
 import { useClassNames } from '../utils';
 import useToggleCaret from '../utils/useToggleCaret';
 import { SidenavContext } from '../Sidenav/Sidenav';
+import NavContext from '../Nav/NavContext';
 var DropdownToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? Button : _props$as,
@@ -16,11 +17,15 @@ var DropdownToggle = /*#__PURE__*/React.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 = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "renderToggle", "children", "icon", "noCaret", "placement"]);
 
   var sidenav = useContext(SidenavContext);
 
+  var _useContext = useContext(NavContext),
+      withinNav = _useContext.withinNav;
+
   var _useClassNames = useClassNames(classPrefix),
       prefix = _useClassNames.prefix,
       withClassPrefix = _useClassNames.withClassPrefix,
@@ -32,7 +37,9 @@ var DropdownToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var inSidenav = !!sidenav; // Caret icon is down by default, when Dropdown is used in Sidenav.
 
   var Caret = useToggleCaret(inSidenav ? 'bottomStart' : placement);
-  var toggle = /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  var toggle = /*#__PURE__*/React.createElement(Component, _extends({
+    appearance: withinNav ? 'subtle' : undefined
+  }, rest, {
     ref: ref,
     className: classes
   }), icon && /*#__PURE__*/React.cloneElement(icon, {

package/esm/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/esm/Form/Form.js

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

package/esm/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/esm/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/esm/FormControl/FormControl.js

@@ -53,7 +53,8 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (props, ref) {
       disabled = _props$disabled === void 0 ? disabledContext : _props$disabled,
       onChange = props.onChange,
       onBlur = props.onBlur,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "accepter", "classPrefix", "className", "checkAsync", "checkTrigger", "errorPlacement", "errorMessage", "name", "value", "readOnly", "plaintext", "disabled", "onChange", "onBlur"]);
+      defaultValue = props.defaultValue,
+      rest = _objectWithoutPropertiesLoose(props, ["as", "accepter", "classPrefix", "className", "checkAsync", "checkTrigger", "errorPlacement", "errorMessage", "name", "value", "readOnly", "plaintext", "disabled", "onChange", "onBlur", "defaultValue"]);
 
   var _useContext2 = useContext(FormGroupContext),
       controlId = _useContext2.controlId;
@@ -103,12 +104,12 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var nextFormValue = _extends({}, 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;
@@ -142,7 +143,7 @@ var FormControl = /*#__PURE__*/React.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.createElement(FormErrorMessage, {
     id: controlId + "-error-message",

package/esm/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/esm/FormGroup/FormGroup.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames } from '../utils';
 export var FormGroupContext = /*#__PURE__*/React.createContext({});
@@ -18,10 +18,13 @@ var FormGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
       merge = _useClassNames.merge;
 
   var classes = merge(className, withClassPrefix());
-  return /*#__PURE__*/React.createElement(FormGroupContext.Provider, {
-    value: {
+  var contextValue = useMemo(function () {
+    return {
       controlId: controlId
-    }
+    };
+  }, [controlId]);
+  return /*#__PURE__*/React.createElement(FormGroupContext.Provider, {
+    value: contextValue
   }, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: classes,