@patternfly/react-core 5.4.0-prerelease.20 → 5.4.0-prerelease.22

package/helpers/package.json

@@ -1,8 +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": "5.4.0-prerelease.19",
-  "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":"5.4.0-prerelease.21","private":true}

package/layouts/package.json

@@ -1,8 +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": "5.4.0-prerelease.19",
-  "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":"5.4.0-prerelease.21","private":true}

package/next/package.json

@@ -1,8 +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": "5.4.0-prerelease.19",
-  "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":"5.4.0-prerelease.21","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.4.0-prerelease.20",
+  "version": "5.4.0-prerelease.22",
   "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",
@@ -46,15 +46,15 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.4.0-prerelease.8",
-    "@patternfly/react-styles": "^5.4.0-prerelease.9",
-    "@patternfly/react-tokens": "^5.4.0-prerelease.8",
+    "@patternfly/react-icons": "^5.4.0-prerelease.9",
+    "@patternfly/react-styles": "^5.4.0-prerelease.10",
+    "@patternfly/react-tokens": "^5.4.0-prerelease.9",
     "focus-trap": "7.5.4",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.6.3"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.4.0-prerelease.6",
+    "@patternfly/patternfly": "5.4.0-prerelease.7",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
   },
@@ -62,5 +62,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "471218c7aa7f9ee4ed972da44c37a76b433bfefe"
+  "gitHead": "f81bc585db3dc2a488630773722ff4ebe1105c86"
 }

package/src/components/Wizard/WizardBody.tsx

@@ -10,9 +10,11 @@ import { getResizeObserver } from '../../helpers/resizeObserver';
  * Used as a wrapper for WizardStep content, where the wrapping element is customizable.
  */
 
-export interface WizardBodyProps {
+export interface WizardBodyProps extends React.HTMLProps<HTMLElement> {
   /** Anything that can be rendered in the Wizard body */
   children: React.ReactNode;
+  /** Additional classes spread to the wizard body */
+  className?: string;
   /** Flag to remove the default body padding */
   hasNoPadding?: boolean;
   /** Adds an accessible name to the wrapper element when the content overflows and renders
@@ -29,10 +31,12 @@ export interface WizardBodyProps {
 
 export const WizardBody = ({
   children,
+  className,
   hasNoPadding = false,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
-  component = 'div'
+  component = 'div',
+  ...props
 }: WizardBodyProps) => {
   const [hasScrollbar, setHasScrollbar] = React.useState(false);
   const [previousWidth, setPreviousWidth] = React.useState<number | undefined>(undefined);
@@ -74,7 +78,8 @@ export const WizardBody = ({
       {...(shouldFocusContent && { tabIndex: -1 })}
       {...(component === 'div' && hasScrollbar && { role: 'region' })}
       {...(hasScrollbar && { 'aria-label': defaultAriaLabel, 'aria-labelledby': ariaLabelledBy, tabIndex: 0 })}
-      className={css(styles.wizardMain)}
+      className={css(styles.wizardMain, className)}
+      {...props}
     >
       <div className={css(styles.wizardMainBody, hasNoPadding && styles.modifiers.noPadding)}>{children}</div>
     </WrapperComponent>

package/src/components/Wizard/WizardFooter.tsx

@@ -5,12 +5,11 @@ import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 import { Button, ButtonVariant } from '../Button';
 import { isCustomWizardFooter, WizardFooterButtonProps, WizardStepType } from './types';
-
 /**
  * Hosts the standard structure of a footer with ties to the active step so that text for buttons can vary from step to step.
  */
 
-export interface WizardFooterProps {
+export interface WizardFooterProps extends React.HTMLProps<HTMLElement> {
   /** The active step */
   activeStep: WizardStepType;
   /** Next button callback */
@@ -39,18 +38,23 @@ export interface WizardFooterProps {
   backButtonProps?: Omit<WizardFooterButtonProps, 'isDisabled'>;
   /** Additional props for the Cancel button. */
   cancelButtonProps?: WizardFooterButtonProps;
+  /** Additional classes spread to the wizard footer */
+  className?: string;
 }
 
 /**
  * Applies default wizard footer styling any number of child elements.
  */
 
-interface WizardFooterWrapperProps {
+interface WizardFooterWrapperProps extends React.HTMLProps<HTMLElement> {
   children: React.ReactNode;
+  className?: string;
 }
 
-export const WizardFooterWrapper = ({ children }: WizardFooterWrapperProps) => (
-  <footer className={css(styles.wizardFooter)}>{children}</footer>
+export const WizardFooterWrapper = ({ children, className, ...props }: WizardFooterWrapperProps) => (
+  <footer className={css(styles.wizardFooter, className)} {...props}>
+    {children}
+  </footer>
 );
 
 export const WizardFooter = ({ activeStep, ...internalProps }: WizardFooterProps) => {
@@ -71,9 +75,11 @@ const InternalWizardFooter = ({
   cancelButtonText = 'Cancel',
   nextButtonProps,
   backButtonProps,
-  cancelButtonProps
+  cancelButtonProps,
+  className,
+  ...props
 }: Omit<WizardFooterProps, 'activeStep'>) => (
-  <WizardFooterWrapper>
+  <WizardFooterWrapper className={className} {...props}>
     {!isBackHidden && (
       <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={isBackDisabled} {...backButtonProps}>
         {backButtonText}

package/src/components/Wizard/WizardHeader.tsx

@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 import { Button } from '../Button';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
-export interface WizardHeaderProps {
+export interface WizardHeaderProps extends React.HTMLProps<HTMLDivElement> {
   /** Callback function called when the X (Close) button is clicked */
   onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /** Title of the wizard */
@@ -21,6 +21,8 @@ export interface WizardHeaderProps {
   titleId?: string;
   /** id for the description */
   descriptionId?: string;
+  /** Additional classes spread to the wizard header */
+  className?: string;
 }
 
 export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
@@ -31,9 +33,11 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   closeButtonAriaLabel,
   titleId,
   descriptionComponent: Component = 'div',
-  descriptionId
+  descriptionId,
+  className,
+  ...props
 }: WizardHeaderProps) => (
-  <div className={css(styles.wizardHeader)}>
+  <div className={css(styles.wizardHeader, className)} {...props}>
     {!isCloseHidden && (
       <div className={css(styles.wizardClose)}>
         <Button variant="plain" aria-label={closeButtonAriaLabel} onClick={onClose}>

package/src/components/Wizard/WizardNav.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
 
-export interface WizardNavProps {
+export interface WizardNavProps extends Omit<React.HTMLProps<HTMLOListElement>, 'type' | 'ref'> {
   /** children should be WizardNavItem components */
   children?: any;
   /** Aria-label applied to the navigation element */
@@ -13,6 +13,8 @@ export interface WizardNavProps {
   isExpanded?: boolean;
   /** True to return the inner list without the wrapping navigation element */
   isInnerList?: boolean;
+  /** Additional classes spread to the wizard nav */
+  className?: string;
 }
 
 export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
@@ -20,11 +22,13 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
   isExpanded = false,
-  isInnerList = false
+  isInnerList = false,
+  className,
+  ...props
 }: WizardNavProps) => {
   if (isInnerList) {
     return (
-      <ol className={css(styles.wizardNavList)} role="list">
+      <ol className={css(styles.wizardNavList, className)} role="list" {...props}>
         {children}
       </ol>
     );
@@ -32,9 +36,10 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
 
   return (
     <nav
-      className={css(styles.wizardNav, isExpanded && styles.modifiers.expanded)}
+      className={css(styles.wizardNav, isExpanded && styles.modifiers.expanded, className)}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
+      {...props}
     >
       <ol className={css(styles.wizardNavList)} role="list">
         {children}

package/src/components/Wizard/WizardNavItem.tsx

@@ -10,7 +10,11 @@ import { WizardNavItemStatus } from './types';
 import globalSpacerSm from '@patternfly/react-tokens/dist/esm/global_spacer_sm';
 import globalDangerColor100 from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
 
-export interface WizardNavItemProps extends OUIAProps {
+export interface WizardNavItemProps
+  extends Omit<React.HTMLProps<HTMLLIElement>, 'onClick' | 'id' | 'content' | 'type'>,
+    OUIAProps {
+  /** Additional classes spread to the wizard nav item */
+  className?: string;
   /** Can nest a WizardNav component for substeps */
   children?: React.ReactNode;
   /** The content to display in the navigation item */
@@ -55,7 +59,9 @@ export const WizardNavItem = ({
   status = 'default',
   target,
   ouiaId,
-  ouiaSafe = true
+  ouiaSafe = true,
+  className,
+  ...props
 }: WizardNavItemProps) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const ouiaProps = useOUIAProps(WizardNavItem.displayName, ouiaId, ouiaSafe);
@@ -74,8 +80,10 @@ export const WizardNavItem = ({
       className={css(
         styles.wizardNavItem,
         isExpandable && styles.modifiers.expandable,
-        isExpandable && isExpanded && styles.modifiers.expanded
+        isExpandable && isExpanded && styles.modifiers.expanded,
+        className
       )}
+      {...props}
     >
       <NavItemComponent
         {...(NavItemComponent === 'a'

package/src/components/Wizard/__tests__/WizardBody.test.tsx

@@ -3,11 +3,20 @@ import { render, screen } from '@testing-library/react';
 import { WizardBody } from '../WizardBody';
 
 test('renders children without additional props', () => {
-  const { container } = render(<WizardBody>content</WizardBody>);
+  render(<WizardBody data-testid="test-id">content</WizardBody>);
 
-  expect(container).toHaveTextContent('content');
-  expect(container).not.toHaveAttribute('aria-label');
-  expect(container).not.toHaveAttribute('aria-labelledby');
+  expect(screen.getByTestId('test-id')).toHaveTextContent('content');
+  expect(screen.getByTestId('test-id')).not.toHaveAttribute('aria-label');
+  expect(screen.getByTestId('test-id')).not.toHaveAttribute('aria-labelledby');
+});
+
+test(`Renders with additional classes when className is passed`, () => {
+  render(
+    <WizardBody className="custom-class" data-testid="test-id">
+      Test
+    </WizardBody>
+  );
+  expect(screen.getByTestId('test-id')).toHaveClass('custom-class');
 });
 
 test('has no padding className when hasNoPadding is not specified', () => {
@@ -21,11 +30,19 @@ test('has padding className when hasNoPadding is specified', () => {
 });
 
 test('wrapper element is of type div when component is not specified', () => {
-  const { container } = render(<WizardBody aria-label="Wizard body">content</WizardBody>);
-  expect(container.firstElementChild?.tagName).toEqual('DIV');
+  render(
+    <WizardBody data-testid="test-id" aria-label="Wizard body">
+      content
+    </WizardBody>
+  );
+  expect(screen.getByTestId('test-id').tagName).toEqual('DIV');
 });
 
 test('renders with custom component', () => {
-  const { container } = render(<WizardBody component="main">content</WizardBody>);
-  expect(container.firstElementChild?.tagName).toEqual('MAIN');
+  render(
+    <WizardBody component="main" data-testid="test-id">
+      content
+    </WizardBody>
+  );
+  expect(screen.getByTestId('test-id').tagName).toEqual('MAIN');
 });

package/src/components/Wizard/__tests__/WizardFooter.test.tsx

@@ -20,6 +20,15 @@ test('has button names of "Next", "Back", and "Cancel" by default', () => {
   expect(screen.getByRole('button', { name: 'Cancel' })).toBeVisible();
 });
 
+test(`Renders with additional classes when className is passed`, () => {
+  render(
+    <WizardFooter {...defaultProps} className="custom-class" data-testid="test-id">
+      Test
+    </WizardFooter>
+  );
+  expect(screen.getByTestId('test-id')).toHaveClass('custom-class');
+});
+
 test('calls onNext when the next button is clicked', async () => {
   const onNext = jest.fn();
   const user = userEvent.setup();

package/src/components/Wizard/__tests__/WizardHeader.test.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { WizardHeader } from '../WizardHeader';
+import userEvent from '@testing-library/user-event';
+
+// close button related tests
+test(`Renders close button by default`, () => {
+  render(<WizardHeader data-testid="header-component" />);
+  expect(screen.getByRole('button')).toBeInTheDocument();
+});
+
+test(`Close button is hidden when isCloseHidden is passed`, () => {
+  render(<WizardHeader isCloseHidden />);
+  expect(screen.queryByRole('button')).toBeNull();
+});
+
+test(`Close button renders passed aria label`, () => {
+  render(<WizardHeader closeButtonAriaLabel="test aria label" />);
+  expect(screen.getByRole('button', { name: 'test aria label' })).toBeInTheDocument();
+});
+
+test(`Callback function fires when onClose passed`, async () => {
+  const onClose = jest.fn();
+  const user = userEvent.setup();
+  render(<WizardHeader onClose={onClose} />);
+  await user.click(screen.getByRole('button'));
+  expect(onClose).toHaveBeenCalled();
+});
+
+// description related tests
+test(`Renders a description when passed description`, () => {
+  render(<WizardHeader description="test description" />);
+  expect(screen.getByText('test description')).toBeVisible();
+});
+
+test(`Renders the id passed via descriptionId`, () => {
+  render(<WizardHeader description="test description" descriptionId="test-id" />);
+  expect(screen.queryByText('test description')).toHaveAttribute('id', 'test-id');
+});
+
+// other prop tests
+test(`Renders title when prop is passed`, () => {
+  render(<WizardHeader title="Test" />);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test(`Renders with additional classes when className is passed`, () => {
+  render(<WizardHeader className="custom-class" data-testid="header-component" />);
+  expect(screen.getByTestId('header-component')).toHaveClass('custom-class');
+});

package/src/components/Wizard/__tests__/WizardNav.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { WizardNav } from '../WizardNav';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+
+test(`Renders with additional classes when className is passed`, () => {
+  render(
+    <WizardNav className="custom-class" data-testid="test-id">
+      Test
+    </WizardNav>
+  );
+  expect(screen.getByTestId('test-id')).toHaveClass('custom-class');
+});
+
+test(`Renders with accessible aria-label when passed`, () => {
+  render(
+    <WizardNav aria-label="test aria label" data-testid="test-id">
+      Test
+    </WizardNav>
+  );
+  expect(screen.getByTestId('test-id')).toHaveAccessibleName('test aria label');
+});
+
+test(`Renders with accessible aria-labelledby when passed`, () => {
+  render(
+    <WizardNav aria-labelledby="test-labelledby" data-testid="test-id">
+      Test
+    </WizardNav>
+  );
+  expect(screen.getByTestId('test-id')).toHaveAttribute('aria-labelledby');
+});
+
+test(`Renders with expanded styles when prop passed`, () => {
+  render(
+    <WizardNav isExpanded data-testid="test-id">
+      Test
+    </WizardNav>
+  );
+  expect(screen.getByTestId('test-id')).toHaveClass(styles.modifiers.expanded);
+});
+
+test(`Renders with expanded styles when prop passed`, () => {
+  render(<WizardNav isInnerList>Test</WizardNav>);
+  expect(screen.getByRole('list')).toBeInTheDocument();
+});

package/src/components/Wizard/__tests__/WizardNavItem.test.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { WizardNavItem } from '../WizardNavItem';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import userEvent from '@testing-library/user-event';
+
+test(`Renders with additional classes when className is passed`, () => {
+  render(<WizardNavItem className="custom-class" />);
+  expect(screen.getByRole('listitem')).toHaveClass('custom-class');
+});
+
+test(`Renders content passed to content prop`, () => {
+  render(<WizardNavItem content="test content" />);
+  expect(screen.getByText('test content')).toBeVisible();
+});
+
+test(`Renders ${styles.modifiers.disabled} class when isDisabled is true`, () => {
+  render(<WizardNavItem isDisabled />);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.disabled);
+});
+
+test(`Renders ${styles.modifiers.current} class when isCurrent is true`, () => {
+  render(<WizardNavItem isCurrent />);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.current);
+});
+
+test(`Callback function fires when onClick passed`, async () => {
+  const onClick = jest.fn();
+  const user = userEvent.setup();
+  render(<WizardNavItem onClick={onClick} />);
+  await user.click(screen.getByRole('button'));
+  expect(onClick).toHaveBeenCalled();
+});
+
+test(`Renders a link element with an href when the props are passed`, () => {
+  render(<WizardNavItem component="a" href="test-href" />);
+  expect(screen.getByRole('link')).toHaveAttribute('href', 'test-href');
+});
+
+test(`Renders a link element with a target when the props are passed`, () => {
+  render(<WizardNavItem component="a" href="test-href" target="test-target" />);
+  expect(screen.getByRole('link')).toHaveAttribute('target', 'test-target');
+});
+
+test(`Renders an expandable li when isExapandable is passed`, () => {
+  render(<WizardNavItem isExpandable />);
+  expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+  expect(screen.getByRole('listitem')).toHaveClass(styles.modifiers.expandable);
+});
+
+test(`Renders id to nav item button when passed`, () => {
+  render(<WizardNavItem id="test-id" />);
+  expect(screen.getByRole('button')).toHaveAttribute('id', 'test-id');
+});

package/src/helpers/resizeObserver.tsx

@@ -1,4 +1,4 @@
-import { canUseDOM } from './util';
+import { canUseDOM, debounce } from './util';
 
 /**
  * This function creates a ResizeObserver used to handle resize events for the given containerRef. If ResizeObserver
@@ -83,7 +83,7 @@ export const getResizeObserver = (
         if (useRequestAnimationFrame) {
           window.requestAnimationFrame(() => {
             if (Array.isArray(entries) && entries.length > 0) {
-              handleResize();
+              debounce(handleResize, 100);
             }
           });
           // Avoid wrapping function in requestAnimationFrame if the function is debounced