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

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

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { TreeView } from '../TreeView';
+import { AnimationsProvider } from '../../../helpers/AnimationsProvider';
 
 jest.mock('../TreeViewList', () => ({
   TreeViewList: ({
@@ -293,6 +294,33 @@ test('Passes hasAnimations to TreeViewListItem', () => {
 
   expect(screen.getByText('TreeViewListItem hasAnimations: true')).toBeVisible();
 });
+
+// Animation context tests
+test('respects AnimationsProvider context when no local hasAnimations prop', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <TreeView data={[basicData]} />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByText('TreeViewListItem hasAnimations: true')).toBeVisible();
+});
+
+test('local hasAnimations prop takes precedence over context', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <TreeView data={[basicData]} hasAnimations={false} />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByText('TreeViewListItem hasAnimations: false')).toBeVisible();
+});
+
+test('works without AnimationsProvider (backward compatibility)', () => {
+  render(<TreeView data={[basicData]} />);
+
+  expect(screen.getByText('TreeViewListItem hasAnimations: false')).toBeVisible();
+});
 test('Passes data.children to TreeViewListItem', () => {
   render(<TreeView data={[{ ...basicData, children: [{ name: 'Child 1' }] }]} />);
 

package/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap

@@ -105,7 +105,7 @@ exports[`Matches snapshot 1`] = `
               TreeViewListItem useMemo: undefined
             </p>
             <p>
-              TreeViewListItem hasAnimations: undefined
+              TreeViewListItem hasAnimations: false
             </p>
             <button>
               compareItems clicker

package/src/helpers/AnimationsProvider/AnimationsProvider.tsx

@@ -0,0 +1,104 @@
+import { createContext, useContext, FunctionComponent, ReactNode } from 'react';
+
+/** Configuration for animations throughout PatternFly components */
+export interface AnimationsConfig {
+  /** Whether animations are enabled globally */
+  hasAnimations?: boolean;
+}
+
+/** Props for the AnimationsProvider component */
+export interface AnimationsProviderProps {
+  /** Animation configuration settings */
+  config: AnimationsConfig;
+  /** Child components that will have access to the animations context */
+  children: ReactNode;
+}
+
+/** Context to provide animations configuration to child components */
+const AnimationsContext = createContext<AnimationsConfig>({
+  hasAnimations: false
+});
+
+/**
+ * AnimationsProvider is an application-level provider that provides uniform
+ * animation configuration for all PatternFly React components via the React context API.
+ *
+ * **Usage**: Place this provider at the root of your application to enable global
+ * animation control without requiring manual prop drilling throughout your component tree.
+ *
+ * **Benefits**:
+ * - Centralized animation control for the entire application
+ * - Respects user accessibility preferences (reduced motion)
+ * - Components can still override the global setting when needed
+ * - Works with all PatternFly components that support animations
+ *
+ * @example
+ * ```tsx
+ * // App.tsx - Place at your application root
+ * import { AnimationsProvider } from '@patternfly/react-core';
+ *
+ * const App = () => (
+ *   <AnimationsProvider config={{ hasAnimations: true }}>
+ *     <MyApplication />
+ *   </AnimationsProvider>
+ * );
+ * ```
+ */
+export const AnimationsProvider: FunctionComponent<AnimationsProviderProps> = ({ config, children }) => (
+  <AnimationsContext.Provider value={config}>{children}</AnimationsContext.Provider>
+);
+
+/**
+ * Hook to access the animations configuration from the nearest AnimationsProvider.
+ *
+ * This hook allows components to check if animations are enabled and override
+ * their local hasAnimations prop accordingly.
+ *
+ * @returns The animations configuration object
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = ({ hasAnimations: hasAnimationsProp, ...props }) => {
+ *   const { hasAnimations: contextHasAnimations } = useAnimationsConfig();
+ *   const hasAnimations = hasAnimationsProp ?? contextHasAnimations;
+ *
+ *   return <div className={hasAnimations ? 'with-animations' : ''} {...props} />;
+ * };
+ * ```
+ */
+export const useAnimationsConfig = (): AnimationsConfig => {
+  const context = useContext(AnimationsContext);
+
+  if (context === undefined) {
+    // Return default config if no provider is found
+    return { hasAnimations: false };
+  }
+
+  return context;
+};
+
+/**
+ * Utility hook that combines local hasAnimations prop with context configuration.
+ * The local prop takes precedence when explicitly set, otherwise falls back to context.
+ *
+ * @param hasAnimationsProp - The hasAnimations prop passed directly to the component
+ * @returns The resolved hasAnimations value
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = ({ hasAnimations: hasAnimationsProp, ...props }) => {
+ *   const hasAnimations = useHasAnimations(hasAnimationsProp);
+ *
+ *   return <div className={hasAnimations ? 'animated' : 'static'} {...props} />;
+ * };
+ * ```
+ */
+export const useHasAnimations = (hasAnimationsProp?: boolean): boolean => {
+  const { hasAnimations: contextHasAnimations } = useAnimationsConfig();
+
+  // Local prop takes precedence when explicitly set (including false)
+  // If local prop is undefined, fall back to context
+  return hasAnimationsProp ?? contextHasAnimations ?? false;
+};
+
+AnimationsProvider.displayName = 'AnimationsProvider';

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/index.ts

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