[PR #120] [MERGED] feat: add scroll-box component #302

New issue

Closed

opened 2026-03-02 23:45:52 +03:00 by kerem · 0 comments

kerem commented

2026-03-02 23:45:52 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/anomalyco/opentui/pull/120
Author: @KurtGokhan
Created: 8/31/2025
Status: ✅ Merged
Merged: 9/2/2025
Merged by: @kommander

Base: main ← Head: add-scrollbox-component

📝 Commits (10+)

902c001 feat: add scroll-box component
0d8bce5 better content sizing
e51fba2 improve keyboard handling
048d9e4 use dedicated callbacks instead of event emitter
a94d940 overflow:scroll
7f5b740 remove drag to scroll for now
cd7dc6a tweak default styling
62a425c fix format
655ee32 tweak options
03666b9 make shift+scroll work

📊 Changes

7 files changed (+621 additions, -10 deletions)

View changed files

📝 packages/core/src/Renderable.ts (+12 -0)
📝 packages/core/src/examples/index.ts (+7 -0)
➕ packages/core/src/examples/scroll-example.ts (+90 -0)
📝 packages/core/src/lib/parse.mouse.ts (+10 -10)
➕ packages/core/src/renderables/ScrollBar.ts (+322 -0)
➕ packages/core/src/renderables/ScrollBox.ts (+178 -0)
📝 packages/core/src/types.ts (+2 -0)

📄 Description

~~Buffering the content for better performance~~ (postponed indefinitely)
~~Clipping~~ (Solved in #121)
~~Keyboard events~~ (done)
~~Shift + wheel to do horizontal scroll~~ (done)

Nice to have future improvements

Text selection while scrolling
Smooth scrolling

old video

https://github.com/user-attachments/assets/3a4ca7e5-9951-49b2-bdc0-7a0a70692d68

New video with clipping:

https://github.com/user-attachments/assets/e5cf89b9-07b6-4f12-b242-233c592764eb

Here is the default styling

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/anomalyco/opentui/pull/120 **Author:** [@KurtGokhan](https://github.com/KurtGokhan) **Created:** 8/31/2025 **Status:** ✅ Merged **Merged:** 9/2/2025 **Merged by:** [@kommander](https://github.com/kommander) **Base:** `main` ← **Head:** `add-scrollbox-component` --- ### 📝 Commits (10+) - [`902c001`](https://github.com/anomalyco/opentui/commit/902c0010cd62350bd5271f1998d710aa44ab31cb) feat: add scroll-box component - [`0d8bce5`](https://github.com/anomalyco/opentui/commit/0d8bce584a3f7d65c0753c36790f83e5635ce94b) better content sizing - [`e51fba2`](https://github.com/anomalyco/opentui/commit/e51fba2d1d95e56a2f6d3fe811921e5c8d8c2a1a) improve keyboard handling - [`048d9e4`](https://github.com/anomalyco/opentui/commit/048d9e48ecb658003521497911b9c2ba756668f7) use dedicated callbacks instead of event emitter - [`a94d940`](https://github.com/anomalyco/opentui/commit/a94d940ba867370809c66c6cf3a4d23c996104e9) overflow:scroll - [`7f5b740`](https://github.com/anomalyco/opentui/commit/7f5b7405016c300470fa037e26036b006d4289c7) remove drag to scroll for now - [`cd7dc6a`](https://github.com/anomalyco/opentui/commit/cd7dc6a6030dcc19c77bbd94429cd98ad4ef72c9) tweak default styling - [`62a425c`](https://github.com/anomalyco/opentui/commit/62a425ce56ac86277cc22ea3df5a856ced89d0b8) fix format - [`655ee32`](https://github.com/anomalyco/opentui/commit/655ee3264382ff4a5849633b19469ed4dd7a8f66) tweak options - [`03666b9`](https://github.com/anomalyco/opentui/commit/03666b9ea2d47d91ccb43c64d300f93df82a9bb9) make shift+scroll work ### 📊 Changes **7 files changed** (+621 additions, -10 deletions) <details> <summary>View changed files</summary> 📝 `packages/core/src/Renderable.ts` (+12 -0) 📝 `packages/core/src/examples/index.ts` (+7 -0) ➕ `packages/core/src/examples/scroll-example.ts` (+90 -0) 📝 `packages/core/src/lib/parse.mouse.ts` (+10 -10) ➕ `packages/core/src/renderables/ScrollBar.ts` (+322 -0) ➕ `packages/core/src/renderables/ScrollBox.ts` (+178 -0) 📝 `packages/core/src/types.ts` (+2 -0) </details> ### 📄 Description - ~~Buffering the content for better performance~~ (postponed indefinitely) - ~~Clipping~~ (Solved in #121) - ~~Keyboard events~~ (done) - ~~Shift + wheel to do horizontal scroll~~ (done) Nice to have future improvements - Text selection while scrolling - Smooth scrolling <details> <summary>old video</summary> https://github.com/user-attachments/assets/3a4ca7e5-9951-49b2-bdc0-7a0a70692d68 </details> New video with clipping: https://github.com/user-attachments/assets/e5cf89b9-07b6-4f12-b242-233c592764eb Here is the default styling <img width="1676" height="922" alt="image" src="https://github.com/user-attachments/assets/e37a08f4-ce9d-435e-a011-26fa06c9c125" /> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>