@patternfly/react-core 4.264.1 → 4.265.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.264.1",
+  "version": "4.265.0",
   "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",
@@ -51,16 +51,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.93.0",
-    "@patternfly/react-styles": "^4.92.0",
-    "@patternfly/react-tokens": "^4.94.0",
+    "@patternfly/react-icons": "^4.93.1",
+    "@patternfly/react-styles": "^4.92.1",
+    "@patternfly/react-tokens": "^4.94.1",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.221.2",
+    "@patternfly/patternfly": "4.221.3",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^3.0.0",
@@ -77,5 +77,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "3c9dd17f7327ffafa0b9751074b188ea19eaeee6"
+  "gitHead": "47c6127c70191349261aec122b56e6ca61fa0c99"
 }

package/src/components/Badge/Badge.tsx

@@ -3,6 +3,8 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Badge/badge';
 
 export interface BadgeProps extends React.HTMLProps<HTMLSpanElement> {
+  /** Text announced by screen readers to indicate the current content/status of the badge. */
+  screenReaderText?: string;
   /**  Adds styling to the badge to indicate it has been read */
   isRead?: boolean;
   /** content rendered inside the Badge */
@@ -15,6 +17,7 @@ export const Badge: React.FunctionComponent<BadgeProps> = ({
   isRead = false,
   className = '',
   children = '',
+  screenReaderText,
   ...props
 }: BadgeProps) => (
   <span
@@ -22,6 +25,7 @@ export const Badge: React.FunctionComponent<BadgeProps> = ({
     className={css(styles.badge, (isRead ? styles.modifiers.read : styles.modifiers.unread) as any, className)}
   >
     {children}
+    {screenReaderText && <span className="pf-screen-reader">{screenReaderText}</span>}
   </span>
 );
 Badge.displayName = 'Badge';

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

@@ -31,6 +31,16 @@ test('Renders with class name pf-m-read when isRead prop is true', () => {
   expect(screen.getByText('Test')).toHaveClass('pf-m-read');
 });
 
+test('Does not render pf-screen-reader class by default', () => {
+  render(<Badge>Test</Badge>);
+  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-screen-reader"></span>');
+});
+
+test('Renders screenReaderText passed via prop', () => {
+  render(<Badge screenReaderText="Custom screen reader text">Test</Badge>);
+  expect(screen.getByText('Custom screen reader text')).toBeInTheDocument();
+});
+
 test('Renders with custom class name when className prop is provided', () => {
   render(<Badge className="custom-class">Test</Badge>);
   expect(screen.getByText('Test')).toHaveClass('custom-class');

package/src/components/Badge/examples/BadgeUnread.tsx

@@ -3,6 +3,17 @@ import { Badge } from '@patternfly/react-core';
 
 export const BadgeUnread: React.FunctionComponent = () => (
   <React.Fragment>
-    <Badge key={1}>7</Badge> <Badge key={2}>24</Badge> <Badge key={3}>240</Badge> <Badge key={4}>999+</Badge>
+    <Badge key={1} screenReaderText="Unread Messages">
+      7
+    </Badge>
+    <Badge key={2} screenReaderText="Unread Messages">
+      24
+    </Badge>
+    <Badge key={3} screenReaderText="Unread Messages">
+      240
+    </Badge>
+    <Badge key={4} screenReaderText="Unread Messages">
+      999+
+    </Badge>
   </React.Fragment>
 );

package/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx

@@ -26,7 +26,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
   const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
   const [menuHeights, setMenuHeights] = React.useState<any>({});
   const [activeMenu, setActiveMenu] = React.useState<string>('breadcrumbs-rootMenu');
-  const [breadcrumb, setBreadcrumb] = React.useState<JSX.Element>();
+  const [breadcrumb, setBreadcrumb] = React.useState<JSX.Element | null>();
   const [withMaxMenuHeight, setWithMaxMenuHeight] = React.useState(false);
 
   const onToggle = (isOpen: boolean, key: string) => {
@@ -37,6 +37,12 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
       case 'label':
         setBreadcrumb(labelsBreadcrumb(isOpen));
         break;
+      case 'pause-app':
+        setBreadcrumb(pauseRolloutsAppGrpBreadcrumb(isOpen));
+        break;
+      case 'pause-label':
+        setBreadcrumb(pauseRolloutsLabelsBreadcrumb(isOpen));
+        break;
       default:
         break;
     }
@@ -46,14 +52,17 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     setWithMaxMenuHeight(checked);
   };
 
-  const drillOut = (toMenuId: string, fromPathId: string, _breadcrumb: JSX.Element | null) => {
-    const indexOfMenuId = menuDrilledIn.indexOf(toMenuId);
-    const menuDrilledInSansLast = menuDrilledIn.slice(0, indexOfMenuId);
-    const indexOfMenuIdPath = drilldownPath.indexOf(fromPathId);
-    const pathSansLast = drilldownPath.slice(0, indexOfMenuIdPath);
-    setMenuDrilledIn(menuDrilledInSansLast);
-    setDrilldownPath(pathSansLast);
+  const drillOut = (toMenuId: string, fromPathId: string, breadcrumb: JSX.Element | null) => {
+    setMenuDrilledIn(prevMenuDrilledIn => {
+      const indexOfMenuId = prevMenuDrilledIn.indexOf(toMenuId);
+      return prevMenuDrilledIn.slice(0, indexOfMenuId);
+    });
+    setDrilldownPath(prevDrilldownPath => {
+      const indexOfMenuIdPath = prevDrilldownPath.indexOf(fromPathId);
+      return prevDrilldownPath.slice(0, indexOfMenuIdPath);
+    });
     setActiveMenu(toMenuId);
+    setBreadcrumb(breadcrumb);
   };
 
   const setHeight = (menuId: string, height: number) => {
@@ -146,31 +155,59 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     </Breadcrumb>
   );
 
-  const pauseRolloutsAppGrpBreadcrumb = (
+  const pauseRolloutsAppGrpBreadcrumb = (isOpen: boolean) => (
     <Breadcrumb>
       <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
         Root
       </BreadcrumbItem>
-      <BreadcrumbItem
-        component="button"
-        onClick={() => drillOut('breadcrumbs-drilldownMenuPause', 'group:app_grouping', pauseRolloutsBreadcrumb)}
-      >
-        Pause rollouts
+      <BreadcrumbItem isDropdown>
+        <Dropdown
+          toggle={
+            <BadgeToggle id="toggle-id" onToggle={open => onToggle(open, 'pause-app')}>
+              1
+            </BadgeToggle>
+          }
+          isOpen={isOpen}
+          dropdownItems={[
+            <DropdownItem
+              key="dropdown-pause"
+              component="button"
+              icon={<AngleLeftIcon />}
+              onClick={() => drillOut('breadcrumbs-drilldownMenuPause', 'group:app_grouping', pauseRolloutsBreadcrumb)}
+            >
+              Pause rollouts
+            </DropdownItem>
+          ]}
+        />
       </BreadcrumbItem>
       <BreadcrumbHeading component="button">Application Grouping</BreadcrumbHeading>
     </Breadcrumb>
   );
 
-  const pauseRolloutsLabelsBreadcrumb = (
+  const pauseRolloutsLabelsBreadcrumb = (isOpen: boolean) => (
     <Breadcrumb>
       <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
         Root
       </BreadcrumbItem>
-      <BreadcrumbItem
-        component="button"
-        onClick={() => drillOut('breadcrumbs-drilldownMenuPause', 'group:labels', pauseRolloutsBreadcrumb)}
-      >
-        Pause rollouts
+      <BreadcrumbItem isDropdown>
+        <Dropdown
+          toggle={
+            <BadgeToggle id="toggle-id" onToggle={open => onToggle(open, 'pause-label')}>
+              1
+            </BadgeToggle>
+          }
+          isOpen={isOpen}
+          dropdownItems={[
+            <DropdownItem
+              key="dropdown-pause"
+              component="button"
+              icon={<AngleLeftIcon />}
+              onClick={() => drillOut('breadcrumbs-drilldownMenuPause', 'group:labels', pauseRolloutsBreadcrumb)}
+            >
+              Pause rollouts
+            </DropdownItem>
+          ]}
+        />
       </BreadcrumbItem>
       <BreadcrumbHeading component="button">Labels</BreadcrumbHeading>
     </Breadcrumb>
@@ -205,6 +242,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
         onDrillIn={drillIn}
         onDrillOut={() => drillOut}
         onGetMenuHeight={setHeight}
+        isScrollable={withMaxMenuHeight}
       >
         {breadcrumb && (
           <>
@@ -270,7 +308,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
                     itemId="group:app_grouping"
                     description="Groups A-C"
                     direction="down"
-                    onClick={() => setBreadcrumb(pauseRolloutsAppGrpBreadcrumb)}
+                    onClick={() => setBreadcrumb(pauseRolloutsAppGrpBreadcrumb(false))}
                     drilldownMenu={
                       <DrilldownMenu id="breadcrumbs-drilldownMenuGrouping">
                         <MenuItem itemId="group_a">Group A</MenuItem>
@@ -285,7 +323,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
                   <MenuItem
                     itemId="group:labels"
                     direction="down"
-                    onClick={() => setBreadcrumb(pauseRolloutsLabelsBreadcrumb)}
+                    onClick={() => setBreadcrumb(pauseRolloutsLabelsBreadcrumb(false))}
                     drilldownMenu={
                       <DrilldownMenu id="breadcrumbs-drilldownMenuLabels">
                         <MenuItem itemId="label_1">Label 1</MenuItem>

package/src/components/TimePicker/TimePicker.tsx

@@ -426,16 +426,6 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     });
   };
 
-  onBlur = (event: React.FocusEvent<HTMLInputElement>) => {
-    const { timeRegex } = this.state;
-    const { delimiter, is24Hour, includeSeconds } = this.props;
-    const time = parseTime(event.currentTarget.value, timeRegex, delimiter, !is24Hour, includeSeconds);
-
-    this.setState({
-      isInvalid: !this.isValid(time)
-    });
-  };
-
   render() {
     const {
       'aria-label': ariaLabel,
@@ -507,7 +497,6 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
         iconVariant="clock"
         onClick={this.onInputClick}
         onChange={this.onInputChange}
-        onBlur={this.onBlur}
         autoComplete="off"
         isDisabled={isDisabled}
         ref={this.inputRef}

package/src/next/components/Dropdown/DropdownItem.tsx

@@ -10,6 +10,8 @@ export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'>, OUIAProps
   className?: string;
   /** Description of the dropdown item */
   description?: React.ReactNode;
+  /** Identifies the component in the dropdown onSelect callback */
+  itemId?: any;
   /** 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. */
@@ -20,13 +22,14 @@ export const DropdownItem: React.FunctionComponent<MenuItemProps> = ({
   children,
   className,
   description,
+  itemId,
   ouiaId,
   ouiaSafe,
   ...props
 }: DropdownItemProps) => {
   const ouiaProps = useOUIAProps(DropdownItem.displayName, ouiaId, ouiaSafe);
   return (
-    <MenuItem className={css(className)} description={description} {...ouiaProps} {...props}>
+    <MenuItem className={css(className)} description={description} itemId={itemId} {...ouiaProps} {...props}>
       {children}
     </MenuItem>
   );

package/src/next/components/Wizard/Wizard.tsx

@@ -49,7 +49,7 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   /** Callback function after back button is clicked */
   onBack?: WizardNavStepFunction;
   /** Callback function to save at the end of the wizard, if not specified uses onClose */
-  onSave?: () => void;
+  onSave?: () => void | Promise<void>;
   /** Callback function to close the wizard */
   onClose?: () => void;
 }

package/src/next/components/Wizard/WizardContext.tsx

@@ -12,9 +12,9 @@ export interface WizardContextProps {
   /** Footer element */
   footer: React.ReactElement;
   /** Navigate to the next step */
-  onNext: () => void;
+  onNext: () => void | Promise<void>;
   /** Navigate to the previous step */
-  onBack: () => void;
+  onBack: () => void | Promise<void>;
   /** Close the wizard */
   onClose: () => void;
   /** Navigate to step by ID */

package/src/next/components/Wizard/WizardFooter.tsx

@@ -14,9 +14,9 @@ export interface WizardFooterProps {
   /** The active step */
   activeStep: WizardControlStep;
   /** Next button callback */
-  onNext: () => WizardNavStepFunction | void;
+  onNext: () => WizardNavStepFunction | void | Promise<void>;
   /** Back button callback */
-  onBack: () => WizardNavStepFunction | void;
+  onBack: () => WizardNavStepFunction | void | Promise<void>;
   /** Cancel link callback */
   onClose: () => void;
   /** Custom text for the Next button. The current step's nextButtonText takes precedence. */

package/src/next/components/Wizard/WizardNavInternal.tsx

@@ -97,7 +97,7 @@ export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: W
                 key={step.id}
                 id={step.id}
                 content={step.name}
-                isExpandable={true}
+                isExpandable={step.isCollapsible ?? true}
                 isCurrent={hasActiveChild}
                 isDisabled={!hasEnabledChildren}
                 isVisited={step.isVisited}

package/src/next/components/Wizard/WizardNavItem.tsx

@@ -109,7 +109,7 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
             <span className={css(styles.wizardNavLinkText)}>{content}</span>
             <span className={css(styles.wizardNavLinkToggle)}>
               <span className={css(styles.wizardNavLinkToggleIcon)}>
-                <AngleRightIcon />
+                <AngleRightIcon aria-label={`${isCurrent ? 'Collapse' : 'Expand'} step icon`} />
               </span>
             </span>
           </>

package/src/next/components/Wizard/WizardStep.tsx

@@ -30,6 +30,8 @@ export interface WizardStepProps {
   footer?: React.ReactElement | Partial<WizardFooterProps>;
   /** Used to determine icon next to the step's navigation item */
   status?: 'default' | 'error';
+  /** Flag to determine whether sub-steps can collapse or not */
+  isCollapsible?: boolean;
 }
 
 export const WizardStep = ({ children, steps: _subSteps, ...props }: WizardStepProps) => {

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

@@ -278,7 +278,7 @@ test('calls onClose on cancel link click', async () => {
   expect(onClose).toHaveBeenCalled();
 });
 
-test('unmounts inactive steps by default', async () => {
+test('does not render inactive step content', async () => {
   const user = userEvent.setup();
 
   render(
@@ -297,3 +297,35 @@ test('unmounts inactive steps by default', async () => {
   expect(screen.queryByText('Step 1 content')).toBeNull();
   expect(screen.getByText('Step 2 content')).toBeVisible();
 });
+
+test('parent steps have collapsed sub-steps by default unless the step is active', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <Wizard startIndex={2}>
+      <WizardStep id="step-1" name="Test step 1" />
+      <WizardStep id="step-2" name="Test step 2" steps={[<WizardStep id="sub-step-1" name="Test sub step 1" />]} />
+    </Wizard>
+  );
+
+  expect(screen.getByLabelText('Expand step icon')).toBeVisible();
+
+  await user.click(screen.getByRole('button', { name: 'Next' }));
+
+  expect(screen.getByLabelText('Collapse step icon')).toBeVisible();
+});
+
+test('parent step can be non-collapsible by setting isCollapsible to false', () => {
+  render(
+    <Wizard>
+      <WizardStep
+        id="step-1"
+        name="Test step 1"
+        isCollapsible={false}
+        steps={[<WizardStep id="sub-step-1" name="Sub step 1" />]}
+      />
+    </Wizard>
+  );
+
+  expect(screen.queryByLabelText('step icon', { exact: false })).toBeNull();
+});

package/src/next/components/Wizard/__tests__/WizardStep.test.tsx

@@ -31,8 +31,7 @@ const wizardContext: WizardContext.WizardContextProps = {
   goToStepByName: jest.fn(),
   goToStepByIndex: jest.fn(),
   setFooter: jest.fn(),
-  getStep: jest.fn(),
-  setSteps: jest.fn()
+  getStep: jest.fn()
 };
 
 const useWizardContextSpy = jest.spyOn(WizardContext, 'useWizardContext');

package/src/next/components/Wizard/examples/Wizard.md

@@ -96,7 +96,7 @@ Custom operations when navigating between steps can be achieved by utilizing `on
 
 ```noLive
 /** Callback for the Wizard's 'onNext', 'onBack', and 'onNavByIndex' properties */
-type WizardNavStepFunction = (currentStep: WizardNavStepData, previousStep: WizardNavStepData) => void;
+type WizardNavStepFunction = (currentStep: WizardNavStepData, previousStep: WizardNavStepData) => void | Promise<void>;
 
 /** Data returned for either parameter of WizardNavStepFunction */
 type WizardNavStepData = Pick<WizardControlStep, 'id' | 'name'>;

package/src/next/components/Wizard/examples/WizardKitchenSink.tsx

@@ -161,6 +161,16 @@ const StepContentWithActions = () => {
 
 export const WizardKitchenSink: React.FunctionComponent = () => {
   const onNext: WizardNavStepFunction = (_currentStep: WizardNavStepData, _previousStep: WizardNavStepData) => {};
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  async function onSubmit(): Promise<void> {
+    setIsSubmitting(true);
+
+    await new Promise(resolve => setTimeout(resolve, 5000));
+
+    setIsSubmitting(false);
+    alert('50 points to Gryffindor!');
+  }
 
   return (
     <SomeContextProvider>
@@ -207,8 +217,17 @@ export const WizardKitchenSink: React.FunctionComponent = () => {
           >
             Step 3 content w/ custom async footer
           </WizardStep>
-          <WizardStep id={StepId.ReviewStep} name="Review" footer={{ nextButtonText: 'Submit' }}>
-            Review step content
+          <WizardStep
+            id={StepId.ReviewStep}
+            name="Review"
+            footer={{
+              nextButtonText: 'Submit',
+              onNext: onSubmit,
+              isNextDisabled: isSubmitting,
+              isBackDisabled: isSubmitting
+            }}
+          >
+            {isSubmitting ? 'Calculating wizard score...' : 'Review step content'}
           </WizardStep>
         </Wizard>
       )}

package/src/next/components/Wizard/types.tsx

@@ -34,6 +34,8 @@ export enum WizardNavItemStatus {
 export interface WizardParentStep extends WizardBasicStep {
   /** Nested step IDs */
   subStepIds: (string | number)[];
+  /** Flag to determine whether sub-steps can collapse or not */
+  isCollapsible?: boolean;
 }
 
 /** Type used to define sub-steps. */
@@ -46,7 +48,10 @@ export interface WizardSubStep extends WizardBasicStep {
 export type WizardControlStep = WizardBasicStep | WizardParentStep | WizardSubStep;
 
 /** Callback for the Wizard's 'onNext', 'onBack', and 'onNavByIndex' properties. */
-export type WizardNavStepFunction = (currentStep: WizardNavStepData, previousStep: WizardNavStepData) => void;
+export type WizardNavStepFunction = (
+  currentStep: WizardNavStepData,
+  previousStep: WizardNavStepData
+) => void | Promise<void>;
 
 /** Data returned for either parameter of WizardNavStepFunction. */
 export interface WizardNavStepData {
@@ -81,9 +86,9 @@ export type CustomWizardNavItemFunction = (
 /** Callback for the Wizard's 'footer' property. Returns element which replaces the Wizard's default footer. */
 export type CustomWizardFooterFunction = (
   activeStep: WizardControlStep,
-  onNext: () => void,
-  onBack: () => void,
-  onClose: () => void
+  onNext: () => void | Promise<void>,
+  onBack: () => void | Promise<void>,
+  onClose: () => void | Promise<void>
 ) => React.ReactElement<WizardFooterProps>;
 
 export function isCustomWizardNav(nav: WizardNavType): nav is CustomWizardNavFunction | React.ReactElement {