@patternfly/react-core 4.206.5 → 4.208.0

package/src/demos/CardDemos.md

@@ -561,7 +561,14 @@ const AggregateStatusCards: React.FunctionComponent = () => {
                   <a href="#">{count}</a>
                 </FlexItem>
               </Flex>
-              {content.length > 1 && index === 0 && <Divider key={`${index}_d`} isVertical />}
+              {content.length > 1 && index === 0 && (
+                <Divider
+                  key={`${index}_d`}
+                  orientation={{
+                    default: 'vertical'
+                  }}
+                />
+              )}
             </React.Fragment>
           ))}
         </Flex>
@@ -1255,8 +1262,10 @@ const UtilizationCard3: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to <code>baseline</code> alignment.
-      <br /><br />
+      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
+      <code>baseline</code> alignment.
+      <br />
+      <br />
       <Gallery hasGutter minWidths={{ default: '360px' }}>
         <GalleryItem>
           <Card id="utilization-card-1" component="div">
@@ -1507,7 +1516,13 @@ CardNestedDemo = () => {
                       <FlexItem>
                         <b>Temperature</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>64C</span>
                       </FlexItem>
@@ -1571,7 +1586,13 @@ CardNestedDemo = () => {
                       <FlexItem>
                         <b>Speed</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>2.3Ghz</span>
                       </FlexItem>
@@ -1656,7 +1677,13 @@ CardNestedDemo = () => {
                       <FlexItem>
                         <b>Temperature</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>64C</span>
                       </FlexItem>
@@ -1720,7 +1747,13 @@ CardNestedDemo = () => {
                       <FlexItem>
                         <b>Speed</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>2.3Ghz</span>
                       </FlexItem>
@@ -1805,7 +1838,13 @@ CardNestedDemo = () => {
                       <FlexItem>
                         <b>Temperature</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>64C</span>
                       </FlexItem>
@@ -1869,7 +1908,13 @@ CardNestedDemo = () => {
                       <FlexItem>
                         <b>Speed</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>2.3Ghz</span>
                       </FlexItem>
@@ -1994,7 +2039,13 @@ const AccordionCard: React.FunctionComponent = () => {
                       <FlexItem>
                         <b>Temperature</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>64C</span>
                       </FlexItem>
@@ -2058,7 +2109,13 @@ const AccordionCard: React.FunctionComponent = () => {
                       <FlexItem>
                         <b>Speed</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>2.3Ghz</span>
                       </FlexItem>
@@ -2140,7 +2197,13 @@ const AccordionCard: React.FunctionComponent = () => {
                       <FlexItem>
                         <b>Temperature</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>64C</span>
                       </FlexItem>
@@ -2204,7 +2267,13 @@ const AccordionCard: React.FunctionComponent = () => {
                       <FlexItem>
                         <b>Speed</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>2.3Ghz</span>
                       </FlexItem>
@@ -2286,7 +2355,13 @@ const AccordionCard: React.FunctionComponent = () => {
                       <FlexItem>
                         <b>Temperature</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>64C</span>
                       </FlexItem>
@@ -2350,7 +2425,13 @@ const AccordionCard: React.FunctionComponent = () => {
                       <FlexItem>
                         <b>Speed</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>2.3Ghz</span>
                       </FlexItem>
@@ -2444,8 +2525,10 @@ const TrendCard1: React.FunctionComponent = () => {
   ];
   return (
     <React.Fragment>
-      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to <code>baseline</code> alignment.
-      <br /><br />
+      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
+      <code>baseline</code> alignment.
+      <br />
+      <br />
       <Gallery hasGutter minWidths={{ default: '360px' }}>
         <GalleryItem>
           <Card id="trend-card-1" component="div">
@@ -2626,8 +2709,10 @@ CardLogViewDemo = () => {
 
   return (
     <React.Fragment>
-      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to <code>baseline</code> alignment.
-      <br /><br />
+      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
+      <code>baseline</code> alignment.
+      <br />
+      <br />
       <Gallery hasGutter style={{ '--pf-l-gallery--GridTemplateColumns--min': '360px' }}>
         <Card id="card-log-view-example">
           <CardHeader className="pf-u-align-items-flex-start">
@@ -2743,8 +2828,10 @@ CardEventViewDemo = () => {
 
   return (
     <React.Fragment>
-      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to <code>baseline</code> alignment.
-      <br /><br />
+      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
+      <code>baseline</code> alignment.
+      <br />
+      <br />
       <Gallery hasGutter style={{ '--pf-l-gallery--GridTemplateColumns--min': '360px' }}>
         <Card id="card-events-view-example">
           <CardHeader className="pf-u-align-items-flex-start">

package/src/demos/DateTimePicker.md

@@ -13,107 +13,5 @@ In this demo, learn how to use a [CalendarMonth](/components/calendar-month) com
 
 ### Date and time picker
 
-```js
-import React from 'react';
-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('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 onToggleCalendar = () => {
-    setIsCalendarOpen(!isCalendarOpen);
-    setIsTimeOpen(false);
-  };
-
-  const onToggleTime = ev => {
-    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 onSelectTime = ev => {
-    setValueTime(ev.target.value);
-    setIsTimeOpen(!isTimeOpen);
-  };
-
-  const timeOptions = times.map(time => (
-    <DropdownItem key={time} component="button" value={`${time}:00`}>
-      {`${time}:00`}
-    </DropdownItem>
-  ));
-  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}
-    />
-  );
-  const calendarButton = (
-    <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>
-    </div>
-  );
-};
+```ts file="./examples/DateTimePicker/DateTimePicker.tsx"
 ```

package/src/demos/examples/DateTimePicker/DateTimePicker.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+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';
+
+export const DateTimePicker: React.FunctionComponent = () => {
+  const [isCalendarOpen, setIsCalendarOpen] = React.useState(false);
+  const [isTimeOpen, setIsTimeOpen] = React.useState(false);
+  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) =>
+    date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-');
+
+  const onToggleCalendar = () => {
+    setIsCalendarOpen(!isCalendarOpen);
+    setIsTimeOpen(false);
+  };
+
+  const onToggleTime = (_value: boolean, _event: any) => {
+    setIsTimeOpen(!isTimeOpen);
+    setIsCalendarOpen(false);
+  };
+
+  const onSelectCalendar = (newValueDate: Date) => {
+    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: React.SyntheticEvent<HTMLDivElement>) => {
+    setValueTime(ev.currentTarget.textContent);
+    setIsTimeOpen(!isTimeOpen);
+  };
+
+  const timeOptions = times.map(time => (
+    <DropdownItem key={time} component="button" value={`${time}:00`}>
+      {`${time}:00`}
+    </DropdownItem>
+  ));
+
+  const calendar = <CalendarMonth date={new 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}
+    />
+  );
+
+  const calendarButton = (
+    <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="text"
+            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>
 `;