fix: Support range selection with grid/table checkboxes

Author: levrik

packages/@react-aria/grid/src/useGridSelectionCheckbox.ts

@@ -4,6 +4,7 @@ import {GridState} from '@react-stately/grid';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {Key} from '@react-types/shared';
+import {useEffect, useRef} from 'react';
 import {useId} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
@@ -31,8 +32,30 @@ export function useGridSelectionCheckbox<T, C extends GridCollection<T>>(props:
   let isDisabled = !state.selectionManager.canSelectItem(key);
   let isSelected = state.selectionManager.isSelected(key);
 
+  let isShiftDown = useRef(false);
+  useEffect(() => {
+    let trackKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Shift') {
+        isShiftDown.current = true;
+      }
+    };
+    let trackKeyUp = (e: KeyboardEvent) => {
+      if (e.key === 'Shift') {
+        isShiftDown.current = false;
+      }
+    };
+
+    document.addEventListener('keydown', trackKeyDown);
+    document.addEventListener('keyup', trackKeyUp);
+
+    return () => {
+      document.removeEventListener('keydown', trackKeyDown);
+      document.removeEventListener('keyup', trackKeyUp);
+    };
+  });
+
   // Checkbox should always toggle selection, regardless of selectionBehavior.
-  let onChange = () => manager.toggleSelection(key);
+  let onChange = () => isShiftDown.current ? manager.extendSelection(key) : manager.toggleSelection(key);
 
   const stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/grid');