@patternfly/react-core 6.3.1-prerelease.9 → 6.4.0-prerelease.1

package/src/helpers/AnimationsProvider/__tests__/AnimationsProvider.test.tsx

@@ -0,0 +1,157 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { AnimationsProvider, useAnimationsConfig, useHasAnimations } from '../AnimationsProvider';
+
+// Test component that uses the useAnimationsConfig hook
+const TestConfigComponent = () => {
+  const { hasAnimations } = useAnimationsConfig();
+  return <div data-testid="config">{hasAnimations ? 'animations-enabled' : 'animations-disabled'}</div>;
+};
+
+// Test component that uses the useHasAnimations hook with a local prop
+const TestHasAnimationsComponent = ({ hasAnimations: hasAnimationsProp }: { hasAnimations?: boolean }) => {
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
+  return <div data-testid="has-animations">{hasAnimations ? 'animations-enabled' : 'animations-disabled'}</div>;
+};
+
+test('renders children correctly', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <div data-testid="child">Test Child</div>
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByTestId('child')).toBeInTheDocument();
+  expect(screen.getByTestId('child')).toHaveTextContent('Test Child');
+});
+
+test('provides explicit config', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: false }}>
+      <TestConfigComponent />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByTestId('config')).toHaveTextContent('animations-disabled');
+});
+
+test('provides animations enabled config', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <TestConfigComponent />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByTestId('config')).toHaveTextContent('animations-enabled');
+});
+
+test('provides animations disabled config', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: false }}>
+      <TestConfigComponent />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByTestId('config')).toHaveTextContent('animations-disabled');
+});
+
+test('useAnimationsConfig returns default config when no provider', () => {
+  render(<TestConfigComponent />);
+
+  expect(screen.getByTestId('config')).toHaveTextContent('animations-disabled');
+});
+
+test('useHasAnimations uses context when no local prop provided', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <TestHasAnimationsComponent />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
+});
+
+test('useHasAnimations uses local prop when provided (true)', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: false }}>
+      <TestHasAnimationsComponent hasAnimations={true} />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
+});
+
+test('useHasAnimations uses local prop when provided (false)', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <TestHasAnimationsComponent hasAnimations={false} />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-disabled');
+});
+
+test('useHasAnimations works without provider', () => {
+  render(<TestHasAnimationsComponent />);
+
+  expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-disabled');
+});
+
+test('useHasAnimations with local prop and no provider', () => {
+  render(<TestHasAnimationsComponent hasAnimations={true} />);
+
+  expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
+});
+
+test('works in app-level scenario with multiple components', () => {
+  // Simulate realistic app-level usage
+  const MockApp = () => (
+    <div>
+      <header>
+        <TestConfigComponent />
+      </header>
+      <main>
+        <TestHasAnimationsComponent />
+        <TestHasAnimationsComponent hasAnimations={false} /> {/* Component override */}
+      </main>
+    </div>
+  );
+
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <MockApp />
+    </AnimationsProvider>
+  );
+
+  const configs = screen.getAllByTestId('config');
+  const hasAnimationsComponents = screen.getAllByTestId('has-animations');
+
+  expect(configs[0]).toHaveTextContent('animations-enabled'); // Header uses provider
+  expect(hasAnimationsComponents[0]).toHaveTextContent('animations-enabled'); // Main uses provider
+  expect(hasAnimationsComponents[1]).toHaveTextContent('animations-disabled'); // Component override
+});
+
+test('handles dynamic context changes', () => {
+  const TestComponent = ({ hasAnimations }: { hasAnimations: boolean }) => (
+    <AnimationsProvider config={{ hasAnimations }}>
+      <TestConfigComponent />
+      <TestHasAnimationsComponent />
+    </AnimationsProvider>
+  );
+
+  const { rerender } = render(<TestComponent hasAnimations={true} />);
+
+  // Initially animations enabled
+  expect(screen.getByTestId('config')).toHaveTextContent('animations-enabled');
+  expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
+
+  // Change to disabled
+  rerender(<TestComponent hasAnimations={false} />);
+  expect(screen.getByTestId('config')).toHaveTextContent('animations-disabled');
+  expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-disabled');
+
+  // Change back to enabled
+  rerender(<TestComponent hasAnimations={true} />);
+  expect(screen.getByTestId('config')).toHaveTextContent('animations-enabled');
+  expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
+});

package/src/helpers/AnimationsProvider/index.ts

@@ -0,0 +1 @@
+export * from './AnimationsProvider';

package/src/helpers/Popper/Popper.tsx

@@ -1,6 +1,7 @@
 import { cloneElement, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as ReactDOM from 'react-dom';
 import { usePopper } from './thirdparty/react-popper/usePopper';
+import { Options as OffsetOptions } from './thirdparty/popper-core/modifiers/offset';
 import { Placement, Modifier } from './thirdparty/popper-core';
 import { clearTimeouts } from '../util';
 import { css } from '@patternfly/react-styles';
@@ -46,27 +47,11 @@ const getOppositePlacement = (placement: Placement): any =>
 export const getOpacityTransition = (animationDuration: number) =>
   `opacity ${animationDuration}ms cubic-bezier(.54, 1.5, .38, 1.11)`;
 
-export interface PopperProps {
-  /**
-   * Trigger reference element to which the popper is relatively placed to.
-   */
-  trigger?: React.ReactNode;
-  /**
-   * A reference to the trigger reference element that can be passed instead of or along
-   * with the trigger prop. When passed along with the trigger prop, the div element that
-   * wraps the trigger will be removed.
-   */
-  triggerRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
-  /** The popper (menu/tooltip/popover) element */
-  popper: React.ReactElement<any>;
-  /**
-   * Reference to the popper (menu/tooltip/popover) element.
-   * Passing this prop will remove the wrapper div element from the popper.
-   */
-  popperRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
+/** Properties of Popper that can be used to customize its behavior. */
+export interface PopperOptions {
   /** popper direction */
   direction?: 'up' | 'down';
-  /** popper position */
+  /** Horizontal position of the popper. Use the additional prop preventOverflow if seeing clipping. */
   position?: 'right' | 'left' | 'center' | 'start' | 'end';
   /** Instead of direction and position can set the placement of the popper */
   placement?: Placement;
@@ -80,8 +65,6 @@ export interface PopperProps {
   appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
   /** z-index of the popper element */
   zIndex?: number;
-  /** True to make the popper visible */
-  isVisible?: boolean;
   /**
    * Map class names to positions, for example:
    * {
@@ -107,6 +90,8 @@ export interface PopperProps {
   };
   /** Distance of the popper to the trigger */
   distance?: number;
+  /** Override for the popper's offset */
+  offset?: OffsetOptions['offset'];
   /** Callback function when mouse enters trigger */
   onMouseEnter?: (event?: MouseEvent) => void;
   /** Callback function when mouse leaves trigger */
@@ -176,6 +161,29 @@ export interface PopperProps {
   preventOverflow?: boolean;
 }
 
+/** Extends PopperOptions */
+export interface PopperProps extends PopperOptions {
+  /**
+   * Trigger reference element to which the popper is relatively placed to.
+   */
+  trigger?: React.ReactNode;
+  /**
+   * A reference to the trigger reference element that can be passed instead of or along
+   * with the trigger prop. When passed along with the trigger prop, the div element that
+   * wraps the trigger will be removed.
+   */
+  triggerRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
+  /** The popper (menu/tooltip/popover) element */
+  popper: React.ReactElement<any>;
+  /**
+   * Reference to the popper (menu/tooltip/popover) element.
+   * Passing this prop will remove the wrapper div element from the popper.
+   */
+  popperRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
+  /** True to make the popper visible */
+  isVisible?: boolean;
+}
+
 export const Popper: React.FunctionComponent<PopperProps> = ({
   trigger,
   popper,
@@ -190,6 +198,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   isVisible = true,
   positionModifiers,
   distance = 0,
+  offset,
   onMouseEnter,
   onMouseLeave,
   onFocus,
@@ -420,7 +429,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
       {
         name: 'offset',
         options: {
-          offset: [0, distance]
+          offset: offset || [0, distance]
         }
       },
       {

package/src/helpers/index.ts

@@ -1,3 +1,4 @@
+export * from './AnimationsProvider';
 export * from './constants';
 export * from './FocusTrap/FocusTrap';
 export * from './GenerateId/GenerateId';