@carbon/react 1.56.0-rc.1 → 1.57.0-rc.0

package/es/components/ContainedList/ContainedList.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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';
+declare const variants: readonly ["on-page", "disclosed"];
+type Variants = (typeof variants)[number];
+interface ContainedListProps {
+    /**
+     * A slot for a possible interactive element to render.
+     */
+    action?: ReactNode;
+    /**
+     * A collection of ContainedListItems to be rendered in the ContainedList
+     */
+    children?: ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Specify whether the dividing lines in between list items should be inset.
+     */
+    isInset?: boolean;
+    /**
+     * The kind of ContainedList you want to display
+     */
+    kind?: Variants;
+    /**
+     * A label describing the contained list.
+     */
+    label: string | ReactNode;
+    /**
+     * Specify the size of the contained list.
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+declare const ContainedList: React.FC<ContainedListProps>;
+export default ContainedList;

package/es/components/ContainedList/ContainedList.js

@@ -37,7 +37,7 @@ function renderChildren(children) {
   }
   return children;
 }
-function ContainedList(_ref) {
+const ContainedList = _ref => {
   let {
     action,
     children,
@@ -57,7 +57,20 @@ function ContainedList(_ref) {
     [`${prefix}--layout--size-${size}`]: size
   }, `${prefix}--contained-list--${kind}`, className);
   const filteredChildren = filterChildren(children);
-  const isActionSearch = ['Search', 'ExpandableSearch'].includes(action?.type?.displayName);
+  function isSearchAction(action) {
+    if (! /*#__PURE__*/React__default.isValidElement(action)) {
+      return false;
+    }
+    const actionTypes = ['Search', 'ExpandableSearch'];
+    let actionType = '';
+    if (typeof action.type === 'string') {
+      actionType = action.type;
+    } else {
+      actionType = action.type.displayName || '';
+    }
+    return actionTypes.includes(actionType);
+  }
+  const isActionSearch = isSearchAction(action);
   const renderedChildren = renderChildren(children);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: classes
@@ -86,7 +99,7 @@ function ContainedList(_ref) {
     role: "list",
     "aria-labelledby": labelId
   }, isActionSearch ? filteredChildren : renderedChildren));
-}
+};
 ContainedList.propTypes = {
   /**
    * A slot for a possible interactive element to render.
@@ -117,5 +130,6 @@ ContainedList.propTypes = {
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl'])
 };
+var ContainedList$1 = ContainedList;
 
-export { ContainedList as default };
+export { ContainedList$1 as default };

package/es/components/ContainedList/ContainedListItem/ContainedListItem.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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, { type ComponentType, type FunctionComponent, ReactNode } from 'react';
+interface ContainedListItemProps {
+    /**
+     * A slot for a possible interactive element to render within the item.
+     */
+    action?: ReactNode;
+    /**
+     * The content of this item. Must not contain any interactive elements. Use props.action to include those.
+     */
+    children?: ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Whether this item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Provide an optional function to be called when the item is clicked.
+     */
+    onClick?: () => void;
+    /**
+     * Provide an optional icon to render in front of the item's content.
+     */
+    renderIcon?: ComponentType | FunctionComponent;
+}
+declare const ContainedListItem: React.FC<ContainedListItemProps>;
+export default ContainedListItem;

package/es/components/ContainedList/ContainedListItem/ContainedListItem.js

@@ -12,7 +12,7 @@ import cx from 'classnames';
 import { LayoutConstraint } from '../../Layout/index.js';
 import { usePrefix } from '../../../internal/usePrefix.js';
 
-function ContainedListItem(_ref) {
+const ContainedListItem = _ref => {
   let {
     action,
     children,
@@ -48,7 +48,7 @@ function ContainedListItem(_ref) {
     },
     className: `${prefix}--contained-list-item__action`
   }, action));
-}
+};
 ContainedListItem.propTypes = {
   /**
    * A slot for a possible interactive element to render within the item.
@@ -73,7 +73,9 @@ ContainedListItem.propTypes = {
   /**
    * Provide an optional icon to render in front of the item's content.
    */
+  // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
+var ContainedListItem$1 = ContainedListItem;
 
-export { ContainedListItem as default };
+export { ContainedListItem$1 as default };

package/es/components/DataTable/TableToolbarSearch.js

@@ -98,7 +98,7 @@ const TableToolbarSearch = _ref => {
     disabled: disabled,
     className: searchClasses,
     value: value,
-    id: typeof id !== 'undefined' ? id : uniqueId.toString(),
+    id: typeof id !== 'undefined' ? id : `table-toolbar-search-${uniqueId.toString()}`,
     labelText: labelText || t('carbon.table.toolbar.search.label'),
     placeholder: placeholder || t('carbon.table.toolbar.search.placeholder'),
     onChange: onChange,

package/es/components/ExpandableSearch/ExpandableSearch.d.ts

@@ -6,9 +6,5 @@
  */
 import React from 'react';
 import { type SearchProps } from '../Search';
-declare function ExpandableSearch({ onBlur, onChange, onExpand, onKeyDown, defaultValue, isExpanded, ...props }: SearchProps): import("react/jsx-runtime").JSX.Element;
-declare namespace ExpandableSearch {
-    var propTypes: React.WeakValidationMap<SearchProps & React.RefAttributes<HTMLInputElement>> | undefined;
-    var displayName: string;
-}
+declare const ExpandableSearch: React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<HTMLInputElement>>;
 export default ExpandableSearch;

package/es/components/ExpandableSearch/ExpandableSearch.js

@@ -12,10 +12,11 @@ import Search from '../Search/Search.js';
 import '../Search/Search.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { composeEventHandlers } from '../../tools/events.js';
+import mergeRefs from '../../tools/mergeRefs.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 
-function ExpandableSearch(_ref) {
+const ExpandableSearch = /*#__PURE__*/React__default.forwardRef(function ExpandableSearch(_ref, forwardedRef) {
   let {
     onBlur,
     onChange,
@@ -61,14 +62,14 @@ function ExpandableSearch(_ref) {
   return /*#__PURE__*/React__default.createElement(Search, _extends({}, props, {
     defaultValue: defaultValue,
     isExpanded: expanded,
-    ref: searchRef,
+    ref: mergeRefs(searchRef, forwardedRef),
     className: classes,
     onBlur: composeEventHandlers([onBlur, handleBlur]),
     onChange: composeEventHandlers([onChange, handleChange]),
     onExpand: composeEventHandlers([onExpand, handleExpand]),
     onKeyDown: composeEventHandlers([onKeyDown, handleKeyDown])
   }));
-}
+});
 ExpandableSearch.propTypes = Search.propTypes;
 ExpandableSearch.displayName = 'ExpandableSearch';
 

package/es/components/OverflowMenu/OverflowMenu.d.ts

@@ -0,0 +1,300 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+/**
+ * @param {Element} menuBody The menu body with the menu arrow.
+ * @param {string} direction The floating menu direction.
+ * @returns {FloatingMenu~offset} The adjustment of the floating menu position, upon the position of the menu arrow.
+ * @private
+ */
+export declare const getMenuOffset: (menuBody: any, direction: any, trigger: any, flip: any) => {
+    left: number;
+    top: number;
+} | undefined;
+interface Offset {
+    top: number;
+    left: number;
+}
+interface OverflowMenuProps {
+    /**
+     * Specify a label to be read by screen readers on the container node
+     */
+    ['aria-label']: string;
+    /**
+     * Deprecated, please use `aria-label` instead.
+     * Specify a label to be read by screen readers on the container note.
+     * @deprecated
+     * */
+    ariaLabel: string;
+    /**
+     * The child nodes.
+     * */
+    children: React.ReactNode;
+    /**
+     *  The CSS class names.
+     *  */
+    className?: string;
+    /**
+     * The menu direction.
+     */
+    direction?: string;
+    /**
+     * `true` if the menu alignment should be flipped.
+     */
+    flipped?: boolean;
+    /**
+     * Enable or disable focus trap behavior
+     */
+    focusTrap?: boolean;
+    /**
+     * The CSS class for the icon.
+     */
+    iconClass?: string;
+    /**
+     * The element ID.
+     */
+    id?: string;
+    /**
+     * The icon description.
+     */
+    iconDescription?: string;
+    /**
+     * `true` to use the light version. For use on $ui-01 backgrounds only.
+     * Don't use this to make OverflowMenu background color same as container background color.
+     */
+    light?: boolean;
+    /**
+     * The adjustment in position applied to the floating menu.
+     */
+    menuOffset?: Offset | (() => void);
+    /**
+     * The adjustment in position applied to the floating menu.
+     */
+    menuOffsetFlip?: Offset | (() => void);
+    /**
+     * The class to apply to the menu options
+     */
+    menuOptionsClass?: string;
+    /**
+     * The event handler for the `click` event.
+     */
+    onClick?: (evt?: any) => void;
+    /**
+     * Function called when menu is closed
+     */
+    onClose?: () => void;
+    /**
+     * Function called when menu is opened
+     */
+    onOpen?: () => void;
+    /**
+     * `true` if the menu should be open.
+     */
+    open?: boolean;
+    /**
+     * Function called to override icon rendering.
+     */
+    renderIcon?: React.ElementType;
+    /**
+     * Specify a CSS selector that matches the DOM element that should
+     * be focused when the OverflowMenu opens
+     */
+    selectorPrimaryFocus?: string;
+    /**
+     * Specify the size of the OverflowMenu. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * The ref to the HTML element that should receive focus when the OverflowMenu opens
+     */
+    innerRef?: React.Ref<any>;
+}
+interface OverflowMenuState {
+    open: boolean;
+    prevOpen?: boolean;
+    hasMountedTrigger: boolean;
+    click: boolean;
+}
+interface ReleaseHandle {
+    release: () => null;
+}
+declare class OverflowMenu extends React.Component<OverflowMenuProps, OverflowMenuState> {
+    state: OverflowMenuState;
+    instanceId: number;
+    static propTypes: {
+        /**
+         * Specify a label to be read by screen readers on the container node
+         */
+        "aria-label": PropTypes.Requireable<string>;
+        /**
+         * Deprecated, please use `aria-label` instead.
+         * Specify a label to be read by screen readers on the container note.
+         */
+        ariaLabel: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * The child nodes.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * The CSS class names.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * The menu direction.
+         */
+        direction: PropTypes.Requireable<string>;
+        /**
+         * `true` if the menu alignment should be flipped.
+         */
+        flipped: PropTypes.Requireable<boolean>;
+        /**
+         * Enable or disable focus trap behavior
+         */
+        focusTrap: PropTypes.Requireable<boolean>;
+        /**
+         * The CSS class for the icon.
+         */
+        iconClass: PropTypes.Requireable<string>;
+        /**
+         * The icon description.
+         */
+        iconDescription: PropTypes.Requireable<string>;
+        /**
+         * The element ID.
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * `true` to use the light version. For use on $ui-01 backgrounds only.
+         * Don't use this to make OverflowMenu background color same as container background color.
+         */
+        light: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * The adjustment in position applied to the floating menu.
+         */
+        menuOffset: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+            top: PropTypes.Requireable<number>;
+            left: PropTypes.Requireable<number>;
+        }> | null | undefined>>;
+        /**
+         * The adjustment in position applied to the floating menu.
+         */
+        menuOffsetFlip: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+            top: PropTypes.Requireable<number>;
+            left: PropTypes.Requireable<number>;
+        }> | null | undefined>>;
+        /**
+         * The class to apply to the menu options
+         */
+        menuOptionsClass: PropTypes.Requireable<string>;
+        /**
+         * The event handler for the `click` event.
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Function called when menu is closed
+         */
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * The event handler for the `focus` event.
+         */
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * The event handler for the `keydown` event.
+         */
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Function called when menu is opened
+         */
+        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * `true` if the menu should be open.
+         */
+        open: PropTypes.Requireable<boolean>;
+        /**
+         * Function called to override icon rendering.
+         */
+        renderIcon: PropTypes.Requireable<object>;
+        /**
+         * Specify a CSS selector that matches the DOM element that should
+         * be focused when the OverflowMenu opens
+         */
+        selectorPrimaryFocus: PropTypes.Requireable<string>;
+        /**
+         * Specify the size of the OverflowMenu. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+         */
+        size: PropTypes.Requireable<string>;
+    };
+    static contextType: React.Context<string>;
+    /**
+     * The handle of `onfocusin` or `focus` event handler.
+     * @private
+     */
+    _hFocusIn: ReleaseHandle | null;
+    /**
+     * The timeout handle for handling `blur` event.
+     * @private
+     */
+    _hBlurTimeout: any;
+    /**
+     * The element ref of the tooltip's trigger button.
+     * @type {React.RefObject<Element>}
+     * @private
+     */
+    _triggerRef: React.RefObject<unknown>;
+    componentDidUpdate(_: any, prevState: any): void;
+    componentDidMount(): void;
+    static getDerivedStateFromProps({ open }: {
+        open: any;
+    }, state: any): {
+        open: any;
+        prevOpen: any;
+    } | null;
+    componentWillUnmount(): void;
+    handleClick: (evt: any) => void;
+    closeMenuAndFocus: () => void;
+    closeMenuOnEscape: () => void;
+    handleKeyPress: (evt: any) => void;
+    handleClickOutside: (evt: any) => void;
+    closeMenu: (onCloseMenu?: any) => void;
+    focusMenuEl: () => void;
+    /**
+     * Focuses the next enabled overflow menu item given the currently focused
+     * item index and direction to move
+     * @param {object} params
+     * @param {number} params.currentIndex - the index of the currently focused
+     * overflow menu item in the list of overflow menu items
+     * @param {number} params.direction - number denoting the direction to move
+     * focus (1 for forwards, -1 for backwards)
+     */
+    handleOverflowMenuItemFocus: ({ currentIndex, direction }: {
+        currentIndex: any;
+        direction: any;
+    }) => void;
+    /**
+     * Handles the floating menu being unmounted or non-floating menu being
+     * mounted or unmounted.
+     * @param {Element} menuBody The DOM element of the menu body.
+     * @private
+     */
+    _menuBody: HTMLElement | null;
+    _bindMenuBody: (menuBody: HTMLElement | null) => void;
+    /**
+     * Handles the floating menu being placed.
+     * @param {Element} menuBody The DOM element of the menu body.
+     * @private
+     */
+    _handlePlace: (menuBody: any) => void;
+    /**
+     * @returns {Element} The DOM element where the floating menu is placed in.
+     */
+    _getTarget: () => Element;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export { OverflowMenu };
+declare const _default: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
+export default _default;

package/es/components/OverflowMenu/OverflowMenu.js

@@ -8,7 +8,7 @@
 import { defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import invariant from 'invariant';
 import PropTypes from 'prop-types';
-import React__default, { Component } from 'react';
+import React__default from 'react';
 import cx from 'classnames';
 import ClickListener from '../../internal/ClickListener.js';
 import FloatingMenu, { DIRECTION_TOP, DIRECTION_BOTTOM } from '../../internal/FloatingMenu.js';
@@ -93,10 +93,16 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
       }
   }
 };
-class OverflowMenu extends Component {
+class OverflowMenu extends React__default.Component {
   constructor() {
     super(...arguments);
-    _defineProperty(this, "state", {});
+    _defineProperty(this, "state", {
+      open: false,
+      // Set a default value for 'open'
+      hasMountedTrigger: false,
+      // Set a default value for 'hasMountedTrigger'
+      click: false // Set a default value for 'click'
+    });
     _defineProperty(this, "instanceId", getInstanceId());
     /**
      * The handle of `onfocusin` or `focus` event handler.
@@ -130,8 +136,8 @@ class OverflowMenu extends Component {
       }
     });
     _defineProperty(this, "closeMenuAndFocus", () => {
-      let wasClicked = this.state.click;
-      let wasOpen = this.state.open;
+      const wasClicked = this.state.click;
+      const wasOpen = this.state.open;
       this.closeMenu(() => {
         if (wasOpen && !wasClicked) {
           this.focusMenuEl();
@@ -139,7 +145,7 @@ class OverflowMenu extends Component {
       });
     });
     _defineProperty(this, "closeMenuOnEscape", () => {
-      let wasOpen = this.state.open;
+      const wasOpen = this.state.open;
       this.closeMenu(() => {
         if (wasOpen) {
           this.focusMenuEl();
@@ -201,7 +207,7 @@ class OverflowMenu extends Component {
         direction
       } = _ref;
       const enabledIndices = React__default.Children.toArray(this.props.children).reduce((acc, curr, i) => {
-        if (!curr.props.disabled) {
+        if ( /*#__PURE__*/React__default.isValidElement(curr) && !curr.props.disabled) {
           acc.push(i);
         }
         return acc;
@@ -226,6 +232,7 @@ class OverflowMenu extends Component {
      * @param {Element} menuBody The DOM element of the menu body.
      * @private
      */
+    _defineProperty(this, "_menuBody", null);
     _defineProperty(this, "_bindMenuBody", menuBody => {
       if (!menuBody) {
         this._menuBody = menuBody;
@@ -268,7 +275,7 @@ class OverflowMenu extends Component {
       const {
         current: triggerEl
       } = this._triggerRef;
-      return triggerEl && triggerEl.closest('[data-floating-menu-container]') || document.body;
+      return triggerEl instanceof Element && triggerEl.closest('[data-floating-menu-container]') || document.body;
     });
   }
   componentDidUpdate(_, prevState) {
@@ -349,18 +356,19 @@ class OverflowMenu extends Component {
       [`${prefix}--overflow-menu-options--${size}`]: size
     });
     const overflowMenuIconClasses = cx(`${prefix}--overflow-menu__icon`, iconClass);
-    const childrenWithProps = React__default.Children.toArray(children).map((child, index) => /*#__PURE__*/React__default.cloneElement(child, {
-      closeMenu: child?.props?.closeMenu || this.closeMenuAndFocus,
+    const childrenWithProps = React__default.Children.toArray(children).map((child, index) => /*#__PURE__*/React__default.isValidElement(child) ? /*#__PURE__*/React__default.cloneElement(child, {
+      // @ts-expect-error: PropTypes are not expressive enough to cover this case
+      closeMenu: child.props.closeMenu || this.closeMenuAndFocus,
       handleOverflowMenuItemFocus: this.handleOverflowMenuItemFocus,
       ref: e => {
         this[`overflowMenuItem${index}`] = e;
       },
       index
-    }));
+    }) : null);
     const menuBodyId = `overflow-menu-${this.instanceId}__menu-body`;
     const menuBody = /*#__PURE__*/React__default.createElement("ul", {
       className: overflowMenuOptionsClasses,
-      tabIndex: "-1",
+      tabIndex: -1,
       role: "menu",
       "aria-label": ariaLabel || deprecatedAriaLabel,
       onKeyDown: this.handleKeyPress,
@@ -387,12 +395,12 @@ class OverflowMenu extends Component {
       onClickOutside: this.handleClickOutside
     }, /*#__PURE__*/React__default.createElement("span", {
       className: `${prefix}--overflow-menu__wrapper`,
-      "aria-owns": open ? menuBodyId : null
+      "aria-owns": open ? menuBodyId : undefined
     }, /*#__PURE__*/React__default.createElement(IconButton, _extends({}, other, {
       type: "button",
       "aria-haspopup": true,
       "aria-expanded": open,
-      "aria-controls": open ? menuBodyId : null,
+      "aria-controls": open ? menuBodyId : undefined,
       className: overflowMenuClasses,
       onClick: this.handleClick,
       id: id,

package/es/components/OverflowMenu/next/index.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Copyright IBM Corp. 2020, 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, { type ComponentType, type FunctionComponent } from 'react';
+interface OverflowMenuProps {
+    /**
+     * A collection of MenuItems to be rendered within this OverflowMenu.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names for the trigger button.
+     */
+    className?: string;
+    /**
+     * A label describing the options available. Is used in the trigger tooltip and as the menu's accessible label.
+     */
+    label?: string;
+    /**
+     * Experimental property. Specify how the menu should align with the button element
+     */
+    menuAlignment?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+    /**
+     * Optionally provide a custom icon to be rendered on the trigger button.
+     */
+    renderIcon?: ComponentType | FunctionComponent;
+    /**
+     * Specify the size of the menu, from a list of available sizes.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Specify how the trigger tooltip should be aligned.
+     */
+    tooltipAlignment?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+}
+declare const OverflowMenu: React.ForwardRefExoticComponent<OverflowMenuProps & React.RefAttributes<HTMLDivElement>>;
+export { OverflowMenu };

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

@@ -52,10 +52,10 @@ const OverflowMenu = /*#__PURE__*/React__default.forwardRef(function OverflowMen
   }, size !== defaultSize && `${prefix}--overflow-menu--${size}`);
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: containerClasses,
-    "aria-owns": open ? id : null,
+    "aria-owns": open ? id : undefined,
     ref: forwardRef
   }), /*#__PURE__*/React__default.createElement(IconButton, {
-    "aria-controls": open ? id : null,
+    "aria-controls": open ? id : undefined,
     "aria-haspopup": true,
     "aria-expanded": open,
     className: triggerClasses,
@@ -97,8 +97,9 @@ OverflowMenu.propTypes = {
    */
   menuAlignment: PropTypes.oneOf(['top-start', 'top-end', 'bottom-start', 'bottom-end']),
   /**
-   * Otionally provide a custom icon to be rendered on the trigger button.
+   * Optionally provide a custom icon to be rendered on the trigger button.
    */
+  // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Specify the size of the menu, from a list of available sizes.