@progressiveui/react 2.0.2 → 2.0.4

package/src/components/Modal/Modal.tsx

@@ -1,378 +0,0 @@
-/* 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

@@ -1,41 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,102 +0,0 @@
-**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

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