Death of the path, fix some hooks, fix selectedRows

- Fixed an issue where dependency hooks were not being reduced properly, thus the table would rerender unnecessarily
- Renamed `toggleRowSelectedAll` to `toggleAllRowsSelected`. Duh...
- Added an `indeterminate` boolean prop to the default props for row selection toggle prop getters
- Renamed `selectedRowPaths` to `selectedRowIds`, which also no longer contains paths, but row IDs
- Grouped or nested row selection actions and state are now derived, instead of tracked in state.
- Rows now have a new property called `id`, which existed before and was derived from the `getRowId` option
- Rows now also have an `isSomeSelected` prop when using the `useRowSelect` hook, which denotes that at least one subRow is selected (if applicable)
- Rows' `path` property has been deprecated in favor of `id`
- Expanded state is now tracked with row IDs instead of paths
- RowState is now tracked with row IDs instead of paths
- `toggleExpandedByPath` has been renamed to `toggleExpandedById`, and thus accepts a row ID now, instead of a row path

src/plugin-hooks/tests/useRowSelect.test.js

@@ -75,7 +75,7 @@ function Table({ columns, data }) {
     headerGroups,
     rows,
     prepareRow,
-    state: { selectedRowPaths },
+    state: { selectedRowIds },
   } = useTable(
     {
       columns,
@@ -113,11 +113,11 @@ function Table({ columns, data }) {
           )}
         </tbody>
       </table>
-      <p>Selected Rows: {selectedRowPaths.size}</p>
+      <p>Selected Rows: {selectedRowIds.size}</p>
       <pre>
         <code>
           {JSON.stringify(
-            { selectedRowPaths: [...selectedRowPaths.values()] },
+            { selectedRowIds: [...selectedRowIds.values()] },
             null,
             2
           )}
@@ -127,6 +127,19 @@ function Table({ columns, data }) {
   )
 }
 
+const IndeterminateCheckbox = React.forwardRef(
+  ({ indeterminate, ...rest }, ref) => {
+    const defaultRef = React.useRef()
+    const resolvedRef = ref || defaultRef
+
+    React.useEffect(() => {
+      resolvedRef.current.indeterminate = indeterminate
+    }, [resolvedRef, indeterminate])
+
+    return <input type="checkbox" ref={resolvedRef} {...rest} />
+  }
+)
+
 function App() {
   const columns = React.useMemo(
     () => [
@@ -138,7 +151,7 @@ function App() {
         Header: ({ getToggleAllRowsSelectedProps }) => (
           <div>
             <label>
-              <input type="checkbox" {...getToggleAllRowsSelectedProps()} />{' '}
+              <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />{' '}
               Select All
             </label>
           </div>
@@ -148,7 +161,7 @@ function App() {
         Cell: ({ row }) => (
           <div>
             <label>
-              <input type="checkbox" {...row.getToggleRowSelectedProps()} />{' '}
+              <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />{' '}
               Select Row
             </label>
           </div>
@@ -158,8 +171,7 @@ function App() {
         id: 'selectedStatus',
         Cell: ({ row }) => (
           <div>
-            Row {row.path.join('.')}{' '}
-            {row.isSelected ? 'Selected' : 'Not Selected'}
+            Row {row.id} {row.isSelected ? 'Selected' : 'Not Selected'}
           </div>
         ),
       },