@react-ui-org/react-ui 0.47.0 → 0.49.0

package/src/lib/components/Modal/Modal.jsx

@@ -1,294 +1,189 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {
+  useEffect,
+  useRef,
+} from 'react';
 import { createPortal } from 'react-dom';
-import {
-  RUIContext,
-  withGlobalProps,
-} from '../../provider';
-import { classNames } from '../../utils/classNames';
+import { withGlobalProps } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
-import {
-  Toolbar,
-  ToolbarItem,
-} from '../Toolbar';
-import Button from '../Button';
-import ScrollView from '../ScrollView';
+import { classNames } from '../../utils/classNames';
 import styles from './Modal.scss';
 
-export class Modal extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.childrenWrapperRef = React.createRef();
-    this.submitButtonRef = React.createRef();
-
-    this.keyPressHandler = this.keyPressHandler.bind(this);
-  }
-
-  componentDidMount() {
-    const { autoFocus } = this.props;
-
-    window.document.addEventListener('keydown', this.keyPressHandler, false);
-
-    // If `autoFocus` is set to `true`, following code finds first form field element
-    // (input, textarea or select) or submit button and auto focuses it. This is necessary
-    // to have focus on one of those elements to be able to submit form by pressing Enter key.
-    if (autoFocus && this.childrenWrapperRef && this.childrenWrapperRef.current) {
-      const childrenWrapperElement = this.childrenWrapperRef.current;
-      const childrenElements = childrenWrapperElement.querySelectorAll('*');
-      const formFieldEl = Array.from(childrenElements).find(
-        (element) => ['INPUT', 'TEXTAREA', 'SELECT'].includes(element.nodeName),
-      );
-
-      if (formFieldEl) {
-        formFieldEl.focus();
-        return;
-      }
-
-      if (this.submitButtonRef && this.submitButtonRef.current) {
-        this.submitButtonRef.current.focus();
-      }
+const preRender = (
+  children,
+  childrenWrapperRef,
+  closeButtonRef,
+  position,
+  restProps,
+  size,
+) => {
+  const sizeClass = (modalSize) => {
+    if (modalSize === 'small') {
+      return styles.isRootSizeSmall;
     }
-  }
-
-  componentWillUnmount() {
-    window.document.removeEventListener('keydown', this.keyPressHandler, false);
-  }
-
-  keyPressHandler(e) {
-    const {
-      actions,
-      onClose,
-    } = this.props;
 
-    if (e.keyCode === 27 && onClose) {
-      onClose();
+    if (modalSize === 'medium') {
+      return styles.isRootSizeMedium;
     }
 
-    if (e.keyCode === 13 && e.target.nodeName !== 'BUTTON') {
-      const submitAction = actions.find((action) => action.type === 'submit');
+    if (modalSize === 'large') {
+      return styles.isRootSizeLarge;
+    }
 
-      if (submitAction && !submitAction.disabled) {
-        submitAction.onClick(e);
-      }
+    if (modalSize === 'fullscreen') {
+      return styles.isRootSizeFullscreen;
     }
-  }
 
-  preRender() {
-    const {
-      actions,
-      children,
-      id,
-      onClose,
-      position,
-      scrollView,
-      size,
-      title,
-    } = this.props;
+    return styles.isRootSizeAuto;
+  };
 
-    const sizeClass = (modalSize) => {
-      if (modalSize === 'small') {
-        return styles.isRootSizeSmall;
-      }
+  const positionClass = (modalPosition) => {
+    if (modalPosition === 'top') {
+      return styles.isRootPositionTop;
+    }
 
-      if (modalSize === 'medium') {
-        return styles.isRootSizeMedium;
-      }
+    return styles.isRootPositionCenter;
+  };
+
+  return (
+    <div
+      className={styles.backdrop}
+      onClick={() => {
+        if (closeButtonRef?.current != null) {
+          closeButtonRef.current.click();
+        }
+      }}
+      role="presentation"
+    >
+      <div
+        {...transferProps(restProps)}
+        className={classNames(
+          styles.root,
+          sizeClass(size),
+          positionClass(position),
+        )}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        role="presentation"
+        ref={childrenWrapperRef}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
 
-      if (modalSize === 'large') {
-        return styles.isRootSizeLarge;
-      }
+export const Modal = ({
+  autoFocus,
+  children,
+  closeButtonRef,
+  portalId,
+  position,
+  primaryButtonRef,
+  size,
+  ...restProps
+}) => {
+  const childrenWrapperRef = useRef();
+
+  const keyPressHandler = (e) => {
+    if (e.key === 'Escape' && closeButtonRef?.current != null) {
+      closeButtonRef.current.click();
+    }
 
-      if (modalSize === 'fullscreen') {
-        return styles.isRootSizeFullscreen;
-      }
+    if (e.key === 'Enter' && e.target.nodeName !== 'BUTTON' && primaryButtonRef?.current != null) {
+      primaryButtonRef.current.click();
+    }
+  };
 
-      return styles.isRootSizeAuto;
+  useEffect(() => {
+    window.document.addEventListener('keydown', keyPressHandler, false);
+    const removeKeyPressHandler = () => {
+      window.document.removeEventListener('keydown', keyPressHandler, false);
     };
 
-    const positionClass = (modalPosition) => {
-      if (modalPosition === 'top') {
-        return styles.isRootPositionTop;
-      }
-
-      return styles.isRootPositionCenter;
-    };
+    // If `autoFocus` is set to `true`, following code finds first form field element
+    // (input, textarea or select) or primary button and auto focuses it. This is necessary
+    // to have focus on one of those elements to be able to submit form by pressing Enter key.
+    if (autoFocus) {
+      if (childrenWrapperRef?.current != null) {
+        const childrenWrapperElement = childrenWrapperRef.current;
+        const childrenElements = childrenWrapperElement.querySelectorAll('*');
+        const formFieldEl = Array.from(childrenElements).find(
+          (element) => ['INPUT', 'TEXTAREA', 'SELECT'].includes(element.nodeName),
+        );
 
-    const modalBody = () => {
-      const content = (
-        <div
-          ref={this.childrenWrapperRef}
-          className={styles.content}
-          {...(id && { id: `${id}__content` })}
-        >
-          {children}
-        </div>
-      );
+        if (formFieldEl) {
+          formFieldEl.focus();
+          return removeKeyPressHandler;
+        }
+      }
 
-      if (scrollView) {
-        return (
-          <div
-            className={classNames(
-              styles.body,
-              styles.isBodyScrollable,
-            )}
-          >
-            {React.cloneElement(scrollView, scrollView.props, content)}
-          </div>
-        );
+      if (primaryButtonRef?.current != null) {
+        primaryButtonRef.current.focus();
       }
+    }
 
-      return (
-        <div className={styles.body}>
-          {content}
-        </div>
-      );
-    };
+    return removeKeyPressHandler;
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-    return (
-      <div
-        className={styles.backdrop}
-        id={id}
-        onClick={(e) => {
-          if (onClose) {
-            onClose(e);
-          }
-        }}
-        role="presentation"
-      >
-        <div
-          className={classNames(
-            styles.root,
-            sizeClass(size),
-            positionClass(position),
-          )}
-          onClick={(e) => {
-            e.stopPropagation();
-          }}
-          role="presentation"
-        >
-          <div className={styles.head}>
-            <h3
-              className={styles.headTitle}
-              {...(id && { id: `${id}__title` })}
-            >
-              {title}
-            </h3>
-            {onClose && (
-              <RUIContext.Consumer>
-                {({ translations }) => (
-                  <button
-                    type="button"
-                    className={styles.close}
-                    onClick={onClose}
-                    title={translations.Modal.close}
-                    {...(id && { id: `${id}__closeModalHeaderButton` })}
-                  >
-                    ×
-                  </button>
-                )}
-              </RUIContext.Consumer>
-            )}
-          </div>
-          {modalBody()}
-          {(actions.length || onClose) && (
-            <div className={styles.footer}>
-              <Toolbar justify="center" dense>
-                {actions.map((action) => (
-                  <ToolbarItem key={action.label}>
-                    <Button
-                      {...transferProps(action)}
-                      color={action.color}
-                      disabled={action.disabled}
-                      feedbackIcon={action.feedbackIcon}
-                      forwardedRef={this.submitButtonRef}
-                      id={action.id || undefined}
-                      label={action.label}
-                      onClick={action.onClick}
-                      type="button"
-                    />
-                  </ToolbarItem>
-                ))}
-                {onClose && (
-                  <ToolbarItem>
-                    <RUIContext.Consumer>
-                      {({ translations }) => (
-                        <Button
-                          label={translations.Modal.close}
-                          onClick={onClose}
-                          priority="flat"
-                          {...(id && { id: `${id}__closeModalFooterButton` })}
-                        />
-                      )}
-                    </RUIContext.Consumer>
-                  </ToolbarItem>
-                )}
-              </Toolbar>
-            </div>
-          )}
-        </div>
-      </div>
+  if (portalId === null) {
+    return preRender(
+      children,
+      childrenWrapperRef,
+      closeButtonRef,
+      position,
+      restProps,
+      size,
     );
   }
 
-  render() {
-    const { portalId } = this.props;
-
-    if (portalId === null) {
-      return this.preRender();
-    }
-
-    return createPortal(this.preRender(), document.getElementById(portalId));
-  }
-}
+  return createPortal(
+    preRender(
+      children,
+      childrenWrapperRef,
+      closeButtonRef,
+      position,
+      restProps,
+      size,
+    ),
+    document.getElementById(portalId),
+  );
+};
 
 Modal.defaultProps = {
-  actions: [],
   autoFocus: true,
   children: null,
-  id: undefined,
-  onClose: null,
+  closeButtonRef: null,
   portalId: null,
   position: 'center',
-  scrollView: (<ScrollView
-    customEndShadowStyle={{ background: 'radial-gradient(farthest-side at center bottom, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.06) 40%, rgba(0, 0, 0, 0.02) 85%, rgba(0, 0, 0, 0) 100%)' }}
-    customStartShadowStyle={{ background: 'radial-gradient(farthest-side at center top, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.05) 60%, rgba(0, 0, 0, 0.02) 85%, rgba(0, 0, 0, 0) 100%)' }}
-    shadowSize="16px"
-  />),
+  primaryButtonRef: null,
   size: 'medium',
 };
 
 Modal.propTypes = {
   /**
-   * Actions to be rendered in modal footer.
-   */
-  actions: PropTypes.arrayOf(PropTypes.shape({
-    color: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
-    disabled: PropTypes.bool,
-    feedbackIcon: PropTypes.node,
-    id: PropTypes.string,
-    label: PropTypes.string.isRequired,
-    onClick: PropTypes.func.isRequired,
-  })),
-  /**
-   * If `true`, focus the first action in the footer when the modal is opened.
+   * If `true`, focus the first input element in the modal or primary button (referenced by the `primaryButtonRef` prop)
+   * when the modal is opened.
    */
   autoFocus: PropTypes.bool,
   /**
-   * Content of the modal.
+   * Nested elements. Supported types are:
+   *
+   * * `ModalHeader`
+   * * `ModalBody`
+   * * `ModalFooter`
+   *
+   * At least `ModalBody` is required.
    */
   children: PropTypes.node,
   /**
-   * ID of the root HTML element. It also serves as a base for nested elements:
-   * * `<ID>__content`
-   * * `<ID>__closeModalHeaderButton`
-   * * `<ID>__closeModalFooterButton`
+   * Reference to close button element. It is used to close modal when Escape key is pressed or the backdrop is clicked.
    */
-  id: PropTypes.string,
-  /**
-   * If a function is provided, the close buttons will be displayed.
-   */
-  onClose: PropTypes.func,
+  closeButtonRef: PropTypes.shape({
+    // eslint-disable-next-line react/forbid-prop-types
+    current: PropTypes.any,
+  }),
   /**
    * If set, modal is rendered in the React Portal with that ID.
    */
@@ -298,19 +193,17 @@ Modal.propTypes = {
    */
   position: PropTypes.oneOf(['top', 'center']),
   /**
-   * The `ScrollView` component to be used as a wrapper of the content to provide body scrolling functionality.
-   * If provided only the modal body will be scrollable.
-   * If set to `null` the entire modal including header and footer will be scrollable.
+   * Reference to primary button element. It is used to submit modal when Enter key is pressed and as fallback
+   * when `autoFocus` functionality does not find any input element to be focused.
    */
-  scrollView: PropTypes.element,
+  primaryButtonRef: PropTypes.shape({
+    // eslint-disable-next-line react/forbid-prop-types
+    current: PropTypes.any,
+  }),
   /**
    * Size of the modal.
    */
   size: PropTypes.oneOf(['small', 'medium', 'large', 'fullscreen', 'auto']),
-  /**
-   * Title displayed in modal header.
-   */
-  title: PropTypes.string.isRequired,
 };
 
 export const ModalWithGlobalProps = withGlobalProps(Modal, 'Modal');

package/src/lib/components/Modal/Modal.scss

@@ -9,15 +9,18 @@
 
 .root {
     --rui-local-outer-spacing: #{theme.$outer-spacing-xs};
+    --rui-local-max-width: calc(100% - (2 * var(--rui-local-outer-spacing)));
+    --rui-local-max-height: calc(100% - (2 * var(--rui-local-outer-spacing)));
 
     position: fixed;
     left: 50%;
     z-index: settings.$z-index;
     display: flex;
     flex-direction: column;
-    max-width: calc(100% - (2 * var(--rui-local-outer-spacing)));
-    max-height: calc(100% - (2 * var(--rui-local-outer-spacing)));
+    max-width: var(--rui-local-max-width);
+    max-height: var(--rui-local-max-height);
     overflow-y: auto;
+    overscroll-behavior: contain;
     border-radius: settings.$border-radius;
     background: theme.$background;
     box-shadow: theme.$box-shadow;
@@ -28,57 +31,6 @@
     }
 }
 
-.head {
-    display: flex;
-    flex: none;
-    align-items: baseline;
-    justify-content: space-between;
-    padding: settings.$padding-y spacing.of(4) settings.$padding-y settings.$padding-x;
-}
-
-.headTitle {
-    font-size: settings.$head-title-font-size;
-
-    &:not(:last-child) {
-        margin-bottom: 0;
-    }
-}
-
-.close {
-    @include reset.button();
-    @include accessibility.min-tap-target();
-
-    font-size: map.get(typography.$size-values, 3);
-    line-height: 1;
-    color: inherit;
-}
-
-.body {
-    flex: 1 1 auto;
-}
-
-.isBodyScrollable {
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-}
-
-.content {
-    padding: settings.$padding-y settings.$padding-x settings.$content-padding-bottom;
-}
-
-.footer {
-    display: flex;
-    flex: none;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    padding: settings.$padding-y settings.$padding-x;
-    border-bottom-right-radius: settings.$border-radius;
-    border-bottom-left-radius: settings.$border-radius;
-    background: theme.$footer-background;
-}
-
 .backdrop {
     position: fixed;
     top: 0;
@@ -112,8 +64,8 @@
 
 .isRootSizeAuto {
     width: auto;
-    min-width: map.get(theme.$sizes, auto, min-width);
-    max-width: map.get(theme.$sizes, auto, max-width);
+    min-width: min(var(--rui-local-max-width), #{map.get(theme.$sizes, auto, min-width)});
+    max-width: min(var(--rui-local-max-width), #{map.get(theme.$sizes, auto, max-width)});
 }
 
 .isRootPositionCenter {

package/src/lib/components/Modal/ModalBody.jsx

@@ -0,0 +1,60 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { withGlobalProps } from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
+import { classNames } from '../../utils/classNames';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { getScrollingClassName } from './_helpers/getScrollingClassName';
+import styles from './ModalBody.scss';
+
+export const ModalBody = ({
+  children,
+  scrolling,
+  ...restProps
+}) => {
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
+
+  return (
+    <div
+      {...transferProps(restProps)}
+      className={classNames(
+        styles.root,
+        getScrollingClassName(scrolling, styles),
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+ModalBody.defaultProps = {
+  children: null,
+  scrolling: 'auto',
+};
+
+ModalBody.propTypes = {
+  /**
+   * Nested elements. Supported types are:
+   *
+   * * `ModalContent`
+   * * `ScrollView` (`scrolling: 'custom'` must be set)
+   *
+   * You can also provide a custom component responsible for scrolling and displaying content correctly.
+   * At most one nested element is allowed. If none are provided nothing is rendered.
+   */
+  children: PropTypes.node,
+  /**
+   * Scrolling mode:
+   *
+   * - `auto`: scrolling is enabled on ModalBody.
+   * - `custom`: use if providing a custom scrolling component, e.g. an instance of `ScrollView`.
+   * - `none`: scrolling is disabled on ModalBody and the entire Modal is scrollable instead.
+   */
+  scrolling: PropTypes.oneOf(['auto', 'custom', 'none']),
+};
+
+export const ModalBodyWithGlobalProps = withGlobalProps(ModalBody, 'ModalBody');
+
+export default ModalBodyWithGlobalProps;

package/src/lib/components/Modal/ModalBody.scss

@@ -0,0 +1,18 @@
+.root {
+    flex: 1 1 auto;
+}
+
+.isRootScrollingAuto,
+.isRootScrollingCustom {
+    min-height: 0;
+}
+
+.isRootScrollingAuto {
+    overflow-y: auto;
+    overscroll-behavior: contain;
+}
+
+.isRootScrollingCustom {
+    display: flex;
+    flex-direction: column;
+}

package/src/lib/components/Modal/ModalCloseButton.jsx

@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+import React, { useContext } from 'react';
+import {
+  RUIContext,
+  withGlobalProps,
+} from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
+import styles from './ModalCloseButton.scss';
+
+export const ModalCloseButton = React.forwardRef((props, ref) => {
+  const {
+    disabled,
+    ...restProps
+  } = props;
+
+  const { translations } = useContext(RUIContext);
+
+  return (
+    <button
+      {...transferProps(restProps)}
+      type="button"
+      className={styles.root}
+      disabled={disabled}
+      ref={ref}
+      title={translations.ModalCloseButton.close}
+    >
+      ×
+    </button>
+  );
+});
+
+ModalCloseButton.defaultProps = {
+  disabled: false,
+};
+
+ModalCloseButton.propTypes = {
+  /**
+   * If `true`, close button will be disabled.
+   */
+  disabled: PropTypes.bool,
+};
+
+export const ModalCloseButtonWithGlobalProps = withGlobalProps(ModalCloseButton, 'ModalCloseButton');
+
+export default ModalCloseButtonWithGlobalProps;

package/src/lib/components/Modal/ModalCloseButton.scss

@@ -0,0 +1,18 @@
+@use "sass:map";
+@use "../../styles/theme/typography";
+@use "../../styles/tools/accessibility";
+@use "../../styles/tools/reset";
+@use "../../styles/tools/spacing";
+
+.root {
+    @include reset.button();
+    @include accessibility.min-tap-target();
+
+    font-size: map.get(typography.$size-values, 3);
+    line-height: 1;
+    color: inherit;
+
+    &:disabled {
+        cursor: var(--rui-disabled-cursor);
+    }
+}