nitin 524a1d78d2 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>
2025-05-26 11:58:22 +02:00
2025-05-14 16:35:51 +05:30
2024-11-06 14:24:07 +01:00
2025-04-09 17:35:25 +02:00
2025-04-03 14:26:19 +02:00
2025-03-05 14:27:17 +01:00
2024-01-10 17:05:23 +01:00
2025-03-07 18:19:42 +01:00
2025-04-16 11:46:37 +02:00


Twenty logo

The #1 Open-Source CRM

🌐 Website · 📚 Documentation · Roadmap · Discord · Figma


Companies view


Installation

See:
🚀 Self-hosting
🖥️ Local Setup

Does the world need another CRM?

We built Twenty for three reasons:

CRMs are too expensive, and users are trapped. Companies use locked-in customer data to hike prices. It shouldn't be that way.

A fresh start is required to build a better experience. We can learn from past mistakes and craft a cohesive experience inspired by new UX patterns from tools like Notion, Airtable or Linear.

We believe in Open-source and community. Hundreds of developers are already building Twenty together. Once we have plugin capabilities, a whole ecosystem will grow around it.


What You Can Do With Twenty

We're currently developing Twenty's beta version.

Please feel free to flag any specific needs you have by creating an issue.

Below are a few features we have implemented to date:

Add, filter, sort, edit, and track customers:

Companies view

Create one or several opportunities for each company:

Opportunities view

Track deals effortlessly with the email integration:

Emails

Tailor your data model to meet business needs:

Data model

See rich notes displayed in a timeline:

Rich notes

Create tasks on records

Tasks

Keyboard shortcuts

Connect your CRM to all your tools through our APIs and Webhooks.

API


Stack

Thanks

Chromatic Greptile Sentry Crowdin

Thanks to these amazing services that we use and recommend for UI testing (Chromatic), code review (Greptile), catching bugs (Sentry) and translating (Crowdin).

Join the Community

Description
No description provided
Readme AGPL-3.0 324 MiB
Languages
TypeScript 98.7%
MDX 1%