@patternfly/react-core 6.0.0-alpha.4 → 6.0.0-alpha.40

package/src/next/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap

@@ -0,0 +1,128 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modal Content Test description 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-backdrop"
+  >
+    <div
+      class="pf-v6-l-bullseye"
+    >
+      <div
+        aria-modal="true"
+        class="pf-v6-c-modal-box"
+        data-ouia-component-type="PF5/ModalContent"
+        data-ouia-safe="true"
+        descriptorid="descriptorId"
+        id="boxId"
+        labelid="labelId"
+        role="dialog"
+      >
+        This is a ModalBox header
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Modal Content Test isOpen 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-backdrop"
+  >
+    <div
+      class="pf-v6-l-bullseye"
+    >
+      <div
+        aria-modal="true"
+        class="pf-v6-c-modal-box"
+        data-ouia-component-type="PF5/ModalContent"
+        data-ouia-safe="true"
+        descriptorid="descriptorId"
+        id="boxId"
+        labelid="labelId"
+        role="dialog"
+      >
+        This is a ModalBox header
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Modal Content Test only body 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-backdrop"
+  >
+    <div
+      class="pf-v6-l-bullseye"
+    >
+      <div
+        aria-modal="true"
+        class="pf-v6-c-modal-box"
+        data-ouia-component-type="PF5/ModalContent"
+        data-ouia-safe="true"
+        descriptorid="descriptorId"
+        id="boxId"
+        labelid="labelId"
+        role="dialog"
+      >
+        This is a ModalBox header
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Modal Content Test with onclose 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-backdrop"
+  >
+    <div
+      class="pf-v6-l-bullseye"
+    >
+      <div
+        aria-modal="true"
+        class="pf-v6-c-modal-box pf-m-lg"
+        data-ouia-component-type="PF5/ModalContent"
+        data-ouia-safe="true"
+        descriptorid="descriptorId"
+        id="boxId"
+        labelid="labelId"
+        role="dialog"
+      >
+        <div
+          class="pf-v6-c-modal-box__close"
+        >
+          <button
+            aria-disabled="false"
+            aria-label="Close"
+            class="pf-v6-c-button pf-m-plain"
+            data-ouia-component-id="OUIA-Generated-Button-plain-1"
+            data-ouia-component-type="PF5/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 352 512"
+              width="1em"
+            >
+              <path
+                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+              />
+            </svg>
+          </button>
+        </div>
+        This is a ModalBox header
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/next/components/Modal/__tests__/__snapshots__/ModalFooter.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalFooter Test 1`] = `
+<DocumentFragment>
+  <footer
+    class="pf-v6-c-modal-box__footer test-box-footer-class"
+  >
+    This is a ModalBox Footer
+  </footer>
+</DocumentFragment>
+`;

package/src/next/components/Modal/examples/Modal.md

@@ -0,0 +1,148 @@
+---
+id: Modal
+section: components
+cssPrefix: pf-v5-c-modal-box
+propComponents: ['Modal', 'ModalBody', 'ModalHeader', 'ModalFooter']
+ouia: true
+beta: true
+---
+
+import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
+import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
+import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import formStyles from '@patternfly/react-styles/css/components/Form/form';
+
+## Examples
+
+### Basic modals
+
+Basic modals give users the option to either confirm or cancel an action. 
+
+To flag an open modal, use the `isOpen` property. To execute a callback when a modal is closed, use the `onClose` property.
+
+A modal must have a `<ModalBody>`, containing the main content of the modal. The `<ModalHeader>` and `<ModalFooter>` components are not required, but are typically used to display the modal title and any button actions, respectively. 
+
+```ts file="./ModalBasic.tsx"
+
+```
+
+### Scrollable modals
+
+To enable keyboard-accessible scrolling of a modal’s content, pass `tabIndex={0}` to the `<ModalBody>`.
+
+```ts file="ModalWithOverflowingContent.tsx"
+
+```
+
+### With a static description
+
+To provide additional information about a modal, use the `description` property. Descriptions are static and do not scroll with other modal content.
+
+```ts file="./ModalWithDescription.tsx"
+
+```
+
+### Top aligned
+
+To override a modal's default center alignment, use the `position` property. In this example, `position` is set to "top", which moves the modal to the top of the screen.
+
+```ts file="./ModalTopAligned.tsx"
+
+```
+
+### Modal sizes
+
+To adjust the size of a modal, use the `variant` property. Modal variants include "small", "medium", "large", and "default".
+
+In the following example, you can display each modal size option. To launch a modal with a specific size, first select the respective radio button, followed by the "Show modal" button.
+
+```ts file="./ModalSize.tsx"
+
+```
+
+### Custom width
+
+To choose a specific width for a modal, use the `width` property. The following example has a `width` of "50%".
+
+```ts file="./ModalCustomWidth.tsx"
+
+```
+
+### Custom header
+
+To add a custom header to a modal, your custom content must be passed as a child of the `<ModalHeader>` component. Do not pass the `title` property to `<ModalHeader>` when using a custom header. 
+
+```ts file="./ModalCustomHeader.tsx"
+
+```
+
+### No header or footer
+
+To exclusively present information in a modal, remove the header and/or footer.
+
+When a modal has no header or footer, make sure to add an `aria-label` explicitly stating this, so that those using assistive technologies can understand this context.
+
+```ts file="./ModalNoHeaderFooter.tsx"
+
+```
+
+### Title icon
+
+To add an icon before a modal’s title, use the `titleIconVariant` property, which can be set to a "success", "danger", "warning", or "info" variant. The following example uses a "warning" variant.
+
+```ts file="./ModalTitleIcon.tsx"
+
+```
+
+### Custom title icon
+
+To add a custom icon before a modal’s title, set `titleIconVariant` to an imported custom icon. The following example imports and uses a bullhorn icon.
+
+```ts file="./ModalCustomTitleIcon.tsx"
+
+```
+
+### With wizard
+
+To guide users through a series of steps in a modal, you can add a [wizard](/components/wizard) to a modal. To configure the `<Wizard>`, pass an array that contains a “name” and “component” value for each step into the `steps` property.
+
+```ts file="./ModalWithWizard.tsx"
+
+```
+
+### With dropdown
+
+To present a menu of actions or links to a user, you can add a [dropdown](/components/menus/dropdown) to a modal. 
+
+To allow the dropdown to visually break out of the modal container, set the `menuAppendTo` property to “parent”. Handle the modal’s closing behavior by listening to the `onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the dropdown without closing the entire modal.
+
+```ts file="./ModalWithDropdown.tsx"
+
+```
+
+### With help
+
+To help simplify and explain complex models, add a help [popover](/components/popover). Only place a help icon at the modal level if its information applies to all content in the modal. If the help popover is specific to a particular modal section, place the help icon beside that section instead.
+
+```ts file="./ModalWithHelp.tsx"
+
+```
+
+### With form
+
+To collect user input within a modal, you can add a [form](/components/forms/form).
+
+To enable form submission from a button in the modal's footer (outside of the `<Form>`), set the button's `form` property equal to the form's id.
+
+```ts file="ModalWithForm.tsx"
+
+```
+
+### Custom focus
+
+To customize which element inside the modal receives focus when initially opened, use the `elementToFocus` property`. 
+
+```ts file="./ModalCustomFocus.tsx"
+
+```

package/src/next/components/Modal/examples/ModalBasic.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
+
+export const ModalBasic: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle} ouiaId="ShowBasicModal">
+        Show basic modal
+      </Button>
+      <Modal
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        ouiaId="BasicModal"
+        aria-labelledby="basic-modal-title"
+        aria-describedby="modal-box-body-basic"
+      >
+        <ModalHeader title="Basic modal" labelId="basic-modal-title" />
+        <ModalBody id="modal-box-body-basic">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </ModalBody>
+        <ModalFooter>
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </React.Fragment>
+  );
+};

package/src/next/components/Modal/examples/ModalCustomFocus.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
+
+export const ModalCustomFocus: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle} ouiaId="ShowBasicModal">
+        Show modal with custom focus
+      </Button>
+      <Modal
+        elementToFocus="#modal-custom-focus-confirm-button"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        aria-labelledby="custom-focus-modal-title"
+        aria-describedby="modal-box-body-custom-focus"
+      >
+        <ModalHeader title="Modal with custom focus" labelId="custom-focus-modal-title" />
+        <ModalBody id="modal-box-body-custom-focus">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+          <ModalFooter>
+            <Button id="modal-custom-focus-confirm-button" key="confirm" variant="primary" onClick={handleModalToggle}>
+              Confirm
+            </Button>
+            <Button key="cancel" variant="link" onClick={handleModalToggle}>
+              Cancel
+            </Button>
+          </ModalFooter>
+        </ModalBody>
+      </Modal>
+    </React.Fragment>
+  );
+};

package/src/next/components/Modal/examples/ModalCustomHeader.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Button, Title, TitleSizes, TextContent, Flex } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant } from '@patternfly/react-core/next';
+
+import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
+
+export const ModalCustomHeaderFooter: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show custom header/footer modal
+      </Button>
+      <Modal
+        variant={ModalVariant.large}
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        aria-labelledby="modal-custom-header-label"
+        aria-describedby="modal-custom-header-description"
+      >
+        <ModalHeader>
+          <TextContent>
+            <Title id="modal-custom-header-label" headingLevel="h1" size={TitleSizes['2xl']}>
+              Custom header modal
+            </Title>
+            <p>Add custom content to the header by not passing the titles prop the modal box header component.</p>
+          </TextContent>
+        </ModalHeader>
+        <ModalBody>
+          <span id="modal-custom-header-description">
+            When static text describing the modal is available outside of the modal header, it can be given an ID that
+            is then passed in as the modal's aria-describedby value.
+          </span>
+          <br />
+          <br />
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </ModalBody>
+        <ModalFooter>
+          <Title headingLevel="h4" size={TitleSizes.md}>
+            <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+              <WarningTriangleIcon />
+              <span>Custom modal footer.</span>
+            </Flex>
+          </Title>
+        </ModalFooter>
+      </Modal>
+    </React.Fragment>
+  );
+};

package/src/next/components/Modal/examples/ModalCustomTitleIcon.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
+
+import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
+
+export const ModalCustomTitleIcon: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show custom title icon modal
+      </Button>
+      <Modal
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        aria-describedby="modal-custom-icon-description"
+        aria-labelledby="custom-title-icon-modal-title"
+      >
+        <ModalHeader
+          title="Custom title icon modal"
+          titleIconVariant={BullhornIcon}
+          labelId="custom-title-icon-modal-title"
+        />
+        <ModalBody>
+          <span id="modal-custom-icon-description">
+            When static text describing the modal is available outside of the modal header, it can be given an ID that
+            is then passed in as the modal's aria-describedby value.
+          </span>
+          <br />
+          <br />
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </ModalBody>
+        <ModalFooter>
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </React.Fragment>
+  );
+};

package/src/next/components/Modal/examples/ModalCustomWidth.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
+
+export const ModalCustomWidth: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show custom width modal
+      </Button>
+      <Modal
+        width="50%"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        aria-labelledby="custom-width-modal-title"
+        aria-describedby="modal-box-body-custom-width"
+      >
+        <ModalHeader title="Custom width modal" labelId="custom-width-modal-title" />
+        <ModalBody id="modal-box-body-custom-width">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </ModalBody>
+        <ModalFooter>
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </React.Fragment>
+  );
+};

package/src/next/components/Modal/examples/ModalNoHeaderFooter.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalVariant } from '@patternfly/react-core/next';
+
+export const ModalNoHeaderFooter: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show no header/footer modal
+      </Button>
+      <Modal
+        variant={ModalVariant.large}
+        isOpen={isModalOpen}
+        aria-label="No header/footer modal"
+        aria-describedby="modal-no-header-description"
+        onClose={handleModalToggle}
+      >
+        <ModalBody>
+          <span id="modal-no-header-description">
+            When static text describing the modal is available outside of the modal header, it can be given an ID that
+            is then passed in as the modal's aria-describedby value.
+          </span>
+          <br />
+          <br />
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </ModalBody>
+      </Modal>
+    </React.Fragment>
+  );
+};

package/src/next/components/Modal/examples/ModalSize.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Button, Radio } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant } from '@patternfly/react-core/next';
+
+export const ModalSize: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [selectedVariant, setSelectedVariant] = React.useState(ModalVariant.small);
+
+  const capitalize = (input: string) => input[0].toUpperCase() + input.substring(1);
+  const formatSizeVariantName = (variant: string) => capitalize(variant);
+
+  const variantOptions = [ModalVariant.small, ModalVariant.medium, ModalVariant.large];
+
+  const renderSizeOptions = variantOptions.map((variant) => (
+    <Radio
+      id={`modal-size-${variant}-selector`}
+      label={`${formatSizeVariantName(variant)} variant`}
+      isChecked={variant === selectedVariant}
+      onChange={() => setSelectedVariant(variant)}
+      key={formatSizeVariantName(variant)}
+      name="Variant options"
+    />
+  ));
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      {renderSizeOptions}
+      <br />
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show modal
+      </Button>
+      <Modal
+        variant={selectedVariant}
+        title="Variant modal"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        aria-labelledby="variant-modal-title"
+        aria-describedby="modal-box-body-variant"
+      >
+        <ModalHeader title="Small modal" labelId="variant-modal-title" />
+        <ModalBody id="modal-box-body-variant">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </ModalBody>
+        <ModalFooter>
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </React.Fragment>
+  );
+};