@patternfly/react-core 4.206.4 → 4.207.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.206.4",
+  "version": "4.207.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",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.57.4",
-    "@patternfly/react-styles": "^4.56.4",
-    "@patternfly/react-tokens": "^4.58.4",
+    "@patternfly/react-icons": "^4.58.0",
+    "@patternfly/react-styles": "^4.57.0",
+    "@patternfly/react-tokens": "^4.59.0",
     "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": "cc80f358e790331d92df19b49df25488b095265b"
+  "gitHead": "70622790d9c915dfa53396a29fafb8d1e888f3cf"
 }

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

@@ -19,7 +19,7 @@ describe('AboutModal', () => {
     render(<AboutModal {...props} isOpen />);
 
     userEvent.type(screen.getByRole('dialog'), '{esc}');
-    expect(props.onClose).toBeCalled();
+    expect(props.onClose).toHaveBeenCalled();
   });
 
   test('does not render the modal when isOpen is not specified', () => {
@@ -48,6 +48,6 @@ describe('AboutModal', () => {
     global.console = { error: myMock } as any;
 
     render(<AboutModal {...noImgAltrops}>Test About Modal</AboutModal>);
-    expect(myMock).toBeCalled();
+    expect(myMock).toHaveBeenCalled();
   });
 });

package/src/components/AboutModal/__tests__/AboutModalBox.test.tsx

@@ -3,10 +3,10 @@ import { render } from '@testing-library/react';
 import { AboutModalBox } from '../AboutModalBox';
 
 test('AboutModalBox Test', () => {
-  const view = render(
+  const { asFragment } = render(
     <AboutModalBox aria-labelledby="id" aria-describedby="id2">
       This is a AboutModalBox
     </AboutModalBox>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/AboutModal/__tests__/AboutModalBoxBrand.test.tsx

@@ -3,6 +3,6 @@ import { render } from '@testing-library/react';
 import { AboutModalBoxBrand } from '../AboutModalBoxBrand';
 
 test('test About Modal Brand', () => {
-  const view = render(<AboutModalBoxBrand src="testimage.." alt="brand" />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<AboutModalBoxBrand src="testimage.." alt="brand" />);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/AboutModal/__tests__/AboutModalBoxCloseButton.test.tsx

@@ -3,18 +3,18 @@ import { render } from '@testing-library/react';
 import { AboutModalBoxCloseButton } from '../AboutModalBoxCloseButton';
 
 test('AboutModalBoxCloseButton Test', () => {
-  const view = render(<AboutModalBoxCloseButton />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<AboutModalBoxCloseButton />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('AboutModalBoxCloseButton Test onclose', () => {
   const onClose = jest.fn();
-  const view = render(<AboutModalBoxCloseButton onClose={onClose} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<AboutModalBoxCloseButton onClose={onClose} />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('AboutModalBoxCloseButton Test close button aria label', () => {
   const closeButtonAriaLabel = 'Klose Daylok';
-  const view = render(<AboutModalBoxCloseButton aria-label={closeButtonAriaLabel} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<AboutModalBoxCloseButton aria-label={closeButtonAriaLabel} />);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/AboutModal/__tests__/AboutModalBoxContent.test.tsx

@@ -3,10 +3,10 @@ import { render } from '@testing-library/react';
 import { AboutModalBoxContent } from '../AboutModalBoxContent';
 
 test('AboutModalBoxContent Test', () => {
-  const view = render(
+  const { asFragment } = render(
     <AboutModalBoxContent trademark="trademark" id="id">
       This is a AboutModalBoxContent
     </AboutModalBoxContent>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/AboutModal/__tests__/AboutModalBoxHeader.test.tsx

@@ -3,10 +3,10 @@ import { render } from '@testing-library/react';
 import { AboutModalBoxHeader } from '../AboutModalBoxHeader';
 
 test('AboutModalBoxHeader Test', () => {
-  const view = render(
+  const { asFragment } = render(
     <AboutModalBoxHeader productName="Product Name" id="id">
       This is a AboutModalBox header
     </AboutModalBoxHeader>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/AboutModal/__tests__/AboutModalBoxHero.test.tsx

@@ -3,6 +3,6 @@ import { render } from '@testing-library/react';
 import { AboutModalBoxHero } from '../AboutModalBoxHero';
 
 test('test About Modal Box SHero', () => {
-  const view = render(<AboutModalBoxHero />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<AboutModalBoxHero />);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/AboutModal/__tests__/AboutModalContainer.test.tsx

@@ -10,27 +10,29 @@ const props = {
   brandImageAlt: 'Brand Image',
   backgroundImageSrc: 'backgroundImageSrc...',
   'aria-labelledby': 'ariaLablledbyId',
-  'aria-describedby': 'ariaDescribedById'
+  'aria-describedby': 'ariaDescribedById',
+  aboutModalBoxHeaderId: 'header-id',
+  aboutModalBoxContentId: 'content-id'
 };
 test('About Modal Container Test simple', () => {
-  const view = render(<AboutModalContainer {...props}>This is ModalBox content</AboutModalContainer>);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<AboutModalContainer {...props}>This is ModalBox content</AboutModalContainer>);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('About Modal Container Test isOpen', () => {
-  const view = render(
+  const { asFragment } = render(
     <AboutModalContainer title="Test Modal Container title" {...props} isOpen>
       This is ModalBox content
     </AboutModalContainer>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('About Modal Container Test with onlose', () => {
-  const view = render(
+  const { asFragment } = render(
     <AboutModalContainer onClose={() => undefined} {...props}>
       This is ModalBox content
     </AboutModalContainer>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBox.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AboutModalBox Test 1`] = `
-<div>
+<DocumentFragment>
   <div
     aria-describedby="id2"
     aria-labelledby="id"
@@ -11,5 +11,5 @@ exports[`AboutModalBox Test 1`] = `
   >
     This is a AboutModalBox
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxBrand.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`test About Modal Brand 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-about-modal-box__brand"
   >
@@ -11,5 +11,5 @@ exports[`test About Modal Brand 1`] = `
       src="testimage.."
     />
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AboutModalBoxCloseButton Test 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-about-modal-box__close"
   >
@@ -29,11 +29,11 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
       </svg>
     </button>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-about-modal-box__close"
   >
@@ -61,11 +61,11 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
       </svg>
     </button>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`AboutModalBoxCloseButton Test onclose 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-about-modal-box__close"
   >
@@ -93,5 +93,5 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
       </svg>
     </button>
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxContent.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AboutModalBoxContent Test 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-about-modal-box__content"
     id="id"
@@ -21,5 +21,5 @@ exports[`AboutModalBoxContent Test 1`] = `
       trademark
     </p>
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxHeader.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AboutModalBoxHeader Test 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-about-modal-box__header"
   >
@@ -15,5 +15,5 @@ exports[`AboutModalBoxHeader Test 1`] = `
       Product Name
     </h1>
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxHero.test.tsx.snap

@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`test About Modal Box SHero 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-about-modal-box__hero"
     style="--pf-c-about-modal-box__hero--sm--BackgroundImage: url(undefined);"
   />
-</div>
+</DocumentFragment>
 `;

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalContainer.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`About Modal Container Test isOpen 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-backdrop"
   >
@@ -9,6 +9,8 @@ exports[`About Modal Container Test isOpen 1`] = `
       class="pf-l-bullseye"
     >
       <div
+        aria-describedby="content-id"
+        aria-labelledby="header-id"
         aria-modal="true"
         class="pf-c-about-modal-box"
         role="dialog"
@@ -57,6 +59,7 @@ exports[`About Modal Container Test isOpen 1`] = `
             data-ouia-component-id="OUIA-Generated-Title-1"
             data-ouia-component-type="PF4/Title"
             data-ouia-safe="true"
+            id="header-id"
           >
             Product Name
           </h1>
@@ -65,6 +68,7 @@ exports[`About Modal Container Test isOpen 1`] = `
           aria-describedby="ariaDescribedById"
           aria-labelledby="ariaLablledbyId"
           class="pf-c-about-modal-box__content"
+          id="content-id"
           title="Test Modal Container title"
         >
           <div
@@ -89,9 +93,9 @@ exports[`About Modal Container Test isOpen 1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`About Modal Container Test simple 1`] = `<div />`;
+exports[`About Modal Container Test simple 1`] = `<DocumentFragment />`;
 
-exports[`About Modal Container Test with onlose 1`] = `<div />`;
+exports[`About Modal Container Test with onlose 1`] = `<DocumentFragment />`;

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

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
 
 import { Accordion } from '../Accordion';
 import { AccordionToggle } from '../AccordionToggle';
@@ -11,12 +10,12 @@ import { AccordionExpandedContentBody } from '../AccordionExpandedContentBody';
 
 describe('Accordion', () => {
   test('Accordion default', () => {
-    const view = render(<Accordion aria-label="this is a simple accordion" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Accordion aria-label="this is a simple accordion" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Accordion with non-default headingLevel', () => {
-    const view = render(
+    const { asFragment } = render(
       <Accordion asDefinitionList={false} headingLevel="h2">
         <AccordionItem>
           <AccordionToggle id="item-1">Item One</AccordionToggle>
@@ -24,7 +23,7 @@ describe('Accordion', () => {
         </AccordionItem>
       </Accordion>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('It should pass optional aria props', () => {
@@ -35,9 +34,9 @@ describe('Accordion', () => {
     );
     const button = screen.getByRole('button');
 
-    expect(button.getAttribute('aria-label')).toEqual('Toggle details for');
-    expect(button.getAttribute('aria-labelledby')).toEqual('ex-toggle2 ex-item2');
-    expect(button.getAttribute('aria-expanded')).toEqual('false');
+    expect(button).toHaveAttribute('aria-label', 'Toggle details for');
+    expect(button).toHaveAttribute('aria-labelledby', 'ex-toggle2 ex-item2');
+    expect(button).toHaveAttribute('aria-expanded', 'false');
   });
 
   test('Toggle expanded', () => {
@@ -48,14 +47,14 @@ describe('Accordion', () => {
     );
     const button = screen.getByRole('button');
 
-    expect(button.getAttribute('aria-expanded')).toEqual('true');
-    expect(button.className).toContain('pf-m-expanded');
+    expect(button).toHaveAttribute('aria-expanded', 'true');
+    expect(button).toHaveClass('pf-m-expanded');
   });
 
   test('renders content with custom Toggle and Content containers', () => {
     const container = 'a';
 
-    const view = render(
+    const { asFragment } = render(
       <Accordion headingLevel="h2">
         <AccordionItem>
           <AccordionToggle id="item-1" component={container}>
@@ -71,7 +70,7 @@ describe('Accordion', () => {
   });
 
   test('Accordion bordered', () => {
-    const view = render(
+    const { asFragment } = render(
       <Accordion isBordered>
         <AccordionItem>
           <AccordionToggle id="item-1">Item One</AccordionToggle>
@@ -79,11 +78,11 @@ describe('Accordion', () => {
         </AccordionItem>
       </Accordion>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Accordion display large', () => {
-    const view = render(
+    const { asFragment } = render(
       <Accordion displaySize="large">
         <AccordionItem>
           <AccordionToggle id="item-1">Item One</AccordionToggle>
@@ -91,11 +90,11 @@ describe('Accordion', () => {
         </AccordionItem>
       </Accordion>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Accordion custom content', () => {
-    const view = render(
+    const { asFragment } = render(
       <Accordion>
         <AccordionItem>
           <AccordionToggle id="item-1">Item One</AccordionToggle>
@@ -106,6 +105,6 @@ describe('Accordion', () => {
         </AccordionItem>
       </Accordion>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/Accordion/__tests__/Generated/AccordionContent.test.tsx

@@ -8,7 +8,7 @@ import { AccordionContent } from '../../AccordionContent';
 import {} from '../..';
 
 it('AccordionContent should match snapshot (auto-generated)', () => {
-  const view = render(
+  const { asFragment } = render(
     <AccordionContent
       children={<>ReactNode</>}
       className={"''"}
@@ -19,5 +19,5 @@ it('AccordionContent should match snapshot (auto-generated)', () => {
       component={() => <div />}
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Accordion/__tests__/Generated/AccordionItem.test.tsx

@@ -8,6 +8,6 @@ import { AccordionItem } from '../../AccordionItem';
 import {} from '../..';
 
 it('AccordionItem should match snapshot (auto-generated)', () => {
-  const view = render(<AccordionItem children={<>ReactNode</>} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<AccordionItem children={<>ReactNode</>} />);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Accordion/__tests__/Generated/AccordionToggle.test.tsx

@@ -8,7 +8,7 @@ import { AccordionToggle } from '../../AccordionToggle';
 import {} from '../..';
 
 it('AccordionToggle should match snapshot (auto-generated)', () => {
-  const view = render(
+  const { asFragment } = render(
     <AccordionToggle
       children={<>ReactNode</>}
       className={"''"}
@@ -17,5 +17,5 @@ it('AccordionToggle should match snapshot (auto-generated)', () => {
       component={() => <div />}
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionContent.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AccordionContent should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <div />
-</div>
+</DocumentFragment>
 `;

package/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionItem.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AccordionItem should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   ReactNode
-</div>
+</DocumentFragment>
 `;

package/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionToggle.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AccordionToggle should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <div />
-</div>
+</DocumentFragment>
 `;

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Accordion Accordion bordered 1`] = `
-<div>
+<DocumentFragment>
   <dl
     aria-label=""
     class="pf-c-accordion pf-m-bordered"
@@ -49,11 +49,11 @@ exports[`Accordion Accordion bordered 1`] = `
       </div>
     </dd>
   </dl>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Accordion Accordion custom content 1`] = `
-<div>
+<DocumentFragment>
   <dl
     aria-label=""
     class="pf-c-accordion"
@@ -106,20 +106,20 @@ exports[`Accordion Accordion custom content 1`] = `
       </div>
     </dd>
   </dl>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Accordion Accordion default 1`] = `
-<div>
+<DocumentFragment>
   <dl
     aria-label="this is a simple accordion"
     class="pf-c-accordion"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`Accordion Accordion display large 1`] = `
-<div>
+<DocumentFragment>
   <dl
     aria-label=""
     class="pf-c-accordion pf-m-display-lg"
@@ -167,11 +167,11 @@ exports[`Accordion Accordion display large 1`] = `
       </div>
     </dd>
   </dl>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Accordion Accordion with non-default headingLevel 1`] = `
-<div>
+<DocumentFragment>
   <div
     aria-label=""
     class="pf-c-accordion"
@@ -219,5 +219,5 @@ exports[`Accordion Accordion with non-default headingLevel 1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;

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

@@ -4,11 +4,11 @@ import { ActionList } from '../ActionList';
 
 describe('action list', () => {
   test('renders successfully', () => {
-    const view = render(<ActionList>test</ActionList>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<ActionList>test</ActionList>);
+    expect(asFragment()).toMatchSnapshot();
   });
   test('isIconList flag adds modifier', () => {
-    const view = render(<ActionList isIconList>test</ActionList>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<ActionList isIconList>test</ActionList>);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/ActionList/__tests__/ActionListGroup.test.tsx

@@ -4,7 +4,7 @@ import { ActionListGroup } from '../ActionListGroup';
 
 describe('action list group', () => {
   test('renders successfully', () => {
-    const view = render(<ActionListGroup>test</ActionListGroup>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<ActionListGroup>test</ActionListGroup>);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/ActionList/__tests__/ActionListItem.test.tsx

@@ -4,7 +4,7 @@ import { ActionListItem } from '../ActionListItem';
 
 describe('action list item', () => {
   test('renders successfully', () => {
-    const view = render(<ActionListItem>test</ActionListItem>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<ActionListItem>test</ActionListItem>);
+    expect(asFragment()).toMatchSnapshot();
   });
 });