@radix-ui/react-scroll-area 1.2.14 → 1.2.15-rc.1784059564143

package/dist/index.mjs

@@ -1,4 +1,6 @@
 "use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
 // src/scroll-area.tsx
 import * as React2 from "react";
@@ -20,14 +22,15 @@ function useStateMachine(initialState, machine) {
     return nextState ?? state;
   }, initialState);
 }
+__name(useStateMachine, "useStateMachine");
 
 // src/scroll-area.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var SCROLL_AREA_NAME = "ScrollArea";
 var [createScrollAreaContext, createScrollAreaScope] = createContextScope(SCROLL_AREA_NAME);
 var [ScrollAreaProvider, useScrollAreaContext] = createScrollAreaContext(SCROLL_AREA_NAME);
-var ScrollArea = React2.forwardRef(
-  (props, forwardedRef) => {
+var ScrollArea = /* @__PURE__ */ React2.forwardRef(
+  /* @__PURE__ */ __name(function ScrollArea2(props, forwardedRef) {
     const {
       __scopeScrollArea,
       type = "hover",
@@ -85,12 +88,12 @@ var ScrollArea = React2.forwardRef(
         )
       }
     );
-  }
+  }, "ScrollArea")
 );
-ScrollArea.displayName = SCROLL_AREA_NAME;
 var VIEWPORT_NAME = "ScrollAreaViewport";
-var ScrollAreaViewport = React2.forwardRef(
-  (props, forwardedRef) => {
+var ScrollAreaViewport = /* @__PURE__ */ React2.forwardRef(
+  // blank line to reduce diff noise
+  /* @__PURE__ */ __name(function ScrollAreaViewport2(props, forwardedRef) {
     const { __scopeScrollArea, children, nonce, ...viewportProps } = props;
     const context = useScrollAreaContext(VIEWPORT_NAME, __scopeScrollArea);
     const ref = React2.useRef(null);
@@ -123,11 +126,10 @@ var ScrollAreaViewport = React2.forwardRef(
         }
       )
     ] });
-  }
+  }, "ScrollAreaViewport")
 );
-ScrollAreaViewport.displayName = VIEWPORT_NAME;
-var ScrollAreaViewportStyle = React2.memo(
-  ({ nonce }) => {
+var ScrollAreaViewportStyle = /* @__PURE__ */ React2.memo(
+  /* @__PURE__ */ __name(function ScrollAreaViewportStyle2({ nonce }) {
     return /* @__PURE__ */ jsx(
       "style",
       {
@@ -137,12 +139,13 @@ var ScrollAreaViewportStyle = React2.memo(
         nonce
       }
     );
-  },
+  }, "ScrollAreaViewportStyle"),
   (prevProps, nextProps) => prevProps.nonce === nextProps.nonce
 );
 var SCROLLBAR_NAME = "ScrollAreaScrollbar";
-var ScrollAreaScrollbar = React2.forwardRef(
-  (props, forwardedRef) => {
+var ScrollAreaScrollbar = /* @__PURE__ */ React2.forwardRef(
+  // blank line to reduce diff noise
+  /* @__PURE__ */ __name(function ScrollAreaScrollbar2(props, forwardedRef) {
     const { forceMount, ...scrollbarProps } = props;
     const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
     const { onScrollbarXEnabledChange, onScrollbarYEnabledChange } = context;
@@ -154,10 +157,9 @@ var ScrollAreaScrollbar = React2.forwardRef(
       };
     }, [isHorizontal, onScrollbarXEnabledChange, onScrollbarYEnabledChange]);
     return context.type === "hover" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarHover, { ...scrollbarProps, ref: forwardedRef, forceMount }) : context.type === "scroll" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarScroll, { ...scrollbarProps, ref: forwardedRef, forceMount }) : context.type === "auto" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarAuto, { ...scrollbarProps, ref: forwardedRef, forceMount }) : context.type === "always" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarVisible, { ...scrollbarProps, ref: forwardedRef, "data-state": "visible" }) : null;
-  }
+  }, "ScrollAreaScrollbar")
 );
-ScrollAreaScrollbar.displayName = SCROLLBAR_NAME;
-var ScrollAreaScrollbarHover = React2.forwardRef((props, forwardedRef) => {
+var ScrollAreaScrollbarHover = /* @__PURE__ */ React2.forwardRef(/* @__PURE__ */ __name(function ScrollAreaScrollbarHover2(props, forwardedRef) {
   const { forceMount, ...scrollbarProps } = props;
   const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
   const [visible, setVisible] = React2.useState(false);
@@ -165,13 +167,13 @@ var ScrollAreaScrollbarHover = React2.forwardRef((props, forwardedRef) => {
     const scrollArea = context.scrollArea;
     let hideTimer = 0;
     if (scrollArea) {
-      const handlePointerEnter = () => {
+      const handlePointerEnter = /* @__PURE__ */ __name(() => {
         window.clearTimeout(hideTimer);
         setVisible(true);
-      };
-      const handlePointerLeave = () => {
+      }, "handlePointerEnter");
+      const handlePointerLeave = /* @__PURE__ */ __name(() => {
         hideTimer = window.setTimeout(() => setVisible(false), context.scrollHideDelay);
-      };
+      }, "handlePointerLeave");
       scrollArea.addEventListener("pointerenter", handlePointerEnter);
       scrollArea.addEventListener("pointerleave", handlePointerLeave);
       return () => {
@@ -189,8 +191,8 @@ var ScrollAreaScrollbarHover = React2.forwardRef((props, forwardedRef) => {
       ref: forwardedRef
     }
   ) });
-});
-var ScrollAreaScrollbarScroll = React2.forwardRef((props, forwardedRef) => {
+}, "ScrollAreaScrollbarHover"));
+var ScrollAreaScrollbarScroll = /* @__PURE__ */ React2.forwardRef(/* @__PURE__ */ __name(function ScrollAreaScrollbarScroll2(props, forwardedRef) {
   const { forceMount, ...scrollbarProps } = props;
   const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
   const isHorizontal = props.orientation === "horizontal";
@@ -224,7 +226,7 @@ var ScrollAreaScrollbarScroll = React2.forwardRef((props, forwardedRef) => {
     const scrollDirection = isHorizontal ? "scrollLeft" : "scrollTop";
     if (viewport) {
       let prevScrollPos = viewport[scrollDirection];
-      const handleScroll = () => {
+      const handleScroll = /* @__PURE__ */ __name(() => {
         const scrollPos = viewport[scrollDirection];
         const hasScrollInDirectionChanged = prevScrollPos !== scrollPos;
         if (hasScrollInDirectionChanged) {
@@ -232,7 +234,7 @@ var ScrollAreaScrollbarScroll = React2.forwardRef((props, forwardedRef) => {
           debounceScrollEnd();
         }
         prevScrollPos = scrollPos;
-      };
+      }, "handleScroll");
       viewport.addEventListener("scroll", handleScroll);
       return () => viewport.removeEventListener("scroll", handleScroll);
     }
@@ -247,8 +249,8 @@ var ScrollAreaScrollbarScroll = React2.forwardRef((props, forwardedRef) => {
       onPointerLeave: composeEventHandlers(props.onPointerLeave, () => send("POINTER_LEAVE"))
     }
   ) });
-});
-var ScrollAreaScrollbarAuto = React2.forwardRef((props, forwardedRef) => {
+}, "ScrollAreaScrollbarScroll"));
+var ScrollAreaScrollbarAuto = /* @__PURE__ */ React2.forwardRef(/* @__PURE__ */ __name(function ScrollAreaScrollbarAuto2(props, forwardedRef) {
   const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
   const { forceMount, ...scrollbarProps } = props;
   const [visible, setVisible] = React2.useState(false);
@@ -270,8 +272,8 @@ var ScrollAreaScrollbarAuto = React2.forwardRef((props, forwardedRef) => {
       ref: forwardedRef
     }
   ) });
-});
-var ScrollAreaScrollbarVisible = React2.forwardRef((props, forwardedRef) => {
+}, "ScrollAreaScrollbarAuto"));
+var ScrollAreaScrollbarVisible = /* @__PURE__ */ React2.forwardRef(/* @__PURE__ */ __name(function ScrollAreaScrollbarVisible2(props, forwardedRef) {
   const { orientation = "vertical", ...scrollbarProps } = props;
   const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
   const thumbRef = React2.useRef(null);
@@ -287,13 +289,14 @@ var ScrollAreaScrollbarVisible = React2.forwardRef((props, forwardedRef) => {
     sizes,
     onSizesChange: setSizes,
     hasThumb: Boolean(thumbRatio > 0 && thumbRatio < 1),
-    onThumbChange: (thumb) => thumbRef.current = thumb,
-    onThumbPointerUp: () => pointerOffsetRef.current = 0,
-    onThumbPointerDown: (pointerPos) => pointerOffsetRef.current = pointerPos
+    onThumbChange: /* @__PURE__ */ __name((thumb) => thumbRef.current = thumb, "onThumbChange"),
+    onThumbPointerUp: /* @__PURE__ */ __name(() => pointerOffsetRef.current = 0, "onThumbPointerUp"),
+    onThumbPointerDown: /* @__PURE__ */ __name((pointerPos) => pointerOffsetRef.current = pointerPos, "onThumbPointerDown")
   };
   function getScrollPosition(pointerPos, dir) {
     return getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, dir);
   }
+  __name(getScrollPosition, "getScrollPosition");
   if (orientation === "horizontal") {
     return /* @__PURE__ */ jsx(
       ScrollAreaScrollbarX,
@@ -341,8 +344,8 @@ var ScrollAreaScrollbarVisible = React2.forwardRef((props, forwardedRef) => {
     );
   }
   return null;
-});
-var ScrollAreaScrollbarX = React2.forwardRef((props, forwardedRef) => {
+}, "ScrollAreaScrollbarVisible"));
+var ScrollAreaScrollbarX = /* @__PURE__ */ React2.forwardRef(/* @__PURE__ */ __name(function ScrollAreaScrollbarX2(props, forwardedRef) {
   const { sizes, onSizesChange, ...scrollbarProps } = props;
   const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
   const [computedStyle, setComputedStyle] = React2.useState();
@@ -391,8 +394,8 @@ var ScrollAreaScrollbarX = React2.forwardRef((props, forwardedRef) => {
       }
     }
   );
-});
-var ScrollAreaScrollbarY = React2.forwardRef((props, forwardedRef) => {
+}, "ScrollAreaScrollbarX"));
+var ScrollAreaScrollbarY = /* @__PURE__ */ React2.forwardRef(/* @__PURE__ */ __name(function ScrollAreaScrollbarY2(props, forwardedRef) {
   const { sizes, onSizesChange, ...scrollbarProps } = props;
   const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
   const [computedStyle, setComputedStyle] = React2.useState();
@@ -442,9 +445,9 @@ var ScrollAreaScrollbarY = React2.forwardRef((props, forwardedRef) => {
       }
     }
   );
-});
+}, "ScrollAreaScrollbarY"));
 var [ScrollbarProvider, useScrollbarContext] = createScrollAreaContext(SCROLLBAR_NAME);
-var ScrollAreaScrollbarImpl = React2.forwardRef((props, forwardedRef) => {
+var ScrollAreaScrollbarImpl = /* @__PURE__ */ React2.forwardRef(/* @__PURE__ */ __name(function ScrollAreaScrollbarImpl2(props, forwardedRef) {
   const {
     __scopeScrollArea,
     sizes,
@@ -475,12 +478,13 @@ var ScrollAreaScrollbarImpl = React2.forwardRef((props, forwardedRef) => {
       onDragScroll({ x, y });
     }
   }
+  __name(handleDragScroll, "handleDragScroll");
   React2.useEffect(() => {
-    const handleWheel = (event) => {
+    const handleWheel = /* @__PURE__ */ __name((event) => {
       const element = event.target;
       const isScrollbarWheel = scrollbar?.contains(element);
       if (isScrollbarWheel) handleWheelScroll(event, maxScrollPos);
-    };
+    }, "handleWheel");
     document.addEventListener("wheel", handleWheel, { passive: false });
     return () => document.removeEventListener("wheel", handleWheel, { passive: false });
   }, [viewport, scrollbar, maxScrollPos, handleWheelScroll]);
@@ -529,17 +533,19 @@ var ScrollAreaScrollbarImpl = React2.forwardRef((props, forwardedRef) => {
       )
     }
   );
-});
+}, "ScrollAreaScrollbarImpl"));
 var THUMB_NAME = "ScrollAreaThumb";
-var ScrollAreaThumb = React2.forwardRef(
-  (props, forwardedRef) => {
+var ScrollAreaThumb = /* @__PURE__ */ React2.forwardRef(
+  // blank line to reduce diff noise
+  /* @__PURE__ */ __name(function ScrollAreaThumb2(props, forwardedRef) {
     const { forceMount, ...thumbProps } = props;
     const scrollbarContext = useScrollbarContext(THUMB_NAME, props.__scopeScrollArea);
     return /* @__PURE__ */ jsx(Presence, { present: forceMount || scrollbarContext.hasThumb, children: /* @__PURE__ */ jsx(ScrollAreaThumbImpl, { ref: forwardedRef, ...thumbProps }) });
-  }
+  }, "ScrollAreaThumb")
 );
-var ScrollAreaThumbImpl = React2.forwardRef(
-  (props, forwardedRef) => {
+var ScrollAreaThumbImpl = /* @__PURE__ */ React2.forwardRef(
+  // blank line to reduce diff noise
+  /* @__PURE__ */ __name(function ScrollAreaThumbImpl2(props, forwardedRef) {
     const { __scopeScrollArea, style, ...thumbProps } = props;
     const scrollAreaContext = useScrollAreaContext(THUMB_NAME, __scopeScrollArea);
     const scrollbarContext = useScrollbarContext(THUMB_NAME, __scopeScrollArea);
@@ -555,14 +561,14 @@ var ScrollAreaThumbImpl = React2.forwardRef(
     React2.useEffect(() => {
       const viewport = scrollAreaContext.viewport;
       if (viewport) {
-        const handleScroll = () => {
+        const handleScroll = /* @__PURE__ */ __name(() => {
           debounceScrollEnd();
           if (!removeUnlinkedScrollListenerRef.current) {
             const listener = addUnlinkedScrollListener(viewport, onThumbPositionChange);
             removeUnlinkedScrollListenerRef.current = listener;
             onThumbPositionChange();
           }
-        };
+        }, "handleScroll");
         onThumbPositionChange();
         viewport.addEventListener("scroll", handleScroll);
         return () => viewport.removeEventListener("scroll", handleScroll);
@@ -589,20 +595,19 @@ var ScrollAreaThumbImpl = React2.forwardRef(
         onPointerUp: composeEventHandlers(props.onPointerUp, scrollbarContext.onThumbPointerUp)
       }
     );
-  }
+  }, "ScrollAreaThumbImpl")
 );
-ScrollAreaThumb.displayName = THUMB_NAME;
 var CORNER_NAME = "ScrollAreaCorner";
-var ScrollAreaCorner = React2.forwardRef(
-  (props, forwardedRef) => {
+var ScrollAreaCorner = /* @__PURE__ */ React2.forwardRef(
+  // blank line to reduce diff noise
+  /* @__PURE__ */ __name(function ScrollAreaCorner2(props, forwardedRef) {
     const context = useScrollAreaContext(CORNER_NAME, props.__scopeScrollArea);
     const hasBothScrollbarsVisible = Boolean(context.scrollbarX && context.scrollbarY);
     const hasCorner = context.type !== "scroll" && hasBothScrollbarsVisible;
     return hasCorner ? /* @__PURE__ */ jsx(ScrollAreaCornerImpl, { ...props, ref: forwardedRef }) : null;
-  }
+  }, "ScrollAreaCorner")
 );
-ScrollAreaCorner.displayName = CORNER_NAME;
-var ScrollAreaCornerImpl = React2.forwardRef((props, forwardedRef) => {
+var ScrollAreaCornerImpl = /* @__PURE__ */ React2.forwardRef(/* @__PURE__ */ __name(function ScrollAreaCornerImpl2(props, forwardedRef) {
   const { __scopeScrollArea, ...cornerProps } = props;
   const context = useScrollAreaContext(CORNER_NAME, __scopeScrollArea);
   const [width, setWidth] = React2.useState(0);
@@ -641,20 +646,23 @@ var ScrollAreaCornerImpl = React2.forwardRef((props, forwardedRef) => {
       }
     }
   ) : null;
-});
+}, "ScrollAreaCornerImpl"));
 function toInt(value) {
   return value ? parseInt(value, 10) : 0;
 }
+__name(toInt, "toInt");
 function getThumbRatio(viewportSize, contentSize) {
   const ratio = viewportSize / contentSize;
   return isNaN(ratio) ? 0 : ratio;
 }
+__name(getThumbRatio, "getThumbRatio");
 function getThumbSize(sizes) {
   const ratio = getThumbRatio(sizes.viewport, sizes.content);
   const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
   const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;
   return Math.max(thumbSize, 18);
 }
+__name(getThumbSize, "getThumbSize");
 function getScrollPositionFromPointer(pointerPos, pointerOffset, sizes, dir = "ltr") {
   const thumbSizePx = getThumbSize(sizes);
   const thumbCenter = thumbSizePx / 2;
@@ -667,6 +675,7 @@ function getScrollPositionFromPointer(pointerPos, pointerOffset, sizes, dir = "l
   const interpolate = linearScale([minPointerPos, maxPointerPos], scrollRange);
   return interpolate(pointerPos);
 }
+__name(getScrollPositionFromPointer, "getScrollPositionFromPointer");
 function getThumbOffsetFromScroll(scrollPos, sizes, dir = "ltr") {
   const thumbSizePx = getThumbSize(sizes);
   const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
@@ -678,6 +687,7 @@ function getThumbOffsetFromScroll(scrollPos, sizes, dir = "ltr") {
   const interpolate = linearScale([0, maxScrollPos], [0, maxThumbPos]);
   return interpolate(scrollWithoutMomentum);
 }
+__name(getThumbOffsetFromScroll, "getThumbOffsetFromScroll");
 function linearScale(input, output) {
   return (value) => {
     if (input[0] === input[1] || output[0] === output[1]) return output[0];
@@ -685,23 +695,25 @@ function linearScale(input, output) {
     return output[0] + ratio * (value - input[0]);
   };
 }
+__name(linearScale, "linearScale");
 function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
   return scrollPos > 0 && scrollPos < maxScrollPos;
 }
-var addUnlinkedScrollListener = (node, handler = () => {
+__name(isScrollingWithinScrollbarBounds, "isScrollingWithinScrollbarBounds");
+var addUnlinkedScrollListener = /* @__PURE__ */ __name((node, handler = () => {
 }) => {
   let prevPosition = { left: node.scrollLeft, top: node.scrollTop };
   let rAF = 0;
-  (function loop() {
+  (/* @__PURE__ */ __name((function loop() {
     const position = { left: node.scrollLeft, top: node.scrollTop };
     const isHorizontalScroll = prevPosition.left !== position.left;
     const isVerticalScroll = prevPosition.top !== position.top;
     if (isHorizontalScroll || isVerticalScroll) handler();
     prevPosition = position;
     rAF = window.requestAnimationFrame(loop);
-  })();
+  }), "loop"))();
   return () => window.cancelAnimationFrame(rAF);
-};
+}, "addUnlinkedScrollListener");
 function useDebounceCallback(callback, delay) {
   const handleCallback = useCallbackRef(callback);
   const debounceTimerRef = React2.useRef(0);
@@ -711,6 +723,7 @@ function useDebounceCallback(callback, delay) {
     debounceTimerRef.current = window.setTimeout(handleCallback, delay);
   }, [handleCallback, delay]);
 }
+__name(useDebounceCallback, "useDebounceCallback");
 function useResizeObserver(element, onResize) {
   const handleResize = useCallbackRef(onResize);
   useLayoutEffect(() => {
@@ -728,6 +741,7 @@ function useResizeObserver(element, onResize) {
     }
   }, [element, handleResize]);
 }
+__name(useResizeObserver, "useResizeObserver");
 var Root = ScrollArea;
 var Viewport = ScrollAreaViewport;
 var Scrollbar = ScrollAreaScrollbar;