@carbon/react 1.51.1 → 1.52.0-rc.0

package/es/components/ComposedModal/ComposedModal.js

@@ -115,7 +115,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
   const startSentinel = useRef(null);
   const endSentinel = useRef(null);
 
-  // Kepp track of modal open/close state
+  // Keep track of modal open/close state
   // and propagate it to the document.body
   useEffect(() => {
     if (open !== wasOpen) {
@@ -132,12 +132,14 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   function handleKeyDown(evt) {
+    evt.stopPropagation();
     if (match(evt, Escape)) {
       closeModal(evt);
     }
     onKeyDown?.(evt);
   }
   function handleMousedown(evt) {
+    evt.stopPropagation();
     const isInside = innerModal.current?.contains(evt.target);
     if (!isInside && !preventCloseOnClickOutside) {
       closeModal(evt);

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

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+declare const TableActionList: (props: import("../../types/common").ReactAttr<"div">) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export default TableActionList;

package/es/components/DataTable/TableActionList.js

@@ -12,6 +12,5 @@ const TableActionList = wrapComponent({
   type: 'div',
   className: prefix => `${prefix}--action-list`
 });
-var TableActionList$1 = TableActionList;
 
-export { TableActionList$1 as default };
+export { TableActionList as default };

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

@@ -4,7 +4,7 @@
  * 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, { ThHTMLAttributes } from 'react';
+import { ThHTMLAttributes } from 'react';
 export type TableHeadProps = ThHTMLAttributes<HTMLTableSectionElement>;
-declare const TableHead: React.FC<TableHeadProps>;
+declare const TableHead: (props: import("../../types/common").ReactAttr<"thead">) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export default TableHead;

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

@@ -4,16 +4,5 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-declare const TableToolbarContent: {
-    ({ className: baseClassName, ...other }: {
-        [x: string]: any;
-        className?: string | undefined;
-    }): import("react").ReactElement<{
-        className: string | undefined;
-    }, string | import("react").JSXElementConstructor<any>>;
-    displayName: string;
-    propTypes: {
-        className: import("prop-types").Requireable<string>;
-    };
-};
+declare const TableToolbarContent: (props: import("../../types/common").ReactAttr<"div">) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export default TableToolbarContent;

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

@@ -102,7 +102,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      * An optional callback to render the currently selected item as a react element instead of only
      * as a string.
      */
-    renderSelectedItem?(item: ItemType): React.JSXElementConstructor<ItemType> | null;
+    renderSelectedItem?(item: ItemType): ReactNode;
     /**
      * In the case you want to control the dropdown selection entirely.
      */

package/es/components/Link/Link.d.ts

@@ -4,13 +4,9 @@
  * 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, { AnchorHTMLAttributes, AriaAttributes, ComponentType, HTMLAttributeAnchorTarget } from 'react';
-export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    /**
-     * Provide a custom element or component to render the top-level node for the
-     * component.
-     */
-    as?: string | undefined;
+import React, { AnchorHTMLAttributes, AriaAttributes, ComponentType, ElementType, HTMLAttributeAnchorTarget } from 'react';
+import { PolymorphicProps } from '../../types/common';
+export interface LinkBaseProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     /**
      * @description Indicates the element that represents the
      *   current item within a container or set of related
@@ -52,7 +48,6 @@ export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
      */
     visited?: boolean;
 }
-declare const Link: React.ForwardRefExoticComponent<LinkProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLAnchorElement>>;
+export type LinkProps<E extends ElementType> = PolymorphicProps<E, LinkBaseProps>;
+declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps<React.ElementType<any>>, "ref"> & React.RefAttributes<unknown>>;
 export default Link;

package/es/components/Link/Link.js

@@ -60,7 +60,7 @@ Link.propTypes = {
    * Provide a custom element or component to render the top-level node for the
    * component.
    */
-  as: PropTypes.string,
+  as: PropTypes.elementType,
   /**
    * Provide the content for the Link
    */
@@ -85,7 +85,6 @@ Link.propTypes = {
    * Optional prop to render an icon next to the link.
    * Can be a React component class
    */
-  // @ts-expect-error - PropTypes are unable to cover this case.
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Specify the size of the Link. Currently supports either `sm`, 'md' (default) or 'lg` as an option.

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

@@ -4,7 +4,7 @@
  * 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, { RefObject } from 'react';
+import React, { ReactNode, RefObject } from 'react';
 interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
     /**
      * The ref of the containing element, used for positioning and alignment of the menu
@@ -13,7 +13,7 @@ interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
     /**
      * A collection of MenuItems to be rendered within this Menu.
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Additional CSS class names.
      */
@@ -21,7 +21,7 @@ interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
     /**
      * A label describing the Menu.
      */
-    label?: string;
+    label: string;
     /**
      * Specify how the menu should align with the button element
      */
@@ -53,15 +53,15 @@ interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
     /**
      * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
      */
-    target?: any;
+    target?: HTMLElement;
     /**
      * 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)[];
+    x?: number | [number, number];
     /**
      * 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)[];
+    y?: number | [number, number];
 }
 declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLUListElement>>;
 export { Menu };

package/es/components/Menu/Menu.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useRef, useContext, useReducer, useMemo, useState, useEffect } from 'react';
+import React__default, { forwardRef, useRef, useContext, useReducer, useMemo, useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -20,7 +20,7 @@ import { Escape, ArrowLeft, ArrowUp, ArrowDown } from '../../internal/keyboard/k
 
 const spacing = 8; // distance to keep to window edges, in px
 
-const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardRef) {
+const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
   let {
     children,
     className,
@@ -72,7 +72,7 @@ const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardR
     actionButtonWidth = w;
   }
 
-  // Set RTL based on document direction or `LayoutDirection`
+  // Set RTL based on the document direction or `LayoutDirection`
   const {
     direction
   } = useLayoutDirection();
@@ -303,6 +303,7 @@ Menu.propTypes = {
   /**
    * A label describing the Menu.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   label: PropTypes.string,
   /**
    * Specify how the menu should align with the button element
@@ -335,14 +336,17 @@ Menu.propTypes = {
   /**
    * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   target: PropTypes.object,
   /**
    * 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])
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   x: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
   /**
    * 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])
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   y: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)])
 };
 

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

@@ -4,7 +4,7 @@
  * 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 { KeyboardEvent, RefObject } from 'react';
 type ActionType = {
     type: 'enableIcons' | 'registerItem';
     payload: any;
@@ -15,7 +15,7 @@ type StateType = {
     hasIcons: boolean;
     size: 'xs' | 'sm' | 'md' | 'lg' | null;
     items: any[];
-    requestCloseRoot: (e: Pick<React.KeyboardEvent<HTMLUListElement>, 'type'>) => void;
+    requestCloseRoot: (e: Pick<KeyboardEvent<HTMLUListElement>, 'type'>) => void;
 };
 declare function menuReducer(state: StateType, action: ActionType): {
     hasIcons: boolean;
@@ -23,10 +23,18 @@ declare function menuReducer(state: StateType, action: ActionType): {
     mode: "full" | "basic";
     size: "sm" | "md" | "lg" | "xs" | null;
     items: any[];
-    requestCloseRoot: (e: Pick<React.KeyboardEvent<HTMLUListElement>, "type">) => void;
+    requestCloseRoot: (e: Pick<KeyboardEvent<HTMLUListElement>, "type">) => void;
 };
-declare const MenuContext: React.Context<{
+type DispatchFuncProps = {
+    type: 'registerItem' | 'enableIcons';
+    payload: {
+        ref: RefObject<HTMLLIElement>;
+        disabled: boolean;
+    };
+};
+type MenuContextProps = {
     state: StateType;
-    dispatch: React.Dispatch<any>;
-}>;
+    dispatch: (props: DispatchFuncProps) => void;
+};
+declare const MenuContext: import("react").Context<MenuContextProps>;
 export { MenuContext, menuReducer };

package/es/components/Menu/MenuContext.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default from 'react';
+import { createContext } from 'react';
 
 const menuDefaultState = {
   isRoot: true,
@@ -29,10 +29,10 @@ function menuReducer(state, action) {
       };
   }
 }
-const MenuContext = /*#__PURE__*/React__default.createContext({
+const MenuContext = /*#__PURE__*/createContext({
   state: menuDefaultState,
   // 'dispatch' is populated by the root menu
-  dispatch: () => {}
+  dispatch: _ => {}
 });
 
 export { MenuContext, menuReducer };

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

@@ -4,12 +4,12 @@
  * 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> {
+import React, { ChangeEventHandler, ComponentProps, FC, KeyboardEvent, LiHTMLAttributes, MouseEvent, ReactNode } from 'react';
+export interface MenuItemProps extends 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;
+    children?: ReactNode;
     /**
      * Additional CSS class names.
      */
@@ -29,45 +29,37 @@ interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
     /**
      * Provide an optional function to be called when the MenuItem is clicked.
      */
-    onClick?: (event: React.KeyboardEvent<HTMLLIElement> | React.MouseEvent<HTMLLIElement>) => void;
+    onClick?: (event: KeyboardEvent<HTMLLIElement> | MouseEvent<HTMLLIElement>) => void;
     /**
      * Only applicable if the parent menu is in `basic` mode. Sets the menu item's icon.
      */
-    renderIcon?: any;
+    renderIcon?: FC;
     /**
      * 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;
+export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLLIElement>>;
+export interface MenuItemSelectableProps extends Omit<MenuItemProps, 'onChange'> {
     /**
      * 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>;
+    onChange?: ChangeEventHandler<HTMLLIElement>;
     /**
-     * Pass a bool to props.selected to control the state of this option.
+     * Controls the state of this option.
      */
     selected?: boolean;
 }
-declare const MenuItemSelectable: React.ForwardRefExoticComponent<MenuItemSelectableProps & React.RefAttributes<HTMLLIElement>>;
-interface MenuItemGroupProps {
+export declare const MenuItemSelectable: React.ForwardRefExoticComponent<MenuItemSelectableProps & React.RefAttributes<HTMLLIElement>>;
+export interface MenuItemGroupProps extends ComponentProps<'ul'> {
     /**
      * A collection of MenuItems to be rendered within this group.
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Additional CSS class names.
      */
@@ -77,8 +69,8 @@ interface MenuItemGroupProps {
      */
     label: string;
 }
-declare const MenuItemGroup: React.ForwardRefExoticComponent<MenuItemGroupProps & React.RefAttributes<HTMLLIElement>>;
-interface MenuItemRadioGroupProps {
+export declare const MenuItemGroup: React.ForwardRefExoticComponent<Omit<MenuItemGroupProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export interface MenuItemRadioGroupProps<Item> extends Omit<ComponentProps<'ul'>, 'onChange'> {
     /**
      * Additional CSS class names.
      */
@@ -86,15 +78,15 @@ interface MenuItemRadioGroupProps {
     /**
      * Specify the default selected item. Must match the type of props.items.
      */
-    defaultSelectedItem?: any;
+    defaultSelectedItem?: Item;
     /**
      * Provide a function to convert an item to the string that will be rendered. Defaults to item.toString().
      */
-    itemToString?: (item: any) => string;
+    itemToString?: (item: Item) => 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[];
+    items: Item[];
     /**
      * A required label titling this radio group.
      */
@@ -102,18 +94,17 @@ interface MenuItemRadioGroupProps {
     /**
      * Provide an optional function to be called when the selection changes.
      */
-    onChange?: React.ChangeEventHandler<HTMLLIElement>;
+    onChange?: ChangeEventHandler<HTMLLIElement>;
     /**
      * Provide props.selectedItem to control the state of this radio group. Must match the type of props.items.
      */
-    selectedItem?: any;
+    selectedItem?: Item;
 }
-declare const MenuItemRadioGroup: React.ForwardRefExoticComponent<MenuItemRadioGroupProps & React.RefAttributes<HTMLLIElement>>;
-interface MenuItemDividerProps {
+export declare const MenuItemRadioGroup: React.ForwardRefExoticComponent<Omit<MenuItemRadioGroupProps<unknown>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export interface MenuItemDividerProps extends ComponentProps<'li'> {
     /**
      * Additional CSS class names.
      */
     className?: string;
 }
-declare const MenuItemDivider: React.ForwardRefExoticComponent<MenuItemDividerProps & React.RefAttributes<HTMLLIElement>>;
-export { MenuItem, MenuItemSelectable, MenuItemGroup, MenuItemRadioGroup, MenuItemDivider, };
+export declare const MenuItemDivider: React.ForwardRefExoticComponent<Omit<MenuItemDividerProps, "ref"> & React.RefAttributes<HTMLLIElement>>;

package/es/components/Menu/MenuItem.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useRef, useState, useEffect } from 'react';
+import React__default, { forwardRef, useContext, useRef, useState, useEffect } from 'react';
 import { CaretLeft, CaretRight, Checkmark } from '@carbon/icons-react';
 import { useControllableState } from '../../internal/useControllableState.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
@@ -25,7 +25,7 @@ import { ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
 var _CaretLeft, _CaretRight;
 const hoverIntentDelay = 150; // in ms
 
-const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref, forwardRef) {
+const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
   let {
     children,
     className,
@@ -45,7 +45,7 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
     x: -1,
     y: -1
   });
-  const [isRtl, setRtl] = useState(false);
+  const [rtl, setRtl] = useState(false);
   const hasChildren = Boolean(children);
   const [submenuOpen, setSubmenuOpen] = useState(false);
   const hoverIntentTimeout = useRef(null);
@@ -70,7 +70,7 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
       width,
       height
     } = menuItem.current.getBoundingClientRect();
-    if (isRtl) {
+    if (rtl) {
       setBoundaries({
         x: [-x, x - width],
         y: [y, y + height]
@@ -138,7 +138,7 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // Set RTL based on document direction or `LayoutDirection`
+  // Set RTL based on the document direction or `LayoutDirection`
   const {
     direction
   } = useLayoutDirection();
@@ -152,6 +152,7 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
   const iconsAllowed = context.state.mode === 'basic' || rest.role === 'menuitemcheckbox' || rest.role === 'menuitemradio';
   useEffect(() => {
     if (iconsAllowed && IconElement && !context.state.hasIcons) {
+      // @ts-ignore - TODO: Should we be passing payload?
       context.dispatch({
         type: 'enableIcons'
       });
@@ -163,8 +164,8 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
     ref: ref,
     className: classNames,
     tabIndex: -1,
-    "aria-disabled": isDisabled,
-    "aria-haspopup": hasChildren || undefined,
+    "aria-disabled": isDisabled ?? undefined,
+    "aria-haspopup": hasChildren ?? undefined,
     "aria-expanded": hasChildren ? submenuOpen : undefined,
     onClick: handleClick,
     onMouseEnter: hasChildren ? handleMouseEnter : undefined,
@@ -180,7 +181,7 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
     className: `${prefix}--menu-item__shortcut`
   }, shortcut), hasChildren && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--menu-item__shortcut`
-  }, isRtl ? _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default.createElement(CaretLeft, null)) : _CaretRight || (_CaretRight = /*#__PURE__*/React__default.createElement(CaretRight, null))), /*#__PURE__*/React__default.createElement(Menu, {
+  }, rtl ? _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default.createElement(CaretLeft, null)) : _CaretRight || (_CaretRight = /*#__PURE__*/React__default.createElement(CaretRight, null))), /*#__PURE__*/React__default.createElement(Menu, {
     label: label,
     open: submenuOpen,
     onClose: () => {
@@ -215,17 +216,20 @@ MenuItem.propTypes = {
   /**
    * Provide an optional function to be called when the MenuItem is clicked.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   onClick: PropTypes.func,
   /**
    * Only applicable if the parent menu is in `basic` mode. Sets the menu item's icon.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * 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.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   shortcut: PropTypes.string
 };
-const MenuItemSelectable = /*#__PURE__*/React__default.forwardRef(function MenuItemSelectable(_ref2, forwardRef) {
+const MenuItemSelectable = /*#__PURE__*/forwardRef(function MenuItemSelectable(_ref2, forwardRef) {
   let {
     className,
     defaultSelected,
@@ -252,6 +256,7 @@ const MenuItemSelectable = /*#__PURE__*/React__default.forwardRef(function MenuI
   }
   useEffect(() => {
     if (!context.state.hasIcons) {
+      // @ts-ignore - TODO: Should we be passing payload?
       context.dispatch({
         type: 'enableIcons'
       });
@@ -276,6 +281,7 @@ MenuItemSelectable.propTypes = {
   /**
    * Specify whether the option should be selected by default.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   defaultSelected: PropTypes.bool,
   /**
    * A required label titling this option.
@@ -284,13 +290,15 @@ MenuItemSelectable.propTypes = {
   /**
    * Provide an optional function to be called when the selection state changes.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   onChange: PropTypes.func,
   /**
    * Pass a bool to props.selected to control the state of this option.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   selected: PropTypes.bool
 };
-const MenuItemGroup = /*#__PURE__*/React__default.forwardRef(function MenuItemGroup(_ref3, forwardRef) {
+const MenuItemGroup = /*#__PURE__*/forwardRef(function MenuItemGroup(_ref3, forwardRef) {
   let {
     children,
     className,
@@ -323,7 +331,7 @@ MenuItemGroup.propTypes = {
   label: PropTypes.string.isRequired
 };
 const defaultItemToString = item => item.toString();
-const MenuItemRadioGroup = /*#__PURE__*/React__default.forwardRef(function MenuItemRadioGroup(_ref4, forwardRef) {
+const MenuItemRadioGroup = /*#__PURE__*/forwardRef(function MenuItemRadioGroup(_ref4, forwardRef) {
   let {
     className,
     defaultSelectedItem,
@@ -352,6 +360,7 @@ const MenuItemRadioGroup = /*#__PURE__*/React__default.forwardRef(function MenuI
   }
   useEffect(() => {
     if (!context.state.hasIcons) {
+      // @ts-ignore - TODO: Should we be passing payload?
       context.dispatch({
         type: 'enableIcons'
       });
@@ -365,7 +374,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",
@@ -388,10 +397,12 @@ MenuItemRadioGroup.propTypes = {
   /**
    * Provide a function to convert an item to the string that will be rendered. Defaults to item.toString().
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   itemToString: PropTypes.func,
   /**
    * Provide the options for this radio group. Can be of any type, as long as you provide an appropriate props.itemToString function.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   items: PropTypes.array,
   /**
    * A required label titling this radio group.
@@ -400,13 +411,14 @@ MenuItemRadioGroup.propTypes = {
   /**
    * Provide an optional function to be called when the selection changes.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   onChange: PropTypes.func,
   /**
    * Provide props.selectedItem to control the state of this radio group. Must match the type of props.items.
    */
   selectedItem: PropTypes.any
 };
-const MenuItemDivider = /*#__PURE__*/React__default.forwardRef(function MenuItemDivider(_ref5, forwardRef) {
+const MenuItemDivider = /*#__PURE__*/forwardRef(function MenuItemDivider(_ref5, forwardRef) {
   let {
     className,
     ...rest

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

@@ -0,0 +1,43 @@
+/**
+ * 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, { ComponentProps, ReactNode } from 'react';
+export interface MenuButtonProps extends ComponentProps<'div'> {
+    /**
+     * A collection of MenuItems to be rendered as actions for this MenuButton.
+     */
+    children?: ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Specify whether the MenuButton should be disabled, or not.
+     */
+    disabled?: boolean;
+    /**
+     * Specify the type of button to be used as the base for the trigger button.
+     */
+    kind?: 'primary' | 'tertiary' | 'ghost';
+    /**
+     * Provide the label to be rendered on the trigger button.
+     */
+    label: string;
+    /**
+     * Experimental property. Specify how the menu should align with the button element
+     */
+    menuAlignment: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+    /**
+     * Specify the size of the button and menu.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Specify the tabIndex of the button.
+     */
+    tabIndex?: number;
+}
+declare const MenuButton: React.ForwardRefExoticComponent<Omit<MenuButtonProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { MenuButton };