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

package/src/components/FileInputField/README.md

@@ -13,7 +13,7 @@ import { FileInputField } from '@react-ui-org/react-ui';
 And use it:
 
 ```docoff-react-preview
-<FileInputField label="Attachment" />
+<FileInputField id="my-file" label="Attachment" onFilesChanged={() => {}} />
 ```
 
 See [API](#api) for all available options.
@@ -48,12 +48,37 @@ layout perspective, FileInputFields work just like any other form fields.
 
 ## Sizes
 
+Aside from the default (medium) size, two additional sizes are available: small
+and large.
+
+```docoff-react-preview
+<FileInputField
+  id="my-file-small"
+  label="Attachment"
+  onFilesChanged={() => {}}
+  size="small"
+/>
+<FileInputField
+  id="my-file-medium"
+  label="Attachment"
+  onFilesChanged={() => {}}
+/>
+<FileInputField
+  id="my-file-large"
+  label="Attachment"
+  onFilesChanged={() => {}}
+  size="large"
+/>
+```
+
 Full-width fields span the full width of a parent:
 
 ```docoff-react-preview
 <FileInputField
   fullWidth
+  id="my-file"
   label="First name"
+  onFilesChanged={() => {}}
 />
 ```
 
@@ -68,8 +93,10 @@ dangerous to hide labels from users in most cases. Keep in mind you should
 
 ```docoff-react-preview
 <FileInputField
+  id="my-file"
   isLabelVisible={false}
   label="Attachment"
+  onFilesChanged={() => {}}
 />
 ```
 
@@ -81,14 +108,18 @@ supports this kind of layout as well.
 
 ```docoff-react-preview
 <FileInputField
+  id="my-file-horizontal"
   label="Attachment"
   layout="horizontal"
+  onFilesChanged={() => {}}
 />
 <FileInputField
   fullWidth
+  id="my-file-horizontal-full-width"
   isLabelVisible={false}
   label="Attachment"
   layout="horizontal"
+  onFilesChanged={() => {}}
 />
 ```
 
@@ -100,18 +131,24 @@ filled.
 ```docoff-react-preview
 <FileInputField
   helpText="Choose one or more files to upload."
+  id="my-file-help-text"
   label="Attachment"
+  onFilesChanged={() => {}}
 />
 <FileInputField
   helpText="Choose one or more files to upload."
+  id="my-file-help-text-horizontal"
   label="Attachment"
   layout="horizontal"
+  onFilesChanged={() => {}}
 />
 <FileInputField
   fullWidth
   helpText="Choose one or more files to upload."
+  id="my-file-help-text-horizontal-full-width"
   label="Attachment"
   layout="horizontal"
+  onFilesChanged={() => {}}
 />
 ```
 
@@ -126,17 +163,23 @@ have.
 
 ```docoff-react-preview
 <FileInputField
+  id="my-file-valid"
   label="Attachment"
+  onFilesChanged={() => {}}
   validationState="valid"
   validationText="Looks good!"
 />
 <FileInputField
+  id="my-file-invalid"
   label="Attachment"
+  onFilesChanged={() => {}}
   validationState="invalid"
   validationText="Your file is too big. Please select something smaller."
 />
 <FileInputField
+  id="my-file-warning"
   label="Attachment"
+  onFilesChanged={() => {}}
   validationState="warning"
   validationText={`
     You selected more than 10 files.
@@ -152,7 +195,44 @@ It's possible to disable the whole input.
 ```docoff-react-preview
 <FileInputField
   disabled
+  id="my-file"
   label="Attachment"
+  onFilesChanged={() => {}}
+/>
+```
+
+## Handling Files
+
+Files selected by the user are handled by providing a custom function to the
+`onFilesChanged` prop. The `onFilesChanged` function is then called on the
+`change` event of the `input` element and on the `drop` event of the root
+`div` element.
+
+```docoff-react-preview
+<FileInputField
+  id="my-file"
+  label="Attachment"
+  onFilesChanged={(files, event) => {
+    // Do something with the files…
+    console.log('Files selected:', files);
+  }}
+/>
+```
+
+### Multiple Files
+
+By default, users can select only one file. To allow selecting multiple files,
+set the `multiple` prop to `true`.
+
+```docoff-react-preview
+<FileInputField
+  id="my-files"
+  label="Attachment"
+  multiple
+  onFilesChanged={(files, event) => {
+    // Do something with the files…
+    console.log('Files selected:', files);
+  }}
 />
 ```
 
@@ -172,8 +252,9 @@ to improve its accessibility.
     Choose up to 10 files. Allowed extensions are .pdf, .jpg, .jpeg, or .png.
     Size limit is 10 MB.
   `}
+  id="my-file"
   label="Attachment"
-  multiple
+  onFilesChanged={() => {}}
 />
 ```
 

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 '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+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 '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+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 '../../providers/globalProps';
-import { transferProps } from '../../utils/transferProps';
+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 '../../providers/globalProps';
-import { transferProps } from '../../utils/transferProps';
+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

@@ -4,8 +4,8 @@ import React, {
   useMemo,
 } from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+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/InputGroup/InputGroup.module.scss

@@ -84,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 { classNames } from '../../helpers/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { withGlobalProps } from '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+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 '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+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

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { TranslationsContext } from '../../providers/translations';
 import { withGlobalProps } from '../../providers/globalProps';
-import { transferProps } from '../../utils/transferProps';
+import { transferProps } from '../../helpers/transferProps';
 import styles from './ModalCloseButton.module.scss';
 
 export const ModalCloseButton = React.forwardRef((props, ref) => {