From 6940731e9cc8815cfa93e94d78484135cca8323d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Dacer?= <dacer.ondrej@gmail.com>
Date: Thu, 27 Jun 2024 15:34:13 +0200
Subject: [PATCH] Make `transferProps` available to users (#524)

---
 mkdocs.yml                                    |  1 +
 src/components/Alert/Alert.jsx                |  2 +-
 src/components/Alert/README.md                |  9 ++--
 src/components/Badge/Badge.jsx                |  2 +-
 src/components/Badge/README.md                |  9 ++--
 src/components/Button/Button.jsx              |  2 +-
 src/components/Button/README.md               |  9 ++--
 src/components/ButtonGroup/ButtonGroup.jsx    |  2 +-
 src/components/ButtonGroup/README.md          |  9 ++--
 src/components/Card/Card.jsx                  |  2 +-
 src/components/Card/CardBody.jsx              |  2 +-
 src/components/Card/CardFooter.jsx            |  2 +-
 src/components/Card/README.md                 |  9 ++--
 .../CheckboxField/CheckboxField.jsx           |  2 +-
 src/components/CheckboxField/README.md        |  9 ++--
 .../FileInputField/FileInputField.jsx         |  2 +-
 src/components/FileInputField/README.md       |  9 ++--
 src/components/FormLayout/FormLayout.jsx      |  2 +-
 .../FormLayout/FormLayoutCustomField.jsx      |  2 +-
 src/components/FormLayout/README.md           |  9 ++--
 src/components/Grid/Grid.jsx                  |  2 +-
 src/components/Grid/GridSpan.jsx              |  2 +-
 src/components/Grid/README.md                 | 10 ++--
 src/components/InputGroup/InputGroup.jsx      |  2 +-
 src/components/InputGroup/README.md           |  9 ++--
 src/components/Modal/Modal.jsx                |  2 +-
 src/components/Modal/ModalBody.jsx            |  2 +-
 src/components/Modal/ModalCloseButton.jsx     |  2 +-
 src/components/Modal/ModalContent.jsx         |  2 +-
 src/components/Modal/ModalFooter.jsx          |  2 +-
 src/components/Modal/ModalHeader.jsx          |  6 +--
 src/components/Modal/ModalTitle.jsx           |  6 +--
 src/components/Modal/README.md                |  5 +-
 src/components/Paper/Paper.jsx                |  2 +-
 src/components/Paper/README.md                |  9 ++--
 src/components/Popover/Popover.jsx            |  2 +-
 src/components/Popover/PopoverWrapper.jsx     |  2 +-
 src/components/Popover/README.md              |  9 ++--
 src/components/Radio/README.md                |  9 ++--
 src/components/Radio/Radio.jsx                |  2 +-
 src/components/ScrollView/README.md           |  9 ++--
 src/components/ScrollView/ScrollView.jsx      |  2 +-
 src/components/SelectField/README.md          |  9 ++--
 src/components/SelectField/SelectField.jsx    |  2 +-
 src/components/Table/README.md                |  9 ++--
 src/components/Table/Table.jsx                |  2 +-
 src/components/Tabs/README.md                 |  5 +-
 src/components/Tabs/Tabs.jsx                  |  2 +-
 src/components/Tabs/TabsItem.jsx              |  2 +-
 src/components/Text/README.md                 |  5 +-
 src/components/Text/Text.jsx                  |  2 +-
 src/components/TextArea/README.md             |  9 ++--
 src/components/TextArea/TextArea.jsx          |  2 +-
 src/components/TextField/README.md            |  9 ++--
 src/components/TextField/TextField.jsx        |  2 +-
 src/components/TextLink/README.md             |  9 ++--
 src/components/TextLink/TextLink.jsx          |  2 +-
 src/components/Toggle/README.md               |  9 ++--
 src/components/Toggle/Toggle.jsx              |  2 +-
 src/components/Toolbar/README.md              |  9 ++--
 src/components/Toolbar/Toolbar.jsx            |  2 +-
 src/components/Toolbar/ToolbarGroup.jsx       |  2 +-
 src/components/Toolbar/ToolbarItem.jsx        |  2 +-
 src/docs/js-helpers/transferProps.md          | 46 +++++++++++++++++++
 src/index.js                                  |  1 +
 .../{classNames.js => classNames.test.js}     |  0
 .../__tests__/transferProps.test.js           |  0
 .../_helpers => utils}/transferProps.js       |  8 ----
 68 files changed, 203 insertions(+), 142 deletions(-)
 create mode 100644 src/docs/js-helpers/transferProps.md
 rename src/utils/__tests__/{classNames.js => classNames.test.js} (100%)
 rename src/{components/_helpers => utils}/__tests__/transferProps.test.js (100%)
 rename src/{components/_helpers => utils}/transferProps.js (74%)

diff --git a/mkdocs.yml b/mkdocs.yml
index 5387bfc0..f6b49de7 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -131,6 +131,7 @@ nav:
           - Typography: 'docs/css-helpers/typography.md'
       - JS Helpers:
           - Classnames: 'docs/js-helpers/classnames.md'
+          - Transferring Props: 'docs/js-helpers/transferProps.md'
   - Guides:
       - Customize:
           - Theming:
diff --git a/src/components/Alert/Alert.jsx b/src/components/Alert/Alert.jsx
index 33a7b2bd..d07852e2 100644
--- a/src/components/Alert/Alert.jsx
+++ b/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';
 
diff --git a/src/components/Alert/README.md b/src/components/Alert/README.md
index 34d696f5..5abf8452 100644
--- a/src/components/Alert/README.md
+++ b/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:
 
diff --git a/src/components/Badge/Badge.jsx b/src/components/Badge/Badge.jsx
index 53869644..56215029 100644
--- a/src/components/Badge/Badge.jsx
+++ b/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';
 
diff --git a/src/components/Badge/README.md b/src/components/Badge/README.md
index 1598f285..84f343d2 100644
--- a/src/components/Badge/README.md
+++ b/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:
 
diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx
index b93d455c..cf948894 100644
--- a/src/components/Button/Button.jsx
+++ b/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';
diff --git a/src/components/Button/README.md b/src/components/Button/README.md
index c7c77238..7e43d509 100644
--- a/src/components/Button/README.md
+++ b/src/components/Button/README.md
@@ -389,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:
 
diff --git a/src/components/ButtonGroup/ButtonGroup.jsx b/src/components/ButtonGroup/ButtonGroup.jsx
index a567d659..d863a4e1 100644
--- a/src/components/ButtonGroup/ButtonGroup.jsx
+++ b/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';
 
diff --git a/src/components/ButtonGroup/README.md b/src/components/ButtonGroup/README.md
index 307a0919..8498fe12 100644
--- a/src/components/ButtonGroup/README.md
+++ b/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:
 
diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
index 14bbdd08..074ade48 100644
--- a/src/components/Card/Card.jsx
+++ b/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';
 
diff --git a/src/components/Card/CardBody.jsx b/src/components/Card/CardBody.jsx
index 9c44ba43..729ab157 100644
--- a/src/components/Card/CardBody.jsx
+++ b/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 = ({
diff --git a/src/components/Card/CardFooter.jsx b/src/components/Card/CardFooter.jsx
index df74695d..5da62a79 100644
--- a/src/components/Card/CardFooter.jsx
+++ b/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 = ({
diff --git a/src/components/Card/README.md b/src/components/Card/README.md
index d80fd0bd..b77aac76 100644
--- a/src/components/Card/README.md
+++ b/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:
 
diff --git a/src/components/CheckboxField/CheckboxField.jsx b/src/components/CheckboxField/CheckboxField.jsx
index 8e531b10..e3eed379 100644
--- a/src/components/CheckboxField/CheckboxField.jsx
+++ b/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';
 
diff --git a/src/components/CheckboxField/README.md b/src/components/CheckboxField/README.md
index 03abd789..a280694a 100644
--- a/src/components/CheckboxField/README.md
+++ b/src/components/CheckboxField/README.md
@@ -175,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:
 
diff --git a/src/components/FileInputField/FileInputField.jsx b/src/components/FileInputField/FileInputField.jsx
index 103f1d15..0b7ee6a6 100644
--- a/src/components/FileInputField/FileInputField.jsx
+++ b/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';
 
diff --git a/src/components/FileInputField/README.md b/src/components/FileInputField/README.md
index be96559d..87bc2257 100644
--- a/src/components/FileInputField/README.md
+++ b/src/components/FileInputField/README.md
@@ -159,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
diff --git a/src/components/FormLayout/FormLayout.jsx b/src/components/FormLayout/FormLayout.jsx
index 097c2d0a..f4ec3b60 100644
--- a/src/components/FormLayout/FormLayout.jsx
+++ b/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';
diff --git a/src/components/FormLayout/FormLayoutCustomField.jsx b/src/components/FormLayout/FormLayoutCustomField.jsx
index bd76b37c..56ed6977 100644
--- a/src/components/FormLayout/FormLayoutCustomField.jsx
+++ b/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';
diff --git a/src/components/FormLayout/README.md b/src/components/FormLayout/README.md
index 6b477e47..8c9f713d 100644
--- a/src/components/FormLayout/README.md
+++ b/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:
 
diff --git a/src/components/Grid/Grid.jsx b/src/components/Grid/Grid.jsx
index d3f8f238..8acae0fa 100644
--- a/src/components/Grid/Grid.jsx
+++ b/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';
 
diff --git a/src/components/Grid/GridSpan.jsx b/src/components/Grid/GridSpan.jsx
index 7d778483..5630a758 100644
--- a/src/components/Grid/GridSpan.jsx
+++ b/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';
 
diff --git a/src/components/Grid/README.md b/src/components/Grid/README.md
index 8e74dd19..cf52eb1a 100644
--- a/src/components/Grid/README.md
+++ b/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:
 
diff --git a/src/components/InputGroup/InputGroup.jsx b/src/components/InputGroup/InputGroup.jsx
index 191476b4..57e89f67 100644
--- a/src/components/InputGroup/InputGroup.jsx
+++ b/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';
diff --git a/src/components/InputGroup/README.md b/src/components/InputGroup/README.md
index 7e03747d..dd16362d 100644
--- a/src/components/InputGroup/README.md
+++ b/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:
 
diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx
index b152754b..d24b0f15 100644
--- a/src/components/Modal/Modal.jsx
+++ b/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';
diff --git a/src/components/Modal/ModalBody.jsx b/src/components/Modal/ModalBody.jsx
index 98063a03..d81822b9 100644
--- a/src/components/Modal/ModalBody.jsx
+++ b/src/components/Modal/ModalBody.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 { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { getScrollingClassName } from './_helpers/getScrollingClassName';
 import styles from './ModalBody.module.scss';
diff --git a/src/components/Modal/ModalCloseButton.jsx b/src/components/Modal/ModalCloseButton.jsx
index 919d0fc5..2144269f 100644
--- a/src/components/Modal/ModalCloseButton.jsx
+++ b/src/components/Modal/ModalCloseButton.jsx
@@ -4,7 +4,7 @@ import {
   RUIContext,
   withGlobalProps,
 } from '../../provider';
-import { transferProps } from '../_helpers/transferProps';
+import { transferProps } from '../../utils/transferProps';
 import styles from './ModalCloseButton.module.scss';
 
 export const ModalCloseButton = React.forwardRef((props, ref) => {
diff --git a/src/components/Modal/ModalContent.jsx b/src/components/Modal/ModalContent.jsx
index 0bb26405..2eca62db 100644
--- a/src/components/Modal/ModalContent.jsx
+++ b/src/components/Modal/ModalContent.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 './ModalContent.module.scss';
 
 export const ModalContent = ({
diff --git a/src/components/Modal/ModalFooter.jsx b/src/components/Modal/ModalFooter.jsx
index 525bd6cb..25bf025b 100644
--- a/src/components/Modal/ModalFooter.jsx
+++ b/src/components/Modal/ModalFooter.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 { getJustifyClassName } from './_helpers/getJustifyClassName';
 import styles from './ModalFooter.module.scss';
 
diff --git a/src/components/Modal/ModalHeader.jsx b/src/components/Modal/ModalHeader.jsx
index 589cc897..87f20f7d 100644
--- a/src/components/Modal/ModalHeader.jsx
+++ b/src/components/Modal/ModalHeader.jsx
@@ -1,10 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import {
-  withGlobalProps,
-} from '../../provider';
-import { transferProps } from '../_helpers/transferProps';
+import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
+import { transferProps } from '../../utils/transferProps';
 import { getJustifyClassName } from './_helpers/getJustifyClassName';
 import styles from './ModalHeader.module.scss';
 
diff --git a/src/components/Modal/ModalTitle.jsx b/src/components/Modal/ModalTitle.jsx
index f11dd825..1aa9270d 100644
--- a/src/components/Modal/ModalTitle.jsx
+++ b/src/components/Modal/ModalTitle.jsx
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import {
-  withGlobalProps,
-} from '../../provider';
-import { transferProps } from '../_helpers/transferProps';
+import { withGlobalProps } from '../../provider';
+import { transferProps } from '../../utils/transferProps';
 import styles from './ModalTitle.module.scss';
 
 export const ModalTitle = ({
diff --git a/src/components/Modal/README.md b/src/components/Modal/README.md
index d4be9543..afe68af8 100644
--- a/src/components/Modal/README.md
+++ b/src/components/Modal/README.md
@@ -1015,8 +1015,9 @@ opened.
 ## 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:
+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 `<div>` HTML element in case of the `Modal` component. This `<div>` is not
   the root, but its first child which represents the modal window.
diff --git a/src/components/Paper/Paper.jsx b/src/components/Paper/Paper.jsx
index 6f9621ca..29962518 100644
--- a/src/components/Paper/Paper.jsx
+++ b/src/components/Paper/Paper.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
-import { transferProps } from '../_helpers/transferProps';
+import { transferProps } from '../../utils/transferProps';
 import styles from './Paper.module.scss';
 
 export const Paper = ({
diff --git a/src/components/Paper/README.md b/src/components/Paper/README.md
index 439ccf97..a84d1aba 100644
--- a/src/components/Paper/README.md
+++ b/src/components/Paper/README.md
@@ -54,10 +54,11 @@ Dim background and add transparency to visually suppress the Paper.
 ## 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:
 
diff --git a/src/components/Popover/Popover.jsx b/src/components/Popover/Popover.jsx
index 484970ca..d0d24768 100644
--- a/src/components/Popover/Popover.jsx
+++ b/src/components/Popover/Popover.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { createPortal } from 'react-dom';
 import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
-import { transferProps } from '../_helpers/transferProps';
+import { transferProps } from '../../utils/transferProps';
 import getRootSideClassName from './_helpers/getRootSideClassName';
 import getRootAlignmentClassName from './_helpers/getRootAlignmentClassName';
 import styles from './Popover.module.scss';
diff --git a/src/components/Popover/PopoverWrapper.jsx b/src/components/Popover/PopoverWrapper.jsx
index 63976492..13e18015 100644
--- a/src/components/Popover/PopoverWrapper.jsx
+++ b/src/components/Popover/PopoverWrapper.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 './PopoverWrapper.module.scss';
 
 export const PopoverWrapper = ({
diff --git a/src/components/Popover/README.md b/src/components/Popover/README.md
index 82e4d1b8..dac06ce8 100644
--- a/src/components/Popover/README.md
+++ b/src/components/Popover/README.md
@@ -287,10 +287,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:
 
diff --git a/src/components/Radio/README.md b/src/components/Radio/README.md
index 62732904..a5b317e8 100644
--- a/src/components/Radio/README.md
+++ b/src/components/Radio/README.md
@@ -282,10 +282,11 @@ It's possible to disable just some options or the whole set.
 ## 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:
 
diff --git a/src/components/Radio/Radio.jsx b/src/components/Radio/Radio.jsx
index cdf21b33..56c57c6b 100644
--- a/src/components/Radio/Radio.jsx
+++ b/src/components/Radio/Radio.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 './Radio.module.scss';
 
diff --git a/src/components/ScrollView/README.md b/src/components/ScrollView/README.md
index 7650b6c3..89a356a4 100644
--- a/src/components/ScrollView/README.md
+++ b/src/components/ScrollView/README.md
@@ -480,10 +480,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:
 
diff --git a/src/components/ScrollView/ScrollView.jsx b/src/components/ScrollView/ScrollView.jsx
index eb1532c1..471b8e45 100644
--- a/src/components/ScrollView/ScrollView.jsx
+++ b/src/components/ScrollView/ScrollView.jsx
@@ -11,7 +11,7 @@ import {
   withGlobalProps,
 } from '../../provider';
 import { classNames } from '../../utils/classNames';
-import { transferProps } from '../_helpers/transferProps';
+import { transferProps } from '../../utils/transferProps';
 import { getElementsPositionDifference } from './_helpers/getElementsPositionDifference';
 import { useLoadResize } from './_hooks/useLoadResizeHook';
 import { useScrollPosition } from './_hooks/useScrollPositionHook';
diff --git a/src/components/SelectField/README.md b/src/components/SelectField/README.md
index a53ec790..1200e741 100644
--- a/src/components/SelectField/README.md
+++ b/src/components/SelectField/README.md
@@ -652,10 +652,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 `<select>` 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
+`<select>` HTML element. This enables making the component interactive and
+helps to improve its accessibility.
 
 👉 For the full list of supported attributes refer to:
 
diff --git a/src/components/SelectField/SelectField.jsx b/src/components/SelectField/SelectField.jsx
index 6ff4d590..13eb6108 100644
--- a/src/components/SelectField/SelectField.jsx
+++ b/src/components/SelectField/SelectField.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 { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
-import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import { InputGroupContext } from '../InputGroup/InputGroupContext';
 import { Option } from './_components/Option';
diff --git a/src/components/Table/README.md b/src/components/Table/README.md
index 02a6ef6c..8b194905 100644
--- a/src/components/Table/README.md
+++ b/src/components/Table/README.md
@@ -243,10 +243,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 `<table>` 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 `<table>` HTML element. This enables making the component interactive and
+helps to improve its accessibility.
 
 👉 For the full list of supported attributes refer to:
 
diff --git a/src/components/Table/Table.jsx b/src/components/Table/Table.jsx
index 4b4f4103..77589569 100644
--- a/src/components/Table/Table.jsx
+++ b/src/components/Table/Table.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 { TableHeaderCell } from './_components/TableHeaderCell';
 import { TableBodyCell } from './_components/TableBodyCell';
 import styles from './Table.module.scss';
diff --git a/src/components/Tabs/README.md b/src/components/Tabs/README.md
index 81a7ec1c..8f794bed 100644
--- a/src/components/Tabs/README.md
+++ b/src/components/Tabs/README.md
@@ -157,8 +157,9 @@ 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:
+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 `<nav>` HTML element in case of `Tabs` component
 - the `<a>` HTML element in case of `TabsItem`
diff --git a/src/components/Tabs/Tabs.jsx b/src/components/Tabs/Tabs.jsx
index 449c8733..ecc5a694 100644
--- a/src/components/Tabs/Tabs.jsx
+++ b/src/components/Tabs/Tabs.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 './Tabs.module.scss';
 
 export const Tabs = ({
diff --git a/src/components/Tabs/TabsItem.jsx b/src/components/Tabs/TabsItem.jsx
index 35b7b5a9..a48fe0c4 100644
--- a/src/components/Tabs/TabsItem.jsx
+++ b/src/components/Tabs/TabsItem.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 styles from './TabsItem.module.scss';
 
 export const TabsItem = ({
diff --git a/src/components/Text/README.md b/src/components/Text/README.md
index 4b2c56e3..f450941d 100644
--- a/src/components/Text/README.md
+++ b/src/components/Text/README.md
@@ -202,8 +202,9 @@ 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:
+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:
 
 - `<span>` HTML element in case that `blockLevel` is set to `false`
 - `<div>` HTML element in case that `blockLevel` is set to `true`
diff --git a/src/components/Text/Text.jsx b/src/components/Text/Text.jsx
index 64f1c73e..64cdedec 100644
--- a/src/components/Text/Text.jsx
+++ b/src/components/Text/Text.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 { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { getRootClampClassName } from './_helpers/getRootClampClassName';
 import { getRootHyphensClassName } from './_helpers/getRootHyphensClassName';
diff --git a/src/components/TextArea/README.md b/src/components/TextArea/README.md
index 24ac15a4..655dc8c4 100644
--- a/src/components/TextArea/README.md
+++ b/src/components/TextArea/README.md
@@ -320,10 +320,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 `<textarea>` 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
+`<textarea>` HTML element. This enables making the component interactive and
+helps to improve its accessibility.
 
 ```docoff-react-preview
 <TextArea
diff --git a/src/components/TextArea/TextArea.jsx b/src/components/TextArea/TextArea.jsx
index 3f8af742..4c0fc225 100644
--- a/src/components/TextArea/TextArea.jsx
+++ b/src/components/TextArea/TextArea.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 { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
-import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import styles from './TextArea.module.scss';
 
diff --git a/src/components/TextField/README.md b/src/components/TextField/README.md
index 24b1a8f7..5e31ec39 100644
--- a/src/components/TextField/README.md
+++ b/src/components/TextField/README.md
@@ -448,10 +448,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
 <TextField
diff --git a/src/components/TextField/TextField.jsx b/src/components/TextField/TextField.jsx
index f246405e..8584d64a 100644
--- a/src/components/TextField/TextField.jsx
+++ b/src/components/TextField/TextField.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 { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
-import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import { InputGroupContext } from '../InputGroup/InputGroupContext';
 import styles from './TextField.module.scss';
diff --git a/src/components/TextLink/README.md b/src/components/TextLink/README.md
index 6a4feda7..32e87605 100644
--- a/src/components/TextLink/README.md
+++ b/src/components/TextLink/README.md
@@ -47,10 +47,11 @@ It's common to use custom function for routing within SPAs. Use the
 ## 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 `<a>` 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 `<a>` HTML element. This enables making the component interactive and
+helps to improve its accessibility.
 
 👉 For the full list of supported attributes refer to:
 
diff --git a/src/components/TextLink/TextLink.jsx b/src/components/TextLink/TextLink.jsx
index e98889b2..111f7c06 100644
--- a/src/components/TextLink/TextLink.jsx
+++ b/src/components/TextLink/TextLink.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 './TextLink.module.scss';
 
 export const TextLink = ({
diff --git a/src/components/Toggle/README.md b/src/components/Toggle/README.md
index 80505ca5..d84c3806 100644
--- a/src/components/Toggle/README.md
+++ b/src/components/Toggle/README.md
@@ -171,10 +171,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:
 
diff --git a/src/components/Toggle/Toggle.jsx b/src/components/Toggle/Toggle.jsx
index e5ddf27a..068b4c06 100644
--- a/src/components/Toggle/Toggle.jsx
+++ b/src/components/Toggle/Toggle.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 './Toggle.module.scss';
 
diff --git a/src/components/Toolbar/README.md b/src/components/Toolbar/README.md
index 8e079351..9a3af511 100644
--- a/src/components/Toolbar/README.md
+++ b/src/components/Toolbar/README.md
@@ -322,10 +322,11 @@ Or to build a classic media layout with image on the left and text on the right:
 ## 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:
 
diff --git a/src/components/Toolbar/Toolbar.jsx b/src/components/Toolbar/Toolbar.jsx
index cef878f0..8bcef9df 100644
--- a/src/components/Toolbar/Toolbar.jsx
+++ b/src/components/Toolbar/Toolbar.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 { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { getAlignClassName } from './_helpers/getAlignClassName';
 import { getJustifyClassName } from './_helpers/getJustifyClassName';
diff --git a/src/components/Toolbar/ToolbarGroup.jsx b/src/components/Toolbar/ToolbarGroup.jsx
index 2f10a7af..794e626b 100644
--- a/src/components/Toolbar/ToolbarGroup.jsx
+++ b/src/components/Toolbar/ToolbarGroup.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 { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { getAlignClassName } from './_helpers/getAlignClassName';
 import styles from './Toolbar.module.scss';
diff --git a/src/components/Toolbar/ToolbarItem.jsx b/src/components/Toolbar/ToolbarItem.jsx
index 88a500dd..da8bc453 100644
--- a/src/components/Toolbar/ToolbarItem.jsx
+++ b/src/components/Toolbar/ToolbarItem.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
+import { transferProps } from '../../utils/transferProps';
 import { withGlobalProps } from '../../provider';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './Toolbar.module.scss';
diff --git a/src/docs/js-helpers/transferProps.md b/src/docs/js-helpers/transferProps.md
new file mode 100644
index 00000000..3cb69885
--- /dev/null
+++ b/src/docs/js-helpers/transferProps.md
@@ -0,0 +1,46 @@
+# Transferring Props
+
+The `transferProps` helper controls passing of props from the React component
+to the HTML element.
+
+It enables making the component interactive and helps to improve its
+accessibility. However some props should never be passed to the HTML element
+as it would break things. This function is used to filter them out. Among these
+props are:
+
+- `children`
+- `className`
+- `contentEditable`
+- `dangerouslySetInnerHtml`
+- `ref`
+- `staticContext`
+- `style`
+- `suppressContentEditableWarning`
+
+👉 When run in development mode, the function will log the error to the console
+if any invalid props are passed.
+
+## Basic Usage
+
+To use `transferProps` helper, you need to import it first:
+
+```js
+import { transferProps } from "@react-ui-org/react-ui";
+```
+
+And use it:
+
+```jsx
+const CustomComponent = ({
+  children,
+  id,
+  ...restProps
+}) => (
+  <div
+    {...transferProps(restProps)}
+    id={id && `${id}__customComponent`}
+  >
+    {children}
+  </div>
+);
+```
diff --git a/src/index.js b/src/index.js
index 921bc8e1..4526abc1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -62,3 +62,4 @@ export { RUIProvider } from './provider';
 
 // Utils
 export { classNames } from './utils/classNames';
+export { transferProps } from './utils/transferProps';
diff --git a/src/utils/__tests__/classNames.js b/src/utils/__tests__/classNames.test.js
similarity index 100%
rename from src/utils/__tests__/classNames.js
rename to src/utils/__tests__/classNames.test.js
diff --git a/src/components/_helpers/__tests__/transferProps.test.js b/src/utils/__tests__/transferProps.test.js
similarity index 100%
rename from src/components/_helpers/__tests__/transferProps.test.js
rename to src/utils/__tests__/transferProps.test.js
diff --git a/src/components/_helpers/transferProps.js b/src/utils/transferProps.js
similarity index 74%
rename from src/components/_helpers/transferProps.js
rename to src/utils/transferProps.js
index d9d60729..9065b806 100644
--- a/src/components/_helpers/transferProps.js
+++ b/src/utils/transferProps.js
@@ -1,12 +1,4 @@
 /**
- * Controls passing of props from the React component to the HTML element
- *
- * Sometimes it is useful to have a mechanism to pass props from the React component to a rendered HTML element.
- * It enables making the component interactive and helps improve its accessibility. However some props should
- * never be passed to the HTML element as it would break things. This function is used to filter out such props.
- *
- * When run in development mode, the function will log the error to the console if any invalid props are passed.
- *
  * @param props The props that were passed to the React component and were not used by it
  * @returns The props to be passed to the HTML element
  */