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

package/src/components/FileInputField/FileInputField.module.scss

@@ -1,8 +1,16 @@
+// 1. The drop zone is constructed as a button to support keyboard operation.
+// 2. Prevent pointer events on all children of the root element to not to trigger drag events on children.
+
 @use "../../styles/tools/form-fields/box-field-elements";
 @use "../../styles/tools/form-fields/box-field-layout";
+@use "../../styles/tools/form-fields/box-field-sizes";
 @use "../../styles/tools/form-fields/foundation";
 @use "../../styles/tools/form-fields/variants";
 @use "../../styles/tools/accessibility";
+@use "../../styles/tools/links";
+@use "../../styles/tools/transition";
+@use "../../styles/tools/reset";
+@use "settings";
 
 @layer components.file-input-field {
     // Foundation
@@ -18,6 +26,54 @@
         @include box-field-elements.input-container();
     }
 
+    .input {
+        @include accessibility.hide-text();
+    }
+
+    .dropZone {
+        --rui-local-color: #{settings.$drop-zone-color};
+        --rui-local-border-color: #{settings.$drop-zone-border-color};
+        --rui-local-background: #{settings.$drop-zone-background-color};
+
+        @include reset.button(); // 1.
+        @include box-field-elements.base();
+
+        display: flex;
+        align-items: center;
+        justify-content: start;
+        font-weight: settings.$drop-zone-font-weight;
+        font-size: var(--rui-local-font-size);
+        line-height: settings.$drop-zone-line-height;
+        font-family: settings.$drop-zone-font-family;
+        border-style: dashed;
+    }
+
+    .isRootDragging .dropZone {
+        --rui-local-border-color: #{settings.$drop-zone-dragging-border-color};
+    }
+
+    .isRootDisabled .dropZone {
+        cursor: settings.$drop-zone-disabled-cursor;
+    }
+
+    .root:not(.isRootDisabled, .isRootDragging) .dropZone:hover {
+        --rui-local-border-color: #{settings.$drop-zone-hover-border-color};
+    }
+
+    .root:not(.isRootDisabled, .isRootDragging) .dropZone:active {
+        --rui-local-border-color: #{settings.$drop-zone-active-border-color};
+    }
+
+    .dropZoneLink {
+        @include links.base();
+
+        &::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+        }
+    }
+
     .helpText,
     .validationText {
         @include foundation.help-text();
@@ -28,6 +84,18 @@
     }
 
     // States
+    .isRootDisabled {
+        --rui-local-color: #{settings.$drop-zone-disabled-color};
+        --rui-local-border-color: #{settings.$drop-zone-disabled-border-color};
+        --rui-local-background: #{settings.$drop-zone-disabled-background-color};
+
+        @include variants.disabled-state();
+    }
+
+    .isRootDisabled .dropZoneLink {
+        cursor: inherit;
+    }
+
     .isRootStateInvalid {
         @include variants.validation(invalid);
     }
@@ -56,10 +124,28 @@
     }
 
     .isRootFullWidth {
-        @include box-field-layout.full-width();
+        @include box-field-layout.full-width($input-element-selector: ".dropZone");
     }
 
     .isRootInFormLayout {
         @include box-field-layout.in-form-layout();
     }
+
+    // Sizes
+    .isRootSizeSmall {
+        @include box-field-sizes.size(small);
+    }
+
+    .isRootSizeMedium {
+        @include box-field-sizes.size(medium);
+    }
+
+    .isRootSizeLarge {
+        @include box-field-sizes.size(large);
+    }
+
+    // Groups
+    .isRootGrouped {
+        @include box-field-elements.in-group-layout($input-element-selector: ".dropZone");
+    }
 }

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

@@ -300,7 +300,7 @@ This is a demo of all components supported by FormLayout.
 
 ```docoff-react-preview
 React.createElement(() => {
-  const [fieldLayout, setFieldLayout] = React.useState('vertical');
+  const [fieldLayout, setFieldLayout] = React.useState('horizontal');
   const [fruit, setFruit] = React.useState('apple');
   const [isDeliveryAddress, setIsDeliveryAddress] = React.useState(true);
   const [receiveNewsletter, setReceiveNewsletter] = React.useState(true);
@@ -323,16 +323,16 @@ React.createElement(() => {
       <Toolbar>
         <ToolbarItem>
           <ButtonGroup>
-            <Button
-              color={fieldLayout === 'vertical' ? 'selected' : 'secondary'}
-              label="Vertical layout"
-              onClick={() => setFieldLayout('vertical')}
-            />
             <Button
               color={fieldLayout === 'horizontal' ? 'selected' : 'secondary'}
               label="Horizontal layout"
               onClick={() => setFieldLayout('horizontal')}
             />
+            <Button
+              color={fieldLayout === 'vertical' ? 'selected' : 'secondary'}
+              label="Vertical layout"
+              onClick={() => setFieldLayout('vertical')}
+            />
           </ButtonGroup>
         </ToolbarItem>
       </Toolbar>
@@ -388,7 +388,9 @@ React.createElement(() => {
           rows={3}
         />
         <FileInputField
+          id="my-file"
           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 id="my-file" 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.
    */