@patternfly/react-core 4.264.1 → 4.265.1

package/src/components/Tabs/examples/TabsVerticalExpandableUncontrolled.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
+export const TabsVerticalExpandableUncontrolled: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  // Toggle currently active tab
+  const handleTabClick = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  return (
+    <Tabs
+      activeKey={activeTabKey}
+      onSelect={handleTabClick}
+      isVertical
+      expandable={{ default: 'expandable', md: 'nonExpandable', lg: 'expandable' }}
+      defaultIsExpanded={false}
+      toggleText="Containers"
+      aria-label="Tabs in the vertical expandable uncontrolled example"
+      role="region"
+    >
+      <Tab
+        eventKey={0}
+        title={<TabTitleText>Users</TabTitleText>}
+        aria-label="Vertical expandable uncontrolled content users"
+      >
+        Users
+      </Tab>
+      <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>
+        Containers
+      </Tab>
+      <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>
+        Database
+      </Tab>
+      <Tab eventKey={3} title={<TabTitleText>Server</TabTitleText>}>
+        Server
+      </Tab>
+      <Tab eventKey={4} title={<TabTitleText>System</TabTitleText>}>
+        System
+      </Tab>
+      <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>}>
+        Network
+      </Tab>
+    </Tabs>
+  );
+};

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 {