@patternfly/react-core 4.206.5 → 4.208.0

package/src/components/Select/__tests__/__snapshots__/SelectOption.test.tsx.snap

@@ -1,21 +1,234 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SelectOption checked renders with checked successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item\\" role=\\"option\\" type=\\"button\\">test</button>"`;
+exports[`SelectOption checked renders with checked successfully 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-select__menu-wrapper"
+    id="option-1"
+    role="presentation"
+  >
+    <button
+      class="pf-c-select__menu-item"
+      data-testid="test-id"
+      role="option"
+      type="button"
+    >
+      test
+    </button>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`SelectOption disabled renders disabled successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item pf-m-disabled\\" role=\\"option\\" type=\\"button\\">test</button>"`;
+exports[`SelectOption disabled renders disabled successfully 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-select__menu-wrapper"
+    id="option-1"
+    role="presentation"
+  >
+    <button
+      class="pf-c-select__menu-item pf-m-disabled"
+      data-testid="test-id"
+      role="option"
+      type="button"
+    >
+      test
+    </button>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`SelectOption is selected renders selected successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item pf-m-selected\\" role=\\"option\\" aria-selected=\\"true\\" type=\\"button\\">test<span class=\\"pf-c-select__menu-item-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 512 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\\"></path></svg></span></button>"`;
+exports[`SelectOption is selected renders selected successfully 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-select__menu-wrapper"
+    id="option-1"
+    role="presentation"
+  >
+    <button
+      aria-selected="true"
+      class="pf-c-select__menu-item pf-m-selected"
+      data-testid="test-id"
+      role="option"
+      type="button"
+    >
+      test
+      <span
+        class="pf-c-select__menu-item-icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 512 512"
+          width="1em"
+        >
+          <path
+            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+          />
+        </svg>
+      </span>
+    </button>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`SelectOption renders custom component 1`] = `"<div>test display</div>"`;
+exports[`SelectOption renders custom component 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-select__menu-wrapper"
+    id="option-1"
+    role="presentation"
+  >
+    <div
+      class="pf-c-select__menu-item"
+      role="option"
+      type="button"
+    >
+      <div>
+        test display
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`SelectOption renders with custom display and custom user object successfully 1`] = `"<div>test display</div>"`;
+exports[`SelectOption renders with custom display and custom user object successfully 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-select__menu-wrapper"
+    id="option-1"
+    role="presentation"
+  >
+    <button
+      class="pf-c-select__menu-item"
+      role="option"
+      type="button"
+    >
+      <div>
+        test display
+      </div>
+    </button>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`SelectOption renders with custom display successfully 1`] = `"<div>test display</div>"`;
+exports[`SelectOption renders with custom display successfully 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-select__menu-wrapper"
+    id="option-1"
+    role="presentation"
+  >
+    <button
+      class="pf-c-select__menu-item"
+      role="option"
+      type="button"
+    >
+      <div>
+        test display
+      </div>
+    </button>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`SelectOption renders with custom user object successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item\\" role=\\"option\\" type=\\"button\\">Mr.: Test User</button>"`;
+exports[`SelectOption renders with custom user object successfully 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-select__menu-wrapper"
+    id="option-1"
+    role="presentation"
+  >
+    <button
+      class="pf-c-select__menu-item"
+      data-testid="test-id"
+      role="option"
+      type="button"
+    >
+      Mr.: Test User
+    </button>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`SelectOption renders with description successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item pf-m-description\\" role=\\"option\\" type=\\"button\\"><span class=\\"pf-c-select__menu-item-main\\">test</span><span class=\\"pf-c-select__menu-item-description\\">This is a description</span></button>"`;
+exports[`SelectOption renders with description successfully 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-select__menu-wrapper"
+    id="option-1"
+    role="presentation"
+  >
+    <button
+      class="pf-c-select__menu-item pf-m-description"
+      data-testid="test-id"
+      role="option"
+      type="button"
+    >
+      <span
+        class="pf-c-select__menu-item-main"
+      >
+        test
+      </span>
+      <span
+        class="pf-c-select__menu-item-description"
+      >
+        This is a description
+      </span>
+    </button>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`SelectOption renders with item count successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item\\" role=\\"option\\" type=\\"button\\"><span class=\\"pf-c-select__menu-item-row\\"><span class=\\"pf-c-select__menu-item-text\\">test</span><span class=\\"pf-c-select__menu-item-count\\">3</span></span></button>"`;
+exports[`SelectOption renders with item count successfully 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-select__menu-wrapper"
+    id="option-1"
+    role="presentation"
+  >
+    <button
+      class="pf-c-select__menu-item"
+      data-testid="test-id"
+      role="option"
+      type="button"
+    >
+      <span
+        class="pf-c-select__menu-item-row"
+      >
+        <span
+          class="pf-c-select__menu-item-text"
+        >
+          test
+        </span>
+        <span
+          class="pf-c-select__menu-item-count"
+        >
+          3
+        </span>
+      </span>
+    </button>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`SelectOption renders with value parameter successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item\\" role=\\"option\\" type=\\"button\\">test</button>"`;
+exports[`SelectOption renders with value parameter successfully 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-select__menu-wrapper"
+    id="option-1"
+    role="presentation"
+  >
+    <button
+      class="pf-c-select__menu-item"
+      data-testid="test-id"
+      role="option"
+      type="button"
+    >
+      test
+    </button>
+  </li>
+</DocumentFragment>
+`;

package/src/components/SimpleList/__tests__/Generated/SimpleListGroup.test.tsx

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

package/src/components/SimpleList/__tests__/Generated/SimpleListItem.test.tsx

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

package/src/components/SimpleList/__tests__/Generated/__snapshots__/SimpleListGroup.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SimpleListGroup should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <section
     class="pf-c-simple-list__section"
   >
@@ -17,5 +17,5 @@ exports[`SimpleListGroup should match snapshot (auto-generated) 1`] = `
       ReactNode
     </ul>
   </section>
-</div>
+</DocumentFragment>
 `;

package/src/components/SimpleList/__tests__/Generated/__snapshots__/SimpleListItem.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SimpleListItem should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <li
     class="''"
   >
@@ -12,5 +12,5 @@ exports[`SimpleListItem should match snapshot (auto-generated) 1`] = `
       ReactNode
     </button>
   </li>
-</div>
+</DocumentFragment>
 `;

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom';
 
 import { SimpleList } from '../SimpleList';
 import { SimpleListGroup } from '../SimpleListGroup';
@@ -47,7 +46,7 @@ describe('SimpleList', () => {
     render(<SimpleList onSelect={onSelect}>{items}</SimpleList>);
 
     userEvent.click(screen.getByText('Item 1'));
-    expect(onSelect).toBeCalled();
+    expect(onSelect).toHaveBeenCalled();
   });
 
   test('renders anchor content', () => {
@@ -61,7 +60,7 @@ describe('SimpleList', () => {
     render(<SimpleList onSelect={onSelect}>{anchors}</SimpleList>);
 
     userEvent.click(screen.getByText('Item 1'));
-    expect(onSelect).toBeCalled();
+    expect(onSelect).toHaveBeenCalled();
   });
 });
 

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

@@ -4,38 +4,40 @@ import { Skeleton } from '../Skeleton';
 
 describe('skeleton', () => {
   test('default', () => {
-    const view = render(<Skeleton />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Skeleton />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   ['25%', '33%', '50%', '66%', '75%'].forEach((width: string) =>
     test(`skeleton with ${width} width`, () => {
-      const view = render(<Skeleton width={width} />);
-      expect(view.container).toMatchSnapshot();
+      const { asFragment } = render(<Skeleton width={width} />);
+      expect(asFragment()).toMatchSnapshot();
     })
   );
 
   ['25%', '33%', '50%', '66%', '75%', '100%'].forEach((height: string) =>
     test(`skeleton with ${height} height`, () => {
-      const view = render(<Skeleton height={height} />);
-      expect(view.container).toMatchSnapshot();
+      const { asFragment } = render(<Skeleton height={height} />);
+      expect(asFragment()).toMatchSnapshot();
     })
   );
 
   ['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'].forEach((fontSize: string) =>
     test(`skeleton with ${fontSize} font size`, () => {
-      const view = render(<Skeleton fontSize={fontSize as 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'} />);
-      expect(view.container).toMatchSnapshot();
+      const { asFragment } = render(
+        <Skeleton fontSize={fontSize as 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'} />
+      );
+      expect(asFragment()).toMatchSnapshot();
     })
   );
 
   test('circle skeleton', () => {
-    const view = render(<Skeleton shape="circle" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Skeleton shape="circle" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('square skeleton', () => {
-    const view = render(<Skeleton shape="square" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Skeleton shape="square" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`skeleton circle skeleton 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton pf-m-circle"
   >
@@ -9,11 +9,11 @@ exports[`skeleton circle skeleton 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton default 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton"
   >
@@ -21,11 +21,11 @@ exports[`skeleton default 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 2xl font size 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton pf-m-text-2xl"
   >
@@ -33,11 +33,11 @@ exports[`skeleton skeleton with 2xl font size 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 3xl font size 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton pf-m-text-3xl"
   >
@@ -45,11 +45,11 @@ exports[`skeleton skeleton with 3xl font size 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 4xl font size 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton pf-m-text-4xl"
   >
@@ -57,11 +57,11 @@ exports[`skeleton skeleton with 4xl font size 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 25% height 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton"
     style="--pf-c-skeleton--Height: 25%;"
@@ -70,11 +70,11 @@ exports[`skeleton skeleton with 25% height 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 25% width 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton"
     style="--pf-c-skeleton--Width: 25%;"
@@ -83,11 +83,11 @@ exports[`skeleton skeleton with 25% width 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 33% height 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton"
     style="--pf-c-skeleton--Height: 33%;"
@@ -96,11 +96,11 @@ exports[`skeleton skeleton with 33% height 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 33% width 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton"
     style="--pf-c-skeleton--Width: 33%;"
@@ -109,11 +109,11 @@ exports[`skeleton skeleton with 33% width 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 50% height 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton"
     style="--pf-c-skeleton--Height: 50%;"
@@ -122,11 +122,11 @@ exports[`skeleton skeleton with 50% height 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 50% width 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton"
     style="--pf-c-skeleton--Width: 50%;"
@@ -135,11 +135,11 @@ exports[`skeleton skeleton with 50% width 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 66% height 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton"
     style="--pf-c-skeleton--Height: 66%;"
@@ -148,11 +148,11 @@ exports[`skeleton skeleton with 66% height 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 66% width 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton"
     style="--pf-c-skeleton--Width: 66%;"
@@ -161,11 +161,11 @@ exports[`skeleton skeleton with 66% width 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 75% height 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton"
     style="--pf-c-skeleton--Height: 75%;"
@@ -174,11 +174,11 @@ exports[`skeleton skeleton with 75% height 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 75% width 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton"
     style="--pf-c-skeleton--Width: 75%;"
@@ -187,11 +187,11 @@ exports[`skeleton skeleton with 75% width 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 100% height 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton"
     style="--pf-c-skeleton--Height: 100%;"
@@ -200,11 +200,11 @@ exports[`skeleton skeleton with 100% height 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with lg font size 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton pf-m-text-lg"
   >
@@ -212,11 +212,11 @@ exports[`skeleton skeleton with lg font size 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with md font size 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton pf-m-text-md"
   >
@@ -224,11 +224,11 @@ exports[`skeleton skeleton with md font size 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with sm font size 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton pf-m-text-sm"
   >
@@ -236,11 +236,11 @@ exports[`skeleton skeleton with sm font size 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with xl font size 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton pf-m-text-xl"
   >
@@ -248,11 +248,11 @@ exports[`skeleton skeleton with xl font size 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton square skeleton 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton pf-m-square"
   >
@@ -260,5 +260,5 @@ exports[`skeleton square skeleton 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;