Make transfer props available to users

Signed-off-by: Joeyyy09 <[email protected]>

src/components/Alert/README.md

@@ -176,11 +176,14 @@ 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.
 
-👉 For the full list of supported attributes refer to:
+👉 For forwarding HTML attributes programmatically, you can use the `transferProps` function. For detailed usage examples, refer to the [TransferProps documentation](/src/docs/js-helpers/transferProps.md).
+
+For the full list of supported attributes, you can also refer to:
 
 - [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
 - [React common props]{:target="_blank"}
 
+
 ## API
 
 <docoff-react-props src="/components/Alert/Alert.jsx" />

src/components/Badge/README.md

@@ -92,11 +92,14 @@ 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.
 
-👉 For the full list of supported attributes refer to:
+👉 For forwarding HTML attributes programmatically, you can use the `transferProps` function. For detailed usage examples, refer to the [TransferProps documentation](/src/docs/js-helpers/transferProps.md).
+
+For the full list of supported attributes, you can also refer to:
 
 - [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
 - [React common props]{:target="_blank"}
 
+
 ## API
 
 <docoff-react-props src="/components/Badge/Badge.jsx" />

src/components/Button/README.md

@@ -389,15 +389,18 @@ animation is made.
 
 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
+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.
 
-👉 For the full list of supported attributes refer to:
+👉 For forwarding HTML attributes programmatically, you can use the `transferProps` function. For detailed usage examples, refer to the [TransferProps documentation](/src/docs/js-helpers/transferProps.md).
 
-- [`<button>` HTML element attributes][button-attributes]{:target="_blank"}
+For the full list of supported attributes, you can also refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
 - [React common props]{:target="_blank"}
 
+
 ## Forwarding ref
 
 If you provide [ref], it is forwarded to the native HTML `<button>` element.

src/components/ButtonGroup/README.md

@@ -254,11 +254,14 @@ 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.
 
-👉 For the full list of supported attributes refer to:
+👉 For forwarding HTML attributes programmatically, you can use the `transferProps` function. For detailed usage examples, refer to the [TransferProps documentation](/src/docs/js-helpers/transferProps.md).
+
+For the full list of supported attributes, you can also refer to:
 
 - [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
 - [React common props]{:target="_blank"}
 
+
 ## API
 
 <docoff-react-props src="/components/ButtonGroup/ButtonGroup.jsx"></docoff-react-props>

src/components/Card/README.md

@@ -260,11 +260,14 @@ 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.
 
-👉 For the full list of supported attributes refer to:
+👉 For forwarding HTML attributes programmatically, you can use the `transferProps` function. For detailed usage examples, refer to the [TransferProps documentation](/src/docs/js-helpers/transferProps.md).
+
+For the full list of supported attributes, you can also refer to:
 
 - [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
 - [React common props]{:target="_blank"}
 
+
 ## API
 
 <docoff-react-props src="/components/Card/Card.jsx"></docoff-react-props>

src/components/CheckboxField/README.md

@@ -173,15 +173,18 @@ Disabled state makes the input unavailable.
 
 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
+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.
 
-👉 For the full list of supported attributes refer to:
+👉 For forwarding HTML attributes programmatically, you can use the `transferProps` function. For detailed usage examples, refer to the [TransferProps documentation](/src/docs/js-helpers/transferProps.md).
 
-- [`<input type="checkbox" />` HTML element attributes][checkbox-attributes]{:target="_blank"}
+For the full list of supported attributes, you can also refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
 - [React common props]{:target="_blank"}
 
+
 ## Forwarding ref
 
 If you provide [ref], it is forwarded to the native HTML `<input>` element.

src/components/FormLayout/README.md

@@ -421,11 +421,14 @@ 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.
 
-👉 For the full list of supported attributes refer to:
+👉 For forwarding HTML attributes programmatically, you can use the `transferProps` function. For detailed usage examples, refer to the [TransferProps documentation](/src/docs/js-helpers/transferProps.md).
+
+For the full list of supported attributes, you can also refer to:
 
 - [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
 - [React common props]{:target="_blank"}
 
+
 ## API
 
 <docoff-react-props src="/components/FormLayout/FormLayout.jsx"></docoff-react-props>

src/components/Grid/README.md

@@ -249,16 +249,18 @@ property. Check [MDN][grid-auto-flow] to fully understand available options.
 
 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.
+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.
 
-👉 For the full list of supported attributes refer to:
+👉 For forwarding HTML attributes programmatically, you can use the `transferProps` function. For detailed usage examples, refer to the [TransferProps documentation](/src/docs/js-helpers/transferProps.md).
+
+For the full list of supported attributes, you can also refer to:
 
 - [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
-- [any other HTML element][all-html-elements]{:target="_blank"}
 - [React common props]{:target="_blank"}
 
+
 ## API
 
 <docoff-react-props src="/components/Grid/Grid.jsx"></docoff-react-props>

src/components/InputGroup/README.md

@@ -251,15 +251,18 @@ for the underlying `<fieldset>` element.
 
 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
+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.
 
-👉 For the full list of supported attributes refer to:
+👉 For forwarding HTML attributes programmatically, you can use the `transferProps` function. For detailed usage examples, refer to the [TransferProps documentation](/src/docs/js-helpers/transferProps.md).
 
-- [`<fieldset>` HTML element attributes][fieldset-attributes]{:target="_blank"}
+For the full list of supported attributes, you can also refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
 - [React common props]{:target="_blank"}
 
+
 ## API
 
 <docoff-react-props src="/components/InputGroup/InputGroup.jsx"></docoff-react-props>

src/components/Paper/README.md

@@ -59,11 +59,14 @@ 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.
 
-👉 For the full list of supported attributes refer to:
+👉 For forwarding HTML attributes programmatically, you can use the `transferProps` function. For detailed usage examples, refer to the [TransferProps documentation](/src/docs/js-helpers/transferProps.md).
+
+For the full list of supported attributes, you can also refer to:
 
 - [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
 - [React common props]{:target="_blank"}
 
+
 ## API
 
 <docoff-react-props src="/components/Paper/Paper.jsx"></docoff-react-props>

src/components/Popover/README.md

@@ -292,11 +292,14 @@ 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.
 
-👉 For the full list of supported attributes refer to:
+👉 For forwarding HTML attributes programmatically, you can use the `transferProps` function. For detailed usage examples, refer to the [TransferProps documentation](/src/docs/js-helpers/transferProps.md).
+
+For the full list of supported attributes, you can also refer to:
 
 - [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
 - [React common props]{:target="_blank"}
 
+
 ## Forwarding ref
 
 If you provide [ref], it is forwarded to the root native HTML `<div>` element,

src/components/Radio/README.md

@@ -280,15 +280,18 @@ It's possible to disable just some options or the whole set.
 
 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
+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.
 
-👉 For the full list of supported attributes refer to:
+👉 For forwarding HTML attributes programmatically, you can use the `transferProps` function. For detailed usage examples, refer to the [TransferProps documentation](/src/docs/js-helpers/transferProps.md).
 
-- [`<input type="radio" />` HTML element attributes][radio-attributes]{:target="_blank"}
+For the full list of supported attributes, you can also refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
 - [React common props]{:target="_blank"}
 
+
 ## API
 
 <docoff-react-props src="/components/Radio/Radio.jsx"></docoff-react-props>

src/components/ScrollView/README.md

@@ -476,7 +476,6 @@ React.createElement(() => {
   );
 });
 ```
-
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
@@ -485,11 +484,14 @@ 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.
 
-👉 For the full list of supported attributes refer to:
+👉 For forwarding HTML attributes programmatically, you can use the `transferProps` function. For detailed usage examples, refer to the [TransferProps documentation](/src/docs/js-helpers/transferProps.md).
+
+For the full list of supported attributes, you can also refer to:
 
 - [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
 - [React common props]{:target="_blank"}
 
+
 ## Forwarding ref
 
 If you provide [ref], it is forwarded to the scrolling viewport native HTML

src/components/SelectField/README.md

@@ -650,15 +650,18 @@ React.createElement(() => {
 
 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
+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.
 
-👉 For the full list of supported attributes refer to:
+👉 For forwarding HTML attributes programmatically, you can use the `transferProps` function. For detailed usage examples, refer to the [TransferProps documentation](/src/docs/js-helpers/transferProps.md).
 
-- [`<select>` HTML element attributes][select-attributes]{:target="_blank"}
+For the full list of supported attributes, you can also refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
 - [React common props]{:target="_blank"}
 
+
 ## Forwarding ref
 
 If you provide [ref], it is forwarded to the native HTML `<select>` element.

src/components/Table/README.md

@@ -244,15 +244,18 @@ React.createElement(() => {
 
 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
+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.
 
-👉 For the full list of supported attributes refer to:
+👉 For forwarding HTML attributes programmatically, you can use the `transferProps` function. For detailed usage examples, refer to the [TransferProps documentation](/src/docs/js-helpers/transferProps.md).
 
-- [`<table>` HTML element attributes][table-attributes]{:target="_blank"}
+For the full list of supported attributes, you can also refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
 - [React common props]{:target="_blank"}
 
+
 ## API
 
 <docoff-react-props src="/components/Table/Table.jsx"></docoff-react-props>

src/components/TextLink/README.md

@@ -48,15 +48,18 @@ It's common to use custom function for routing within SPAs. Use the
 
 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
+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.
 
-👉 For the full list of supported attributes refer to:
+👉 For forwarding HTML attributes programmatically, you can use the `transferProps` function. For detailed usage examples, refer to the [TransferProps documentation](/src/docs/js-helpers/transferProps.md).
 
-- [`<a>` HTML element attributes][a-attributes]{:target="_blank"}
+For the full list of supported attributes, you can also refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
 - [React common props]{:target="_blank"}
 
+
 ## API
 
 <docoff-react-props src="/components/TextLink/TextLink.jsx"></docoff-react-props>

src/components/Toggle/README.md

@@ -169,15 +169,18 @@ Disabled state makes the input unavailable.
 
 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
+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.
 
-👉 For the full list of supported attributes refer to:
+👉 For forwarding HTML attributes programmatically, you can use the `transferProps` function. For detailed usage examples, refer to the [TransferProps documentation](/src/docs/js-helpers/transferProps.md).
 
-- [`<input type="checkbox" />` HTML element attributes][checkbox-attributes]{:target="_blank"}
+For the full list of supported attributes, you can also refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
 - [React common props]{:target="_blank"}
 
+
 ## Forwarding ref
 
 If you provide [ref], it is forwarded to the native HTML `<input>` element.

src/components/Toolbar/README.md

@@ -327,11 +327,14 @@ 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.
 
-👉 For the full list of supported attributes refer to:
+👉 For forwarding HTML attributes programmatically, you can use the `transferProps` function. For detailed usage examples, refer to the [TransferProps documentation](/src/docs/js-helpers/transferProps.md).
+
+For the full list of supported attributes, you can also refer to:
 
 - [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
 - [React common props]{:target="_blank"}
 
+
 ## API
 
 <docoff-react-props src="/components/Toolbar/Toolbar.jsx"></docoff-react-props>

src/components/_helpers/transferProps.js

@@ -24,6 +24,8 @@ export const transferProps = (props) => {
   } = props;
 
   if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line no-console
+    console.log('props', props);
     const invalidProps = [
       'children', // It is always either handled by the component itself or not supported.
       'className', // Classes are set by component authors, changing it arbitrarily might break things.

src/docs/js-helpers/classnames.md

@@ -19,7 +19,7 @@ And use it:
 <div
   className={classNames(
     'd-inline-block',
-    Date.now() > 1609455600 && 'text-warning',
+    Date.now() > 1609455600 && 'text-warning',    
     Date.now() > 1622498400 ? 'text-secondary' : null,
   )}
 >