From ed1f7d52b2544c204e4802db72e543504e4d1da5 Mon Sep 17 00:00:00 2001
From: Joeyyy09 <imt_2021063@iiitm.ac.in>
Date: Sat, 13 Apr 2024 17:52:22 +0530
Subject: [PATCH] Make transfer props available to users

Signed-off-by: Joeyyy09 <imt_2021063@iiitm.ac.in>
---
 package-lock.json                        |  2 +-
 src/components/Alert/README.md           |  5 ++-
 src/components/Badge/README.md           |  5 ++-
 src/components/Button/README.md          |  9 +++--
 src/components/ButtonGroup/README.md     |  5 ++-
 src/components/Card/README.md            |  5 ++-
 src/components/CheckboxField/README.md   |  9 +++--
 src/components/FormLayout/README.md      |  5 ++-
 src/components/Grid/README.md            | 12 +++---
 src/components/InputGroup/README.md      |  9 +++--
 src/components/Paper/README.md           |  5 ++-
 src/components/Popover/README.md         |  5 ++-
 src/components/Radio/README.md           |  9 +++--
 src/components/ScrollView/README.md      |  6 ++-
 src/components/SelectField/README.md     |  9 +++--
 src/components/Table/README.md           |  9 +++--
 src/components/TextLink/README.md        |  9 +++--
 src/components/Toggle/README.md          |  9 +++--
 src/components/Toolbar/README.md         |  5 ++-
 src/components/_helpers/transferProps.js |  2 +
 src/docs/js-helpers/classnames.md        |  2 +-
 src/docs/js-helpers/transferProps.md     | 23 +++++++++++
 src/utils/transferProps.js               | 51 ++++++++++++++++++++++++
 23 files changed, 169 insertions(+), 41 deletions(-)
 create mode 100644 src/docs/js-helpers/transferProps.md
 create mode 100644 src/utils/transferProps.js

diff --git a/package-lock.json b/package-lock.json
index 444f0a4b..0545bc6f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
   "packages": {
     "": {
       "name": "@react-ui-org/react-ui",
-      "version": "0.54.0",
+      "version": "0.55.0",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/src/components/Alert/README.md b/src/components/Alert/README.md
index 34d696f5..6996d410 100644
--- a/src/components/Alert/README.md
+++ b/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" />
diff --git a/src/components/Badge/README.md b/src/components/Badge/README.md
index 1598f285..b7a7c51c 100644
--- a/src/components/Badge/README.md
+++ b/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" />
diff --git a/src/components/Button/README.md b/src/components/Button/README.md
index 800d93b7..d999ae96 100644
--- a/src/components/Button/README.md
+++ b/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.
diff --git a/src/components/ButtonGroup/README.md b/src/components/ButtonGroup/README.md
index 307a0919..d534babd 100644
--- a/src/components/ButtonGroup/README.md
+++ b/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>
diff --git a/src/components/Card/README.md b/src/components/Card/README.md
index d80fd0bd..1949af55 100644
--- a/src/components/Card/README.md
+++ b/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>
diff --git a/src/components/CheckboxField/README.md b/src/components/CheckboxField/README.md
index 5b793c22..ba9c38bb 100644
--- a/src/components/CheckboxField/README.md
+++ b/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.
diff --git a/src/components/FormLayout/README.md b/src/components/FormLayout/README.md
index 6b477e47..94f85278 100644
--- a/src/components/FormLayout/README.md
+++ b/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>
diff --git a/src/components/Grid/README.md b/src/components/Grid/README.md
index 8e74dd19..dcfbbd0e 100644
--- a/src/components/Grid/README.md
+++ b/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>
diff --git a/src/components/InputGroup/README.md b/src/components/InputGroup/README.md
index 7e03747d..2e4e65fa 100644
--- a/src/components/InputGroup/README.md
+++ b/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>
diff --git a/src/components/Paper/README.md b/src/components/Paper/README.md
index 439ccf97..23b0a8fb 100644
--- a/src/components/Paper/README.md
+++ b/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>
diff --git a/src/components/Popover/README.md b/src/components/Popover/README.md
index 82e4d1b8..e2f8624c 100644
--- a/src/components/Popover/README.md
+++ b/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,
diff --git a/src/components/Radio/README.md b/src/components/Radio/README.md
index e0a9a382..1b713c3e 100644
--- a/src/components/Radio/README.md
+++ b/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>
diff --git a/src/components/ScrollView/README.md b/src/components/ScrollView/README.md
index 7650b6c3..dc8d906b 100644
--- a/src/components/ScrollView/README.md
+++ b/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
diff --git a/src/components/SelectField/README.md b/src/components/SelectField/README.md
index e1a5f23b..28394ce8 100644
--- a/src/components/SelectField/README.md
+++ b/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.
diff --git a/src/components/Table/README.md b/src/components/Table/README.md
index 02a6ef6c..b54020d6 100644
--- a/src/components/Table/README.md
+++ b/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>
diff --git a/src/components/TextLink/README.md b/src/components/TextLink/README.md
index 6a4feda7..0921c33d 100644
--- a/src/components/TextLink/README.md
+++ b/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>
diff --git a/src/components/Toggle/README.md b/src/components/Toggle/README.md
index f51e512f..f6535fd4 100644
--- a/src/components/Toggle/README.md
+++ b/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.
diff --git a/src/components/Toolbar/README.md b/src/components/Toolbar/README.md
index 8e079351..432a5776 100644
--- a/src/components/Toolbar/README.md
+++ b/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>
diff --git a/src/components/_helpers/transferProps.js b/src/components/_helpers/transferProps.js
index d9d60729..c22a2398 100644
--- a/src/components/_helpers/transferProps.js
+++ b/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.
diff --git a/src/docs/js-helpers/classnames.md b/src/docs/js-helpers/classnames.md
index 3f66fbcc..232597a5 100644
--- a/src/docs/js-helpers/classnames.md
+++ b/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,
   )}
 >
diff --git a/src/docs/js-helpers/transferProps.md b/src/docs/js-helpers/transferProps.md
new file mode 100644
index 00000000..86c90d61
--- /dev/null
+++ b/src/docs/js-helpers/transferProps.md
@@ -0,0 +1,23 @@
+# TransferProps Function
+
+The `transferProps` function is a utility used to transfer props from one component to another while keeping the component code concise and manageable.
+
+## Basic Usage
+
+To use the `transferProps` function, you first need to import it:
+
+```javascript
+import { transferProps } from '../../utils/transferProps';
+
+```
+
+You can then use it within your components like so:
+
+```javascript
+const ChildComponent = (props) => {
+    // Transfer props to a child component
+    return <Child {...transferProps(props)} />;
+};
+```
+
+The transferProps function ensures that only valid props are transferred, providing a clean and efficient way to pass props down the component tree.
diff --git a/src/utils/transferProps.js b/src/utils/transferProps.js
new file mode 100644
index 00000000..54ce580c
--- /dev/null
+++ b/src/utils/transferProps.js
@@ -0,0 +1,51 @@
+/**
+ * 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
+ */
+export const transferProps = (props) => {
+  const {
+    children,
+    className,
+    contentEditable,
+    dangerouslySetInnerHTML,
+    ref,
+    staticContext,
+    style,
+    suppressContentEditableWarning,
+    ...restProps
+  } = 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.
+      'contentEditable', // Components are either interactive or not, changing it arbitrarily might break things.
+      'dangerouslySetInnerHTML', // This might break things and allow for XSS attacks.
+      'ref', // Forwarding `ref` is hardcoded and documented for each component.
+      'staticContext', // In `react-router` (v4, v5) this is used during server side rendering, it makes no sense to pass it to a component.
+      'style', // Styles are set by component authors, changing it arbitrarily might break things.
+      'suppressContentEditableWarning', // Since setting `contentEditable` is not allowed, this is not needed.
+    ].filter((key) => props[key] !== undefined);
+
+    if (invalidProps.length > 0) {
+      // eslint-disable-next-line no-console
+      console.error(
+        `Invalid prop(s) supplied to the "transferProps" function: "${invalidProps.join(
+          '", "',
+        )}"`,
+      );
+    }
+  }
+
+  return restProps;
+};