@progressiveui/react 1.22.0

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,378 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React, { useRef } from "react";
+import ReactDOM from "react-dom";
+import classNames from "classnames";
+import { Close } from "@progressiveui/icons-react";
+import useSettings from "../../hooks/useSettings";
+import ModalFooterDefault, { ModalFooterProps } from "./ModalFooter";
+
+export interface ModalProps {
+  /**
+   * Specify the content of the modal header label.
+   */
+  modalLabel?: React.ReactNode;
+  /**
+   * Specify the content of the modal header title.
+   */
+  modalHeading?: React.ReactNode;
+  modalText?: React.ReactNode;
+  /**
+   * Specify whether the modals content should be only loaded when the `Modal` is `open`
+   */
+  lazyLoad?: boolean;
+  /**
+   * Specify whether the modal should be button-less
+   */
+  passiveModal?: boolean;
+  children?: React.ReactNode;
+  components?: {
+    Wrapper?: React.ReactNode;
+    ModalFooter?: React.ReactNode;
+  };
+  /**
+   * Specify a label to be read by screen readers on the modal root node
+   */
+  modalAriaLabel?: string;
+  elementToAppend?: HTMLElement | null;
+  modalSecondaryAction?: React.ReactNode;
+  /**
+   * Specify the text for the secondary button
+   */
+  secondaryButtonText?: React.ReactNode;
+  /**
+   * Specify whether the secondary Button should be disabled, or not
+   */
+  secondaryButtonDisabled?: boolean;
+  /**
+   * Specify a handler for the secondary button.
+   * Useful if separate handler from `onRequestClose` is desirable
+   */
+  onSecondarySubmit?: () => void;
+  /**
+   * Specify the text for the primary button
+   */
+  primaryButtonText?: React.ReactNode;
+  /**
+   * Specify whether the Button should be disabled, or not
+   */
+  primaryButtonDisabled?: boolean;
+  /**
+   * Specify whether the Modal is currently open
+   */
+  open?: boolean;
+  /**
+   * Specify to hide the close button
+   */
+  hideClose?: boolean;
+  warning?: boolean;
+  /**
+   * Specify whether the Modal is for dangerous actions
+   */
+  danger?: boolean;
+  /**
+   * Specify if Enter key should be used as "submit" action
+   */
+  shouldSubmitOnEnter?: boolean;
+  /**
+   * Specify CSS selectors that match DOM elements working as floating menus.
+   * Focusing on those elements won't trigger "focus-wrap" behavior
+   */
+  selectorsFloatingMenus?: string[];
+  /**
+   * Specify a CSS selector that matches the DOM element that should
+   * be focused when the Modal opens. If "false" no selector will be triggered
+   */
+  selectorPrimaryFocus?: boolean | string;
+  /**
+   *  Different styling options are available `info`, `warning`, `danger`
+   */
+  type?: "info" | "warning" | "danger";
+  /**
+   * If true the Modal will be rendered inside a portal at the end of the
+   * body element, otherwise at the position it is placed.
+   */
+  inPortal?: boolean;
+  width?: "narrow" | "wide" | "full"; // TODO: Check
+  /**
+   * If true the Modal will be wider then the regular Modal
+   */
+  wide?: boolean;
+  /**
+   * Specify a handler for closing modal.
+   * The handler should care of closing modal, e.g. changing `open` prop.
+   */
+  onRequestClose?: (
+    evt: React.UIEvent,
+    trigger: "button" | "key" | "background"
+  ) => void;
+  /**
+   * Specify a handler for "submitting" modal.
+   * The handler should care of closing modal, e.g. changing `open` prop, if necessary.
+   */
+  onRequestSubmit?: () => void;
+  /**
+   * Provide a description for "close" icon that can be read by screen readers
+   */
+  iconDescription?: string;
+  className?: string;
+  /**
+   * Specify the DOM element ID of the top-level node.
+   */
+  id?: string;
+  backgroundImage?: string;
+  //onKeyDown?: () => void;
+  handleBlur?: (obj?: unknown) => void;
+  primaryButtonRef?: React.RefObject<HTMLButtonElement>;
+  secondaryButtonRef?: React.RefObject<HTMLButtonElement>;
+}
+
+const matchesFuncName =
+  typeof Element !== "undefined" &&
+  ["matches", "webkitMatchesSelector", "msMatchesSelector"].filter(
+    (name) => typeof Element.prototype[name] === "function"
+  )[0];
+
+/** Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content. */
+
+function Modal(props: ModalProps) {
+  const {
+    modalHeading,
+    modalLabel,
+    className,
+    components: componentsOverride = {},
+    modalSecondaryAction,
+    modalAriaLabel,
+    passiveModal,
+    children,
+    elementToAppend,
+    backgroundImage,
+    open,
+    lazyLoad,
+    onRequestClose = () => {},
+    // onRequestSubmit,
+    onSecondarySubmit,
+    iconDescription,
+    inPortal = true,
+    hideClose,
+    handleBlur = () => {},
+    wide,
+    type,
+    selectorPrimaryFocus,
+    primaryButtonRef,
+    secondaryButtonRef,
+    // shouldSubmitOnEnter,
+    ...other
+  } = props;
+
+  const { prefix } = useSettings();
+  const button = useRef<HTMLButtonElement>(null);
+  const outerModal = useRef<HTMLInputElement>(null);
+  const innerModal = useRef<HTMLInputElement>(null);
+
+  const el = elementToAppend
+    ? elementToAppend
+    : typeof document !== "undefined"
+    ? document.body
+    : undefined;
+
+  const [beingOpen, setBeingOpen] = React.useState(false);
+
+  //   const handleKeyDown = (evt) => {
+  //     if (evt.which === 27) onRequestClose(evt, 'key');
+  //     if (evt.which === 13 && shouldSubmitOnEnter) onRequestSubmit(evt, 'key');
+  //   };
+
+  const elementOrParentIsFloatingMenu = (target) => {
+    const {
+      selectorsFloatingMenus = [
+        `.${prefix}--overflow-menu-options`,
+        `.${prefix}--tooltip`,
+        ".flatpickr-calendar",
+      ],
+    } = props;
+    if (target && typeof target.closest === "function") {
+      return selectorsFloatingMenus.some((selector) =>
+        target.closest(selector)
+      );
+    } else {
+      // Alternative if closest does not exist.
+      while (target) {
+        if (matchesFuncName && typeof target[matchesFuncName] === "function") {
+          if (
+            // eslint-disable-next-line no-loop-func
+            selectorsFloatingMenus.some((selector) =>
+              target[matchesFuncName](selector)
+            )
+          ) {
+            return true;
+          }
+        }
+        target = target.parentNode;
+      }
+      return false;
+    }
+  };
+
+  //   const handleClick = (evt) => {
+  //     console.log(
+  //       'evt.target',
+  //       evt,
+  //       innerModal.current.contains(evt.target),
+  //       innerModal.current
+  //     );
+  //     if (
+  //       innerModal.current &&
+  //       !innerModal.current.contains(evt.target) &&
+  //       !elementOrParentIsFloatingMenu(evt.target)
+  //     ) {
+  //       onRequestClose(evt, 'background');
+  //     }
+  //   };
+
+  const handleCloseButton = (evt) => {
+    onRequestClose(evt, "button");
+  };
+
+  const focusModal = () => {
+    if (outerModal.current) outerModal.current.focus();
+  };
+
+  const handleBlurEvent = (evt) => {
+    if (handleBlur) {
+      handleBlur({
+        evt,
+        innerModal,
+        open,
+        elementOrParentIsFloatingMenu,
+        focusModal,
+      });
+    } else if (
+      innerModal.current &&
+      open &&
+      evt.relatedTarget &&
+      !innerModal.current.contains(evt.relatedTarget) &&
+      !elementOrParentIsFloatingMenu(evt.relatedTarget)
+    ) {
+      focusModal();
+    }
+  };
+
+  const focusButton = (focusContainerElement) => {
+    if (selectorPrimaryFocus === false) return;
+    const primaryFocusElement =
+      focusContainerElement.querySelector(selectorPrimaryFocus);
+    if (primaryFocusElement) {
+      primaryFocusElement.focus();
+      return;
+    }
+    if (button?.current) {
+      button.current.focus();
+    }
+  };
+
+  const handleTransitionEnd = (evt) => {
+    if (
+      outerModal.current &&
+      outerModal.current.offsetWidth &&
+      outerModal.current.offsetHeight &&
+      beingOpen
+    ) {
+      focusButton(evt.currentTarget);
+      setBeingOpen(false);
+    }
+  };
+
+  if (open === false && lazyLoad) return null;
+
+  const components = { ModalFooter: ModalFooterDefault, ...componentsOverride };
+  const ModalFooter = components.ModalFooter as React.FC<ModalFooterProps>;
+
+  const onSecondaryButtonClick = onSecondarySubmit
+    ? onSecondarySubmit
+    : onRequestClose;
+
+  const modalClasses = classNames(
+    {
+      [`${prefix}--modal`]: true,
+      [`${prefix}--modal--wide`]: wide,
+      [`${prefix}--modal--tall`]: !passiveModal,
+      [`${prefix}--modal--background-image`]: backgroundImage,
+      "is-visible": open,
+      [`${prefix}--modal--warning`]: type === "warning" || props.warning,
+      [`${prefix}--modal--danger`]: type === "danger" || props.danger,
+    },
+    className
+  );
+
+  const modalButton = !hideClose ? (
+    <button
+      className={`${prefix}--modal-close`}
+      type="button"
+      id="closeButton"
+      onClick={handleCloseButton}
+      ref={button}
+    >
+      <Close
+        className={`${prefix}--modal-close__icon`}
+        description={iconDescription}
+      />
+    </button>
+  ) : null;
+
+  const modalBody = (
+    <div
+      ref={innerModal}
+      role="dialog"
+      className={`${prefix}--modal-container`}
+      aria-label={modalAriaLabel}
+    >
+      <div className={`${prefix}--modal-header`}>
+        {passiveModal && modalButton}
+        <div>
+          {modalLabel && (
+            <h4 className={`${prefix}--modal-header__label`}>{modalLabel}</h4>
+          )}
+          <h2 className={`${prefix}--modal-header__heading`}>{modalHeading}</h2>
+        </div>
+        {modalSecondaryAction && <>{modalSecondaryAction}</>}
+        {!passiveModal && modalButton}
+      </div>
+      <div className={`${prefix}--modal-content`}>{children}</div>
+      <ModalFooter
+        {...props}
+        prefix={prefix}
+        onSecondaryButtonClick={onSecondaryButtonClick}
+        primaryButtonRef={primaryButtonRef}
+        secondaryButtonRef={secondaryButtonRef}
+      />
+    </div>
+  );
+
+  const modal = (
+    <div
+      {...other}
+      // onKeyDown={handleKeyDown}
+      //onClick={handleClick}
+      onBlur={handleBlurEvent}
+      className={modalClasses}
+      style={
+        backgroundImage
+          ? { backgroundImage: `url(${backgroundImage})` }
+          : undefined
+      }
+      role="presentation"
+      tabIndex={-1}
+      onTransitionEnd={open ? handleTransitionEnd : undefined}
+      ref={outerModal}
+    >
+      <div className={`${prefix}--modal-inner`}>{modalBody}</div>
+    </div>
+  );
+
+  if (inPortal && el) return ReactDOM.createPortal(modal, el);
+  else return modal;
+}
+
+Modal.displayName = "Modal";
+
+export default Modal;

package/src/components/Modal/ModalFooter-old.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import Button from '../Button/Button';
+
+const ModalFooter = ({
+  passiveModal,
+  secondaryButtonText,
+  onSecondaryButtonClick,
+  primaryButtonText,
+  onRequestSubmit,
+  primaryButtonDisabled,
+  prefix,
+  secondaryButtonDisabled,
+  danger,
+  ref,
+}) => {
+  if (passiveModal) return null;
+  return (
+    <div className={`${prefix}--modal-footer`}>
+      <div className={`${prefix}--modal__buttons-container`}>
+        {secondaryButtonText && (
+          <Button
+            kind={danger ? 'tertiary' : 'secondary'}
+            disabled={secondaryButtonDisabled}
+            id="secondaryButton"
+            onClick={onSecondaryButtonClick}>
+            {secondaryButtonText}
+          </Button>
+        )}
+        <Button
+          kind={danger ? 'danger--primary' : 'primary'}
+          disabled={primaryButtonDisabled}
+          onClick={onRequestSubmit}
+          id="primaryButton"
+          ref={ref}>
+          {primaryButtonText}
+        </Button>
+      </div>
+    </div>
+  );
+};
+export default ModalFooter;

package/src/components/Modal/ModalFooter.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import Button from "../Button";
+import useSettings from "../../hooks/useSettings";
+import { ModalProps } from "./Modal";
+
+export interface ModalFooterProps extends ModalProps {
+  /*passiveModal?: boolean;
+  secondaryButtonText?: string; */
+  onSecondaryButtonClick?: (
+    evt: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    trigger: "button" | "background" | "key"
+  ) => void;
+  prefix?: string;
+}
+
+const ModalFooter: React.FC<ModalFooterProps> = ({
+  passiveModal,
+  secondaryButtonText,
+  onSecondaryButtonClick,
+  primaryButtonText,
+  onRequestSubmit,
+  primaryButtonDisabled,
+  secondaryButtonDisabled,
+  danger,
+  primaryButtonRef,
+  secondaryButtonRef,
+}) => {
+  const { prefix } = useSettings();
+  if (passiveModal) return null;
+
+  return (
+    <div className={`${prefix}--modal-footer`}>
+      <div className={`${prefix}--modal__buttons-container`}>
+        {secondaryButtonText && (
+          <Button
+            kind="secondary"
+            disabled={secondaryButtonDisabled}
+            id="secondaryButton"
+            onClick={(e) => {
+              if (onSecondaryButtonClick) onSecondaryButtonClick(e, "button");
+            }}
+            ref={secondaryButtonRef as React.Ref<HTMLButtonElement>}
+          >
+            {secondaryButtonText}
+          </Button>
+        )}
+        <Button
+          kind={danger ? "danger" : "primary"}
+          disabled={primaryButtonDisabled}
+          onClick={onRequestSubmit}
+          id="primaryButton"
+          ref={primaryButtonRef as React.Ref<HTMLButtonElement>}
+        >
+          {primaryButtonText}
+        </Button>
+      </div>
+    </div>
+  );
+};
+export default ModalFooter;

package/src/components/Modal/ModalHeader.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export default function ModalFooter({
+  passiveModal,
+  modalLabel,
+  modalHeading,
+  modalButton,
+  modalSecondaryAction,
+  prefix,
+}) {
+  if (passiveModal) return null;
+  return (
+    <div className={`${prefix}--modal-header`}>
+      {passiveModal && modalButton}
+      <div>
+        {modalLabel && (
+          <h4 className={`${prefix}--modal-header__label`}>{modalLabel}</h4>
+        )}
+        <h2 className={`${prefix}--modal-header__heading`}>{modalHeading}</h2>
+      </div>
+      {modalSecondaryAction && <>{modalSecondaryAction}</>}
+      {!passiveModal && modalButton}
+    </div>
+  );
+}

package/src/components/Modal/ModalWithControls-story.legacy.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import Modal from '.';
+
+class ModalWithControls extends React.Component {
+  state = { open: false };
+
+  toggleModal = () => {
+    this.setState((state) => ({
+      open: !state.open,
+    }));
+  };
+
+  submitAndClose = () => {
+    alert('Submit now and close the modal');
+    this.setState((state) => ({
+      open: false,
+    }));
+  };
+
+  render() {
+    const { open } = this.state;
+
+    return (
+      <div>
+        <button onClick={this.toggleModal}>Open Modal</button>
+        <Modal
+          open={open}
+          primaryButtonText="Submit"
+          onRequestSubmit={this.submitAndClose}
+          secondaryButtonText="Cancel Modal"
+          onSecondarySubmit={this.toggleModal}
+          onRequestClose={this.toggleModal}>
+          <p className="wfp--modal-content__text">Nothing to see here</p>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+storiesOf('Components|Modal', module).add('with Controls', () => (
+  <ModalWithControls />
+));

package/src/components/Modal/README.mdx.legacy

@@ -0,0 +1,102 @@
+**Modals** communicate information via a secondary window and allow the user to maintain the context of a particular task.
+
+Use the Modal Wrapper component to encapsulate your Modal within a button.
+
+Modal is forked from [Carbon Components](https://www.carbondesignsystem.com/components/modal/code)
+
+## Usage
+
+#### When to use
+
+import { List, ListItem } from '../List';
+
+- ✓ Grab the user’s attention: Use when you want to interrupt a user’s current task to catch the user’s full attention to something more important.
+- ✓ Need user input:Use when you want to get information from the user. Ex. sign up or login form.
+- ✓ Use when you want to show additional information without losing the context of the parent page. Ex. showing larger images or videos.
+- ✓ Use when you want to show information that is not directly related to the parent page or other options that are “independent” from other pages. Ex. notifications.
+
+Source: [Best Practices for Modals / Overlays / Dialog Windows](https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-c00c66cddd8c), [Modal & Nonmodal Dialogs: When (& When Not) to Use Them](https://www.nngroup.com/articles/modal-nonmodal-dialog/)
+
+#### When not to use
+
+- ✗ Long content: Avoid using modal dialogs when the content needs a scrollbar.
+- ✗ Long forms: Do not use when a long form is displayed.
+- ✗ Complex decision making: Avoid modal dialogs for complex decision making that requires additional sources of information unavailable in the modal.
+
+```js
+import { Modal } from '@progressiveui/react';
+```
+
+##### Custom footer
+
+To display custom footer content, pass a function (or React component) to `modalFooter` prop
+
+```js
+<Modal open modalFooter={() => <div>The Modal Footer content</div>} />
+```
+
+#### Full screen Dialog (`Dialog` example)
+
+Full screen dialogs only show the Modal element without any other content like the navigation. They can be used for login, password reset or very important dialogs.
+
+```js
+<Modal open hideClose backgroundImage={yourBackgroundImage.jpg} />
+```
+
+#### Handle the `open` state
+
+Modal allows you to control the `open` State on your own. Use the Modal Wrapper component to use a controlled version of Modal.
+
+```js
+class ModalWithControls extends React.Component {
+  state = { open: false };
+
+  toggleModal = () => {
+    this.setState((state) => ({
+      open: !state.open,
+    }));
+  };
+
+  submitAndClose = () => {
+    alert('Submit now and close the modal');
+    this.setState((state) => ({
+      open: false,
+    }));
+  };
+
+  render() {
+    const { open } = this.state;
+
+    return (
+      <div>
+        <button onClick={this.toggleModal}>Open Modal</button>
+        <Modal
+          open={open}
+          primaryButtonText="Submit"
+          onRequestSubmit={this.submitAndClose}
+          secondaryButtonText="Cancel Modal"
+          onSecondarySubmit={this.toggleModal}
+          onRequestClose={this.toggleModal}>
+          <p className="wfp--modal-content__text">Nothing to see here</p>
+        </Modal>
+      </div>
+    );
+  }
+}
+```
+
+#### Disable closing the Modal if the user clicks on the background
+
+```js
+onRequestClose={(evt, trigger) => {
+  if (trigger !== 'background') {
+    return props.onClose(evt, trigger);
+  }
+  return null;
+}}
+
+<Modal
+  onRequestClose={this.onRequestClose}
+  {...otherProps}
+/>
+```

package/src/components/Modal/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Modal';
+export { default as ModalFooter } from './ModalFooter';