From 9f143a3b2e2c8d6158e7d8e0c1c9cef8f6055274 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Tue, 11 Jan 2022 17:42:54 -0600
Subject: [PATCH] refactor(react): update InlineCheckbox to FC (#10363)

* refactor(react): update InlineCheckbox to FC

* chore(react): formatting of InlineCheckbox

* fix(react): update InlineCheckbox prop types and usage in data table

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../__tests__/TableSelectAll-test.js          |   2 +-
 .../__tests__/TableSelectRow-test.js          |   2 +-
 .../__snapshots__/DataTable-test.js.snap      | 155 ++++-------
 .../__snapshots__/TableSelectAll-test.js.snap |  30 +-
 .../__snapshots__/TableSelectRow-test.js.snap |  30 +-
 .../InlineCheckbox/InlineCheckbox-test.js     |   6 +-
 .../InlineCheckbox/InlineCheckbox.js          | 260 ++++++++----------
 7 files changed, 190 insertions(+), 295 deletions(-)

diff --git a/packages/react/src/components/DataTable/__tests__/TableSelectAll-test.js b/packages/react/src/components/DataTable/__tests__/TableSelectAll-test.js
index 62bf43aa3408..05af3efc6950 100644
--- a/packages/react/src/components/DataTable/__tests__/TableSelectAll-test.js
+++ b/packages/react/src/components/DataTable/__tests__/TableSelectAll-test.js
@@ -60,7 +60,7 @@ describe('DataTable.TableSelectAll', () => {
         </TableHead>
       </Table>
     );
-    wrapper.find('InlineCheckbox input').simulate('click');
+    wrapper.find('input').simulate('click');
     expect(mockProps.onSelect).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/packages/react/src/components/DataTable/__tests__/TableSelectRow-test.js b/packages/react/src/components/DataTable/__tests__/TableSelectRow-test.js
index 6aae2480ba19..3013c9c95264 100644
--- a/packages/react/src/components/DataTable/__tests__/TableSelectRow-test.js
+++ b/packages/react/src/components/DataTable/__tests__/TableSelectRow-test.js
@@ -61,7 +61,7 @@ describe('DataTable.TableSelectRow', () => {
         </TableHead>
       </Table>
     );
-    wrapper.find('InlineCheckbox input').simulate('click');
+    wrapper.find('input').simulate('click');
     expect(mockProps.onSelect).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
index 78e987867553..152b8efb8e7d 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -975,32 +975,21 @@ exports[`DataTable selection should have select-all default to un-checked if no
                           name="select-all"
                           onClick={[Function]}
                         >
-                          <InlineCheckbox
-                            ariaLabel="Select all rows"
+                          <input
                             checked={false}
+                            className="bx--checkbox"
                             id="data-table-7__select-all"
-                            indeterminate={false}
-                            innerRef={null}
                             name="select-all"
                             onChange={[Function]}
                             onClick={[Function]}
-                          >
-                            <input
-                              checked={false}
-                              className="bx--checkbox"
-                              id="data-table-7__select-all"
-                              name="select-all"
-                              onChange={[Function]}
-                              onClick={[Function]}
-                              type="checkbox"
-                            />
-                            <label
-                              aria-label="Select all rows"
-                              className="bx--checkbox-label"
-                              htmlFor="data-table-7__select-all"
-                              onClick={[Function]}
-                            />
-                          </InlineCheckbox>
+                            type="checkbox"
+                          />
+                          <label
+                            aria-label="Select all rows"
+                            className="bx--checkbox-label"
+                            htmlFor="data-table-7__select-all"
+                            onClick={[Function]}
+                          />
                         </ForwardRef(InlineCheckbox)>
                       </th>
                     </TableSelectAll>
@@ -1382,32 +1371,21 @@ exports[`DataTable selection should render 1`] = `
                           name="select-all"
                           onClick={[Function]}
                         >
-                          <InlineCheckbox
-                            ariaLabel="Select all rows"
+                          <input
                             checked={false}
+                            className="bx--checkbox"
                             id="data-table-6__select-all"
-                            indeterminate={false}
-                            innerRef={null}
                             name="select-all"
                             onChange={[Function]}
                             onClick={[Function]}
-                          >
-                            <input
-                              checked={false}
-                              className="bx--checkbox"
-                              id="data-table-6__select-all"
-                              name="select-all"
-                              onChange={[Function]}
-                              onClick={[Function]}
-                              type="checkbox"
-                            />
-                            <label
-                              aria-label="Select all rows"
-                              className="bx--checkbox-label"
-                              htmlFor="data-table-6__select-all"
-                              onClick={[Function]}
-                            />
-                          </InlineCheckbox>
+                            type="checkbox"
+                          />
+                          <label
+                            aria-label="Select all rows"
+                            className="bx--checkbox-label"
+                            htmlFor="data-table-6__select-all"
+                            onClick={[Function]}
+                          />
                         </ForwardRef(InlineCheckbox)>
                       </th>
                     </TableSelectAll>
@@ -1483,33 +1461,22 @@ exports[`DataTable selection should render 1`] = `
                           name="select-row-b"
                           onClick={[Function]}
                         >
-                          <InlineCheckbox
-                            ariaLabel="Select row"
+                          <input
                             checked={false}
+                            className="bx--checkbox"
                             disabled={false}
                             id="data-table-6__select-row-b"
-                            innerRef={null}
                             name="select-row-b"
                             onChange={[Function]}
                             onClick={[Function]}
-                          >
-                            <input
-                              checked={false}
-                              className="bx--checkbox"
-                              disabled={false}
-                              id="data-table-6__select-row-b"
-                              name="select-row-b"
-                              onChange={[Function]}
-                              onClick={[Function]}
-                              type="checkbox"
-                            />
-                            <label
-                              aria-label="Select row"
-                              className="bx--checkbox-label"
-                              htmlFor="data-table-6__select-row-b"
-                              onClick={[Function]}
-                            />
-                          </InlineCheckbox>
+                            type="checkbox"
+                          />
+                          <label
+                            aria-label="Select row"
+                            className="bx--checkbox-label"
+                            htmlFor="data-table-6__select-row-b"
+                            onClick={[Function]}
+                          />
                         </ForwardRef(InlineCheckbox)>
                       </td>
                     </TableSelectRow>
@@ -1553,33 +1520,22 @@ exports[`DataTable selection should render 1`] = `
                           name="select-row-a"
                           onClick={[Function]}
                         >
-                          <InlineCheckbox
-                            ariaLabel="Select row"
+                          <input
                             checked={false}
+                            className="bx--checkbox"
                             disabled={false}
                             id="data-table-6__select-row-a"
-                            innerRef={null}
                             name="select-row-a"
                             onChange={[Function]}
                             onClick={[Function]}
-                          >
-                            <input
-                              checked={false}
-                              className="bx--checkbox"
-                              disabled={false}
-                              id="data-table-6__select-row-a"
-                              name="select-row-a"
-                              onChange={[Function]}
-                              onClick={[Function]}
-                              type="checkbox"
-                            />
-                            <label
-                              aria-label="Select row"
-                              className="bx--checkbox-label"
-                              htmlFor="data-table-6__select-row-a"
-                              onClick={[Function]}
-                            />
-                          </InlineCheckbox>
+                            type="checkbox"
+                          />
+                          <label
+                            aria-label="Select row"
+                            className="bx--checkbox-label"
+                            htmlFor="data-table-6__select-row-a"
+                            onClick={[Function]}
+                          />
                         </ForwardRef(InlineCheckbox)>
                       </td>
                     </TableSelectRow>
@@ -1623,33 +1579,22 @@ exports[`DataTable selection should render 1`] = `
                           name="select-row-c"
                           onClick={[Function]}
                         >
-                          <InlineCheckbox
-                            ariaLabel="Select row"
+                          <input
                             checked={false}
+                            className="bx--checkbox"
                             disabled={false}
                             id="data-table-6__select-row-c"
-                            innerRef={null}
                             name="select-row-c"
                             onChange={[Function]}
                             onClick={[Function]}
-                          >
-                            <input
-                              checked={false}
-                              className="bx--checkbox"
-                              disabled={false}
-                              id="data-table-6__select-row-c"
-                              name="select-row-c"
-                              onChange={[Function]}
-                              onClick={[Function]}
-                              type="checkbox"
-                            />
-                            <label
-                              aria-label="Select row"
-                              className="bx--checkbox-label"
-                              htmlFor="data-table-6__select-row-c"
-                              onClick={[Function]}
-                            />
-                          </InlineCheckbox>
+                            type="checkbox"
+                          />
+                          <label
+                            aria-label="Select row"
+                            className="bx--checkbox-label"
+                            htmlFor="data-table-6__select-row-c"
+                            onClick={[Function]}
+                          />
                         </ForwardRef(InlineCheckbox)>
                       </td>
                     </TableSelectRow>
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectAll-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectAll-test.js.snap
index fa7ee5f3aba4..08247ac45991 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectAll-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectAll-test.js.snap
@@ -34,31 +34,21 @@ exports[`DataTable.TableSelectAll should render 1`] = `
                     name="select-all"
                     onClick={[MockFunction]}
                   >
-                    <InlineCheckbox
-                      ariaLabel="Select all rows in the table"
+                    <input
                       checked={false}
+                      className="bx--checkbox"
                       id="id"
-                      innerRef={null}
                       name="select-all"
                       onChange={[Function]}
                       onClick={[MockFunction]}
-                    >
-                      <input
-                        checked={false}
-                        className="bx--checkbox"
-                        id="id"
-                        name="select-all"
-                        onChange={[Function]}
-                        onClick={[MockFunction]}
-                        type="checkbox"
-                      />
-                      <label
-                        aria-label="Select all rows in the table"
-                        className="bx--checkbox-label"
-                        htmlFor="id"
-                        onClick={[Function]}
-                      />
-                    </InlineCheckbox>
+                      type="checkbox"
+                    />
+                    <label
+                      aria-label="Select all rows in the table"
+                      className="bx--checkbox-label"
+                      htmlFor="id"
+                      onClick={[Function]}
+                    />
                   </ForwardRef(InlineCheckbox)>
                 </th>
               </TableSelectAll>
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectRow-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectRow-test.js.snap
index 20a480322c10..419c79bf88cd 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectRow-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectRow-test.js.snap
@@ -33,31 +33,21 @@ exports[`DataTable.TableSelectRow should render 1`] = `
                     name="select-all"
                     onClick={[MockFunction]}
                   >
-                    <InlineCheckbox
-                      ariaLabel="Aria label"
+                    <input
                       checked={false}
+                      className="bx--checkbox"
                       id="id"
-                      innerRef={null}
                       name="select-all"
                       onChange={[Function]}
                       onClick={[MockFunction]}
-                    >
-                      <input
-                        checked={false}
-                        className="bx--checkbox"
-                        id="id"
-                        name="select-all"
-                        onChange={[Function]}
-                        onClick={[MockFunction]}
-                        type="checkbox"
-                      />
-                      <label
-                        aria-label="Aria label"
-                        className="bx--checkbox-label"
-                        htmlFor="id"
-                        onClick={[Function]}
-                      />
-                    </InlineCheckbox>
+                      type="checkbox"
+                    />
+                    <label
+                      aria-label="Aria label"
+                      className="bx--checkbox-label"
+                      htmlFor="id"
+                      onClick={[Function]}
+                    />
                   </ForwardRef(InlineCheckbox)>
                 </td>
               </TableSelectRow>
diff --git a/packages/react/src/components/InlineCheckbox/InlineCheckbox-test.js b/packages/react/src/components/InlineCheckbox/InlineCheckbox-test.js
index cfc3d7eb7495..169195ac09e4 100644
--- a/packages/react/src/components/InlineCheckbox/InlineCheckbox-test.js
+++ b/packages/react/src/components/InlineCheckbox/InlineCheckbox-test.js
@@ -12,7 +12,9 @@ import userEvent from '@testing-library/user-event';
 
 describe('InlineCheckbox', () => {
   it('should render', () => {
-    render(<InlineCheckbox />);
+    render(
+      <InlineCheckbox ariaLabel="test-label" id="test-id" name="test-name" />
+    );
     expect(screen.getByRole('checkbox')).toBeInTheDocument();
   });
 
@@ -21,7 +23,7 @@ describe('InlineCheckbox', () => {
     render(
       /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
       <div onClick={onClick}>
-        <InlineCheckbox />
+        <InlineCheckbox ariaLabel="test-label" id="test-id" name="test-name" />
       </div>
     );
     userEvent.click(screen.getByRole('checkbox'));
diff --git a/packages/react/src/components/InlineCheckbox/InlineCheckbox.js b/packages/react/src/components/InlineCheckbox/InlineCheckbox.js
index 783dd840a456..f85e938549e3 100644
--- a/packages/react/src/components/InlineCheckbox/InlineCheckbox.js
+++ b/packages/react/src/components/InlineCheckbox/InlineCheckbox.js
@@ -6,154 +6,122 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
-import { settings } from 'carbon-components';
-import mergeRefs from '../../tools/mergeRefs';
-
-const { prefix } = settings;
-
-class InlineCheckbox extends React.Component {
-  static propTypes = {
-    /**
-     * Specify the label for the control
-     */
-    ariaLabel: PropTypes.string.isRequired,
-
-    /**
-     * Specify whether the underlying control is checked, or not
-     */
-    checked: PropTypes.bool.isRequired,
-
-    /**
-     * Specify whether the underlying input control should be disabled
-     */
-    disabled: PropTypes.bool,
-
-    /**
-     * Provide an `id` for the underlying input control
-     */
-    id: PropTypes.string.isRequired,
-
-    /**
-     * Specify whether the control is in an indterminate state
-     */
-    indeterminate: PropTypes.bool,
-
-    /**
-     * Provide a `name` for the underlying input control
-     */
-    name: PropTypes.string.isRequired,
-
-    /**
-     * Provide an optional hook that is called each time the input is updated
-     */
-    onChange: PropTypes.func,
-
-    /**
-     * Provide a handler that is invoked when a user clicks on the control
-     */
-    onClick: PropTypes.func,
-    /**
-     * Provide a handler that is invoked on the key down event for the control
-     */
-    onKeyDown: PropTypes.func,
-
-    /**
-     * Provide an optional tooltip for the InlineCheckbox
-     */
-    title: PropTypes.string,
+import React, { useEffect, useRef } from 'react';
+import { usePrefix } from '../../internal/usePrefix';
+import { useMergedRefs } from '../../internal/useMergedRefs';
+
+const InlineCheckbox = React.forwardRef(function InlineCheckbox(
+  props,
+  forwardRef
+) {
+  const {
+    ariaLabel,
+    checked = false,
+    disabled,
+    id,
+    indeterminate,
+    name,
+    onChange = () => {},
+    onClick,
+    onKeyDown,
+    title,
+  } = props;
+  const prefix = usePrefix();
+  const inputRef = useRef(null);
+  const ref = useMergedRefs([inputRef, forwardRef]);
+  const inputProps = {
+    checked,
+    className: `${prefix}--checkbox`,
+    disabled,
+    id,
+    name,
+    onClick,
+    onChange: (evt) => {
+      onChange(evt.target.checked, id, evt);
+    },
+    onKeyDown,
+    ref,
+    type: 'checkbox',
   };
 
-  static defaultProps = {
-    ariaLabel: '',
-    checked: false,
-    id: 'inline-checkbox',
-    name: '',
-    onChange: () => {},
-  };
-
-  componentDidMount() {
-    if (this.inputNode) {
-      this.inputNode.indeterminate = this.props.indeterminate;
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    if (
-      this.inputNode &&
-      prevProps.indeterminate !== this.props.indeterminate
-    ) {
-      this.inputNode.indeterminate = this.props.indeterminate;
-    }
-  }
-
-  handleRef = (el) => {
-    this.inputNode = el;
-  };
-
-  render() {
-    const {
-      id,
-      indeterminate,
-      checked,
-      disabled,
-      ariaLabel,
-      name,
-      onChange,
-      onClick,
-      onKeyDown,
-      title = undefined,
-      // eslint-disable-next-line react/prop-types
-      innerRef: ref,
-    } = this.props;
-    const inputProps = {
-      id,
-      name,
-      onClick,
-      onChange: (evt) => {
-        onChange(evt.target.checked, id, evt);
-      },
-      onKeyDown,
-      className: `${prefix}--checkbox`,
-      type: 'checkbox',
-      ref: mergeRefs(ref, this.handleRef),
-      checked: false,
-      disabled,
-    };
-
-    if (checked) {
-      inputProps.checked = true;
-    }
-
-    if (indeterminate) {
-      inputProps.checked = false;
-      inputProps['aria-checked'] = 'mixed';
-    }
-
-    return (
-      <>
-        <input {...inputProps} />
-        {
-          /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control,jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
-          <label
-            htmlFor={id}
-            className={`${prefix}--checkbox-label`}
-            aria-label={ariaLabel}
-            title={title}
-            onClick={(evt) => {
-              evt.stopPropagation();
-            }}
-          />
-        }
-      </>
-    );
+  if (indeterminate) {
+    inputProps.checked = false;
+    inputProps['aria-checked'] = 'mixed';
   }
-}
 
-export default (() => {
-  const forwardRef = (props, ref) => (
-    <InlineCheckbox {...props} innerRef={ref} />
+  useEffect(() => {
+    inputRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+
+  return (
+    <>
+      <input {...inputProps} />
+      {
+        /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control,jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
+        <label
+          htmlFor={id}
+          className={`${prefix}--checkbox-label`}
+          aria-label={ariaLabel}
+          title={title}
+          onClick={(evt) => {
+            evt.stopPropagation();
+          }}
+        />
+      }
+    </>
   );
-  forwardRef.displayName = 'InlineCheckbox';
-  return React.forwardRef(forwardRef);
-})();
+});
+
+InlineCheckbox.propTypes = {
+  /**
+   * Specify the label for the control
+   */
+  ariaLabel: PropTypes.string.isRequired,
+
+  /**
+   * Specify whether the underlying control is checked, or not
+   */
+  checked: PropTypes.bool,
+
+  /**
+   * Specify whether the underlying input control should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Provide an `id` for the underlying input control
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Specify whether the control is in an indterminate state
+   */
+  indeterminate: PropTypes.bool,
+
+  /**
+   * Provide a `name` for the underlying input control
+   */
+  name: PropTypes.string.isRequired,
+
+  /**
+   * Provide an optional hook that is called each time the input is updated
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Provide a handler that is invoked when a user clicks on the control
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Provide a handler that is invoked on the key down event for the control
+   */
+  onKeyDown: PropTypes.func,
+
+  /**
+   * Provide an optional tooltip for the InlineCheckbox
+   */
+  title: PropTypes.string,
+};
+
+export default InlineCheckbox;