@patternfly/react-core 4.206.3 → 4.206.6

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.206.6 (2022-04-27)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+## 4.206.5 (2022-04-26)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+## 4.206.4 (2022-04-25)
+
+
+### Bug Fixes
+
+* **DateTimePicker:** update date placeholder ([#7266](https://github.com/patternfly/patternfly-react/issues/7266)) ([4e9a73e](https://github.com/patternfly/patternfly-react/commit/4e9a73e8f7645b7a885d15754f99b9e078449806))
+
+
+
+
+
 ## 4.206.3 (2022-04-23)
 
 **Note:** Version bump only for package @patternfly/react-core

package/dist/umd/react-core.css

@@ -18179,6 +18179,45 @@ svg.pf-c-spinner.pf-m-xl {
   vertical-align: top;
 }
 
+.pf-c-tab-content {
+  --pf-c-tab-content__body--PaddingTop: 0;
+  --pf-c-tab-content__body--PaddingRight: 0;
+  --pf-c-tab-content__body--PaddingBottom: 0;
+  --pf-c-tab-content__body--PaddingLeft: 0;
+  --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-global--spacer--lg);
+  --pf-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-global--spacer--lg);
+  --pf-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-tab-content--m-light-300: var(--pf-global--BackgroundColor--light-300);
+}
+
+@media screen and (min-width: 1200px) {
+  .pf-c-tab-content {
+    --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-c-tab-content__body--m-padding--xl--PaddingTop);
+    --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-c-tab-content__body--m-padding--xl--PaddingRight);
+    --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-c-tab-content__body--m-padding--xl--PaddingBottom);
+    --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-c-tab-content__body--m-padding--xl--PaddingLeft);
+  }
+}
+.pf-c-tab-content.pf-m-light-300 {
+  background-color: var(--pf-c-tab-content--m-light-300);
+}
+
+.pf-c-tab-content__body {
+  padding: var(--pf-c-tab-content__body--PaddingTop) var(--pf-c-tab-content__body--PaddingRight) var(--pf-c-tab-content__body--PaddingBottom) var(--pf-c-tab-content__body--PaddingLeft);
+}
+
+.pf-c-tab-content__body.pf-m-padding {
+  --pf-c-tab-content__body--PaddingTop: var(--pf-c-tab-content__body--m-padding--PaddingTop);
+  --pf-c-tab-content__body--PaddingRight: var(--pf-c-tab-content__body--m-padding--PaddingRight);
+  --pf-c-tab-content__body--PaddingBottom: var(--pf-c-tab-content__body--m-padding--PaddingBottom);
+  --pf-c-tab-content__body--PaddingLeft: var(--pf-c-tab-content__body--m-padding--PaddingLeft);
+}
+
 .pf-c-tabs {
   --pf-c-tabs--inset: 0;
   --pf-c-tabs--Width: auto;
@@ -19100,45 +19139,6 @@ svg.pf-c-spinner.pf-m-xl {
     --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--2xl);
   }
 }
-.pf-c-tab-content {
-  --pf-c-tab-content__body--PaddingTop: 0;
-  --pf-c-tab-content__body--PaddingRight: 0;
-  --pf-c-tab-content__body--PaddingBottom: 0;
-  --pf-c-tab-content__body--PaddingLeft: 0;
-  --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-global--spacer--lg);
-  --pf-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-global--spacer--lg);
-  --pf-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-global--spacer--lg);
-  --pf-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-global--spacer--lg);
-  --pf-c-tab-content--m-light-300: var(--pf-global--BackgroundColor--light-300);
-}
-
-@media screen and (min-width: 1200px) {
-  .pf-c-tab-content {
-    --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-c-tab-content__body--m-padding--xl--PaddingTop);
-    --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-c-tab-content__body--m-padding--xl--PaddingRight);
-    --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-c-tab-content__body--m-padding--xl--PaddingBottom);
-    --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-c-tab-content__body--m-padding--xl--PaddingLeft);
-  }
-}
-.pf-c-tab-content.pf-m-light-300 {
-  background-color: var(--pf-c-tab-content--m-light-300);
-}
-
-.pf-c-tab-content__body {
-  padding: var(--pf-c-tab-content__body--PaddingTop) var(--pf-c-tab-content__body--PaddingRight) var(--pf-c-tab-content__body--PaddingBottom) var(--pf-c-tab-content__body--PaddingLeft);
-}
-
-.pf-c-tab-content__body.pf-m-padding {
-  --pf-c-tab-content__body--PaddingTop: var(--pf-c-tab-content__body--m-padding--PaddingTop);
-  --pf-c-tab-content__body--PaddingRight: var(--pf-c-tab-content__body--m-padding--PaddingRight);
-  --pf-c-tab-content__body--PaddingBottom: var(--pf-c-tab-content__body--m-padding--PaddingBottom);
-  --pf-c-tab-content__body--PaddingLeft: var(--pf-c-tab-content__body--m-padding--PaddingLeft);
-}
-
 .pf-c-content {
   --pf-c-content--MarginBottom: var(--pf-global--spacer--md);
   --pf-c-content--LineHeight: var(--pf-global--LineHeight--md);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.206.3",
+  "version": "4.206.6",
   "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.3",
-    "@patternfly/react-styles": "^4.56.3",
-    "@patternfly/react-tokens": "^4.58.3",
+    "@patternfly/react-icons": "^4.57.6",
+    "@patternfly/react-styles": "^4.56.6",
+    "@patternfly/react-tokens": "^4.58.6",
     "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": "626f964eb2406efd476a85071138f088cad6b042"
+  "gitHead": "5e76a80a71eb15e178e22d50d422768884af51b2"
 }

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>
 `;