@react-ui-org/react-ui 0.48.0 → 0.50.0

package/src/lib/components/FormLayout/FormLayout.scss

@@ -24,14 +24,14 @@
     @include spacing.bottom(layouts);
 }
 
-.rootFieldLayoutVertical,
-.rootFieldLayoutHorizontal {
+.isRootFieldLayoutVertical,
+.isRootFieldLayoutHorizontal {
     display: grid;
     grid-template-columns: var(--rui-local-field-width);
     grid-row-gap: theme.$row-gap;
 }
 
-.rootFieldLayoutHorizontal {
+.isRootFieldLayoutHorizontal {
     @include breakpoint.up(forms.$horizontal-breakpoint) {
         grid-template-columns: var(--rui-local-label-width) var(--rui-local-field-width); // 1.
     }

package/src/lib/components/FormLayout/FormLayoutCustomField.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { withGlobalProps } from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
@@ -45,6 +46,7 @@ export const FormLayoutCustomField = ({
   labelForId,
   required,
   validationState,
+  ...restProps
 }) => {
   const context = useContext(FormLayoutContext);
 
@@ -54,11 +56,12 @@ export const FormLayoutCustomField = ({
 
   return (
     <div
+      {...transferProps(restProps)}
       id={id}
       className={classNames(
         styles.root,
         fullWidth && styles.isRootFullWidth,
-        context && context.layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
+        context && context.layout === 'horizontal' ? styles.isRootLayoutHorizontal : styles.isRootLayoutVertical,
         disabled && styles.isRootDisabled,
         required && styles.isRootRequired,
         getRootSizeClassName(innerFieldSize, styles),

package/src/lib/components/FormLayout/FormLayoutCustomField.scss

@@ -31,17 +31,17 @@
 }
 
 // Layouts
-.rootLayoutVertical,
-.rootLayoutHorizontal {
+.isRootLayoutVertical,
+.isRootLayoutHorizontal {
     @include box-field-layout.vertical();
 }
 
-.rootLayoutHorizontal {
+.isRootLayoutHorizontal {
     @include box-field-layout.horizontal();
 }
 
-.rootLayoutVertical .field,
-.rootLayoutHorizontal .field {
+.isRootLayoutVertical .field,
+.isRootLayoutHorizontal .field {
     width: auto;
 }
 
@@ -50,14 +50,14 @@
 }
 
 // Sizes
-.rootSizeSmall {
+.isRootSizeSmall {
     @include box-field-sizes.size(small);
 }
 
-.rootSizeMedium {
+.isRootSizeMedium {
     @include box-field-sizes.size(medium);
 }
 
-.rootSizeLarge {
+.isRootSizeLarge {
     @include box-field-sizes.size(large);
 }

package/src/lib/components/FormLayout/README.mdx

@@ -438,6 +438,17 @@ This is a demo of all components supported by FormLayout.
   }}
 </Playground>
 
+## Forwarding HTML Attributes
+
+In addition to the options below in the [component's API](#api) section, you
+can specify [React synthetic events] or **any HTML attribute you like.** All
+attributes that don't interfere with the API are forwarded to the root `<div>`
+HTML element. This enables making the component interactive and helps to improve
+its accessibility.
+
+👉 Refer to the MDN reference for the full list of supported attributes of the
+[div] element.
+
 ## API
 
 <Props table of={FormLayout} />
@@ -472,3 +483,5 @@ FormLayoutCustomField can be styled using a small subset of
 [fragments]: https://reactjs.org/docs/fragments.html
 [rui-232]: https://github.com/react-ui-org/react-ui/issues/232
 [rui-265]: https://github.com/react-ui-org/react-ui/issues/265
+[React synthetic events]: https://reactjs.org/docs/events.html
+[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes

package/src/lib/components/Grid/Grid.jsx

@@ -15,7 +15,6 @@ export const Grid = ({
   children,
   columnGap,
   columns,
-  id,
   justifyContent,
   justifyItems,
   rowGap,
@@ -30,7 +29,6 @@ export const Grid = ({
   return (
     <Tag
       {...transferProps(restProps)}
-      id={id}
       className={styles.root}
       style={{
         ...generateResponsiveCustomProperties(columns, 'columns'),
@@ -59,7 +57,6 @@ Grid.defaultProps = {
   children: null,
   columnGap: 4,
   columns: '1fr',
-  id: undefined,
   justifyContent: undefined,
   justifyItems: undefined,
   rowGap: 4,
@@ -152,10 +149,6 @@ Grid.propTypes = {
       x3l: PropTypes.string,
     }),
   ]),
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
   /**
    * Content justification. Accepts any valid value of `justify-content` CSS property.
    * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more.

package/src/lib/components/Grid/GridSpan.jsx

@@ -9,7 +9,6 @@ import styles from './Grid.scss';
 export const GridSpan = ({
   children,
   columns,
-  id,
   rows,
   tag: Tag,
   ...restProps
@@ -21,7 +20,6 @@ export const GridSpan = ({
   return (
     <Tag
       {...transferProps(restProps)}
-      id={id}
       className={styles.span}
       style={{
         ...generateResponsiveCustomProperties(columns, 'column-span'),
@@ -39,7 +37,6 @@ export const GridSpan = ({
 GridSpan.defaultProps = {
   children: null,
   columns: 1,
-  id: undefined,
   rows: 1,
   tag: 'div',
 };
@@ -64,10 +61,6 @@ GridSpan.propTypes = {
       x3l: PropTypes.number,
     }),
   ]),
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
   /**
    * Number of rows to span.
    */

package/src/lib/components/Grid/README.mdx

@@ -263,6 +263,17 @@ with responsive columns and rows.
 👉 `autoFlow` (used in the example above) implements the `grid-auto-flow` CSS
 property. Check [MDN][grid-auto-flow] to fully understand available options.
 
+## Forwarding HTML Attributes
+
+In addition to the options below in the [component's API](#api) section, you
+can specify [React synthetic events] or **any HTML attribute you like.** All
+attributes that don't interfere with the API are forwarded to the HTML element
+of your choice provided by `tag`, which is `<div>` by default. It enables making
+the component interactive and helps to improve its accessibility.
+
+👉 Refer to the MDN reference for the full list of supported attributes of the
+[div] element or [any other][all-html-elements] element of your choice.
+
 ## API
 
 <Props table of={Grid} />
@@ -283,3 +294,6 @@ Wrapper for content that should span multiple rows or columns.
 [justify-items]: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items
 [repeat]: https://developer.mozilla.org/en-US/docs/Web/CSS/repeat
 [minmax]: https://developer.mozilla.org/en-US/docs/Web/CSS/minmax
+[React synthetic events]: https://reactjs.org/docs/events.html
+[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[all-html-elements]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

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

@@ -5,15 +5,16 @@ import React, {
 } from 'react';
 import { createPortal } from 'react-dom';
 import { withGlobalProps } from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import styles from './Modal.scss';
 
 const preRender = (
   children,
   childrenWrapperRef,
-  id,
   closeButtonRef,
   position,
+  restProps,
   size,
 ) => {
   const sizeClass = (modalSize) => {
@@ -47,7 +48,6 @@ const preRender = (
   return (
     <div
       className={styles.backdrop}
-      id={id}
       onClick={() => {
         if (closeButtonRef?.current != null) {
           closeButtonRef.current.click();
@@ -56,6 +56,7 @@ const preRender = (
       role="presentation"
     >
       <div
+        {...transferProps(restProps)}
         className={classNames(
           styles.root,
           sizeClass(size),
@@ -77,11 +78,11 @@ export const Modal = ({
   autoFocus,
   children,
   closeButtonRef,
-  id,
   portalId,
   position,
   primaryButtonRef,
   size,
+  ...restProps
 }) => {
   const childrenWrapperRef = useRef();
 
@@ -109,7 +110,7 @@ export const Modal = ({
         const childrenWrapperElement = childrenWrapperRef.current;
         const childrenElements = childrenWrapperElement.querySelectorAll('*');
         const formFieldEl = Array.from(childrenElements).find(
-          (element) => ['INPUT', 'TEXTAREA', 'SELECT'].includes(element.nodeName),
+          (element) => ['INPUT', 'TEXTAREA', 'SELECT'].includes(element.nodeName) && !element.disabled,
         );
 
         if (formFieldEl) {
@@ -130,9 +131,9 @@ export const Modal = ({
     return preRender(
       children,
       childrenWrapperRef,
-      id,
       closeButtonRef,
       position,
+      restProps,
       size,
     );
   }
@@ -141,9 +142,9 @@ export const Modal = ({
     preRender(
       children,
       childrenWrapperRef,
-      id,
       closeButtonRef,
       position,
+      restProps,
       size,
     ),
     document.getElementById(portalId),
@@ -154,7 +155,6 @@ Modal.defaultProps = {
   autoFocus: true,
   children: null,
   closeButtonRef: null,
-  id: undefined,
   portalId: null,
   position: 'center',
   primaryButtonRef: null,
@@ -184,10 +184,6 @@ Modal.propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     current: PropTypes.any,
   }),
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
   /**
    * If set, modal is rendered in the React Portal with that ID.
    */

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

@@ -1,6 +1,7 @@
 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';
@@ -8,8 +9,8 @@ import styles from './ModalBody.scss';
 
 export const ModalBody = ({
   children,
-  id,
   scrolling,
+  ...restProps
 }) => {
   if (isChildrenEmpty(children)) {
     return null;
@@ -17,11 +18,11 @@ export const ModalBody = ({
 
   return (
     <div
+      {...transferProps(restProps)}
       className={classNames(
         styles.root,
         getScrollingClassName(scrolling, styles),
       )}
-      id={id}
     >
       {children}
     </div>
@@ -30,7 +31,6 @@ export const ModalBody = ({
 
 ModalBody.defaultProps = {
   children: null,
-  id: undefined,
   scrolling: 'auto',
 };
 
@@ -45,10 +45,6 @@ ModalBody.propTypes = {
    * At most one nested element is allowed. If none are provided nothing is rendered.
    */
   children: PropTypes.node,
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
   /**
    * Scrolling mode:
    *

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

@@ -10,7 +10,6 @@ import styles from './ModalCloseButton.scss';
 export const ModalCloseButton = React.forwardRef((props, ref) => {
   const {
     disabled,
-    id,
     ...restProps
   } = props;
 
@@ -22,7 +21,6 @@ export const ModalCloseButton = React.forwardRef((props, ref) => {
       type="button"
       className={styles.root}
       disabled={disabled}
-      id={id}
       ref={ref}
       title={translations.ModalCloseButton.close}
     >
@@ -33,8 +31,6 @@ export const ModalCloseButton = React.forwardRef((props, ref) => {
 
 ModalCloseButton.defaultProps = {
   disabled: false,
-  id: undefined,
-  ref: undefined,
 };
 
 ModalCloseButton.propTypes = {
@@ -42,18 +38,6 @@ ModalCloseButton.propTypes = {
    * If `true`, close button will be disabled.
    */
   disabled: PropTypes.bool,
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
-  /**
-   * Reference forwarded to the `button` element.
-   */
-  ref: PropTypes.oneOfType([
-    PropTypes.func,
-    // eslint-disable-next-line react/forbid-prop-types
-    PropTypes.shape({ current: PropTypes.any }),
-  ]),
 };
 
 export const ModalCloseButtonWithGlobalProps = withGlobalProps(ModalCloseButton, 'ModalCloseButton');

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

@@ -2,11 +2,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { transferProps } from '../_helpers/transferProps';
 import styles from './ModalContent.scss';
 
 export const ModalContent = ({
   children,
-  id,
+  ...restProps
 }) => {
   if (isChildrenEmpty(children)) {
     return null;
@@ -14,8 +15,8 @@ export const ModalContent = ({
 
   return (
     <div
+      {...transferProps(restProps)}
       className={styles.root}
-      id={id}
     >
       {children}
     </div>
@@ -24,7 +25,6 @@ export const ModalContent = ({
 
 ModalContent.defaultProps = {
   children: null,
-  id: undefined,
 };
 
 ModalContent.propTypes = {
@@ -32,10 +32,6 @@ ModalContent.propTypes = {
    * Content of the modal.
    */
   children: PropTypes.node,
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
 };
 
 export const ModalContentWithGlobalProps = withGlobalProps(ModalContent, 'ModalContent');

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

@@ -1,28 +1,28 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { getJustifyClassName } from './_helpers/getJustifyClassName';
 import styles from './ModalFooter.scss';
 
 export const ModalFooter = ({
   children,
-  id,
   justify,
+  ...restProps
 }) => (
   <div
+    {...transferProps(restProps)}
     className={classNames(
       styles.root,
       getJustifyClassName(justify, styles),
     )}
-    id={id}
   >
     {children}
   </div>
 );
 
 ModalFooter.defaultProps = {
-  id: undefined,
   justify: 'center',
 };
 
@@ -31,10 +31,6 @@ ModalFooter.propTypes = {
    * Content of the footer (preferably nested `Button` elements).
    */
   children: PropTypes.node.isRequired,
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
   /**
    * Horizontal alignment (distribution) of individual buttons.
    */

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

@@ -14,22 +14,22 @@
     background: theme.$footer-background;
 }
 
-.isJustifiedToStart {
+.isRootJustifiedToStart {
     justify-content: flex-start;
 }
 
-.isJustifiedToCenter {
+.isRootJustifiedToCenter {
     justify-content: center;
 }
 
-.isJustifiedToEnd {
+.isRootJustifiedToEnd {
     justify-content: flex-end;
 }
 
-.isJustifiedToSpaceBetween {
+.isRootJustifiedToSpaceBetween {
     justify-content: space-between;
 }
 
-.isJustifiedToStretch {
+.isRootJustifiedToStretch {
     display: block;
 }

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

@@ -3,28 +3,28 @@ import React from 'react';
 import {
   withGlobalProps,
 } from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { getJustifyClassName } from './_helpers/getJustifyClassName';
 import styles from './ModalHeader.scss';
 
 export const ModalHeader = ({
   children,
-  id,
   justify,
+  ...restProps
 }) => (
   <div
+    {...transferProps(restProps)}
     className={classNames(
       styles.root,
       getJustifyClassName(justify, styles),
     )}
-    id={id}
   >
     {children}
   </div>
 );
 
 ModalHeader.defaultProps = {
-  id: undefined,
   justify: 'space-between',
 };
 
@@ -33,10 +33,6 @@ ModalHeader.propTypes = {
    * Content of the header (preferably ModalTitle and ModalCloseButton).
    */
   children: PropTypes.node.isRequired,
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
   /**
    * Horizontal alignment (distribution) of individual buttons.
    */

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

@@ -9,22 +9,22 @@
     border-bottom: theme.$separator-width solid theme.$separator-color;
 }
 
-.isJustifiedToStart {
+.isRootJustifiedToStart {
     justify-content: flex-start;
 }
 
-.isJustifiedToCenter {
+.isRootJustifiedToCenter {
     justify-content: center;
 }
 
-.isJustifiedToEnd {
+.isRootJustifiedToEnd {
     justify-content: flex-end;
 }
 
-.isJustifiedToSpaceBetween {
+.isRootJustifiedToSpaceBetween {
     justify-content: space-between;
 }
 
-.isJustifiedToStretch {
+.isRootJustifiedToStretch {
     display: block;
 }

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

@@ -3,24 +3,27 @@ import React from 'react';
 import {
   withGlobalProps,
 } from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
 import styles from './ModalTitle.scss';
 
 export const ModalTitle = ({
   children,
-  id,
   level,
+  ...restProps
 }) => {
   const HeadingTag = `h${level}`;
 
   return (
-    <HeadingTag className={styles.root} id={id}>
+    <HeadingTag
+      {...transferProps(restProps)}
+      className={styles.root}
+    >
       {children}
     </HeadingTag>
   );
 };
 
 ModalTitle.defaultProps = {
-  id: undefined,
   level: 2,
 };
 
@@ -29,10 +32,6 @@ ModalTitle.propTypes = {
    * Content of the header (preferably ModalTitle and ModalCloseButton).
    */
   children: PropTypes.node.isRequired,
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
   /**
    * Optional heading level. Preferably `1` or `2` should be used, see
    * [W3C recommendation](https://github.com/w3c/aria-practices/issues/551#issuecomment-365134527).

package/src/lib/components/Modal/README.mdx

@@ -115,10 +115,10 @@ See [API](#api) for all available options.
 - **Modal actions** should correspond to the modal purpose, too. E.g. “Delete”
   tells better what happens rather than “OK”.
 
-- Modal **automatically focuses the first form field** by default which allows
-  users to confirm the modal by hitting the enter key. When no field is found
-  then the primary button (in the footer) is focused. To turn this feature off,
-  set the `autofocus` prop to `false`.
+- Modal **automatically focuses the first non-disabled form field** by default
+  which allows users to confirm the modal by hitting the enter key. When no
+  field is found then the primary button (in the footer) is focused. To turn
+  this feature off, set the `autofocus` prop to `false`.
 
 - **Avoid stacking** of modals. While it may technically work, the modal is just
   not designed for that.
@@ -841,8 +841,9 @@ Autofocus is implemented to enhance the user experience by automatically
 focussing an element within the modal.
 
 How does it work? It tries to find `input`, `textarea`, and `select` elements
-inside of Modal and moves focus into the first found. If none is found and the
-`primaryButtonRef` prop on Modal is set, then the primary button is focused.
+inside of Modal and moves focus onto the first non-disabled one. If none is
+found and the `primaryButtonRef` prop on Modal is set, then the primary button
+is focused.
 
 Autofocus is enabled by default, so if you want to control the focus of
 elements manually, set the `autoFocus` prop on Modal to `false`.
@@ -1017,6 +1018,26 @@ opened.
 
 <!-- markdownlint-disable MD024 -->
 
+## Forwarding HTML Attributes
+
+In addition to the options below in the [component's API](#api) section, you
+can specify [React synthetic events] or **any HTML attribute you like.** All
+attributes that don't interfere with the API are forwarded to the:
+
+- `<div>` HTML element in case of the `Modal` component. This `<div>` is not the
+root, but its first child which represents the modal window.
+- root `<div>` HTML element in case of `ModalHeader`, `ModalBody`, `ModalContent`
+and `ModalFooter` components.
+- heading HTML element, which level can be specified through `level` option, in
+case of the `ModalTitle` component.
+- native HTML `<button>` in case of the `ModalCloseButton` component.
+
+This enables making the component interactive and helps to improve its
+accessibility.
+
+👉 Refer to the MDN reference for the full list of supported attributes of the
+[div], [heading] and [button] element.
+
 ## API
 
 <Props table of={Modal} />
@@ -1068,3 +1089,8 @@ opened.
 | `--rui-Modal--large__width`                          | Width of large modal                                          |
 | `--rui-Modal--fullscreen__width`                     | Width of fullscreen modal                                     |
 | `--rui-Modal--fullscreen__height`                    | Height of fullscreen modal                                    |
+
+[React synthetic events]: https://reactjs.org/docs/events.html
+[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[heading]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#attributes
+[button]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes