@radix-ui/react-scroll-area 1.0.6-rc.9 → 1.1.0-rc.2
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.
- package/dist/index.d.mts +47 -35
- package/dist/index.d.ts +47 -35
- package/dist/index.js +666 -730
- package/dist/index.js.map +7 -1
- package/dist/index.mjs +677 -742
- package/dist/index.mjs.map +7 -1
- package/package.json +10 -11
- package/dist/index.d.ts.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,821 +1,757 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
1
|
+
"use strict";
|
|
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
|
+
));
|
|
41
32
|
|
|
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");
|
|
42
44
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
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;
|
|
47
51
|
}, initialState);
|
|
48
|
-
}
|
|
52
|
+
}
|
|
49
53
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
const ref = $4huGU$react.useRef(null);
|
|
113
|
-
const composedRefs = $4huGU$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref, context.onViewportChange);
|
|
114
|
-
return /*#__PURE__*/ $4huGU$react.createElement($4huGU$react.Fragment, null, /*#__PURE__*/ $4huGU$react.createElement("style", {
|
|
115
|
-
dangerouslySetInnerHTML: {
|
|
116
|
-
__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}`
|
|
117
|
-
},
|
|
118
|
-
nonce: nonce
|
|
119
|
-
}), /*#__PURE__*/ $4huGU$react.createElement($4huGU$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($4huGU$babelruntimehelpersextends))({
|
|
120
|
-
"data-radix-scroll-area-viewport": ""
|
|
121
|
-
}, viewportProps, {
|
|
122
|
-
ref: composedRefs,
|
|
123
|
-
style: {
|
|
124
|
-
/**
|
|
125
|
-
* We don't support `visible` because the intention is to have at least one scrollbar
|
|
126
|
-
* if this component is used and `visible` will behave like `auto` in that case
|
|
127
|
-
* https://developer.mozilla.org/en-US/docs/Web/CSS/overflowed#description
|
|
128
|
-
*
|
|
129
|
-
* We don't handle `auto` because the intention is for the native implementation
|
|
130
|
-
* to be hidden if using this component. We just want to ensure the node is scrollable
|
|
131
|
-
* so could have used either `scroll` or `auto` here. We picked `scroll` to prevent
|
|
132
|
-
* the browser from having to work out whether to render native scrollbars or not,
|
|
133
|
-
* we tell it to with the intention of hiding them in CSS.
|
|
134
|
-
*/ overflowX: context.scrollbarXEnabled ? 'scroll' : 'hidden',
|
|
135
|
-
overflowY: context.scrollbarYEnabled ? 'scroll' : 'hidden',
|
|
136
|
-
...props.style
|
|
137
|
-
}
|
|
138
|
-
}), /*#__PURE__*/ $4huGU$react.createElement("div", {
|
|
139
|
-
ref: context.onContentChange,
|
|
140
|
-
style: {
|
|
141
|
-
minWidth: '100%',
|
|
142
|
-
display: 'table'
|
|
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
|
+
)
|
|
143
116
|
}
|
|
144
|
-
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
const
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
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)(
|
|
139
|
+
import_react_primitive.Primitive.div,
|
|
140
|
+
{
|
|
141
|
+
"data-radix-scroll-area-viewport": "",
|
|
142
|
+
...viewportProps,
|
|
143
|
+
ref: composedRefs,
|
|
144
|
+
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",
|
|
158
|
+
...props.style
|
|
159
|
+
},
|
|
160
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: context.onContentChange, style: { minWidth: "100%", display: "table" }, children })
|
|
161
|
+
}
|
|
162
|
+
)
|
|
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(() => {
|
|
158
175
|
isHorizontal ? onScrollbarXEnabledChange(true) : onScrollbarYEnabledChange(true);
|
|
159
|
-
return ()=>{
|
|
160
|
-
|
|
176
|
+
return () => {
|
|
177
|
+
isHorizontal ? onScrollbarXEnabledChange(false) : onScrollbarYEnabledChange(false);
|
|
161
178
|
};
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
hideTimer = window.setTimeout(()=>setVisible(false)
|
|
197
|
-
, 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
|
-
}
|
|
207
|
-
}, [
|
|
208
|
-
context.scrollArea,
|
|
209
|
-
context.scrollHideDelay
|
|
210
|
-
]);
|
|
211
|
-
return /*#__PURE__*/ $4huGU$react.createElement($4huGU$radixuireactpresence.Presence, {
|
|
212
|
-
present: forceMount || visible
|
|
213
|
-
}, /*#__PURE__*/ $4huGU$react.createElement($f8fcbf76d19b7361$var$ScrollAreaScrollbarAuto, ($parcel$interopDefault($4huGU$babelruntimehelpersextends))({
|
|
214
|
-
"data-state": visible ? 'visible' : 'hidden'
|
|
215
|
-
}, scrollbarProps, {
|
|
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
|
+
}
|
|
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,
|
|
216
213
|
ref: forwardedRef
|
|
217
|
-
|
|
218
|
-
});
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
const
|
|
222
|
-
const
|
|
223
|
-
const
|
|
224
|
-
, 100);
|
|
225
|
-
const [state, send] =
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
214
|
+
}
|
|
215
|
+
) });
|
|
216
|
+
});
|
|
217
|
+
var ScrollAreaScrollbarScroll = React2.forwardRef((props, forwardedRef) => {
|
|
218
|
+
const { forceMount, ...scrollbarProps } = props;
|
|
219
|
+
const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
|
|
220
|
+
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
|
+
}
|
|
242
239
|
});
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
}
|
|
273
|
-
}, [
|
|
274
|
-
context.viewport,
|
|
275
|
-
isHorizontal,
|
|
276
|
-
send,
|
|
277
|
-
debounceScrollEnd
|
|
278
|
-
]);
|
|
279
|
-
return /*#__PURE__*/ $4huGU$react.createElement($4huGU$radixuireactpresence.Presence, {
|
|
280
|
-
present: forceMount || state !== 'hidden'
|
|
281
|
-
}, /*#__PURE__*/ $4huGU$react.createElement($f8fcbf76d19b7361$var$ScrollAreaScrollbarVisible, ($parcel$interopDefault($4huGU$babelruntimehelpersextends))({
|
|
282
|
-
"data-state": state === 'hidden' ? 'hidden' : 'visible'
|
|
283
|
-
}, scrollbarProps, {
|
|
240
|
+
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,
|
|
284
269
|
ref: forwardedRef,
|
|
285
|
-
onPointerEnter:
|
|
286
|
-
),
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
const
|
|
292
|
-
const
|
|
293
|
-
const
|
|
294
|
-
const
|
|
295
|
-
const
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
}
|
|
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
|
+
}
|
|
302
286
|
}, 10);
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
return
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
"data-state": visible ?
|
|
309
|
-
|
|
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,
|
|
310
294
|
ref: forwardedRef
|
|
311
|
-
|
|
312
|
-
});
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
const
|
|
316
|
-
const
|
|
317
|
-
const
|
|
318
|
-
const
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
paddingStart: 0,
|
|
324
|
-
paddingEnd: 0
|
|
325
|
-
}
|
|
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 }
|
|
326
307
|
});
|
|
327
|
-
const thumbRatio =
|
|
308
|
+
const thumbRatio = getThumbRatio(sizes.viewport, sizes.content);
|
|
328
309
|
const commonProps = {
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
,
|
|
337
|
-
onThumbPointerDown: (pointerPos)=>pointerOffsetRef.current = pointerPos
|
|
310
|
+
...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
|
|
338
317
|
};
|
|
339
318
|
function getScrollPosition(pointerPos, dir) {
|
|
340
|
-
|
|
319
|
+
return getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, dir);
|
|
341
320
|
}
|
|
342
|
-
if (orientation ===
|
|
343
|
-
|
|
344
|
-
|
|
321
|
+
if (orientation === "horizontal") {
|
|
322
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
323
|
+
ScrollAreaScrollbarX,
|
|
324
|
+
{
|
|
325
|
+
...commonProps,
|
|
326
|
+
ref: forwardedRef,
|
|
327
|
+
onThumbPositionChange: () => {
|
|
345
328
|
if (context.viewport && thumbRef.current) {
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
329
|
+
const scrollPos = context.viewport.scrollLeft;
|
|
330
|
+
const offset = getThumbOffsetFromScroll(scrollPos, sizes, context.dir);
|
|
331
|
+
thumbRef.current.style.transform = `translate3d(${offset}px, 0, 0)`;
|
|
349
332
|
}
|
|
350
|
-
|
|
351
|
-
|
|
333
|
+
},
|
|
334
|
+
onWheelScroll: (scrollPos) => {
|
|
352
335
|
if (context.viewport) context.viewport.scrollLeft = scrollPos;
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
if (context.viewport)
|
|
336
|
+
},
|
|
337
|
+
onDragScroll: (pointerPos) => {
|
|
338
|
+
if (context.viewport) {
|
|
339
|
+
context.viewport.scrollLeft = getScrollPosition(pointerPos, context.dir);
|
|
340
|
+
}
|
|
341
|
+
}
|
|
356
342
|
}
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
343
|
+
);
|
|
344
|
+
}
|
|
345
|
+
if (orientation === "vertical") {
|
|
346
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
347
|
+
ScrollAreaScrollbarY,
|
|
348
|
+
{
|
|
349
|
+
...commonProps,
|
|
350
|
+
ref: forwardedRef,
|
|
351
|
+
onThumbPositionChange: () => {
|
|
361
352
|
if (context.viewport && thumbRef.current) {
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
353
|
+
const scrollPos = context.viewport.scrollTop;
|
|
354
|
+
const offset = getThumbOffsetFromScroll(scrollPos, sizes);
|
|
355
|
+
thumbRef.current.style.transform = `translate3d(0, ${offset}px, 0)`;
|
|
365
356
|
}
|
|
366
|
-
|
|
367
|
-
|
|
357
|
+
},
|
|
358
|
+
onWheelScroll: (scrollPos) => {
|
|
368
359
|
if (context.viewport) context.viewport.scrollTop = scrollPos;
|
|
369
|
-
|
|
370
|
-
|
|
360
|
+
},
|
|
361
|
+
onDragScroll: (pointerPos) => {
|
|
371
362
|
if (context.viewport) context.viewport.scrollTop = getScrollPosition(pointerPos);
|
|
363
|
+
}
|
|
372
364
|
}
|
|
373
|
-
|
|
365
|
+
);
|
|
366
|
+
}
|
|
374
367
|
return null;
|
|
375
|
-
});
|
|
376
|
-
|
|
377
|
-
const { sizes
|
|
378
|
-
const context =
|
|
379
|
-
const [computedStyle, setComputedStyle] =
|
|
380
|
-
const ref =
|
|
381
|
-
const composeRefs =
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
}, [
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
"data-orientation": "horizontal"
|
|
389
|
-
|
|
368
|
+
});
|
|
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]);
|
|
378
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
379
|
+
ScrollAreaScrollbarImpl,
|
|
380
|
+
{
|
|
381
|
+
"data-orientation": "horizontal",
|
|
382
|
+
...scrollbarProps,
|
|
390
383
|
ref: composeRefs,
|
|
391
|
-
sizes
|
|
384
|
+
sizes,
|
|
392
385
|
style: {
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
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
|
|
398
391
|
},
|
|
399
|
-
onThumbPointerDown: (pointerPos)=>props.onThumbPointerDown(pointerPos.x)
|
|
400
|
-
,
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
if ($f8fcbf76d19b7361$var$isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) event.preventDefault();
|
|
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();
|
|
408
400
|
}
|
|
401
|
+
}
|
|
409
402
|
},
|
|
410
|
-
onResize: ()=>{
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
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
|
+
}
|
|
419
413
|
});
|
|
414
|
+
}
|
|
420
415
|
}
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
const
|
|
426
|
-
const
|
|
427
|
-
const
|
|
428
|
-
const
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
416
|
+
}
|
|
417
|
+
);
|
|
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]);
|
|
428
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
429
|
+
ScrollAreaScrollbarImpl,
|
|
430
|
+
{
|
|
431
|
+
"data-orientation": "vertical",
|
|
432
|
+
...scrollbarProps,
|
|
437
433
|
ref: composeRefs,
|
|
438
|
-
sizes
|
|
434
|
+
sizes,
|
|
439
435
|
style: {
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
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
|
|
446
442
|
},
|
|
447
|
-
onThumbPointerDown: (pointerPos)=>props.onThumbPointerDown(pointerPos.y)
|
|
448
|
-
,
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
if ($f8fcbf76d19b7361$var$isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) event.preventDefault();
|
|
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();
|
|
456
451
|
}
|
|
452
|
+
}
|
|
457
453
|
},
|
|
458
|
-
onResize: ()=>{
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
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
|
+
}
|
|
467
464
|
});
|
|
465
|
+
}
|
|
468
466
|
}
|
|
469
|
-
|
|
470
|
-
});
|
|
471
|
-
/* -----------------------------------------------------------------------------------------------*/ const [$f8fcbf76d19b7361$var$ScrollbarProvider, $f8fcbf76d19b7361$var$useScrollbarContext] = $f8fcbf76d19b7361$var$createScrollAreaContext($f8fcbf76d19b7361$var$SCROLLBAR_NAME);
|
|
472
|
-
const $f8fcbf76d19b7361$var$ScrollAreaScrollbarImpl = /*#__PURE__*/ $4huGU$react.forwardRef((props, forwardedRef)=>{
|
|
473
|
-
const { __scopeScrollArea: __scopeScrollArea , sizes: sizes , hasThumb: hasThumb , onThumbChange: onThumbChange , onThumbPointerUp: onThumbPointerUp , onThumbPointerDown: onThumbPointerDown , onThumbPositionChange: onThumbPositionChange , onDragScroll: onDragScroll , onWheelScroll: onWheelScroll , onResize: onResize , ...scrollbarProps } = props;
|
|
474
|
-
const context = $f8fcbf76d19b7361$var$useScrollAreaContext($f8fcbf76d19b7361$var$SCROLLBAR_NAME, __scopeScrollArea);
|
|
475
|
-
const [scrollbar, setScrollbar] = $4huGU$react.useState(null);
|
|
476
|
-
const composeRefs = $4huGU$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>setScrollbar(node)
|
|
467
|
+
}
|
|
477
468
|
);
|
|
478
|
-
|
|
479
|
-
|
|
469
|
+
});
|
|
470
|
+
var [ScrollbarProvider, useScrollbarContext] = createScrollAreaContext(SCROLLBAR_NAME);
|
|
471
|
+
var ScrollAreaScrollbarImpl = React2.forwardRef((props, forwardedRef) => {
|
|
472
|
+
const {
|
|
473
|
+
__scopeScrollArea,
|
|
474
|
+
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("");
|
|
480
490
|
const viewport = context.viewport;
|
|
481
491
|
const maxScrollPos = sizes.content - sizes.viewport;
|
|
482
|
-
const handleWheelScroll =
|
|
483
|
-
const handleThumbPositionChange =
|
|
484
|
-
const handleResize =
|
|
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);
|
|
485
495
|
function handleDragScroll(event) {
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
y: y
|
|
492
|
-
});
|
|
493
|
-
}
|
|
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
|
+
}
|
|
494
501
|
}
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
;
|
|
511
|
-
}, [
|
|
512
|
-
viewport,
|
|
513
|
-
scrollbar,
|
|
514
|
-
maxScrollPos,
|
|
515
|
-
handleWheelScroll
|
|
516
|
-
]);
|
|
517
|
-
/**
|
|
518
|
-
* Update thumb position on sizes change
|
|
519
|
-
*/ $4huGU$react.useEffect(handleThumbPositionChange, [
|
|
520
|
-
sizes,
|
|
521
|
-
handleThumbPositionChange
|
|
522
|
-
]);
|
|
523
|
-
$f8fcbf76d19b7361$var$useResizeObserver(scrollbar, handleResize);
|
|
524
|
-
$f8fcbf76d19b7361$var$useResizeObserver(context.content, handleResize);
|
|
525
|
-
return /*#__PURE__*/ $4huGU$react.createElement($f8fcbf76d19b7361$var$ScrollbarProvider, {
|
|
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
|
+
{
|
|
526
517
|
scope: __scopeScrollArea,
|
|
527
|
-
scrollbar
|
|
528
|
-
hasThumb
|
|
529
|
-
onThumbChange:
|
|
530
|
-
onThumbPointerUp:
|
|
518
|
+
scrollbar,
|
|
519
|
+
hasThumb,
|
|
520
|
+
onThumbChange: (0, import_react_use_callback_ref.useCallbackRef)(onThumbChange),
|
|
521
|
+
onThumbPointerUp: (0, import_react_use_callback_ref.useCallbackRef)(onThumbPointerUp),
|
|
531
522
|
onThumbPositionChange: handleThumbPositionChange,
|
|
532
|
-
onThumbPointerDown:
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
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) {
|
|
542
533
|
const element = event.target;
|
|
543
534
|
element.setPointerCapture(event.pointerId);
|
|
544
|
-
rectRef.current = scrollbar.getBoundingClientRect();
|
|
545
|
-
// so we remove text selection manually when scrolling
|
|
535
|
+
rectRef.current = scrollbar.getBoundingClientRect();
|
|
546
536
|
prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;
|
|
547
|
-
document.body.style.webkitUserSelect =
|
|
548
|
-
if (context.viewport) context.viewport.style.scrollBehavior =
|
|
537
|
+
document.body.style.webkitUserSelect = "none";
|
|
538
|
+
if (context.viewport) context.viewport.style.scrollBehavior = "auto";
|
|
549
539
|
handleDragScroll(event);
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
})
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
const $f8fcbf76d19b7361$export$9fba1154677d7cd2 = /*#__PURE__*/ $4huGU$react.forwardRef((props, forwardedRef)=>{
|
|
566
|
-
const { forceMount: forceMount , ...thumbProps } = props;
|
|
567
|
-
const scrollbarContext = $f8fcbf76d19b7361$var$useScrollbarContext($f8fcbf76d19b7361$var$THUMB_NAME, props.__scopeScrollArea);
|
|
568
|
-
return /*#__PURE__*/ $4huGU$react.createElement($4huGU$radixuireactpresence.Presence, {
|
|
569
|
-
present: forceMount || scrollbarContext.hasThumb
|
|
570
|
-
}, /*#__PURE__*/ $4huGU$react.createElement($f8fcbf76d19b7361$var$ScrollAreaThumbImpl, ($parcel$interopDefault($4huGU$babelruntimehelpersextends))({
|
|
571
|
-
ref: forwardedRef
|
|
572
|
-
}, thumbProps)));
|
|
573
|
-
});
|
|
574
|
-
const $f8fcbf76d19b7361$var$ScrollAreaThumbImpl = /*#__PURE__*/ $4huGU$react.forwardRef((props, forwardedRef)=>{
|
|
575
|
-
const { __scopeScrollArea: __scopeScrollArea , style: style , ...thumbProps } = props;
|
|
576
|
-
const scrollAreaContext = $f8fcbf76d19b7361$var$useScrollAreaContext($f8fcbf76d19b7361$var$THUMB_NAME, __scopeScrollArea);
|
|
577
|
-
const scrollbarContext = $f8fcbf76d19b7361$var$useScrollbarContext($f8fcbf76d19b7361$var$THUMB_NAME, __scopeScrollArea);
|
|
578
|
-
const { onThumbPositionChange: onThumbPositionChange } = scrollbarContext;
|
|
579
|
-
const composedRef = $4huGU$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>scrollbarContext.onThumbChange(node)
|
|
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
|
+
})
|
|
552
|
+
}
|
|
553
|
+
)
|
|
554
|
+
}
|
|
580
555
|
);
|
|
581
|
-
|
|
582
|
-
|
|
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
|
+
}
|
|
564
|
+
);
|
|
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(() => {
|
|
583
577
|
if (removeUnlinkedScrollListenerRef.current) {
|
|
584
|
-
|
|
585
|
-
|
|
578
|
+
removeUnlinkedScrollListenerRef.current();
|
|
579
|
+
removeUnlinkedScrollListenerRef.current = void 0;
|
|
586
580
|
}
|
|
587
|
-
|
|
588
|
-
|
|
581
|
+
}, 100);
|
|
582
|
+
React2.useEffect(() => {
|
|
589
583
|
const viewport = scrollAreaContext.viewport;
|
|
590
584
|
if (viewport) {
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
onThumbPositionChange();
|
|
603
|
-
}
|
|
604
|
-
};
|
|
605
|
-
onThumbPositionChange();
|
|
606
|
-
viewport.addEventListener('scroll', handleScroll);
|
|
607
|
-
return ()=>viewport.removeEventListener('scroll', handleScroll)
|
|
608
|
-
;
|
|
585
|
+
const handleScroll = () => {
|
|
586
|
+
debounceScrollEnd();
|
|
587
|
+
if (!removeUnlinkedScrollListenerRef.current) {
|
|
588
|
+
const listener = addUnlinkedScrollListener(viewport, onThumbPositionChange);
|
|
589
|
+
removeUnlinkedScrollListenerRef.current = listener;
|
|
590
|
+
onThumbPositionChange();
|
|
591
|
+
}
|
|
592
|
+
};
|
|
593
|
+
onThumbPositionChange();
|
|
594
|
+
viewport.addEventListener("scroll", handleScroll);
|
|
595
|
+
return () => viewport.removeEventListener("scroll", handleScroll);
|
|
609
596
|
}
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
width: 'var(--radix-scroll-area-thumb-width)',
|
|
621
|
-
height: 'var(--radix-scroll-area-thumb-height)',
|
|
597
|
+
}, [scrollAreaContext.viewport, debounceScrollEnd, onThumbPositionChange]);
|
|
598
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
599
|
+
import_react_primitive.Primitive.div,
|
|
600
|
+
{
|
|
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)",
|
|
622
607
|
...style
|
|
623
|
-
|
|
624
|
-
|
|
608
|
+
},
|
|
609
|
+
onPointerDownCapture: (0, import_primitive.composeEventHandlers)(props.onPointerDownCapture, (event) => {
|
|
625
610
|
const thumb = event.target;
|
|
626
611
|
const thumbRect = thumb.getBoundingClientRect();
|
|
627
612
|
const x = event.clientX - thumbRect.left;
|
|
628
613
|
const y = event.clientY - thumbRect.top;
|
|
629
|
-
scrollbarContext.onThumbPointerDown({
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
const [width1, setWidth] = $4huGU$react.useState(0);
|
|
658
|
-
const [height1, setHeight] = $4huGU$react.useState(0);
|
|
659
|
-
const hasSize = Boolean(width1 && height1);
|
|
660
|
-
$f8fcbf76d19b7361$var$useResizeObserver(context.scrollbarX, ()=>{
|
|
661
|
-
var _context$scrollbarX;
|
|
662
|
-
const height = ((_context$scrollbarX = context.scrollbarX) === null || _context$scrollbarX === void 0 ? void 0 : _context$scrollbarX.offsetHeight) || 0;
|
|
663
|
-
context.onCornerHeightChange(height);
|
|
664
|
-
setHeight(height);
|
|
614
|
+
scrollbarContext.onThumbPointerDown({ x, y });
|
|
615
|
+
}),
|
|
616
|
+
onPointerUp: (0, import_primitive.composeEventHandlers)(props.onPointerUp, scrollbarContext.onThumbPointerUp)
|
|
617
|
+
}
|
|
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;
|
|
629
|
+
}
|
|
630
|
+
);
|
|
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);
|
|
665
642
|
});
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
setWidth(width);
|
|
643
|
+
useResizeObserver(context.scrollbarY, () => {
|
|
644
|
+
const width2 = context.scrollbarY?.offsetWidth || 0;
|
|
645
|
+
context.onCornerWidthChange(width2);
|
|
646
|
+
setWidth(width2);
|
|
671
647
|
});
|
|
672
|
-
return hasSize ?
|
|
648
|
+
return hasSize ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
649
|
+
import_react_primitive.Primitive.div,
|
|
650
|
+
{
|
|
651
|
+
...cornerProps,
|
|
673
652
|
ref: forwardedRef,
|
|
674
653
|
style: {
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
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
|
|
682
661
|
}
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
662
|
+
}
|
|
663
|
+
) : null;
|
|
664
|
+
});
|
|
665
|
+
function toInt(value) {
|
|
686
666
|
return value ? parseInt(value, 10) : 0;
|
|
687
|
-
}
|
|
688
|
-
function
|
|
667
|
+
}
|
|
668
|
+
function getThumbRatio(viewportSize, contentSize) {
|
|
689
669
|
const ratio = viewportSize / contentSize;
|
|
690
670
|
return isNaN(ratio) ? 0 : ratio;
|
|
691
|
-
}
|
|
692
|
-
function
|
|
693
|
-
const ratio =
|
|
671
|
+
}
|
|
672
|
+
function getThumbSize(sizes) {
|
|
673
|
+
const ratio = getThumbRatio(sizes.viewport, sizes.content);
|
|
694
674
|
const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
|
|
695
|
-
const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;
|
|
675
|
+
const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;
|
|
696
676
|
return Math.max(thumbSize, 18);
|
|
697
|
-
}
|
|
698
|
-
function
|
|
699
|
-
const thumbSizePx =
|
|
677
|
+
}
|
|
678
|
+
function getScrollPositionFromPointer(pointerPos, pointerOffset, sizes, dir = "ltr") {
|
|
679
|
+
const thumbSizePx = getThumbSize(sizes);
|
|
700
680
|
const thumbCenter = thumbSizePx / 2;
|
|
701
681
|
const offset = pointerOffset || thumbCenter;
|
|
702
682
|
const thumbOffsetFromEnd = thumbSizePx - offset;
|
|
703
683
|
const minPointerPos = sizes.scrollbar.paddingStart + offset;
|
|
704
684
|
const maxPointerPos = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd;
|
|
705
685
|
const maxScrollPos = sizes.content - sizes.viewport;
|
|
706
|
-
const scrollRange = dir ===
|
|
707
|
-
|
|
708
|
-
maxScrollPos
|
|
709
|
-
] : [
|
|
710
|
-
maxScrollPos * -1,
|
|
711
|
-
0
|
|
712
|
-
];
|
|
713
|
-
const interpolate = $f8fcbf76d19b7361$var$linearScale([
|
|
714
|
-
minPointerPos,
|
|
715
|
-
maxPointerPos
|
|
716
|
-
], scrollRange);
|
|
686
|
+
const scrollRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
|
|
687
|
+
const interpolate = linearScale([minPointerPos, maxPointerPos], scrollRange);
|
|
717
688
|
return interpolate(pointerPos);
|
|
718
|
-
}
|
|
719
|
-
function
|
|
720
|
-
const thumbSizePx =
|
|
689
|
+
}
|
|
690
|
+
function getThumbOffsetFromScroll(scrollPos, sizes, dir = "ltr") {
|
|
691
|
+
const thumbSizePx = getThumbSize(sizes);
|
|
721
692
|
const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
|
|
722
693
|
const scrollbar = sizes.scrollbar.size - scrollbarPadding;
|
|
723
694
|
const maxScrollPos = sizes.content - sizes.viewport;
|
|
724
695
|
const maxThumbPos = scrollbar - thumbSizePx;
|
|
725
|
-
const scrollClampRange = dir ===
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
] : [
|
|
729
|
-
maxScrollPos * -1,
|
|
730
|
-
0
|
|
731
|
-
];
|
|
732
|
-
const scrollWithoutMomentum = $4huGU$radixuinumber.clamp(scrollPos, scrollClampRange);
|
|
733
|
-
const interpolate = $f8fcbf76d19b7361$var$linearScale([
|
|
734
|
-
0,
|
|
735
|
-
maxScrollPos
|
|
736
|
-
], [
|
|
737
|
-
0,
|
|
738
|
-
maxThumbPos
|
|
739
|
-
]);
|
|
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]);
|
|
740
699
|
return interpolate(scrollWithoutMomentum);
|
|
741
|
-
}
|
|
742
|
-
function
|
|
743
|
-
return (value)=>{
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
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]);
|
|
747
706
|
};
|
|
748
|
-
}
|
|
749
|
-
function
|
|
707
|
+
}
|
|
708
|
+
function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
|
|
750
709
|
return scrollPos > 0 && scrollPos < maxScrollPos;
|
|
751
|
-
}
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
let prevPosition = {
|
|
755
|
-
left: node.scrollLeft,
|
|
756
|
-
top: node.scrollTop
|
|
757
|
-
};
|
|
710
|
+
}
|
|
711
|
+
var addUnlinkedScrollListener = (node, handler = () => {
|
|
712
|
+
}) => {
|
|
713
|
+
let prevPosition = { left: node.scrollLeft, top: node.scrollTop };
|
|
758
714
|
let rAF = 0;
|
|
759
715
|
(function loop() {
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
if (isHorizontalScroll || isVerticalScroll) handler();
|
|
767
|
-
prevPosition = position;
|
|
768
|
-
rAF = window.requestAnimationFrame(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);
|
|
769
722
|
})();
|
|
770
|
-
return ()=>window.cancelAnimationFrame(rAF)
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
const
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
resizeObserver.unobserve(element);
|
|
805
|
-
};
|
|
806
|
-
}
|
|
807
|
-
}, [
|
|
808
|
-
element,
|
|
809
|
-
handleResize
|
|
810
|
-
]);
|
|
811
|
-
}
|
|
812
|
-
/* -----------------------------------------------------------------------------------------------*/ const $f8fcbf76d19b7361$export$be92b6f5f03c0fe9 = $f8fcbf76d19b7361$export$ccf8d8d7bbf3c2cc;
|
|
813
|
-
const $f8fcbf76d19b7361$export$d5c6c08dc2d3ca7 = $f8fcbf76d19b7361$export$a21cbf9f11fca853;
|
|
814
|
-
const $f8fcbf76d19b7361$export$9a4e88b92edfce6b = $f8fcbf76d19b7361$export$2fabd85d0eba3c57;
|
|
815
|
-
const $f8fcbf76d19b7361$export$6521433ed15a34db = $f8fcbf76d19b7361$export$9fba1154677d7cd2;
|
|
816
|
-
const $f8fcbf76d19b7361$export$ac61190d9fc311a9 = $f8fcbf76d19b7361$export$56969d565df7cc4b;
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
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]);
|
|
733
|
+
}
|
|
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
|
+
};
|
|
748
|
+
}
|
|
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
|
+
})();
|
|
821
757
|
//# sourceMappingURL=index.js.map
|