@ehfuse/overlay-scrollbar 1.7.5 → 1.7.7
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/hooks/useCoarsePointer.d.ts +13 -0
- package/dist/hooks/useCoarsePointer.d.ts.map +1 -0
- package/dist/hooks/usePullToRefresh.d.ts.map +1 -1
- package/dist/index.esm.js +2 -2
- package/dist/index.esm.js.map +4 -4
- package/dist/index.js +2 -2
- package/dist/index.js.map +4 -4
- package/package.json +52 -52
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":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAAK,EAAE,EAMV,SAAS,EAIZ,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"OverlayScrollbar.d.ts","sourceRoot":"","sources":["../src/OverlayScrollbar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAAK,EAAE,EAMV,SAAS,EAIZ,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAGnD,MAAM,WAAW,WAAW;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAGD,MAAM,WAAW,WAAW;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAGD,MAAM,WAAW,YAAY;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAGD,MAAM,WAAW,gBAAgB;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC/B;AAGD,MAAM,WAAW,cAAc;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,qBAAqB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAGlC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,aAAa,CAAC,EAAE,mBAAmB,CAAC;IAGpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAGD,MAAM,WAAW,mBAAmB;IAChC,kBAAkB,EAAE,MAAM,cAAc,GAAG,IAAI,CAAC;IAChD,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACxB;AAUD,QAAA,MAAM,gBAAgB,mGAm4DrB,CAAC;AAEF,eAAe,gBAAgB,CAAC;AAChC,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* useCoarsePointer.ts
|
|
3
|
+
* 주 입력장치가 터치(coarse pointer)인지 감지하는 훅.
|
|
4
|
+
*
|
|
5
|
+
* 터치 우선 기기(모바일/태블릿)에서는 커스텀 스크롤바 트랙/thumb·드래그 스크롤이 불필요하고
|
|
6
|
+
* 오히려 네이티브 스크롤·PTR 제스처와 충돌할 수 있어, 이 값으로 커스텀 UI 를 끄는 판단에 쓴다.
|
|
7
|
+
* `pointer: coarse` 미디어쿼리 기준(마우스=fine 는 false). SSR 등 matchMedia 미지원 환경은 false.
|
|
8
|
+
*
|
|
9
|
+
* @copyright 2025 KIM YOUNG JIN (ehfuse@gmail.com)
|
|
10
|
+
*/
|
|
11
|
+
/** 주 입력장치가 터치(coarse pointer)면 true 를 반환한다. */
|
|
12
|
+
export declare function useCoarsePointer(): boolean;
|
|
13
|
+
//# sourceMappingURL=useCoarsePointer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCoarsePointer.d.ts","sourceRoot":"","sources":["../../src/hooks/useCoarsePointer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH,+CAA+C;AAC/C,wBAAgB,gBAAgB,IAAI,OAAO,CA2B1C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePullToRefresh.d.ts","sourceRoot":"","sources":["../../src/hooks/usePullToRefresh.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAA+B,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE/C,UAAU,qBAAqB;IAC3B,YAAY,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,mBAAmB,CAAC;CAC/B;AAED,UAAU,sBAAsB;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;CACzB;AAED,mCAAmC;AACnC,eAAO,MAAM,gBAAgB,GAAI,2BAG9B,qBAAqB,KAAG,
|
|
1
|
+
{"version":3,"file":"usePullToRefresh.d.ts","sourceRoot":"","sources":["../../src/hooks/usePullToRefresh.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAA+B,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE/C,UAAU,qBAAqB;IAC3B,YAAY,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,mBAAmB,CAAC;CAC/B;AAED,UAAU,sBAAsB;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;CACzB;AAED,mCAAmC;AACnC,eAAO,MAAM,gBAAgB,GAAI,2BAG9B,qBAAqB,KAAG,sBAiK1B,CAAC"}
|
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{useRef as A,useEffect as $,useState as m,useCallback as f,useMemo as xe,forwardRef as It,useImperativeHandle as Wt,useLayoutEffect as Ot}from"react";var Rt=["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"],Le=(E,k)=>{if(E instanceof HTMLElement&&E.isContentEditable||E.closest('[role="textbox"],[role="searchbox"]'))return!0;let z=E.tagName.toLowerCase();if(z==="input"){let y=(E.type||"text").toLowerCase();return!["button","submit","reset","image","hidden"].includes(y)}if(["textarea","select","button"].includes(z)||["svg","path","circle","rect","line","polygon","polyline"].includes(z)||E.getAttribute("contenteditable")==="true")return!0;if(k?.excludeSelectors){for(let y of k.excludeSelectors)if(E.matches(y))return!0}return kt(E,k)},kt=(E,k)=>{let z=[...Rt,...k?.excludeClasses||[]],y=E,_=0,I=5;for(;y&&_<=I;){if(z.some(S=>y.classList.contains(S)))return!0;if(y.classList.contains("MuiDialogContent-root"))break;y=y.parentElement,_++}return!1};import{useEffect as lt,useRef as ue,useState as it}from"react";var at=({containerRef:E,config:k})=>{let z=k.enabled??!0,y=k.threshold??80,_=k.maxDistance??y*2,I=k.onRefresh,[S,C]=it(0),[W,q]=it(!1),N=ue(0),de=ue(0),O=ue(!1),U=ue(!1),pe=ue(0),te=ue(!1);return lt(()=>{te.current=W},[W]),lt(()=>{let H=E.current;if(!H||!(z&&typeof I=="function"))return;let l=s=>{let w=s instanceof Element?s:null;for(;w&&w!==H;){if(w instanceof HTMLElement&&w.scrollHeight>w.clientHeight+1&&w.scrollTop>0)return!1;w=w.parentElement}return!0},G=s=>{O.current=!1,U.current=!1,!te.current&&s.touches.length===1&&(H.scrollTop>0||l(s.target)&&(O.current=!0,U.current=!1,N.current=s.touches[0].clientY,de.current=s.touches[0].clientX))},j=s=>{if(!O.current||te.current||s.touches.length!==1)return;let w=s.touches[0].clientY-N.current,re=s.touches[0].clientX-de.current;if(!U.current){if(w<=0||H.scrollTop>0){O.current=!1;return}if(w>8&&w>Math.abs(re))U.current=!0;else return}s.cancelable&&s.preventDefault();let ne=Math.min(Math.max(w,0)*.5,_);pe.current=ne,C(ne)},oe=()=>{if(!O.current||(O.current=!1,!U.current))return;U.current=!1;let s=pe.current;pe.current=0,s>=y&&!te.current?(q(!0),C(y),Promise.resolve().then(()=>I()).catch(()=>{}).finally(()=>{q(!1),C(0)})):C(0)};return H.addEventListener("touchstart",G,{passive:!0}),H.addEventListener("touchmove",j,{passive:!1}),H.addEventListener("touchend",oe,{passive:!0}),H.addEventListener("touchcancel",oe,{passive:!0}),()=>{H.removeEventListener("touchstart",G),H.removeEventListener("touchmove",j),H.removeEventListener("touchend",oe),H.removeEventListener("touchcancel",oe)}},[E,z,I,y,_]),{pullDistance:S,isRefreshing:W,pullProgress:Math.min(S/y,1),pullThreshold:y}};import{jsx as R,jsxs as _e}from"react/jsx-runtime";var Pt={},At={},$t={},zt={},Nt={},Ft={},_t=It(({className:E="",style:k={},containerStyle:z={},contentStyle:y={},children:_,onScroll:I,thumb:S=Pt,track:C=At,arrows:W=$t,dragScroll:q=zt,autoHide:N=Nt,pullToRefresh:de=Ft,showScrollbar:O=!0,showHorizontalScrollbar:U=!0,detectInnerScroll:pe=!1},te)=>{let H=A({});$(()=>{H.current={children:_,onScroll:I,showScrollbar:O,showHorizontalScrollbar:U,thumb:S,track:C,arrows:W,dragScroll:q,autoHide:N}});let Te=A(null),l=A(null),G=A(null),j=A(null),oe=A(null),s=A(null),{pullDistance:w,isRefreshing:re,pullProgress:ne}=at({containerRef:l,config:de}),Ue=de.indicatorColor??"#1976d2",st=w>0||re,[we,x]=m(!1),[B,Be]=m(!1),[Xe,Ye]=m(!1),[De,ut]=m({y:0,scrollTop:0}),[fe,qe]=m(0),[dt,Re]=m(0),[le,Ge]=m(!1),[je,Ke]=m(!1),[X,Ve]=m(!1),[ke,pt]=m({x:0,scrollLeft:0}),[Ie,Ze]=m(0),[We,Je]=m(0),[ft,Qe]=m(!1),ie=A(!1),[K,et]=m(!1),[he,ht]=m({x:0,y:0,scrollTop:0,scrollLeft:0}),[Ut,Bt]=m(null),[Me,Ee]=m(null),[Xt,mt]=m(!1),[bt,gt]=m(0),me=A(null),[tt,ot]=m(!1),be=A(null),Q=A(null),ee=A(null),T=xe(()=>{let e=S.color??"#606060";return{width:S.width??8,minHeight:S.minHeight??50,radius:S.radius??(S.width??8)/2,color:e,opacity:S.opacity??.6,hoverColor:S.hoverColor??e,hoverOpacity:S.hoverOpacity??1}},[S]),r=xe(()=>({width:C.width??16,color:C.color??"rgba(128, 128, 128, 0.1)",visible:C.visible??!0,alignment:C.alignment??"outside",radius:C.radius??T.radius??4,margin:C.margin??4,overflowX:C.overflowX??!0,overflowY:C.overflowY??!0}),[C,T.radius]),F=xe(()=>{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]),ge=xe(()=>({enabled:q.enabled??!0,excludeClasses:q.excludeClasses??[],excludeSelectors:q.excludeSelectors??[]}),[q]),a=xe(()=>({enabled:N.enabled??!0,delay:N.delay??1500,delayOnWheel:N.delayOnWheel??700,initialDelay:N.initialDelay??200}),[N]),[ae,vt]=m(()=>(N.initialDelay??200)>0),b=T.width,yt=r.width,Oe=T.minHeight,Y=F.visible,Se=F.step,P=f(()=>{if(!l.current)return;let e=document.activeElement;e&&l.current.contains(e)&&e!==l.current||l.current.focus()},[]);Wt(te,()=>({getScrollContainer:()=>l.current,scrollTo:e=>{l.current&&l.current.scrollTo(e)},get scrollTop(){return l.current?.scrollTop||0},get scrollHeight(){return l.current?.scrollHeight||0},get clientHeight(){return l.current?.clientHeight||0}}),[]);let d=f(()=>{if(s.current){let t=s.current;if(document.contains(t)&&(t.scrollHeight>t.clientHeight+2||t.scrollWidth>t.clientWidth+2))return t;s.current=null}if(!l.current)return null;if(l.current.scrollHeight>l.current.clientHeight+2||l.current.scrollWidth>l.current.clientWidth+2)return s.current=l.current,l.current;if(!pe)return null;let e=l.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!==l.current&&o.classList.contains("overlay-scrollbar-container"))continue;let i=o.parentElement,n=!1;for(;i&&i!==l.current;){if(i.classList.contains("overlay-scrollbar-container")&&i!==l.current){n=!0;break}i=i.parentElement}if(!n&&(o.scrollHeight>o.clientHeight+2||o.scrollWidth>o.clientWidth+2))return s.current=o,o}return null},[]),V=f(()=>d()!==null,[d]),g=f(()=>{be.current&&(clearTimeout(be.current),be.current=null)},[]),Ce=f(()=>{Q.current&&(clearTimeout(Q.current),Q.current=null)},[]),rt=f(()=>{ee.current&&(clearTimeout(ee.current),ee.current=null)},[]),xt=f(()=>{Ce(),!(B||X||K||ie.current)&&(g(),x(!1))},[g,Ce,B,X,K]),h=f(e=>{a.enabled&&(g(),be.current=setTimeout(()=>{x(!1),be.current=null},e))},[g,a.enabled]),u=f(()=>{let e=d()??l.current;if(!e){x(!1),Ge(!1),Qe(!1),g();return}!a.enabled&&!ae&&(x(!0),g());let t=e.clientHeight,o=e.scrollHeight,i=e.scrollTop,n=e.clientWidth,c=e.scrollWidth,v=e.scrollLeft,M=o-t>0,p=c-n>0,ce=M||p;Ge(M),Qe(p),ce||(x(!1),g());let ve=0,D=0;if(Te.current){let Z=window.getComputedStyle(Te.current),J=parseFloat(Z.paddingTop)||0;D=parseFloat(Z.paddingBottom)||0,ve=J+D,gt(D)}if(M){let Z=Y?b*2+r.margin*4:r.margin*2,J=t-Z+ve,He=t/o,se=Math.max(J*He,Oe),nt=o-t,Lt=J-se,Dt=nt>0?i/nt*Lt:0;qe(se),Re(Dt)}else qe(0),Re(0);let ye=c-n;if(ye>0){let Z=n/c,J=Math.max(n*Z,50),He=n-J,se=ye>0?v/ye*He:0;Ze(J),Je(se)}else Ze(0),Je(0)},[d,g,Y,b,Oe,a.enabled,ae]),Tt=f(e=>{e.preventDefault(),e.stopPropagation();let t=d();t&&(Be(!0),ut({y:e.clientY,scrollTop:t.scrollTop}),g(),x(!0),P())},[d,g,P]),Pe=f(e=>{if(!B)return;let t=d();if(!t)return;let o=t.clientHeight,n=t.scrollHeight-o,c=e.clientY-De.y,v=o-fe,M=c/v*n,p=Math.max(0,Math.min(n,De.scrollTop+M));t.scrollTop=p,u()},[B,De,fe,u,d]),Ae=f(()=>{Be(!1),V()&&h(a.delay)},[V,h,a.delay]),wt=f(e=>{if(!j.current)return;let o=j.current.getBoundingClientRect(),i=e.clientY-o.top,n=d();if(!n)return;let c=n.clientHeight,v=n.scrollHeight,p=i/c*(v-c);n.scrollTop=Math.max(0,Math.min(v-c,p)),u(),x(!0),h(a.delay),P()},[u,h,a.delay,d,P]),Mt=f(e=>{if(e.preventDefault(),e.stopPropagation(),!l.current)return;let t=Math.max(0,l.current.scrollTop-Se);l.current.scrollTop=t,u(),x(!0),h(a.delay),P()},[u,h,Se,a.delay,P]),Et=f(e=>{if(e.preventDefault(),e.stopPropagation(),!l.current||!G.current)return;let t=l.current,i=G.current.scrollHeight-t.clientHeight,n=Math.min(i,t.scrollTop+Se);t.scrollTop=n,u(),x(!0),h(a.delay),P()},[u,h,Se,a.delay,P]),St=f(e=>{e.preventDefault(),e.stopPropagation();let t=d();t&&(Ve(!0),pt({x:e.clientX,scrollLeft:t.scrollLeft}),g(),x(!0),P())},[d,g,P]),$e=f(e=>{if(!X)return;let t=d();if(!t)return;let o=t.clientWidth,n=t.scrollWidth-o,c=e.clientX-ke.x,v=o-Ie,M=c/v*n,p=Math.max(0,Math.min(n,ke.scrollLeft+M));t.scrollLeft=p,u()},[X,ke,Ie,u,d]),ze=f(()=>{Ve(!1),V()&&h(a.delay)},[V,h,a.delay]),Ct=f(e=>{if(!j.current)return;let o=j.current.getBoundingClientRect(),i=e.clientX-o.left,n=d();if(!n)return;let c=n.clientWidth,v=n.scrollWidth,p=i/c*(v-c);n.scrollLeft=Math.max(0,Math.min(v-c,p)),u(),x(!0),h(a.delay),P()},[u,h,a.delay,d,P]),Ht=f(e=>{if(!ge.enabled||e.defaultPrevented)return;let t=e.target,o=l.current;if(!o||!o.contains(t)||Le(t,ge)||e.button!==0)return;let i=d();i&&(i.scrollHeight<=i.clientHeight&&i.scrollWidth<=i.clientWidth||(e.preventDefault(),ie.current=!0,ht({x:e.clientX,y:e.clientY,scrollTop:i.scrollTop,scrollLeft:i.scrollLeft||0}),g()))},[ge,Le,d,g]),Ne=f(e=>{if(!ie.current&&!K)return;let t=d();if(!t)return;let o=he.x-e.clientX,i=he.y-e.clientY;if(Math.abs(i)<5&&Math.abs(o)<5)return;ie.current&&(ie.current=!1,et(!0)),x(!0);let n=Math.max(0,Math.min(t.scrollHeight-t.clientHeight,he.scrollTop+i)),c=Math.max(0,Math.min(t.scrollWidth-t.clientWidth,he.scrollLeft+o));t.scrollTop=n,t.scrollLeft=c,u()},[K,he,d,u]),Fe=f(()=>{let e=K;ie.current=!1,et(!1),e&&V()&&h(a.delay)},[K,V,h,a.delay]);$(()=>{let e=c=>{if(u(),ae){I&&I(c);return}g(),x(!0),rt();let v=tt?a.delayOnWheel:a.delay;h(v),I&&I(c)},t=()=>{ot(!0),me.current&&clearTimeout(me.current),me.current=setTimeout(()=>{ot(!1)},300),rt(),ee.current=setTimeout(()=>{x(!0),ee.current=null,h(a.delayOnWheel)},50)},o=[],i=d();i&&o.push(i);let n=l.current;return n&&!i&&(o.push(n),n.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]').forEach(v=>{let M=v;if(M!==n&&M.classList.contains("overlay-scrollbar-container"))return;let p=M.parentElement;for(;p&&p!==n;){if(p.classList.contains("overlay-scrollbar-container")&&p!==n)return;p=p.parentElement}o.push(M)})),o.forEach(c=>{c.addEventListener("scroll",e,{passive:!0}),c.addEventListener("wheel",t,{passive:!0})}),()=>{o.forEach(c=>{c.removeEventListener("scroll",e),c.removeEventListener("wheel",t)}),me.current&&clearTimeout(me.current),ee.current&&clearTimeout(ee.current)}},[d,u,I,g,h,a,tt,ae]),$(()=>{let e=o=>{let i=o.target;if(o.defaultPrevented||i instanceof Element&&Le(i,ge))return;let n=d();if(!n)return;let{key:c}=o,{scrollTop:v,scrollHeight:M,clientHeight:p}=n,ce=M-p,ve=50,D=null;switch(c){case"ArrowUp":o.preventDefault(),D=Math.max(0,v-ve);break;case"ArrowDown":o.preventDefault(),D=Math.min(ce,v+ve);break;case"PageUp":o.preventDefault(),D=Math.max(0,v-p);break;case"PageDown":o.preventDefault(),D=Math.min(ce,v+p);break;case"Home":o.preventDefault(),D=0;break;case"End":o.preventDefault(),D=ce;break;default:return}if(D!==null){let ye=D/ce,Z=Y?b*2+r.margin*4:r.margin*2,se=(p-Z-fe)*ye;Re(se),n.scrollTop=D,g(),x(!0),h(a.delay)}},t=l.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}},[d,Y,b,r.margin,fe,g,h,a.delay,ge]),$(()=>(document.addEventListener("mousemove",Ne),document.addEventListener("mouseup",Fe),()=>{document.removeEventListener("mousemove",Ne),document.removeEventListener("mouseup",Fe)}),[K,Ne,Fe]),$(()=>{if(B)return document.addEventListener("mousemove",Pe),document.addEventListener("mouseup",Ae),()=>{document.removeEventListener("mousemove",Pe),document.removeEventListener("mouseup",Ae)}},[B,Pe,Ae]),$(()=>{if(X)return document.addEventListener("mousemove",$e),document.addEventListener("mouseup",ze),()=>{document.removeEventListener("mousemove",$e),document.removeEventListener("mouseup",ze)}},[X,$e,ze]),$(()=>{u();let e=setTimeout(()=>{u()},100);return()=>clearTimeout(e)},[u]),Ot(()=>{mt(!0),u(),!a.enabled&&!ae&&V()&&x(!0)},[V,u,a.enabled,ae]),$(()=>{if(a.initialDelay>0){let e=setTimeout(()=>{vt(!1)},a.initialDelay);return()=>clearTimeout(e)}},[a.initialDelay]),$(()=>{let e=new ResizeObserver(()=>{u()}),t=[];return l.current&&t.push(l.current),G.current&&t.push(G.current),s.current&&document.contains(s.current)&&t.push(s.current),t.forEach(o=>{e.observe(o)}),()=>e.disconnect()},[u]),$(()=>{if(!l.current)return;let e=new MutationObserver(()=>{s.current=null,u()});return e.observe(l.current,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style"]}),()=>e.disconnect()},[u]);let L=Math.max(yt,b);return $(()=>{let e="overlay-scrollbar-webkit-hide",t=document.getElementById(e);t&&t.remove();let o=document.createElement("style");return o.id=e,o.textContent=`
|
|
1
|
+
import{useRef as A,useEffect as N,useState as b,useCallback as p,useMemo as xe,forwardRef as zt,useImperativeHandle as Nt,useLayoutEffect as Ft}from"react";var Wt=["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"],Le=(M,C)=>{if(M instanceof HTMLElement&&M.isContentEditable||M.closest('[role="textbox"],[role="searchbox"]'))return!0;let E=M.tagName.toLowerCase();if(E==="input"){let d=(M.type||"text").toLowerCase();return!["button","submit","reset","image","hidden"].includes(d)}if(["textarea","select","button"].includes(E)||["svg","path","circle","rect","line","polygon","polyline"].includes(E)||M.getAttribute("contenteditable")==="true")return!0;if(C?.excludeSelectors){for(let d of C.excludeSelectors)if(M.matches(d))return!0}return Ot(M,C)},Ot=(M,C)=>{let E=[...Wt,...C?.excludeClasses||[]],d=M,$=0,P=5;for(;d&&$<=P;){if(E.some(H=>d.classList.contains(H)))return!0;if(d.classList.contains("MuiDialogContent-root"))break;d=d.parentElement,$++}return!1};import{useEffect as ct,useRef as oe,useState as st}from"react";var ut=({containerRef:M,config:C})=>{let E=C.enabled??!0,d=C.threshold??80,$=C.maxDistance??d*2,P=C.onRefresh,[H,L]=st(0),[W,G]=st(!1),F=oe(0),de=oe(0),j=oe(!1),J=oe(!1),re=oe(!1),fe=oe(0),U=oe(!1);return ct(()=>{U.current=W},[W]),ct(()=>{let x=M.current;if(!x||!(E&&typeof P=="function"))return;let Re=h=>{let D=h instanceof Element?h:null;for(;D&&D!==x;){if(D instanceof HTMLElement&&D.scrollHeight>D.clientHeight+1&&D.scrollTop>0)return!1;D=D.parentElement}return!0},ne=h=>{j.current=!1,J.current=!1,re.current=!1,!U.current&&h.touches.length===1&&x.scrollTop===0&&Re(h.target)&&(j.current=!0,F.current=h.touches[0].clientY,de.current=h.touches[0].clientX)},r=h=>{if(!j.current||U.current||h.touches.length!==1)return;let D=h.touches[0].clientY-F.current,z=h.touches[0].clientX-de.current;if(!J.current){if(D<=0||x.scrollTop>0){j.current=!1;return}if(D>8&&D>Math.abs(z))J.current=!0,re.current=x.scrollTop<0;else return}!re.current&&h.cancelable&&h.preventDefault();let le=Math.min(Math.max(D,0)*.5,$);fe.current=le,L(le)},_=()=>{if(!j.current||(j.current=!1,!J.current))return;J.current=!1,re.current=!1;let h=fe.current;fe.current=0,h>=d&&!U.current?(G(!0),L(d),Promise.resolve().then(()=>P()).catch(()=>{}).finally(()=>{G(!1),L(0)})):L(0)};return x.addEventListener("touchstart",ne,{passive:!0}),x.addEventListener("touchmove",r,{passive:!1}),x.addEventListener("touchend",_,{passive:!0}),x.addEventListener("touchcancel",_,{passive:!0}),()=>{x.removeEventListener("touchstart",ne),x.removeEventListener("touchmove",r),x.removeEventListener("touchend",_),x.removeEventListener("touchcancel",_)}},[M,E,P,d,$]),{pullDistance:H,isRefreshing:W,pullProgress:Math.min(H/d,1),pullThreshold:d}};import{useEffect as At,useState as $t}from"react";function dt(){let[M,C]=$t(()=>typeof window>"u"||typeof window.matchMedia!="function"?!1:window.matchMedia("(pointer: coarse)").matches);return At(()=>{if(typeof window>"u"||typeof window.matchMedia!="function")return;let E=window.matchMedia("(pointer: coarse)"),d=$=>C($.matches);return C(E.matches),typeof E.addEventListener=="function"?(E.addEventListener("change",d),()=>E.removeEventListener("change",d)):(E.addListener(d),()=>E.removeListener(d))},[]),M}import{jsx as I,jsxs as Xe}from"react/jsx-runtime";var _t={},Bt={},Ut={},Xt={},qt={},Yt={},Gt=zt(({className:M="",style:C={},containerStyle:E={},contentStyle:d={},children:$,onScroll:P,thumb:H=_t,track:L=Bt,arrows:W=Ut,dragScroll:G=Xt,autoHide:F=qt,pullToRefresh:de=Yt,showScrollbar:j=!0,showHorizontalScrollbar:J=!0,detectInnerScroll:re=!1},fe)=>{let U=dt(),x=U?!1:j,De=U?!1:J,Re=A({});N(()=>{Re.current={children:$,onScroll:P,showScrollbar:x,showHorizontalScrollbar:De,thumb:H,track:L,arrows:W,dragScroll:G,autoHide:F}});let ne=A(null),r=A(null),_=A(null),h=A(null),D=A(null),z=A(null),{pullDistance:le,isRefreshing:we,pullProgress:ke}=ut({containerRef:r,config:de}),qe=de.indicatorColor??"#1976d2",pt=le>0||we,[Te,w]=b(!1),[X,Ye]=b(!1),[Ge,je]=b(!1),[Ie,ht]=b({y:0,scrollTop:0}),[pe,Ke]=b(0),[mt,Pe]=b(0),[ie,Ve]=b(!1),[Ze,Qe]=b(!1),[q,Je]=b(!1),[We,bt]=b({x:0,scrollLeft:0}),[Oe,et]=b(0),[Ae,tt]=b(0),[gt,ot]=b(!1),ae=A(!1),[K,rt]=b(!1),[he,vt]=b({x:0,y:0,scrollTop:0,scrollLeft:0}),[jt,Kt]=b(null),[Me,Ee]=b(null),[Vt,yt]=b(!1),[xt,wt]=b(0),me=A(null),[nt,lt]=b(!1),be=A(null),ee=A(null),te=A(null),T=xe(()=>{let e=H.color??"#606060";return{width:H.width??8,minHeight:H.minHeight??50,radius:H.radius??(H.width??8)/2,color:e,opacity:H.opacity??.6,hoverColor:H.hoverColor??e,hoverOpacity:H.hoverOpacity??1}},[H]),n=xe(()=>({width:L.width??16,color:L.color??"rgba(128, 128, 128, 0.1)",visible:L.visible??!0,alignment:L.alignment??"outside",radius:L.radius??T.radius??4,margin:L.margin??4,overflowX:L.overflowX??!0,overflowY:L.overflowY??!0}),[L,T.radius]),B=xe(()=>{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]),ge=xe(()=>({enabled:U?!1:G.enabled??!0,excludeClasses:G.excludeClasses??[],excludeSelectors:G.excludeSelectors??[]}),[G,U]),a=xe(()=>({enabled:F.enabled??!0,delay:F.delay??1500,delayOnWheel:F.delayOnWheel??700,initialDelay:F.initialDelay??200}),[F]),[ce,Tt]=b(()=>(F.initialDelay??200)>0),g=T.width,Mt=n.width,$e=T.minHeight,Y=B.visible,Se=B.step,O=p(()=>{if(!r.current)return;let e=document.activeElement;e&&r.current.contains(e)&&e!==r.current||r.current.focus()},[]);Nt(fe,()=>({getScrollContainer:()=>r.current,scrollTo:e=>{r.current&&r.current.scrollTo(e)},get scrollTop(){return r.current?.scrollTop||0},get scrollHeight(){return r.current?.scrollHeight||0},get clientHeight(){return r.current?.clientHeight||0}}),[]);let u=p(()=>{if(z.current){let t=z.current;if(document.contains(t)&&(t.scrollHeight>t.clientHeight+2||t.scrollWidth>t.clientWidth+2))return t;z.current=null}if(!r.current)return null;if(r.current.scrollHeight>r.current.clientHeight+2||r.current.scrollWidth>r.current.clientWidth+2)return z.current=r.current,r.current;if(!re)return null;let e=r.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!==r.current&&o.classList.contains("overlay-scrollbar-container"))continue;let i=o.parentElement,l=!1;for(;i&&i!==r.current;){if(i.classList.contains("overlay-scrollbar-container")&&i!==r.current){l=!0;break}i=i.parentElement}if(!l&&(o.scrollHeight>o.clientHeight+2||o.scrollWidth>o.clientWidth+2))return z.current=o,o}return null},[]),V=p(()=>u()!==null,[u]),v=p(()=>{be.current&&(clearTimeout(be.current),be.current=null)},[]),Ce=p(()=>{ee.current&&(clearTimeout(ee.current),ee.current=null)},[]),it=p(()=>{te.current&&(clearTimeout(te.current),te.current=null)},[]),Et=p(()=>{Ce(),!(X||q||K||ae.current)&&(v(),w(!1))},[v,Ce,X,q,K]),m=p(e=>{a.enabled&&(v(),be.current=setTimeout(()=>{w(!1),be.current=null},e))},[v,a.enabled]),s=p(()=>{let e=u()??r.current;if(!e){w(!1),Ve(!1),ot(!1),v();return}!a.enabled&&!ce&&(w(!0),v());let t=e.clientHeight,o=e.scrollHeight,i=e.scrollTop,l=e.clientWidth,c=e.scrollWidth,y=e.scrollLeft,S=o-t>0,f=c-l>0,se=S||f;Ve(S),ot(f),se||(w(!1),v());let ve=0,k=0;if(ne.current){let Z=window.getComputedStyle(ne.current),Q=parseFloat(Z.paddingTop)||0;k=parseFloat(Z.paddingBottom)||0,ve=Q+k,wt(k)}if(S){let Z=Y?g*2+n.margin*4:n.margin*2,Q=t-Z+ve,He=t/o,ue=Math.max(Q*He,$e),at=o-t,It=Q-ue,Pt=at>0?i/at*It:0;Ke(ue),Pe(Pt)}else Ke(0),Pe(0);let ye=c-l;if(ye>0){let Z=l/c,Q=Math.max(l*Z,50),He=l-Q,ue=ye>0?y/ye*He:0;et(Q),tt(ue)}else et(0),tt(0)},[u,v,Y,g,$e,a.enabled,ce]),St=p(e=>{e.preventDefault(),e.stopPropagation();let t=u();t&&(Ye(!0),ht({y:e.clientY,scrollTop:t.scrollTop}),v(),w(!0),O())},[u,v,O]),ze=p(e=>{if(!X)return;let t=u();if(!t)return;let o=t.clientHeight,l=t.scrollHeight-o,c=e.clientY-Ie.y,y=o-pe,S=c/y*l,f=Math.max(0,Math.min(l,Ie.scrollTop+S));t.scrollTop=f,s()},[X,Ie,pe,s,u]),Ne=p(()=>{Ye(!1),V()&&m(a.delay)},[V,m,a.delay]),Ct=p(e=>{if(!h.current)return;let o=h.current.getBoundingClientRect(),i=e.clientY-o.top,l=u();if(!l)return;let c=l.clientHeight,y=l.scrollHeight,f=i/c*(y-c);l.scrollTop=Math.max(0,Math.min(y-c,f)),s(),w(!0),m(a.delay),O()},[s,m,a.delay,u,O]),Ht=p(e=>{if(e.preventDefault(),e.stopPropagation(),!r.current)return;let t=Math.max(0,r.current.scrollTop-Se);r.current.scrollTop=t,s(),w(!0),m(a.delay),O()},[s,m,Se,a.delay,O]),Lt=p(e=>{if(e.preventDefault(),e.stopPropagation(),!r.current||!_.current)return;let t=r.current,i=_.current.scrollHeight-t.clientHeight,l=Math.min(i,t.scrollTop+Se);t.scrollTop=l,s(),w(!0),m(a.delay),O()},[s,m,Se,a.delay,O]),Dt=p(e=>{e.preventDefault(),e.stopPropagation();let t=u();t&&(Je(!0),bt({x:e.clientX,scrollLeft:t.scrollLeft}),v(),w(!0),O())},[u,v,O]),Fe=p(e=>{if(!q)return;let t=u();if(!t)return;let o=t.clientWidth,l=t.scrollWidth-o,c=e.clientX-We.x,y=o-Oe,S=c/y*l,f=Math.max(0,Math.min(l,We.scrollLeft+S));t.scrollLeft=f,s()},[q,We,Oe,s,u]),_e=p(()=>{Je(!1),V()&&m(a.delay)},[V,m,a.delay]),Rt=p(e=>{if(!h.current)return;let o=h.current.getBoundingClientRect(),i=e.clientX-o.left,l=u();if(!l)return;let c=l.clientWidth,y=l.scrollWidth,f=i/c*(y-c);l.scrollLeft=Math.max(0,Math.min(y-c,f)),s(),w(!0),m(a.delay),O()},[s,m,a.delay,u,O]),kt=p(e=>{if(!ge.enabled||e.defaultPrevented)return;let t=e.target,o=r.current;if(!o||!o.contains(t)||Le(t,ge)||e.button!==0)return;let i=u();i&&(i.scrollHeight<=i.clientHeight&&i.scrollWidth<=i.clientWidth||(e.preventDefault(),ae.current=!0,vt({x:e.clientX,y:e.clientY,scrollTop:i.scrollTop,scrollLeft:i.scrollLeft||0}),v()))},[ge,Le,u,v]),Be=p(e=>{if(!ae.current&&!K)return;let t=u();if(!t)return;let o=he.x-e.clientX,i=he.y-e.clientY;if(Math.abs(i)<5&&Math.abs(o)<5)return;ae.current&&(ae.current=!1,rt(!0)),w(!0);let l=Math.max(0,Math.min(t.scrollHeight-t.clientHeight,he.scrollTop+i)),c=Math.max(0,Math.min(t.scrollWidth-t.clientWidth,he.scrollLeft+o));t.scrollTop=l,t.scrollLeft=c,s()},[K,he,u,s]),Ue=p(()=>{let e=K;ae.current=!1,rt(!1),e&&V()&&m(a.delay)},[K,V,m,a.delay]);N(()=>{let e=c=>{if(s(),ce){P&&P(c);return}v(),w(!0),it();let y=nt?a.delayOnWheel:a.delay;m(y),P&&P(c)},t=()=>{lt(!0),me.current&&clearTimeout(me.current),me.current=setTimeout(()=>{lt(!1)},300),it(),te.current=setTimeout(()=>{w(!0),te.current=null,m(a.delayOnWheel)},50)},o=[],i=u();i&&o.push(i);let l=r.current;return l&&!i&&(o.push(l),l.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]').forEach(y=>{let S=y;if(S!==l&&S.classList.contains("overlay-scrollbar-container"))return;let f=S.parentElement;for(;f&&f!==l;){if(f.classList.contains("overlay-scrollbar-container")&&f!==l)return;f=f.parentElement}o.push(S)})),o.forEach(c=>{c.addEventListener("scroll",e,{passive:!0}),c.addEventListener("wheel",t,{passive:!0})}),()=>{o.forEach(c=>{c.removeEventListener("scroll",e),c.removeEventListener("wheel",t)}),me.current&&clearTimeout(me.current),te.current&&clearTimeout(te.current)}},[u,s,P,v,m,a,nt,ce]),N(()=>{let e=o=>{let i=o.target;if(o.defaultPrevented||i instanceof Element&&Le(i,ge))return;let l=u();if(!l)return;let{key:c}=o,{scrollTop:y,scrollHeight:S,clientHeight:f}=l,se=S-f,ve=50,k=null;switch(c){case"ArrowUp":o.preventDefault(),k=Math.max(0,y-ve);break;case"ArrowDown":o.preventDefault(),k=Math.min(se,y+ve);break;case"PageUp":o.preventDefault(),k=Math.max(0,y-f);break;case"PageDown":o.preventDefault(),k=Math.min(se,y+f);break;case"Home":o.preventDefault(),k=0;break;case"End":o.preventDefault(),k=se;break;default:return}if(k!==null){let ye=k/se,Z=Y?g*2+n.margin*4:n.margin*2,ue=(f-Z-pe)*ye;Pe(ue),l.scrollTop=k,v(),w(!0),m(a.delay)}},t=r.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}},[u,Y,g,n.margin,pe,v,m,a.delay,ge]),N(()=>(document.addEventListener("mousemove",Be),document.addEventListener("mouseup",Ue),()=>{document.removeEventListener("mousemove",Be),document.removeEventListener("mouseup",Ue)}),[K,Be,Ue]),N(()=>{if(X)return document.addEventListener("mousemove",ze),document.addEventListener("mouseup",Ne),()=>{document.removeEventListener("mousemove",ze),document.removeEventListener("mouseup",Ne)}},[X,ze,Ne]),N(()=>{if(q)return document.addEventListener("mousemove",Fe),document.addEventListener("mouseup",_e),()=>{document.removeEventListener("mousemove",Fe),document.removeEventListener("mouseup",_e)}},[q,Fe,_e]),N(()=>{s();let e=setTimeout(()=>{s()},100);return()=>clearTimeout(e)},[s]),Ft(()=>{yt(!0),s(),!a.enabled&&!ce&&V()&&w(!0)},[V,s,a.enabled,ce]),N(()=>{if(a.initialDelay>0){let e=setTimeout(()=>{Tt(!1)},a.initialDelay);return()=>clearTimeout(e)}},[a.initialDelay]),N(()=>{let e=new ResizeObserver(()=>{s()}),t=[];return r.current&&t.push(r.current),_.current&&t.push(_.current),z.current&&document.contains(z.current)&&t.push(z.current),t.forEach(o=>{e.observe(o)}),()=>e.disconnect()},[s]),N(()=>{if(!r.current)return;let e=new MutationObserver(()=>{z.current=null,s()});return e.observe(r.current,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style"]}),()=>e.disconnect()},[s]);let R=Math.max(Mt,g);return N(()=>{let e="overlay-scrollbar-webkit-hide",t=document.getElementById(e);t&&t.remove();let o=document.createElement("style");return o.id=e,o.textContent=`
|
|
2
2
|
/* \uBAA8\uB4E0 \uC2A4\uD06C\uB864\uBC14 \uC228\uAE30\uAE30 */
|
|
3
3
|
.overlay-scrollbar-container {
|
|
4
4
|
scrollbar-width: none !important;
|
|
@@ -43,5 +43,5 @@ import{useRef as A,useEffect as $,useState as m,useCallback as f,useMemo as xe,f
|
|
|
43
43
|
from { transform: rotate(0deg); }
|
|
44
44
|
to { transform: rotate(360deg); }
|
|
45
45
|
}
|
|
46
|
-
`,document.head.appendChild(o),()=>{let i=document.getElementById(e);i&&i.remove()}},[]),
|
|
46
|
+
`,document.head.appendChild(o),()=>{let i=document.getElementById(e);i&&i.remove()}},[]),Xe("div",{ref:ne,className:`overlay-scrollbar-wrapper ${M}`,onMouseLeave:Et,style:{display:"flex",flexDirection:"column",position:"relative",minHeight:0,height:"100%",flex:"1 1 0%",overflow:"visible",...C},children:[pt&&I("div",{className:"overlay-scrollbar-pull-indicator",style:{position:"absolute",top:0,left:"50%",transform:`translate(-50%, ${le-56}px)`,transition:we?"transform 0.15s ease-out":le===0?"transform 0.2s ease-out":"none",width:48,height:48,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:we?1:Math.min(ke*1.5,1)},children:we?I("svg",{width:"28",height:"28",viewBox:"0 0 24 24",style:{animation:"overlay-scrollbar-ptr-spin 0.8s linear infinite"},children:I("circle",{cx:"12",cy:"12",r:"9",fill:"none",stroke:qe,strokeWidth:"2.5",strokeLinecap:"round",strokeDasharray:"42",strokeDashoffset:"14"})}):I("svg",{width:"28",height:"28",viewBox:"0 0 24 24",style:{transform:`rotate(${ke*270}deg)`,opacity:ke>=1?1:.6},children:I("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:qe})})}),I("div",{ref:r,className:"overlay-scrollbar-container",tabIndex:-1,onMouseDown:kt,style:{display:"flex",width:"100%",flex:"1 1 auto",minHeight:0,overflow:"auto",scrollbarWidth:"none",msOverflowStyle:"none",outline:"none",userSelect:K?"none":"auto",...E},children:I("div",{ref:_,className:"overlay-scrollbar-content",style:{flex:"1 1 0%",minHeight:0,display:"flex",flexDirection:"column",boxSizing:"border-box",...d},children:$})}),x&&ie&&(n.overflowY??!0)&&Xe("div",{ref:h,className:"overlay-scrollbar-track",onMouseEnter:()=>{v(),ee.current=setTimeout(()=>{w(!0),ee.current=null},100)},onMouseLeave:()=>{Ce(),X||m(a.delay)},style:{position:"absolute",top:0,right:0,width:`${R}px`,height:"100%",opacity:Te?1:0,transition:"opacity 0.2s ease-in-out",cursor:"pointer",zIndex:1e3,pointerEvents:"auto"},children:[n.visible&&I("div",{className:"overlay-scrollbar-track-background",onClick:e=>{e.preventDefault(),e.stopPropagation(),Ct(e)},style:{position:"absolute",top:Y?`${T.width+n.margin*2}px`:`${n.margin}px`,right:n.alignment==="outside"?"0px":`${(R-T.width)/2}px`,width:`${T.width}px`,height:Y?`calc(100% - ${T.width*2+n.margin*4}px)`:`calc(100% - ${n.margin*2}px)`,backgroundColor:n.color,borderRadius:`${n.radius}px`,cursor:"pointer"}}),I("div",{ref:D,className:"overlay-scrollbar-thumb",onMouseDown:St,onMouseEnter:()=>je(!0),onMouseLeave:()=>je(!1),style:{position:"absolute",top:`${(Y?g+n.margin*2:n.margin)+mt}px`,right:n.alignment==="outside"?"0px":`${(R-g)/2}px`,width:`${g}px`,height:`${Math.max(pe,$e)}px`,backgroundColor:Ge||X?T.hoverColor:T.color,opacity:Ge||X?T.hoverOpacity:T.opacity,borderRadius:`${T.radius}px`,cursor:"pointer",transition:"background-color 0.2s ease-in-out, opacity 0.2s ease-in-out"}})]}),x&&ie&&Y&&I("div",{className:"overlay-scrollbar-up-arrow",onClick:Ht,onMouseEnter:()=>Ee("up"),onMouseLeave:()=>Ee(null),style:{position:"absolute",top:`${n.margin}px`,right:n.alignment==="outside"?"0px":`${(R-g)/2}px`,width:`${g}px`,height:`${g}px`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:`${Math.max(g*.75,8)}px`,color:Me==="up"?B.hoverColor:B.color,userSelect:"none",zIndex:1001,opacity:Te?Me==="up"?B.hoverOpacity:B.opacity:0,transition:"opacity 0.2s ease-in-out, color 0.15s ease-in-out"},children:"\u25B2"}),x&&ie&&Y&&I("div",{className:"overlay-scrollbar-down-arrow",onClick:Lt,onMouseEnter:()=>Ee("down"),onMouseLeave:()=>Ee(null),style:{position:"absolute",bottom:`${n.margin}px`,right:n.alignment==="outside"?"0px":`${(R-g)/2}px`,width:`${g}px`,height:`${g}px`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:`${Math.max(g*.75,8)}px`,color:Me==="down"?B.hoverColor:B.color,userSelect:"none",zIndex:1001,opacity:Te?Me==="down"?B.hoverOpacity:B.opacity:0,transition:"opacity 0.2s ease-in-out, color 0.15s ease-in-out"},children:"\u25BC"}),x&&De&>&&(n.overflowX??!0)&&Xe("div",{className:"overlay-scrollbar-horizontal-track",onMouseEnter:()=>{v(),ee.current=setTimeout(()=>{w(!0),ee.current=null},100)},onMouseLeave:()=>{Ce(),q||m(a.delay)},style:{position:"absolute",bottom:`${xt}px`,left:0,width:"100%",height:`${R}px`,opacity:Te?1:0,transition:"opacity 0.2s ease-in-out",cursor:"pointer",zIndex:1e3,pointerEvents:"auto"},children:[n.visible&&I("div",{className:"overlay-scrollbar-horizontal-track-background",onClick:e=>{e.preventDefault(),e.stopPropagation(),Rt(e)},style:{position:"absolute",bottom:n.alignment==="outside"?"0px":`${(R-g)/2}px`,left:`${n.margin}px`,right:ie?n.alignment==="outside"?`${R-n.margin}px`:`${R}px`:`${n.margin}px`,height:`${g}px`,backgroundColor:n.color,borderRadius:`${n.radius}px`,cursor:"pointer"}}),I("div",{className:"overlay-scrollbar-horizontal-thumb",onMouseDown:Dt,onMouseEnter:()=>Qe(!0),onMouseLeave:()=>Qe(!1),style:{position:"absolute",bottom:n.alignment==="outside"?"0px":`${(R-g)/2}px`,left:`${n.margin+Ae}px`,right:ie?n.alignment==="outside"?`${R-n.margin}px`:`${R}px`:"auto",maxWidth:ie?n.alignment==="outside"?`calc(100% - ${n.margin+Ae+R-n.margin}px)`:`calc(100% - ${n.margin+Ae+R}px)`:"none",width:`${Math.max(Oe,50)}px`,height:`${g}px`,backgroundColor:Ze||q?T.hoverColor:T.color,opacity:Ze||q?T.hoverOpacity:T.opacity,borderRadius:`${T.radius}px`,cursor:"pointer",transition:"background-color 0.2s ease-in-out, opacity 0.2s ease-in-out"}})]})]})}),ft=Gt;export{ft as OverlayScrollbar,ft as default};
|
|
47
47
|
//# sourceMappingURL=index.esm.js.map
|