feat(select) shift select on checkbox possiblr

Author: rwieruch

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@table-library/react-table-library",
-  "version": "2.0.9",
+  "version": "2.0.10",
   "description": "react-table-library",
   "type": "module",
   "main": "main.js",

src/common/context/Feature.tsx

@@ -11,6 +11,7 @@ export const useFeatures = () => {
   const sort = React.useContext(SortContext);
   const pagination = React.useContext(PaginationContext);
 
+  // if changed, adjust applyModifiers usages
   return {
     select,
     tree,

src/table/Table/useShiftDown.ts renamed to src/common/hooks/useShiftDown.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+// not all events offer the shiftKey property (e.g. checkbox click)
+
 export const useShiftDown = () => {
   const [isShiftDown, setShiftDown] = React.useState(false);
 

src/select/CellSelect.tsx

@@ -2,6 +2,9 @@ import * as React from 'react';
 
 import { Cell } from '@table-library/react-table-library/table/Cell';
 import { SelectContext } from '@table-library/react-table-library/common/context/Select';
+import { useFeatures } from '@table-library/react-table-library/common/context/Feature';
+import { applyModifiers } from '@table-library/react-table-library/common/util/modifiers';
+import { useShiftDown } from '@table-library/react-table-library/common/hooks/useShiftDown';
 
 import { SelectTypes, CellSelectProps } from '@table-library/react-table-library/types/select';
 
@@ -11,6 +14,9 @@ export const CellSelect: React.FC<CellSelectProps> = React.memo(
   ({ item, ...passThrough }: CellSelectProps) => {
     const select = React.useContext(SelectContext);
 
+    const features = useFeatures();
+    const isShiftDown = useShiftDown();
+
     if (!select) {
       throw new Error(
         'No Select Context. No return value from useRowSelect provided to Table component.',
@@ -22,18 +28,20 @@ export const CellSelect: React.FC<CellSelectProps> = React.memo(
         ? select.state.id === item.id || select.state.ids.includes(item.id)
         : select.state.ids.includes(item.id);
 
-    const handleChange = () => {
-      const isSingleSelect = select.options.buttonSelect === SelectTypes.SingleSelect;
+    const handleChange = React.useCallback(() => {
+      const isSingleSelectType = select.options.buttonSelect === SelectTypes.SingleSelect;
 
-      if (isSingleSelect) {
+      if (isShiftDown) {
+        select.fns.onToggleByIdShift(item.id, select.options, applyModifiers(features));
+      } else if (isSingleSelectType) {
         select.fns.onToggleByIdExclusively(item.id);
-      } else {
+      } /* isMtuliSelectType */ else {
         select.fns.onToggleByIdRecursively(item.id, {
           isCarryForward: select.options.isCarryForward,
           isPartialToAll: select.options.isPartialToAll,
         });
       }
-    };
+    }, [isShiftDown, features, item.id, select]);
 
     return (
       <Cell stiff {...passThrough}>

src/select/useRowSelect.tsx

@@ -58,7 +58,6 @@ const getRowProps = (props: RowProps, features: Features): FeatureProps => {
 
   const onClick = (node: TableNode, event: React.SyntheticEvent | React.KeyboardEvent) => {
     if (!isRowClick(event)) return;
-
     if (select.options.clickType !== SelectClickTypes.RowClick) return;
 
     const isMultiSelectType = select.options.rowSelect === SelectTypes.MultiSelect;
@@ -67,12 +66,10 @@ const getRowProps = (props: RowProps, features: Features): FeatureProps => {
     const isCommandSelectType = !!(event as any).metaKey;
     const isShiftSelectType = !!(event as any).shiftKey;
 
-    const modifier = applyModifiers(features);
-
     if (isCommandSelectType) {
       select.fns.onToggleById(node.id);
     } else if (isShiftSelectType) {
-      select.fns.onToggleByIdShift(node.id, select.options, modifier);
+      select.fns.onToggleByIdShift(node.id, select.options, applyModifiers(features));
     } else if (isMultiSelectType) {
       select.fns.onToggleById(node.id);
     } /* isSingleSelectType */ else {

src/table/Table/index.tsx

@@ -12,6 +12,7 @@ import { TreeContext } from '@table-library/react-table-library/common/context/T
 import { PaginationContext } from '@table-library/react-table-library/common/context/Pagination';
 
 import { applyModifiers } from '@table-library/react-table-library/common/util/modifiers';
+import { useShiftDown } from '@table-library/react-table-library/common/hooks/useShiftDown';
 
 import { Nullish } from '@table-library/react-table-library/types/common';
 import { TableProps } from '@table-library/react-table-library/types/table';
@@ -21,7 +22,6 @@ import {
   TableElementRef,
 } from '@table-library/react-table-library/types/layout';
 
-import { useShiftDown } from './useShiftDown';
 import { useOnInit } from './useOnInit';
 
 import styles from './styles';
@@ -65,6 +65,7 @@ const Table: React.FC<TableProps> = React.forwardRef(
     const tableElementRef = useTableElementRef(ref);
     const tableMemoryRef = useTableMemoryRef();
 
+    // if changed, adjust useFeatures hook
     const modifiedNodes = applyModifiers({
       sort,
       pagination,