@patternfly/react-core 6.3.1-prerelease.14 → 6.3.1-prerelease.16

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.3.1-prerelease.13","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.3.1-prerelease.15","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.3.1-prerelease.13","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.3.1-prerelease.15","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.3.1-prerelease.13","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.3.1-prerelease.15","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.3.1-prerelease.14",
+  "version": "6.3.1-prerelease.16",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "e8f9fc0c84607e9f4cd3a9ea30b374508eaa889c"
+  "gitHead": "8cbb261bdfc56d44323b7fd2d76a8766ac5914ce"
 }

package/src/components/Alert/AlertGroup.tsx

@@ -1,7 +1,8 @@
-import { Component } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import * as ReactDOM from 'react-dom';
 import { canUseDOM } from '../../helpers';
 import { AlertGroupInline } from './AlertGroupInline';
+import { useHasAnimations } from '../../helpers';
 
 export interface AlertGroupProps extends Omit<React.HTMLProps<HTMLUListElement>, 'className'> {
   /** Additional classes added to the AlertGroup */
@@ -26,78 +27,73 @@ export interface AlertGroupProps extends Omit<React.HTMLProps<HTMLUListElement>,
   'aria-label'?: string;
 }
 
-interface AlertGroupState {
-  container: HTMLElement;
-}
-
-class AlertGroup extends Component<AlertGroupProps, AlertGroupState> {
-  static displayName = 'AlertGroup';
-  state = {
-    container: undefined
-  } as AlertGroupState;
-
-  componentDidMount() {
-    const container = document.createElement('div');
-    const target: HTMLElement = this.getTargetElement();
-    this.setState({ container });
-    target.appendChild(container);
-  }
+export const AlertGroup: React.FunctionComponent<AlertGroupProps> = ({
+  className,
+  children,
+  hasAnimations: hasAnimationsProp,
+  isToast,
+  isLiveRegion,
+  onOverflowClick,
+  overflowMessage,
+  'aria-label': ariaLabel,
 
-  componentWillUnmount() {
-    const target: HTMLElement = this.getTargetElement();
-    if (this.state.container) {
-      target.removeChild(this.state.container);
-    }
-  }
+  appendTo,
+  ...props
+}: AlertGroupProps) => {
+  const containerRef = useRef<HTMLElement | null>(null);
+  const [isContainerReady, setIsContainerReady] = useState(false);
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
 
-  getTargetElement() {
-    const appendTo = this.props.appendTo;
+  const getTargetElement = () => {
     if (typeof appendTo === 'function') {
       return appendTo();
     }
     return appendTo || document.body;
-  }
+  };
+
+  useEffect(() => {
+    if (isToast && canUseDOM) {
+      const container = document.createElement('div');
+      const target = getTargetElement();
+      containerRef.current = container;
+      target.appendChild(container);
+      setIsContainerReady(true);
 
-  render() {
-    const {
-      className,
-      children,
-      hasAnimations = false,
-      isToast,
-      isLiveRegion,
-      onOverflowClick,
-      overflowMessage,
-      'aria-label': ariaLabel,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      appendTo, // do not pass down to ul
-      ...props
-    } = this.props;
-    const alertGroup = (
-      <AlertGroupInline
-        onOverflowClick={onOverflowClick}
-        className={className}
-        isToast={isToast}
-        isLiveRegion={isLiveRegion}
-        overflowMessage={overflowMessage}
-        aria-label={ariaLabel}
-        hasAnimations={hasAnimations}
-        {...props}
-      >
-        {children}
-      </AlertGroupInline>
-    );
-    if (!this.props.isToast) {
-      return alertGroup;
+      return () => {
+        if (containerRef.current) {
+          target.removeChild(containerRef.current);
+          containerRef.current = null;
+        }
+        setIsContainerReady(false);
+      };
     }
+  }, [isToast, appendTo]);
 
-    const container = this.state.container;
+  const alertGroup = (
+    <AlertGroupInline
+      onOverflowClick={onOverflowClick}
+      className={className}
+      isToast={isToast}
+      isLiveRegion={isLiveRegion}
+      overflowMessage={overflowMessage}
+      aria-label={ariaLabel}
+      hasAnimations={hasAnimations}
+      {...props}
+    >
+      {children}
+    </AlertGroupInline>
+  );
 
-    if (!canUseDOM || !container) {
-      return null;
-    }
+  if (!isToast) {
+    return alertGroup;
+  }
+
+  const container = containerRef.current;
 
-    return ReactDOM.createPortal(alertGroup, container);
+  if (!canUseDOM || !container || !isContainerReady) {
+    return null;
   }
-}
 
-export { AlertGroup };
+  return ReactDOM.createPortal(alertGroup, container);
+};
+AlertGroup.displayName = 'AlertGroup';

package/src/components/Alert/AlertGroupInline.tsx

@@ -4,17 +4,19 @@ import styles from '@patternfly/react-styles/css/components/Alert/alert-group';
 import { AlertGroupProps } from './AlertGroup';
 import { AlertProps } from '../Alert';
 import { AlertGroupContext } from './AlertGroupContext';
+import { useHasAnimations } from '../../helpers';
 
 export const AlertGroupInline: React.FunctionComponent<AlertGroupProps> = ({
   className,
   children,
-  hasAnimations,
+  hasAnimations: hasAnimationsProp,
   isToast,
   isLiveRegion,
   onOverflowClick,
   overflowMessage,
   ...props
 }: AlertGroupProps) => {
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
   const [handleTransitionEnd, setHandleTransitionEnd] = useState<() => void>(() => () => {});
 
   const updateTransitionEnd = (onTransitionEnd: () => void) => {

package/src/components/Alert/__tests__/AlertGroup.test.tsx

@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { Alert } from '../../Alert';
 import { AlertGroup } from '../../Alert';
 import { AlertActionCloseButton } from '../../../components/Alert/AlertActionCloseButton';
+import { AnimationsProvider } from '../../../helpers/AnimationsProvider';
 
 test('Alert Group renders without children', () => {
   render(
@@ -56,14 +57,16 @@ test('Standard Alert Group is not a toast alert group', () => {
   expect(screen.getByText('alert title').parentElement).not.toHaveClass('pf-m-toast');
 });
 
-test('Toast Alert Group contains expected modifier class', () => {
+test('Toast Alert Group contains expected modifier class', async () => {
   render(
     <AlertGroup isToast aria-label="group label">
       <Alert variant="warning" title="alert title" />
     </AlertGroup>
   );
 
-  expect(screen.getByLabelText('group label')).toHaveClass('pf-m-toast');
+  // Wait for the portal to be created and rendered
+  const alertGroup = await screen.findByLabelText('group label');
+  expect(alertGroup).toHaveClass('pf-m-toast');
 });
 
 test('Calls the callback set by updateTransitionEnd when transition ends and animations are enabled', async () => {
@@ -90,8 +93,11 @@ test('Calls the callback set by updateTransitionEnd when transition ends and ani
     </AlertGroup>
   );
 
-  await user.click(screen.getByLabelText('Close'));
+  const closeButton = await screen.findByLabelText('Close');
+  await user.click(closeButton);
   expect(mockCallback).not.toHaveBeenCalled();
+  // fireEvent is needed here because transitionEnd is a browser event that occurs automatically
+  // when CSS transitions complete, not a user interaction that userEvent can simulate
   fireEvent.transitionEnd(screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item') as HTMLElement);
   expect(mockCallback).toHaveBeenCalled();
 });
@@ -120,9 +126,54 @@ test('Does not call the callback set by updateTransitionEnd when transition ends
     </AlertGroup>
   );
 
-  await user.click(screen.getByLabelText('Close'));
+  const closeButton = await screen.findByLabelText('Close');
+  await user.click(closeButton);
   expect(mockCallback).toHaveBeenCalledTimes(1);
   // The transitionend event firing should not cause the callback to be called again
+  // fireEvent is needed here because transitionEnd is a browser event that occurs automatically
+  // when CSS transitions complete, not a user interaction that userEvent can simulate
   fireEvent.transitionEnd(screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item') as HTMLElement);
   expect(mockCallback).toHaveBeenCalledTimes(1);
 });
+
+describe('Animation context behavior', () => {
+  test('respects AnimationsProvider context when no local hasAnimations prop', () => {
+    render(
+      <AnimationsProvider config={{ hasAnimations: true }}>
+        <AlertGroup>
+          <Alert title="Test Alert" />
+        </AlertGroup>
+      </AnimationsProvider>
+    );
+
+    // Should apply animation class when animations are enabled via context
+    const alertGroupItem = screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item');
+    expect(alertGroupItem).toHaveClass('pf-m-offstage-top');
+  });
+
+  test('local hasAnimations prop takes precedence over context', () => {
+    render(
+      <AnimationsProvider config={{ hasAnimations: true }}>
+        <AlertGroup hasAnimations={false}>
+          <Alert title="Test Alert" />
+        </AlertGroup>
+      </AnimationsProvider>
+    );
+
+    // Should not apply animation class when local hasAnimations=false overrides context
+    const alertGroupItem = screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item');
+    expect(alertGroupItem).not.toHaveClass('pf-m-offstage-top');
+  });
+
+  test('works without AnimationsProvider (backward compatibility)', () => {
+    render(
+      <AlertGroup>
+        <Alert title="Test Alert" />
+      </AlertGroup>
+    );
+
+    // Should not apply animation class when no context and no local hasAnimations
+    const alertGroupItem = screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item');
+    expect(alertGroupItem).not.toHaveClass('pf-m-offstage-top');
+  });
+});

package/src/components/Dropdown/Dropdown.tsx

@@ -1,27 +1,11 @@
 import { forwardRef, useEffect, useRef } from 'react';
 import { css } from '@patternfly/react-styles';
 import { Menu, MenuContent, MenuProps } from '../Menu';
-import { Popper } from '../../helpers/Popper/Popper';
+import { Popper, PopperOptions } from '../../helpers/Popper/Popper';
 import { useOUIAProps, OUIAProps, onToggleArrowKeydownDefault } from '../../helpers';
 
-export interface DropdownPopperProps {
-  /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
-  direction?: 'up' | 'down';
-  /** Horizontal position of the popper */
-  position?: 'right' | 'left' | 'center' | 'start' | 'end';
-  /** Custom width of the popper. If the value is "trigger", it will set the width to the dropdown toggle's width */
-  width?: string | 'trigger';
-  /** Minimum width of the popper. If the value is "trigger", it will set the min width to the dropdown toggle's width */
-  minWidth?: string | 'trigger';
-  /** Maximum width of the popper. If the value is "trigger", it will set the max width to the dropdown toggle's width */
-  maxWidth?: string | 'trigger';
-  /** Enable to flip the popper when it reaches the boundary */
-  enableFlip?: boolean;
-  /** The container to append the popper to. Defaults to document.body. */
-  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
-  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
-  preventOverflow?: boolean;
-}
+/** @deprecated Use PopperOptions instead */
+export type DropdownPopperProps = PopperOptions;
 
 export interface DropdownToggleProps {
   /**  Dropdown toggle node. */
@@ -66,7 +50,7 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   /** z-index of the dropdown menu */
   zIndex?: number;
   /** Additional properties to pass to the Popper */
-  popperProps?: DropdownPopperProps;
+  popperProps?: PopperOptions;
   /** Height of the dropdown menu */
   menuHeight?: string;
   /** Maximum height of dropdown menu */

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

@@ -11,8 +11,8 @@ propComponents:
     'DropdownList',
     'MenuToggle',
     'DropdownToggleProps',
-    'DropdownPopperProps',
-    'TooltipProps'
+    'TooltipProps',
+    'PopperOptions'
   ]
 ---
 

package/src/components/DualListSelector/DualListSelector.tsx

@@ -1,8 +1,8 @@
-import { Component } from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
-import { GenerateId, PickOptional } from '../../helpers';
+import { GenerateId } from '../../helpers';
 import { DualListSelectorContext } from './DualListSelectorContext';
+import { useHasAnimations } from '../../helpers';
 
 /** Acts as a container for all other DualListSelector sub-components when using a
  * composable dual list selector.
@@ -24,41 +24,34 @@ export interface DualListSelectorProps {
   hasAnimations?: boolean;
 }
 
-class DualListSelector extends Component<DualListSelectorProps> {
-  static displayName = 'DualListSelector';
-  static defaultProps: PickOptional<DualListSelectorProps> = {
-    children: '',
-    isTree: false,
-    hasAnimations: false
-  };
+export const DualListSelector: React.FunctionComponent<DualListSelectorProps> = ({
+  className,
+  children,
+  id,
+  isTree = false,
+  hasAnimations: hasAnimationsProp,
+  ...props
+}: DualListSelectorProps) => {
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
 
-  constructor(props: DualListSelectorProps) {
-    super(props);
-  }
-
-  render() {
-    const { className, children, id, isTree, hasAnimations, ...props } = this.props;
-
-    return (
-      <DualListSelectorContext.Provider value={{ isTree, hasAnimations }}>
-        <GenerateId>
-          {(randomId) => (
-            <div
-              className={css(
-                styles.dualListSelector,
-                hasAnimations && isTree && styles.modifiers.animateExpand,
-                className
-              )}
-              id={id || randomId}
-              {...props}
-            >
-              {children}
-            </div>
-          )}
-        </GenerateId>
-      </DualListSelectorContext.Provider>
-    );
-  }
-}
-
-export { DualListSelector };
+  return (
+    <DualListSelectorContext.Provider value={{ isTree, hasAnimations }}>
+      <GenerateId>
+        {(randomId) => (
+          <div
+            className={css(
+              styles.dualListSelector,
+              hasAnimations && isTree && styles.modifiers.animateExpand,
+              className
+            )}
+            id={id || randomId}
+            {...props}
+          >
+            {children}
+          </div>
+        )}
+      </GenerateId>
+    </DualListSelectorContext.Provider>
+  );
+};
+DualListSelector.displayName = 'DualListSelector';

package/src/components/DualListSelector/DualListSelectorTreeItem.tsx

@@ -6,6 +6,7 @@ import { Badge } from '../Badge';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { flattenTree } from './treeUtils';
 import { DualListSelectorListContext } from './DualListSelectorContext';
+import { useHasAnimations } from '../../helpers';
 
 export interface DualListSelectorTreeItemProps extends React.HTMLProps<HTMLLIElement> {
   /** Content rendered inside the dual list selector. */
@@ -58,7 +59,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
   badgeProps,
   itemData,
   isDisabled = false,
-  hasAnimations,
+  hasAnimations: hasAnimationsProp,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   useMemo,
   ...props
@@ -66,6 +67,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
   const ref = useRef(null);
   const [isExpanded, setIsExpanded] = useState(defaultExpanded || false);
   const { setFocusedOption } = useContext(DualListSelectorListContext);
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
 
   useEffect(() => {
     setIsExpanded(defaultExpanded);

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

@@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/DualListSelector/dua
 import { DualListSelector } from '../DualListSelector';
 import { DualListSelectorPane } from '../DualListSelectorPane';
 import { SearchInput } from '../../SearchInput';
+import { AnimationsProvider } from '../../../helpers/AnimationsProvider';
 
 // The following tests can be removed as part of https://github.com/patternfly/patternfly-react/issues/11838
 describe('Opt-in animations', () => {
@@ -29,6 +30,33 @@ describe('Opt-in animations', () => {
 
     expect(screen.getByTestId('test-id')).toHaveClass(styles.modifiers.animateExpand);
   });
+
+  // Animation context tests
+  test('respects AnimationsProvider context when no local hasAnimations prop', () => {
+    render(
+      <AnimationsProvider config={{ hasAnimations: true }}>
+        <DualListSelector isTree data-testid="test-id" />
+      </AnimationsProvider>
+    );
+
+    expect(screen.getByTestId('test-id')).toHaveClass(styles.modifiers.animateExpand);
+  });
+
+  test('local hasAnimations prop takes precedence over context', () => {
+    render(
+      <AnimationsProvider config={{ hasAnimations: true }}>
+        <DualListSelector isTree hasAnimations={false} data-testid="test-id" />
+      </AnimationsProvider>
+    );
+
+    expect(screen.getByTestId('test-id')).not.toHaveClass(styles.modifiers.animateExpand);
+  });
+
+  test('works without AnimationsProvider (backward compatibility)', () => {
+    render(<DualListSelector isTree data-testid="test-id" />);
+
+    expect(screen.getByTestId('test-id')).not.toHaveClass(styles.modifiers.animateExpand);
+  });
 });
 
 // Following tests should be moved to a separate DualListSelectorPane test file

package/src/components/Form/FormFieldGroupExpandable.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { InternalFormFieldGroup } from './InternalFormFieldGroup';
+import { useHasAnimations } from '../../helpers';
 
 export interface FormFieldGroupExpandableProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
   /** Anything that can be rendered as form field group content. */
@@ -25,10 +26,11 @@ export const FormFieldGroupExpandable: React.FunctionComponent<FormFieldGroupExp
   header,
   isExpanded = false,
   toggleAriaLabel,
-  hasAnimations,
+  hasAnimations: hasAnimationsProp,
   ...props
 }: FormFieldGroupExpandableProps) => {
   const [localIsExpanded, setIsExpanded] = useState(isExpanded);
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
 
   return (
     <InternalFormFieldGroup

package/src/components/Form/InternalFormFieldGroup.tsx

@@ -2,6 +2,7 @@ import styles from '@patternfly/react-styles/css/components/Form/form';
 import { css } from '@patternfly/react-styles';
 import { FormFieldGroupToggle } from './FormFieldGroupToggle';
 import { GenerateId } from '../../helpers';
+import { useHasAnimations } from '../../helpers';
 
 export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label' | 'onToggle'> {
   /** Anything that can be rendered as form field group content. */
@@ -33,9 +34,10 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
   isExpanded,
   onToggle,
   toggleAriaLabel,
-  hasAnimations,
+  hasAnimations: hasAnimationsProp,
   ...props
 }: InternalFormFieldGroupProps) => {
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
   const headerTitleText = header ? header.props.titleText : null;
   if (isExpandable && !toggleAriaLabel && !headerTitleText) {
     // eslint-disable-next-line no-console

package/src/components/Form/__tests__/FormFieldGroupExpandable.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { FormFieldGroupExpandable } from '../FormFieldGroupExpandable';
+import { AnimationsProvider } from '../../../helpers/AnimationsProvider';
 import styles from '@patternfly/react-styles/css/components/Form/form';
 
 test('Does not render children by default', () => {
@@ -53,3 +54,32 @@ test(`Renders with class ${styles.modifiers.expandable} when hasAnimations is tr
 
   expect(screen.getByRole('group')).toHaveClass(styles.modifiers.expandable);
 });
+
+// Regression tests for AnimationsProvider context
+test('respects AnimationsProvider context when no local hasAnimations prop', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <FormFieldGroupExpandable toggleAriaLabel="Toggle label">Child content</FormFieldGroupExpandable>
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByRole('group')).toHaveClass(styles.modifiers.expandable);
+});
+
+test('local hasAnimations prop takes precedence over context', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <FormFieldGroupExpandable hasAnimations={false} toggleAriaLabel="Toggle label">
+        Child content
+      </FormFieldGroupExpandable>
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByRole('group')).not.toHaveClass(styles.modifiers.expandable);
+});
+
+test('works without AnimationsProvider (backward compatibility)', () => {
+  render(<FormFieldGroupExpandable toggleAriaLabel="Toggle label">Child content</FormFieldGroupExpandable>);
+
+  expect(screen.getByRole('group')).not.toHaveClass(styles.modifiers.expandable);
+});

package/src/components/Menu/MenuContainer.tsx

@@ -1,22 +1,9 @@
 import { useEffect, useRef } from 'react';
 import { onToggleArrowKeydownDefault, Popper } from '../../helpers';
+import type { PopperOptions } from '../../helpers/Popper/Popper';
 
-export interface MenuPopperProps {
-  /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
-  direction?: 'up' | 'down';
-  /** Horizontal position of the popper */
-  position?: 'right' | 'left' | 'center' | 'start' | 'end';
-  /** Custom width of the popper. If the value is "trigger", it will set the width to the dropdown toggle's width */
-  width?: string | 'trigger';
-  /** Minimum width of the popper. If the value is "trigger", it will set the min width to the dropdown toggle's width */
-  minWidth?: string | 'trigger';
-  /** Maximum width of the popper. If the value is "trigger", it will set the max width to the dropdown toggle's width */
-  maxWidth?: string | 'trigger';
-  /** Enable to flip the popper when it reaches the boundary */
-  enableFlip?: boolean;
-  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
-  preventOverflow?: boolean;
-}
+/** @deprecated Use PopperOptions instead */
+export type MenuPopperProps = PopperOptions;
 
 export interface MenuContainerProps {
   /** Menu to be rendered */
@@ -39,7 +26,7 @@ export interface MenuContainerProps {
   /** z-index of the dropdown menu */
   zIndex?: number;
   /** Additional properties to pass to the Popper */
-  popperProps?: MenuPopperProps;
+  popperProps?: PopperOptions;
   /** @beta Flag indicating the first menu item should be focused after opening the dropdown. */
   shouldFocusFirstItemOnOpen?: boolean;
   /** Flag indicating if scroll on focus of the first menu item should occur. */

package/src/components/Menu/examples/Menu.md

@@ -14,8 +14,8 @@ propComponents:
     'MenuSearchInput',
     'MenuGroup',
     'MenuContainer',
-    'MenuPopperProps',
-    'TooltipProps'
+    'TooltipProps',
+    'PopperOptions'
   ]
 ouia: true
 ---
@@ -241,4 +241,4 @@ Router links can be used for in-app linking in React environments to prevent pag
 >
   {...Link Content}
 </MenuItem>
-```
+```

package/src/components/SearchInput/SearchInput.tsx

@@ -13,6 +13,7 @@ import { AdvancedSearchMenu } from './AdvancedSearchMenu';
 import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities } from '../TextInputGroup';
 import { InputGroup, InputGroupItem } from '../InputGroup';
 import { Popper } from '../../helpers';
+import { useHasAnimations } from '../../helpers';
 import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 import inputGroupStyles from '@patternfly/react-styles/css/components/InputGroup/input-group';
 
@@ -180,7 +181,8 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   const popperRef = useRef(null);
   const [focusAfterExpandChange, setFocusAfterExpandChange] = useState(false);
 
-  const { isExpanded, onToggleExpand, toggleAriaLabel, hasAnimations } = expandableInput || {};
+  const { isExpanded, onToggleExpand, toggleAriaLabel, hasAnimations: hasAnimationsProp } = expandableInput || {};
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
 
   useEffect(() => {
     // this effect and the focusAfterExpandChange variable are needed to focus the input/toggle as needed when the