feat(scroll-area): add dragging state to scroll area context and machine (#2652)

* feat(scroll-area): add dragging state to scroll area context and machine

- Introduced a new `dragging` property in the ScrollAreaContext interface.
- Updated the state machine to manage the `dragging` state during drag events.
- Enhanced the connect function to expose the `dragging` state for UI binding.

* feat(scroll-area): add hover and dragging data attributes to connect function

* docs: changelog

---------

Co-authored-by: Segun Adebayo <joseshegs@gmail.com>

Author: devpla

.changeset/tricky-meals-appear.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/scroll-area": patch
+---
+
+Add `data-dragging` attribute to scroll area parts for ease of styling.

packages/machines/scroll-area/src/scroll-area.connect.ts

@@ -40,6 +40,7 @@ export function connect<T extends PropTypes>(
       const horizontal = props.orientation === "horizontal"
       return {
         hovering: context.get("hovering"),
+        dragging: context.get("dragging"),
         scrolling: context.get(horizontal ? "scrollingX" : "scrollingY"),
         hidden: horizontal ? hiddenState.scrollbarXHidden : hiddenState.scrollbarYHidden,
       }
@@ -126,6 +127,7 @@ export function connect<T extends PropTypes>(
         "data-orientation": orientation,
         "data-scrolling": dataAttr(context.get(orientation === "horizontal" ? "scrollingX" : "scrollingY")),
         "data-hover": dataAttr(context.get("hovering")),
+        "data-dragging": dataAttr(context.get("dragging")),
         "data-overflow-x": dataAttr(!hiddenState.scrollbarXHidden),
         "data-overflow-y": dataAttr(!hiddenState.scrollbarYHidden),
         onPointerUp() {
@@ -167,6 +169,8 @@ export function connect<T extends PropTypes>(
         ...parts.thumb.attrs,
         "data-ownedby": dom.getRootId(scope),
         "data-orientation": orientation,
+        "data-hover": dataAttr(context.get("hovering")),
+        "data-dragging": dataAttr(context.get("dragging")),
         onPointerDown(event) {
           if (event.button !== 0) return
           const point = getEventPoint(event)

packages/machines/scroll-area/src/scroll-area.machine.ts

@@ -24,6 +24,7 @@ export const machine = createMachine<ScrollAreaSchema>({
       scrollingX: bindable<boolean>(() => ({ defaultValue: false })),
       scrollingY: bindable<boolean>(() => ({ defaultValue: false })),
       hovering: bindable<boolean>(() => ({ defaultValue: false })),
+      dragging: bindable<boolean>(() => ({ defaultValue: false })),
       touchModality: bindable<boolean>(() => ({ defaultValue: false })),
       atSides: bindable<ScrollRecord<boolean>>(() => ({
         defaultValue: { top: true, right: false, bottom: false, left: true },
@@ -359,7 +360,7 @@ export const machine = createMachine<ScrollAreaSchema>({
         }
       },
 
-      startDragging({ event, refs, scope }) {
+      startDragging({ event, refs, scope, context }) {
         refs.set("startX", event.point.x)
         refs.set("startY", event.point.y)
         refs.set("orientation", event.orientation)
@@ -369,6 +370,7 @@ export const machine = createMachine<ScrollAreaSchema>({
 
         refs.set("startScrollTop", viewportEl.scrollTop)
         refs.set("startScrollLeft", viewportEl.scrollLeft)
+        context.set("dragging", true)
       },
 
       setDraggingScroll({ event, refs, scope, context }) {
@@ -424,8 +426,9 @@ export const machine = createMachine<ScrollAreaSchema>({
         }
       },
 
-      stopDragging({ refs }) {
+      stopDragging({ refs, context }) {
         refs.set("orientation", null)
+        context.set("dragging", false)
       },
 
       clearTimeouts({ refs }) {

packages/machines/scroll-area/src/scroll-area.types.ts

@@ -42,6 +42,7 @@ export interface ScrollAreaContext {
   scrollingY: boolean
   hiddenState: ScrollbarHiddenState
   hovering: boolean
+  dragging: boolean
   touchModality: boolean
   atSides: ScrollRecord<boolean>
 }