@patternfly/react-core 4.244.1 → 4.245.0

package/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <button
+    aria-label="Close variantLabel alert: title"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="1em"
+      role="img"
+      style="vertical-align: -0.125em;"
+      viewBox="0 0 352 512"
+      width="1em"
+    >
+      <path
+        d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+      />
+    </svg>
+  </button>
+  <p>
+    variant: plain
+  </p>
+  <p
+    id="labelling-id"
+  >
+    Test label
+  </p>
+</DocumentFragment>
+`;

package/src/components/Alert/__tests__/__snapshots__/AlertActionLink.test.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <button
+    class=""
+  >
+    Test
+  </button>
+  <p>
+    variant: link
+  </p>
+  <p>
+    isInline: true
+  </p>
+</DocumentFragment>
+`;

package/src/components/Alert/__tests__/__snapshots__/AlertIcon.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-alert__icon"
+  >
+    Bell icon mock
+  </div>
+</DocumentFragment>
+`;

package/src/components/Alert/__tests__/__snapshots__/AlertToggleExpandButton.test.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <button
+    aria-expanded="false"
+    aria-label="Toggle variantLabel alert: title"
+  >
+    <span
+      class="pf-c-alert__toggle-icon"
+    >
+      Icon mock
+    </span>
+  </button>
+  <p>
+    variant: plain
+  </p>
+  <p
+    id="labelling-id"
+  >
+    Test label
+  </p>
+</DocumentFragment>
+`;

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -10,6 +10,10 @@ export interface BreadcrumbProps extends React.HTMLProps<HTMLElement>, OUIAProps
   className?: string;
   /** Aria label added to the breadcrumb nav. */
   'aria-label'?: string;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export const Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({

package/src/components/Button/Button.tsx

@@ -80,6 +80,10 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   innerRef?: React.Ref<any>;
   /** Adds count number to button */
   countOptions?: BadgeCountObject;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 const ButtonBase: React.FunctionComponent<ButtonProps> = ({

package/src/components/Card/Card.tsx

@@ -42,6 +42,10 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   selectableInputAriaLabel?: string;
   /** Callback that executes when the selectable input is changed */
   onSelectableInputChange?: (labelledBy: string, event: React.FormEvent<HTMLInputElement>) => void;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 interface CardContextProps {

package/src/components/Checkbox/Checkbox.tsx

@@ -33,6 +33,10 @@ export interface CheckboxProps
   body?: React.ReactNode;
   /** Sets the input wrapper component to render. Defaults to <div> */
   component?: React.ElementType;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 // tslint:disable-next-line:no-empty

package/src/components/Chip/Chip.tsx

@@ -41,6 +41,8 @@ export interface ChipProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
 
   /** Css property expressed in percentage or any css unit that overrides the default value of the max-width of the chip's text */
   textMaxWidth?: string;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
 }
 
 interface ChipState {

package/src/components/ChipGroup/ChipGroup.tsx

@@ -50,6 +50,8 @@ export interface ChipGroupProps extends React.HTMLProps<HTMLUListElement>, OUIAP
     | 'left-end'
     | 'right-start'
     | 'right-end';
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
 }
 
 interface ChipGroupState {

package/src/components/ContextSelector/ContextSelector.tsx

@@ -68,6 +68,10 @@ export interface ContextSelectorProps extends Omit<ToggleMenuBaseProps, 'menuApp
   id?: string;
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export class ContextSelector extends React.Component<ContextSelectorProps, { ouiaStateId: string }> {

package/src/components/Dropdown/Dropdown.tsx

@@ -62,6 +62,10 @@ export interface DropdownProps
   isFlipEnabled?: boolean;
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export const Dropdown: React.FunctionComponent<DropdownProps> = ({

package/src/components/Dropdown/DropdownItem.tsx

@@ -47,6 +47,10 @@ export interface DropdownItemProps extends Omit<InternalDropdownItemProps, 'tabI
   autoFocus?: boolean;
   /** A short description of the dropdown item, displayed under the dropdown item content */
   description?: React.ReactNode;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export const DropdownItem: React.FunctionComponent<DropdownItemProps> = ({

package/src/components/Dropdown/DropdownSeparator.tsx

@@ -9,6 +9,10 @@ export interface SeparatorProps extends React.HTMLProps<HTMLAnchorElement>, OUIA
   className?: string;
   /** Click event to pass to InternalDropdownItem */
   onClick?: (event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent | MouseEvent) => void;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export const DropdownSeparator: React.FunctionComponent<SeparatorProps> = ({

package/src/components/Dropdown/DropdownToggle.tsx

@@ -49,6 +49,10 @@ export interface DropdownToggleProps extends React.HTMLProps<HTMLButtonElement>,
   type?: 'button' | 'submit' | 'reset';
   /** Callback called when the Enter key is pressed */
   onEnter?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export const DropdownToggle: React.FunctionComponent<DropdownToggleProps> = ({

package/src/components/Dropdown/DropdownToggleCheckbox.tsx

@@ -25,6 +25,10 @@ export interface DropdownToggleCheckboxProps
   id: string;
   /** Aria-label of the checkbox */
   'aria-label': string;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckboxProps, { ouiaStateId: string }> {

package/src/components/Dropdown/examples/Dropdown.md

@@ -3,7 +3,7 @@ id: Dropdown
 section: components
 cssPrefix: pf-c-dropdown
 propComponents:
-  ['Dropdown', 'DropdownGroup', 'DropdownItem', 'DropdownToggle', 'DropdownToggleCheckbox', 'DropdownToggleAction']
+  ['Dropdown', 'DropdownGroup', 'DropdownItem', 'DropdownToggle', 'DropdownToggleCheckbox', 'DropdownToggleAction', DropdownSeparator]
 ouia: true
 ---
 

package/src/components/Form/Form.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Form/form';
 import { css } from '@patternfly/react-styles';
 
-export interface FormProps extends React.HTMLProps<HTMLFormElement> {
+export interface FormProps extends Omit<React.HTMLProps<HTMLFormElement>, 'ref'> {
   /** Anything that can be rendered as Form content. */
   children?: React.ReactNode;
   /** Additional classes added to the Form. */
@@ -13,14 +13,17 @@ export interface FormProps extends React.HTMLProps<HTMLFormElement> {
   isWidthLimited?: boolean;
   /** Sets a custom max-width for the form. */
   maxWidth?: string;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<any>;
 }
 
-export const Form: React.FunctionComponent<FormProps> = ({
+const FormBase: React.FunctionComponent<FormProps> = ({
   children = null,
   className = '',
   isHorizontal = false,
   isWidthLimited = false,
   maxWidth = '',
+  innerRef,
   ...props
 }: FormProps) => (
   <form
@@ -38,8 +41,12 @@ export const Form: React.FunctionComponent<FormProps> = ({
       (isWidthLimited || maxWidth) && styles.modifiers.limitWidth,
       className
     )}
+    ref={innerRef}
   >
     {children}
   </form>
 );
+
+export const Form = React.forwardRef((props: FormProps, ref: React.Ref<any>) => <FormBase innerRef={ref} {...props} />);
+
 Form.displayName = 'Form';

package/src/components/FormSelect/FormSelect.tsx

@@ -33,6 +33,10 @@ export interface FormSelectProps
   onChange?: (value: string, event: React.FormEvent<HTMLSelectElement>) => void;
   /** Custom flag to show that the FormSelect requires an associated id or aria-label. */
   'aria-label'?: string;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export class FormSelect extends React.Component<FormSelectProps, { ouiaStateId: string }> {

package/src/components/LoginPage/LoginForm.tsx

@@ -8,7 +8,7 @@ import { InputGroup } from '../InputGroup';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 
-export interface LoginFormProps extends React.HTMLProps<HTMLFormElement> {
+export interface LoginFormProps extends Omit<React.HTMLProps<HTMLFormElement>, 'ref'> {
   /** Flag to indicate if the first dropdown item should not gain initial focus */
   noAutoFocus?: boolean;
   /** Additional classes added to the login main body's form */

package/src/components/Menu/Menu.tsx

@@ -59,6 +59,10 @@ export interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'r
   isPlain?: boolean;
   /** Indicates if the menu should be srollable */
   isScrollable?: boolean;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export interface MenuState {

package/src/components/MenuToggle/MenuToggleCheckbox.tsx

@@ -27,6 +27,10 @@ export interface MenuToggleCheckboxProps
   children?: React.ReactNode;
   /** Id of the checkbox */
   id: string;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export class MenuToggleCheckbox extends React.Component<MenuToggleCheckboxProps, { ouiaStateId: string }> {

package/src/components/Modal/Modal.tsx

@@ -72,6 +72,10 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   variant?: 'small' | 'medium' | 'large' | 'default';
   /** Default width of the modal. */
   width?: number | string;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export enum ModalVariant {

package/src/components/Modal/ModalBoxCloseButton.tsx

@@ -8,6 +8,8 @@ export interface ModalBoxCloseButtonProps extends OUIAProps {
   className?: string;
   /** A callback for when the close button is clicked. */
   onClose?: () => void;
+  /** Value to set the data-ouia-component-id.*/
+  ouiaId?: number | string;
 }
 
 export const ModalBoxCloseButton: React.FunctionComponent<ModalBoxCloseButtonProps> = ({

package/src/components/Modal/ModalContent.tsx

@@ -79,6 +79,10 @@ export interface ModalContentProps extends OUIAProps {
   variant?: 'small' | 'medium' | 'large' | 'default';
   /** Default width of the modal. */
   width?: number | string;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export const ModalContent: React.FunctionComponent<ModalContentProps> = ({

package/src/components/Nav/Nav.tsx

@@ -36,6 +36,10 @@ export interface NavProps
   theme?: 'dark' | 'light';
   /** For horizontal navs */
   variant?: 'default' | 'horizontal' | 'tertiary' | 'horizontal-subnav';
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export interface NavContextProps {

package/src/components/Nav/NavExpandable.tsx

@@ -32,6 +32,8 @@ export interface NavExpandableProps
   onExpand?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, val: boolean) => void;
   /** Additional props added to the NavExpandable <button> */
   buttonProps?: any;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
 }
 
 interface NavExpandableState {

package/src/components/Nav/NavItem.tsx

@@ -34,6 +34,10 @@ export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, '
   onShowFlyout?: () => void;
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export const NavItem: React.FunctionComponent<NavItemProps> = ({

package/src/components/OptionsMenu/OptionsMenu.tsx

@@ -49,6 +49,10 @@ export interface OptionsMenuProps
   menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export const OptionsMenu: React.FunctionComponent<OptionsMenuProps> = ({

package/src/components/OverflowMenu/OverflowMenu.tsx

@@ -2,18 +2,9 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/OverflowMenu/overflow-menu';
 import { css } from '@patternfly/react-styles';
 import { OverflowMenuContext } from './OverflowMenuContext';
-import mdBreakpoint from '@patternfly/react-tokens/dist/esm/global_breakpoint_md';
-import lgBreakpoint from '@patternfly/react-tokens/dist/esm/global_breakpoint_lg';
-import xlBreakpoint from '@patternfly/react-tokens/dist/esm/global_breakpoint_xl';
-import xl2Breakpoint from '@patternfly/react-tokens/dist/esm/global_breakpoint_2xl';
-import { debounce, canUseDOM } from '../../helpers/util';
-
-const breakpoints = {
-  md: mdBreakpoint,
-  lg: lgBreakpoint,
-  xl: xlBreakpoint,
-  '2xl': xl2Breakpoint
-};
+import { debounce } from '../../helpers/util';
+import { globalWidthBreakpoints } from '../../helpers/constants';
+import { getResizeObserver } from '../../helpers/resizeObserver';
 
 export interface OverflowMenuProps extends React.HTMLProps<HTMLDivElement> {
   /** Any elements that can be rendered in the menu */
@@ -21,11 +12,14 @@ export interface OverflowMenuProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the OverflowMenu. */
   className?: string;
   /** Indicates breakpoint at which to switch between horizontal menu and vertical dropdown */
-  breakpoint: 'md' | 'lg' | 'xl' | '2xl';
+  breakpoint: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /** A container reference to base the specified breakpoint on instead of the viewport width. */
+  breakpointReference?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
 }
 
 export interface OverflowMenuState extends React.HTMLProps<HTMLDivElement> {
   isBelowBreakpoint: boolean;
+  breakpointRef: HTMLElement;
 }
 
 export class OverflowMenu extends React.Component<OverflowMenuProps, OverflowMenuState> {
@@ -33,40 +27,67 @@ export class OverflowMenu extends React.Component<OverflowMenuProps, OverflowMen
   constructor(props: OverflowMenuProps) {
     super(props);
     this.state = {
-      isBelowBreakpoint: false
+      isBelowBreakpoint: false,
+      breakpointRef: undefined
     };
   }
 
+  observer: any = () => {};
+
+  getBreakpointRef() {
+    const { breakpointReference } = this.props;
+
+    if ((breakpointReference as React.RefObject<any>).current) {
+      return (breakpointReference as React.RefObject<any>).current;
+    } else if (typeof breakpointReference === 'function') {
+      return breakpointReference();
+    }
+  }
+
   componentDidMount() {
+    const reference = this.props.breakpointReference ? this.getBreakpointRef() : undefined;
+
+    this.setState({ breakpointRef: reference });
+    this.observer = getResizeObserver(reference, this.handleResizeWithDelay);
     this.handleResize();
-    if (canUseDOM) {
-      window.addEventListener('resize', this.handleResizeWithDelay);
+  }
+
+  componentDidUpdate(prevProps: Readonly<OverflowMenuProps>, prevState: Readonly<OverflowMenuState>): void {
+    const reference = this.props.breakpointReference ? this.getBreakpointRef() : undefined;
+
+    if (prevState.breakpointRef !== reference) {
+      // To remove any previous observer/event listener from componentDidMount before adding a new one
+      this.observer();
+      this.setState({ breakpointRef: reference });
+      this.observer = getResizeObserver(reference, this.handleResizeWithDelay);
+      this.handleResize();
     }
   }
 
   componentWillUnmount() {
-    if (canUseDOM) {
-      window.removeEventListener('resize', this.handleResizeWithDelay);
-    }
+    this.observer();
   }
 
   handleResize = () => {
-    const breakpointPx = breakpoints[this.props.breakpoint];
-    if (!breakpointPx) {
+    const breakpointWidth = globalWidthBreakpoints[this.props.breakpoint];
+    if (!breakpointWidth) {
       // eslint-disable-next-line no-console
       console.error('OverflowMenu will not be visible without a valid breakpoint.');
       return;
     }
-    const breakpointWidth = Number(breakpointPx.value.replace('px', ''));
-    const isBelowBreakpoint = window.innerWidth < breakpointWidth;
-    this.setState({ isBelowBreakpoint });
+
+    const relativeWidth = this.state.breakpointRef ? this.state.breakpointRef.clientWidth : window.innerWidth;
+    const isBelowBreakpoint = relativeWidth < breakpointWidth;
+    if (this.state.isBelowBreakpoint !== isBelowBreakpoint) {
+      this.setState({ isBelowBreakpoint });
+    }
   };
 
   handleResizeWithDelay = debounce(this.handleResize, 250);
 
   render() {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { className, breakpoint, children, ...props } = this.props;
+    const { className, breakpoint, children, breakpointReference, ...props } = this.props;
 
     return (
       <div {...props} className={css(styles.overflowMenu, className)}>

package/src/components/OverflowMenu/__tests__/OverflowMenu.test.tsx

@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 
 import styles from '@patternfly/react-styles/css/components/OverflowMenu/overflow-menu';
 import { OverflowMenu } from '../OverflowMenu';
+import * as getResizeObserver from '../../../helpers/resizeObserver';
 
 describe('OverflowMenu', () => {
   test('md', () => {
@@ -42,4 +43,41 @@ describe('OverflowMenu', () => {
 
     expect(myMock).toHaveBeenCalled();
   });
+
+  test('should call resizeObserver on undefined containerRefElement', () => {
+    const resizeObserver = jest.spyOn(getResizeObserver, 'getResizeObserver');
+
+    render(<OverflowMenu breakpoint={'md'} />);
+
+    expect(resizeObserver).toHaveBeenCalledWith(undefined, expect.any(Function));
+  });
+
+  test('should call resizeObserver on selector ref containerRefElement', () => {
+    const resizeObserver = jest.spyOn(getResizeObserver, 'getResizeObserver');
+
+    render(
+      <div id="selector-ref-test">
+        <OverflowMenu breakpointReference={() => document.getElementById('selector-ref-test')} breakpoint={'md'}>
+          <div>Selector ref test</div>
+        </OverflowMenu>
+      </div>
+    );
+
+    const containerRef = screen.getByText('Selector ref test').parentElement?.parentElement;
+
+    expect(resizeObserver).toHaveBeenCalledWith(containerRef, expect.any(Function));
+  });
+
+  test('should call resizeObserver on React ref containerRefElement', () => {
+    const resizeObserver = jest.spyOn(getResizeObserver, 'getResizeObserver');
+    const containerRef = React.createRef<HTMLDivElement>();
+
+    render(
+      <div ref={containerRef}>
+        <OverflowMenu breakpointReference={containerRef} breakpoint={'md'} />
+      </div>
+    );
+
+    expect(resizeObserver).toHaveBeenCalledWith(containerRef.current, expect.any(Function));
+  });
 });