fixup! Update blacklisted props that can be passed to native HTML ele…

…ments using the transferProps principle

src/components/_helpers/transferProps.js

@@ -1,10 +1,44 @@
-export const transferProps = ({
-  children,
-  className,
-  dangerouslySetInnerHTML,
-  ref,
-  suppressContentEditableWarning,
-  staticContext,
-  style,
-  ...restProps
-}) => restProps;
+/**
+ * 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 it 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 out such props.
+ *
+ * When run in development mode the function will log error to the console if any invalid props are passed.
+ *
+ * @param props The props that were passed tot he React component
+ * @returns The props to be passed to the HTML element
+ */
+export const transferProps = (props) => {
+  const {
+    children,
+    className,
+    dangerouslySetInnerHTML,
+    ref,
+    staticContext,
+    style,
+    suppressContentEditableWarning,
+    ...restProps
+  } = props;
+
+  if (process.env.NODE_ENV !== 'production') {
+    const invalidProps = Object.keys({
+      children,
+      className,
+      dangerouslySetInnerHTML,
+      ref,
+      staticContext,
+      style,
+      suppressContentEditableWarning,
+    })
+      .filter((key) => props[key] !== undefined);
+
+    if (invalidProps.length > 0) {
+      // eslint-disable-next-line no-console
+      console.error(`Invalid prop(s) supplied to the transferProps method: ${invalidProps.join(', ')}`);
+    }
+  }
+
+  return restProps;
+};