Refactor drag selection: Replace external library with custom implementation and add auto-scroll (#12134)

Closes #12076
Closes #11764

Replaced the `@air/react-drag-to-select` library with a custom
implementation to get better control over the selection behavior and add
auto-scroll functionality.

**What changed:**
- Removed external drag selection dependency 
- Built custom drag selection from scratch using pointer events --
@charlesBochet
- Added auto-scroll when dragging near container edges
- Fixed boundary detection so selection stays within intended areas
- Added proper `data-select-disable` support for checkboxes and other
non-selectable elements

The new implementation gives us full control over the selection logic
and eliminates the external dependency while adding the auto-scroll
feature that was **not** requested 😂

**Auto Scroll**



https://github.com/user-attachments/assets/3509966d-5b6e-4f6c-a77a-f9a2bf26049f



related to #12076 


https://github.com/user-attachments/assets/2837f80e-728c-4739-a0e2-b8d7bc83a21a

**Also fixed:**
- Record board column height not extending to the bottom (styling issue
I found while working on this)

before:

<img width="1512" alt="Screenshot 2025-05-19 at 23 58 54"
src="https://github.com/user-attachments/assets/602b310f-7ef6-44f6-99e9-da5ff59b31d3"
/>

after:

<img width="1512" alt="Screenshot 2025-05-19 at 23 56 40"
src="https://github.com/user-attachments/assets/1d0ecb5c-49e0-4f03-be3b-154a6f16a7a4"
/>

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
nitin
2025-05-26 15:28:22 +05:30
committed by GitHub
parent 621a779526
commit 524a1d78d2
24 changed files with 1244 additions and 100 deletions

View File

@ -24,18 +24,6 @@ __metadata:
languageName: node
linkType: hard
"@air/react-drag-to-select@npm:^5.0.8":
version: 5.0.8
resolution: "@air/react-drag-to-select@npm:5.0.8"
dependencies:
react-style-object-to-css: "npm:^1.1.2"
peerDependencies:
react: 16 - 18
react-dom: 16 - 18
checksum: 10c0/a7005e863ab0dc93ae789a8093d8284f6f4c519a8f23c54136f493e014b2a10dcab42c83521e75a83fdac5806d55a38f417b108386c684b050a4fbc4071fb419
languageName: node
linkType: hard
"@algolia/autocomplete-core@npm:1.9.3":
version: 1.9.3
resolution: "@algolia/autocomplete-core@npm:1.9.3"
@ -50271,13 +50259,6 @@ __metadata:
languageName: node
linkType: hard
"react-style-object-to-css@npm:^1.1.2":
version: 1.1.2
resolution: "react-style-object-to-css@npm:1.1.2"
checksum: 10c0/c2154dd99723dbc2c359a167401d65b8bae300b9e7ed0c7609b617340d941faa4af822d855257b6f0e36522e30665650c7263f4ed8d556217e246048fbc7bb7c
languageName: node
linkType: hard
"react-style-singleton@npm:^2.2.1":
version: 2.2.1
resolution: "react-style-singleton@npm:2.2.1"
@ -55783,7 +55764,6 @@ __metadata:
version: 0.0.0-use.local
resolution: "twenty@workspace:."
dependencies:
"@air/react-drag-to-select": "npm:^5.0.8"
"@apollo/client": "npm:^3.7.17"
"@apollo/server": "npm:^4.7.3"
"@aws-sdk/client-lambda": "npm:^3.614.0"