@patternfly/react-core 4.226.0 → 4.226.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.226.0",
+  "version": "4.226.1",
   "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",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.77.0",
-    "@patternfly/react-styles": "^4.76.0",
-    "@patternfly/react-tokens": "^4.78.0",
+    "@patternfly/react-icons": "^4.77.1",
+    "@patternfly/react-styles": "^4.76.1",
+    "@patternfly/react-tokens": "^4.78.1",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "a7097958c8ccb70a8faaf2fa401413cfa4372809"
+  "gitHead": "a8c0fc47245d670f26681e0c58769f91302d85a7"
 }

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

@@ -1,7 +1,83 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Truncate } from '../Truncate';
 
+jest.mock('../../Tooltip', () => ({
+  Tooltip: ({ content, position, children, ...props }) => (
+    <div data-testid="Tooltip-mock" {...props}>
+      <div data-testid="Tooltip-mock-content-container">Test {content}</div>
+      <p>{`position: ${position}`}</p>
+      {children}
+    </div>
+  )
+}));
+
+test('renders with class pf-c-truncate', () => {
+  render(
+    <Truncate
+      content={''}
+      aria-label='test-id'
+    />
+  );
+
+  const test = screen.getByLabelText('test-id');
+
+  expect(test).toHaveClass('pf-c-truncate');
+});
+
+test('renders with custom class name passed via prop', () => {
+  render(
+    <Truncate
+      content={''}
+      aria-label='test-id'
+      className='custom-classname'
+    />
+  );
+
+  const test = screen.getByLabelText('test-id');
+
+  expect(test).toHaveClass('custom-classname');
+});
+
+test('renders truncate with empty content', () => {
+  render(
+    <Truncate
+      content={''}
+      aria-label='test-id'
+    />
+  );
+
+  const test = screen.getByLabelText('test-id');
+
+  expect(test).toHaveTextContent('');
+});
+
+test('renders truncate with content', () => {
+  render(
+    <Truncate
+      content={'Test'}
+      aria-label='test-id'
+    />
+  );
+
+  const test = screen.getByLabelText('test-id');
+
+  expect(test).toHaveTextContent('Test');
+});
+
+test('only renders pf-c-truncate__start with default position', () => {
+  render(
+    <Truncate
+      content={'Testing truncate content'}
+    />
+  );
+
+  const start = screen.getByText('Testing truncate content');
+
+  expect(start).toHaveClass('pf-c-truncate__start');
+  expect(start).not.toHaveClass('pf-c-truncate__end');
+});
+
 test('renders default truncation', () => {
   const { asFragment } = render(
     <Truncate content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'} />
@@ -9,7 +85,7 @@ test('renders default truncation', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('renders start truncation', () => {
+test('renders start truncation with &lrm; at end', () => {
   const { asFragment } = render(
     <Truncate
       content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
@@ -20,11 +96,74 @@ test('renders start truncation', () => {
 });
 
 test('renders middle truncation', () => {
-  const { asFragment } = render(
+  render(
     <Truncate
       content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
       position={'middle'}
     />
   );
-  expect(asFragment()).toMatchSnapshot();
+
+  const start = screen.getByText('Vestibulum interdum risus et enim faucibus, sit amet molestie est ac');
+
+  expect(start).toHaveClass('pf-c-truncate__start');
+
+  const end = screen.getByText('cumsan.');
+
+  expect(end).toHaveClass('pf-c-truncate__end');
+});
+
+test('renders different content when trailingNumChars is passed with middle truncate', () => {
+  render(
+    <Truncate
+      content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
+      trailingNumChars={3}
+      position='middle'
+    />
+  );
+
+  const start = screen.getByText('Vestibulum interdum risus et enim faucibus, sit amet molestie est accums');
+
+  expect(start).toHaveClass('pf-c-truncate__start');
+
+  const end = screen.getByText('an.');
+
+  expect(end).toHaveClass('pf-c-truncate__end');
+});
+
+test('renders tooltip position', () => {
+  render(
+    <Truncate
+      content={''}
+      tooltipPosition='top'
+    />
+  );
+
+  const input = screen.getByText('position: top');
+  
+  expect(input).toBeVisible();
+});
+
+test('renders tooltip content', () => {
+  render(
+    <Truncate
+      content={'Another Tooltip'}
+      tooltipPosition='top'
+    />
+  );
+
+  const input = screen.getByText('Test Another Tooltip');
+
+  expect(input).toBeVisible();
+});
+
+test('renders with inherited element props spread to the component', () => {
+  render(
+    <Truncate
+      content={'Test'}
+      data-testid="test-id"
+      aria-label="labelling-id"
+    />
+  );
+
+  expect(screen.getByTestId('test-id')).toHaveAccessibleName('labelling-id');
 });

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

@@ -2,47 +2,52 @@
 
 exports[`renders default truncation 1`] = `
 <DocumentFragment>
-  <span
-    class="pf-c-truncate"
+  <div
+    data-testid="Tooltip-mock"
   >
-    <span
-      class="pf-c-truncate__start"
+    <div
+      data-testid="Tooltip-mock-content-container"
     >
-      Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.
-    </span>
-  </span>
-</DocumentFragment>
-`;
-
-exports[`renders middle truncation 1`] = `
-<DocumentFragment>
-  <span
-    class="pf-c-truncate"
-  >
+      Test Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.
+    </div>
+    <p>
+      position: top
+    </p>
     <span
-      class="pf-c-truncate__start"
+      class="pf-c-truncate"
     >
-      Vestibulum interdum risus et enim faucibus, sit amet molestie est ac
+      <span
+        class="pf-c-truncate__start"
+      >
+        Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.
+      </span>
     </span>
-    <span
-      class="pf-c-truncate__end"
-    >
-      cumsan.
-    </span>
-  </span>
+  </div>
 </DocumentFragment>
 `;
 
-exports[`renders start truncation 1`] = `
+exports[`renders start truncation with &lrm; at end 1`] = `
 <DocumentFragment>
-  <span
-    class="pf-c-truncate"
+  <div
+    data-testid="Tooltip-mock"
   >
+    <div
+      data-testid="Tooltip-mock-content-container"
+    >
+      Test Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.
+    </div>
+    <p>
+      position: top
+    </p>
     <span
-      class="pf-c-truncate__end"
+      class="pf-c-truncate"
     >
-      Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.‎
+      <span
+        class="pf-c-truncate__end"
+      >
+        Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.‎
+      </span>
     </span>
-  </span>
+  </div>
 </DocumentFragment>
 `;

package/src/components/Wizard/Wizard.tsx

@@ -106,6 +106,8 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   isOpen?: boolean;
   /** Flag indicating nav items with sub steps are expandable */
   isNavExpandable?: boolean;
+  /** Callback function to signal the current step in the wizard */
+  onCurrentStepChanged?: (step: WizardStep) => void;
   /** @beta Flag indicating the wizard has a drawer for at least one of the wizard steps */
   hasDrawer?: boolean;
   /** @beta Flag indicating the wizard drawer is expanded */
@@ -164,6 +166,14 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
       isNavOpen: false
     };
 
+    if (props.onCurrentStepChanged) {
+      const flattenedSteps = this.getFlattenedSteps();
+      if (flattenedSteps.length >= this.state.currentStep) {
+        const currentStep = flattenedSteps[this.state.currentStep - 1];
+        props.onCurrentStepChanged(currentStep);
+      }
+    }
+
     this.drawerRef = React.createRef();
   }
 
@@ -202,9 +212,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
         }
       }
 
-      this.setState({
-        currentStep: newStep
-      });
+      this.setCurrentStep(newStep, flattenedSteps[newStep - 1]);
       const { id: prevId, name: prevName } = flattenedSteps[currentStep - 1];
       const { id, name } = flattenedSteps[newStep - 1];
       return onNext && onNext({ id, name }, { prevId, prevName });
@@ -218,9 +226,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
     if (flattenedSteps.length < currentStep) {
       // Previous step was removed, just update the currentStep state
       const adjustedStep = flattenedSteps.length;
-      this.setState({
-        currentStep: adjustedStep
-      });
+      this.setCurrentStep(adjustedStep, flattenedSteps[adjustedStep - 1]);
     } else {
       let newStep = currentStep;
 
@@ -235,9 +241,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
         }
       }
 
-      this.setState({
-        currentStep: newStep
-      });
+      this.setCurrentStep(newStep, flattenedSteps[newStep - 1]);
       const { id: prevId, name: prevName } = flattenedSteps[newStep];
       const { id, name } = flattenedSteps[newStep - 1];
       return onBack && onBack({ id, name }, { prevId, prevName });
@@ -259,7 +263,8 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
     } else if (step > maxSteps) {
       step = maxSteps;
     }
-    this.setState({ currentStep: step, isNavOpen: false });
+    this.setCurrentStep(step, flattenedSteps[step - 1]);
+    this.setState({ isNavOpen: false });
     const { id: prevId, name: prevName } = flattenedSteps[currentStep - 1];
     const { id, name } = flattenedSteps[step - 1];
     return onGoToStep && onGoToStep({ id, name }, { prevId, prevName });
@@ -275,7 +280,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
       }
     }
     if (step) {
-      this.setState({ currentStep: step });
+      this.setCurrentStep(step, flattenedSteps[step - 1]);
     }
   };
 
@@ -289,7 +294,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
       }
     }
     if (step) {
-      this.setState({ currentStep: step });
+      this.setCurrentStep(step, flattenedSteps[step - 1]);
     }
   };
 
@@ -338,6 +343,16 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
     return appendTo || document.body;
   };
 
+  private setCurrentStep(currentStep: number, currentStepObject: WizardStep) {
+    this.setState({
+      currentStep
+    });
+
+    if (this.props.onCurrentStepChanged) {
+      this.props.onCurrentStepChanged(currentStepObject);
+    }
+  }
+
   componentDidMount() {
     const target = typeof document !== 'undefined' ? document.body : null;
     if (target) {
@@ -384,6 +399,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
       titleId,
       descriptionId,
       isNavExpandable,
+      onCurrentStepChanged,
       hasDrawer,
       isDrawerExpanded,
       ...rest

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

@@ -222,6 +222,34 @@ describe('Wizard', () => {
     expect(main).toBeInTheDocument();
     expect(main).toHaveAttribute('aria-labelledby', 'main-aria-labelledby');
   });
+
+  test('wiz with onCurrentStepChanged setter', () => {
+    const stepA = { name: 'A', component: <p>Step 1</p> };
+    const stepB = { name: 'B', component: <p>Step 2</p> };
+    const stepC = { name: 'C', component: <p>Step 3</p> };
+
+    const steps: WizardStep[] = [ stepA, stepB, stepC ];
+    const setter = jest.fn();
+
+    render(
+        <Wizard
+            title="Wiz title"
+            onCurrentStepChanged={ setter }
+            steps={steps}
+        />
+    );
+    expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepA));
+    userEvent.click(screen.getByText(/next/i));
+    expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepB));
+    userEvent.click(screen.getByText(/next/i));
+    expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepC));
+    userEvent.click(screen.getByText('A'));
+    expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepA));
+    userEvent.click(screen.getByText(/next/i));
+    expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepB));
+    userEvent.click(screen.getByText(/back/i));
+    expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepA));
+  });
 });
 
   test('wiz with disabled steps', () => {

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

@@ -782,36 +782,29 @@ class ProgressiveWizard extends React.Component {
 }
 ```
 
-### Remember last step
+### Get current step
 
 ```js
 import React from 'react';
 import { Button, Wizard } from '@patternfly/react-core';
 
-class RememberLastStepWizard extends React.Component {
+class GetCurrentStepWizard extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       step: 1
     };
+    this.onCurrentStepChanged = ({ id }) => {
+        this.setState({
+            step: id
+        });
+    }
     this.closeWizard = () => {
       console.log('close wizard');
     };
-    this.onMove = (curr, prev) => {
-      this.setState({
-        step: curr.id
-      });
-    };
-    this.onSave = () => {
-      this.setState({
-        step: 1
-      });
-    };
   }
 
   render() {
-    const { step } = this.state;
-
     const steps = [
       { id: 1, name: 'First step', component: <p>Step 1 content</p> },
       { id: 2, name: 'Second step', component: <p>Step 2 content</p> },
@@ -819,19 +812,16 @@ class RememberLastStepWizard extends React.Component {
       { id: 4, name: 'Fourth step', component: <p>Step 4 content</p> },
       { id: 5, name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
     ];
-    const title = 'Remember last step wizard';
+    const title = 'Get current step wizard';
     return (
       <Wizard
         navAriaLabel={`${title} steps`}
         mainAriaLabel={`${title} content`}
-        startAtStep={step}
-        onNext={this.onMove}
-        onBack={this.onMove}
-        onSave={this.onSave}
         onClose={this.closeWizard}
         description="Simple Wizard Description"
         steps={steps}
         height={400}
+        onCurrentStepChanged={this.onCurrentStepChanged}
       />
     );
   }