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