@ehfuse/overlay-scrollbar 1.7.29 → 1.7.31
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/LICENSE +21 -21
- package/README.md +160 -160
- package/dist/OverlayScrollbar.d.ts.map +1 -1
- package/dist/index.esm.js +3 -3
- package/dist/index.esm.js.map +3 -3
- package/dist/index.js +3 -3
- package/dist/index.js.map +3 -3
- package/package.json +1 -1
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2025 KIM YOUNG JIN
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 KIM YOUNG JIN
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,160 +1,160 @@
|
|
|
1
|
-
# OverlayScrollbar
|
|
2
|
-
|
|
3
|
-
A highly customizable React component that provides a beautiful overlay scrollbar with extensive styling options, interactive features, and smooth animations.
|
|
4
|
-
|
|
5
|
-
다양한 스타일링 옵션, 인터랙티브 기능, 부드러운 애니메이션을 제공하는 고도로 커스터마이징 가능한 React 오버레이 스크롤바 컴포넌트입니다.
|
|
6
|
-
|
|
7
|
-
## 📚 Documentation
|
|
8
|
-
|
|
9
|
-
- **[Getting Started (English)](https://github.com/ehfuse/overlay-scrollbar/blob/main/docs/getting-started-en.md)** - Complete setup and usage guide
|
|
10
|
-
- **[시작하기 (한국어)](https://github.com/ehfuse/overlay-scrollbar/blob/main/docs/getting-started-ko.md)** - 설치 및 사용법 가이드
|
|
11
|
-
|
|
12
|
-
## ✨ Key Features
|
|
13
|
-
|
|
14
|
-
- 🎨 **Fully Customizable** - Control colors, sizes, radius, and positioning
|
|
15
|
-
- 🖱️ **Drag Scroll** - Mouse drag scrolling with smart UI library exclusion
|
|
16
|
-
- 🏹 **Arrow Navigation** - Optional arrow buttons for precise control
|
|
17
|
-
- ⚡ **Smooth Animations** - Fade transitions and hover effects
|
|
18
|
-
- 🔍 **Smart Auto-hide** - Intelligent visibility management
|
|
19
|
-
- 🧠 **Smart Input Detection** - Excludes interactive elements automatically
|
|
20
|
-
- 🤖 **Auto-Detection** - Automatically finds scrollable containers (Virtuoso, react-window, etc.)
|
|
21
|
-
- 🔧 **TypeScript** - Complete type definitions
|
|
22
|
-
- 🪶 **Zero Dependencies** - Only requires React
|
|
23
|
-
- ♿ **Accessible** - Preserves native scroll behavior
|
|
24
|
-
|
|
25
|
-
## ✨ 주요 기능
|
|
26
|
-
|
|
27
|
-
- 🎨 **완전한 커스터마이징** - 색상, 크기, 둥근 모서리, 위치 제어
|
|
28
|
-
- 🖱️ **드래그 스크롤** - UI 라이브러리 스마트 제외 기능을 가진 마우스 드래그 스크롤
|
|
29
|
-
- 🏹 **화살표 내비게이션** - 정밀한 제어를 위한 선택적 화살표 버튼
|
|
30
|
-
- ⚡ **부드러운 애니메이션** - 페이드 전환 및 호버 효과
|
|
31
|
-
- 🔍 **스마트 자동 숨김** - 지능적인 표시 관리
|
|
32
|
-
- 🧠 **스마트 입력 감지** - 인터랙티브 요소 자동 제외
|
|
33
|
-
- 🤖 **자동 감지** - 스크롤 가능한 컨테이너 자동 검색 (Virtuoso, react-window 등)
|
|
34
|
-
- 🔧 **TypeScript** - 완전한 타입 정의
|
|
35
|
-
- 🪶 **의존성 없음** - React만 필요
|
|
36
|
-
- ♿ **접근성** - 기본 스크롤 동작 보존
|
|
37
|
-
|
|
38
|
-
## 🚀 Installation
|
|
39
|
-
|
|
40
|
-
```bash
|
|
41
|
-
npm install @ehfuse/overlay-scrollbar
|
|
42
|
-
# or
|
|
43
|
-
yarn add @ehfuse/overlay-scrollbar
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
## 📖 Quick Start
|
|
47
|
-
|
|
48
|
-
```tsx
|
|
49
|
-
import React from "react";
|
|
50
|
-
import { OverlayScrollbar } from "@ehfuse/overlay-scrollbar";
|
|
51
|
-
|
|
52
|
-
function App() {
|
|
53
|
-
return (
|
|
54
|
-
<div style={{ height: "400px" }}>
|
|
55
|
-
<OverlayScrollbar
|
|
56
|
-
thumb={{
|
|
57
|
-
width: 8,
|
|
58
|
-
color: "rgba(100, 100, 100, 0.7)",
|
|
59
|
-
}}
|
|
60
|
-
dragScroll={{
|
|
61
|
-
enabled: true,
|
|
62
|
-
excludeClasses: ["no-drag"],
|
|
63
|
-
}}
|
|
64
|
-
>
|
|
65
|
-
<div style={{ height: "1000px" }}>
|
|
66
|
-
<p>Your scrollable content here...</p>
|
|
67
|
-
<input type="text" placeholder="Auto-excluded from drag" />
|
|
68
|
-
</div>
|
|
69
|
-
</OverlayScrollbar>
|
|
70
|
-
</div>
|
|
71
|
-
);
|
|
72
|
-
}
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
## 🎯 Main API
|
|
76
|
-
|
|
77
|
-
### Configuration Objects (v1.4.0+)
|
|
78
|
-
|
|
79
|
-
```tsx
|
|
80
|
-
interface OverlayScrollbarProps {
|
|
81
|
-
children: ReactNode;
|
|
82
|
-
className?: string;
|
|
83
|
-
style?: React.CSSProperties; // Wrapper div styles
|
|
84
|
-
containerStyle?: React.CSSProperties; // Scroll container div styles
|
|
85
|
-
contentStyle?: React.CSSProperties; // Inner content div styles
|
|
86
|
-
onScroll?: (event: Event) => void;
|
|
87
|
-
|
|
88
|
-
// Grouped configuration objects
|
|
89
|
-
thumb?: ThumbConfig; // Scrollbar thumb settings
|
|
90
|
-
track?: TrackConfig; // Track area settings
|
|
91
|
-
arrows?: ArrowsConfig; // Arrow buttons settings
|
|
92
|
-
dragScroll?: DragScrollConfig; // Drag scroll settings
|
|
93
|
-
autoHide?: AutoHideConfig; // Auto-hide behavior settings
|
|
94
|
-
pullToRefresh?: PullToRefreshConfig; // Pull-to-refresh settings (touch only, v1.7.0+)
|
|
95
|
-
|
|
96
|
-
// General settings
|
|
97
|
-
showScrollbar?: boolean; // Show scrollbar (default: true)
|
|
98
|
-
showHorizontalScrollbar?: boolean; // Show bottom horizontal scrollbar (default: true)
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
interface AutoHideConfig {
|
|
102
|
-
enabled?: boolean; // Enable auto-hide (default: true)
|
|
103
|
-
delay?: number; // Auto-hide delay (default: 1500ms)
|
|
104
|
-
delayOnWheel?: number; // Quick hide after wheel (default: 700ms)
|
|
105
|
-
initialDelay?: number; // Delay before showing scrollbar on mount (default: 200ms)
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
interface TrackConfig {
|
|
109
|
-
alignment?: "default" | "outside"; // Track alignment (default: "outside")
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
interface DragScrollConfig {
|
|
113
|
-
enabled?: boolean; // Enable mouse drag scrolling (default: true)
|
|
114
|
-
excludeClasses?: string[];
|
|
115
|
-
excludeSelectors?: string[];
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
interface PullToRefreshConfig {
|
|
119
|
-
enabled?: boolean; // Enable pull-to-refresh (default: true, requires onRefresh)
|
|
120
|
-
onRefresh?: () => void | Promise<void>; // Refresh callback — spinner stays until the Promise resolves
|
|
121
|
-
threshold?: number; // Pull distance to trigger refresh on release (default: 80px)
|
|
122
|
-
maxDistance?: number; // Max indicator travel distance (default: threshold * 2)
|
|
123
|
-
indicatorColor?: string; // Arrow/spinner color (default: "#1976d2")
|
|
124
|
-
}
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
### Pull to Refresh (v1.7.0+)
|
|
128
|
-
|
|
129
|
-
When the scroll container is at the top, pulling down (touch gesture) shows an
|
|
130
|
-
indicator that follows the finger. Releasing past the threshold triggers `onRefresh`.
|
|
131
|
-
|
|
132
|
-
```tsx
|
|
133
|
-
<OverlayScrollbar
|
|
134
|
-
pullToRefresh={{
|
|
135
|
-
onRefresh: async () => {
|
|
136
|
-
await reloadList(); // spinner stays visible until this resolves
|
|
137
|
-
},
|
|
138
|
-
// enabled: false, // turn the gesture off without removing the prop
|
|
139
|
-
}}
|
|
140
|
-
>
|
|
141
|
-
{items.map((item) => (
|
|
142
|
-
<ListItem key={item.id} {...item} />
|
|
143
|
-
))}
|
|
144
|
-
</OverlayScrollbar>
|
|
145
|
-
```
|
|
146
|
-
|
|
147
|
-
## 🌍 Browser Support
|
|
148
|
-
|
|
149
|
-
- Chrome/Edge: Full support
|
|
150
|
-
- Firefox: Full support
|
|
151
|
-
- Safari: Full support
|
|
152
|
-
- Mobile: Touch scrolling supported
|
|
153
|
-
|
|
154
|
-
## 📄 License
|
|
155
|
-
|
|
156
|
-
MIT © [KIM YOUNG JIN](mailto:ehfuse@gmail.com)
|
|
157
|
-
|
|
158
|
-
## 🐛 Issues
|
|
159
|
-
|
|
160
|
-
If you find any bugs or have feature requests, please create an issue on [GitHub](https://github.com/ehfuse/overlay-scrollbar/issues).
|
|
1
|
+
# OverlayScrollbar
|
|
2
|
+
|
|
3
|
+
A highly customizable React component that provides a beautiful overlay scrollbar with extensive styling options, interactive features, and smooth animations.
|
|
4
|
+
|
|
5
|
+
다양한 스타일링 옵션, 인터랙티브 기능, 부드러운 애니메이션을 제공하는 고도로 커스터마이징 가능한 React 오버레이 스크롤바 컴포넌트입니다.
|
|
6
|
+
|
|
7
|
+
## 📚 Documentation
|
|
8
|
+
|
|
9
|
+
- **[Getting Started (English)](https://github.com/ehfuse/overlay-scrollbar/blob/main/docs/getting-started-en.md)** - Complete setup and usage guide
|
|
10
|
+
- **[시작하기 (한국어)](https://github.com/ehfuse/overlay-scrollbar/blob/main/docs/getting-started-ko.md)** - 설치 및 사용법 가이드
|
|
11
|
+
|
|
12
|
+
## ✨ Key Features
|
|
13
|
+
|
|
14
|
+
- 🎨 **Fully Customizable** - Control colors, sizes, radius, and positioning
|
|
15
|
+
- 🖱️ **Drag Scroll** - Mouse drag scrolling with smart UI library exclusion
|
|
16
|
+
- 🏹 **Arrow Navigation** - Optional arrow buttons for precise control
|
|
17
|
+
- ⚡ **Smooth Animations** - Fade transitions and hover effects
|
|
18
|
+
- 🔍 **Smart Auto-hide** - Intelligent visibility management
|
|
19
|
+
- 🧠 **Smart Input Detection** - Excludes interactive elements automatically
|
|
20
|
+
- 🤖 **Auto-Detection** - Automatically finds scrollable containers (Virtuoso, react-window, etc.)
|
|
21
|
+
- 🔧 **TypeScript** - Complete type definitions
|
|
22
|
+
- 🪶 **Zero Dependencies** - Only requires React
|
|
23
|
+
- ♿ **Accessible** - Preserves native scroll behavior
|
|
24
|
+
|
|
25
|
+
## ✨ 주요 기능
|
|
26
|
+
|
|
27
|
+
- 🎨 **완전한 커스터마이징** - 색상, 크기, 둥근 모서리, 위치 제어
|
|
28
|
+
- 🖱️ **드래그 스크롤** - UI 라이브러리 스마트 제외 기능을 가진 마우스 드래그 스크롤
|
|
29
|
+
- 🏹 **화살표 내비게이션** - 정밀한 제어를 위한 선택적 화살표 버튼
|
|
30
|
+
- ⚡ **부드러운 애니메이션** - 페이드 전환 및 호버 효과
|
|
31
|
+
- 🔍 **스마트 자동 숨김** - 지능적인 표시 관리
|
|
32
|
+
- 🧠 **스마트 입력 감지** - 인터랙티브 요소 자동 제외
|
|
33
|
+
- 🤖 **자동 감지** - 스크롤 가능한 컨테이너 자동 검색 (Virtuoso, react-window 등)
|
|
34
|
+
- 🔧 **TypeScript** - 완전한 타입 정의
|
|
35
|
+
- 🪶 **의존성 없음** - React만 필요
|
|
36
|
+
- ♿ **접근성** - 기본 스크롤 동작 보존
|
|
37
|
+
|
|
38
|
+
## 🚀 Installation
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
npm install @ehfuse/overlay-scrollbar
|
|
42
|
+
# or
|
|
43
|
+
yarn add @ehfuse/overlay-scrollbar
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## 📖 Quick Start
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
import React from "react";
|
|
50
|
+
import { OverlayScrollbar } from "@ehfuse/overlay-scrollbar";
|
|
51
|
+
|
|
52
|
+
function App() {
|
|
53
|
+
return (
|
|
54
|
+
<div style={{ height: "400px" }}>
|
|
55
|
+
<OverlayScrollbar
|
|
56
|
+
thumb={{
|
|
57
|
+
width: 8,
|
|
58
|
+
color: "rgba(100, 100, 100, 0.7)",
|
|
59
|
+
}}
|
|
60
|
+
dragScroll={{
|
|
61
|
+
enabled: true,
|
|
62
|
+
excludeClasses: ["no-drag"],
|
|
63
|
+
}}
|
|
64
|
+
>
|
|
65
|
+
<div style={{ height: "1000px" }}>
|
|
66
|
+
<p>Your scrollable content here...</p>
|
|
67
|
+
<input type="text" placeholder="Auto-excluded from drag" />
|
|
68
|
+
</div>
|
|
69
|
+
</OverlayScrollbar>
|
|
70
|
+
</div>
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## 🎯 Main API
|
|
76
|
+
|
|
77
|
+
### Configuration Objects (v1.4.0+)
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
interface OverlayScrollbarProps {
|
|
81
|
+
children: ReactNode;
|
|
82
|
+
className?: string;
|
|
83
|
+
style?: React.CSSProperties; // Wrapper div styles
|
|
84
|
+
containerStyle?: React.CSSProperties; // Scroll container div styles
|
|
85
|
+
contentStyle?: React.CSSProperties; // Inner content div styles
|
|
86
|
+
onScroll?: (event: Event) => void;
|
|
87
|
+
|
|
88
|
+
// Grouped configuration objects
|
|
89
|
+
thumb?: ThumbConfig; // Scrollbar thumb settings
|
|
90
|
+
track?: TrackConfig; // Track area settings
|
|
91
|
+
arrows?: ArrowsConfig; // Arrow buttons settings
|
|
92
|
+
dragScroll?: DragScrollConfig; // Drag scroll settings
|
|
93
|
+
autoHide?: AutoHideConfig; // Auto-hide behavior settings
|
|
94
|
+
pullToRefresh?: PullToRefreshConfig; // Pull-to-refresh settings (touch only, v1.7.0+)
|
|
95
|
+
|
|
96
|
+
// General settings
|
|
97
|
+
showScrollbar?: boolean; // Show scrollbar (default: true)
|
|
98
|
+
showHorizontalScrollbar?: boolean; // Show bottom horizontal scrollbar (default: true)
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
interface AutoHideConfig {
|
|
102
|
+
enabled?: boolean; // Enable auto-hide (default: true)
|
|
103
|
+
delay?: number; // Auto-hide delay (default: 1500ms)
|
|
104
|
+
delayOnWheel?: number; // Quick hide after wheel (default: 700ms)
|
|
105
|
+
initialDelay?: number; // Delay before showing scrollbar on mount (default: 200ms)
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
interface TrackConfig {
|
|
109
|
+
alignment?: "default" | "outside"; // Track alignment (default: "outside")
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
interface DragScrollConfig {
|
|
113
|
+
enabled?: boolean; // Enable mouse drag scrolling (default: true)
|
|
114
|
+
excludeClasses?: string[];
|
|
115
|
+
excludeSelectors?: string[];
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
interface PullToRefreshConfig {
|
|
119
|
+
enabled?: boolean; // Enable pull-to-refresh (default: true, requires onRefresh)
|
|
120
|
+
onRefresh?: () => void | Promise<void>; // Refresh callback — spinner stays until the Promise resolves
|
|
121
|
+
threshold?: number; // Pull distance to trigger refresh on release (default: 80px)
|
|
122
|
+
maxDistance?: number; // Max indicator travel distance (default: threshold * 2)
|
|
123
|
+
indicatorColor?: string; // Arrow/spinner color (default: "#1976d2")
|
|
124
|
+
}
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
### Pull to Refresh (v1.7.0+)
|
|
128
|
+
|
|
129
|
+
When the scroll container is at the top, pulling down (touch gesture) shows an
|
|
130
|
+
indicator that follows the finger. Releasing past the threshold triggers `onRefresh`.
|
|
131
|
+
|
|
132
|
+
```tsx
|
|
133
|
+
<OverlayScrollbar
|
|
134
|
+
pullToRefresh={{
|
|
135
|
+
onRefresh: async () => {
|
|
136
|
+
await reloadList(); // spinner stays visible until this resolves
|
|
137
|
+
},
|
|
138
|
+
// enabled: false, // turn the gesture off without removing the prop
|
|
139
|
+
}}
|
|
140
|
+
>
|
|
141
|
+
{items.map((item) => (
|
|
142
|
+
<ListItem key={item.id} {...item} />
|
|
143
|
+
))}
|
|
144
|
+
</OverlayScrollbar>
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
## 🌍 Browser Support
|
|
148
|
+
|
|
149
|
+
- Chrome/Edge: Full support
|
|
150
|
+
- Firefox: Full support
|
|
151
|
+
- Safari: Full support
|
|
152
|
+
- Mobile: Touch scrolling supported
|
|
153
|
+
|
|
154
|
+
## 📄 License
|
|
155
|
+
|
|
156
|
+
MIT © [KIM YOUNG JIN](mailto:ehfuse@gmail.com)
|
|
157
|
+
|
|
158
|
+
## 🐛 Issues
|
|
159
|
+
|
|
160
|
+
If you find any bugs or have feature requests, please create an issue on [GitHub](https://github.com/ehfuse/overlay-scrollbar/issues).
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverlayScrollbar.d.ts","sourceRoot":"","sources":["../src/OverlayScrollbar.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"OverlayScrollbar.d.ts","sourceRoot":"","sources":["../src/OverlayScrollbar.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{useRef as O,useEffect as W,useState as g,useCallback as v,useMemo as he,forwardRef as uo,useImperativeHandle as fo,useLayoutEffect as po,useId as ho}from"react";var ro=["editor","textarea","input","select","textfield","form-control","contenteditable","MuiInputBase-input","MuiSelect-select","MuiOutlinedInput-input","MuiFilledInput-input","MuiInput-input","MuiFormControl-root","MuiTextField-root","MuiSelect-root","MuiOutlinedInput-root","MuiFilledInput-root","MuiInput-root","MuiAutocomplete-input","MuiDatePicker-input","MuiSlider-thumb","MuiSlider-rail","MuiSlider-track","MuiSlider-mark","MuiSlider-markLabel","MuiSlider-root","MuiSlider-colorPrimary","MuiSlider-sizeMedium","MuiIconButton-root","MuiButton-root","MuiButtonBase-root","MuiTouchRipple-root","MuiCheckbox-root","MuiRadio-root","MuiSwitch-root","PrivateSwitchBase-root","ant-input","ant-input-affix-wrapper","ant-input-group-addon","ant-input-number","ant-input-number-handler","ant-select","ant-select-selector","ant-select-selection-search","ant-select-dropdown","ant-cascader","ant-cascader-input","ant-picker","ant-picker-input","ant-time-picker","ant-calendar-picker","ant-slider","ant-slider-track","ant-slider-handle","ant-switch","ant-checkbox","ant-checkbox-wrapper","ant-radio","ant-radio-wrapper","ant-rate","ant-upload","ant-upload-drag","ant-form-item","ant-form-item-control","ant-btn","ant-dropdown","ant-dropdown-trigger","ant-menu","ant-menu-item","ant-tooltip","ant-popover","ant-modal","ant-drawer","ant-tree-select","ant-auto-complete","ant-mentions","ant-transfer","ui-input","ui-textarea","ui-select","ui-select-trigger","ui-select-content","ui-select-item","ui-button","ui-checkbox","ui-radio-group","ui-switch","ui-slider","ui-range-slider","ui-calendar","ui-date-picker","ui-combobox","ui-command","ui-command-input","ui-popover","ui-dialog","ui-sheet","ui-dropdown-menu","ui-context-menu","ui-menubar","ui-navigation-menu","ui-form","ui-form-control","ui-form-item","ui-form-field","ui-label","radix-ui","radix-select","radix-dropdown","radix-dialog","radix-popover","radix-accordion","radix-tabs","radix-slider","radix-switch","radix-checkbox","radix-radio","ql-editor","ql-container","ql-toolbar","ql-picker","ql-picker-label","ql-picker-options","ql-formats","ql-snow","ql-bubble","quill","quilleditor","monaco-editor","monaco-editor-background","view-lines","decorationsOverviewRuler","monaco-scrollable-element","CodeMirror","CodeMirror-code","CodeMirror-lines","CodeMirror-scroll","CodeMirror-sizer","cm-editor","cm-focused","cm-content","tox-editor-container","tox-editor-header","tox-edit-area","tox-tinymce","mce-content-body","ck-editor","ck-content","ck-toolbar","ck-editor__editable","ck-widget","slate-editor","slate-content","DraftEditor-root","DraftEditor-editorContainer","public-DraftEditor-content","ehfuse-editor","ehfuse-editor-wrapper","ehfuse-editor-content","ehfuse-toolbar","ehfuse-toolbar-group","ehfuse-cursor","text-editor","rich-text-editor","wysiwyg","ace_editor","ace_content"],We=(r,s)=>{if(r instanceof HTMLElement&&r.isContentEditable||r.closest('[role="textbox"],[role="searchbox"]'))return!0;let f=r.tagName.toLowerCase();if(f==="input"){let c=(r.type||"text").toLowerCase();return!["button","submit","reset","image","hidden"].includes(c)}if(["textarea","select","button"].includes(f)||["svg","path","circle","rect","line","polygon","polyline"].includes(f)||r.getAttribute("contenteditable")==="true")return!0;if(s?.excludeSelectors){for(let c of s.excludeSelectors)if(r.matches(c))return!0}return no(r,s)},no=(r,s)=>{let f=[...ro,...s?.excludeClasses||[]],c=r,C=0,S=5;for(;c&&C<=S;){if(f.some(k=>c.classList.contains(k)))return!0;if(c.classList.contains("MuiDialogContent-root"))break;c=c.parentElement,C++}return!1};var lo=r=>{if(r==null)return null;if(typeof r=="number")return Number.isFinite(r)?r:null;let s=r.trim();if(s==="")return null;let f=/^(-?\d*\.?\d+)(px)?$/.exec(s);if(!f)return null;let c=Number.parseFloat(f[1]);return Number.isFinite(c)?c:null},io=r=>{if(r==null)return;if(typeof r=="number")return r;let s=r.trim().split(/\s+/);if(!(s.length===0||s[0]===""))return s.length===1||s.length===2?s[0]:s[2]},ao=r=>{let s=typeof r=="number"?[`${r}px`]:r.trim().split(/\s+/),[f,c=f,C=f,S=c]=s;return`${f} ${c} 0 ${S}`},tt=r=>{if(!r)return{style:r,spacerHeight:0};let s=r.paddingBottom!==void 0,f=r.padding!==void 0;if(!s&&!f)return{style:r,spacerHeight:0};let c=s?r.paddingBottom:io(r.padding),C=lo(c);if(C===null||C<=0)return{style:r,spacerHeight:0};let S={...r};return f&&r.padding!==void 0&&(S.padding=ao(r.padding)),s&&(S.paddingBottom=0),{style:S,spacerHeight:C}};import{useEffect as wt,useRef as ne,useState as St}from"react";var Et=({containerRef:r,config:s})=>{let f=s.enabled??!0,c=s.threshold??80,C=s.maxDistance??c*2,S=s.onRefresh,[k,P]=St(0),[z,q]=St(!1),B=ne(0),me=ne(0),Y=ne(!1),J=ne(!1),le=ne(!1),j=ne(0),ie=ne(!1);return wt(()=>{ie.current=z},[z]),wt(()=>{let H=r.current;if(!H||!(f&&typeof S=="function"))return;let He=p=>{let D=p instanceof Element?p:null;for(;D&&D!==H;){if(D instanceof HTMLElement&&D.scrollHeight>D.clientHeight+1&&D.scrollTop>0)return!1;D=D.parentElement}return!0},ze=p=>{Y.current=!1,J.current=!1,le.current=!1,!ie.current&&p.touches.length===1&&H.scrollTop===0&&He(p.target)&&(Y.current=!0,B.current=p.touches[0].clientY,me.current=p.touches[0].clientX)},ee=p=>{if(!Y.current||ie.current||p.touches.length!==1)return;let D=p.touches[0].clientY-B.current,Ae=p.touches[0].clientX-me.current;if(!J.current){if(D<=0||H.scrollTop>0){Y.current=!1;return}if(D>8&&D>Math.abs(Ae))J.current=!0,le.current=H.scrollTop<0;else return}!le.current&&p.cancelable&&p.preventDefault();let se=Math.min(Math.max(D,0)*.5,C);j.current=se,P(se)},G=()=>{if(!Y.current||(Y.current=!1,!J.current))return;J.current=!1,le.current=!1;let p=j.current;j.current=0,p>=c&&!ie.current?(q(!0),P(c),Promise.resolve().then(()=>S()).catch(()=>{}).finally(()=>{q(!1),P(0)})):P(0)};return H.addEventListener("touchstart",ze,{passive:!0}),H.addEventListener("touchmove",ee,{passive:!1}),H.addEventListener("touchend",G,{passive:!0}),H.addEventListener("touchcancel",G,{passive:!0}),()=>{H.removeEventListener("touchstart",ze),H.removeEventListener("touchmove",ee),H.removeEventListener("touchend",G),H.removeEventListener("touchcancel",G)}},[r,f,S,c,C]),{pullDistance:k,isRefreshing:z,pullProgress:Math.min(k/c,1),pullThreshold:c}};import{useEffect as so,useState as co}from"react";function Mt(){let[r,s]=co(()=>typeof window>"u"||typeof window.matchMedia!="function"?!1:window.matchMedia("(pointer: coarse)").matches);return so(()=>{if(typeof window>"u"||typeof window.matchMedia!="function")return;let f=window.matchMedia("(pointer: coarse)"),c=C=>s(C.matches);return s(f.matches),typeof f.addEventListener=="function"?(f.addEventListener("change",c),()=>f.removeEventListener("change",c)):(f.addListener(c),()=>f.removeListener(c))},[]),r}import{jsx as R,jsxs as Ce}from"react/jsx-runtime";var mo={},bo={},go={},vo={},yo={},xo={},To=uo(({className:r="",style:s={},containerStyle:f={},contentStyle:c={},children:C,onScroll:S,thumb:k=mo,track:P=bo,arrows:z=go,dragScroll:q=vo,autoHide:B=yo,pullToRefresh:me=xo,showScrollbar:Y=!0,showHorizontalScrollbar:J=!0,detectInnerScroll:le=!1,scrollTopFab:j=!1},ie)=>{let H=Mt(),ae=Y,He=H?!1:J,ee=`os-${ho().replace(/[^a-zA-Z0-9_-]/g,"")}`,G=j!==!1&&j!=null,p=typeof j=="object"?j:{},D=p.threshold??600,Ae=p.idleOpacity??p.scrollingOpacity??.45,se=p.hideDelay??1500,Ht=p.position??"right",ot=p.offset??16,Lt=p.offsetBottom??ot,Dt=p.background??"#1976d2",Rt=p.color??"#ffffff",Le=p.size??48,[Be,rt]=g(!1),[kt,be]=g(!1),te=O(null),Pt=O({});W(()=>{Pt.current={children:C,onScroll:S,showScrollbar:ae,showHorizontalScrollbar:He,thumb:k,track:P,arrows:z,dragScroll:q,autoHide:B}});let Fe=O(null),a=O(null),ge=O(null),ve=O(null),It=O(null),N=O(null),{pullDistance:Ne,isRefreshing:De,pullProgress:_e}=Et({containerRef:a,config:me}),nt=me.indicatorColor??"#1976d2",$t=Ne>0||De,[Re,E]=g(!1),[_,lt]=g(!1),[it,at]=g(!1),[Ue,Ot]=g({y:0,scrollTop:0}),[ye,st]=g(0),[Wt,Xe]=g(0),[ce,ct]=g(!1),[ut,dt]=g(!1),[U,ft]=g(!1),[qe,zt]=g({x:0,scrollLeft:0}),[Ye,pt]=g(0),[je,ht]=g(0),[At,mt]=g(!1),ue=O(!1),[K,bt]=g(!1),[xe,Bt]=g({x:0,y:0,scrollTop:0,scrollLeft:0}),[wo,So]=g(null),[ke,Pe]=g(null),[Eo,Ft]=g(!1),[Nt,_t]=g(0),Te=O(null),[gt,vt]=g(!1),we=O(null),oe=O(null),re=O(null),M=he(()=>{let e=k.color??"#606060";return{width:k.width??8,minHeight:k.minHeight??50,radius:k.radius??(k.width??8)/2,color:e,opacity:k.opacity??.6,hoverColor:k.hoverColor??e,hoverOpacity:k.hoverOpacity??1}},[k]),l=he(()=>({width:P.width??16,color:P.color??"rgba(128, 128, 128, 0.1)",visible:P.visible??!0,alignment:P.alignment??"outside",radius:P.radius??M.radius??4,margin:P.margin??4,overflowX:P.overflowX??!0,overflowY:P.overflowY??!0}),[P,M.radius]),F=he(()=>{let e=z.color??"#808080";return{visible:z.visible??!1,step:z.step??50,color:e,opacity:z.opacity??.6,hoverColor:z.hoverColor??e,hoverOpacity:z.hoverOpacity??1}},[z]),Se=he(()=>({enabled:H?!1:q.enabled??!0,excludeClasses:q.excludeClasses??[],excludeSelectors:q.excludeSelectors??[]}),[q,H]),u=he(()=>({enabled:B.enabled??!0,delay:B.delay??1500,delayOnWheel:B.delayOnWheel??700,initialDelay:B.initialDelay??200}),[B]),[de,Ut]=g(()=>(B.initialDelay??200)>0),x=M.width,Xt=l.width,Ge=M.minHeight,X=F.visible,Ie=F.step,A=v(()=>{if(!a.current)return;let e=document.activeElement;e&&a.current.contains(e)&&e!==a.current||a.current.focus()},[]);fo(ie,()=>({getScrollContainer:()=>a.current,scrollTo:e=>{a.current&&a.current.scrollTo(e)},get scrollTop(){return a.current?.scrollTop||0},get scrollHeight(){return a.current?.scrollHeight||0},get clientHeight(){return a.current?.clientHeight||0}}),[]);let b=v(()=>{if(N.current){let t=N.current;if(document.contains(t)&&(t.scrollHeight>t.clientHeight+2||t.scrollWidth>t.clientWidth+2))return t;N.current=null}if(!a.current)return null;if(a.current.scrollHeight>a.current.clientHeight+2||a.current.scrollWidth>a.current.clientWidth+2)return N.current=a.current,a.current;if(!le)return null;let e=a.current.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]');for(let t of e){let o=t;if(o!==a.current&&o.classList.contains("overlay-scrollbar-container"))continue;let i=o.parentElement,n=!1;for(;i&&i!==a.current;){if(i.classList.contains("overlay-scrollbar-container")&&i!==a.current){n=!0;break}i=i.parentElement}if(!n&&(o.scrollHeight>o.clientHeight+2||o.scrollWidth>o.clientWidth+2))return N.current=o,o}return null},[]),V=v(()=>b()!==null,[b]),T=v(()=>{we.current&&(clearTimeout(we.current),we.current=null)},[]),$e=v(()=>{oe.current&&(clearTimeout(oe.current),oe.current=null)},[]),yt=v(()=>{re.current&&(clearTimeout(re.current),re.current=null)},[]),qt=v(()=>{$e(),!(_||U||K||ue.current)&&(T(),E(!1))},[T,$e,_,U,K]),y=v(e=>{u.enabled&&(T(),we.current=setTimeout(()=>{E(!1),we.current=null},e))},[T,u.enabled]),h=v(()=>{let e=b()??a.current;if(!e){E(!1),ct(!1),mt(!1),T();return}!u.enabled&&!de&&(E(!0),T());let t=e.clientHeight,o=e.scrollHeight,i=e.scrollTop,n=e.clientWidth,d=e.scrollWidth,w=e.scrollLeft,L=o-t>0,m=d-n>0,fe=L||m;ct(L),mt(m),fe||(E(!1),T());let Ee=0,$=0;if(Fe.current){let Z=window.getComputedStyle(Fe.current),Q=parseFloat(Z.paddingTop)||0;$=parseFloat(Z.paddingBottom)||0,Ee=Q+$,_t($)}if(L){let Z=X?x*2+l.margin*4:l.margin*2,Q=t-Z+Ee,Oe=t/o,pe=Math.max(Q*Oe,Ge),Tt=o-t,to=Q-pe,oo=Tt>0?i/Tt*to:0;st(pe),Xe(oo)}else st(0),Xe(0);let Me=d-n;if(Me>0){let Z=n/d,Q=Math.max(n*Z,50),Oe=n-Q,pe=Me>0?w/Me*Oe:0;pt(Q),ht(pe)}else pt(0),ht(0)},[b,T,X,x,Ge,u.enabled,de]),Yt=v(e=>{e.preventDefault(),e.stopPropagation();let t=b();t&&(lt(!0),Ot({y:e.clientY,scrollTop:t.scrollTop}),T(),E(!0),A())},[b,T,A]),Ke=v(e=>{if(!_)return;let t=b();if(!t)return;let o=t.clientHeight,n=t.scrollHeight-o,d=e.clientY-Ue.y,w=o-ye,L=d/w*n,m=Math.max(0,Math.min(n,Ue.scrollTop+L));t.scrollTop=m,h()},[_,Ue,ye,h,b]),Ve=v(()=>{lt(!1),V()&&y(u.delay)},[V,y,u.delay]),jt=v(e=>{if(!ve.current)return;let o=ve.current.getBoundingClientRect(),i=e.clientY-o.top,n=b();if(!n)return;let d=n.clientHeight,w=n.scrollHeight,m=i/d*(w-d);n.scrollTop=Math.max(0,Math.min(w-d,m)),h(),E(!0),y(u.delay),A()},[h,y,u.delay,b,A]),Gt=v(e=>{if(e.preventDefault(),e.stopPropagation(),!a.current)return;let t=Math.max(0,a.current.scrollTop-Ie);a.current.scrollTop=t,h(),E(!0),y(u.delay),A()},[h,y,Ie,u.delay,A]),Kt=v(e=>{if(e.preventDefault(),e.stopPropagation(),!a.current||!ge.current)return;let t=a.current,i=ge.current.scrollHeight-t.clientHeight,n=Math.min(i,t.scrollTop+Ie);t.scrollTop=n,h(),E(!0),y(u.delay),A()},[h,y,Ie,u.delay,A]),Vt=v(e=>{e.preventDefault(),e.stopPropagation();let t=b();t&&(ft(!0),zt({x:e.clientX,scrollLeft:t.scrollLeft}),T(),E(!0),A())},[b,T,A]),Ze=v(e=>{if(!U)return;let t=b();if(!t)return;let o=t.clientWidth,n=t.scrollWidth-o,d=e.clientX-qe.x,w=o-Ye,L=d/w*n,m=Math.max(0,Math.min(n,qe.scrollLeft+L));t.scrollLeft=m,h()},[U,qe,Ye,h,b]),Qe=v(()=>{ft(!1),V()&&y(u.delay)},[V,y,u.delay]),Zt=v(e=>{if(!ve.current)return;let o=ve.current.getBoundingClientRect(),i=e.clientX-o.left,n=b();if(!n)return;let d=n.clientWidth,w=n.scrollWidth,m=i/d*(w-d);n.scrollLeft=Math.max(0,Math.min(w-d,m)),h(),E(!0),y(u.delay),A()},[h,y,u.delay,b,A]),Qt=v(e=>{if(!Se.enabled||e.defaultPrevented)return;let t=e.target,o=a.current;if(!o||!o.contains(t)||We(t,Se)||e.button!==0)return;let i=b();if(!i||i.scrollHeight<=i.clientHeight&&i.scrollWidth<=i.clientWidth)return;e.preventDefault();let n=document.activeElement;n instanceof HTMLElement&&n!==document.body&&!n.contains(t)&&n.blur(),ue.current=!0,Bt({x:e.clientX,y:e.clientY,scrollTop:i.scrollTop,scrollLeft:i.scrollLeft||0}),T()},[Se,We,b,T]),Je=v(e=>{if(!ue.current&&!K)return;let t=b();if(!t)return;let o=xe.x-e.clientX,i=xe.y-e.clientY;if(Math.abs(i)<5&&Math.abs(o)<5)return;ue.current&&(ue.current=!1,bt(!0)),E(!0);let n=Math.max(0,Math.min(t.scrollHeight-t.clientHeight,xe.scrollTop+i)),d=Math.max(0,Math.min(t.scrollWidth-t.clientWidth,xe.scrollLeft+o));t.scrollTop=n,t.scrollLeft=d,h()},[K,xe,b,h]),et=v(()=>{let e=K;ue.current=!1,bt(!1),e&&V()&&y(u.delay)},[K,V,y,u.delay]);W(()=>{let e=d=>{if(h(),G){let m=(d.target?.scrollTop??0)>D;rt(m),te.current&&(clearTimeout(te.current),te.current=null),m&&se>0&&(te.current=setTimeout(()=>{te.current=null,rt(!1)},se))}if(de){S&&S(d);return}T(),E(!0),yt();let w=gt?u.delayOnWheel:u.delay;y(w),S&&S(d)},t=()=>{vt(!0),Te.current&&clearTimeout(Te.current),Te.current=setTimeout(()=>{vt(!1)},300),yt(),re.current=setTimeout(()=>{E(!0),re.current=null,y(u.delayOnWheel)},50)},o=[],i=b();i&&o.push(i);let n=a.current;return n&&!i&&(o.push(n),n.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]').forEach(w=>{let L=w;if(L!==n&&L.classList.contains("overlay-scrollbar-container"))return;let m=L.parentElement;for(;m&&m!==n;){if(m.classList.contains("overlay-scrollbar-container")&&m!==n)return;m=m.parentElement}o.push(L)})),o.forEach(d=>{d.addEventListener("scroll",e,{passive:!0}),d.addEventListener("wheel",t,{passive:!0})}),()=>{o.forEach(d=>{d.removeEventListener("scroll",e),d.removeEventListener("wheel",t)}),Te.current&&clearTimeout(Te.current),re.current&&clearTimeout(re.current)}},[b,h,S,T,y,u,gt,de,G,D,se]),W(()=>()=>{te.current&&clearTimeout(te.current)},[]),W(()=>{let e=o=>{let i=o.target;if(o.defaultPrevented||i instanceof Element&&We(i,Se))return;let n=b();if(!n)return;let{key:d}=o,{scrollTop:w,scrollHeight:L,clientHeight:m}=n,fe=L-m,Ee=50,$=null;switch(d){case"ArrowUp":o.preventDefault(),$=Math.max(0,w-Ee);break;case"ArrowDown":o.preventDefault(),$=Math.min(fe,w+Ee);break;case"PageUp":o.preventDefault(),$=Math.max(0,w-m);break;case"PageDown":o.preventDefault(),$=Math.min(fe,w+m);break;case"Home":o.preventDefault(),$=0;break;case"End":o.preventDefault(),$=fe;break;default:return}if($!==null){let Me=$/fe,Z=X?x*2+l.margin*4:l.margin*2,pe=(m-Z-ye)*Me;Xe(pe),n.scrollTop=$,T(),E(!0),y(u.delay)}},t=a.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}},[b,X,x,l.margin,ye,T,y,u.delay,Se]),W(()=>(document.addEventListener("mousemove",Je),document.addEventListener("mouseup",et),()=>{document.removeEventListener("mousemove",Je),document.removeEventListener("mouseup",et)}),[K,Je,et]),W(()=>{if(_)return document.addEventListener("mousemove",Ke),document.addEventListener("mouseup",Ve),()=>{document.removeEventListener("mousemove",Ke),document.removeEventListener("mouseup",Ve)}},[_,Ke,Ve]),W(()=>{if(U)return document.addEventListener("mousemove",Ze),document.addEventListener("mouseup",Qe),()=>{document.removeEventListener("mousemove",Ze),document.removeEventListener("mouseup",Qe)}},[U,Ze,Qe]),W(()=>{h();let e=setTimeout(()=>{h()},100);return()=>clearTimeout(e)},[h]),po(()=>{Ft(!0),h(),!u.enabled&&!de&&V()&&E(!0)},[V,h,u.enabled,de]),W(()=>{if(u.initialDelay>0){let e=setTimeout(()=>{Ut(!1)},u.initialDelay);return()=>clearTimeout(e)}},[u.initialDelay]),W(()=>{let e=new ResizeObserver(()=>{h()}),t=[];return a.current&&t.push(a.current),ge.current&&t.push(ge.current),N.current&&document.contains(N.current)&&t.push(N.current),t.forEach(o=>{e.observe(o)}),()=>e.disconnect()},[h]),W(()=>{if(!a.current)return;let e=new MutationObserver(()=>{N.current=null,h()});return e.observe(a.current,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style"]}),()=>e.disconnect()},[h]);let I=Math.max(Xt,x);W(()=>{let e="overlay-scrollbar-shared";if(document.getElementById(e))return;let t=document.createElement("style");t.id=e,t.textContent=`
|
|
1
|
+
import{useRef as D,useEffect as O,useState as v,useCallback as g,useMemo as he,forwardRef as mo,useImperativeHandle as ho,useLayoutEffect as bo,useId as go}from"react";var io=["editor","textarea","input","select","textfield","form-control","contenteditable","MuiInputBase-input","MuiSelect-select","MuiOutlinedInput-input","MuiFilledInput-input","MuiInput-input","MuiFormControl-root","MuiTextField-root","MuiSelect-root","MuiOutlinedInput-root","MuiFilledInput-root","MuiInput-root","MuiAutocomplete-input","MuiDatePicker-input","MuiSlider-thumb","MuiSlider-rail","MuiSlider-track","MuiSlider-mark","MuiSlider-markLabel","MuiSlider-root","MuiSlider-colorPrimary","MuiSlider-sizeMedium","MuiIconButton-root","MuiButton-root","MuiButtonBase-root","MuiTouchRipple-root","MuiCheckbox-root","MuiRadio-root","MuiSwitch-root","PrivateSwitchBase-root","ant-input","ant-input-affix-wrapper","ant-input-group-addon","ant-input-number","ant-input-number-handler","ant-select","ant-select-selector","ant-select-selection-search","ant-select-dropdown","ant-cascader","ant-cascader-input","ant-picker","ant-picker-input","ant-time-picker","ant-calendar-picker","ant-slider","ant-slider-track","ant-slider-handle","ant-switch","ant-checkbox","ant-checkbox-wrapper","ant-radio","ant-radio-wrapper","ant-rate","ant-upload","ant-upload-drag","ant-form-item","ant-form-item-control","ant-btn","ant-dropdown","ant-dropdown-trigger","ant-menu","ant-menu-item","ant-tooltip","ant-popover","ant-modal","ant-drawer","ant-tree-select","ant-auto-complete","ant-mentions","ant-transfer","ui-input","ui-textarea","ui-select","ui-select-trigger","ui-select-content","ui-select-item","ui-button","ui-checkbox","ui-radio-group","ui-switch","ui-slider","ui-range-slider","ui-calendar","ui-date-picker","ui-combobox","ui-command","ui-command-input","ui-popover","ui-dialog","ui-sheet","ui-dropdown-menu","ui-context-menu","ui-menubar","ui-navigation-menu","ui-form","ui-form-control","ui-form-item","ui-form-field","ui-label","radix-ui","radix-select","radix-dropdown","radix-dialog","radix-popover","radix-accordion","radix-tabs","radix-slider","radix-switch","radix-checkbox","radix-radio","ql-editor","ql-container","ql-toolbar","ql-picker","ql-picker-label","ql-picker-options","ql-formats","ql-snow","ql-bubble","quill","quilleditor","monaco-editor","monaco-editor-background","view-lines","decorationsOverviewRuler","monaco-scrollable-element","CodeMirror","CodeMirror-code","CodeMirror-lines","CodeMirror-scroll","CodeMirror-sizer","cm-editor","cm-focused","cm-content","tox-editor-container","tox-editor-header","tox-edit-area","tox-tinymce","mce-content-body","ck-editor","ck-content","ck-toolbar","ck-editor__editable","ck-widget","slate-editor","slate-content","DraftEditor-root","DraftEditor-editorContainer","public-DraftEditor-content","ehfuse-editor","ehfuse-editor-wrapper","ehfuse-editor-content","ehfuse-toolbar","ehfuse-toolbar-group","ehfuse-cursor","text-editor","rich-text-editor","wysiwyg","ace_editor","ace_content"],ze=(r,s)=>{if(r instanceof HTMLElement&&r.isContentEditable||r.closest('[role="textbox"],[role="searchbox"]'))return!0;let f=r.tagName.toLowerCase();if(f==="input"){let c=(r.type||"text").toLowerCase();return!["button","submit","reset","image","hidden"].includes(c)}if(["textarea","select","button"].includes(f)||["svg","path","circle","rect","line","polygon","polyline"].includes(f)||r.getAttribute("contenteditable")==="true")return!0;if(s?.excludeSelectors){for(let c of s.excludeSelectors)if(r.matches(c))return!0}return ao(r,s)},ao=(r,s)=>{let f=[...io,...s?.excludeClasses||[]],c=r,H=0,S=5;for(;c&&H<=S;){if(f.some(P=>c.classList.contains(P)))return!0;if(c.classList.contains("MuiDialogContent-root"))break;c=c.parentElement,H++}return!1};var so=r=>{if(r==null)return null;if(typeof r=="number")return Number.isFinite(r)?r:null;let s=r.trim();if(s==="")return null;let f=/^(-?\d*\.?\d+)(px)?$/.exec(s);if(!f)return null;let c=Number.parseFloat(f[1]);return Number.isFinite(c)?c:null},co=r=>{if(r==null)return;if(typeof r=="number")return r;let s=r.trim().split(/\s+/);if(!(s.length===0||s[0]===""))return s.length===1||s.length===2?s[0]:s[2]},uo=r=>{let s=typeof r=="number"?[`${r}px`]:r.trim().split(/\s+/),[f,c=f,H=f,S=c]=s;return`${f} ${c} 0 ${S}`},lt=r=>{if(!r)return{style:r,spacerHeight:0};let s=r.paddingBottom!==void 0,f=r.padding!==void 0;if(!s&&!f)return{style:r,spacerHeight:0};let c=s?r.paddingBottom:co(r.padding),H=so(c);if(H===null||H<=0)return{style:r,spacerHeight:0};let S={...r};return f&&r.padding!==void 0&&(S.padding=uo(r.padding)),s&&(S.paddingBottom=0),{style:S,spacerHeight:H}};import{useEffect as Mt,useRef as re,useState as Ct}from"react";var Ht=({containerRef:r,config:s})=>{let f=s.enabled??!0,c=s.threshold??80,H=s.maxDistance??c*2,S=s.onRefresh,[P,I]=Ct(0),[W,X]=Ct(!1),B=re(0),be=re(0),Y=re(!1),Q=re(!1),ne=re(!1),j=re(0),le=re(!1);return Mt(()=>{le.current=W},[W]),Mt(()=>{let w=r.current;if(!w||!(f&&typeof S=="function"))return;let Le=p=>{let R=p instanceof Element?p:null;for(;R&&R!==w;){if(R instanceof HTMLElement&&R.scrollHeight>R.clientHeight+1&&R.scrollTop>0)return!1;R=R.parentElement}return!0},Be=p=>{Y.current=!1,Q.current=!1,ne.current=!1,!le.current&&p.touches.length===1&&w.scrollTop===0&&Le(p.target)&&(Y.current=!0,B.current=p.touches[0].clientY,be.current=p.touches[0].clientX)},J=p=>{if(!Y.current||le.current||p.touches.length!==1)return;let R=p.touches[0].clientY-B.current,Fe=p.touches[0].clientX-be.current;if(!Q.current){if(R<=0||w.scrollTop>0){Y.current=!1;return}if(R>8&&R>Math.abs(Fe))Q.current=!0,ne.current=w.scrollTop<0;else return}!ne.current&&p.cancelable&&p.preventDefault();let ae=Math.min(Math.max(R,0)*.5,H);j.current=ae,I(ae)},G=()=>{if(!Y.current||(Y.current=!1,!Q.current))return;Q.current=!1,ne.current=!1;let p=j.current;j.current=0,p>=c&&!le.current?(X(!0),I(c),Promise.resolve().then(()=>S()).catch(()=>{}).finally(()=>{X(!1),I(0)})):I(0)};return w.addEventListener("touchstart",Be,{passive:!0}),w.addEventListener("touchmove",J,{passive:!1}),w.addEventListener("touchend",G,{passive:!0}),w.addEventListener("touchcancel",G,{passive:!0}),()=>{w.removeEventListener("touchstart",Be),w.removeEventListener("touchmove",J),w.removeEventListener("touchend",G),w.removeEventListener("touchcancel",G)}},[r,f,S,c,H]),{pullDistance:P,isRefreshing:W,pullProgress:Math.min(P/c,1),pullThreshold:c}};import{useEffect as fo,useState as po}from"react";function Lt(){let[r,s]=po(()=>typeof window>"u"||typeof window.matchMedia!="function"?!1:window.matchMedia("(pointer: coarse)").matches);return fo(()=>{if(typeof window>"u"||typeof window.matchMedia!="function")return;let f=window.matchMedia("(pointer: coarse)"),c=H=>s(H.matches);return s(f.matches),typeof f.addEventListener=="function"?(f.addEventListener("change",c),()=>f.removeEventListener("change",c)):(f.addListener(c),()=>f.removeListener(c))},[]),r}import{jsx as k,jsxs as He}from"react/jsx-runtime";var vo={},yo={},xo={},To={},wo={},So={},Eo=mo(({className:r="",style:s={},containerStyle:f={},contentStyle:c={},children:H,onScroll:S,thumb:P=vo,track:I=yo,arrows:W=xo,dragScroll:X=To,autoHide:B=wo,pullToRefresh:be=So,showScrollbar:Y=!0,showHorizontalScrollbar:Q=!0,detectInnerScroll:ne=!1,scrollTopFab:j=!1},le)=>{let w=Lt(),ie=Y,Le=w?!1:Q,J=`os-${go().replace(/[^a-zA-Z0-9_-]/g,"")}`,G=j!==!1&&j!=null,p=typeof j=="object"?j:{},R=p.threshold??600,Fe=p.idleOpacity??p.scrollingOpacity??.45,ae=p.hideDelay??1500,Rt=p.position??"right",it=p.offset??16,kt=p.offsetBottom??it,Pt=p.background??"#1976d2",It=p.color??"#ffffff",De=p.size??48,[Ne,at]=v(!1),[$t,ge]=v(!1),ee=D(null),Ot=D({});O(()=>{Ot.current={children:H,onScroll:S,showScrollbar:ie,showHorizontalScrollbar:Le,thumb:P,track:I,arrows:W,dragScroll:X,autoHide:B}});let Ue=D(null),a=D(null),ve=D(null),ye=D(null),At=D(null),N=D(null),{pullDistance:_e,isRefreshing:Re,pullProgress:qe}=Ht({containerRef:a,config:be}),st=be.indicatorColor??"#1976d2",Wt=_e>0||Re,[ke,E]=v(!1),[U,ct]=v(!1),[ut,dt]=v(!1),[Xe,zt]=v({y:0,scrollTop:0}),[xe,ft]=v(0),[Bt,Ye]=v(0),[se,pt]=v(!1),[mt,ht]=v(!1),[_,bt]=v(!1),[je,Ft]=v({x:0,scrollLeft:0}),[Ge,gt]=v(0),[Ke,vt]=v(0),[Nt,yt]=v(!1),ce=D(!1),[ue,xt]=v(!1),Ve=D(!1),[Te,Ut]=v({x:0,y:0,scrollTop:0,scrollLeft:0}),[Mo,Co]=v(null),[Pe,Ie]=v(null),[Ho,_t]=v(!1),[qt,Xt]=v(0),we=D(null),Ze=D(!1),Se=D(null),te=D(null),oe=D(null),M=he(()=>{let e=P.color??"#606060";return{width:P.width??8,minHeight:P.minHeight??50,radius:P.radius??(P.width??8)/2,color:e,opacity:P.opacity??.6,hoverColor:P.hoverColor??e,hoverOpacity:P.hoverOpacity??1}},[P]),l=he(()=>({width:I.width??16,color:I.color??"rgba(128, 128, 128, 0.1)",visible:I.visible??!0,alignment:I.alignment??"outside",radius:I.radius??M.radius??4,margin:I.margin??4,overflowX:I.overflowX??!0,overflowY:I.overflowY??!0}),[I,M.radius]),F=he(()=>{let e=W.color??"#808080";return{visible:W.visible??!1,step:W.step??50,color:e,opacity:W.opacity??.6,hoverColor:W.hoverColor??e,hoverOpacity:W.hoverOpacity??1}},[W]),Ee=he(()=>({enabled:w?!1:X.enabled??!0,excludeClasses:X.excludeClasses??[],excludeSelectors:X.excludeSelectors??[]}),[X,w]),u=he(()=>({enabled:B.enabled??!0,delay:B.delay??1500,delayOnWheel:B.delayOnWheel??700,initialDelay:B.initialDelay??200}),[B]),[de,Yt]=v(()=>(B.initialDelay??200)>0),x=M.width,jt=l.width,Qe=M.minHeight,q=F.visible,$e=F.step,z=g(()=>{if(!a.current)return;let e=document.activeElement;e&&a.current.contains(e)&&e!==a.current||a.current.focus()},[]);ho(le,()=>({getScrollContainer:()=>a.current,scrollTo:e=>{a.current&&a.current.scrollTo(e)},get scrollTop(){return a.current?.scrollTop||0},get scrollHeight(){return a.current?.scrollHeight||0},get clientHeight(){return a.current?.clientHeight||0}}),[]);let h=g(()=>{if(N.current){let t=N.current;if(document.contains(t)&&(t.scrollHeight>t.clientHeight+2||t.scrollWidth>t.clientWidth+2))return t;N.current=null}if(!a.current)return null;if(a.current.scrollHeight>a.current.clientHeight+2||a.current.scrollWidth>a.current.clientWidth+2)return N.current=a.current,a.current;if(!ne)return null;let e=a.current.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]');for(let t of e){let o=t;if(o!==a.current&&o.classList.contains("overlay-scrollbar-container"))continue;let i=o.parentElement,n=!1;for(;i&&i!==a.current;){if(i.classList.contains("overlay-scrollbar-container")&&i!==a.current){n=!0;break}i=i.parentElement}if(!n&&(o.scrollHeight>o.clientHeight+2||o.scrollWidth>o.clientWidth+2))return N.current=o,o}return null},[]),K=g(()=>h()!==null,[h]),C=g(()=>{Se.current&&(clearTimeout(Se.current),Se.current=null)},[]),Oe=g(()=>{te.current&&(clearTimeout(te.current),te.current=null)},[]),Tt=g(()=>{oe.current&&(clearTimeout(oe.current),oe.current=null)},[]),Gt=g(()=>{Oe(),!(U||_||ue||ce.current)&&(C(),E(!1))},[C,Oe,U,_,ue]),y=g(e=>{u.enabled&&(C(),Se.current=setTimeout(()=>{E(!1),Se.current=null},e))},[C,u.enabled]),b=g(()=>{let e=h()??a.current;if(!e){E(!1),pt(!1),yt(!1),C();return}!u.enabled&&!de&&(E(!0),C());let t=e.clientHeight,o=e.scrollHeight,i=e.scrollTop,n=e.clientWidth,d=e.scrollWidth,T=e.scrollLeft,L=o-t>0,m=d-n>0,pe=L||m;pt(L),yt(m),pe||(E(!1),C());let Me=0,A=0;if(Ue.current){let V=window.getComputedStyle(Ue.current),Z=parseFloat(V.paddingTop)||0;A=parseFloat(V.paddingBottom)||0,Me=Z+A,Xt(A)}if(L){let V=q?x*2+l.margin*4:l.margin*2,Z=t-V+Me,We=t/o,me=Math.max(Z*We,Qe),Et=o-t,no=Z-me,lo=Et>0?i/Et*no:0;ft(me),Ye(lo)}else ft(0),Ye(0);let Ce=d-n;if(Ce>0){let V=n/d,Z=Math.max(n*V,50),We=n-Z,me=Ce>0?T/Ce*We:0;gt(Z),vt(me)}else gt(0),vt(0)},[h,C,q,x,Qe,u.enabled,de]),Kt=g(e=>{e.preventDefault(),e.stopPropagation();let t=h();t&&(ct(!0),zt({y:e.clientY,scrollTop:t.scrollTop}),C(),E(!0),z())},[h,C,z]),Je=g(e=>{if(!U)return;let t=h();if(!t)return;let o=t.clientHeight,n=t.scrollHeight-o,d=e.clientY-Xe.y,T=o-xe,L=d/T*n,m=Math.max(0,Math.min(n,Xe.scrollTop+L));t.scrollTop=m,b()},[U,Xe,xe,b,h]),et=g(()=>{ct(!1),K()&&y(u.delay)},[K,y,u.delay]),Vt=g(e=>{if(!ye.current)return;let o=ye.current.getBoundingClientRect(),i=e.clientY-o.top,n=h();if(!n)return;let d=n.clientHeight,T=n.scrollHeight,m=i/d*(T-d);n.scrollTop=Math.max(0,Math.min(T-d,m)),b(),E(!0),y(u.delay),z()},[b,y,u.delay,h,z]),Zt=g(e=>{if(e.preventDefault(),e.stopPropagation(),!a.current)return;let t=Math.max(0,a.current.scrollTop-$e);a.current.scrollTop=t,b(),E(!0),y(u.delay),z()},[b,y,$e,u.delay,z]),Qt=g(e=>{if(e.preventDefault(),e.stopPropagation(),!a.current||!ve.current)return;let t=a.current,i=ve.current.scrollHeight-t.clientHeight,n=Math.min(i,t.scrollTop+$e);t.scrollTop=n,b(),E(!0),y(u.delay),z()},[b,y,$e,u.delay,z]),Jt=g(e=>{e.preventDefault(),e.stopPropagation();let t=h();t&&(bt(!0),Ft({x:e.clientX,scrollLeft:t.scrollLeft}),C(),E(!0),z())},[h,C,z]),tt=g(e=>{if(!_)return;let t=h();if(!t)return;let o=t.clientWidth,n=t.scrollWidth-o,d=e.clientX-je.x,T=o-Ge,L=d/T*n,m=Math.max(0,Math.min(n,je.scrollLeft+L));t.scrollLeft=m,b()},[_,je,Ge,b,h]),ot=g(()=>{bt(!1),K()&&y(u.delay)},[K,y,u.delay]),eo=g(e=>{if(!ye.current)return;let o=ye.current.getBoundingClientRect(),i=e.clientX-o.left,n=h();if(!n)return;let d=n.clientWidth,T=n.scrollWidth,m=i/d*(T-d);n.scrollLeft=Math.max(0,Math.min(T-d,m)),b(),E(!0),y(u.delay),z()},[b,y,u.delay,h,z]),to=g(e=>{if(!Ee.enabled||e.defaultPrevented)return;let t=e.target,o=a.current;if(!o||!o.contains(t)||ze(t,Ee)||e.button!==0)return;let i=h();if(!i||i.scrollHeight<=i.clientHeight&&i.scrollWidth<=i.clientWidth)return;e.preventDefault();let n=document.activeElement;n instanceof HTMLElement&&n!==document.body&&!n.contains(t)&&n.blur(),ce.current=!0,Ut({x:e.clientX,y:e.clientY,scrollTop:i.scrollTop,scrollLeft:i.scrollLeft||0})},[Ee,ze,h]),rt=g(e=>{if(!ce.current&&!ue)return;let t=h();if(!t)return;let o=Te.x-e.clientX,i=Te.y-e.clientY;if(Math.abs(i)<5&&Math.abs(o)<5)return;ce.current&&(ce.current=!1,Ve.current=!0,xt(!0)),E(!0);let n=Math.max(0,Math.min(t.scrollHeight-t.clientHeight,Te.scrollTop+i)),d=Math.max(0,Math.min(t.scrollWidth-t.clientWidth,Te.scrollLeft+o));t.scrollTop=n,t.scrollLeft=d,b()},[ue,Te,h,b]),nt=g(()=>{let e=Ve.current;ce.current=!1,Ve.current=!1,xt(!1),e&&K()&&y(u.delay)},[K,y,u.delay]);O(()=>{let e=d=>{if(b(),G){let m=(d.target?.scrollTop??0)>R;at(m),ee.current&&(clearTimeout(ee.current),ee.current=null),m&&ae>0&&(ee.current=setTimeout(()=>{ee.current=null,at(!1)},ae))}if(de){S&&S(d);return}C(),E(!0),Tt();let T=Ze.current?u.delayOnWheel:u.delay;y(T),S&&S(d)},t=()=>{Ze.current=!0,we.current&&clearTimeout(we.current),we.current=setTimeout(()=>{Ze.current=!1},300),Tt(),oe.current=setTimeout(()=>{E(!0),oe.current=null,y(u.delayOnWheel)},50)},o=[],i=h();i&&o.push(i);let n=a.current;return n&&!i&&(o.push(n),n.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]').forEach(T=>{let L=T;if(L!==n&&L.classList.contains("overlay-scrollbar-container"))return;let m=L.parentElement;for(;m&&m!==n;){if(m.classList.contains("overlay-scrollbar-container")&&m!==n)return;m=m.parentElement}o.push(L)})),o.forEach(d=>{d.addEventListener("scroll",e,{passive:!0}),d.addEventListener("wheel",t,{passive:!0})}),()=>{o.forEach(d=>{d.removeEventListener("scroll",e),d.removeEventListener("wheel",t)})}},[h,b,S,C,y,u,de,G,R,ae]),O(()=>()=>{ee.current&&clearTimeout(ee.current),we.current&&clearTimeout(we.current),oe.current&&clearTimeout(oe.current)},[]),O(()=>{let e=o=>{let i=o.target;if(o.defaultPrevented||i instanceof Element&&ze(i,Ee))return;let n=h();if(!n)return;let{key:d}=o,{scrollTop:T,scrollHeight:L,clientHeight:m}=n,pe=L-m,Me=50,A=null;switch(d){case"ArrowUp":o.preventDefault(),A=Math.max(0,T-Me);break;case"ArrowDown":o.preventDefault(),A=Math.min(pe,T+Me);break;case"PageUp":o.preventDefault(),A=Math.max(0,T-m);break;case"PageDown":o.preventDefault(),A=Math.min(pe,T+m);break;case"Home":o.preventDefault(),A=0;break;case"End":o.preventDefault(),A=pe;break;default:return}if(A!==null){let Ce=A/pe,V=q?x*2+l.margin*4:l.margin*2,me=(m-V-xe)*Ce;Ye(me),n.scrollTop=A,C(),E(!0),y(u.delay)}},t=a.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}},[h,q,x,l.margin,xe,C,y,u.delay,Ee]),O(()=>(document.addEventListener("mousemove",rt),document.addEventListener("mouseup",nt),()=>{document.removeEventListener("mousemove",rt),document.removeEventListener("mouseup",nt)}),[ue,rt,nt]),O(()=>{if(U)return document.addEventListener("mousemove",Je),document.addEventListener("mouseup",et),()=>{document.removeEventListener("mousemove",Je),document.removeEventListener("mouseup",et)}},[U,Je,et]),O(()=>{if(_)return document.addEventListener("mousemove",tt),document.addEventListener("mouseup",ot),()=>{document.removeEventListener("mousemove",tt),document.removeEventListener("mouseup",ot)}},[_,tt,ot]),O(()=>{b();let e=setTimeout(()=>{b()},100);return()=>clearTimeout(e)},[b]),bo(()=>{_t(!0),b(),!u.enabled&&!de&&K()&&E(!0)},[K,b,u.enabled,de]),O(()=>{if(u.initialDelay>0){let e=setTimeout(()=>{Yt(!1)},u.initialDelay);return()=>clearTimeout(e)}},[u.initialDelay]);let wt=D(b);wt.current=b;let fe=D(null),Ae=g(()=>{fe.current===null&&(fe.current=requestAnimationFrame(()=>{fe.current=null,wt.current()}))},[]);O(()=>()=>{fe.current!==null&&(cancelAnimationFrame(fe.current),fe.current=null)},[]),O(()=>{let e=new ResizeObserver(()=>{Ae()}),t=[];return a.current&&t.push(a.current),ve.current&&t.push(ve.current),N.current&&document.contains(N.current)&&t.push(N.current),t.forEach(o=>{e.observe(o)}),()=>e.disconnect()},[b,Ae]),O(()=>{if(!a.current)return;let e=new MutationObserver(()=>{N.current=null,Ae()});return e.observe(a.current,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style"]}),()=>e.disconnect()},[Ae]);let $=Math.max(jt,x);O(()=>{let e="overlay-scrollbar-shared";if(document.getElementById(e))return;let t=document.createElement("style");t.id=e,t.textContent=`
|
|
2
2
|
/* ehfuse-editor-content\uB294 \uC2A4\uD06C\uB864\uBC14 \uC720\uC9C0 */
|
|
3
3
|
.overlay-scrollbar-container .ehfuse-editor-content {
|
|
4
4
|
scrollbar-width: thin !important;
|
|
@@ -27,7 +27,7 @@ import{useRef as O,useEffect as W,useState as g,useCallback as v,useMemo as he,f
|
|
|
27
27
|
from { transform: rotate(0deg); }
|
|
28
28
|
to { transform: rotate(360deg); }
|
|
29
29
|
}
|
|
30
|
-
`,document.head.appendChild(t)},[]),
|
|
30
|
+
`,document.head.appendChild(t)},[]),O(()=>{let e=`overlay-scrollbar-instance-${J}`,t=document.getElementById(e);t&&t.remove();let o=document.createElement("style");o.id=e;let i=`.${J}`;return o.textContent=`
|
|
31
31
|
${i} {
|
|
32
32
|
scrollbar-width: none !important;
|
|
33
33
|
-ms-overflow-style: none !important;
|
|
@@ -38,5 +38,5 @@ import{useRef as O,useEffect as W,useState as g,useCallback as v,useMemo as he,f
|
|
|
38
38
|
height: 0 !important;
|
|
39
39
|
}
|
|
40
40
|
${i}::-webkit-scrollbar-track { display: none !important; }
|
|
41
|
-
${i}::-webkit-scrollbar-thumb { display: none !important; }`,document.head.appendChild(o),()=>{document.getElementById(e)?.remove()}},[
|
|
41
|
+
${i}::-webkit-scrollbar-thumb { display: none !important; }`,document.head.appendChild(o),()=>{document.getElementById(e)?.remove()}},[J]);let{normalizedContainerStyle:oo,normalizedContentStyle:ro,bottomSpacerHeight:St}=he(()=>{let e=lt(f),t=lt(c);return{normalizedContainerStyle:e.style,normalizedContentStyle:t.style,bottomSpacerHeight:e.spacerHeight+t.spacerHeight}},[f,c]);return He("div",{ref:Ue,className:`overlay-scrollbar-wrapper ${r}`,onMouseLeave:Gt,style:{display:"flex",flexDirection:"column",position:"relative",minHeight:0,height:"100%",flex:"1 1 0%",overflow:"visible",...s},children:[Wt&&k("div",{className:"overlay-scrollbar-pull-indicator",style:{position:"absolute",top:0,left:"50%",transform:`translate(-50%, ${_e-68}px)`,transition:Re?"transform 0.15s ease-out":_e===0?"transform 0.2s ease-out":"none",width:60,height:60,borderRadius:"50%",background:"#ffffff",boxShadow:"0 2px 8px rgba(0, 0, 0, 0.25)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:1001,pointerEvents:"none",opacity:Re?1:Math.min(qe*1.5,1)},children:Re?k("svg",{width:"36",height:"36",viewBox:"0 0 24 24",style:{animation:"overlay-scrollbar-ptr-spin 0.8s linear infinite"},children:k("circle",{cx:"12",cy:"12",r:"9",fill:"none",stroke:st,strokeWidth:"2.5",strokeLinecap:"round",strokeDasharray:"42",strokeDashoffset:"14"})}):k("svg",{width:"36",height:"36",viewBox:"0 0 24 24",style:{transform:`rotate(${qe*270}deg)`,opacity:qe>=1?1:.6},children:k("path",{d:"M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z",fill:st})})}),k("div",{ref:a,className:`overlay-scrollbar-container ${J}`,tabIndex:-1,onMouseDown:to,style:{display:"flex",width:"100%",flex:"1 1 auto",minHeight:0,overflow:"auto",outline:"none",userSelect:ue?"none":"auto",...oo},children:He("div",{ref:ve,className:"overlay-scrollbar-content",style:{flex:"1 1 auto",display:"flex",flexDirection:"column",boxSizing:"border-box",...ro},children:[H,St>0&&k("div",{className:"overlay-scrollbar-bottom-spacer","aria-hidden":"true",style:{flex:"0 0 auto",height:St}})]})}),ie&&se&&(l.overflowY??!0)&&He("div",{ref:ye,className:"overlay-scrollbar-track",onMouseEnter:()=>{w||(C(),te.current=setTimeout(()=>{E(!0),te.current=null},100))},onMouseLeave:()=>{Oe(),U||y(u.delay)},style:{position:"absolute",top:0,right:0,width:`${$}px`,height:"100%",opacity:ke?1:0,transition:"opacity 0.2s ease-in-out",cursor:"pointer",zIndex:1e3,pointerEvents:"auto"},children:[l.visible&&k("div",{className:"overlay-scrollbar-track-background",onClick:e=>{e.preventDefault(),e.stopPropagation(),Vt(e)},style:{position:"absolute",top:q?`${M.width+l.margin*2}px`:`${l.margin}px`,right:l.alignment==="outside"?"0px":`${($-M.width)/2}px`,width:`${M.width}px`,height:q?`calc(100% - ${M.width*2+l.margin*4}px)`:`calc(100% - ${l.margin*2}px)`,backgroundColor:l.color,borderRadius:`${l.radius}px`,cursor:"pointer"}}),k("div",{ref:At,className:"overlay-scrollbar-thumb",onMouseDown:Kt,onMouseEnter:()=>dt(!0),onMouseLeave:()=>dt(!1),style:{position:"absolute",top:`${(q?x+l.margin*2:l.margin)+Bt}px`,right:l.alignment==="outside"?"0px":`${($-x)/2}px`,width:`${x}px`,height:`${Math.max(xe,Qe)}px`,backgroundColor:ut||U?M.hoverColor:M.color,opacity:ut||U?M.hoverOpacity:M.opacity,borderRadius:`${M.radius}px`,cursor:"pointer",transition:"background-color 0.2s ease-in-out, opacity 0.2s ease-in-out"}})]}),ie&&se&&q&&k("div",{className:"overlay-scrollbar-up-arrow",onClick:Zt,onMouseEnter:()=>Ie("up"),onMouseLeave:()=>Ie(null),style:{position:"absolute",top:`${l.margin}px`,right:l.alignment==="outside"?"0px":`${($-x)/2}px`,width:`${x}px`,height:`${x}px`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:`${Math.max(x*.75,8)}px`,color:Pe==="up"?F.hoverColor:F.color,userSelect:"none",zIndex:1001,opacity:ke?Pe==="up"?F.hoverOpacity:F.opacity:0,transition:"opacity 0.2s ease-in-out, color 0.15s ease-in-out"},children:"\u25B2"}),ie&&se&&q&&k("div",{className:"overlay-scrollbar-down-arrow",onClick:Qt,onMouseEnter:()=>Ie("down"),onMouseLeave:()=>Ie(null),style:{position:"absolute",bottom:`${l.margin}px`,right:l.alignment==="outside"?"0px":`${($-x)/2}px`,width:`${x}px`,height:`${x}px`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:`${Math.max(x*.75,8)}px`,color:Pe==="down"?F.hoverColor:F.color,userSelect:"none",zIndex:1001,opacity:ke?Pe==="down"?F.hoverOpacity:F.opacity:0,transition:"opacity 0.2s ease-in-out, color 0.15s ease-in-out"},children:"\u25BC"}),ie&&Le&&Nt&&(l.overflowX??!0)&&He("div",{className:"overlay-scrollbar-horizontal-track",onMouseEnter:()=>{w||(C(),te.current=setTimeout(()=>{E(!0),te.current=null},100))},onMouseLeave:()=>{Oe(),_||y(u.delay)},style:{position:"absolute",bottom:`${qt}px`,left:0,width:"100%",height:`${$}px`,opacity:ke?1:0,transition:"opacity 0.2s ease-in-out",cursor:"pointer",zIndex:1e3,pointerEvents:"auto"},children:[l.visible&&k("div",{className:"overlay-scrollbar-horizontal-track-background",onClick:e=>{e.preventDefault(),e.stopPropagation(),eo(e)},style:{position:"absolute",bottom:l.alignment==="outside"?"0px":`${($-x)/2}px`,left:`${l.margin}px`,right:se?l.alignment==="outside"?`${$-l.margin}px`:`${$}px`:`${l.margin}px`,height:`${x}px`,backgroundColor:l.color,borderRadius:`${l.radius}px`,cursor:"pointer"}}),k("div",{className:"overlay-scrollbar-horizontal-thumb",onMouseDown:Jt,onMouseEnter:()=>ht(!0),onMouseLeave:()=>ht(!1),style:{position:"absolute",bottom:l.alignment==="outside"?"0px":`${($-x)/2}px`,left:`${l.margin+Ke}px`,right:se?l.alignment==="outside"?`${$-l.margin}px`:`${$}px`:"auto",maxWidth:se?l.alignment==="outside"?`calc(100% - ${l.margin+Ke+$-l.margin}px)`:`calc(100% - ${l.margin+Ke+$}px)`:"none",width:`${Math.max(Ge,50)}px`,height:`${x}px`,backgroundColor:mt||_?M.hoverColor:M.color,opacity:mt||_?M.hoverOpacity:M.opacity,borderRadius:`${M.radius}px`,cursor:"pointer",transition:"background-color 0.2s ease-in-out, opacity 0.2s ease-in-out"}})]}),G&&k("button",{type:"button","aria-label":"\uB9E8 \uC704\uB85C",onClick:()=>{ge(!1),a.current?.scrollTo({top:0,behavior:"smooth"})},onPointerDown:()=>ge(!0),onPointerUp:()=>ge(!1),onPointerLeave:()=>ge(!1),onPointerCancel:()=>ge(!1),style:{position:"absolute",[Rt]:it,bottom:kt,zIndex:1200,width:De,height:De,padding:0,display:"flex",alignItems:"center",justifyContent:"center",border:"none",borderRadius:"50%",backgroundColor:Pt,color:It,boxShadow:"0 3px 8px rgba(15, 23, 42, 0.28)",cursor:"pointer",opacity:Ne?$t?1:Fe:0,pointerEvents:Ne?"auto":"none",transition:Ne?"opacity 0.15s ease":"opacity 0.45s ease"},children:He("svg",{width:Math.round(De*.5),height:Math.round(De*.5),viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.4",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[k("line",{x1:"12",y1:"19",x2:"12",y2:"5"}),k("polyline",{points:"5 12 12 5 19 12"})]})})]})}),Dt=Eo;export{Dt as OverlayScrollbar,Dt as default};
|
|
42
42
|
//# sourceMappingURL=index.esm.js.map
|