@carbon/react 1.81.0-rc.0 → 1.82.0-rc.0

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

@@ -4,15 +4,15 @@
  * 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, { ReactNode } from 'react';
+import React, { ReactNode, Ref } from 'react';
 import { UseSelectProps } from 'downshift';
-import { type ListBoxMenuIconTranslationKey, ListBoxSize, ListBoxType } from '../ListBox';
+import { type ListBoxMenuIconTranslationKey, type ListBoxSize, type ListBoxType } from '../ListBox';
 import { TranslateWithId, ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'id' | 'onChange';
 export interface OnChangeData<ItemType> {
     selectedItem: ItemType | null;
 }
-export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes>, TranslateWithId<ListBoxMenuIconTranslationKey>, React.RefAttributes<HTMLDivElement> {
+export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes>, TranslateWithId<ListBoxMenuIconTranslationKey> {
     /**
      * Specify a label to be read by screen readers on the container node
      * 'aria-label' of the ListBox component.
@@ -147,9 +147,10 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
     warnText?: ReactNode;
 }
 export type DropdownTranslationKey = ListBoxMenuIconTranslationKey;
-type DropdownComponentProps<ItemType> = React.PropsWithoutRef<React.PropsWithChildren<DropdownProps<ItemType>> & React.RefAttributes<HTMLButtonElement>>;
-export interface DropdownComponent {
-    <ItemType>(props: DropdownComponentProps<ItemType>): React.ReactElement<any> | null;
+interface DropdownComponent {
+    <ItemType>(props: DropdownProps<ItemType> & {
+        ref?: Ref<HTMLButtonElement>;
+    }): React.ReactElement<any> | null;
 }
 declare const _default: DropdownComponent;
 export default _default;

package/es/components/Dropdown/Dropdown.js

@@ -20,7 +20,7 @@ import { FormContext } from '../FluidForm/FormContext.js';
 import { useId } from '../../internal/useId.js';
 import { useFloating, size, flip, hide, autoUpdate } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
-import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
+import { ListBoxSizePropType, ListBoxTypePropType } from '../ListBox/ListBoxPropTypes.js';
 
 const {
   ItemMouseMove,
@@ -246,9 +246,9 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 
   // needs to be Capitalized for react to render it correctly
   const ItemToElement = itemToElement;
-  const toggleButtonProps = useMemo(() => getToggleButtonProps({
+  const toggleButtonProps = getToggleButtonProps({
     'aria-label': ariaLabel || deprecatedAriaLabel
-  }), [getToggleButtonProps, ariaLabel, deprecatedAriaLabel, isOpen]);
+  });
   const helper = helperText && !isFluid ? /*#__PURE__*/React__default.createElement("div", {
     id: helperId,
     className: helperClasses
@@ -320,7 +320,10 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     }
     return /*#__PURE__*/React__default.isValidElement(element) ? element : null;
   }, [slug, decorator]);
-  const labelProps = ! /*#__PURE__*/isValidElement(titleText) ? getLabelProps() : null;
+  const allLabelProps = getLabelProps();
+  const labelProps = /*#__PURE__*/isValidElement(titleText) ? {
+    id: allLabelProps.id
+  } : allLabelProps;
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default.createElement("label", _extends({
@@ -367,9 +370,6 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       item,
       index
     });
-    if (item !== null && typeof item === 'object' && Object.prototype.hasOwnProperty.call(item, 'id')) {
-      itemProps.id = item['id'];
-    }
     const title = isObject && 'text' in item && itemToElement ? item.text : itemToString(item);
     return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
       key: itemProps.id,
@@ -384,6 +384,10 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     }));
   }))), !inline && !invalid && !warn && helper);
 });
+
+// Workaround problems with forwardRef() and generics.  In the long term, should stop using forwardRef().
+// See https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref.
+
 Dropdown.displayName = 'Dropdown';
 Dropdown.propTypes = {
   /**
@@ -497,7 +501,7 @@ Dropdown.propTypes = {
   /**
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
-  size: ListBoxSize,
+  size: ListBoxSizePropType,
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component
    */
@@ -514,7 +518,7 @@ Dropdown.propTypes = {
   /**
    * The dropdown type, `default` or `inline`
    */
-  type: ListBoxType,
+  type: ListBoxTypePropType,
   /**
    * Specify whether the control is currently in warning state
    */

package/es/components/FileUploader/FileUploaderButton.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/components/FileUploader/FileUploaderButton.js

@@ -12,7 +12,7 @@ import React__default, { useState, useRef } from 'react';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { ButtonKinds } from '../../prop-types/types.js';
-import uniqueId from '../../tools/uniqueId.js';
+import { uniqueId } from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { noopFn } from '../../internal/noopFn.js';

package/es/components/FileUploader/FileUploaderDropContainer.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
-import uniqueId from '../../tools/uniqueId.js';
+import { uniqueId } from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import deprecate from '../../prop-types/deprecate.js';

package/es/components/FileUploader/FileUploaderItem.js

@@ -12,7 +12,7 @@ import React__default, { useRef, useState, useLayoutEffect } from 'react';
 import Filename from './Filename.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
-import uniqueId from '../../tools/uniqueId.js';
+import { uniqueId } from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { noopFn } from '../../internal/noopFn.js';
 import '../Text/index.js';

package/es/components/FluidDatePickerInput/FluidDatePickerInput.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/components/FluidDatePickerInput/FluidDatePickerInput.js

@@ -6,21 +6,20 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { forwardRef } from 'react';
 import DatePickerInput from '../DatePickerInput/DatePickerInput.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-const FluidDatePickerInput = /*#__PURE__*/React__default.forwardRef(function FluidDatePickerInput(_ref, ref) {
-  let {
-    ...other
-  } = _ref;
+const frFn = forwardRef;
+const FluidDatePickerInput = frFn((props, ref) => {
   return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
     value: {
       isFluid: true
     }
   }, /*#__PURE__*/React__default.createElement(DatePickerInput, _extends({
     ref: ref
-  }, other)));
+  }, props)));
 });
+FluidDatePickerInput.propTypes = DatePickerInput.propTypes;
 
 export { FluidDatePickerInput as default };

package/es/components/FluidDropdown/FluidDropdown.d.ts

@@ -97,5 +97,5 @@ export interface FluidDropdownProps<ItemType> extends DropdownProps<ItemType> {
      */
     warnText?: React.ReactNode;
 }
-declare const FluidDropdown: React.ForwardRefExoticComponent<Omit<FluidDropdownProps<unknown>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const FluidDropdown: React.ForwardRefExoticComponent<FluidDropdownProps<unknown> & React.RefAttributes<HTMLButtonElement>>;
 export default FluidDropdown;

package/es/components/FluidSearch/FluidSearch.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 2025
  *
  * 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';
+import React, { type ChangeEvent } from 'react';
 export interface FluidSearchProps {
     /**
      * Specify an optional value for the `autocomplete` property on the underlying
@@ -38,10 +38,7 @@ export interface FluidSearchProps {
     /**
      * Optional callback called when the search value changes.
      */
-    onChange?(e: {
-        target: HTMLInputElement;
-        type: 'change';
-    }): void;
+    onChange?(event: ChangeEvent<HTMLInputElement>): void;
     /**
      * Optional callback called when the search value is cleared.
      */

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/components/IconButton/index.js

@@ -16,21 +16,9 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import ButtonBase from '../Button/ButtonBase.js';
 import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
 import { BadgeIndicator } from '../BadgeIndicator/index.js';
+import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
 
 const IconButtonKinds = ['primary', 'secondary', 'ghost', 'tertiary'];
-const propMappingFunction = deprecatedValue => {
-  const mapping = {
-    'top-left': 'top-start',
-    'top-right': 'top-end',
-    'bottom-left': 'bottom-start',
-    'bottom-right': 'bottom-end',
-    'left-bottom': 'left-end',
-    'left-top': 'left-start',
-    'right-bottom': 'right-end',
-    'right-top': 'right-start'
-  };
-  return mapping[deprecatedValue];
-};
 const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_ref, ref) {
   let {
     align,
@@ -110,11 +98,7 @@ IconButton.propTypes = {
   // deprecated use right-start instead
 
   // new values to match floating-ui
-  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
-  //allowed prop values
-  ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'],
-  //optional mapper function
-  propMappingFunction),
+  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']), ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'], mapPopoverAlign),
   /**
    * **Experimental**: Will attempt to automatically align the tooltip
    */

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

@@ -1,12 +1,12 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * 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';
-import { ListBoxType, ListBoxSize } from './ListBoxPropTypes';
-import { ForwardRefReturn, ReactAttr } from '../../types/common';
+import { type ListBoxSize, type ListBoxType } from '.';
+import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'onKeyDown' | 'onKeyPress' | 'ref';
 export interface ListBoxProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
     /**
@@ -59,10 +59,9 @@ export interface ListBoxProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAt
      */
     warnTextId?: string;
 }
-export type ListBoxComponent = ForwardRefReturn<HTMLDivElement, ListBoxProps>;
 /**
  * `ListBox` is a generic container component that handles creating the
  * container class name in response to certain props.
  */
-declare const ListBox: ListBoxComponent;
+declare const ListBox: React.ForwardRefExoticComponent<ListBoxProps & React.RefAttributes<HTMLDivElement>>;
 export default ListBox;

package/es/components/ListBox/ListBox.js

@@ -7,13 +7,14 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
-import React__default, { useContext } from 'react';
+import React__default, { forwardRef, useContext } from 'react';
 import PropTypes from 'prop-types';
 import deprecate from '../../prop-types/deprecate.js';
-import { ListBoxSize, ListBoxType } from './ListBoxPropTypes.js';
+import './index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
+import { ListBoxSizePropType, ListBoxTypePropType } from './ListBoxPropTypes.js';
 
 const handleOnKeyDown = event => {
   if (event.keyCode === 27) {
@@ -28,8 +29,8 @@ const handleClick = event => {
  * `ListBox` is a generic container component that handles creating the
  * container class name in response to certain props.
  */
-const ListBox = /*#__PURE__*/React__default.forwardRef(function ListBox(_ref, ref) {
-  let {
+const ListBox = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
     children,
     className: containerClassName,
     disabled = false,
@@ -44,7 +45,7 @@ const ListBox = /*#__PURE__*/React__default.forwardRef(function ListBox(_ref, re
     light,
     isOpen,
     ...rest
-  } = _ref;
+  } = props;
   const prefix = usePrefix();
   const {
     isFluid
@@ -117,12 +118,12 @@ ListBox.propTypes = {
   /**
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
-  size: ListBoxSize,
+  size: ListBoxSizePropType,
   /**
    * Specify the "type" of the ListBox. Currently supports either `default` or
    * `inline` as an option.
    */
-  type: ListBoxType,
+  type: ListBoxTypePropType,
   /**
    * Specify whether the control is currently in warning state
    */

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

@@ -1,10 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * 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 { ForwardRefReturn, ReactAttr } from '../../types/common';
+import React from 'react';
+import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'id';
 export interface ListBoxMenuProps extends Omit<ReactAttr<HTMLUListElement>, ExcludedAttributes> {
     children?: any;
@@ -13,11 +14,10 @@ export interface ListBoxMenuProps extends Omit<ReactAttr<HTMLUListElement>, Excl
      */
     id: string;
 }
-export type ListBoxMenuComponent = ForwardRefReturn<HTMLUListElement, ListBoxMenuProps>;
 /**
  * `ListBoxMenu` is a simple container node that isolates the `list-box__menu`
  * class into a single component. It is also being used to validate given
  * `children` components.
  */
-declare const ListBoxMenu: ListBoxMenuComponent;
+declare const ListBoxMenu: React.ForwardRefExoticComponent<ListBoxMenuProps & React.RefAttributes<HTMLUListElement>>;
 export default ListBoxMenu;

package/es/components/ListBox/ListBoxMenu.js

@@ -6,17 +6,19 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { forwardRef } from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import PropTypes from 'prop-types';
 import ListBoxMenuItem from './ListBoxMenuItem.js';
 
+const frFn = forwardRef;
+
 /**
  * `ListBoxMenu` is a simple container node that isolates the `list-box__menu`
  * class into a single component. It is also being used to validate given
  * `children` components.
  */
-const ListBoxMenu = /*#__PURE__*/React__default.forwardRef(function ListBoxMenu(_ref, ref) {
+const ListBoxMenu = frFn((_ref, ref) => {
   let {
     children,
     id,

package/es/components/ListBox/ListBoxMenuItem.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 { ForwardedRef, ReactNode, type Ref } from 'react';
-import { ForwardRefReturn, ReactAttr } from '../../types/common';
+import React, { ReactNode } from 'react';
+import { ReactAttr } from '../../types/common';
 export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
     /**
      * Specify any children nodes that should be rendered inside of the ListBox
@@ -29,9 +29,10 @@ export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
      */
     title?: string;
 }
-export type ListBoxMenuItemForwardedRef = (ForwardedRef<HTMLLIElement> & {
-    menuItemOptionRef?: Ref<HTMLDivElement>;
-}) | null;
-export type ListBoxMenuItemComponent = ForwardRefReturn<ListBoxMenuItemForwardedRef, ListBoxMenuItemProps>;
-declare const _default: ListBoxMenuItemComponent;
-export default _default;
+/**
+ * `ListBoxMenuItem` is a helper component for managing the container class
+ * name, alongside any classes for any corresponding states, for a generic list
+ * box menu item.
+ */
+declare const ListBoxMenuItem: React.ForwardRefExoticComponent<ListBoxMenuItemProps & React.RefAttributes<HTMLLIElement>>;
+export default ListBoxMenuItem;

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -9,6 +9,6 @@ declare const listBoxTypes: readonly ["default", "inline"];
 declare const listBoxSizes: readonly ["sm", "md", "lg"];
 export type ListBoxType = (typeof listBoxTypes)[number];
 export type ListBoxSize = (typeof listBoxSizes)[number];
-export declare const ListBoxType: PropTypes.Requireable<"default" | "inline">;
-export declare const ListBoxSize: PropTypes.Requireable<"sm" | "md" | "lg">;
+export declare const ListBoxTypePropType: PropTypes.Requireable<"default" | "inline">;
+export declare const ListBoxSizePropType: PropTypes.Requireable<"sm" | "md" | "lg">;
 export {};

package/es/components/ListBox/ListBoxPropTypes.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 
 const listBoxTypes = ['default', 'inline'];
 const listBoxSizes = ['sm', 'md', 'lg'];
-const ListBoxType = PropTypes.oneOf(listBoxTypes);
-const ListBoxSize = PropTypes.oneOf(listBoxSizes);
+const ListBoxTypePropType = PropTypes.oneOf(listBoxTypes);
+const ListBoxSizePropType = PropTypes.oneOf(listBoxSizes);
 
-export { ListBoxSize, ListBoxType };
+export { ListBoxSizePropType, ListBoxTypePropType };

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

@@ -1,17 +1,19 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export * as PropTypes from './ListBoxPropTypes';
 export * from './ListBoxPropTypes';
-import { ListBoxComponent as ListBoxPartialComponent } from './ListBox';
+import ListBoxInternal from './ListBox';
 import { ListBoxFieldComponent } from './ListBoxField';
-import { ListBoxMenuComponent } from './ListBoxMenu';
+import ListBoxMenu from './ListBoxMenu';
 import { ListBoxMenuIconComponent } from './ListBoxMenuIcon';
-import { ListBoxMenuItemComponent } from './ListBoxMenuItem';
+import ListBoxMenuItem from './ListBoxMenuItem';
 import { ListBoxSelectionComponent } from './ListBoxSelection';
+type ListBoxMenuComponent = typeof ListBoxMenu;
+type ListBoxMenuItemComponent = typeof ListBoxMenuItem;
+type ListBoxPartialComponent = typeof ListBoxInternal;
 export interface ListBoxComponent extends ListBoxPartialComponent {
     readonly Field: ListBoxFieldComponent;
     readonly Menu: ListBoxMenuComponent;

package/es/components/ListBox/index.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { ListBoxSize, ListBoxType } from './ListBoxPropTypes.js';
+export { ListBoxSizePropType, ListBoxTypePropType } from './ListBoxPropTypes.js';
 import ListBox$1 from './ListBox.js';
 import ListBoxField from './ListBoxField.js';
 import ListBoxMenu from './ListBoxMenu.js';

package/es/components/Menu/Menu.js

@@ -34,7 +34,12 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
     open,
     size = 'sm',
     legacyAutoalign = 'true',
+    // TODO: `ssr-friendly` doesn't support ESLint v9.
+    // https://github.com/kopiro/eslint-plugin-ssr-friendly/issues/30
+    // https://github.com/carbon-design-system/carbon/issues/18991
+    /*
     // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+    */
     target = canUseDOM && document.body,
     x = 0,
     y = 0,
@@ -101,18 +106,8 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
       }
     }
   }
-  function handleClose(e) {
-    if (/^key/.test(e.type)) {
-      window.addEventListener('keyup', returnFocus, {
-        once: true
-      });
-    } else if (e.type === 'click' && menu.current) {
-      menu.current.addEventListener('focusout', returnFocus, {
-        once: true
-      });
-    } else {
-      returnFocus();
-    }
+  function handleClose() {
+    returnFocus();
     if (onClose) {
       onClose();
     }
@@ -123,7 +118,7 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
     // if the user presses escape or this is a submenu
     // and the user presses ArrowLeft, close it
     if ((match(e, Escape) || !isRoot && match(e, ArrowLeft)) && onClose) {
-      handleClose(e);
+      handleClose();
     } else {
       focusItem(e);
     }
@@ -158,7 +153,7 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
   }
   function handleBlur(e) {
     if (open && onClose && isRoot && !menu.current?.contains(e.relatedTarget)) {
-      handleClose(e);
+      handleClose();
     }
   }
   function fitValue(range, axis) {

package/es/components/Menu/MenuItem.js

@@ -98,18 +98,28 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
       }
     }
   }
+
+  // Avoid stray keyup event from MenuButton affecting MenuItem, and vice versa.
+  // Keyboard click is handled differently for <button> vs. <li> and for Enter vs. Space.  See
+  // https://www.stefanjudis.com/today-i-learned/keyboard-button-clicks-with-space-and-enter-behave-differently/.
+  const pendingKeyboardClick = useRef(false);
+  const keyboardClickEvent = e => match(e, Enter) || match(e, Space);
   function handleKeyDown(e) {
     if (hasChildren && match(e, ArrowRight)) {
       openSubmenu();
       e.stopPropagation();
     }
-    if (match(e, Enter) || match(e, Space)) {
-      handleClick(e);
-    }
+    pendingKeyboardClick.current = keyboardClickEvent(e);
     if (rest.onKeyDown) {
       rest.onKeyDown(e);
     }
   }
+  function handleKeyUp(e) {
+    if (pendingKeyboardClick.current && keyboardClickEvent(e)) {
+      handleClick(e);
+    }
+    pendingKeyboardClick.current = false;
+  }
   const classNames = cx(className, `${prefix}--menu-item`, {
     [`${prefix}--menu-item--disabled`]: isDisabled,
     [`${prefix}--menu-item--danger`]: isDanger
@@ -162,7 +172,8 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
     "aria-haspopup": hasChildren ?? undefined,
     "aria-expanded": hasChildren ? submenuOpen : undefined,
     onClick: handleClick,
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp
   }, getReferenceProps()), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--menu-item__selection-icon`
   }, rest['aria-checked'] && (_Checkmark || (_Checkmark = /*#__PURE__*/React__default.createElement(Checkmark, null)))), /*#__PURE__*/React__default.createElement("div", {

package/es/components/Modal/Modal.js

@@ -17,7 +17,7 @@ import ButtonSet from '../ButtonSet/ButtonSet.js';
 import InlineLoading from '../InlineLoading/InlineLoading.js';
 import { Layer } from '../Layer/index.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
-import wrapFocus, { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
+import { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu, wrapFocus } from '../../internal/wrapFocus.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -99,28 +99,28 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
       target
     } = evt;
     evt.stopPropagation();
-    if (open) {
+    if (open && target instanceof HTMLElement) {
       if (match(evt, Escape)) {
         onRequestClose(evt);
       }
-      if (match(evt, Enter) && shouldSubmitOnEnter && target instanceof Element && !isCloseButton(target) && document.activeElement !== button.current) {
+      if (match(evt, Enter) && shouldSubmitOnEnter && !isCloseButton(target) && document.activeElement !== button.current) {
         onRequestSubmit(evt);
       }
       if (focusTrapWithoutSentinels && !enableDialogElement && match(evt, Tab) && innerModal.current) {
         wrapFocusWithoutSentinels({
           containerNode: innerModal.current,
-          currentActiveNode: evt.target,
-          // TODO: Delete type assertion following util rewrite.
-          // https://github.com/carbon-design-system/carbon/pull/18913
+          currentActiveNode: target,
           event: evt
         });
       }
     }
   }
   function handleOnClick(evt) {
-    const target = evt.target;
+    const {
+      target
+    } = evt;
     evt.stopPropagation();
-    if (!preventCloseOnClickOutside && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
+    if (!preventCloseOnClickOutside && target instanceof Node && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
       onRequestClose(evt);
     }
   }
@@ -129,7 +129,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
       target: oldActiveNode,
       relatedTarget: currentActiveNode
     } = _ref2;
-    if (open && currentActiveNode && oldActiveNode) {
+    if (open && oldActiveNode instanceof HTMLElement && currentActiveNode instanceof HTMLElement) {
       const {
         current: bodyNode
       } = innerModal;