@radix-ui/react-scroll-area 1.0.6-rc.8 → 1.1.0-rc.1
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 +665 -730
- package/dist/index.js.map +7 -1
- package/dist/index.mjs +676 -743
- 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,756 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
|
|
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
|
+
(() => {
|
|
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
|
+
));
|
|
41
31
|
|
|
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");
|
|
42
43
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
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;
|
|
47
50
|
}, initialState);
|
|
48
|
-
}
|
|
51
|
+
}
|
|
49
52
|
|
|
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'
|
|
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
|
+
)
|
|
143
115
|
}
|
|
144
|
-
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
const
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
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)(
|
|
138
|
+
import_react_primitive.Primitive.div,
|
|
139
|
+
{
|
|
140
|
+
"data-radix-scroll-area-viewport": "",
|
|
141
|
+
...viewportProps,
|
|
142
|
+
ref: composedRefs,
|
|
143
|
+
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",
|
|
157
|
+
...props.style
|
|
158
|
+
},
|
|
159
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: context.onContentChange, style: { minWidth: "100%", display: "table" }, children })
|
|
160
|
+
}
|
|
161
|
+
)
|
|
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(() => {
|
|
158
174
|
isHorizontal ? onScrollbarXEnabledChange(true) : onScrollbarYEnabledChange(true);
|
|
159
|
-
return ()=>{
|
|
160
|
-
|
|
175
|
+
return () => {
|
|
176
|
+
isHorizontal ? onScrollbarXEnabledChange(false) : onScrollbarYEnabledChange(false);
|
|
161
177
|
};
|
|
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, {
|
|
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
|
+
}
|
|
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,
|
|
216
212
|
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
|
-
|
|
213
|
+
}
|
|
214
|
+
) });
|
|
215
|
+
});
|
|
216
|
+
var ScrollAreaScrollbarScroll = React2.forwardRef((props, forwardedRef) => {
|
|
217
|
+
const { forceMount, ...scrollbarProps } = props;
|
|
218
|
+
const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
|
|
219
|
+
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
|
+
}
|
|
242
238
|
});
|
|
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, {
|
|
239
|
+
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,
|
|
284
268
|
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
|
-
}
|
|
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
|
+
}
|
|
302
285
|
}, 10);
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
return
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
"data-state": visible ?
|
|
309
|
-
|
|
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,
|
|
310
293
|
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
|
-
}
|
|
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 }
|
|
326
306
|
});
|
|
327
|
-
const thumbRatio =
|
|
307
|
+
const thumbRatio = getThumbRatio(sizes.viewport, sizes.content);
|
|
328
308
|
const commonProps = {
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
,
|
|
337
|
-
onThumbPointerDown: (pointerPos)=>pointerOffsetRef.current = pointerPos
|
|
309
|
+
...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
|
|
338
316
|
};
|
|
339
317
|
function getScrollPosition(pointerPos, dir) {
|
|
340
|
-
|
|
318
|
+
return getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, dir);
|
|
341
319
|
}
|
|
342
|
-
if (orientation ===
|
|
343
|
-
|
|
344
|
-
|
|
320
|
+
if (orientation === "horizontal") {
|
|
321
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
322
|
+
ScrollAreaScrollbarX,
|
|
323
|
+
{
|
|
324
|
+
...commonProps,
|
|
325
|
+
ref: forwardedRef,
|
|
326
|
+
onThumbPositionChange: () => {
|
|
345
327
|
if (context.viewport && thumbRef.current) {
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
328
|
+
const scrollPos = context.viewport.scrollLeft;
|
|
329
|
+
const offset = getThumbOffsetFromScroll(scrollPos, sizes, context.dir);
|
|
330
|
+
thumbRef.current.style.transform = `translate3d(${offset}px, 0, 0)`;
|
|
349
331
|
}
|
|
350
|
-
|
|
351
|
-
|
|
332
|
+
},
|
|
333
|
+
onWheelScroll: (scrollPos) => {
|
|
352
334
|
if (context.viewport) context.viewport.scrollLeft = scrollPos;
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
if (context.viewport)
|
|
335
|
+
},
|
|
336
|
+
onDragScroll: (pointerPos) => {
|
|
337
|
+
if (context.viewport) {
|
|
338
|
+
context.viewport.scrollLeft = getScrollPosition(pointerPos, context.dir);
|
|
339
|
+
}
|
|
340
|
+
}
|
|
356
341
|
}
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
342
|
+
);
|
|
343
|
+
}
|
|
344
|
+
if (orientation === "vertical") {
|
|
345
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
346
|
+
ScrollAreaScrollbarY,
|
|
347
|
+
{
|
|
348
|
+
...commonProps,
|
|
349
|
+
ref: forwardedRef,
|
|
350
|
+
onThumbPositionChange: () => {
|
|
361
351
|
if (context.viewport && thumbRef.current) {
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
352
|
+
const scrollPos = context.viewport.scrollTop;
|
|
353
|
+
const offset = getThumbOffsetFromScroll(scrollPos, sizes);
|
|
354
|
+
thumbRef.current.style.transform = `translate3d(0, ${offset}px, 0)`;
|
|
365
355
|
}
|
|
366
|
-
|
|
367
|
-
|
|
356
|
+
},
|
|
357
|
+
onWheelScroll: (scrollPos) => {
|
|
368
358
|
if (context.viewport) context.viewport.scrollTop = scrollPos;
|
|
369
|
-
|
|
370
|
-
|
|
359
|
+
},
|
|
360
|
+
onDragScroll: (pointerPos) => {
|
|
371
361
|
if (context.viewport) context.viewport.scrollTop = getScrollPosition(pointerPos);
|
|
362
|
+
}
|
|
372
363
|
}
|
|
373
|
-
|
|
364
|
+
);
|
|
365
|
+
}
|
|
374
366
|
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
|
-
|
|
367
|
+
});
|
|
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]);
|
|
377
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
378
|
+
ScrollAreaScrollbarImpl,
|
|
379
|
+
{
|
|
380
|
+
"data-orientation": "horizontal",
|
|
381
|
+
...scrollbarProps,
|
|
390
382
|
ref: composeRefs,
|
|
391
|
-
sizes
|
|
383
|
+
sizes,
|
|
392
384
|
style: {
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
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
|
|
398
390
|
},
|
|
399
|
-
onThumbPointerDown: (pointerPos)=>props.onThumbPointerDown(pointerPos.x)
|
|
400
|
-
,
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
if ($f8fcbf76d19b7361$var$isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) event.preventDefault();
|
|
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();
|
|
408
399
|
}
|
|
400
|
+
}
|
|
409
401
|
},
|
|
410
|
-
onResize: ()=>{
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
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
|
+
}
|
|
419
412
|
});
|
|
413
|
+
}
|
|
420
414
|
}
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
const
|
|
426
|
-
const
|
|
427
|
-
const
|
|
428
|
-
const
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
415
|
+
}
|
|
416
|
+
);
|
|
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]);
|
|
427
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
428
|
+
ScrollAreaScrollbarImpl,
|
|
429
|
+
{
|
|
430
|
+
"data-orientation": "vertical",
|
|
431
|
+
...scrollbarProps,
|
|
437
432
|
ref: composeRefs,
|
|
438
|
-
sizes
|
|
433
|
+
sizes,
|
|
439
434
|
style: {
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
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
|
|
446
441
|
},
|
|
447
|
-
onThumbPointerDown: (pointerPos)=>props.onThumbPointerDown(pointerPos.y)
|
|
448
|
-
,
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
if ($f8fcbf76d19b7361$var$isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) event.preventDefault();
|
|
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();
|
|
456
450
|
}
|
|
451
|
+
}
|
|
457
452
|
},
|
|
458
|
-
onResize: ()=>{
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
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
|
+
}
|
|
467
463
|
});
|
|
464
|
+
}
|
|
468
465
|
}
|
|
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)
|
|
466
|
+
}
|
|
477
467
|
);
|
|
478
|
-
|
|
479
|
-
|
|
468
|
+
});
|
|
469
|
+
var [ScrollbarProvider, useScrollbarContext] = createScrollAreaContext(SCROLLBAR_NAME);
|
|
470
|
+
var ScrollAreaScrollbarImpl = React2.forwardRef((props, forwardedRef) => {
|
|
471
|
+
const {
|
|
472
|
+
__scopeScrollArea,
|
|
473
|
+
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("");
|
|
480
489
|
const viewport = context.viewport;
|
|
481
490
|
const maxScrollPos = sizes.content - sizes.viewport;
|
|
482
|
-
const handleWheelScroll =
|
|
483
|
-
const handleThumbPositionChange =
|
|
484
|
-
const handleResize =
|
|
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);
|
|
485
494
|
function handleDragScroll(event) {
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
y: y
|
|
492
|
-
});
|
|
493
|
-
}
|
|
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
|
+
}
|
|
494
500
|
}
|
|
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, {
|
|
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
|
+
{
|
|
526
516
|
scope: __scopeScrollArea,
|
|
527
|
-
scrollbar
|
|
528
|
-
hasThumb
|
|
529
|
-
onThumbChange:
|
|
530
|
-
onThumbPointerUp:
|
|
517
|
+
scrollbar,
|
|
518
|
+
hasThumb,
|
|
519
|
+
onThumbChange: (0, import_react_use_callback_ref.useCallbackRef)(onThumbChange),
|
|
520
|
+
onThumbPointerUp: (0, import_react_use_callback_ref.useCallbackRef)(onThumbPointerUp),
|
|
531
521
|
onThumbPositionChange: handleThumbPositionChange,
|
|
532
|
-
onThumbPointerDown:
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
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) {
|
|
542
532
|
const element = event.target;
|
|
543
533
|
element.setPointerCapture(event.pointerId);
|
|
544
|
-
rectRef.current = scrollbar.getBoundingClientRect();
|
|
545
|
-
// so we remove text selection manually when scrolling
|
|
534
|
+
rectRef.current = scrollbar.getBoundingClientRect();
|
|
546
535
|
prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;
|
|
547
|
-
document.body.style.webkitUserSelect =
|
|
548
|
-
if (context.viewport) context.viewport.style.scrollBehavior =
|
|
536
|
+
document.body.style.webkitUserSelect = "none";
|
|
537
|
+
if (context.viewport) context.viewport.style.scrollBehavior = "auto";
|
|
549
538
|
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)
|
|
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
|
+
})
|
|
551
|
+
}
|
|
552
|
+
)
|
|
553
|
+
}
|
|
580
554
|
);
|
|
581
|
-
|
|
582
|
-
|
|
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
|
+
}
|
|
563
|
+
);
|
|
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(() => {
|
|
583
576
|
if (removeUnlinkedScrollListenerRef.current) {
|
|
584
|
-
|
|
585
|
-
|
|
577
|
+
removeUnlinkedScrollListenerRef.current();
|
|
578
|
+
removeUnlinkedScrollListenerRef.current = void 0;
|
|
586
579
|
}
|
|
587
|
-
|
|
588
|
-
|
|
580
|
+
}, 100);
|
|
581
|
+
React2.useEffect(() => {
|
|
589
582
|
const viewport = scrollAreaContext.viewport;
|
|
590
583
|
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
|
-
;
|
|
584
|
+
const handleScroll = () => {
|
|
585
|
+
debounceScrollEnd();
|
|
586
|
+
if (!removeUnlinkedScrollListenerRef.current) {
|
|
587
|
+
const listener = addUnlinkedScrollListener(viewport, onThumbPositionChange);
|
|
588
|
+
removeUnlinkedScrollListenerRef.current = listener;
|
|
589
|
+
onThumbPositionChange();
|
|
590
|
+
}
|
|
591
|
+
};
|
|
592
|
+
onThumbPositionChange();
|
|
593
|
+
viewport.addEventListener("scroll", handleScroll);
|
|
594
|
+
return () => viewport.removeEventListener("scroll", handleScroll);
|
|
609
595
|
}
|
|
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)',
|
|
596
|
+
}, [scrollAreaContext.viewport, debounceScrollEnd, onThumbPositionChange]);
|
|
597
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
598
|
+
import_react_primitive.Primitive.div,
|
|
599
|
+
{
|
|
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)",
|
|
622
606
|
...style
|
|
623
|
-
|
|
624
|
-
|
|
607
|
+
},
|
|
608
|
+
onPointerDownCapture: (0, import_primitive.composeEventHandlers)(props.onPointerDownCapture, (event) => {
|
|
625
609
|
const thumb = event.target;
|
|
626
610
|
const thumbRect = thumb.getBoundingClientRect();
|
|
627
611
|
const x = event.clientX - thumbRect.left;
|
|
628
612
|
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);
|
|
613
|
+
scrollbarContext.onThumbPointerDown({ x, y });
|
|
614
|
+
}),
|
|
615
|
+
onPointerUp: (0, import_primitive.composeEventHandlers)(props.onPointerUp, scrollbarContext.onThumbPointerUp)
|
|
616
|
+
}
|
|
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;
|
|
628
|
+
}
|
|
629
|
+
);
|
|
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);
|
|
665
641
|
});
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
setWidth(width);
|
|
642
|
+
useResizeObserver(context.scrollbarY, () => {
|
|
643
|
+
const width2 = context.scrollbarY?.offsetWidth || 0;
|
|
644
|
+
context.onCornerWidthChange(width2);
|
|
645
|
+
setWidth(width2);
|
|
671
646
|
});
|
|
672
|
-
return hasSize ?
|
|
647
|
+
return hasSize ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
648
|
+
import_react_primitive.Primitive.div,
|
|
649
|
+
{
|
|
650
|
+
...cornerProps,
|
|
673
651
|
ref: forwardedRef,
|
|
674
652
|
style: {
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
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
|
|
682
660
|
}
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
661
|
+
}
|
|
662
|
+
) : null;
|
|
663
|
+
});
|
|
664
|
+
function toInt(value) {
|
|
686
665
|
return value ? parseInt(value, 10) : 0;
|
|
687
|
-
}
|
|
688
|
-
function
|
|
666
|
+
}
|
|
667
|
+
function getThumbRatio(viewportSize, contentSize) {
|
|
689
668
|
const ratio = viewportSize / contentSize;
|
|
690
669
|
return isNaN(ratio) ? 0 : ratio;
|
|
691
|
-
}
|
|
692
|
-
function
|
|
693
|
-
const ratio =
|
|
670
|
+
}
|
|
671
|
+
function getThumbSize(sizes) {
|
|
672
|
+
const ratio = getThumbRatio(sizes.viewport, sizes.content);
|
|
694
673
|
const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
|
|
695
|
-
const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;
|
|
674
|
+
const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;
|
|
696
675
|
return Math.max(thumbSize, 18);
|
|
697
|
-
}
|
|
698
|
-
function
|
|
699
|
-
const thumbSizePx =
|
|
676
|
+
}
|
|
677
|
+
function getScrollPositionFromPointer(pointerPos, pointerOffset, sizes, dir = "ltr") {
|
|
678
|
+
const thumbSizePx = getThumbSize(sizes);
|
|
700
679
|
const thumbCenter = thumbSizePx / 2;
|
|
701
680
|
const offset = pointerOffset || thumbCenter;
|
|
702
681
|
const thumbOffsetFromEnd = thumbSizePx - offset;
|
|
703
682
|
const minPointerPos = sizes.scrollbar.paddingStart + offset;
|
|
704
683
|
const maxPointerPos = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd;
|
|
705
684
|
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);
|
|
685
|
+
const scrollRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
|
|
686
|
+
const interpolate = linearScale([minPointerPos, maxPointerPos], scrollRange);
|
|
717
687
|
return interpolate(pointerPos);
|
|
718
|
-
}
|
|
719
|
-
function
|
|
720
|
-
const thumbSizePx =
|
|
688
|
+
}
|
|
689
|
+
function getThumbOffsetFromScroll(scrollPos, sizes, dir = "ltr") {
|
|
690
|
+
const thumbSizePx = getThumbSize(sizes);
|
|
721
691
|
const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
|
|
722
692
|
const scrollbar = sizes.scrollbar.size - scrollbarPadding;
|
|
723
693
|
const maxScrollPos = sizes.content - sizes.viewport;
|
|
724
694
|
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
|
-
]);
|
|
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]);
|
|
740
698
|
return interpolate(scrollWithoutMomentum);
|
|
741
|
-
}
|
|
742
|
-
function
|
|
743
|
-
return (value)=>{
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
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]);
|
|
747
705
|
};
|
|
748
|
-
}
|
|
749
|
-
function
|
|
706
|
+
}
|
|
707
|
+
function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
|
|
750
708
|
return scrollPos > 0 && scrollPos < maxScrollPos;
|
|
751
|
-
}
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
let prevPosition = {
|
|
755
|
-
left: node.scrollLeft,
|
|
756
|
-
top: node.scrollTop
|
|
757
|
-
};
|
|
709
|
+
}
|
|
710
|
+
var addUnlinkedScrollListener = (node, handler = () => {
|
|
711
|
+
}) => {
|
|
712
|
+
let prevPosition = { left: node.scrollLeft, top: node.scrollTop };
|
|
758
713
|
let rAF = 0;
|
|
759
714
|
(function loop() {
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
if (isHorizontalScroll || isVerticalScroll) handler();
|
|
767
|
-
prevPosition = position;
|
|
768
|
-
rAF = window.requestAnimationFrame(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);
|
|
769
721
|
})();
|
|
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
|
-
|
|
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]);
|
|
732
|
+
}
|
|
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
|
+
};
|
|
747
|
+
}
|
|
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
|
+
})();
|
|
821
756
|
//# sourceMappingURL=index.js.map
|