@react-ui-org/react-ui 0.57.0 → 0.59.0

package/src/components/FileInputField/_settings.scss

@@ -0,0 +1,15 @@
+@use "../../styles/theme/typography";
+
+$drop-zone-color: var(--rui-color-text-primary);
+$drop-zone-disabled-color: var(--rui-color-text-primary-disabled);
+$drop-zone-border-color: var(--rui-color-border-primary);
+$drop-zone-hover-border-color: var(--rui-color-border-primary-hover);
+$drop-zone-active-border-color: var(--rui-color-border-primary-active);
+$drop-zone-dragging-border-color: var(--rui-color-border-primary-active);
+$drop-zone-disabled-border-color: var(--rui-color-border-primary);
+$drop-zone-background-color: var(--rui-color-background-basic);
+$drop-zone-disabled-background-color: var(--rui-color-background-disabled);
+$drop-zone-disabled-cursor: var(--rui-cursor-not-allowed);
+$drop-zone-font-weight: typography.$font-weight-base;
+$drop-zone-line-height: typography.$line-height-base;
+$drop-zone-font-family: typography.$font-family-base;

package/src/components/FormLayout/FormLayout.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { useMemo } from 'react';
-import { withGlobalProps } from '../../provider';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { withGlobalProps } from '../../providers/globalProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { FormLayoutContext } from './FormLayoutContext';
 import styles from './FormLayout.module.scss';

package/src/components/FormLayout/FormLayoutCustomField.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { withGlobalProps } from '../../providers/globalProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';

package/src/components/FormLayout/README.md

@@ -389,6 +389,7 @@ React.createElement(() => {
         />
         <FileInputField
           label="Attachment"
+          onFilesChanged={() => {}}
         />
         <Toggle
           checked={receiveNewsletter}

package/src/components/Grid/Grid.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
-import { transferProps } from '../../utils/transferProps';
+import { withGlobalProps } from '../../providers/globalProps';
+import { transferProps } from '../../helpers/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
 import styles from './Grid.module.scss';

package/src/components/Grid/Grid.module.scss

@@ -20,8 +20,8 @@
 //
 // 2. Apply custom property value that is defined within current breakpoint, see 1.
 //
-// 3. Intentionally use longhand properties because the custom property fallback mechanism evaluates `initial` values as
-//    empty. That makes the other value of the shorthand property unexpectedly used for both axes.
+// 3. Intentionally use longhand properties because the custom property fallback mechanism evaluates `initial` values
+//    as empty. That makes the other value of the shorthand property unexpectedly used for both axes.
 
 @use "sass:map";
 @use "../../styles/tools/spacing";

package/src/components/Grid/GridSpan.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
-import { transferProps } from '../../utils/transferProps';
+import { withGlobalProps } from '../../providers/globalProps';
+import { transferProps } from '../../helpers/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
 import styles from './Grid.module.scss';

package/src/components/InputGroup/InputGroup.jsx

@@ -3,15 +3,15 @@ import React, {
   useContext,
   useMemo,
 } from 'react';
-import { Text } from '../Text';
-import { withGlobalProps } from '../../provider';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { withGlobalProps } from '../../providers/globalProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { FormLayoutContext } from '../FormLayout';
+import { Text } from '../Text';
 import { InputGroupContext } from './InputGroupContext';
 import styles from './InputGroup.module.scss';
 

package/src/components/InputGroup/InputGroup.module.scss

@@ -1,7 +1,9 @@
 // 1. The class name is intentionally singular because it's targeted by other mixins too.
 // 2. Use a block-level display mode to prevent extra white space below grouped inputs in Safari.
-// 3. Prevent individual inputs from overlapping inside narrow containers.
-// 4. Legends are tricky to style, let's use a `div` instead.
+// 3. Let wide input groups honor the minimum input width and overflow horizontally without wrapping and distorting
+//    the inputs.
+// 4. Prevent individual inputs from overlapping inside narrow containers.
+// 5. Legends are tricky to style, let's use a `div` instead.
 //    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#styling_with_css
 
 @use "../../styles/tools/form-fields/box-field-elements";
@@ -19,12 +21,12 @@
         @include foundation.fieldset();
     }
 
-    // 4.
+    // 5.
     .legend {
         @include accessibility.hide-text();
     }
 
-    // 4.
+    // 5.
     .label {
         @include foundation.label();
     }
@@ -63,11 +65,13 @@
     .isRootLayoutVertical,
     .isRootLayoutHorizontal {
         @include box-field-layout.vertical();
+
+        max-width: none; // 3.
     }
 
     .isRootLayoutVertical .field,
     .isRootLayoutHorizontal .field {
-        max-width: none; // 3.
+        max-width: none; // 4.
     }
 
     .isRootLayoutHorizontal {
@@ -80,14 +84,14 @@
 
     // Sizes
     .isRootSizeSmall {
-        @include box-field-sizes.size(small, $has-input: false);
+        @include box-field-sizes.size(small);
     }
 
     .isRootSizeMedium {
-        @include box-field-sizes.size(medium, $has-input: false);
+        @include box-field-sizes.size(medium);
     }
 
     .isRootSizeLarge {
-        @include box-field-sizes.size(large, $has-input: false);
+        @include box-field-sizes.size(large);
     }
 }

package/src/components/InputGroup/README.md

@@ -145,7 +145,7 @@ supports this kind of layout as well.
   label="Horizontal layout"
   layout="horizontal"
 >
-  <TextField label="Label" />
+  <FileInputField label="Attachment" onFilesChanged={() => {}} />
   <Button label="Submit" />
 </InputGroup>
 ```

package/src/components/Modal/Modal.jsx

@@ -1,9 +1,19 @@
 import PropTypes from 'prop-types';
-import React, { useRef } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
 import { createPortal } from 'react-dom';
-import { withGlobalProps } from '../../provider';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { classNames } from '../../helpers/classNames';
+import { transferProps } from '../../helpers/transferProps';
+import { withGlobalProps } from '../../providers/globalProps';
+import { getRootColorClassName } from '../_helpers/getRootColorClassName';
+import { dialogOnCancelHandler } from './_helpers/dialogOnCancelHandler';
+import { dialogOnClickHandler } from './_helpers/dialogOnClickHandler';
+import { dialogOnCloseHandler } from './_helpers/dialogOnCloseHandler';
+import { dialogOnKeyDownHandler } from './_helpers/dialogOnKeyDownHandler';
 import { getPositionClassName } from './_helpers/getPositionClassName';
 import { getSizeClassName } from './_helpers/getSizeClassName';
 import { useModalFocus } from './_hooks/useModalFocus';
@@ -12,44 +22,37 @@ import styles from './Modal.module.scss';
 
 const preRender = (
   children,
-  childrenWrapperRef,
-  closeButtonRef,
+  color,
+  dialogRef,
   position,
-  restProps,
   size,
+  events,
+  restProps,
 ) => (
-  <div
-    className={styles.backdrop}
-    onClick={(e) => {
-      e.preventDefault();
-      if (closeButtonRef?.current != null) {
-        closeButtonRef.current.click();
-      }
-    }}
-    role="presentation"
+  <dialog
+    {...transferProps(restProps)}
+    {...transferProps(events)}
+    className={classNames(
+      styles.root,
+      color && getRootColorClassName(color, styles),
+      getSizeClassName(size, styles),
+      getPositionClassName(position, styles),
+    )}
+    ref={dialogRef}
   >
-    <div
-      {...transferProps(restProps)}
-      className={classNames(
-        styles.root,
-        getSizeClassName(size, styles),
-        getPositionClassName(position, styles),
-      )}
-      onClick={(e) => {
-        e.stopPropagation();
-      }}
-      ref={childrenWrapperRef}
-      role="presentation"
-    >
-      {children}
-    </div>
-  </div>
+    {children}
+  </dialog>
 );
 
 export const Modal = ({
+  allowCloseOnBackdropClick,
+  allowCloseOnEscapeKey,
+  allowPrimaryActionOnEnterKey,
   autoFocus,
   children,
   closeButtonRef,
+  color,
+  dialogRef,
   portalId,
   position,
   preventScrollUnderneath,
@@ -57,45 +60,89 @@ export const Modal = ({
   size,
   ...restProps
 }) => {
-  const childrenWrapperRef = useRef();
+  const internalDialogRef = useRef();
 
-  useModalFocus(
-    autoFocus,
-    childrenWrapperRef,
-    primaryButtonRef,
-    closeButtonRef,
-  );
+  useEffect(() => {
+    internalDialogRef.current.showModal();
+  }, []);
 
+  // We need to have a reference to the dialog element to be able to call its methods,
+  // but at the same time we want to expose this reference to the parent component for
+  // case someone wants to call dialog methods from outside the component.
+  useImperativeHandle(dialogRef, () => internalDialogRef.current);
+
+  useModalFocus(autoFocus, internalDialogRef, primaryButtonRef);
   useModalScrollPrevention(preventScrollUnderneath);
 
+  const onCancel = useCallback(
+    (e) => dialogOnCancelHandler(e, closeButtonRef, restProps.onCancel),
+    [closeButtonRef, restProps.onCancel],
+  );
+  const onClick = useCallback(
+    (e) => dialogOnClickHandler(e, closeButtonRef, internalDialogRef, allowCloseOnBackdropClick),
+    [allowCloseOnBackdropClick, closeButtonRef, internalDialogRef],
+  );
+  const onClose = useCallback(
+    (e) => dialogOnCloseHandler(e, closeButtonRef, restProps.onClose),
+    [closeButtonRef, restProps.onClose],
+  );
+  const onKeyDown = useCallback(
+    (e) => dialogOnKeyDownHandler(
+      e,
+      closeButtonRef,
+      primaryButtonRef,
+      allowCloseOnEscapeKey,
+      allowPrimaryActionOnEnterKey,
+    ),
+    [
+      allowCloseOnEscapeKey,
+      allowPrimaryActionOnEnterKey,
+      closeButtonRef,
+      primaryButtonRef,
+    ],
+  );
+  const events = {
+    onCancel,
+    onClick,
+    onClose,
+    onKeyDown,
+  };
+
   if (portalId === null) {
     return preRender(
       children,
-      childrenWrapperRef,
-      closeButtonRef,
+      color,
+      internalDialogRef,
       position,
-      restProps,
       size,
+      events,
+      restProps,
     );
   }
 
   return createPortal(
     preRender(
       children,
-      childrenWrapperRef,
-      closeButtonRef,
+      color,
+      internalDialogRef,
       position,
-      restProps,
       size,
+      events,
+      restProps,
     ),
     document.getElementById(portalId),
   );
 };
 
 Modal.defaultProps = {
+  allowCloseOnBackdropClick: true,
+  allowCloseOnEscapeKey: true,
+  allowPrimaryActionOnEnterKey: true,
   autoFocus: true,
   children: null,
   closeButtonRef: null,
+  color: undefined,
+  dialogRef: null,
   portalId: null,
   position: 'center',
   preventScrollUnderneath: window.document.body,
@@ -104,6 +151,18 @@ Modal.defaultProps = {
 };
 
 Modal.propTypes = {
+  /**
+   * If `true`, the `Modal` can be closed by clicking on the backdrop.
+   */
+  allowCloseOnBackdropClick: PropTypes.bool,
+  /**
+   * If `true`, the `Modal` can be closed by pressing the Escape key.
+   */
+  allowCloseOnEscapeKey: PropTypes.bool,
+  /**
+   * If `true`, the `Modal` can be submitted by pressing the Enter key.
+   */
+  allowPrimaryActionOnEnterKey: PropTypes.bool,
   /**
    * If `true`, focus the first input element in the `Modal`, or primary button (referenced by the `primaryButtonRef`
    * prop), or other focusable element when the `Modal` is opened. If there are none or `autoFocus` is set to `false`,
@@ -121,12 +180,25 @@ Modal.propTypes = {
    */
   children: PropTypes.node,
   /**
-   * Reference to close button element. It is used to close modal when Escape key is pressed or the backdrop is clicked.
+   * Reference to close button element. It is used to close modal when Escape key is pressed
+   * or the backdrop is clicked.
    */
   closeButtonRef: PropTypes.shape({
     // eslint-disable-next-line react/forbid-prop-types
     current: PropTypes.any,
   }),
+  /**
+   * Color to clarify importance and meaning of the modal. Implements
+   * [Feedback color collection](/docs/foundation/collections#colors).
+   */
+  color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note']),
+  /**
+   * Reference to dialog element
+   */
+  dialogRef: 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.
    */

package/src/components/Modal/Modal.module.scss

@@ -1,9 +1,16 @@
+// 1. Modal uses <dialog> element that uses the browser's built-in dialog functionality, so that:
+//    * visibility of the .root element and its backdrop is managed by the browser
+//    * positioning of the .root element and its backdrop is managed by the browser
+//    * z-index of the .root element and its backdrop is not needed as dialog is rendered in browser's Top layer
+
 @use "sass:map";
 @use "../../styles/theme/typography";
 @use "../../styles/tools/accessibility";
 @use "../../styles/tools/breakpoint";
+@use "../../styles/tools/collections";
 @use "../../styles/tools/reset";
 @use "../../styles/tools/spacing";
+@use "animations";
 @use "settings";
 @use "theme";
 
@@ -13,18 +20,16 @@
         --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: var(--rui-local-max-width);
         max-height: var(--rui-local-max-height);
+        padding: 0;
         overflow-y: auto;
+        color: inherit;
+        border-width: 0;
         border-radius: settings.$border-radius;
         background: theme.$background;
         box-shadow: theme.$box-shadow;
-        transform: translateX(-50%);
         overscroll-behavior: contain;
 
         @include breakpoint.up(sm) {
@@ -32,14 +37,20 @@
         }
     }
 
-    .backdrop {
-        position: fixed;
-        top: 0;
-        left: 0;
-        z-index: settings.$backdrop-z-index;
-        width: 100vw;
-        height: 100vh;
+    .root[open] {
+        display: flex;
+
+        @media (prefers-reduced-motion: no-preference) {
+            animation: fade-in theme.$animation-duration ease-out;
+        }
+    }
+
+    .root[open]::backdrop {
         background: theme.$backdrop-background;
+
+        @media (prefers-reduced-motion: no-preference) {
+            animation: inherit;
+        }
     }
 
     .isRootSizeSmall {
@@ -64,17 +75,22 @@
     }
 
     .isRootSizeAuto {
-        width: auto;
         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 {
-        top: 50%;
-        transform: translate(-50%, -50%);
-    }
-
     .isRootPositionTop {
         top: var(--rui-local-outer-spacing);
+        bottom: auto;
+    }
+
+    @each $color in settings.$colors {
+        @include collections.generate-class(
+            $prefix: "rui-",
+            $component-name: "Modal",
+            $variant-name: "color",
+            $variant-value: $color,
+            $properties: settings.$themeable-properties,
+        );
     }
 }

package/src/components/Modal/ModalBody.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { withGlobalProps } from '../../providers/globalProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { getScrollingClassName } from './_helpers/getScrollingClassName';
 import styles from './ModalBody.module.scss';

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

@@ -1,6 +1,24 @@
+// 1. Intentionally do not provide a fallback value for the border color. Setting a fallback value (e.g. `transparent`)
+//    will result in the border being skewed at both ends.
+
+@use "settings";
+
 @layer components.modal {
     .root {
         flex: 1 1 auto;
+        border-inline: settings.$border-width solid var(--rui-local-border-color); // 1.
+
+        &:first-child {
+            border-top: settings.$border-width solid var(--rui-local-border-color); // 1.
+            border-top-left-radius: settings.$border-radius;
+            border-top-right-radius: settings.$border-radius;
+        }
+
+        &:last-child {
+            border-bottom: settings.$border-width solid var(--rui-local-border-color); // 1.
+            border-bottom-right-radius: settings.$border-radius;
+            border-bottom-left-radius: settings.$border-radius;
+        }
     }
 
     .isRootScrollingAuto,

package/src/components/Modal/ModalCloseButton.jsx

@@ -1,10 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import {
-  RUIContext,
-  withGlobalProps,
-} from '../../provider';
-import { transferProps } from '../../utils/transferProps';
+import { TranslationsContext } from '../../providers/translations';
+import { withGlobalProps } from '../../providers/globalProps';
+import { transferProps } from '../../helpers/transferProps';
 import styles from './ModalCloseButton.module.scss';
 
 export const ModalCloseButton = React.forwardRef((props, ref) => {
@@ -13,7 +11,7 @@ export const ModalCloseButton = React.forwardRef((props, ref) => {
     ...restProps
   } = props;
 
-  const { translations } = useContext(RUIContext);
+  const translations = useContext(TranslationsContext);
 
   return (
     <button

package/src/components/Modal/ModalContent.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
-import { transferProps } from '../../utils/transferProps';
+import { withGlobalProps } from '../../providers/globalProps';
+import { transferProps } from '../../helpers/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './ModalContent.module.scss';
 

package/src/components/Modal/ModalFooter.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { withGlobalProps } from '../../providers/globalProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { getJustifyClassName } from './_helpers/getJustifyClassName';
 import styles from './ModalFooter.module.scss';
 

package/src/components/Modal/ModalFooter.module.scss

@@ -1,3 +1,6 @@
+// 1. Intentionally do not provide a fallback value for the border color. Setting a fallback value (e.g. `transparent`)
+//    will result in the border being skewed at both ends.
+
 @use "settings";
 @use "theme";
 
@@ -9,10 +12,11 @@
         gap: theme.$footer-gap;
         align-items: center;
         padding: theme.$padding-y theme.$padding-x;
-        border-top: theme.$separator-width solid theme.$separator-color;
+        border: settings.$border-width solid var(--rui-local-border-color); // 1.
+        border-top: theme.$separator-width solid var(--rui-local-border-color, #{theme.$separator-color});
         border-bottom-right-radius: settings.$border-radius;
         border-bottom-left-radius: settings.$border-radius;
-        background: theme.$footer-background;
+        background: var(--rui-local-background-color, #{theme.$footer-background});
     }
 
     .isRootJustifiedToStart {

package/src/components/Modal/ModalHeader.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { withGlobalProps } from '../../providers/globalProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { getJustifyClassName } from './_helpers/getJustifyClassName';
 import styles from './ModalHeader.module.scss';
 

package/src/components/Modal/ModalHeader.module.scss

@@ -1,3 +1,7 @@
+// 1. Intentionally do not provide a fallback value for the border color. Setting a fallback value (e.g. `transparent`)
+//    will result in the border being skewed at both ends.
+
+@use "settings";
 @use "theme";
 
 @layer components.modal {
@@ -7,7 +11,10 @@
         gap: theme.$header-gap;
         align-items: baseline;
         padding: theme.$padding-y theme.$padding-x;
-        border-bottom: theme.$separator-width solid theme.$separator-color;
+        border: settings.$border-width solid var(--rui-local-border-color); // 1.
+        border-bottom: theme.$separator-width solid var(--rui-local-border-color, #{theme.$separator-color});
+        border-top-left-radius: settings.$border-radius;
+        border-top-right-radius: settings.$border-radius;
     }
 
     .isRootJustifiedToStart {

package/src/components/Modal/ModalTitle.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
-import { transferProps } from '../../utils/transferProps';
+import { withGlobalProps } from '../../providers/globalProps';
+import { transferProps } from '../../helpers/transferProps';
 import styles from './ModalTitle.module.scss';
 
 export const ModalTitle = ({