@radix-ui/react-scroll-area 1.1.0-rc.2 → 1.1.0-rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +711 -697
  2. package/dist/index.js.map +3 -3
  3. package/package.json +10 -10
package/dist/index.js CHANGED
@@ -1,757 +1,771 @@
1
1
  "use strict";
2
2
  "use client";
3
- (() => {
4
- var __create = Object.create;
5
- var __defProp = Object.defineProperty;
6
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
7
- var __getOwnPropNames = Object.getOwnPropertyNames;
8
- var __getProtoOf = Object.getPrototypeOf;
9
- var __hasOwnProp = Object.prototype.hasOwnProperty;
10
- var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
11
- get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
12
- }) : x)(function(x) {
13
- if (typeof require !== "undefined") return require.apply(this, arguments);
14
- throw Error('Dynamic require of "' + x + '" is not supported');
15
- });
16
- var __copyProps = (to, from, except, desc) => {
17
- if (from && typeof from === "object" || typeof from === "function") {
18
- for (let key of __getOwnPropNames(from))
19
- if (!__hasOwnProp.call(to, key) && key !== except)
20
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
21
- }
22
- return to;
23
- };
24
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
25
- // If the importer is in node compatibility mode or this is not an ESM
26
- // file that has been converted to a CommonJS file using a Babel-
27
- // compatible transform (i.e. "__esModule" has not been set), then set
28
- // "default" to the CommonJS "module.exports" for node compatibility.
29
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
30
- mod
31
- ));
3
+ var __create = Object.create;
4
+ var __defProp = Object.defineProperty;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getProtoOf = Object.getPrototypeOf;
8
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
9
+ var __export = (target, all) => {
10
+ for (var name in all)
11
+ __defProp(target, name, { get: all[name], enumerable: true });
12
+ };
13
+ var __copyProps = (to, from, except, desc) => {
14
+ if (from && typeof from === "object" || typeof from === "function") {
15
+ for (let key of __getOwnPropNames(from))
16
+ if (!__hasOwnProp.call(to, key) && key !== except)
17
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
18
+ }
19
+ return to;
20
+ };
21
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
22
+ // If the importer is in node compatibility mode or this is not an ESM
23
+ // file that has been converted to a CommonJS file using a Babel-
24
+ // compatible transform (i.e. "__esModule" has not been set), then set
25
+ // "default" to the CommonJS "module.exports" for node compatibility.
26
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
27
+ mod
28
+ ));
29
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
32
30
 
33
- // packages/react/scroll-area/src/ScrollArea.tsx
34
- var React2 = __toESM(__require("react"));
35
- var import_react_primitive = __require("@radix-ui/react-primitive");
36
- var import_react_presence = __require("@radix-ui/react-presence");
37
- var import_react_context = __require("@radix-ui/react-context");
38
- var import_react_compose_refs = __require("@radix-ui/react-compose-refs");
39
- var import_react_use_callback_ref = __require("@radix-ui/react-use-callback-ref");
40
- var import_react_direction = __require("@radix-ui/react-direction");
41
- var import_react_use_layout_effect = __require("@radix-ui/react-use-layout-effect");
42
- var import_number = __require("@radix-ui/number");
43
- var import_primitive = __require("@radix-ui/primitive");
31
+ // packages/react/scroll-area/src/index.ts
32
+ var src_exports = {};
33
+ __export(src_exports, {
34
+ Corner: () => Corner,
35
+ Root: () => Root,
36
+ ScrollArea: () => ScrollArea,
37
+ ScrollAreaCorner: () => ScrollAreaCorner,
38
+ ScrollAreaScrollbar: () => ScrollAreaScrollbar,
39
+ ScrollAreaThumb: () => ScrollAreaThumb,
40
+ ScrollAreaViewport: () => ScrollAreaViewport,
41
+ Scrollbar: () => Scrollbar,
42
+ Thumb: () => Thumb,
43
+ Viewport: () => Viewport,
44
+ createScrollAreaScope: () => createScrollAreaScope
45
+ });
46
+ module.exports = __toCommonJS(src_exports);
44
47
 
45
- // packages/react/scroll-area/src/useStateMachine.ts
46
- var React = __toESM(__require("react"));
47
- function useStateMachine(initialState, machine) {
48
- return React.useReducer((state, event) => {
49
- const nextState = machine[state][event];
50
- return nextState ?? state;
51
- }, initialState);
52
- }
48
+ // packages/react/scroll-area/src/ScrollArea.tsx
49
+ var React2 = __toESM(require("react"));
50
+ var import_react_primitive = require("@radix-ui/react-primitive");
51
+ var import_react_presence = require("@radix-ui/react-presence");
52
+ var import_react_context = require("@radix-ui/react-context");
53
+ var import_react_compose_refs = require("@radix-ui/react-compose-refs");
54
+ var import_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
55
+ var import_react_direction = require("@radix-ui/react-direction");
56
+ var import_react_use_layout_effect = require("@radix-ui/react-use-layout-effect");
57
+ var import_number = require("@radix-ui/number");
58
+ var import_primitive = require("@radix-ui/primitive");
53
59
 
54
- // packages/react/scroll-area/src/ScrollArea.tsx
55
- var import_jsx_runtime = __require("react/jsx-runtime");
56
- var SCROLL_AREA_NAME = "ScrollArea";
57
- var [createScrollAreaContext, createScrollAreaScope] = (0, import_react_context.createContextScope)(SCROLL_AREA_NAME);
58
- var [ScrollAreaProvider, useScrollAreaContext] = createScrollAreaContext(SCROLL_AREA_NAME);
59
- var ScrollArea = React2.forwardRef(
60
- (props, forwardedRef) => {
61
- const {
62
- __scopeScrollArea,
63
- type = "hover",
64
- dir,
65
- scrollHideDelay = 600,
66
- ...scrollAreaProps
67
- } = props;
68
- const [scrollArea, setScrollArea] = React2.useState(null);
69
- const [viewport, setViewport] = React2.useState(null);
70
- const [content, setContent] = React2.useState(null);
71
- const [scrollbarX, setScrollbarX] = React2.useState(null);
72
- const [scrollbarY, setScrollbarY] = React2.useState(null);
73
- const [cornerWidth, setCornerWidth] = React2.useState(0);
74
- const [cornerHeight, setCornerHeight] = React2.useState(0);
75
- const [scrollbarXEnabled, setScrollbarXEnabled] = React2.useState(false);
76
- const [scrollbarYEnabled, setScrollbarYEnabled] = React2.useState(false);
77
- const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => setScrollArea(node));
78
- const direction = (0, import_react_direction.useDirection)(dir);
79
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
80
- ScrollAreaProvider,
81
- {
82
- scope: __scopeScrollArea,
83
- type,
84
- dir: direction,
85
- scrollHideDelay,
86
- scrollArea,
87
- viewport,
88
- onViewportChange: setViewport,
89
- content,
90
- onContentChange: setContent,
91
- scrollbarX,
92
- onScrollbarXChange: setScrollbarX,
93
- scrollbarXEnabled,
94
- onScrollbarXEnabledChange: setScrollbarXEnabled,
95
- scrollbarY,
96
- onScrollbarYChange: setScrollbarY,
97
- scrollbarYEnabled,
98
- onScrollbarYEnabledChange: setScrollbarYEnabled,
99
- onCornerWidthChange: setCornerWidth,
100
- onCornerHeightChange: setCornerHeight,
101
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
102
- import_react_primitive.Primitive.div,
103
- {
104
- dir: direction,
105
- ...scrollAreaProps,
106
- ref: composedRefs,
107
- style: {
108
- position: "relative",
109
- // Pass corner sizes as CSS vars to reduce re-renders of context consumers
110
- ["--radix-scroll-area-corner-width"]: cornerWidth + "px",
111
- ["--radix-scroll-area-corner-height"]: cornerHeight + "px",
112
- ...props.style
113
- }
114
- }
115
- )
116
- }
117
- );
118
- }
119
- );
120
- ScrollArea.displayName = SCROLL_AREA_NAME;
121
- var VIEWPORT_NAME = "ScrollAreaViewport";
122
- var ScrollAreaViewport = React2.forwardRef(
123
- (props, forwardedRef) => {
124
- const { __scopeScrollArea, children, nonce, ...viewportProps } = props;
125
- const context = useScrollAreaContext(VIEWPORT_NAME, __scopeScrollArea);
126
- const ref = React2.useRef(null);
127
- const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref, context.onViewportChange);
128
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
129
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
130
- "style",
131
- {
132
- dangerouslySetInnerHTML: {
133
- __html: `[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}`
134
- },
135
- nonce
136
- }
137
- ),
138
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
60
+ // packages/react/scroll-area/src/useStateMachine.ts
61
+ var React = __toESM(require("react"));
62
+ function useStateMachine(initialState, machine) {
63
+ return React.useReducer((state, event) => {
64
+ const nextState = machine[state][event];
65
+ return nextState ?? state;
66
+ }, initialState);
67
+ }
68
+
69
+ // packages/react/scroll-area/src/ScrollArea.tsx
70
+ var import_jsx_runtime = require("react/jsx-runtime");
71
+ var SCROLL_AREA_NAME = "ScrollArea";
72
+ var [createScrollAreaContext, createScrollAreaScope] = (0, import_react_context.createContextScope)(SCROLL_AREA_NAME);
73
+ var [ScrollAreaProvider, useScrollAreaContext] = createScrollAreaContext(SCROLL_AREA_NAME);
74
+ var ScrollArea = React2.forwardRef(
75
+ (props, forwardedRef) => {
76
+ const {
77
+ __scopeScrollArea,
78
+ type = "hover",
79
+ dir,
80
+ scrollHideDelay = 600,
81
+ ...scrollAreaProps
82
+ } = props;
83
+ const [scrollArea, setScrollArea] = React2.useState(null);
84
+ const [viewport, setViewport] = React2.useState(null);
85
+ const [content, setContent] = React2.useState(null);
86
+ const [scrollbarX, setScrollbarX] = React2.useState(null);
87
+ const [scrollbarY, setScrollbarY] = React2.useState(null);
88
+ const [cornerWidth, setCornerWidth] = React2.useState(0);
89
+ const [cornerHeight, setCornerHeight] = React2.useState(0);
90
+ const [scrollbarXEnabled, setScrollbarXEnabled] = React2.useState(false);
91
+ const [scrollbarYEnabled, setScrollbarYEnabled] = React2.useState(false);
92
+ const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => setScrollArea(node));
93
+ const direction = (0, import_react_direction.useDirection)(dir);
94
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
95
+ ScrollAreaProvider,
96
+ {
97
+ scope: __scopeScrollArea,
98
+ type,
99
+ dir: direction,
100
+ scrollHideDelay,
101
+ scrollArea,
102
+ viewport,
103
+ onViewportChange: setViewport,
104
+ content,
105
+ onContentChange: setContent,
106
+ scrollbarX,
107
+ onScrollbarXChange: setScrollbarX,
108
+ scrollbarXEnabled,
109
+ onScrollbarXEnabledChange: setScrollbarXEnabled,
110
+ scrollbarY,
111
+ onScrollbarYChange: setScrollbarY,
112
+ scrollbarYEnabled,
113
+ onScrollbarYEnabledChange: setScrollbarYEnabled,
114
+ onCornerWidthChange: setCornerWidth,
115
+ onCornerHeightChange: setCornerHeight,
116
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
139
117
  import_react_primitive.Primitive.div,
140
118
  {
141
- "data-radix-scroll-area-viewport": "",
142
- ...viewportProps,
119
+ dir: direction,
120
+ ...scrollAreaProps,
143
121
  ref: composedRefs,
144
122
  style: {
145
- /**
146
- * We don't support `visible` because the intention is to have at least one scrollbar
147
- * if this component is used and `visible` will behave like `auto` in that case
148
- * https://developer.mozilla.org/en-US/docs/Web/CSS/overflowed#description
149
- *
150
- * We don't handle `auto` because the intention is for the native implementation
151
- * to be hidden if using this component. We just want to ensure the node is scrollable
152
- * so could have used either `scroll` or `auto` here. We picked `scroll` to prevent
153
- * the browser from having to work out whether to render native scrollbars or not,
154
- * we tell it to with the intention of hiding them in CSS.
155
- */
156
- overflowX: context.scrollbarXEnabled ? "scroll" : "hidden",
157
- overflowY: context.scrollbarYEnabled ? "scroll" : "hidden",
123
+ position: "relative",
124
+ // Pass corner sizes as CSS vars to reduce re-renders of context consumers
125
+ ["--radix-scroll-area-corner-width"]: cornerWidth + "px",
126
+ ["--radix-scroll-area-corner-height"]: cornerHeight + "px",
158
127
  ...props.style
159
- },
160
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: context.onContentChange, style: { minWidth: "100%", display: "table" }, children })
128
+ }
161
129
  }
162
130
  )
163
- ] });
164
- }
165
- );
166
- ScrollAreaViewport.displayName = VIEWPORT_NAME;
167
- var SCROLLBAR_NAME = "ScrollAreaScrollbar";
168
- var ScrollAreaScrollbar = React2.forwardRef(
169
- (props, forwardedRef) => {
170
- const { forceMount, ...scrollbarProps } = props;
171
- const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
172
- const { onScrollbarXEnabledChange, onScrollbarYEnabledChange } = context;
173
- const isHorizontal = props.orientation === "horizontal";
174
- React2.useEffect(() => {
175
- isHorizontal ? onScrollbarXEnabledChange(true) : onScrollbarYEnabledChange(true);
176
- return () => {
177
- isHorizontal ? onScrollbarXEnabledChange(false) : onScrollbarYEnabledChange(false);
178
- };
179
- }, [isHorizontal, onScrollbarXEnabledChange, onScrollbarYEnabledChange]);
180
- return context.type === "hover" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollAreaScrollbarHover, { ...scrollbarProps, ref: forwardedRef, forceMount }) : context.type === "scroll" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollAreaScrollbarScroll, { ...scrollbarProps, ref: forwardedRef, forceMount }) : context.type === "auto" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollAreaScrollbarAuto, { ...scrollbarProps, ref: forwardedRef, forceMount }) : context.type === "always" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollAreaScrollbarVisible, { ...scrollbarProps, ref: forwardedRef }) : null;
181
- }
182
- );
183
- ScrollAreaScrollbar.displayName = SCROLLBAR_NAME;
184
- var ScrollAreaScrollbarHover = React2.forwardRef((props, forwardedRef) => {
185
- const { forceMount, ...scrollbarProps } = props;
186
- const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
187
- const [visible, setVisible] = React2.useState(false);
188
- React2.useEffect(() => {
189
- const scrollArea = context.scrollArea;
190
- let hideTimer = 0;
191
- if (scrollArea) {
192
- const handlePointerEnter = () => {
193
- window.clearTimeout(hideTimer);
194
- setVisible(true);
195
- };
196
- const handlePointerLeave = () => {
197
- hideTimer = window.setTimeout(() => setVisible(false), context.scrollHideDelay);
198
- };
199
- scrollArea.addEventListener("pointerenter", handlePointerEnter);
200
- scrollArea.addEventListener("pointerleave", handlePointerLeave);
201
- return () => {
202
- window.clearTimeout(hideTimer);
203
- scrollArea.removeEventListener("pointerenter", handlePointerEnter);
204
- scrollArea.removeEventListener("pointerleave", handlePointerLeave);
205
- };
206
131
  }
207
- }, [context.scrollArea, context.scrollHideDelay]);
208
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || visible, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
209
- ScrollAreaScrollbarAuto,
210
- {
211
- "data-state": visible ? "visible" : "hidden",
212
- ...scrollbarProps,
213
- ref: forwardedRef
214
- }
215
- ) });
216
- });
217
- var ScrollAreaScrollbarScroll = React2.forwardRef((props, forwardedRef) => {
132
+ );
133
+ }
134
+ );
135
+ ScrollArea.displayName = SCROLL_AREA_NAME;
136
+ var VIEWPORT_NAME = "ScrollAreaViewport";
137
+ var ScrollAreaViewport = React2.forwardRef(
138
+ (props, forwardedRef) => {
139
+ const { __scopeScrollArea, children, nonce, ...viewportProps } = props;
140
+ const context = useScrollAreaContext(VIEWPORT_NAME, __scopeScrollArea);
141
+ const ref = React2.useRef(null);
142
+ const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref, context.onViewportChange);
143
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
144
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
145
+ "style",
146
+ {
147
+ dangerouslySetInnerHTML: {
148
+ __html: `[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}`
149
+ },
150
+ nonce
151
+ }
152
+ ),
153
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
154
+ import_react_primitive.Primitive.div,
155
+ {
156
+ "data-radix-scroll-area-viewport": "",
157
+ ...viewportProps,
158
+ ref: composedRefs,
159
+ style: {
160
+ /**
161
+ * We don't support `visible` because the intention is to have at least one scrollbar
162
+ * if this component is used and `visible` will behave like `auto` in that case
163
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/overflowed#description
164
+ *
165
+ * We don't handle `auto` because the intention is for the native implementation
166
+ * to be hidden if using this component. We just want to ensure the node is scrollable
167
+ * so could have used either `scroll` or `auto` here. We picked `scroll` to prevent
168
+ * the browser from having to work out whether to render native scrollbars or not,
169
+ * we tell it to with the intention of hiding them in CSS.
170
+ */
171
+ overflowX: context.scrollbarXEnabled ? "scroll" : "hidden",
172
+ overflowY: context.scrollbarYEnabled ? "scroll" : "hidden",
173
+ ...props.style
174
+ },
175
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: context.onContentChange, style: { minWidth: "100%", display: "table" }, children })
176
+ }
177
+ )
178
+ ] });
179
+ }
180
+ );
181
+ ScrollAreaViewport.displayName = VIEWPORT_NAME;
182
+ var SCROLLBAR_NAME = "ScrollAreaScrollbar";
183
+ var ScrollAreaScrollbar = React2.forwardRef(
184
+ (props, forwardedRef) => {
218
185
  const { forceMount, ...scrollbarProps } = props;
219
186
  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
187
+ const { onScrollbarXEnabledChange, onScrollbarYEnabledChange } = context;
220
188
  const isHorizontal = props.orientation === "horizontal";
221
- const debounceScrollEnd = useDebounceCallback(() => send("SCROLL_END"), 100);
222
- const [state, send] = useStateMachine("hidden", {
223
- hidden: {
224
- SCROLL: "scrolling"
225
- },
226
- scrolling: {
227
- SCROLL_END: "idle",
228
- POINTER_ENTER: "interacting"
229
- },
230
- interacting: {
231
- SCROLL: "interacting",
232
- POINTER_LEAVE: "idle"
233
- },
234
- idle: {
235
- HIDE: "hidden",
236
- SCROLL: "scrolling",
237
- POINTER_ENTER: "interacting"
238
- }
239
- });
240
189
  React2.useEffect(() => {
241
- if (state === "idle") {
242
- const hideTimer = window.setTimeout(() => send("HIDE"), context.scrollHideDelay);
243
- return () => window.clearTimeout(hideTimer);
244
- }
245
- }, [state, context.scrollHideDelay, send]);
246
- React2.useEffect(() => {
247
- const viewport = context.viewport;
248
- const scrollDirection = isHorizontal ? "scrollLeft" : "scrollTop";
249
- if (viewport) {
250
- let prevScrollPos = viewport[scrollDirection];
251
- const handleScroll = () => {
252
- const scrollPos = viewport[scrollDirection];
253
- const hasScrollInDirectionChanged = prevScrollPos !== scrollPos;
254
- if (hasScrollInDirectionChanged) {
255
- send("SCROLL");
256
- debounceScrollEnd();
257
- }
258
- prevScrollPos = scrollPos;
259
- };
260
- viewport.addEventListener("scroll", handleScroll);
261
- return () => viewport.removeEventListener("scroll", handleScroll);
262
- }
263
- }, [context.viewport, isHorizontal, send, debounceScrollEnd]);
264
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || state !== "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
265
- ScrollAreaScrollbarVisible,
266
- {
267
- "data-state": state === "hidden" ? "hidden" : "visible",
268
- ...scrollbarProps,
269
- ref: forwardedRef,
270
- onPointerEnter: (0, import_primitive.composeEventHandlers)(props.onPointerEnter, () => send("POINTER_ENTER")),
271
- onPointerLeave: (0, import_primitive.composeEventHandlers)(props.onPointerLeave, () => send("POINTER_LEAVE"))
272
- }
273
- ) });
274
- });
275
- var ScrollAreaScrollbarAuto = React2.forwardRef((props, forwardedRef) => {
276
- const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
277
- const { forceMount, ...scrollbarProps } = props;
278
- const [visible, setVisible] = React2.useState(false);
279
- const isHorizontal = props.orientation === "horizontal";
280
- const handleResize = useDebounceCallback(() => {
281
- if (context.viewport) {
282
- const isOverflowX = context.viewport.offsetWidth < context.viewport.scrollWidth;
283
- const isOverflowY = context.viewport.offsetHeight < context.viewport.scrollHeight;
284
- setVisible(isHorizontal ? isOverflowX : isOverflowY);
285
- }
286
- }, 10);
287
- useResizeObserver(context.viewport, handleResize);
288
- useResizeObserver(context.content, handleResize);
289
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || visible, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
290
- ScrollAreaScrollbarVisible,
291
- {
292
- "data-state": visible ? "visible" : "hidden",
293
- ...scrollbarProps,
294
- ref: forwardedRef
295
- }
296
- ) });
297
- });
298
- var ScrollAreaScrollbarVisible = React2.forwardRef((props, forwardedRef) => {
299
- const { orientation = "vertical", ...scrollbarProps } = props;
300
- const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
301
- const thumbRef = React2.useRef(null);
302
- const pointerOffsetRef = React2.useRef(0);
303
- const [sizes, setSizes] = React2.useState({
304
- content: 0,
305
- viewport: 0,
306
- scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 }
307
- });
308
- const thumbRatio = getThumbRatio(sizes.viewport, sizes.content);
309
- const commonProps = {
190
+ isHorizontal ? onScrollbarXEnabledChange(true) : onScrollbarYEnabledChange(true);
191
+ return () => {
192
+ isHorizontal ? onScrollbarXEnabledChange(false) : onScrollbarYEnabledChange(false);
193
+ };
194
+ }, [isHorizontal, onScrollbarXEnabledChange, onScrollbarYEnabledChange]);
195
+ return context.type === "hover" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollAreaScrollbarHover, { ...scrollbarProps, ref: forwardedRef, forceMount }) : context.type === "scroll" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollAreaScrollbarScroll, { ...scrollbarProps, ref: forwardedRef, forceMount }) : context.type === "auto" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollAreaScrollbarAuto, { ...scrollbarProps, ref: forwardedRef, forceMount }) : context.type === "always" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollAreaScrollbarVisible, { ...scrollbarProps, ref: forwardedRef }) : null;
196
+ }
197
+ );
198
+ ScrollAreaScrollbar.displayName = SCROLLBAR_NAME;
199
+ var ScrollAreaScrollbarHover = React2.forwardRef((props, forwardedRef) => {
200
+ const { forceMount, ...scrollbarProps } = props;
201
+ const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
202
+ const [visible, setVisible] = React2.useState(false);
203
+ React2.useEffect(() => {
204
+ const scrollArea = context.scrollArea;
205
+ let hideTimer = 0;
206
+ if (scrollArea) {
207
+ const handlePointerEnter = () => {
208
+ window.clearTimeout(hideTimer);
209
+ setVisible(true);
210
+ };
211
+ const handlePointerLeave = () => {
212
+ hideTimer = window.setTimeout(() => setVisible(false), context.scrollHideDelay);
213
+ };
214
+ scrollArea.addEventListener("pointerenter", handlePointerEnter);
215
+ scrollArea.addEventListener("pointerleave", handlePointerLeave);
216
+ return () => {
217
+ window.clearTimeout(hideTimer);
218
+ scrollArea.removeEventListener("pointerenter", handlePointerEnter);
219
+ scrollArea.removeEventListener("pointerleave", handlePointerLeave);
220
+ };
221
+ }
222
+ }, [context.scrollArea, context.scrollHideDelay]);
223
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || visible, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
224
+ ScrollAreaScrollbarAuto,
225
+ {
226
+ "data-state": visible ? "visible" : "hidden",
310
227
  ...scrollbarProps,
311
- sizes,
312
- onSizesChange: setSizes,
313
- hasThumb: Boolean(thumbRatio > 0 && thumbRatio < 1),
314
- onThumbChange: (thumb) => thumbRef.current = thumb,
315
- onThumbPointerUp: () => pointerOffsetRef.current = 0,
316
- onThumbPointerDown: (pointerPos) => pointerOffsetRef.current = pointerPos
317
- };
318
- function getScrollPosition(pointerPos, dir) {
319
- return getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, dir);
228
+ ref: forwardedRef
320
229
  }
321
- if (orientation === "horizontal") {
322
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
323
- ScrollAreaScrollbarX,
324
- {
325
- ...commonProps,
326
- ref: forwardedRef,
327
- onThumbPositionChange: () => {
328
- if (context.viewport && thumbRef.current) {
329
- const scrollPos = context.viewport.scrollLeft;
330
- const offset = getThumbOffsetFromScroll(scrollPos, sizes, context.dir);
331
- thumbRef.current.style.transform = `translate3d(${offset}px, 0, 0)`;
332
- }
333
- },
334
- onWheelScroll: (scrollPos) => {
335
- if (context.viewport) context.viewport.scrollLeft = scrollPos;
336
- },
337
- onDragScroll: (pointerPos) => {
338
- if (context.viewport) {
339
- context.viewport.scrollLeft = getScrollPosition(pointerPos, context.dir);
340
- }
341
- }
342
- }
343
- );
230
+ ) });
231
+ });
232
+ var ScrollAreaScrollbarScroll = React2.forwardRef((props, forwardedRef) => {
233
+ const { forceMount, ...scrollbarProps } = props;
234
+ const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
235
+ const isHorizontal = props.orientation === "horizontal";
236
+ const debounceScrollEnd = useDebounceCallback(() => send("SCROLL_END"), 100);
237
+ const [state, send] = useStateMachine("hidden", {
238
+ hidden: {
239
+ SCROLL: "scrolling"
240
+ },
241
+ scrolling: {
242
+ SCROLL_END: "idle",
243
+ POINTER_ENTER: "interacting"
244
+ },
245
+ interacting: {
246
+ SCROLL: "interacting",
247
+ POINTER_LEAVE: "idle"
248
+ },
249
+ idle: {
250
+ HIDE: "hidden",
251
+ SCROLL: "scrolling",
252
+ POINTER_ENTER: "interacting"
344
253
  }
345
- if (orientation === "vertical") {
346
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
347
- ScrollAreaScrollbarY,
348
- {
349
- ...commonProps,
350
- ref: forwardedRef,
351
- onThumbPositionChange: () => {
352
- if (context.viewport && thumbRef.current) {
353
- const scrollPos = context.viewport.scrollTop;
354
- const offset = getThumbOffsetFromScroll(scrollPos, sizes);
355
- thumbRef.current.style.transform = `translate3d(0, ${offset}px, 0)`;
356
- }
357
- },
358
- onWheelScroll: (scrollPos) => {
359
- if (context.viewport) context.viewport.scrollTop = scrollPos;
360
- },
361
- onDragScroll: (pointerPos) => {
362
- if (context.viewport) context.viewport.scrollTop = getScrollPosition(pointerPos);
363
- }
254
+ });
255
+ React2.useEffect(() => {
256
+ if (state === "idle") {
257
+ const hideTimer = window.setTimeout(() => send("HIDE"), context.scrollHideDelay);
258
+ return () => window.clearTimeout(hideTimer);
259
+ }
260
+ }, [state, context.scrollHideDelay, send]);
261
+ React2.useEffect(() => {
262
+ const viewport = context.viewport;
263
+ const scrollDirection = isHorizontal ? "scrollLeft" : "scrollTop";
264
+ if (viewport) {
265
+ let prevScrollPos = viewport[scrollDirection];
266
+ const handleScroll = () => {
267
+ const scrollPos = viewport[scrollDirection];
268
+ const hasScrollInDirectionChanged = prevScrollPos !== scrollPos;
269
+ if (hasScrollInDirectionChanged) {
270
+ send("SCROLL");
271
+ debounceScrollEnd();
364
272
  }
365
- );
273
+ prevScrollPos = scrollPos;
274
+ };
275
+ viewport.addEventListener("scroll", handleScroll);
276
+ return () => viewport.removeEventListener("scroll", handleScroll);
277
+ }
278
+ }, [context.viewport, isHorizontal, send, debounceScrollEnd]);
279
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || state !== "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
280
+ ScrollAreaScrollbarVisible,
281
+ {
282
+ "data-state": state === "hidden" ? "hidden" : "visible",
283
+ ...scrollbarProps,
284
+ ref: forwardedRef,
285
+ onPointerEnter: (0, import_primitive.composeEventHandlers)(props.onPointerEnter, () => send("POINTER_ENTER")),
286
+ onPointerLeave: (0, import_primitive.composeEventHandlers)(props.onPointerLeave, () => send("POINTER_LEAVE"))
287
+ }
288
+ ) });
289
+ });
290
+ var ScrollAreaScrollbarAuto = React2.forwardRef((props, forwardedRef) => {
291
+ const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
292
+ const { forceMount, ...scrollbarProps } = props;
293
+ const [visible, setVisible] = React2.useState(false);
294
+ const isHorizontal = props.orientation === "horizontal";
295
+ const handleResize = useDebounceCallback(() => {
296
+ if (context.viewport) {
297
+ const isOverflowX = context.viewport.offsetWidth < context.viewport.scrollWidth;
298
+ const isOverflowY = context.viewport.offsetHeight < context.viewport.scrollHeight;
299
+ setVisible(isHorizontal ? isOverflowX : isOverflowY);
300
+ }
301
+ }, 10);
302
+ useResizeObserver(context.viewport, handleResize);
303
+ useResizeObserver(context.content, handleResize);
304
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || visible, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
305
+ ScrollAreaScrollbarVisible,
306
+ {
307
+ "data-state": visible ? "visible" : "hidden",
308
+ ...scrollbarProps,
309
+ ref: forwardedRef
366
310
  }
367
- return null;
311
+ ) });
312
+ });
313
+ var ScrollAreaScrollbarVisible = React2.forwardRef((props, forwardedRef) => {
314
+ const { orientation = "vertical", ...scrollbarProps } = props;
315
+ const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
316
+ const thumbRef = React2.useRef(null);
317
+ const pointerOffsetRef = React2.useRef(0);
318
+ const [sizes, setSizes] = React2.useState({
319
+ content: 0,
320
+ viewport: 0,
321
+ scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 }
368
322
  });
369
- var ScrollAreaScrollbarX = React2.forwardRef((props, forwardedRef) => {
370
- const { sizes, onSizesChange, ...scrollbarProps } = props;
371
- const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
372
- const [computedStyle, setComputedStyle] = React2.useState();
373
- const ref = React2.useRef(null);
374
- const composeRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref, context.onScrollbarXChange);
375
- React2.useEffect(() => {
376
- if (ref.current) setComputedStyle(getComputedStyle(ref.current));
377
- }, [ref]);
323
+ const thumbRatio = getThumbRatio(sizes.viewport, sizes.content);
324
+ const commonProps = {
325
+ ...scrollbarProps,
326
+ sizes,
327
+ onSizesChange: setSizes,
328
+ hasThumb: Boolean(thumbRatio > 0 && thumbRatio < 1),
329
+ onThumbChange: (thumb) => thumbRef.current = thumb,
330
+ onThumbPointerUp: () => pointerOffsetRef.current = 0,
331
+ onThumbPointerDown: (pointerPos) => pointerOffsetRef.current = pointerPos
332
+ };
333
+ function getScrollPosition(pointerPos, dir) {
334
+ return getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, dir);
335
+ }
336
+ if (orientation === "horizontal") {
378
337
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
379
- ScrollAreaScrollbarImpl,
338
+ ScrollAreaScrollbarX,
380
339
  {
381
- "data-orientation": "horizontal",
382
- ...scrollbarProps,
383
- ref: composeRefs,
384
- sizes,
385
- style: {
386
- bottom: 0,
387
- left: context.dir === "rtl" ? "var(--radix-scroll-area-corner-width)" : 0,
388
- right: context.dir === "ltr" ? "var(--radix-scroll-area-corner-width)" : 0,
389
- ["--radix-scroll-area-thumb-width"]: getThumbSize(sizes) + "px",
390
- ...props.style
391
- },
392
- onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.x),
393
- onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.x),
394
- onWheelScroll: (event, maxScrollPos) => {
395
- if (context.viewport) {
396
- const scrollPos = context.viewport.scrollLeft + event.deltaX;
397
- props.onWheelScroll(scrollPos);
398
- if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
399
- event.preventDefault();
400
- }
340
+ ...commonProps,
341
+ ref: forwardedRef,
342
+ onThumbPositionChange: () => {
343
+ if (context.viewport && thumbRef.current) {
344
+ const scrollPos = context.viewport.scrollLeft;
345
+ const offset = getThumbOffsetFromScroll(scrollPos, sizes, context.dir);
346
+ thumbRef.current.style.transform = `translate3d(${offset}px, 0, 0)`;
401
347
  }
402
348
  },
403
- onResize: () => {
404
- if (ref.current && context.viewport && computedStyle) {
405
- onSizesChange({
406
- content: context.viewport.scrollWidth,
407
- viewport: context.viewport.offsetWidth,
408
- scrollbar: {
409
- size: ref.current.clientWidth,
410
- paddingStart: toInt(computedStyle.paddingLeft),
411
- paddingEnd: toInt(computedStyle.paddingRight)
412
- }
413
- });
349
+ onWheelScroll: (scrollPos) => {
350
+ if (context.viewport) context.viewport.scrollLeft = scrollPos;
351
+ },
352
+ onDragScroll: (pointerPos) => {
353
+ if (context.viewport) {
354
+ context.viewport.scrollLeft = getScrollPosition(pointerPos, context.dir);
414
355
  }
415
356
  }
416
357
  }
417
358
  );
418
- });
419
- var ScrollAreaScrollbarY = React2.forwardRef((props, forwardedRef) => {
420
- const { sizes, onSizesChange, ...scrollbarProps } = props;
421
- const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
422
- const [computedStyle, setComputedStyle] = React2.useState();
423
- const ref = React2.useRef(null);
424
- const composeRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref, context.onScrollbarYChange);
425
- React2.useEffect(() => {
426
- if (ref.current) setComputedStyle(getComputedStyle(ref.current));
427
- }, [ref]);
359
+ }
360
+ if (orientation === "vertical") {
428
361
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
429
- ScrollAreaScrollbarImpl,
362
+ ScrollAreaScrollbarY,
430
363
  {
431
- "data-orientation": "vertical",
432
- ...scrollbarProps,
433
- ref: composeRefs,
434
- sizes,
435
- style: {
436
- top: 0,
437
- right: context.dir === "ltr" ? 0 : void 0,
438
- left: context.dir === "rtl" ? 0 : void 0,
439
- bottom: "var(--radix-scroll-area-corner-height)",
440
- ["--radix-scroll-area-thumb-height"]: getThumbSize(sizes) + "px",
441
- ...props.style
442
- },
443
- onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.y),
444
- onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.y),
445
- onWheelScroll: (event, maxScrollPos) => {
446
- if (context.viewport) {
447
- const scrollPos = context.viewport.scrollTop + event.deltaY;
448
- props.onWheelScroll(scrollPos);
449
- if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
450
- event.preventDefault();
451
- }
364
+ ...commonProps,
365
+ ref: forwardedRef,
366
+ onThumbPositionChange: () => {
367
+ if (context.viewport && thumbRef.current) {
368
+ const scrollPos = context.viewport.scrollTop;
369
+ const offset = getThumbOffsetFromScroll(scrollPos, sizes);
370
+ thumbRef.current.style.transform = `translate3d(0, ${offset}px, 0)`;
452
371
  }
453
372
  },
454
- onResize: () => {
455
- if (ref.current && context.viewport && computedStyle) {
456
- onSizesChange({
457
- content: context.viewport.scrollHeight,
458
- viewport: context.viewport.offsetHeight,
459
- scrollbar: {
460
- size: ref.current.clientHeight,
461
- paddingStart: toInt(computedStyle.paddingTop),
462
- paddingEnd: toInt(computedStyle.paddingBottom)
463
- }
464
- });
465
- }
373
+ onWheelScroll: (scrollPos) => {
374
+ if (context.viewport) context.viewport.scrollTop = scrollPos;
375
+ },
376
+ onDragScroll: (pointerPos) => {
377
+ if (context.viewport) context.viewport.scrollTop = getScrollPosition(pointerPos);
466
378
  }
467
379
  }
468
380
  );
469
- });
470
- var [ScrollbarProvider, useScrollbarContext] = createScrollAreaContext(SCROLLBAR_NAME);
471
- var ScrollAreaScrollbarImpl = React2.forwardRef((props, forwardedRef) => {
472
- const {
473
- __scopeScrollArea,
381
+ }
382
+ return null;
383
+ });
384
+ var ScrollAreaScrollbarX = React2.forwardRef((props, forwardedRef) => {
385
+ const { sizes, onSizesChange, ...scrollbarProps } = props;
386
+ const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
387
+ const [computedStyle, setComputedStyle] = React2.useState();
388
+ const ref = React2.useRef(null);
389
+ const composeRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref, context.onScrollbarXChange);
390
+ React2.useEffect(() => {
391
+ if (ref.current) setComputedStyle(getComputedStyle(ref.current));
392
+ }, [ref]);
393
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
394
+ ScrollAreaScrollbarImpl,
395
+ {
396
+ "data-orientation": "horizontal",
397
+ ...scrollbarProps,
398
+ ref: composeRefs,
474
399
  sizes,
475
- hasThumb,
476
- onThumbChange,
477
- onThumbPointerUp,
478
- onThumbPointerDown,
479
- onThumbPositionChange,
480
- onDragScroll,
481
- onWheelScroll,
482
- onResize,
483
- ...scrollbarProps
484
- } = props;
485
- const context = useScrollAreaContext(SCROLLBAR_NAME, __scopeScrollArea);
486
- const [scrollbar, setScrollbar] = React2.useState(null);
487
- const composeRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => setScrollbar(node));
488
- const rectRef = React2.useRef(null);
489
- const prevWebkitUserSelectRef = React2.useRef("");
490
- const viewport = context.viewport;
491
- const maxScrollPos = sizes.content - sizes.viewport;
492
- const handleWheelScroll = (0, import_react_use_callback_ref.useCallbackRef)(onWheelScroll);
493
- const handleThumbPositionChange = (0, import_react_use_callback_ref.useCallbackRef)(onThumbPositionChange);
494
- const handleResize = useDebounceCallback(onResize, 10);
495
- function handleDragScroll(event) {
496
- if (rectRef.current) {
497
- const x = event.clientX - rectRef.current.left;
498
- const y = event.clientY - rectRef.current.top;
499
- onDragScroll({ x, y });
500
- }
501
- }
502
- React2.useEffect(() => {
503
- const handleWheel = (event) => {
504
- const element = event.target;
505
- const isScrollbarWheel = scrollbar?.contains(element);
506
- if (isScrollbarWheel) handleWheelScroll(event, maxScrollPos);
507
- };
508
- document.addEventListener("wheel", handleWheel, { passive: false });
509
- return () => document.removeEventListener("wheel", handleWheel, { passive: false });
510
- }, [viewport, scrollbar, maxScrollPos, handleWheelScroll]);
511
- React2.useEffect(handleThumbPositionChange, [sizes, handleThumbPositionChange]);
512
- useResizeObserver(scrollbar, handleResize);
513
- useResizeObserver(context.content, handleResize);
514
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
515
- ScrollbarProvider,
516
- {
517
- scope: __scopeScrollArea,
518
- scrollbar,
519
- hasThumb,
520
- onThumbChange: (0, import_react_use_callback_ref.useCallbackRef)(onThumbChange),
521
- onThumbPointerUp: (0, import_react_use_callback_ref.useCallbackRef)(onThumbPointerUp),
522
- onThumbPositionChange: handleThumbPositionChange,
523
- onThumbPointerDown: (0, import_react_use_callback_ref.useCallbackRef)(onThumbPointerDown),
524
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
525
- import_react_primitive.Primitive.div,
526
- {
527
- ...scrollbarProps,
528
- ref: composeRefs,
529
- style: { position: "absolute", ...scrollbarProps.style },
530
- onPointerDown: (0, import_primitive.composeEventHandlers)(props.onPointerDown, (event) => {
531
- const mainPointer = 0;
532
- if (event.button === mainPointer) {
533
- const element = event.target;
534
- element.setPointerCapture(event.pointerId);
535
- rectRef.current = scrollbar.getBoundingClientRect();
536
- prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;
537
- document.body.style.webkitUserSelect = "none";
538
- if (context.viewport) context.viewport.style.scrollBehavior = "auto";
539
- handleDragScroll(event);
540
- }
541
- }),
542
- onPointerMove: (0, import_primitive.composeEventHandlers)(props.onPointerMove, handleDragScroll),
543
- onPointerUp: (0, import_primitive.composeEventHandlers)(props.onPointerUp, (event) => {
544
- const element = event.target;
545
- if (element.hasPointerCapture(event.pointerId)) {
546
- element.releasePointerCapture(event.pointerId);
547
- }
548
- document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;
549
- if (context.viewport) context.viewport.style.scrollBehavior = "";
550
- rectRef.current = null;
551
- })
400
+ style: {
401
+ bottom: 0,
402
+ left: context.dir === "rtl" ? "var(--radix-scroll-area-corner-width)" : 0,
403
+ right: context.dir === "ltr" ? "var(--radix-scroll-area-corner-width)" : 0,
404
+ ["--radix-scroll-area-thumb-width"]: getThumbSize(sizes) + "px",
405
+ ...props.style
406
+ },
407
+ onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.x),
408
+ onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.x),
409
+ onWheelScroll: (event, maxScrollPos) => {
410
+ if (context.viewport) {
411
+ const scrollPos = context.viewport.scrollLeft + event.deltaX;
412
+ props.onWheelScroll(scrollPos);
413
+ if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
414
+ event.preventDefault();
552
415
  }
553
- )
416
+ }
417
+ },
418
+ onResize: () => {
419
+ if (ref.current && context.viewport && computedStyle) {
420
+ onSizesChange({
421
+ content: context.viewport.scrollWidth,
422
+ viewport: context.viewport.offsetWidth,
423
+ scrollbar: {
424
+ size: ref.current.clientWidth,
425
+ paddingStart: toInt(computedStyle.paddingLeft),
426
+ paddingEnd: toInt(computedStyle.paddingRight)
427
+ }
428
+ });
429
+ }
554
430
  }
555
- );
556
- });
557
- var THUMB_NAME = "ScrollAreaThumb";
558
- var ScrollAreaThumb = React2.forwardRef(
559
- (props, forwardedRef) => {
560
- const { forceMount, ...thumbProps } = props;
561
- const scrollbarContext = useScrollbarContext(THUMB_NAME, props.__scopeScrollArea);
562
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || scrollbarContext.hasThumb, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollAreaThumbImpl, { ref: forwardedRef, ...thumbProps }) });
563
431
  }
564
432
  );
565
- var ScrollAreaThumbImpl = React2.forwardRef(
566
- (props, forwardedRef) => {
567
- const { __scopeScrollArea, style, ...thumbProps } = props;
568
- const scrollAreaContext = useScrollAreaContext(THUMB_NAME, __scopeScrollArea);
569
- const scrollbarContext = useScrollbarContext(THUMB_NAME, __scopeScrollArea);
570
- const { onThumbPositionChange } = scrollbarContext;
571
- const composedRef = (0, import_react_compose_refs.useComposedRefs)(
572
- forwardedRef,
573
- (node) => scrollbarContext.onThumbChange(node)
574
- );
575
- const removeUnlinkedScrollListenerRef = React2.useRef();
576
- const debounceScrollEnd = useDebounceCallback(() => {
577
- if (removeUnlinkedScrollListenerRef.current) {
578
- removeUnlinkedScrollListenerRef.current();
579
- removeUnlinkedScrollListenerRef.current = void 0;
433
+ });
434
+ var ScrollAreaScrollbarY = React2.forwardRef((props, forwardedRef) => {
435
+ const { sizes, onSizesChange, ...scrollbarProps } = props;
436
+ const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
437
+ const [computedStyle, setComputedStyle] = React2.useState();
438
+ const ref = React2.useRef(null);
439
+ const composeRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref, context.onScrollbarYChange);
440
+ React2.useEffect(() => {
441
+ if (ref.current) setComputedStyle(getComputedStyle(ref.current));
442
+ }, [ref]);
443
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
444
+ ScrollAreaScrollbarImpl,
445
+ {
446
+ "data-orientation": "vertical",
447
+ ...scrollbarProps,
448
+ ref: composeRefs,
449
+ sizes,
450
+ style: {
451
+ top: 0,
452
+ right: context.dir === "ltr" ? 0 : void 0,
453
+ left: context.dir === "rtl" ? 0 : void 0,
454
+ bottom: "var(--radix-scroll-area-corner-height)",
455
+ ["--radix-scroll-area-thumb-height"]: getThumbSize(sizes) + "px",
456
+ ...props.style
457
+ },
458
+ onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.y),
459
+ onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.y),
460
+ onWheelScroll: (event, maxScrollPos) => {
461
+ if (context.viewport) {
462
+ const scrollPos = context.viewport.scrollTop + event.deltaY;
463
+ props.onWheelScroll(scrollPos);
464
+ if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
465
+ event.preventDefault();
466
+ }
580
467
  }
581
- }, 100);
582
- React2.useEffect(() => {
583
- const viewport = scrollAreaContext.viewport;
584
- if (viewport) {
585
- const handleScroll = () => {
586
- debounceScrollEnd();
587
- if (!removeUnlinkedScrollListenerRef.current) {
588
- const listener = addUnlinkedScrollListener(viewport, onThumbPositionChange);
589
- removeUnlinkedScrollListenerRef.current = listener;
590
- onThumbPositionChange();
468
+ },
469
+ onResize: () => {
470
+ if (ref.current && context.viewport && computedStyle) {
471
+ onSizesChange({
472
+ content: context.viewport.scrollHeight,
473
+ viewport: context.viewport.offsetHeight,
474
+ scrollbar: {
475
+ size: ref.current.clientHeight,
476
+ paddingStart: toInt(computedStyle.paddingTop),
477
+ paddingEnd: toInt(computedStyle.paddingBottom)
591
478
  }
592
- };
593
- onThumbPositionChange();
594
- viewport.addEventListener("scroll", handleScroll);
595
- return () => viewport.removeEventListener("scroll", handleScroll);
479
+ });
596
480
  }
597
- }, [scrollAreaContext.viewport, debounceScrollEnd, onThumbPositionChange]);
598
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
481
+ }
482
+ }
483
+ );
484
+ });
485
+ var [ScrollbarProvider, useScrollbarContext] = createScrollAreaContext(SCROLLBAR_NAME);
486
+ var ScrollAreaScrollbarImpl = React2.forwardRef((props, forwardedRef) => {
487
+ const {
488
+ __scopeScrollArea,
489
+ sizes,
490
+ hasThumb,
491
+ onThumbChange,
492
+ onThumbPointerUp,
493
+ onThumbPointerDown,
494
+ onThumbPositionChange,
495
+ onDragScroll,
496
+ onWheelScroll,
497
+ onResize,
498
+ ...scrollbarProps
499
+ } = props;
500
+ const context = useScrollAreaContext(SCROLLBAR_NAME, __scopeScrollArea);
501
+ const [scrollbar, setScrollbar] = React2.useState(null);
502
+ const composeRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => setScrollbar(node));
503
+ const rectRef = React2.useRef(null);
504
+ const prevWebkitUserSelectRef = React2.useRef("");
505
+ const viewport = context.viewport;
506
+ const maxScrollPos = sizes.content - sizes.viewport;
507
+ const handleWheelScroll = (0, import_react_use_callback_ref.useCallbackRef)(onWheelScroll);
508
+ const handleThumbPositionChange = (0, import_react_use_callback_ref.useCallbackRef)(onThumbPositionChange);
509
+ const handleResize = useDebounceCallback(onResize, 10);
510
+ function handleDragScroll(event) {
511
+ if (rectRef.current) {
512
+ const x = event.clientX - rectRef.current.left;
513
+ const y = event.clientY - rectRef.current.top;
514
+ onDragScroll({ x, y });
515
+ }
516
+ }
517
+ React2.useEffect(() => {
518
+ const handleWheel = (event) => {
519
+ const element = event.target;
520
+ const isScrollbarWheel = scrollbar?.contains(element);
521
+ if (isScrollbarWheel) handleWheelScroll(event, maxScrollPos);
522
+ };
523
+ document.addEventListener("wheel", handleWheel, { passive: false });
524
+ return () => document.removeEventListener("wheel", handleWheel, { passive: false });
525
+ }, [viewport, scrollbar, maxScrollPos, handleWheelScroll]);
526
+ React2.useEffect(handleThumbPositionChange, [sizes, handleThumbPositionChange]);
527
+ useResizeObserver(scrollbar, handleResize);
528
+ useResizeObserver(context.content, handleResize);
529
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
530
+ ScrollbarProvider,
531
+ {
532
+ scope: __scopeScrollArea,
533
+ scrollbar,
534
+ hasThumb,
535
+ onThumbChange: (0, import_react_use_callback_ref.useCallbackRef)(onThumbChange),
536
+ onThumbPointerUp: (0, import_react_use_callback_ref.useCallbackRef)(onThumbPointerUp),
537
+ onThumbPositionChange: handleThumbPositionChange,
538
+ onThumbPointerDown: (0, import_react_use_callback_ref.useCallbackRef)(onThumbPointerDown),
539
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
599
540
  import_react_primitive.Primitive.div,
600
541
  {
601
- "data-state": scrollbarContext.hasThumb ? "visible" : "hidden",
602
- ...thumbProps,
603
- ref: composedRef,
604
- style: {
605
- width: "var(--radix-scroll-area-thumb-width)",
606
- height: "var(--radix-scroll-area-thumb-height)",
607
- ...style
608
- },
609
- onPointerDownCapture: (0, import_primitive.composeEventHandlers)(props.onPointerDownCapture, (event) => {
610
- const thumb = event.target;
611
- const thumbRect = thumb.getBoundingClientRect();
612
- const x = event.clientX - thumbRect.left;
613
- const y = event.clientY - thumbRect.top;
614
- scrollbarContext.onThumbPointerDown({ x, y });
542
+ ...scrollbarProps,
543
+ ref: composeRefs,
544
+ style: { position: "absolute", ...scrollbarProps.style },
545
+ onPointerDown: (0, import_primitive.composeEventHandlers)(props.onPointerDown, (event) => {
546
+ const mainPointer = 0;
547
+ if (event.button === mainPointer) {
548
+ const element = event.target;
549
+ element.setPointerCapture(event.pointerId);
550
+ rectRef.current = scrollbar.getBoundingClientRect();
551
+ prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;
552
+ document.body.style.webkitUserSelect = "none";
553
+ if (context.viewport) context.viewport.style.scrollBehavior = "auto";
554
+ handleDragScroll(event);
555
+ }
615
556
  }),
616
- onPointerUp: (0, import_primitive.composeEventHandlers)(props.onPointerUp, scrollbarContext.onThumbPointerUp)
557
+ onPointerMove: (0, import_primitive.composeEventHandlers)(props.onPointerMove, handleDragScroll),
558
+ onPointerUp: (0, import_primitive.composeEventHandlers)(props.onPointerUp, (event) => {
559
+ const element = event.target;
560
+ if (element.hasPointerCapture(event.pointerId)) {
561
+ element.releasePointerCapture(event.pointerId);
562
+ }
563
+ document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;
564
+ if (context.viewport) context.viewport.style.scrollBehavior = "";
565
+ rectRef.current = null;
566
+ })
617
567
  }
618
- );
619
- }
620
- );
621
- ScrollAreaThumb.displayName = THUMB_NAME;
622
- var CORNER_NAME = "ScrollAreaCorner";
623
- var ScrollAreaCorner = React2.forwardRef(
624
- (props, forwardedRef) => {
625
- const context = useScrollAreaContext(CORNER_NAME, props.__scopeScrollArea);
626
- const hasBothScrollbarsVisible = Boolean(context.scrollbarX && context.scrollbarY);
627
- const hasCorner = context.type !== "scroll" && hasBothScrollbarsVisible;
628
- return hasCorner ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollAreaCornerImpl, { ...props, ref: forwardedRef }) : null;
568
+ )
629
569
  }
630
570
  );
631
- ScrollAreaCorner.displayName = CORNER_NAME;
632
- var ScrollAreaCornerImpl = React2.forwardRef((props, forwardedRef) => {
633
- const { __scopeScrollArea, ...cornerProps } = props;
634
- const context = useScrollAreaContext(CORNER_NAME, __scopeScrollArea);
635
- const [width, setWidth] = React2.useState(0);
636
- const [height, setHeight] = React2.useState(0);
637
- const hasSize = Boolean(width && height);
638
- useResizeObserver(context.scrollbarX, () => {
639
- const height2 = context.scrollbarX?.offsetHeight || 0;
640
- context.onCornerHeightChange(height2);
641
- setHeight(height2);
642
- });
643
- useResizeObserver(context.scrollbarY, () => {
644
- const width2 = context.scrollbarY?.offsetWidth || 0;
645
- context.onCornerWidthChange(width2);
646
- setWidth(width2);
647
- });
648
- return hasSize ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
571
+ });
572
+ var THUMB_NAME = "ScrollAreaThumb";
573
+ var ScrollAreaThumb = React2.forwardRef(
574
+ (props, forwardedRef) => {
575
+ const { forceMount, ...thumbProps } = props;
576
+ const scrollbarContext = useScrollbarContext(THUMB_NAME, props.__scopeScrollArea);
577
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || scrollbarContext.hasThumb, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollAreaThumbImpl, { ref: forwardedRef, ...thumbProps }) });
578
+ }
579
+ );
580
+ var ScrollAreaThumbImpl = React2.forwardRef(
581
+ (props, forwardedRef) => {
582
+ const { __scopeScrollArea, style, ...thumbProps } = props;
583
+ const scrollAreaContext = useScrollAreaContext(THUMB_NAME, __scopeScrollArea);
584
+ const scrollbarContext = useScrollbarContext(THUMB_NAME, __scopeScrollArea);
585
+ const { onThumbPositionChange } = scrollbarContext;
586
+ const composedRef = (0, import_react_compose_refs.useComposedRefs)(
587
+ forwardedRef,
588
+ (node) => scrollbarContext.onThumbChange(node)
589
+ );
590
+ const removeUnlinkedScrollListenerRef = React2.useRef();
591
+ const debounceScrollEnd = useDebounceCallback(() => {
592
+ if (removeUnlinkedScrollListenerRef.current) {
593
+ removeUnlinkedScrollListenerRef.current();
594
+ removeUnlinkedScrollListenerRef.current = void 0;
595
+ }
596
+ }, 100);
597
+ React2.useEffect(() => {
598
+ const viewport = scrollAreaContext.viewport;
599
+ if (viewport) {
600
+ const handleScroll = () => {
601
+ debounceScrollEnd();
602
+ if (!removeUnlinkedScrollListenerRef.current) {
603
+ const listener = addUnlinkedScrollListener(viewport, onThumbPositionChange);
604
+ removeUnlinkedScrollListenerRef.current = listener;
605
+ onThumbPositionChange();
606
+ }
607
+ };
608
+ onThumbPositionChange();
609
+ viewport.addEventListener("scroll", handleScroll);
610
+ return () => viewport.removeEventListener("scroll", handleScroll);
611
+ }
612
+ }, [scrollAreaContext.viewport, debounceScrollEnd, onThumbPositionChange]);
613
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
649
614
  import_react_primitive.Primitive.div,
650
615
  {
651
- ...cornerProps,
652
- ref: forwardedRef,
616
+ "data-state": scrollbarContext.hasThumb ? "visible" : "hidden",
617
+ ...thumbProps,
618
+ ref: composedRef,
653
619
  style: {
654
- width,
655
- height,
656
- position: "absolute",
657
- right: context.dir === "ltr" ? 0 : void 0,
658
- left: context.dir === "rtl" ? 0 : void 0,
659
- bottom: 0,
660
- ...props.style
661
- }
620
+ width: "var(--radix-scroll-area-thumb-width)",
621
+ height: "var(--radix-scroll-area-thumb-height)",
622
+ ...style
623
+ },
624
+ onPointerDownCapture: (0, import_primitive.composeEventHandlers)(props.onPointerDownCapture, (event) => {
625
+ const thumb = event.target;
626
+ const thumbRect = thumb.getBoundingClientRect();
627
+ const x = event.clientX - thumbRect.left;
628
+ const y = event.clientY - thumbRect.top;
629
+ scrollbarContext.onThumbPointerDown({ x, y });
630
+ }),
631
+ onPointerUp: (0, import_primitive.composeEventHandlers)(props.onPointerUp, scrollbarContext.onThumbPointerUp)
662
632
  }
663
- ) : null;
664
- });
665
- function toInt(value) {
666
- return value ? parseInt(value, 10) : 0;
667
- }
668
- function getThumbRatio(viewportSize, contentSize) {
669
- const ratio = viewportSize / contentSize;
670
- return isNaN(ratio) ? 0 : ratio;
671
- }
672
- function getThumbSize(sizes) {
673
- const ratio = getThumbRatio(sizes.viewport, sizes.content);
674
- const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
675
- const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;
676
- return Math.max(thumbSize, 18);
677
- }
678
- function getScrollPositionFromPointer(pointerPos, pointerOffset, sizes, dir = "ltr") {
679
- const thumbSizePx = getThumbSize(sizes);
680
- const thumbCenter = thumbSizePx / 2;
681
- const offset = pointerOffset || thumbCenter;
682
- const thumbOffsetFromEnd = thumbSizePx - offset;
683
- const minPointerPos = sizes.scrollbar.paddingStart + offset;
684
- const maxPointerPos = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd;
685
- const maxScrollPos = sizes.content - sizes.viewport;
686
- const scrollRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
687
- const interpolate = linearScale([minPointerPos, maxPointerPos], scrollRange);
688
- return interpolate(pointerPos);
689
- }
690
- function getThumbOffsetFromScroll(scrollPos, sizes, dir = "ltr") {
691
- const thumbSizePx = getThumbSize(sizes);
692
- const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
693
- const scrollbar = sizes.scrollbar.size - scrollbarPadding;
694
- const maxScrollPos = sizes.content - sizes.viewport;
695
- const maxThumbPos = scrollbar - thumbSizePx;
696
- const scrollClampRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
697
- const scrollWithoutMomentum = (0, import_number.clamp)(scrollPos, scrollClampRange);
698
- const interpolate = linearScale([0, maxScrollPos], [0, maxThumbPos]);
699
- return interpolate(scrollWithoutMomentum);
700
- }
701
- function linearScale(input, output) {
702
- return (value) => {
703
- if (input[0] === input[1] || output[0] === output[1]) return output[0];
704
- const ratio = (output[1] - output[0]) / (input[1] - input[0]);
705
- return output[0] + ratio * (value - input[0]);
706
- };
707
- }
708
- function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
709
- return scrollPos > 0 && scrollPos < maxScrollPos;
633
+ );
710
634
  }
711
- var addUnlinkedScrollListener = (node, handler = () => {
712
- }) => {
713
- let prevPosition = { left: node.scrollLeft, top: node.scrollTop };
714
- let rAF = 0;
715
- (function loop() {
716
- const position = { left: node.scrollLeft, top: node.scrollTop };
717
- const isHorizontalScroll = prevPosition.left !== position.left;
718
- const isVerticalScroll = prevPosition.top !== position.top;
719
- if (isHorizontalScroll || isVerticalScroll) handler();
720
- prevPosition = position;
721
- rAF = window.requestAnimationFrame(loop);
722
- })();
723
- return () => window.cancelAnimationFrame(rAF);
724
- };
725
- function useDebounceCallback(callback, delay) {
726
- const handleCallback = (0, import_react_use_callback_ref.useCallbackRef)(callback);
727
- const debounceTimerRef = React2.useRef(0);
728
- React2.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
729
- return React2.useCallback(() => {
730
- window.clearTimeout(debounceTimerRef.current);
731
- debounceTimerRef.current = window.setTimeout(handleCallback, delay);
732
- }, [handleCallback, delay]);
635
+ );
636
+ ScrollAreaThumb.displayName = THUMB_NAME;
637
+ var CORNER_NAME = "ScrollAreaCorner";
638
+ var ScrollAreaCorner = React2.forwardRef(
639
+ (props, forwardedRef) => {
640
+ const context = useScrollAreaContext(CORNER_NAME, props.__scopeScrollArea);
641
+ const hasBothScrollbarsVisible = Boolean(context.scrollbarX && context.scrollbarY);
642
+ const hasCorner = context.type !== "scroll" && hasBothScrollbarsVisible;
643
+ return hasCorner ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollAreaCornerImpl, { ...props, ref: forwardedRef }) : null;
733
644
  }
734
- function useResizeObserver(element, onResize) {
735
- const handleResize = (0, import_react_use_callback_ref.useCallbackRef)(onResize);
736
- (0, import_react_use_layout_effect.useLayoutEffect)(() => {
737
- let rAF = 0;
738
- if (element) {
739
- const resizeObserver = new ResizeObserver(() => {
740
- cancelAnimationFrame(rAF);
741
- rAF = window.requestAnimationFrame(handleResize);
742
- });
743
- resizeObserver.observe(element);
744
- return () => {
745
- window.cancelAnimationFrame(rAF);
746
- resizeObserver.unobserve(element);
747
- };
645
+ );
646
+ ScrollAreaCorner.displayName = CORNER_NAME;
647
+ var ScrollAreaCornerImpl = React2.forwardRef((props, forwardedRef) => {
648
+ const { __scopeScrollArea, ...cornerProps } = props;
649
+ const context = useScrollAreaContext(CORNER_NAME, __scopeScrollArea);
650
+ const [width, setWidth] = React2.useState(0);
651
+ const [height, setHeight] = React2.useState(0);
652
+ const hasSize = Boolean(width && height);
653
+ useResizeObserver(context.scrollbarX, () => {
654
+ const height2 = context.scrollbarX?.offsetHeight || 0;
655
+ context.onCornerHeightChange(height2);
656
+ setHeight(height2);
657
+ });
658
+ useResizeObserver(context.scrollbarY, () => {
659
+ const width2 = context.scrollbarY?.offsetWidth || 0;
660
+ context.onCornerWidthChange(width2);
661
+ setWidth(width2);
662
+ });
663
+ return hasSize ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
664
+ import_react_primitive.Primitive.div,
665
+ {
666
+ ...cornerProps,
667
+ ref: forwardedRef,
668
+ style: {
669
+ width,
670
+ height,
671
+ position: "absolute",
672
+ right: context.dir === "ltr" ? 0 : void 0,
673
+ left: context.dir === "rtl" ? 0 : void 0,
674
+ bottom: 0,
675
+ ...props.style
748
676
  }
749
- }, [element, handleResize]);
750
- }
751
- var Root = ScrollArea;
752
- var Viewport = ScrollAreaViewport;
753
- var Scrollbar = ScrollAreaScrollbar;
754
- var Thumb = ScrollAreaThumb;
755
- var Corner = ScrollAreaCorner;
756
- })();
677
+ }
678
+ ) : null;
679
+ });
680
+ function toInt(value) {
681
+ return value ? parseInt(value, 10) : 0;
682
+ }
683
+ function getThumbRatio(viewportSize, contentSize) {
684
+ const ratio = viewportSize / contentSize;
685
+ return isNaN(ratio) ? 0 : ratio;
686
+ }
687
+ function getThumbSize(sizes) {
688
+ const ratio = getThumbRatio(sizes.viewport, sizes.content);
689
+ const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
690
+ const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;
691
+ return Math.max(thumbSize, 18);
692
+ }
693
+ function getScrollPositionFromPointer(pointerPos, pointerOffset, sizes, dir = "ltr") {
694
+ const thumbSizePx = getThumbSize(sizes);
695
+ const thumbCenter = thumbSizePx / 2;
696
+ const offset = pointerOffset || thumbCenter;
697
+ const thumbOffsetFromEnd = thumbSizePx - offset;
698
+ const minPointerPos = sizes.scrollbar.paddingStart + offset;
699
+ const maxPointerPos = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd;
700
+ const maxScrollPos = sizes.content - sizes.viewport;
701
+ const scrollRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
702
+ const interpolate = linearScale([minPointerPos, maxPointerPos], scrollRange);
703
+ return interpolate(pointerPos);
704
+ }
705
+ function getThumbOffsetFromScroll(scrollPos, sizes, dir = "ltr") {
706
+ const thumbSizePx = getThumbSize(sizes);
707
+ const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
708
+ const scrollbar = sizes.scrollbar.size - scrollbarPadding;
709
+ const maxScrollPos = sizes.content - sizes.viewport;
710
+ const maxThumbPos = scrollbar - thumbSizePx;
711
+ const scrollClampRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
712
+ const scrollWithoutMomentum = (0, import_number.clamp)(scrollPos, scrollClampRange);
713
+ const interpolate = linearScale([0, maxScrollPos], [0, maxThumbPos]);
714
+ return interpolate(scrollWithoutMomentum);
715
+ }
716
+ function linearScale(input, output) {
717
+ return (value) => {
718
+ if (input[0] === input[1] || output[0] === output[1]) return output[0];
719
+ const ratio = (output[1] - output[0]) / (input[1] - input[0]);
720
+ return output[0] + ratio * (value - input[0]);
721
+ };
722
+ }
723
+ function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
724
+ return scrollPos > 0 && scrollPos < maxScrollPos;
725
+ }
726
+ var addUnlinkedScrollListener = (node, handler = () => {
727
+ }) => {
728
+ let prevPosition = { left: node.scrollLeft, top: node.scrollTop };
729
+ let rAF = 0;
730
+ (function loop() {
731
+ const position = { left: node.scrollLeft, top: node.scrollTop };
732
+ const isHorizontalScroll = prevPosition.left !== position.left;
733
+ const isVerticalScroll = prevPosition.top !== position.top;
734
+ if (isHorizontalScroll || isVerticalScroll) handler();
735
+ prevPosition = position;
736
+ rAF = window.requestAnimationFrame(loop);
737
+ })();
738
+ return () => window.cancelAnimationFrame(rAF);
739
+ };
740
+ function useDebounceCallback(callback, delay) {
741
+ const handleCallback = (0, import_react_use_callback_ref.useCallbackRef)(callback);
742
+ const debounceTimerRef = React2.useRef(0);
743
+ React2.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
744
+ return React2.useCallback(() => {
745
+ window.clearTimeout(debounceTimerRef.current);
746
+ debounceTimerRef.current = window.setTimeout(handleCallback, delay);
747
+ }, [handleCallback, delay]);
748
+ }
749
+ function useResizeObserver(element, onResize) {
750
+ const handleResize = (0, import_react_use_callback_ref.useCallbackRef)(onResize);
751
+ (0, import_react_use_layout_effect.useLayoutEffect)(() => {
752
+ let rAF = 0;
753
+ if (element) {
754
+ const resizeObserver = new ResizeObserver(() => {
755
+ cancelAnimationFrame(rAF);
756
+ rAF = window.requestAnimationFrame(handleResize);
757
+ });
758
+ resizeObserver.observe(element);
759
+ return () => {
760
+ window.cancelAnimationFrame(rAF);
761
+ resizeObserver.unobserve(element);
762
+ };
763
+ }
764
+ }, [element, handleResize]);
765
+ }
766
+ var Root = ScrollArea;
767
+ var Viewport = ScrollAreaViewport;
768
+ var Scrollbar = ScrollAreaScrollbar;
769
+ var Thumb = ScrollAreaThumb;
770
+ var Corner = ScrollAreaCorner;
757
771
  //# sourceMappingURL=index.js.map