@patternfly/react-core 4.203.0 → 4.203.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.203.0",
+  "version": "4.203.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.54.0",
-    "@patternfly/react-styles": "^4.53.0",
-    "@patternfly/react-tokens": "^4.55.0",
+    "@patternfly/react-icons": "^4.54.1",
+    "@patternfly/react-styles": "^4.53.1",
+    "@patternfly/react-tokens": "^4.55.1",
     "focus-trap": "6.2.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": "3a30fbb3c5935b2e9a0fbb6336b1b45cfca46a7a"
+  "gitHead": "2f16e9b81a8ab2c54d9ef945e50c1e4aa7510c49"
 }

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -41,10 +41,12 @@ export interface MultipleFileUploadStatusItemProps extends React.HTMLProps<HTMLL
 
   // Props passed through to the progress component
 
-  /** Adds accessible text to the ProgressBar. Required when title not used and there is not any label associated with the progress bar */
+  /** Adds accessible text to the progress bar. Required when title not used and there is not any label associated with the progress bar */
   progressAriaLabel?: string;
-  /** Associates the ProgressBar with it's label for accessibility purposes. Required when title not used */
+  /** Associates the progress bar with it's label for accessibility purposes. Required when title not used */
   progressAriaLabelledBy?: string;
+  /** Unique identifier for progress. Generated if not specified. */
+  progressId?: string;
 }
 
 export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileUploadStatusItemProps> = ({
@@ -63,6 +65,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
   progressVariant,
   progressAriaLabel,
   progressAriaLabelledBy,
+  progressId,
   buttonAriaLabel = 'Remove from list',
   ...props
 }: MultipleFileUploadStatusItemProps) => {
@@ -137,6 +140,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
           variant={progressVariant || loadResult}
           aria-label={progressAriaLabel}
           aria-labelledby={progressAriaLabelledBy}
+          id={progressId}
         />
       </div>
       <div className={styles.multipleFileUploadStatusItemClose}>

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

@@ -1,20 +1,20 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { MultipleFileUpload } from '../MultipleFileUpload';
 
 describe('MultipleFileUpload', () => {
   test('renders with expected class names when not horizontal', () => {
-    const view = mount(<MultipleFileUpload>Foo</MultipleFileUpload>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUpload>Foo</MultipleFileUpload>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with expected class names when horizontal', () => {
-    const view = mount(<MultipleFileUpload isHorizontal>Foo</MultipleFileUpload>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUpload isHorizontal>Foo</MultipleFileUpload>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom class names', () => {
-    const view = mount(<MultipleFileUpload className='test'>Foo</MultipleFileUpload>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUpload className="test">Foo</MultipleFileUpload>);
+    expect(asFragment()).toMatchSnapshot();
   });
-})
+});

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadButton.test.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadButton } from '../MultipleFileUploadButton';
 
 describe('MultipleFileUploadButton', () => {
   test('renders with expected class names', () => {
-    const view = mount(<MultipleFileUploadButton>Foo</MultipleFileUploadButton>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadButton>Foo</MultipleFileUploadButton>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom class names', () => {
-    const view = mount(<MultipleFileUploadButton className="test">Foo</MultipleFileUploadButton>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadButton className="test">Foo</MultipleFileUploadButton>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with aria-label applied to the button', () => {
-    const view = mount(<MultipleFileUploadButton aria-label="test">Foo</MultipleFileUploadButton>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadButton aria-label="test">Foo</MultipleFileUploadButton>);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadInfo.test.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadInfo } from '../MultipleFileUploadInfo';
 
 describe('MultipleFileUploadInfo', () => {
   test('renders with expected class names', () => {
-    const view = mount(<MultipleFileUploadInfo>Foo</MultipleFileUploadInfo>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadInfo>Foo</MultipleFileUploadInfo>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom class names', () => {
-    const view = mount(<MultipleFileUploadInfo className="test">Foo</MultipleFileUploadInfo>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadInfo className="test">Foo</MultipleFileUploadInfo>);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadMain.test.tsx

@@ -1,32 +1,32 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadMain } from '../MultipleFileUploadMain';
 
 describe('MultipleFileUploadMain', () => {
   test('renders with expected class names', () => {
-    const view = mount(<MultipleFileUploadMain />);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadMain />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom class names', () => {
-    const view = mount(<MultipleFileUploadMain className="test" />);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadMain className="test" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('passes props to the title as expected', () => {
-    const view = mount(
+    const { asFragment } = render(
       <MultipleFileUploadMain titleIcon="icon" titleText="title text" titleTextSeparator="title test separator" />
     );
-    expect(view).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders without the button when expected', () => {
-    const view = mount(<MultipleFileUploadMain isUploadButtonHidden />);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadMain isUploadButtonHidden />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('passes props to the info component as expected', () => {
-    const view = mount(<MultipleFileUploadMain infoText="info text" />);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadMain infoText="info text" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatus.test.tsx

@@ -1,26 +1,28 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { MultipleFileUploadStatus } from '../MultipleFileUploadStatus';
 import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
 
 describe('MultipleFileUploadStatus', () => {
   test('renders with expected class names', () => {
-    const view = mount(<MultipleFileUploadStatus>Foo</MultipleFileUploadStatus>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadStatus>Foo</MultipleFileUploadStatus>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom class names', () => {
-    const view = mount(<MultipleFileUploadStatus className="test">Foo</MultipleFileUploadStatus>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadStatus className="test">Foo</MultipleFileUploadStatus>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders status toggle text', () => {
-    const view = mount(<MultipleFileUploadStatus statusToggleText='test'>Foo</MultipleFileUploadStatus>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadStatus statusToggleText="test">Foo</MultipleFileUploadStatus>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders status toggle icon', () => {
-    const view = mount(<MultipleFileUploadStatus statusToggleIcon={<InProgressIcon />}>Foo</MultipleFileUploadStatus>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(
+      <MultipleFileUploadStatus statusToggleIcon={<InProgressIcon />}>Foo</MultipleFileUploadStatus>
+    );
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx

@@ -1,54 +1,69 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+
+import { render, screen } from '@testing-library/react';
+
 import { MultipleFileUploadStatusItem } from '../MultipleFileUploadStatusItem';
 import FileImageIcon from '@patternfly/react-icons/dist/esm/icons/file-image-icon';
 
 describe('MultipleFileUploadStatusItem', () => {
   test('renders with expected class names', () => {
-    const view = shallow(<MultipleFileUploadStatusItem />);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadStatusItem progressId="test-progress-id" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom class names', () => {
-    const view = shallow(<MultipleFileUploadStatusItem className="test" />);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadStatusItem className="test" progressId="test-progress-id" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders expected values from a passed file object', () => {
     const testFile = new File(['foo'], 'testFile.txt');
-    const view = shallow(<MultipleFileUploadStatusItem file={testFile} />);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadStatusItem file={testFile} progressId="test-progress-id" />);
+
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom file name/size/icon when passed', () => {
     const testFile = new File(['foo'], 'testFile.txt');
-    const view = shallow(
+    const { asFragment } = render(
       <MultipleFileUploadStatusItem
         file={testFile}
         fileIcon={<FileImageIcon />}
         fileName="testCustomFileName.txt"
         fileSize={42}
+        progressId="test-progress-id"
       />
     );
-    expect(view).toMatchSnapshot();
+
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom progress value/variant when passed', () => {
     const testFile = new File(['foo'], 'testFile.txt');
-    const view = shallow(<MultipleFileUploadStatusItem file={testFile} progressValue={42} progressVariant="warning" />);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(
+      <MultipleFileUploadStatusItem
+        file={testFile}
+        progressValue={42}
+        progressVariant="warning"
+        progressId="test-progress-id"
+      />
+    );
+
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom aria labels', () => {
     const testFile = new File(['foo'], 'testFile.txt');
-    const view = shallow(
+    const { asFragment } = render(
       <MultipleFileUploadStatusItem
         file={testFile}
         buttonAriaLabel="buttonAriaLabel"
         progressAriaLabel="progressAriaLabel"
         progressAriaLabelledBy="progressAriaLabelledBy"
+        progressId="test-progress-id"
       />
     );
-    expect(view).toMatchSnapshot();
+
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadTitle.test.tsx

@@ -1,30 +1,30 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { MultipleFileUploadTitle } from '../MultipleFileUploadTitle';
 
 describe('MultipleFileUploadTitle', () => {
   test('renders with expected class names', () => {
-    const view = mount(<MultipleFileUploadTitle />);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadTitle />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom class names', () => {
-    const view = mount(<MultipleFileUploadTitle className="test" />);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadTitle className="test" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with title icon', () => {
-    const view = mount(<MultipleFileUploadTitle icon="icon" />);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadTitle icon="icon" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with title text', () => {
-    const view = mount(<MultipleFileUploadTitle text="text" />);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadTitle text="text" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with title text separator', () => {
-    const view = mount(<MultipleFileUploadTitle text="text" textSeparator="text separator" />);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadTitle text="text" textSeparator="text separator" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadTitleIcon.test.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { MultipleFileUploadTitleIcon } from '../MultipleFileUploadTitleIcon';
 
 describe('MultipleFileUploadTitleIcon', () => {
   test('renders with expected class names', () => {
-    const view = mount(<MultipleFileUploadTitleIcon>Foo</MultipleFileUploadTitleIcon>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadTitleIcon data-testid="test-id" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom class names', () => {
-    const view = mount(<MultipleFileUploadTitleIcon className="test" />);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadTitleIcon className="test" data-testid="test-id" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadTitleText.test.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { MultipleFileUploadTitleText } from '../MultipleFileUploadTitleText';
 
 describe('MultipleFileUploadTitleText', () => {
   test('renders with expected class names', () => {
-    const view = mount(<MultipleFileUploadTitleText>Foo</MultipleFileUploadTitleText>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadTitleText>Foo</MultipleFileUploadTitleText>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom class names', () => {
-    const view = mount(<MultipleFileUploadTitleText className="test">Foo</MultipleFileUploadTitleText>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadTitleText className="test">Foo</MultipleFileUploadTitleText>);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadTitleTextSeparator.test.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { MultipleFileUploadTitleTextSeparator } from '../MultipleFileUploadTitleTextSeparator';
 
 describe('MultipleFileUploadTitleTextSeparator', () => {
   test('renders with expected class names', () => {
-    const view = mount(<MultipleFileUploadTitleTextSeparator>Foo</MultipleFileUploadTitleTextSeparator>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadTitleTextSeparator>Foo</MultipleFileUploadTitleTextSeparator>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom class names', () => {
-    const view = mount(<MultipleFileUploadTitleTextSeparator className="test">Foo</MultipleFileUploadTitleTextSeparator>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(
+      <MultipleFileUploadTitleTextSeparator className="test">Foo</MultipleFileUploadTitleTextSeparator>
+    );
+    expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -1,137 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MultipleFileUpload renders custom class names 1`] = `
-<MultipleFileUpload
-  className="test"
->
-  <t
-    disabled={false}
-    getDataTransferItems={[Function]}
-    maxSize={Infinity}
-    minSize={0}
-    multiple={true}
-    onDropAccepted={[Function]}
-    onDropRejected={[Function]}
-    preventDropOnDocument={true}
+<DocumentFragment>
+  <div
+    class="pf-c-multiple-file-upload test"
+    tabindex="0"
   >
-    <div
-      className="pf-c-multiple-file-upload test"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onDragEnter={[Function]}
-      onDragLeave={[Function]}
-      onDragOver={[Function]}
-      onDragStart={[Function]}
-      onDrop={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      tabIndex={0}
-    >
-      <input
-        autoComplete="off"
-        multiple={true}
-        onChange={[Function]}
-        onClick={[Function]}
-        style={
-          Object {
-            "display": "none",
-          }
-        }
-        tabIndex={-1}
-        type="file"
-      />
-      Foo
-    </div>
-  </t>
-</MultipleFileUpload>
+    <input
+      autocomplete="off"
+      multiple=""
+      style="display: none;"
+      tabindex="-1"
+      type="file"
+    />
+    Foo
+  </div>
+</DocumentFragment>
 `;
 
 exports[`MultipleFileUpload renders with expected class names when horizontal 1`] = `
-<MultipleFileUpload
-  isHorizontal={true}
->
-  <t
-    disabled={false}
-    getDataTransferItems={[Function]}
-    maxSize={Infinity}
-    minSize={0}
-    multiple={true}
-    onDropAccepted={[Function]}
-    onDropRejected={[Function]}
-    preventDropOnDocument={true}
+<DocumentFragment>
+  <div
+    class="pf-c-multiple-file-upload pf-m-horizontal"
+    tabindex="0"
   >
-    <div
-      className="pf-c-multiple-file-upload pf-m-horizontal"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onDragEnter={[Function]}
-      onDragLeave={[Function]}
-      onDragOver={[Function]}
-      onDragStart={[Function]}
-      onDrop={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      tabIndex={0}
-    >
-      <input
-        autoComplete="off"
-        multiple={true}
-        onChange={[Function]}
-        onClick={[Function]}
-        style={
-          Object {
-            "display": "none",
-          }
-        }
-        tabIndex={-1}
-        type="file"
-      />
-      Foo
-    </div>
-  </t>
-</MultipleFileUpload>
+    <input
+      autocomplete="off"
+      multiple=""
+      style="display: none;"
+      tabindex="-1"
+      type="file"
+    />
+    Foo
+  </div>
+</DocumentFragment>
 `;
 
 exports[`MultipleFileUpload renders with expected class names when not horizontal 1`] = `
-<MultipleFileUpload>
-  <t
-    disabled={false}
-    getDataTransferItems={[Function]}
-    maxSize={Infinity}
-    minSize={0}
-    multiple={true}
-    onDropAccepted={[Function]}
-    onDropRejected={[Function]}
-    preventDropOnDocument={true}
+<DocumentFragment>
+  <div
+    class="pf-c-multiple-file-upload"
+    tabindex="0"
   >
-    <div
-      className="pf-c-multiple-file-upload"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onDragEnter={[Function]}
-      onDragLeave={[Function]}
-      onDragOver={[Function]}
-      onDragStart={[Function]}
-      onDrop={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      tabIndex={0}
-    >
-      <input
-        autoComplete="off"
-        multiple={true}
-        onChange={[Function]}
-        onClick={[Function]}
-        style={
-          Object {
-            "display": "none",
-          }
-        }
-        tabIndex={-1}
-        type="file"
-      />
-      Foo
-    </div>
-  </t>
-</MultipleFileUpload>
+    <input
+      autocomplete="off"
+      multiple=""
+      style="display: none;"
+      tabindex="-1"
+      type="file"
+    />
+    Foo
+  </div>
+</DocumentFragment>
 `;