rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-2025031415

package/cjs/TreePicker/TreePicker.js

@@ -54,13 +54,10 @@ const TreePicker = (0, _utils.forwardRef)((props, ref) => {
     searchKeyword,
     searchable = true,
     showIndentLine,
-    menuClassName: DEPRECATED_menuClassName,
-    menuStyle: DEPRECATED_menuStyle,
     popupClassName,
     popupStyle,
     popupAutoWidth = true,
     treeHeight = 320,
-    menuAutoWidth = popupAutoWidth,
     valueKey = 'value',
     virtualized = false,
     value: controlledValue,
@@ -78,8 +75,7 @@ const TreePicker = (0, _utils.forwardRef)((props, ref) => {
     onExit,
     onEntered,
     renderValue,
-    renderMenu: DEPRECATED_renderMenu,
-    renderTree = DEPRECATED_renderMenu,
+    renderTree,
     renderTreeIcon,
     renderTreeNode,
     renderExtraFooter,
@@ -123,7 +119,7 @@ const TreePicker = (0, _utils.forwardRef)((props, ref) => {
   const {
     prefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const activeNode = (0, _utils2.getTreeActiveNode)(flattenedNodes, value, valueKey);
   const {
     register,
@@ -227,21 +223,13 @@ const TreePicker = (0, _utils.forwardRef)((props, ref) => {
   }));
   const renderTreeView = (positionProps, speakerRef) => {
     const {
-      left,
-      top,
       className
     } = positionProps;
-    const classes = merge(className, DEPRECATED_menuClassName, popupClassName, prefix('tree-menu'));
-    const mergedMenuStyle = {
-      ...DEPRECATED_menuStyle,
-      ...popupStyle,
-      left,
-      top
-    };
+    const classes = merge(className, popupClassName, prefix('tree-menu'));
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
-      autoWidth: menuAutoWidth,
+      autoWidth: popupAutoWidth,
       className: classes,
-      style: mergedMenuStyle,
+      style: popupStyle,
       ref: (0, _utils.mergeRefs)(overlay, speakerRef),
       onKeyDown: onPickerKeydown,
       target: trigger

package/cjs/TreePicker/hooks/useFocusState.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 interface FocusStateProps {
-    target: React.RefObject<HTMLElement>;
+    target: React.RefObject<HTMLElement | null>;
     value?: number | string | null | undefined;
     focusActiveNode: () => void;
     onEnter?: (node: HTMLElement) => void;

package/cjs/Uploader/UploadFileItem.js

@@ -59,10 +59,10 @@ const UploadFileItem = (0, _utils.forwardRef)((props, ref) => {
   } = props;
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix(listType, {
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix(listType, {
     disabled,
     'has-error': file.status === 'error'
   }));

package/cjs/Uploader/UploadTrigger.js

@@ -35,10 +35,10 @@ const UploadTrigger = (0, _utils.forwardRef)((props, ref) => {
   const inputRef = (0, _react.useRef)(null);
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix({
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix({
     disabled,
     customize: children,
     'drag-over': dragOver

package/cjs/Uploader/Uploader.js

@@ -70,7 +70,7 @@ const useFileList = function (defaultFileList) {
     defaultFileList = [];
   }
   const fileListRef = (0, _react.useRef)(defaultFileList.map(createFile));
-  const fileListUpdateCallback = (0, _react.useRef)();
+  const fileListUpdateCallback = (0, _react.useRef)(null);
   const [fileList, dispatch] = (0, _react.useReducer)(fileListReducer, fileListRef.current);
   fileListRef.current = fileList;
   (0, _react.useEffect)(() => {
@@ -143,15 +143,15 @@ const Uploader = (0, _utils.forwardRef)((props, ref) => {
   } = propsWithDefaults;
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix(listType, {
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix(listType, {
     draggable
   }));
-  const rootRef = (0, _react.useRef)();
+  const rootRef = (0, _react.useRef)(null);
   const xhrs = (0, _react.useRef)({});
-  const trigger = (0, _react.useRef)();
+  const trigger = (0, _react.useRef)(null);
   const [fileList, dispatch] = useFileList(fileListProp || defaultFileList);
   (0, _react.useEffect)(() => {
     if (typeof fileListProp !== 'undefined') {
@@ -382,7 +382,7 @@ const Uploader = (0, _utils.forwardRef)((props, ref) => {
   if (plaintext) {
     return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {
       localeKey: "notUploaded",
-      className: withClassPrefix(listType)
+      className: withPrefix(listType)
     }, fileList.current.length ? renderList[1] : null);
   }
   if (listType === 'picture') {

package/cjs/Uploader/utils/ajaxUpload.d.ts

@@ -18,6 +18,6 @@ interface Options {
 }
 export default function ajaxUpload(options: Options): {
     xhr: XMLHttpRequest;
-    data: File | FormData;
+    data: FormData | File;
 };
 export {};

package/cjs/Whisper/Whisper.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { OverlayTriggerHandle, OverlayTriggerProps } from '../internals/Overlay/OverlayTrigger';
+import { OverlayTriggerProps } from '../internals/Overlay/OverlayTrigger';
+import type { OverlayTriggerHandle } from '../internals/Overlay';
 export type WhisperProps = OverlayTriggerProps;
 export type WhisperInstance = OverlayTriggerHandle;
 /**

package/cjs/index.d.ts

@@ -3,6 +3,7 @@ export * from './Heading';
 export * from './HeadingGroup';
 export * from './Highlight';
 export * from './SafeAnchor';
+export * from './Kbd';
 export * from './Button';
 export * from './IconButton';
 export * from './ButtonToolbar';
@@ -12,7 +13,6 @@ export * from './Tooltip';
 export * from './Popover';
 export * from './Modal';
 export * from './Drawer';
-export * from './Dropdown';
 export * from './Notification';
 export * from './Message';
 export * from './Loader';
@@ -24,6 +24,8 @@ export * from './Progress';
 export * from './Avatar';
 export * from './AvatarGroup';
 export * from './Image';
+export * from './Dropdown';
+export * from './Menu';
 export * from './Nav';
 export * from './Navbar';
 export * from './Sidenav';
@@ -85,15 +87,15 @@ export * from './TagGroup';
 export * from './List';
 export * from './Calendar';
 export * from './Carousel';
+export * from './Box';
 export * from './Grid';
-export * from './Row';
-export * from './Col';
 export * from './FlexboxGrid';
 export * from './Container';
 export * from './Content';
 export * from './Header';
 export * from './Sidebar';
 export * from './Footer';
+export * from './Center';
 export * from './Divider';
 export * from './Stack';
 export * from './Schema';

package/cjs/index.js

@@ -32,6 +32,12 @@ Object.keys(_SafeAnchor).forEach(function (key) {
   if (key in exports && exports[key] === _SafeAnchor[key]) return;
   exports[key] = _SafeAnchor[key];
 });
+var _Kbd = require("./Kbd");
+Object.keys(_Kbd).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Kbd[key]) return;
+  exports[key] = _Kbd[key];
+});
 var _Button = require("./Button");
 Object.keys(_Button).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -86,12 +92,6 @@ Object.keys(_Drawer).forEach(function (key) {
   if (key in exports && exports[key] === _Drawer[key]) return;
   exports[key] = _Drawer[key];
 });
-var _Dropdown = require("./Dropdown");
-Object.keys(_Dropdown).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Dropdown[key]) return;
-  exports[key] = _Dropdown[key];
-});
 var _Notification = require("./Notification");
 Object.keys(_Notification).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -158,6 +158,18 @@ Object.keys(_Image).forEach(function (key) {
   if (key in exports && exports[key] === _Image[key]) return;
   exports[key] = _Image[key];
 });
+var _Dropdown = require("./Dropdown");
+Object.keys(_Dropdown).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Dropdown[key]) return;
+  exports[key] = _Dropdown[key];
+});
+var _Menu = require("./Menu");
+Object.keys(_Menu).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Menu[key]) return;
+  exports[key] = _Menu[key];
+});
 var _Nav = require("./Nav");
 Object.keys(_Nav).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -524,24 +536,18 @@ Object.keys(_Carousel).forEach(function (key) {
   if (key in exports && exports[key] === _Carousel[key]) return;
   exports[key] = _Carousel[key];
 });
+var _Box = require("./Box");
+Object.keys(_Box).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Box[key]) return;
+  exports[key] = _Box[key];
+});
 var _Grid = require("./Grid");
 Object.keys(_Grid).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Grid[key]) return;
   exports[key] = _Grid[key];
 });
-var _Row = require("./Row");
-Object.keys(_Row).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Row[key]) return;
-  exports[key] = _Row[key];
-});
-var _Col = require("./Col");
-Object.keys(_Col).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Col[key]) return;
-  exports[key] = _Col[key];
-});
 var _FlexboxGrid = require("./FlexboxGrid");
 Object.keys(_FlexboxGrid).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -578,6 +584,12 @@ Object.keys(_Footer).forEach(function (key) {
   if (key in exports && exports[key] === _Footer[key]) return;
   exports[key] = _Footer[key];
 });
+var _Center = require("./Center");
+Object.keys(_Center).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Center[key]) return;
+  exports[key] = _Center[key];
+});
 var _Divider = require("./Divider");
 Object.keys(_Divider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/internals/Box/Box.d.ts

@@ -0,0 +1,43 @@
+import { CSSProperties as CSS } from 'react';
+import type { WithAsProps, Breakpoints, ColorScheme, Size } from '../types';
+export interface BoxProps extends WithAsProps {
+    /** Override the 'as' prop when Box is used as a base component */
+    componentAs?: WithAsProps['as'];
+    /** Display element */
+    visible?: Breakpoints;
+    /** Hide element */
+    hidden?: Breakpoints;
+    /** Display property */
+    display?: CSS['display'];
+    /** Padding */
+    p?: CSS['padding'];
+    pt?: CSS['paddingTop'];
+    pb?: CSS['paddingBottom'];
+    pl?: CSS['paddingLeft'];
+    pr?: CSS['paddingRight'];
+    px?: CSS['paddingInline'];
+    py?: CSS['paddingBlock'];
+    /** Margin */
+    m?: CSS['margin'];
+    mt?: CSS['marginTop'];
+    mb?: CSS['marginBottom'];
+    ml?: CSS['marginLeft'];
+    mr?: CSS['marginRight'];
+    mx?: CSS['marginInline'];
+    my?: CSS['marginBlock'];
+    /** Box size */
+    w?: CSS['width'];
+    h?: CSS['height'];
+    /** Box Color */
+    color?: ColorScheme | CSS['color'];
+    /** Box Background */
+    bg?: ColorScheme | CSS['backgroundColor'];
+    /** Box Border Radius */
+    rounded?: Size | CSS['borderRadius'] | 'full';
+    /** Box Border */
+    border?: CSS['border'];
+    /** Box Shadow */
+    shadow?: Size | CSS['boxShadow'];
+}
+declare const Box: import("../types").InternalRefForwardingComponent<"div", BoxProps, never> & Record<string, never>;
+export default Box;

package/cjs/internals/Box/Box.js

@@ -0,0 +1,44 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("../utils");
+var _hooks = require("../hooks");
+var _utils2 = require("./utils");
+const Box = (0, _utils.forwardRef)((props, ref) => {
+  const {
+    as: Component = 'div',
+    classPrefix = 'box',
+    className,
+    children,
+    componentAs,
+    visible,
+    hidden,
+    style,
+    ...rest
+  } = props;
+  const boxProps = (0, _utils2.extractBoxProps)(rest);
+  const domProps = (0, _utils2.omitBoxProps)(rest);
+  const {
+    merge,
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix({
+    [`visible-${visible}`]: visible,
+    [`hidden-${hidden}`]: hidden
+  }));
+  const boxCSSVars = (0, _utils2.getBoxCSSVariables)(boxProps);
+  const boxStyle = (0, _utils.mergeStyles)(style, boxCSSVars);
+  const FinalComponent = componentAs || Component;
+  return /*#__PURE__*/_react.default.createElement(FinalComponent, (0, _extends2.default)({
+    ref: ref,
+    className: classes,
+    style: boxStyle
+  }, domProps), children);
+});
+Box.displayName = 'Box';
+var _default = exports.default = Box;

package/cjs/internals/Box/index.d.ts

@@ -0,0 +1,3 @@
+import Box from './Box';
+export type { BoxProps } from './Box';
+export default Box;

package/cjs/internals/Box/index.js

@@ -0,0 +1,8 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _Box = _interopRequireDefault(require("./Box"));
+var _default = exports.default = _Box.default;

package/cjs/internals/Box/utils.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Extract box properties from props
+ * @param props Original props object
+ * @returns Object containing only box properties
+ */
+export declare const extractBoxProps: (props: Record<string, any>) => Record<string, any>;
+/**
+ * Filter out layout properties from props
+ * @param props Original props object
+ * @returns New object without layout properties
+ */
+export declare const omitBoxProps: (props: Record<string, any>) => Record<string, any>;
+/**
+ * Converts layout properties to CSS variables with abbreviated names
+ * @param props Object containing layout properties
+ * @returns Object with CSS variables
+ */
+export declare const getBoxCSSVariables: (props: Record<string, any>) => Record<string, string | number | undefined>;

package/cjs/internals/Box/utils.js

@@ -0,0 +1,120 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.omitBoxProps = exports.getBoxCSSVariables = exports.extractBoxProps = void 0;
+var _utils = require("../utils");
+// Mapping for padding properties to their CSS style equivalents
+const paddingStyleMap = {
+  p: 'padding',
+  pt: 'paddingTop',
+  pb: 'paddingBottom',
+  pl: 'paddingLeft',
+  pr: 'paddingRight',
+  px: 'paddingInline',
+  py: 'paddingBlock'
+};
+
+// Mapping for margin properties to their CSS style equivalents
+const marginStyleMap = {
+  m: 'margin',
+  mt: 'marginTop',
+  mb: 'marginBottom',
+  ml: 'marginLeft',
+  mr: 'marginRight',
+  mx: 'marginInline',
+  my: 'marginBlock'
+};
+
+// Mapping for size properties to their CSS style equivalents
+const sizeStyleMap = {
+  w: 'width',
+  h: 'height'
+};
+
+// Derive box property keys from style mappings
+const boxPropKeys = [...Object.keys(paddingStyleMap), ...Object.keys(marginStyleMap), ...Object.keys(sizeStyleMap), 'rounded', 'border', 'shadow', 'display', 'color', 'bg'];
+
+/**
+ * Extract box properties from props
+ * @param props Original props object
+ * @returns Object containing only box properties
+ */
+const extractBoxProps = props => {
+  const boxProps = {};
+
+  // Extract only box related properties
+  boxPropKeys.forEach(key => {
+    if (key in props && props[key] !== undefined) {
+      boxProps[key] = props[key];
+    }
+  });
+  return boxProps;
+};
+
+/**
+ * Filter out layout properties from props
+ * @param props Original props object
+ * @returns New object without layout properties
+ */
+exports.extractBoxProps = extractBoxProps;
+const omitBoxProps = props => {
+  const filteredProps = {};
+
+  // Copy all properties except box related ones
+  Object.keys(props).forEach(key => {
+    if (!boxPropKeys.includes(key)) {
+      filteredProps[key] = props[key];
+    }
+  });
+  return filteredProps;
+};
+
+/**
+ * Converts layout properties to CSS variables with abbreviated names
+ * @param props Object containing layout properties
+ * @returns Object with CSS variables
+ */
+exports.omitBoxProps = omitBoxProps;
+const getBoxCSSVariables = props => {
+  const cssVars = {};
+
+  // Process padding properties
+  Object.keys(paddingStyleMap).forEach(propKey => {
+    if (props[propKey] !== undefined) {
+      cssVars[`--rs-box-${propKey}`] = (0, _utils.getCssValue)(props[propKey]);
+    }
+  });
+
+  // Process margin properties
+  Object.keys(marginStyleMap).forEach(propKey => {
+    if (props[propKey] !== undefined) {
+      cssVars[`--rs-box-${propKey}`] = (0, _utils.getCssValue)(props[propKey]);
+    }
+  });
+
+  // Process size properties
+  Object.keys(sizeStyleMap).forEach(propKey => {
+    if (props[propKey] !== undefined) {
+      cssVars[`--rs-box-${propKey}`] = (0, _utils.getCssValue)(props[propKey]);
+    }
+  });
+  if (props.border !== undefined) {
+    cssVars['--rs-box-border'] = (0, _utils.getCssValue)(props.border);
+  }
+  if (props.display !== undefined) {
+    cssVars['--rs-box-display'] = props.display;
+  }
+  if (props.color !== undefined) {
+    cssVars['--rs-box-color'] = (0, _utils.getColorVar)(props.color);
+  }
+  if (props.bg !== undefined) {
+    cssVars['--rs-box-bg'] = (0, _utils.getColorVar)(props.bg);
+  }
+  return {
+    ...cssVars,
+    ...(0, _utils.getSizeStyle)(props.rounded, 'box', 'rounded'),
+    ...(0, _utils.getSizeStyle)(props.shadow, 'box', 'shadow')
+  };
+};
+exports.getBoxCSSVariables = getBoxCSSVariables;

package/cjs/internals/CloseButton/CloseButton.js

@@ -26,13 +26,13 @@ const CloseButton = (0, _utils.forwardRef)((props, ref) => {
     getLocale
   } = (0, _CustomProvider.useCustom)();
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const {
     closeLabel
   } = getLocale('CloseButton', overrideLocale);
-  const classes = merge(className, withClassPrefix());
+  const classes = merge(className, withPrefix());
   if (Component === _IconButton.default) {
     return /*#__PURE__*/_react.default.createElement(_IconButton.default, (0, _extends2.default)({
       icon: /*#__PURE__*/_react.default.createElement(_Close.default, null),

package/cjs/internals/Menu/MenuItem.d.ts

@@ -17,7 +17,7 @@ export interface MenuitemRenderProps {
  * Headless ARIA `menuitem`
  * @private
  */
-declare function MenuItem(props: MenuItemProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare function MenuItem(props: MenuItemProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare namespace MenuItem {
     var displayName: string;
 }

package/cjs/internals/Menu/MenuItem.js

@@ -6,8 +6,8 @@ exports.__esModule = true;
 exports.default = void 0;
 var _react = require("react");
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
-var _hooks = require("../hooks");
 var _MenuContext = _interopRequireWildcard(require("./MenuContext"));
+var _hooks = require("../hooks");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**

package/cjs/internals/Menu/Menubar.js

@@ -38,7 +38,10 @@ function Menubar(_ref) {
     if ((0, _utils.isFocusEntering)(event) &&
     // Skip if focus is moving to a focusable element within this menu
     !(event.target !== event.currentTarget && (0, _utils.isFocusableElement)(event.target))) {
-      if (activeItemIndex === null) {
+      const disabled = event.target.getAttribute('aria-disabled');
+
+      // Skip if the item is disabled
+      if (activeItemIndex === null && disabled !== 'true') {
         dispatch({
           type: _MenuContext.MenuActionTypes.MoveFocus,
           to: _MenuContext.MoveFocusTo.First

package/cjs/internals/Menu/useRenderMenuItem.d.ts

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

package/cjs/{Dropdown/useRenderDropdownItem.js → internals/Menu/useRenderMenuItem.js}

@@ -2,11 +2,11 @@
 "use strict";
 
 exports.__esModule = true;
-exports.useRenderDropdownItem = useRenderDropdownItem;
+exports.useRenderMenuItem = useRenderMenuItem;
 var _react = _interopRequireWildcard(require("react"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function useRenderDropdownItem(Component) {
+function useRenderMenuItem(Component) {
   return (0, _react.useCallback)((props, OverrideComponent) => {
     if (Component === 'li') {
       if (OverrideComponent) {

package/cjs/internals/Overlay/Modal.js

@@ -11,7 +11,7 @@ var _contains = _interopRequireDefault(require("dom-lib/contains"));
 var _on = _interopRequireDefault(require("dom-lib/on"));
 var _ModalManager = _interopRequireDefault(require("./ModalManager"));
 var _Fade = _interopRequireDefault(require("../../Animation/Fade"));
-var _OverlayContext = _interopRequireDefault(require("./OverlayContext"));
+var _OverlayProvider = require("./OverlayProvider");
 var _constants = require("../constants");
 var _hooks = require("../hooks");
 var _utils = require("../utils");
@@ -122,8 +122,8 @@ const Modal = (0, _utils.forwardRef)((props, ref) => {
     }
     handleFocusDialog();
   });
-  const documentKeyDownListener = (0, _react.useRef)();
-  const documentFocusListener = (0, _react.useRef)();
+  const documentKeyDownListener = (0, _react.useRef)(null);
+  const documentFocusListener = (0, _react.useRef)(null);
   const handleOpen = (0, _hooks.useEventCallback)(() => {
     if (containerElement) {
       modal.add(containerElement, containerClassName);
@@ -168,11 +168,9 @@ const Modal = (0, _utils.forwardRef)((props, ref) => {
   const handleExited = (0, _react.useCallback)(() => {
     setExited(true);
   }, []);
-  const contextValue = (0, _react.useMemo)(() => ({
-    overlayContainer: () => {
-      return modal.dialog;
-    }
-  }), [modal.dialog]);
+  const overlayContainer = (0, _react.useCallback)(() => {
+    return modal.dialog;
+  }, [modal.dialog]);
   if (!mountModal) {
     return null;
   }
@@ -215,8 +213,8 @@ const Modal = (0, _utils.forwardRef)((props, ref) => {
     onEntering: onEntering,
     onEntered: onEntered
   }), children) : children;
-  return /*#__PURE__*/_react.default.createElement(_OverlayContext.default.Provider, {
-    value: contextValue
+  return /*#__PURE__*/_react.default.createElement(_OverlayProvider.OverlayProvider, {
+    overlayContainer: overlayContainer
   }, /*#__PURE__*/_react.default.createElement(Portal, null, backdrop && renderBackdrop(), /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: (0, _utils.mergeRefs)(modal.setDialogRef, ref),
     style: style,