@carbon/react 1.48.0-rc.0 → 1.48.0

package/es/components/ComboButton/index.js

@@ -14,6 +14,7 @@ import { IconButton } from '../IconButton/index.js';
 import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 import { Menu } from '../Menu/Menu.js';
+import '../Menu/MenuItem.js';
 import { useAttachedMenu } from '../../internal/useAttachedMenu.js';
 import { useId } from '../../internal/useId.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';

package/es/components/Menu/Menu.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
+    /**
+     * A collection of MenuItems to be rendered within this Menu.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * A label describing the Menu.
+     */
+    label?: string;
+    /**
+     * The mode of this menu. Defaults to full.
+     * `full` supports nesting and selectable menu items, but no icons.
+     * `basic` supports icons but no nesting or selectable menu items.
+     *
+     * **This prop is not intended for use and will be set by the respective implementation (like useContextMenu, MenuButton, and ComboButton).**
+     */
+    mode?: 'full' | 'basic';
+    /**
+     * Provide an optional function to be called when the Menu should be closed.
+     */
+    onClose?: () => void;
+    /**
+     * Provide an optional function to be called when the Menu is opened.
+     */
+    onOpen?: () => void;
+    /**
+     * Whether the Menu is open or not.
+     */
+    open?: boolean;
+    /**
+     * Specify the size of the Menu.
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
+     */
+    target?: any;
+    /**
+     * Specify the x position of the Menu. Either pass a single number or an array with two numbers describing your activator's boundaries ([x1, x2])
+     */
+    x?: number | (number | null | undefined)[];
+    /**
+     * Specify the y position of the Menu. Either pass a single number or an array with two numbers describing your activator's boundaries ([y1, y2])
+     */
+    y?: number | (number | null | undefined)[];
+}
+declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLUListElement>>;
+export { Menu };

package/es/components/Menu/Menu.js

@@ -56,7 +56,7 @@ const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardR
       dispatch: childDispatch
     };
   }, [childState, childDispatch]);
-  const menu = useRef();
+  const menu = useRef(null);
   const ref = useMergedRefs([forwardRef, menu]);
   const [position, setPosition] = useState([-1, -1]);
   const focusableItems = childContext.state.items.filter(item => !item.disabled && item.ref.current);
@@ -144,11 +144,14 @@ const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardR
     }
   }
   function handleBlur(e) {
-    if (open && onClose && isRoot && !menu.current.contains(e.relatedTarget)) {
+    if (open && onClose && isRoot && !menu.current?.contains(e.relatedTarget)) {
       handleClose(e);
     }
   }
   function fitValue(range, axis) {
+    if (!menu.current) {
+      return;
+    }
     const {
       width,
       height
@@ -187,18 +190,38 @@ const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardR
     reversedAnchor - size >= 0 ? reversedAnchor - size + offset : false,
     // align at max (second fallback)
     max - spacing - size];
+
+    // Previous array `options`, has at least one item that is a number (the last one - second fallback).
+    // That guarantees that the return of `find()` will always be a number
+    // and we can safely add the numeric casting `as number`.
     const bestOption = options.find(option => option !== false);
     return bestOption >= spacing ? bestOption : spacing;
   }
+  function notEmpty(value) {
+    return value !== null && value !== undefined;
+  }
+  function getPosition(x) {
+    if (Array.isArray(x)) {
+      // has to be of length 2
+      const filtered = x.filter(notEmpty);
+      if (filtered.length === 2) {
+        return filtered;
+      } else {
+        return;
+      }
+    } else {
+      return [x, x];
+    }
+  }
   function calculatePosition() {
-    if (menu.current) {
-      const ranges = {
-        x: typeof x === 'object' && x.length === 2 ? x : [x, x],
-        y: typeof y === 'object' && y.length === 2 ? y : [y, y]
-      };
-      return [fitValue(ranges.x, 'x'), fitValue(ranges.y, 'y')];
+    const ranges = {
+      x: getPosition(x),
+      y: getPosition(y)
+    };
+    if (!ranges.x || !ranges.y) {
+      return [-1, -1];
     }
-    return [-1, -1];
+    return [fitValue(ranges.x, 'x') ?? -1, fitValue(ranges.y, 'y') ?? -1];
   }
   useEffect(() => {
     if (open && focusableItems.length > 0) {
@@ -212,7 +235,7 @@ const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardR
     } else {
       // reset position when menu is closed in order for the --shown
       // modifier to be applied correctly
-      setPosition(-1, -1);
+      setPosition([-1, -1]);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);

package/es/components/Menu/MenuContext.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+type ActionType = {
+    type: 'enableIcons' | 'registerItem';
+    payload: any;
+};
+type StateType = {
+    isRoot: boolean;
+    mode: 'full' | 'basic';
+    hasIcons: boolean;
+    size: 'xs' | 'sm' | 'md' | 'lg' | null;
+    items: any[];
+    requestCloseRoot: (e: Pick<React.KeyboardEvent<HTMLUListElement>, 'type'>) => void;
+};
+declare function menuReducer(state: StateType, action: ActionType): {
+    hasIcons: boolean;
+    isRoot: boolean;
+    mode: "full" | "basic";
+    size: "sm" | "md" | "lg" | "xs" | null;
+    items: any[];
+    requestCloseRoot: (e: Pick<React.KeyboardEvent<HTMLUListElement>, "type">) => void;
+};
+declare const MenuContext: React.Context<{
+    state: StateType;
+    dispatch: React.Dispatch<any>;
+}>;
+export { MenuContext, menuReducer };

package/es/components/Menu/MenuItem.d.ts

@@ -0,0 +1,119 @@
+/**
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    /**
+     * Optionally provide another Menu to create a submenu. props.children can't be used to specify the content of the MenuItem itself. Use props.label instead.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Specify whether the MenuItem is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Specify the kind of the MenuItem.
+     */
+    kind?: 'default' | 'danger';
+    /**
+     * A required label titling the MenuItem. Will be rendered as its text content.
+     */
+    label: string;
+    /**
+     * Provide an optional function to be called when the MenuItem is clicked.
+     */
+    onClick?: (event: React.KeyboardEvent<HTMLLIElement> | React.MouseEvent<HTMLLIElement>) => void;
+    /**
+     * Only applicable if the parent menu is in `basic` mode. Sets the menu item's icon.
+     */
+    renderIcon?: any;
+    /**
+     * Provide a shortcut for the action of this MenuItem. Note that the component will only render it as a hint but not actually register the shortcut.
+     */
+    shortcut?: string;
+}
+declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLLIElement>>;
+interface MenuItemSelectableProps {
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Specify whether the option should be selected by default.
+     */
+    defaultSelected?: boolean;
+    /**
+     * A required label titling this option.
+     */
+    label: string;
+    /**
+     * Provide an optional function to be called when the selection state changes.
+     */
+    onChange?: React.ChangeEventHandler<HTMLLIElement>;
+    /**
+     * Pass a bool to props.selected to control the state of this option.
+     */
+    selected?: boolean;
+}
+declare const MenuItemSelectable: React.ForwardRefExoticComponent<MenuItemSelectableProps & React.RefAttributes<HTMLLIElement>>;
+interface MenuItemGroupProps {
+    /**
+     * A collection of MenuItems to be rendered within this group.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * A required label titling this group.
+     */
+    label: string;
+}
+declare const MenuItemGroup: React.ForwardRefExoticComponent<MenuItemGroupProps & React.RefAttributes<HTMLLIElement>>;
+interface MenuItemRadioGroupProps {
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Specify the default selected item. Must match the type of props.items.
+     */
+    defaultSelectedItem?: any;
+    /**
+     * Provide a function to convert an item to the string that will be rendered. Defaults to item.toString().
+     */
+    itemToString?: (item: any) => string;
+    /**
+     * Provide the options for this radio group. Can be of any type, as long as you provide an appropriate props.itemToString function.
+     */
+    items?: any[];
+    /**
+     * A required label titling this radio group.
+     */
+    label: string;
+    /**
+     * Provide an optional function to be called when the selection changes.
+     */
+    onChange?: React.ChangeEventHandler<HTMLLIElement>;
+    /**
+     * Provide props.selectedItem to control the state of this radio group. Must match the type of props.items.
+     */
+    selectedItem?: any;
+}
+declare const MenuItemRadioGroup: React.ForwardRefExoticComponent<MenuItemRadioGroupProps & React.RefAttributes<HTMLLIElement>>;
+interface MenuItemDividerProps {
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+}
+declare const MenuItemDivider: React.ForwardRefExoticComponent<MenuItemDividerProps & React.RefAttributes<HTMLLIElement>>;
+export { MenuItem, MenuItemSelectable, MenuItemGroup, MenuItemRadioGroup, MenuItemDivider, };

package/es/components/Menu/MenuItem.js

@@ -39,7 +39,7 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
   } = _ref;
   const prefix = usePrefix();
   const context = useContext(MenuContext);
-  const menuItem = useRef();
+  const menuItem = useRef(null);
   const ref = useMergedRefs([forwardRef, menuItem]);
   const [boundaries, setBoundaries] = useState({
     x: -1,
@@ -61,6 +61,9 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
     });
   }
   function openSubmenu() {
+    if (!menuItem.current) {
+      return;
+    }
     const {
       x,
       y,
@@ -105,9 +108,11 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
     }, hoverIntentDelay);
   }
   function handleMouseLeave() {
-    clearTimeout(hoverIntentTimeout.current);
-    closeSubmenu();
-    menuItem.current.focus();
+    if (hoverIntentTimeout.current) {
+      clearTimeout(hoverIntentTimeout.current);
+      closeSubmenu();
+      menuItem.current?.focus();
+    }
   }
   function handleKeyDown(e) {
     if (hasChildren && match(e, ArrowRight)) {
@@ -157,13 +162,13 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
   }, rest, {
     ref: ref,
     className: classNames,
-    tabIndex: "-1",
-    "aria-disabled": isDisabled || null,
-    "aria-haspopup": hasChildren || null,
-    "aria-expanded": hasChildren ? submenuOpen : null,
+    tabIndex: -1,
+    "aria-disabled": isDisabled,
+    "aria-haspopup": hasChildren || undefined,
+    "aria-expanded": hasChildren ? submenuOpen : undefined,
     onClick: handleClick,
-    onMouseEnter: hasChildren ? handleMouseEnter : null,
-    onMouseLeave: hasChildren ? handleMouseLeave : null,
+    onMouseEnter: hasChildren ? handleMouseEnter : undefined,
+    onMouseLeave: hasChildren ? handleMouseLeave : undefined,
     onKeyDown: handleKeyDown
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--menu-item__icon`
@@ -180,7 +185,7 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
     open: submenuOpen,
     onClose: () => {
       closeSubmenu();
-      menuItem.current.focus();
+      menuItem.current?.focus();
     },
     x: boundaries.x,
     y: boundaries.y
@@ -360,7 +365,7 @@ const MenuItemRadioGroup = /*#__PURE__*/React__default.forwardRef(function MenuI
   }, /*#__PURE__*/React__default.createElement("ul", _extends({}, rest, {
     role: "group",
     "aria-label": label
-  }), items.map((item, i) => /*#__PURE__*/React__default.createElement(MenuItem, {
+  }), items?.map((item, i) => /*#__PURE__*/React__default.createElement(MenuItem, {
     key: i,
     label: itemToString(item),
     role: "menuitemradio",

package/es/components/Menu/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Menu } from './Menu';
+import { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable } from './MenuItem';
+export { Menu, MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable, };

package/es/components/MenuButton/index.js

@@ -13,6 +13,7 @@ import { ChevronDown } from '@carbon/icons-react';
 import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 import { Menu } from '../Menu/Menu.js';
+import '../Menu/MenuItem.js';
 import { useAttachedMenu } from '../../internal/useAttachedMenu.js';
 import { useId } from '../../internal/useId.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';

package/es/components/OverflowMenu/next/index.js

@@ -12,6 +12,7 @@ import cx from 'classnames';
 import { OverflowMenuVertical } from '@carbon/icons-react';
 import { IconButton } from '../../IconButton/index.js';
 import { Menu } from '../../Menu/Menu.js';
+import '../../Menu/MenuItem.js';
 import { useId } from '../../../internal/useId.js';
 import { usePrefix } from '../../../internal/usePrefix.js';
 import { useAttachedMenu } from '../../../internal/useAttachedMenu.js';

package/es/components/Slug/index.js

@@ -22,14 +22,17 @@ const SlugContent = /*#__PURE__*/React__default.forwardRef(function SlugContent(
     className
   } = _ref;
   const prefix = usePrefix();
+  const hasSlugActions = React__default.Children.toArray(children).some(child => child.type?.displayName === 'SlugActions');
   const slugContentClasses = cx(className, {
-    [`${prefix}--slug-content`]: true
+    [`${prefix}--slug-content`]: true,
+    [`${prefix}--slug-content--with-actions`]: hasSlugActions
   });
   return /*#__PURE__*/React__default.createElement(ToggletipContent, {
     className: slugContentClasses,
     ref: ref
   }, children);
 });
+SlugContent.displayName = 'SlugContent';
 SlugContent.propTypes = {
   /**
    * Specify the content you want rendered inside the slug ToggleTip
@@ -54,6 +57,7 @@ const SlugActions = /*#__PURE__*/React__default.forwardRef(function SlugActions(
     ref: ref
   }, children);
 });
+SlugActions.displayName = 'SlugActions';
 SlugActions.propTypes = {
   /**
    * Specify the content you want rendered inside the slug callout toolbar

package/es/components/Tooltip/Tooltip.js

@@ -12,7 +12,7 @@ import React__default, { useRef, useState, useCallback, useEffect } from 'react'
 import { Popover, PopoverContent } from '../Popover/index.js';
 import { useDelayedState } from '../../internal/useDelayedState.js';
 import { useId } from '../../internal/useId.js';
-import { useNoInteractiveChildren, getInteractiveContent } from '../../internal/useNoInteractiveChildren.js';
+import { useNoInteractiveChildren } from '../../internal/useNoInteractiveChildren.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape, Enter, Space } from '../../internal/keyboard/keys.js';
@@ -110,14 +110,6 @@ function Tooltip(_ref) {
     }
   }, [isPointerIntersecting, leaveDelayMs, setOpen]);
   useNoInteractiveChildren(tooltipRef, 'The Tooltip component must have no interactive content rendered by the' + '`label` or `description` prop');
-  useEffect(() => {
-    if (containerRef !== null && containerRef.current) {
-      const interactiveContent = getInteractiveContent(containerRef.current);
-      if (!interactiveContent) {
-        setOpen(false);
-      }
-    }
-  });
   useEffect(() => {
     if (isDragging) {
       // Register drag stop handlers.

package/es/index.js

@@ -60,6 +60,8 @@ export { default as InlineLoading } from './components/InlineLoading/InlineLoadi
 export { default as Link } from './components/Link/Link.js';
 export { default as ListItem } from './components/ListItem/ListItem.js';
 export { default as Loading } from './components/Loading/Loading.js';
+export { Menu } from './components/Menu/Menu.js';
+export { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable } from './components/Menu/MenuItem.js';
 export { MenuButton } from './components/MenuButton/index.js';
 export { default as Modal } from './components/Modal/Modal.js';
 export { default as ModalWrapper } from './components/ModalWrapper/ModalWrapper.js';
@@ -212,8 +214,6 @@ export { default as TableToolbarContent } from './components/DataTable/TableTool
 export { default as TableToolbarSearch } from './components/DataTable/TableToolbarSearch.js';
 export { default as TableToolbarMenu } from './components/DataTable/TableToolbarMenu.js';
 export { default as FilterableMultiSelect } from './components/MultiSelect/FilterableMultiSelect.js';
-export { Menu } from './components/Menu/Menu.js';
-export { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable } from './components/Menu/MenuItem.js';
 export { default as MultiSelect } from './components/MultiSelect/MultiSelect.js';
 export { default as Pagination } from './components/Pagination/Pagination.js';
 export { default as PaginationNav } from './components/PaginationNav/PaginationNav.js';

package/lib/components/ComboButton/index.js

@@ -18,6 +18,7 @@ var index = require('../IconButton/index.js');
 var Button = require('../Button/Button.js');
 require('../Button/Button.Skeleton.js');
 var Menu = require('../Menu/Menu.js');
+require('../Menu/MenuItem.js');
 var useAttachedMenu = require('../../internal/useAttachedMenu.js');
 var useId = require('../../internal/useId.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');

package/lib/components/Menu/Menu.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
+    /**
+     * A collection of MenuItems to be rendered within this Menu.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * A label describing the Menu.
+     */
+    label?: string;
+    /**
+     * The mode of this menu. Defaults to full.
+     * `full` supports nesting and selectable menu items, but no icons.
+     * `basic` supports icons but no nesting or selectable menu items.
+     *
+     * **This prop is not intended for use and will be set by the respective implementation (like useContextMenu, MenuButton, and ComboButton).**
+     */
+    mode?: 'full' | 'basic';
+    /**
+     * Provide an optional function to be called when the Menu should be closed.
+     */
+    onClose?: () => void;
+    /**
+     * Provide an optional function to be called when the Menu is opened.
+     */
+    onOpen?: () => void;
+    /**
+     * Whether the Menu is open or not.
+     */
+    open?: boolean;
+    /**
+     * Specify the size of the Menu.
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
+     */
+    target?: any;
+    /**
+     * Specify the x position of the Menu. Either pass a single number or an array with two numbers describing your activator's boundaries ([x1, x2])
+     */
+    x?: number | (number | null | undefined)[];
+    /**
+     * Specify the y position of the Menu. Either pass a single number or an array with two numbers describing your activator's boundaries ([y1, y2])
+     */
+    y?: number | (number | null | undefined)[];
+}
+declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLUListElement>>;
+export { Menu };

package/lib/components/Menu/Menu.js

@@ -66,7 +66,7 @@ const Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_re
       dispatch: childDispatch
     };
   }, [childState, childDispatch]);
-  const menu = React.useRef();
+  const menu = React.useRef(null);
   const ref = useMergedRefs.useMergedRefs([forwardRef, menu]);
   const [position, setPosition] = React.useState([-1, -1]);
   const focusableItems = childContext.state.items.filter(item => !item.disabled && item.ref.current);
@@ -154,11 +154,14 @@ const Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_re
     }
   }
   function handleBlur(e) {
-    if (open && onClose && isRoot && !menu.current.contains(e.relatedTarget)) {
+    if (open && onClose && isRoot && !menu.current?.contains(e.relatedTarget)) {
       handleClose(e);
     }
   }
   function fitValue(range, axis) {
+    if (!menu.current) {
+      return;
+    }
     const {
       width,
       height
@@ -197,18 +200,38 @@ const Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_re
     reversedAnchor - size >= 0 ? reversedAnchor - size + offset : false,
     // align at max (second fallback)
     max - spacing - size];
+
+    // Previous array `options`, has at least one item that is a number (the last one - second fallback).
+    // That guarantees that the return of `find()` will always be a number
+    // and we can safely add the numeric casting `as number`.
     const bestOption = options.find(option => option !== false);
     return bestOption >= spacing ? bestOption : spacing;
   }
+  function notEmpty(value) {
+    return value !== null && value !== undefined;
+  }
+  function getPosition(x) {
+    if (Array.isArray(x)) {
+      // has to be of length 2
+      const filtered = x.filter(notEmpty);
+      if (filtered.length === 2) {
+        return filtered;
+      } else {
+        return;
+      }
+    } else {
+      return [x, x];
+    }
+  }
   function calculatePosition() {
-    if (menu.current) {
-      const ranges = {
-        x: typeof x === 'object' && x.length === 2 ? x : [x, x],
-        y: typeof y === 'object' && y.length === 2 ? y : [y, y]
-      };
-      return [fitValue(ranges.x, 'x'), fitValue(ranges.y, 'y')];
+    const ranges = {
+      x: getPosition(x),
+      y: getPosition(y)
+    };
+    if (!ranges.x || !ranges.y) {
+      return [-1, -1];
     }
-    return [-1, -1];
+    return [fitValue(ranges.x, 'x') ?? -1, fitValue(ranges.y, 'y') ?? -1];
   }
   React.useEffect(() => {
     if (open && focusableItems.length > 0) {
@@ -222,7 +245,7 @@ const Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_re
     } else {
       // reset position when menu is closed in order for the --shown
       // modifier to be applied correctly
-      setPosition(-1, -1);
+      setPosition([-1, -1]);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);

package/lib/components/Menu/MenuContext.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+type ActionType = {
+    type: 'enableIcons' | 'registerItem';
+    payload: any;
+};
+type StateType = {
+    isRoot: boolean;
+    mode: 'full' | 'basic';
+    hasIcons: boolean;
+    size: 'xs' | 'sm' | 'md' | 'lg' | null;
+    items: any[];
+    requestCloseRoot: (e: Pick<React.KeyboardEvent<HTMLUListElement>, 'type'>) => void;
+};
+declare function menuReducer(state: StateType, action: ActionType): {
+    hasIcons: boolean;
+    isRoot: boolean;
+    mode: "full" | "basic";
+    size: "sm" | "md" | "lg" | "xs" | null;
+    items: any[];
+    requestCloseRoot: (e: Pick<React.KeyboardEvent<HTMLUListElement>, "type">) => void;
+};
+declare const MenuContext: React.Context<{
+    state: StateType;
+    dispatch: React.Dispatch<any>;
+}>;
+export { MenuContext, menuReducer };