@react-ui-org/react-ui 0.55.1 → 0.56.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-ui-org/react-ui",
   "description": "React UI is a themeable UI library for React apps.",
-  "version": "0.55.1",
+  "version": "0.56.0",
   "keywords": [
     "react",
     "ui",
@@ -29,8 +29,7 @@
     "url": "https://github.com/react-ui-org/react-ui"
   },
   "engines": {
-    "node": ">=18",
-    "npm": ">=9"
+    "node": ">=20"
   },
   "scripts": {
     "build": "webpack --mode=production && webpack --mode=development",
@@ -54,54 +53,57 @@
   },
   "peerDependencies": {
     "prop-types": "^15.8.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.10",
-    "@babel/core": "^7.22.11",
-    "@babel/eslint-parser": "^7.22.11",
+    "@babel/cli": "^7.24.7",
+    "@babel/core": "^7.24.7",
+    "@babel/eslint-parser": "^7.24.7",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-transform-spread": "^7.22.5",
-    "@babel/preset-env": "^7.22.14",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/register": "^7.22.5",
+    "@babel/plugin-transform-spread": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/register": "^7.24.6",
+    "@stylistic/stylelint-config": "^1.0.1",
     "@svgr/webpack": "^8.1.0",
-    "@testing-library/jest-dom": "^6.1.2",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@visionappscz/eslint-config-visionapps": "^1.7.0",
-    "@visionappscz/stylelint-config": "^3.0.0",
-    "autoprefixer": "^10.4.15",
-    "babel-jest": "^29.6.4",
+    "@visionappscz/stylelint-config": "^4.0.0-beta1",
+    "autoprefixer": "^10.4.19",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
-    "core-js": "^3.32.1",
-    "css-loader": "^6.10.0",
-    "eslint": "^8.48.0",
+    "core-js": "^3.37.1",
+    "css-loader": "^7.1.2",
+    "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-markdown": "^3.0.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.6.4",
-    "jest-environment-jsdom": "^29.6.4",
-    "markdownlint-cli2": "~0.9.2",
-    "mini-css-extract-plugin": "^2.7.6",
-    "postcss": "^8.4.29",
-    "postcss-loader": "^7.3.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "markdownlint-cli2": "^0.13.0",
+    "mini-css-extract-plugin": "^2.9.0",
+    "postcss": "^8.4.39",
+    "postcss-loader": "^8.1.1",
     "prop-types": "^15.8.1",
-    "sass": "^1.66.1",
-    "sass-loader": "^13.3.2",
-    "stylelint": "^14.16.1",
-    "stylelint-webpack-plugin": "^4.1.1",
-    "terser-webpack-plugin": "^5.3.9",
-    "webpack": "^5.69.1",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "sass": "^1.77.6",
+    "sass-loader": "^14.2.1",
+    "stylelint": "^16.7.0",
+    "stylelint-webpack-plugin": "^5.0.1",
+    "terser-webpack-plugin": "^5.3.10",
+    "webpack": "^5.92.1",
     "webpack-cli": "^5.1.4",
-    "webpack-visualizer-plugin2": "^1.0.0"
+    "webpack-visualizer-plugin2": "^1.1.0"
   },
   "resolutions": {
-    "@babel/plugin-transform-spread": "7.12.1"
+    "@babel/plugin-transform-spread": "7.24.7"
   }
 }

package/src/components/Alert/Alert.jsx

@@ -4,8 +4,8 @@ import {
   RUIContext,
   withGlobalProps,
 } from '../../provider';
-import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
+import { transferProps } from '../../utils/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import styles from './Alert.module.scss';
 

package/src/components/Alert/README.md

@@ -171,10 +171,11 @@ React.createElement(() => {
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify **any HTML attribute you like.** All attributes that don't interfere
-with the API of the React component are forwarded to the root `<div>` HTML
-element. This enables making the component interactive and helps to improve
-its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't
+interfere with the API of the React component and that aren't filtered out by
+[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
+root `<div>` HTML element. This enables making the component interactive and
+helps to improve its accessibility.
 
 👉 For the full list of supported attributes refer to:
 

package/src/components/Badge/Badge.jsx

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

package/src/components/Badge/README.md

@@ -87,10 +87,11 @@ Medium-emphasis priority to provide additional context in an unobtrusive way.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify **any HTML attribute you like.** All attributes that don't interfere
-with the API of the React component are forwarded to the root `<div>` HTML
-element. This enables making the component interactive and helps to improve
-its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't
+interfere with the API of the React component and that aren't filtered out by
+[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
+root `<div>` HTML element. This enables making the component interactive and
+helps to improve its accessibility.
 
 👉 For the full list of supported attributes refer to:
 

package/src/components/Button/Button.jsx

@@ -2,10 +2,10 @@ 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 { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
-import { transferProps } from '../_helpers/transferProps';
 import { ButtonGroupContext } from '../ButtonGroup';
 import { InputGroupContext } from '../InputGroup/InputGroupContext';
 import getRootPriorityClassName from '../_helpers/getRootPriorityClassName';

package/src/components/Button/README.md

@@ -23,10 +23,13 @@ See [API](#api) for all available options.
 - Use **short yet comprehensible labels** to make buttons fit small screens.
 
 - Since buttons are there to take actions, **use a verb** to make it obvious
-  what your buttons do.
+    what your buttons do.
 
 - **Don't overwhelm your UI** with too many high-emphasis actions. There should
-  always be one but chances are that having more of them is not necessary.
+    always be one but chances are that having more of them is not necessary.
+
+- Ensure the **button action is well recognazible** across your target audience.
+    This is especially important when using the button [with an icon only](#icon-buttons).
 
 ## Priorities
 
@@ -144,8 +147,11 @@ before or after the button's label.
 
 ### Icon Buttons
 
-For clear and simple actions, buttons can visually consist just of an icon.
-Label remains mandatory to keep the button accessible.
+With a common and well-known icon, buttons can visually consist just of an icon.
+Label remains mandatory to keep the button accessible when using assistive
+technologies.
+
+👉 Use `labelVisibility="xs"` to make label always visible.
 
 ```docoff-react-preview
   <Button
@@ -161,6 +167,11 @@ of your choice and display label once you know there is enough room for it.
 📐 Try resizing your browser to see how label visibility changes.
 
 ```docoff-react-preview
+  <Button
+    label="Label always visible"
+    labelVisibility="xs"
+    beforeLabel={<rui-icon icon="pencil" />}
+  />
   <Button
     label="Label visible from sm up"
     labelVisibility="sm"
@@ -181,16 +192,6 @@ of your choice and display label once you know there is enough room for it.
     labelVisibility="xl"
     beforeLabel={<rui-icon icon="pencil" />}
   />
-  <Button
-    label="Label visible from x2l up"
-    labelVisibility="x2l"
-    beforeLabel={<rui-icon icon="pencil" />}
-  />
-  <Button
-    label="Label visible from x3l up"
-    labelVisibility="x3l"
-    beforeLabel={<rui-icon icon="pencil" />}
-  />
 ```
 
 ## Buttons with Badges
@@ -388,10 +389,11 @@ animation is made.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify **any HTML attribute you like.** All attributes that don't interfere
-with the API of the React component are forwarded to the root `<button>` HTML
-element. This enables making the component interactive and helps to improve
-its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't
+interfere with the API of the React component and that aren't filtered out by
+[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
+root `<button>` HTML element. This enables making the component interactive and
+helps to improve its accessibility.
 
 👉 For the full list of supported attributes refer to:
 

package/src/components/Button/_base.scss

@@ -45,10 +45,7 @@
 
     .feedbackIcon {
         position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
+        inset: 0;
         z-index: 1;
         align-items: center;
     }

package/src/components/ButtonGroup/ButtonGroup.jsx

@@ -4,9 +4,9 @@ import React, {
 } from 'react';
 import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
+import { transferProps } from '../../utils/transferProps';
 import getRootPriorityClassName from '../_helpers/getRootPriorityClassName';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
-import { transferProps } from '../_helpers/transferProps';
 import styles from './ButtonGroup.module.scss';
 import { ButtonGroupContext } from './ButtonGroupContext';
 

package/src/components/ButtonGroup/README.md

@@ -249,10 +249,11 @@ and communicating the state of individual options.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify **any HTML attribute you like.** All attributes that don't interfere
-with the API of the React component are forwarded to the root `<div>` HTML
-element. This enables making the component interactive and helps to improve
-its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't
+interfere with the API of the React component and that aren't filtered out by
+[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
+root `<div>` HTML element. This enables making the component interactive and
+helps to improve its accessibility.
 
 👉 For the full list of supported attributes refer to:
 

package/src/components/Card/Card.jsx

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

package/src/components/Card/CardBody.jsx

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

package/src/components/Card/CardFooter.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
+import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
-import { transferProps } from '../_helpers/transferProps';
 import styles from './Card.module.scss';
 
 export const CardFooter = ({

package/src/components/Card/README.md

@@ -255,10 +255,11 @@ its interactive elements to disallow user's interaction.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify **any HTML attribute you like.** All attributes that don't interfere
-with the API of the React component are forwarded to the root `<div>` HTML
-element. This enables making the component interactive and helps to improve
-its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't
+interfere with the API of the React component and that aren't filtered out by
+[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
+root `<div>` HTML element. This enables making the component interactive and
+helps to improve its accessibility.
 
 👉 For the full list of supported attributes refer to:
 

package/src/components/CheckboxField/CheckboxField.jsx

@@ -2,8 +2,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 { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
-import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import styles from './CheckboxField.module.scss';
 
@@ -114,7 +114,7 @@ CheckboxField.propTypes = {
   /**
    * Checkbox field label.
    */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
   /**
    * Placement of the label relative to the input.
    */

package/src/components/CheckboxField/README.md

@@ -45,6 +45,9 @@ See [API](#api) for all available options.
   send me any emails” which would mean that the user needs to turn the
   checkbox **on** in order for something **not** to happen.
 
+- **Use text labels** unless it is necessary to wrap text label into
+  Popover-like to component to provide additional info about the field.
+
 - Only make the CheckboxField's label invisible when there is **another visual
   clue** to guide users through toggling the input.
 
@@ -172,10 +175,11 @@ Disabled state makes the input unavailable.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify **any HTML attribute you like.** All attributes that don't interfere
-with the API of the React component are forwarded to the root `<input>` HTML
-element. This enables making the component interactive and helps to improve
-its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't
+interfere with the API of the React component and that aren't filtered out by
+[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
+`<input>` HTML element. This enables making the component interactive and helps
+to improve its accessibility.
 
 👉 For the full list of supported attributes refer to:
 

package/src/components/FileInputField/FileInputField.jsx

@@ -2,9 +2,9 @@ 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 { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
-import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import styles from './FileInputField.module.scss';
 
@@ -123,9 +123,9 @@ FileInputField.propTypes = {
    */
   isLabelVisible: PropTypes.bool,
   /**
-   * Text field label.
+   * File input field label.
    */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
   /**
    * Layout of the field.
    *

package/src/components/FileInputField/README.md

@@ -27,6 +27,9 @@ See [API](#api) for all available options.
   polite phrases like _Please attach your file here_. Short labels will help
   your users accomplish their task faster.
 
+- **Use text labels** unless it is necessary to wrap text label into
+  Popover-like to component to provide additional info about the field.
+
 - Only make the FileInputField's label invisible when there is **another visual
   clue** to guide users through filling the input.
 
@@ -156,10 +159,11 @@ It's possible to disable the whole input.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify **any HTML attribute you like.** All attributes that don't interfere
-with the API of the React component are forwarded to the root `<input>` HTML
-element. This enables making the component interactive and helps to improve
-its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't
+interfere with the API of the React component and that aren't filtered out by
+[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
+`<input>` HTML element. This enables making the component interactive and helps
+to improve its accessibility.
 
 ```docoff-react-preview
 <FileInputField

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 { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
+import { transferProps } from '../../utils/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 { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
+import { transferProps } from '../../utils/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';

package/src/components/FormLayout/README.md

@@ -416,10 +416,11 @@ React.createElement(() => {
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify **any HTML attribute you like.** All attributes that don't interfere
-with the API of the React component are forwarded to the root `<div>` HTML
-element. This enables making the component interactive and helps to improve
-its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't
+interfere with the API of the React component and that aren't filtered out by
+[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
+root `<div>` HTML element. This enables making the component interactive and
+helps to improve its accessibility.
 
 👉 For the full list of supported attributes refer to:
 

package/src/components/Grid/Grid.jsx

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

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

@@ -35,10 +35,8 @@
         grid-template-rows: var(--rui-local-rows); // 2.
         grid-auto-flow: var(--rui-local-auto-flow); // 2.
         grid-gap: var(--rui-local-row-gap) var(--rui-local-column-gap); // 2.
-        align-content: var(--rui-local-align-content); // 2.
-        align-items: var(--rui-local-align-items); // 2.
-        justify-content: var(--rui-local-justify-content); // 2.
-        justify-items: var(--rui-local-justify-items); // 2.
+        place-content: var(--rui-local-align-content) var(--rui-local-justify-content); // 2.
+        place-items: var(--rui-local-align-items) var(--rui-local-justify-items); // 2.
     }
 
     // stylelint-disable-next-line selector-max-universal -- Reset any previously added margins.

package/src/components/Grid/GridSpan.jsx

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

package/src/components/Grid/README.md

@@ -248,10 +248,12 @@ 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 **any HTML attribute you like.** All attributes that don't interfere
-with the API of the React component are forwarded to the root HTML element
-of your choice provided by `tag`, which is `<div>` by default. This enables
-making the component interactive and helps to improve its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't
+interfere with the API of the React component and that aren't filtered out by
+[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
+root HTML element of your choice provided by `tag`, which is `<div>` by
+default. This enables making the component interactive and helps to improve its
+accessibility.
 
 👉 For the full list of supported attributes refer to:
 

package/src/components/Grid/_settings.scss

@@ -8,11 +8,11 @@ $grid-responsive-properties: [
     align-items,
     justify-content,
     justify-items,
-]; // stylelint-disable-line indentation -- Broken rule?
+]; // stylelint-disable-line @stylistic/indentation -- Broken rule?
 
 $grid-span-responsive-properties: [
     column-span,
     row-span,
-]; // stylelint-disable-line indentation -- Broken rule?
+]; // stylelint-disable-line @stylistic/indentation -- Broken rule?
 
 $initial-fallback-value: initial;

package/src/components/InputGroup/InputGroup.jsx

@@ -6,11 +6,11 @@ import React, {
 import { Text } from '../Text';
 import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
+import { transferProps } from '../../utils/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
-import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import { InputGroupContext } from './InputGroupContext';
 import styles from './InputGroup.module.scss';
@@ -151,7 +151,7 @@ InputGroup.propTypes = {
   /**
    * Input group label.
    */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
   /**
    * Layout of the group.
    *

package/src/components/InputGroup/README.md

@@ -250,10 +250,11 @@ for the underlying `<fieldset>` element.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify **any HTML attribute you like.** All attributes that don't interfere
-with the API of the React component are forwarded to the root `<fieldset>` HTML
-element. This enables making the component interactive and helps to improve
-its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't
+interfere with the API of the React component and that aren't filtered out by
+[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
+root `<fieldset>` HTML element. This enables making the component interactive
+and helps to improve its accessibility.
 
 👉 For the full list of supported attributes refer to:
 

package/src/components/Modal/Modal.jsx

@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React, { useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { withGlobalProps } from '../../provider';
-import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
+import { transferProps } from '../../utils/transferProps';
 import { getPositionClassName } from './_helpers/getPositionClassName';
 import { getSizeClassName } from './_helpers/getSizeClassName';
 import { useModalFocus } from './_hooks/useModalFocus';

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

@@ -21,11 +21,11 @@
         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;
         transform: translateX(-50%);
+        overscroll-behavior: contain;
 
         @include breakpoint.up(sm) {
             --rui-local-outer-spacing: #{theme.$outer-spacing-sm};