feat(react): expose viewportRef prop in SelectionArea

.github/workflows/main.yml

@@ -17,6 +17,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
+          registry-url: https://registry.npmjs.org
           node-version: 18
           cache: 'pnpm'
 

packages/react/demo/index.css

@@ -4,12 +4,6 @@
     box-sizing: border-box;
 }
 
-html,
-body,
-#root {
-    height: 100%;
-}
-
 #root {
     width: 100%;
     max-width: 50em;
@@ -49,6 +43,18 @@ body,
     margin-bottom: 3em;
 }
 
+#root .viewport {
+    height: 150px;
+    overflow: auto;
+    margin-bottom: 3em;
+}
+
+#root .viewport .container {
+    max-height: unset;
+    margin-bottom: 0;
+    overflow: initial;
+}
+
 #root .container.red > div {
     margin: 0;
 }

packages/react/demo/index.tsx

@@ -3,12 +3,14 @@ import {createRoot} from 'react-dom/client';
 import SelectionArea, {SelectionEvent} from '../src';
 import './index.css';
 
-function SelectableArea({boxes, offset, className}: {
+function SelectableArea({boxes, offset, className, withCustomViewport}: {
     boxes: number;
     offset: number;
     className: string;
+    withCustomViewport?: boolean;
 }) {
     const [selected, setSelected] = useState<Set<number>>(() => new Set());
+    const viewportRef = React.useRef<HTMLDivElement>(null);
 
     const extractIds = (els: Element[]): number[] =>
         els.map(v => v.getAttribute('data-key'))
@@ -31,20 +33,37 @@ function SelectableArea({boxes, offset, className}: {
         });
     };
 
-    return (
-        <SelectionArea className={`container ${className}`}
-                       onStart={onStart}
-                       onMove={onMove}
-                       selectables=".selectable">
-            {new Array(boxes).fill(0).map((_, index) => (
-                <div className={selected.has(index + offset) ? 'selected selectable' : 'selectable'}
-                     data-key={index + offset}
-                     key={index + offset}/>
-            ))}
-        </SelectionArea>
+    const content = (
+      <SelectionArea
+        className={`container ${className}`}
+        onStart={onStart}
+        onMove={onMove}
+        viewportRef={withCustomViewport ? viewportRef : undefined}
+        selectables=".selectable"
+      >
+        {new Array(boxes).fill(0).map((_, index) => (
+          <div
+            className={
+              selected.has(index + offset)
+                ? 'selected selectable'
+                : 'selectable'
+            }
+            data-key={index + offset}
+            key={index + offset}
+          />
+        ))}
+      </SelectionArea>
+    );
+
+    return withCustomViewport ? (
+      <div ref={viewportRef} className="viewport">
+        {content}
+      </div>
+    ) : (
+      content
     );
-}
 
+}
 
 const root = createRoot(document.getElementById('root') as HTMLElement);
 
@@ -54,5 +73,6 @@ root.render(
         <SelectableArea boxes={42} offset={0} className="green"/>
         <SelectableArea boxes={42} offset={42} className="blue"/>
         <SelectableArea boxes={252} offset={82} className="red"/>
+        <SelectableArea boxes={252} offset={82} className="red" withCustomViewport/>
     </React.StrictMode>,
 );

packages/react/src/SelectionArea.tsx

@@ -1,16 +1,17 @@
 /* eslint-disable no-use-before-define */
 import VanillaSelectionArea from '@viselect/vanilla';
-import {SelectionEvents, SelectionOptions} from '@viselect/vanilla';
+import {SelectionEvents, PartialSelectionOptions} from '@viselect/vanilla';
 import React, {createRef, useEffect, createContext, useContext, useState} from 'react';
 
-export interface SelectionAreaProps extends Omit<Partial<SelectionOptions>, 'boundaries'>, React.HTMLAttributes<HTMLDivElement> {
+export interface SelectionAreaProps extends Omit<PartialSelectionOptions, 'boundaries'>, React.HTMLAttributes<HTMLDivElement> {
     id?: string;
     className?: string;
     onBeforeStart?: SelectionEvents['beforestart'];
     onBeforeDrag?: SelectionEvents['beforedrag'];
     onStart?: SelectionEvents['start'];
     onMove?: SelectionEvents['move'];
     onStop?: SelectionEvents['stop'];
+    viewportRef?: React.RefObject<HTMLDivElement>;
 }
 
 const SelectionContext = createContext<VanillaSelectionArea  | undefined>(undefined);
@@ -19,11 +20,15 @@ export const useSelection = () => useContext(SelectionContext);
 
 export const SelectionArea: React.FunctionComponent<SelectionAreaProps> = props => {
     const [selectionState, setSelection] = useState<VanillaSelectionArea | undefined>(undefined);
-    const root = createRef<HTMLDivElement>();
+    const root = props.viewportRef ?? createRef<HTMLDivElement>();
 
     useEffect(() => {
-        const {onBeforeStart, onBeforeDrag, onStart, onMove, onStop, ...opt} = props;
-        const areaBoundaries = root.current as HTMLElement;
+        const {onBeforeStart, onBeforeDrag, onStart, onMove, onStop, viewportRef, ...opt} = props;
+        const areaBoundaries = root.current;
+
+        if (!areaBoundaries) {
+            return;
+        }
 
         const selection = new VanillaSelectionArea({
             boundaries: areaBoundaries,
@@ -42,13 +47,17 @@ export const SelectionArea: React.FunctionComponent<SelectionAreaProps> = props
             selection.destroy();
             setSelection(undefined);
         };
-    }, []);
+    }, [root.current]);
 
     return (
-        <SelectionContext.Provider value={selectionState}>
-            <div ref={root} className={props.className} id={props.id}>
-                {props.children}
-            </div>
-        </SelectionContext.Provider>
+      <SelectionContext.Provider value={selectionState}>
+        <div
+          ref={props.viewportRef ? undefined : root}
+          className={props.className}
+          id={props.id}
+        >
+          {props.children}
+        </div>
+      </SelectionContext.Provider>
     );
 };