@patternfly/react-core 4.206.3 → 4.206.6

package/src/demos/DateTimePicker.md

@@ -15,18 +15,28 @@ In this demo, learn how to use a [CalendarMonth](/components/calendar-month) com
 
 ```js
 import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem, CalendarMonth, InputGroup, TextInput, Button, Popover } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownToggle,
+  DropdownItem,
+  CalendarMonth,
+  InputGroup,
+  TextInput,
+  Button,
+  Popover
+} from '@patternfly/react-core';
 import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
 import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
 
 DateTimePicker = () => {
   const [isCalendarOpen, setIsCalendarOpen] = React.useState(false);
   const [isTimeOpen, setIsTimeOpen] = React.useState(false);
-  const [valueDate, setValueDate] = React.useState("YYYY-MM-DD");
-  const [valueTime, setValueTime] = React.useState("HH:MM");
+  const [valueDate, setValueDate] = React.useState('MM-DD-YYYY');
+  const [valueTime, setValueTime] = React.useState('HH:MM');
   const times = Array.from(new Array(10), (_, i) => i + 8);
-  const defaultTime = "0:00";
-  const dateFormat = date => date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g,'-');
+  const defaultTime = '0:00';
+  const dateFormat = date =>
+    date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-');
 
   const onToggleCalendar = () => {
     setIsCalendarOpen(!isCalendarOpen);
@@ -34,69 +44,75 @@ DateTimePicker = () => {
   };
 
   const onToggleTime = ev => {
-      setIsTimeOpen(!isTimeOpen);
-      setIsCalendarOpen(false);
+    setIsTimeOpen(!isTimeOpen);
+    setIsCalendarOpen(false);
   };
 
   const onSelectCalendar = newValueDate => {
-      const newValue = dateFormat(newValueDate);
-      setValueDate(newValue);
-      setIsCalendarOpen(!isCalendarOpen);
-      // setting default time when it is not picked
-      if (valueTime === "HH:MM") {
-          setValueTime(defaultTime);
-      }
+    const newValue = dateFormat(newValueDate);
+    setValueDate(newValue);
+    setIsCalendarOpen(!isCalendarOpen);
+    // setting default time when it is not picked
+    if (valueTime === 'HH:MM') {
+      setValueTime(defaultTime);
+    }
   };
 
   const onSelectTime = ev => {
-      setValueTime(ev.target.value);
-      setIsTimeOpen(!isTimeOpen);
+    setValueTime(ev.target.value);
+    setIsTimeOpen(!isTimeOpen);
   };
 
   const timeOptions = times.map(time => (
-      <DropdownItem key={time} component="button" value={`${time}:00`}>
-        {`${time}:00`}
-      </DropdownItem>
+    <DropdownItem key={time} component="button" value={`${time}:00`}>
+      {`${time}:00`}
+    </DropdownItem>
   ));
-  const calendar = (
-      <CalendarMonth
-        date={valueDate}
-        onChange={onSelectCalendar}
-      />
-  );
+  const calendar = <CalendarMonth date={valueDate} onChange={onSelectCalendar} />;
   const time = (
-      <Dropdown
-        onSelect={onSelectTime}
-        toggle={
-          <DropdownToggle aria-label="Toggle the time picker menu" toggleIndicator={null} onToggle={onToggleTime} style={{ padding: '6px 16px' }}>
-            <OutlinedClockIcon />
-          </DropdownToggle>
-        }
-        isOpen={isTimeOpen}
-        dropdownItems={timeOptions}
+    <Dropdown
+      onSelect={onSelectTime}
+      toggle={
+        <DropdownToggle
+          aria-label="Toggle the time picker menu"
+          toggleIndicator={null}
+          onToggle={onToggleTime}
+          style={{ padding: '6px 16px' }}
+        >
+          <OutlinedClockIcon />
+        </DropdownToggle>
+      }
+      isOpen={isTimeOpen}
+      dropdownItems={timeOptions}
     />
   );
   const calendarButton = (
-      <Button variant="control" aria-label="Toggle the calendar" onClick={onToggleCalendar}>
-          <OutlinedCalendarAltIcon />
-      </Button>
+    <Button variant="control" aria-label="Toggle the calendar" onClick={onToggleCalendar}>
+      <OutlinedCalendarAltIcon />
+    </Button>
   );
   return (
     <div style={{ width: '300px' }}>
-        <Popover
-            position="bottom"
-            bodyContent={calendar}
-            showClose={false}
-            isVisible={isCalendarOpen}
-            hasNoPadding
-            hasAutoWidth
-        >
-            <InputGroup>
-                <TextInput type="'datetime-local" id="date-time" aria-label="date and time picker demo" value={valueDate + ' ' + valueTime} isReadOnly/>
-                {calendarButton}
-                {time}
-            </InputGroup>
-        </Popover>
+      <Popover
+        position="bottom"
+        bodyContent={calendar}
+        showClose={false}
+        isVisible={isCalendarOpen}
+        hasNoPadding
+        hasAutoWidth
+      >
+        <InputGroup>
+          <TextInput
+            type="'datetime-local"
+            id="date-time"
+            aria-label="date and time picker demo"
+            value={valueDate + ' ' + valueTime}
+            isReadOnly
+          />
+          {calendarButton}
+          {time}
+        </InputGroup>
+      </Popover>
     </div>
   );
 };

package/src/helpers/FocusTrap/__tests__/Generated/FocusTrap.test.tsx

@@ -6,7 +6,7 @@ import { render } from '@testing-library/react';
 import { FocusTrap } from '../../FocusTrap';
 
 it('FocusTrap should match snapshot (auto-generated)', () => {
-  const view = render(
+  const { asFragment } = render(
     <FocusTrap
       children={<div>ReactNode</div>}
       className={'string'}
@@ -15,5 +15,5 @@ it('FocusTrap should match snapshot (auto-generated)', () => {
       focusTrapOptions={undefined}
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/helpers/FocusTrap/__tests__/Generated/__snapshots__/FocusTrap.test.tsx.snap

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

package/src/helpers/GenerateId/__tests__/GenerateId.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import { GenerateId } from '../GenerateId';
 
 test('generates id', () => {
-  const view = render(<GenerateId>{id => <div id={id}>div with random ID</div>}</GenerateId>);
+  const { asFragment } = render(<GenerateId>{id => <div id={id}>div with random ID</div>}</GenerateId>);
 
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/helpers/GenerateId/__tests__/__snapshots__/GenerateId.test.tsx.snap

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`generates id 1`] = `
-<div>
+<DocumentFragment>
   <div
     id="pf-random-id-0"
   >
     div with random ID
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/helpers/Popper/__tests__/Generated/FindRefWrapper.test.tsx

@@ -6,6 +6,6 @@ import { render } from '@testing-library/react';
 import { FindRefWrapper } from '../../FindRefWrapper';
 
 it('FindRefWrapper should match snapshot (auto-generated)', () => {
-  const view = render(<FindRefWrapper children={<div>ReactNode</div>} onFoundRef={(foundRef: any) => {}} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<FindRefWrapper children={<div>ReactNode</div>} onFoundRef={(foundRef: any) => {}} />);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/helpers/Popper/__tests__/Generated/__snapshots__/FindRefWrapper.test.tsx.snap

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

package/src/helpers/__tests__/util.test.ts

@@ -11,7 +11,7 @@ import {
 import { SIDE } from '../constants';
 import styles from '@patternfly/react-styles/css/layouts/Flex/flex';
 
-const createMockHtmlElement = bounds =>
+const createMockHtmlElement = (bounds: Partial<DOMRect>) =>
   ({
     getBoundingClientRect: () => bounds
   } as HTMLElement);
@@ -43,7 +43,7 @@ test('debounce', () => {
     debouncedFunction();
   }
 
-  expect(callback).toBeCalledTimes(10);
+  expect(callback).toHaveBeenCalledTimes(10);
 });
 
 test('isElementInView should be true when partial out of view and with partial true', () => {

package/src/layouts/Bullseye/__tests__/Bullseye.test.tsx

@@ -1,8 +1,5 @@
 import React from 'react';
-
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-
 import { Bullseye } from '../Bullseye';
 
 describe('Bullseye', () => {
@@ -12,7 +9,7 @@ describe('Bullseye', () => {
   });
 
   test('className is added to the root element', () => {
-    render(<Bullseye className="extra-class" data-testid='test-id' />);
+    render(<Bullseye className="extra-class" data-testid="test-id" />);
     expect(screen.getByTestId('test-id')).toHaveClass('extra-class');
   });
 

package/src/layouts/Flex/__tests__/Flex.test.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
 
 import { Flex } from '../Flex';
 import { FlexItem } from '../FlexItem';

package/src/layouts/Flex/__tests__/Generated/FlexItem.test.tsx

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

package/src/layouts/Flex/__tests__/Generated/__snapshots__/FlexItem.test.tsx.snap

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

package/src/layouts/Gallery/__tests__/Gallery.test.tsx

@@ -4,12 +4,12 @@ import { GalleryItem } from '../GalleryItem';
 import { render } from '@testing-library/react';
 
 test('gutter', () => {
-  const view = render(<Gallery hasGutter />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<Gallery hasGutter />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('gutter breakpoints', () => {
-  const view = render(
+  const { asFragment } = render(
     <Gallery
       hasGutter
       minWidths={{
@@ -23,14 +23,14 @@ test('gutter breakpoints', () => {
       }}
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('alternative component', () => {
-  const view = render(
-    <Gallery component='ul'>
-      <GalleryItem component='li'>Test</GalleryItem>
+  const { asFragment } = render(
+    <Gallery component="ul">
+      <GalleryItem component="li">Test</GalleryItem>
     </Gallery>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/layouts/Gallery/__tests__/Generated/GalleryItem.test.tsx

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

package/src/layouts/Gallery/__tests__/Generated/__snapshots__/GalleryItem.test.tsx.snap

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

package/src/layouts/Gallery/__tests__/__snapshots__/Gallery.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`alternative component 1`] = `
-<div>
+<DocumentFragment>
   <ul
     class="pf-l-gallery"
   >
@@ -9,22 +9,22 @@ exports[`alternative component 1`] = `
       Test
     </li>
   </ul>
-</div>
+</DocumentFragment>
 `;
 
 exports[`gutter 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-l-gallery pf-m-gutter"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`gutter breakpoints 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-l-gallery pf-m-gutter"
     style="--pf-l-gallery--GridTemplateColumns--min: 100%; --pf-l-gallery--GridTemplateColumns--min-on-md: 100px; --pf-l-gallery--GridTemplateColumns--min-on-xl: 300px; --pf-l-gallery--GridTemplateColumns--max-on-md: 200px; --pf-l-gallery--GridTemplateColumns--max-on-xl: 1fr;"
   />
-</div>
+</DocumentFragment>
 `;

package/src/layouts/Grid/__tests__/Grid.test.tsx

@@ -4,15 +4,15 @@ import { GridItem } from '../GridItem';
 import { render } from '@testing-library/react';
 
 test('gutter', () => {
-  const view = render(<Grid hasGutter />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<Grid hasGutter />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('alternative component', () => {
-  const view = render(
-    <Grid component='ul'>
-      <GridItem component='li'>Test</GridItem>
+  const { asFragment } = render(
+    <Grid component="ul">
+      <GridItem component="li">Test</GridItem>
     </Grid>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/layouts/Grid/__tests__/GridItem.test.tsx

@@ -4,36 +4,36 @@ import { render } from '@testing-library/react';
 import { DeviceSizes } from '../../../styles/sizes';
 
 test('adds span class', () => {
-  const view = render(<GridItem span={4} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<GridItem span={4} />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('adds offset class', () => {
-  const view = render(<GridItem offset={4} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<GridItem offset={4} />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('adds row class', () => {
-  const view = render(<GridItem rowSpan={4} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<GridItem rowSpan={4} />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 Object.keys(DeviceSizes).forEach(size => {
   test(`adds ${size} span class`, () => {
     const props = { [size]: 4 };
-    const view = render(<GridItem {...props} />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<GridItem {...props} />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test(`adds ${size} offset classes`, () => {
     const props = { [`${size}Offset`]: 1 };
-    const view = render(<GridItem {...props} />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<GridItem {...props} />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test(`adds ${size} row classes`, () => {
     const props = { [`${size}RowSpan`]: 1 };
-    const view = render(<GridItem {...props} />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<GridItem {...props} />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/layouts/Grid/__tests__/__snapshots__/Grid.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`alternative component 1`] = `
-<div>
+<DocumentFragment>
   <ul
     class="pf-l-grid"
   >
@@ -11,13 +11,13 @@ exports[`alternative component 1`] = `
       Test
     </li>
   </ul>
-</div>
+</DocumentFragment>
 `;
 
 exports[`gutter 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-l-grid pf-m-gutter"
   />
-</div>
+</DocumentFragment>
 `;