@carbon/react 1.47.0 → 1.48.0

package/es/components/Button/Button.d.ts

@@ -65,8 +65,6 @@ interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
     tooltipPosition?: ButtonTooltipPosition;
 }
 export type ButtonProps<T extends React.ElementType> = PolymorphicProps<T, ButtonBaseProps>;
-export interface ButtonComponent {
-    <T extends React.ElementType>(props: ButtonProps<T>, context?: any): React.ReactElement<any, any> | null;
-}
+export type ButtonComponent = <T extends React.ElementType>(props: ButtonProps<T>, context?: any) => React.ReactElement<any, any> | null;
 declare const _default: ButtonComponent;
 export default _default;

package/es/components/Button/Button.js

@@ -18,6 +18,12 @@ const ButtonKinds = ['primary', 'secondary', 'danger', 'ghost', 'danger--primary
 const ButtonSizes = ['sm', 'md', 'lg', 'xl', '2xl'];
 const ButtonTooltipAlignments = ['start', 'center', 'end'];
 const ButtonTooltipPositions = ['top', 'right', 'bottom', 'left'];
+function isIconOnlyButton(hasIconOnly, _kind) {
+  if (hasIconOnly === true) {
+    return true;
+  }
+  return false;
+}
 const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref) {
   let {
     as,
@@ -50,7 +56,6 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
     // Prevent clicks on the tooltip from triggering the button click event
     if (evt.target === tooltipRef.current) {
       evt.preventDefault();
-      return;
     }
   };
   const buttonClasses = cx(className, {
@@ -113,7 +118,7 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
     component = 'a';
     otherProps = anchorProps;
   }
-  if (!hasIconOnly) {
+  if (!isIconOnlyButton(hasIconOnly)) {
     return /*#__PURE__*/React__default.createElement(component, {
       onMouseEnter,
       onMouseLeave,
@@ -151,7 +156,7 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
       onFocus: onFocus,
       onBlur: onBlur,
       onClick: composeEventHandlers([onClick, handleClick])
-    }, rest, commonProps, otherProps), iconOnlyImage ? iconOnlyImage : children);
+    }, rest, commonProps, otherProps), iconOnlyImage ?? children);
   }
 });
 Button.displayName = 'Button';
@@ -206,6 +211,7 @@ Button.propTypes = {
   /**
    * Specify the kind of Button you want to create
    */
+  // TODO: this should be either ButtonKinds or IconButtonKinds based on the value of "hasIconOnly"
   kind: PropTypes.oneOf(ButtonKinds),
   /**
    * Provide an optional function to be called when the button element

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/ComposedModal/ModalHeader.js

@@ -11,6 +11,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Close } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { IconButton } from '../IconButton/index.js';
 
 const ModalHeader = /*#__PURE__*/React__default.forwardRef(function ModalHeader(_ref, ref) {
   let {
@@ -45,16 +46,21 @@ const ModalHeader = /*#__PURE__*/React__default.forwardRef(function ModalHeader(
     className: labelClass
   }, label), title && /*#__PURE__*/React__default.createElement("h3", {
     className: titleClass
-  }, title), children, /*#__PURE__*/React__default.createElement("button", {
-    onClick: handleCloseButtonClick,
+  }, title), children, /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--modal-close-button`
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
     className: closeClass,
+    label: iconDescription,
+    onClick: handleCloseButtonClick,
     title: iconDescription,
     "aria-label": iconDescription,
-    type: "button"
+    align: "left"
   }, /*#__PURE__*/React__default.createElement(Close, {
     size: 20,
+    "aria-hidden": "true",
+    tabIndex: "-1",
     className: closeIconClass
-  })));
+  }))));
 });
 ModalHeader.propTypes = {
   /**

package/es/components/DangerButton/DangerButton.js

@@ -10,8 +10,8 @@ import React__default from 'react';
 import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 
-const DangerButton = props => /*#__PURE__*/React__default.createElement(Button, _extends({
+const DangerButton = props => /*#__PURE__*/React__default.createElement(Button, _extends({}, props, {
   kind: "danger"
-}, props));
+}));
 
 export { DangerButton as default };

package/es/components/DataTable/TableExpandHeader.d.ts

@@ -11,7 +11,7 @@ type TableExpandHeaderPropsBase = {
     /**
      * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandHeader
      */
-    ['aria-controls']: string;
+    ['aria-controls']?: string;
     /**
      * @deprecated This prop has been deprecated and will be
      * removed in the next major release of Carbon. Use the

package/es/components/DataTable/TableExpandRow.d.ts

@@ -10,7 +10,7 @@ interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
     /**
      * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
      */
-    ['aria-controls']: string;
+    ['aria-controls']?: string;
     /**
      * @deprecated This prop has been deprecated and will be
      * removed in the next major release of Carbon. Use the

package/es/components/DataTable/TableExpandRow.js

@@ -77,7 +77,6 @@ TableExpandRow.propTypes = {
    * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
    * TODO: make this required in v12
    */
-  /**@ts-ignore*/
   ['aria-controls']: PropTypes.string,
   /**
    * Specify the string read by a voice reader when the expand trigger is

package/es/components/DataTable/TableHeader.d.ts

@@ -6,7 +6,16 @@
  */
 import { ReactNodeLike } from 'prop-types';
 import React, { type MouseEventHandler } from 'react';
+import { sortStates } from './state/sorting';
 import { ReactAttr } from '../../types/common';
+import { DataTableSortState } from './state/sortStates';
+export type TableHeaderTranslationKey = 'carbon.table.header.icon.description';
+export interface TableHeaderTranslationArgs {
+    header: React.ReactNode;
+    isSortHeader?: boolean;
+    sortDirection?: DataTableSortState;
+    sortStates: typeof sortStates;
+}
 interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonElement> {
     /**
      * Pass in children that will be embedded in the table header label
@@ -58,7 +67,7 @@ interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonEl
      * choice. Translation keys are available on the `translationKeys` field for
      * this component.
      */
-    translateWithId?: (key: string, { header, sortDirection, isSortHeader, sortStates }: {
+    translateWithId?: (key: TableHeaderTranslationKey, { header, sortDirection, isSortHeader, sortStates }: {
         header: any;
         sortDirection: any;
         isSortHeader: any;

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

@@ -16,7 +16,7 @@ import TableExpandHeader from './TableExpandHeader';
 import TableExpandRow from './TableExpandRow';
 import TableExpandedRow from './TableExpandedRow';
 import TableHead from './TableHead';
-import TableHeader from './TableHeader';
+import TableHeader, { TableHeaderTranslationKey, TableHeaderTranslationArgs } from './TableHeader';
 import TableRow from './TableRow';
 import TableSelectAll from './TableSelectAll';
 import TableSelectRow from './TableSelectRow';
@@ -26,5 +26,6 @@ import TableToolbarAction from './TableToolbarAction';
 import TableToolbarContent from './TableToolbarContent';
 import TableToolbarSearch from './TableToolbarSearch';
 import TableToolbarMenu from './TableToolbarMenu';
-export { DataTable, type DataTableCell, type DataTableHeader, type DataTableProps, type DataTableRenderProps, type DataTableRow, type DataTableSize, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarSearch, TableToolbarMenu, };
+import type { DataTableSortState } from './state/sortStates';
+export { DataTable, type DataTableCell, type DataTableHeader, type DataTableProps, type DataTableRenderProps, type DataTableSortState, type DataTableRow, type DataTableSize, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, type TableHeaderTranslationKey, type TableHeaderTranslationArgs, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarSearch, TableToolbarMenu, };
 export default DataTable;

package/es/components/DatePicker/DatePicker.js

@@ -336,7 +336,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
       }
     }
     function handleOnChange(event) {
-      if (datePickerType == 'single') {
+      if (datePickerType == 'single' && closeOnSelect) {
         calendar.calendarContainer.classList.remove('open');
       }
       const {
@@ -401,7 +401,8 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
         end.removeEventListener('change', handleOnChange);
       }
     };
-  }, [savedOnChange, savedOnClose, savedOnOpen, readOnly, hasInput]); //eslint-disable-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [savedOnChange, savedOnClose, savedOnOpen, readOnly, closeOnSelect, hasInput]);
 
   // this hook allows consumers to access the flatpickr calendar
   // instance for cases where functions like open() or close()

package/es/components/Dropdown/Dropdown.d.ts

@@ -7,7 +7,7 @@
 import React, { ReactNode } from 'react';
 import { UseSelectProps } from 'downshift';
 import { ReactNodeLike } from 'prop-types';
-import { ListBoxSize, ListBoxType } from '../ListBox';
+import { type ListBoxMenuIconTranslationKey, ListBoxSize, ListBoxType } from '../ListBox';
 import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'id' | 'onChange';
 export interface OnChangeData<ItemType> {
@@ -123,7 +123,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
     /**
      * Callback function for translating ListBoxMenuIcon SVG title
      */
-    translateWithId?(messageId: string, args?: Record<string, unknown>): string;
+    translateWithId?(messageId: ListBoxMenuIconTranslationKey, args?: Record<string, unknown>): string;
     /**
      * The dropdown type, `default` or `inline`
      */
@@ -137,6 +137,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      */
     warnText?: React.ReactNode;
 }
+export type DropdownTranslationKey = ListBoxMenuIconTranslationKey;
 type DropdownComponentProps<ItemType> = React.PropsWithoutRef<React.PropsWithChildren<DropdownProps<ItemType>> & React.RefAttributes<HTMLButtonElement>>;
 interface DropdownComponent {
     <ItemType>(props: DropdownComponentProps<ItemType>): React.ReactElement | null;

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

@@ -4,8 +4,8 @@
  * 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 Dropdown, { OnChangeData } from './Dropdown';
-export type { OnChangeData };
+import Dropdown, { type DropdownTranslationKey, type OnChangeData } from './Dropdown';
+export type { DropdownTranslationKey, OnChangeData };
 export { Dropdown };
 export { default as DropdownSkeleton } from './Dropdown.Skeleton';
 export default Dropdown;

package/es/components/ExpandableSearch/ExpandableSearch.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState, useRef } from 'react';
+import React__default, { useState, useRef, useEffect } from 'react';
 import cx from 'classnames';
 import Search from '../Search/Search.js';
 import '../Search/Search.Skeleton.js';
@@ -31,10 +31,13 @@ function ExpandableSearch(_ref) {
   const prefix = usePrefix();
   function handleBlur(evt) {
     const relatedTargetIsAllowed = evt.relatedTarget && evt.relatedTarget.classList.contains(`${prefix}--search-close`);
-    if (expanded && !relatedTargetIsAllowed && !hasContent) {
+    if (expanded && !relatedTargetIsAllowed && !hasContent && !isExpanded) {
       setExpanded(false);
     }
   }
+  useEffect(() => {
+    setExpanded(!!isExpanded);
+  }, [isExpanded]);
   function handleChange(evt) {
     setHasContent(evt.target.value !== '');
   }
@@ -47,7 +50,7 @@ function ExpandableSearch(_ref) {
       evt.stopPropagation();
 
       // escape key only clears if the input is empty, otherwise it clears the input
-      if (!evt.target?.value) {
+      if (!evt.target?.value && !isExpanded) {
         setExpanded(false);
       }
     }

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

@@ -0,0 +1,70 @@
+/**
+ * Copyright IBM Corp. 2016, 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 { ReactNodeLike } from 'prop-types';
+import React from 'react';
+import { ButtonSize } from '../Button';
+export declare const IconButtonKinds: readonly ["primary", "secondary", "ghost", "tertiary"];
+export type IconButtonKind = (typeof IconButtonKinds)[number];
+interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Specify how the trigger should align with the tooltip
+     */
+    align?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    /**
+     * Provide an icon or asset to be rendered inside of the IconButton
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be added to your Button
+     */
+    className?: string;
+    /**
+     * Determines whether the tooltip should close when inner content is activated (click, Enter or Space)
+     */
+    closeOnActivation?: boolean;
+    /**
+     * Specify whether the tooltip should be open when it first renders
+     */
+    defaultOpen?: boolean;
+    /**
+     * Specify whether the Button should be disabled, or not
+     */
+    disabled?: boolean;
+    /**
+     * Specify the duration in milliseconds to delay before displaying the tooltip
+     */
+    enterDelayMs?: number;
+    /**
+     * Specify whether the IconButton is currently selected
+     */
+    isSelected?: boolean;
+    /**
+     * Specify the type of button to be used as the base for the IconButton
+     */
+    kind?: IconButtonKind;
+    /**
+     * Provide the label to be rendered inside of the Tooltip. The label will use
+     * `aria-labelledby` and will fully describe the child node that is provided.
+     * This means that if you have text in the child node it will not be
+     * announced to the screen reader.
+     */
+    label: ReactNodeLike;
+    /**
+     * Specify the duration in milliseconds to delay before hiding the tooltip
+     */
+    leaveDelayMs?: number;
+    /**
+     * Specify the size of the Button. Defaults to `md`.
+     */
+    size?: ButtonSize;
+    /**
+     * Specify an optional className to be added to your Tooltip wrapper
+     */
+    wrapperClasses?: string;
+}
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<unknown>>;
+export { IconButton };

package/es/components/IconButton/index.js

@@ -15,8 +15,9 @@ import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(props, ref) {
-  const {
+const IconButtonKinds = ['primary', 'secondary', 'ghost', 'tertiary'];
+const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_ref, ref) {
+  let {
     align,
     children,
     className,
@@ -31,7 +32,7 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(pr
     size,
     isSelected,
     ...rest
-  } = props;
+  } = _ref;
   const prefix = usePrefix();
   const tooltipClasses = cx(wrapperClasses, `${prefix}--icon-tooltip`, {
     [`${prefix}--icon-tooltip--disabled`]: disabled
@@ -91,7 +92,7 @@ IconButton.propTypes = {
   /**
    * Specify the type of button to be used as the base for the IconButton
    */
-  kind: PropTypes.oneOf(['primary', 'secondary', 'ghost', 'tertiary']),
+  kind: PropTypes.oneOf(IconButtonKinds),
   /**
    * Provide the label to be rendered inside of the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.
@@ -113,4 +114,4 @@ IconButton.propTypes = {
   wrapperClasses: PropTypes.string
 };
 
-export { IconButton };
+export { IconButton, IconButtonKinds };

package/es/components/ListBox/ListBoxMenuIcon.d.ts

@@ -5,10 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-export declare const translationIds: {
-    'close.menu': string;
-    'open.menu': string;
-};
+export type ListBoxMenuIconTranslationKey = 'close.menu' | 'open.menu';
 export interface ListBoxMenuIconProps {
     /**
      * Specify whether the menu is currently open, which will influence the
@@ -17,10 +14,10 @@ export interface ListBoxMenuIconProps {
     isOpen: boolean;
     /**
      * i18n hook used to provide the appropriate description for the given menu
-     * icon. This function takes in an id defined in `translationIds` and should
+     * icon. This function takes in a ListBoxMenuIconTranslationKey and should
      * return a string message for that given message id.
      */
-    translateWithId?(messageId: string, args?: Record<string, unknown>): string;
+    translateWithId?(messageId: ListBoxMenuIconTranslationKey, args?: Record<string, unknown>): string;
 }
 export type ListBoxMenuIconComponent = React.FC<ListBoxMenuIconProps>;
 /**

package/es/components/ListBox/ListBoxMenuIcon.js

@@ -11,13 +11,9 @@ import PropTypes from 'prop-types';
 import { ChevronDown } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const translationIds = {
-  'close.menu': 'close.menu',
-  'open.menu': 'open.menu'
-};
 const defaultTranslations = {
-  [translationIds['close.menu']]: 'Close menu',
-  [translationIds['open.menu']]: 'Open menu'
+  'close.menu': 'Close menu',
+  'open.menu': 'Open menu'
 };
 const defaultTranslateWithId = id => defaultTranslations[id];
 /**
@@ -49,10 +45,10 @@ ListBoxMenuIcon.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   /**
    * i18n hook used to provide the appropriate description for the given menu
-   * icon. This function takes in an id defined in `translationIds` and should
+   * icon. This function takes a ListBoxMenuIconTranslationKey and should
    * return a string message for that given message id.
    */
   translateWithId: PropTypes.func
 };
 
-export { ListBoxMenuIcon as default, translationIds };
+export { ListBoxMenuIcon as default };

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

@@ -21,3 +21,4 @@ export interface ListBoxComponent extends ListBoxPartialComponent {
 }
 declare const ListBox: ListBoxComponent;
 export default ListBox;
+export type { ListBoxMenuIconTranslationKey } from './ListBoxMenuIcon';

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 };