@geneui/components 3.0.0-next-9ffcb93-16102024 → 3.0.0-next-48d0ef7-31102024

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (248) hide show
  1. package/Avatar.js +63 -0
  2. package/CHANGELOG.md +7 -0
  3. package/Divider.js +23 -0
  4. package/{GeneUIProvider/index.js → GeneUIProvider.js} +52 -65
  5. package/HelperText.js +69 -0
  6. package/Info.js +64 -0
  7. package/Label.js +38 -0
  8. package/Loader.js +21 -0
  9. package/Pill.js +64 -0
  10. package/TextLink.js +20 -0
  11. package/{index-65217440.js → Tooltip.js} +104 -80
  12. package/{lib → components}/atoms/Avatar/Avatar.d.ts +7 -6
  13. package/components/atoms/Avatar/index.d.ts +1 -0
  14. package/{lib → components}/atoms/Divider/Divider.d.ts +5 -5
  15. package/components/atoms/Divider/index.d.ts +1 -0
  16. package/{lib → components}/atoms/HelperText/HelperText.d.ts +6 -5
  17. package/components/atoms/HelperText/index.d.ts +1 -0
  18. package/{lib → components}/atoms/Info/Info.d.ts +5 -5
  19. package/components/atoms/Info/index.d.ts +1 -0
  20. package/{lib → components}/atoms/Label/Label.d.ts +3 -3
  21. package/components/atoms/Label/index.d.ts +1 -0
  22. package/{lib → components}/atoms/Loader/Loader.d.ts +5 -5
  23. package/components/atoms/Loader/index.d.ts +1 -0
  24. package/{lib → components}/atoms/Pill/Pill.d.ts +7 -6
  25. package/components/atoms/Pill/index.d.ts +1 -0
  26. package/{lib → components}/atoms/TextLink/TextLink.d.ts +5 -5
  27. package/components/atoms/TextLink/index.d.ts +1 -0
  28. package/{lib → components}/molecules/Tooltip/Tooltip.d.ts +26 -21
  29. package/components/molecules/Tooltip/index.d.ts +1 -0
  30. package/components/providers/GeneUIProvider/GeneUIProvider.d.ts +30 -0
  31. package/components/providers/GeneUIProvider/index.d.ts +1 -0
  32. package/hooks/index.d.ts +2 -20
  33. package/hooks/useDebounceCallback/index.d.ts +1 -0
  34. package/hooks/useDebounceCallback/useDebounceCallback.d.ts +2 -0
  35. package/hooks/useEllipsisDetection/index.d.ts +1 -1
  36. package/hooks/useEllipsisDetection/useEllipsisDetection.d.ts +2 -2
  37. package/{index-031ff73c.js → index-ce02421b.js} +4 -4
  38. package/index.d.ts +11 -121
  39. package/index.js +12 -159
  40. package/package.json +24 -43
  41. package/tokens-0abb4e1b.js +6 -0
  42. package/types/index.d.ts +0 -3
  43. package/useEllipsisDetection-46d712b6.js +34 -0
  44. package/ActionableList/index.js +0 -1694
  45. package/AdvancedSearch/index.js +0 -892
  46. package/Alert/index.js +0 -98
  47. package/Avatar/index.js +0 -58
  48. package/Badge/index.js +0 -29
  49. package/Breadcrumb/index.js +0 -130
  50. package/BusyLoader/index.js +0 -31
  51. package/Button/index.js +0 -30
  52. package/Card/index.js +0 -502
  53. package/CardList/index.js +0 -662
  54. package/CellMeasurerCache-80be385d.js +0 -229
  55. package/Charts/index.js +0 -17662
  56. package/Checkbox/index.js +0 -229
  57. package/CheckboxGroup/index.js +0 -203
  58. package/CheckboxGroupWithSearch/index.js +0 -280
  59. package/Collapse/index.js +0 -195
  60. package/ColorPicker/index.js +0 -210
  61. package/ComboBox/index.js +0 -524
  62. package/Copy/index.js +0 -56
  63. package/Counter/index.js +0 -312
  64. package/DateFilter/index.js +0 -183
  65. package/DatePicker/index.js +0 -1229
  66. package/DatePickerInput/index.js +0 -883
  67. package/Divider/index.js +0 -23
  68. package/Drawer/index.js +0 -261
  69. package/Dropdown/index.js +0 -43
  70. package/Editor/index.js +0 -22975
  71. package/Empty/index.js +0 -76
  72. package/ExtendedInput/index.js +0 -590
  73. package/Form/index.js +0 -85
  74. package/FormContainer/index.js +0 -189
  75. package/FormableCheckbox/index.js +0 -24
  76. package/FormableDatePicker/index.js +0 -43
  77. package/FormableDropdown/index.js +0 -50
  78. package/FormableEditor/index.js +0 -26
  79. package/FormableHOC-85f89a81.js +0 -83
  80. package/FormableMultiSelectDropdown/index.js +0 -50
  81. package/FormableNumberInput/index.js +0 -34
  82. package/FormableRadio/index.js +0 -22
  83. package/FormableSwitcher/index.js +0 -22
  84. package/FormableTextInput/index.js +0 -34
  85. package/FormableUploader/index.js +0 -44
  86. package/Grid/index.js +0 -167
  87. package/HelperText/index.js +0 -86
  88. package/Holder/index.js +0 -261
  89. package/Icon/index.js +0 -62
  90. package/Image/index.js +0 -45
  91. package/ImagePreview/index.js +0 -217
  92. package/Info/index.js +0 -41
  93. package/InfoOutline-dd2e89d9.js +0 -29
  94. package/InteractiveWidget/index.js +0 -78
  95. package/KeyValue/index.js +0 -22
  96. package/Label/index.js +0 -48
  97. package/LinkButton/index.js +0 -34
  98. package/Loader/index.js +0 -23
  99. package/Menu/index.js +0 -281
  100. package/MobileNavigation/index.js +0 -94
  101. package/MobilePopup/index.js +0 -182
  102. package/Modal/index.js +0 -251
  103. package/ModuleTitle/index.js +0 -141
  104. package/NavigationMenu/index.js +0 -222
  105. package/Notification/index.js +0 -120
  106. package/Option/index.js +0 -184
  107. package/Overlay/index.js +0 -187
  108. package/Overspread/index.js +0 -291
  109. package/Pagination/index.js +0 -261
  110. package/Paper/index.js +0 -96
  111. package/Pill/index.js +0 -67
  112. package/Popover/index.js +0 -725
  113. package/PopoverV2/index.js +0 -19
  114. package/Portal/index.js +0 -58
  115. package/Products/index.js +0 -115
  116. package/Profile/index.js +0 -589
  117. package/Progress/index.js +0 -200
  118. package/QRCode/index.js +0 -814
  119. package/Radio/index.js +0 -151
  120. package/RadioGroup/index.js +0 -104
  121. package/Range/index.js +0 -191
  122. package/Rating/index.js +0 -174
  123. package/RichEditor/index.js +0 -13
  124. package/RichEditor-78c2617e.js +0 -228
  125. package/Scrollbar/index.js +0 -1585
  126. package/Search/index.js +0 -75
  127. package/SearchWithDropdown/index.js +0 -140
  128. package/Section/index.js +0 -61
  129. package/SkeletonLoader/index.js +0 -81
  130. package/Slider/index.js +0 -261
  131. package/Status/index.js +0 -97
  132. package/Steps/index.js +0 -314
  133. package/SuggestionList/index.js +0 -385
  134. package/Switcher/index.js +0 -193
  135. package/Table/index.js +0 -57
  136. package/TableCompositions/index.js +0 -16995
  137. package/Tabs/index.js +0 -235
  138. package/Tag/index.js +0 -102
  139. package/TextLink/index.js +0 -20
  140. package/Textarea/index.js +0 -242
  141. package/Time/index.js +0 -62
  142. package/TimePicker/index.js +0 -575
  143. package/Timeline/index.js +0 -113
  144. package/Title/index.js +0 -65
  145. package/Toaster/index.js +0 -116
  146. package/Tooltip/index.js +0 -6
  147. package/TransferList/index.js +0 -493
  148. package/Uploader/index.js +0 -992
  149. package/ValidatableCheckbox/index.js +0 -123
  150. package/ValidatableDatePicker/index.js +0 -316
  151. package/ValidatableDropdown/index.js +0 -141
  152. package/ValidatableElements/index.js +0 -67
  153. package/ValidatableMultiSelectDropdown/index.js +0 -152
  154. package/ValidatableNumberInput/index.js +0 -204
  155. package/ValidatableRadio/index.js +0 -116
  156. package/ValidatableSwitcher/index.js +0 -93
  157. package/ValidatableTextInput/index.js +0 -167
  158. package/ValidatableTimeInput/index.js +0 -174
  159. package/ValidatableUploader/index.js +0 -98
  160. package/Widget/index.js +0 -225
  161. package/_commonjsHelpers-24198af3.js +0 -35
  162. package/_rollupPluginBabelHelpers-a83240e1.js +0 -11
  163. package/callAfterDelay-7272faca.js +0 -12
  164. package/checkTimeValidation-e56771be.js +0 -16
  165. package/checkboxRadioSwitcher-5b69d7bd.js +0 -4
  166. package/clsx.m-2bb6df4b.js +0 -3
  167. package/config-1053d64d.js +0 -20
  168. package/configs-00612ce0.js +0 -103
  169. package/configs.js +0 -111
  170. package/dateValidation-67caec66.js +0 -225
  171. package/debounce-4419bc2f.js +0 -17
  172. package/guid-8ddf77b3.js +0 -16
  173. package/hooks/useBodyScroll.js +0 -16
  174. package/hooks/useClick.js +0 -18
  175. package/hooks/useClickOutside.js +0 -25
  176. package/hooks/useDebounce.js +0 -28
  177. package/hooks/useDeviceType.js +0 -17
  178. package/hooks/useDidMount.js +0 -15
  179. package/hooks/useForceUpdate.js +0 -8
  180. package/hooks/useHover.js +0 -20
  181. package/hooks/useImgDownload.js +0 -18
  182. package/hooks/useKeyDown.js +0 -21
  183. package/hooks/useMount.js +0 -13
  184. package/hooks/useMutationObserver.js +0 -21
  185. package/hooks/usePrevious.js +0 -10
  186. package/hooks/useThrottle.js +0 -16
  187. package/hooks/useToggle.js +0 -11
  188. package/hooks/useUpdatableRef.js +0 -14
  189. package/hooks/useUpdate.js +0 -10
  190. package/hooks/useWidth.js +0 -16
  191. package/hooks/useWindowSize.js +0 -40
  192. package/index-122432cd.js +0 -270
  193. package/index-262edd7a.js +0 -77
  194. package/index-2f5aa51e.js +0 -6483
  195. package/index-370f9acd.js +0 -4
  196. package/index-45eafea6.js +0 -90
  197. package/index-480fd7d9.js +0 -10032
  198. package/index-5f37f281.js +0 -168
  199. package/index-73aaa093.js +0 -1940
  200. package/index.mobile.d.ts +0 -14
  201. package/lib/atoms/Avatar/index.d.ts +0 -1
  202. package/lib/atoms/Badge/Badge.d.ts +0 -36
  203. package/lib/atoms/Badge/index.d.ts +0 -1
  204. package/lib/atoms/BusyLoader/BusyLoader.d.ts +0 -32
  205. package/lib/atoms/BusyLoader/BusyLoaderHolderHOC.d.ts +0 -8
  206. package/lib/atoms/BusyLoader/index.d.ts +0 -1
  207. package/lib/atoms/Button/Button.d.ts +0 -70
  208. package/lib/atoms/Button/index.d.ts +0 -1
  209. package/lib/atoms/Divider/index.d.ts +0 -1
  210. package/lib/atoms/Empty/Empty.d.ts +0 -39
  211. package/lib/atoms/Empty/index.d.ts +0 -1
  212. package/lib/atoms/Empty/utils.d.ts +0 -9
  213. package/lib/atoms/HelperText/index.d.ts +0 -1
  214. package/lib/atoms/Image/Image.d.ts +0 -51
  215. package/lib/atoms/Image/index.d.ts +0 -1
  216. package/lib/atoms/ImagePreview/ImagePreview.d.ts +0 -56
  217. package/lib/atoms/ImagePreview/ImagePreviewHOC.d.ts +0 -4
  218. package/lib/atoms/ImagePreview/Magnifier.d.ts +0 -40
  219. package/lib/atoms/ImagePreview/index.d.ts +0 -1
  220. package/lib/atoms/Info/index.d.ts +0 -1
  221. package/lib/atoms/KeyValue/KeyValue.d.ts +0 -29
  222. package/lib/atoms/KeyValue/index.d.ts +0 -1
  223. package/lib/atoms/Label/index.d.ts +0 -1
  224. package/lib/atoms/LinkButton/LinkButton.d.ts +0 -46
  225. package/lib/atoms/LinkButton/index.d.ts +0 -1
  226. package/lib/atoms/Loader/index.d.ts +0 -1
  227. package/lib/atoms/Pill/index.d.ts +0 -1
  228. package/lib/atoms/Rating/DefaultSvg.d.ts +0 -3
  229. package/lib/atoms/Rating/Rating.d.ts +0 -49
  230. package/lib/atoms/Rating/index.d.ts +0 -1
  231. package/lib/atoms/TextLink/index.d.ts +0 -1
  232. package/lib/molecules/Copy/Copy.d.ts +0 -38
  233. package/lib/molecules/Copy/index.d.ts +0 -1
  234. package/lib/molecules/InteractiveWidget/InteractiveWidget.d.ts +0 -70
  235. package/lib/molecules/InteractiveWidget/InteractiveWidgetIcon.d.ts +0 -8
  236. package/lib/molecules/InteractiveWidget/index.d.ts +0 -1
  237. package/lib/molecules/Tooltip/index.d.ts +0 -1
  238. package/lib/providers/GeneUIProvider/GeneUIProvider.d.ts +0 -30
  239. package/lib/providers/GeneUIProvider/index.d.ts +0 -1
  240. package/localization-4ba17032.js +0 -46
  241. package/objectWithoutPropertiesLoose-e1596bdb.js +0 -62
  242. package/rangeAndSlider-693a3d41.js +0 -8684
  243. package/react-beautiful-dnd.esm-b637016a.js +0 -10116
  244. package/react-lifecycles-compat.es-6e1f3768.js +0 -158
  245. package/redux-e591c1b8.js +0 -536
  246. package/tokens-8ab1179c.js +0 -6
  247. package/tslib.es6-f211516f.js +0 -35
  248. package/useEllipsisDetection-c1c9ad94.js +0 -38
@@ -1,1585 +0,0 @@
1
- import { _ as _extends$1 } from '../_rollupPluginBabelHelpers-a83240e1.js';
2
- import React__default, { forwardRef, useEffect } from 'react';
3
- import PropTypes from 'prop-types';
4
- import { c as classnames } from '../index-031ff73c.js';
5
- import { c as commonjsGlobal } from '../_commonjsHelpers-24198af3.js';
6
- import { j as customScrollbarConfig } from '../configs-00612ce0.js';
7
- import { s as styleInject } from '../style-inject.es-746bb8ed.js';
8
-
9
- var lib = {};
10
-
11
- var Scrollbars = {};
12
-
13
- var rafExports = {};
14
- var raf$1 = {
15
- get exports(){ return rafExports; },
16
- set exports(v){ rafExports = v; },
17
- };
18
-
19
- var performanceNowExports = {};
20
- var performanceNow = {
21
- get exports(){ return performanceNowExports; },
22
- set exports(v){ performanceNowExports = v; },
23
- };
24
-
25
- // Generated by CoffeeScript 1.12.2
26
- (function() {
27
- var getNanoSeconds, hrtime, loadTime, moduleLoadTime, nodeLoadTime, upTime;
28
-
29
- if ((typeof performance !== "undefined" && performance !== null) && performance.now) {
30
- performanceNow.exports = function() {
31
- return performance.now();
32
- };
33
- } else if ((typeof process !== "undefined" && process !== null) && process.hrtime) {
34
- performanceNow.exports = function() {
35
- return (getNanoSeconds() - nodeLoadTime) / 1e6;
36
- };
37
- hrtime = process.hrtime;
38
- getNanoSeconds = function() {
39
- var hr;
40
- hr = hrtime();
41
- return hr[0] * 1e9 + hr[1];
42
- };
43
- moduleLoadTime = getNanoSeconds();
44
- upTime = process.uptime() * 1e9;
45
- nodeLoadTime = moduleLoadTime - upTime;
46
- } else if (Date.now) {
47
- performanceNow.exports = function() {
48
- return Date.now() - loadTime;
49
- };
50
- loadTime = Date.now();
51
- } else {
52
- performanceNow.exports = function() {
53
- return new Date().getTime() - loadTime;
54
- };
55
- loadTime = new Date().getTime();
56
- }
57
-
58
- }).call(commonjsGlobal);
59
-
60
- var now = performanceNowExports
61
- , root = typeof window === 'undefined' ? commonjsGlobal : window
62
- , vendors = ['moz', 'webkit']
63
- , suffix = 'AnimationFrame'
64
- , raf = root['request' + suffix]
65
- , caf = root['cancel' + suffix] || root['cancelRequest' + suffix];
66
-
67
- for(var i = 0; !raf && i < vendors.length; i++) {
68
- raf = root[vendors[i] + 'Request' + suffix];
69
- caf = root[vendors[i] + 'Cancel' + suffix]
70
- || root[vendors[i] + 'CancelRequest' + suffix];
71
- }
72
-
73
- // Some versions of FF have rAF but not cAF
74
- if(!raf || !caf) {
75
- var last = 0
76
- , id = 0
77
- , queue = []
78
- , frameDuration = 1000 / 60;
79
-
80
- raf = function(callback) {
81
- if(queue.length === 0) {
82
- var _now = now()
83
- , next = Math.max(0, frameDuration - (_now - last));
84
- last = next + _now;
85
- setTimeout(function() {
86
- var cp = queue.slice(0);
87
- // Clear queue here to prevent
88
- // callbacks from appending listeners
89
- // to the current frame's queue
90
- queue.length = 0;
91
- for(var i = 0; i < cp.length; i++) {
92
- if(!cp[i].cancelled) {
93
- try{
94
- cp[i].callback(last);
95
- } catch(e) {
96
- setTimeout(function() { throw e }, 0);
97
- }
98
- }
99
- }
100
- }, Math.round(next));
101
- }
102
- queue.push({
103
- handle: ++id,
104
- callback: callback,
105
- cancelled: false
106
- });
107
- return id
108
- };
109
-
110
- caf = function(handle) {
111
- for(var i = 0; i < queue.length; i++) {
112
- if(queue[i].handle === handle) {
113
- queue[i].cancelled = true;
114
- }
115
- }
116
- };
117
- }
118
-
119
- raf$1.exports = function(fn) {
120
- // Wrap in a new function to prevent
121
- // `cancel` potentially being assigned
122
- // to the native rAF function
123
- return raf.call(root, fn)
124
- };
125
- rafExports.cancel = function() {
126
- caf.apply(root, arguments);
127
- };
128
- rafExports.polyfill = function(object) {
129
- if (!object) {
130
- object = root;
131
- }
132
- object.requestAnimationFrame = raf;
133
- object.cancelAnimationFrame = caf;
134
- };
135
-
136
- var domCssExports = {};
137
- var domCss = {
138
- get exports(){ return domCssExports; },
139
- set exports(v){ domCssExports = v; },
140
- };
141
-
142
- var div = null;
143
- var prefixes = [ 'Webkit', 'Moz', 'O', 'ms' ];
144
-
145
- var prefixStyle = function prefixStyle (prop) {
146
- // re-use a dummy div
147
- if (!div) {
148
- div = document.createElement('div');
149
- }
150
-
151
- var style = div.style;
152
-
153
- // prop exists without prefix
154
- if (prop in style) {
155
- return prop
156
- }
157
-
158
- // borderRadius -> BorderRadius
159
- var titleCase = prop.charAt(0).toUpperCase() + prop.slice(1);
160
-
161
- // find the vendor-prefixed prop
162
- for (var i = prefixes.length; i >= 0; i--) {
163
- var name = prefixes[i] + titleCase;
164
- // e.g. WebkitBorderRadius or webkitBorderRadius
165
- if (name in style) {
166
- return name
167
- }
168
- }
169
-
170
- return false
171
- };
172
-
173
- /**
174
- * Export.
175
- */
176
-
177
- var toNoCase_1 = toNoCase;
178
-
179
- /**
180
- * Test whether a string is camel-case.
181
- */
182
-
183
- var hasSpace = /\s/;
184
- var hasSeparator = /(_|-|\.|:)/;
185
- var hasCamel = /([a-z][A-Z]|[A-Z][a-z])/;
186
-
187
- /**
188
- * Remove any starting case from a `string`, like camel or snake, but keep
189
- * spaces and punctuation that may be important otherwise.
190
- *
191
- * @param {String} string
192
- * @return {String}
193
- */
194
-
195
- function toNoCase(string) {
196
- if (hasSpace.test(string)) return string.toLowerCase()
197
- if (hasSeparator.test(string)) return (unseparate(string) || string).toLowerCase()
198
- if (hasCamel.test(string)) return uncamelize(string).toLowerCase()
199
- return string.toLowerCase()
200
- }
201
-
202
- /**
203
- * Separator splitter.
204
- */
205
-
206
- var separatorSplitter = /[\W_]+(.|$)/g;
207
-
208
- /**
209
- * Un-separate a `string`.
210
- *
211
- * @param {String} string
212
- * @return {String}
213
- */
214
-
215
- function unseparate(string) {
216
- return string.replace(separatorSplitter, function (m, next) {
217
- return next ? ' ' + next : ''
218
- })
219
- }
220
-
221
- /**
222
- * Camelcase splitter.
223
- */
224
-
225
- var camelSplitter = /(.)([A-Z]+)/g;
226
-
227
- /**
228
- * Un-camelcase a `string`.
229
- *
230
- * @param {String} string
231
- * @return {String}
232
- */
233
-
234
- function uncamelize(string) {
235
- return string.replace(camelSplitter, function (m, previous, uppers) {
236
- return previous + ' ' + uppers.toLowerCase().split('').join(' ')
237
- })
238
- }
239
-
240
- var clean = toNoCase_1;
241
-
242
- /**
243
- * Export.
244
- */
245
-
246
- var toSpaceCase_1 = toSpaceCase;
247
-
248
- /**
249
- * Convert a `string` to space case.
250
- *
251
- * @param {String} string
252
- * @return {String}
253
- */
254
-
255
- function toSpaceCase(string) {
256
- return clean(string).replace(/[\W_]+(.|$)/g, function (matches, match) {
257
- return match ? ' ' + match : ''
258
- }).trim()
259
- }
260
-
261
- var space = toSpaceCase_1;
262
-
263
- /**
264
- * Export.
265
- */
266
-
267
- var toCamelCase_1 = toCamelCase$1;
268
-
269
- /**
270
- * Convert a `string` to camel case.
271
- *
272
- * @param {String} string
273
- * @return {String}
274
- */
275
-
276
- function toCamelCase$1(string) {
277
- return space(string).replace(/\s(\w)/g, function (matches, letter) {
278
- return letter.toUpperCase()
279
- })
280
- }
281
-
282
- /* The following list is defined in React's core */
283
-
284
- var IS_UNITLESS = {
285
- animationIterationCount: true,
286
- boxFlex: true,
287
- boxFlexGroup: true,
288
- boxOrdinalGroup: true,
289
- columnCount: true,
290
- flex: true,
291
- flexGrow: true,
292
- flexPositive: true,
293
- flexShrink: true,
294
- flexNegative: true,
295
- flexOrder: true,
296
- gridRow: true,
297
- gridColumn: true,
298
- fontWeight: true,
299
- lineClamp: true,
300
- lineHeight: true,
301
- opacity: true,
302
- order: true,
303
- orphans: true,
304
- tabSize: true,
305
- widows: true,
306
- zIndex: true,
307
- zoom: true,
308
-
309
- // SVG-related properties
310
- fillOpacity: true,
311
- stopOpacity: true,
312
- strokeDashoffset: true,
313
- strokeOpacity: true,
314
- strokeWidth: true
315
- };
316
-
317
- var addPxToStyle$1 = function(name, value) {
318
- if(typeof value === 'number' && !IS_UNITLESS[ name ]) {
319
- return value + 'px';
320
- } else {
321
- return value;
322
- }
323
- };
324
-
325
- var prefix = prefixStyle;
326
- var toCamelCase = toCamelCase_1;
327
- var cache = { 'float': 'cssFloat' };
328
- var addPxToStyle = addPxToStyle$1;
329
-
330
- function style (element, property, value) {
331
- var camel = cache[property];
332
- if (typeof camel === 'undefined') {
333
- camel = detect(property);
334
- }
335
-
336
- // may be false if CSS prop is unsupported
337
- if (camel) {
338
- if (value === undefined) {
339
- return element.style[camel]
340
- }
341
-
342
- element.style[camel] = addPxToStyle(camel, value);
343
- }
344
- }
345
-
346
- function each (element, properties) {
347
- for (var k in properties) {
348
- if (properties.hasOwnProperty(k)) {
349
- style(element, k, properties[k]);
350
- }
351
- }
352
- }
353
-
354
- function detect (cssProp) {
355
- var camel = toCamelCase(cssProp);
356
- var result = prefix(camel);
357
- cache[camel] = cache[cssProp] = cache[result] = result;
358
- return result
359
- }
360
-
361
- function set () {
362
- if (arguments.length === 2) {
363
- if (typeof arguments[1] === 'string') {
364
- arguments[0].style.cssText = arguments[1];
365
- } else {
366
- each(arguments[0], arguments[1]);
367
- }
368
- } else {
369
- style(arguments[0], arguments[1], arguments[2]);
370
- }
371
- }
372
-
373
- domCss.exports = set;
374
- domCssExports.set = set;
375
-
376
- domCssExports.get = function (element, properties) {
377
- if (Array.isArray(properties)) {
378
- return properties.reduce(function (obj, prop) {
379
- obj[prop] = style(element, prop || '');
380
- return obj
381
- }, {})
382
- } else {
383
- return style(element, properties || '')
384
- }
385
- };
386
-
387
- var isString = {};
388
-
389
- (function (exports) {
390
-
391
- Object.defineProperty(exports, "__esModule", {
392
- value: true
393
- });
394
- exports["default"] = isString;
395
- function isString(maybe) {
396
- return typeof maybe === 'string';
397
- }
398
- } (isString));
399
-
400
- var getScrollbarWidth = {};
401
-
402
- (function (exports) {
403
-
404
- Object.defineProperty(exports, "__esModule", {
405
- value: true
406
- });
407
- exports["default"] = getScrollbarWidth;
408
-
409
- var _domCss = domCssExports;
410
-
411
- var _domCss2 = _interopRequireDefault(_domCss);
412
-
413
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
414
-
415
- var scrollbarWidth = false;
416
-
417
- function getScrollbarWidth() {
418
- if (scrollbarWidth !== false) return scrollbarWidth;
419
- /* istanbul ignore else */
420
- if (typeof document !== 'undefined') {
421
- var div = document.createElement('div');
422
- (0, _domCss2["default"])(div, {
423
- width: 100,
424
- height: 100,
425
- position: 'absolute',
426
- top: -9999,
427
- overflow: 'scroll',
428
- MsOverflowStyle: 'scrollbar'
429
- });
430
- document.body.appendChild(div);
431
- scrollbarWidth = div.offsetWidth - div.clientWidth;
432
- document.body.removeChild(div);
433
- } else {
434
- scrollbarWidth = 0;
435
- }
436
- return scrollbarWidth || 0;
437
- }
438
- } (getScrollbarWidth));
439
-
440
- var returnFalse = {};
441
-
442
- (function (exports) {
443
-
444
- Object.defineProperty(exports, "__esModule", {
445
- value: true
446
- });
447
- exports["default"] = returnFalse;
448
- function returnFalse() {
449
- return false;
450
- }
451
- } (returnFalse));
452
-
453
- var getInnerWidth = {};
454
-
455
- (function (exports) {
456
-
457
- Object.defineProperty(exports, "__esModule", {
458
- value: true
459
- });
460
- exports["default"] = getInnerWidth;
461
- function getInnerWidth(el) {
462
- var clientWidth = el.clientWidth;
463
-
464
- var _getComputedStyle = getComputedStyle(el),
465
- paddingLeft = _getComputedStyle.paddingLeft,
466
- paddingRight = _getComputedStyle.paddingRight;
467
-
468
- return clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
469
- }
470
- } (getInnerWidth));
471
-
472
- var getInnerHeight = {};
473
-
474
- (function (exports) {
475
-
476
- Object.defineProperty(exports, "__esModule", {
477
- value: true
478
- });
479
- exports["default"] = getInnerHeight;
480
- function getInnerHeight(el) {
481
- var clientHeight = el.clientHeight;
482
-
483
- var _getComputedStyle = getComputedStyle(el),
484
- paddingTop = _getComputedStyle.paddingTop,
485
- paddingBottom = _getComputedStyle.paddingBottom;
486
-
487
- return clientHeight - parseFloat(paddingTop) - parseFloat(paddingBottom);
488
- }
489
- } (getInnerHeight));
490
-
491
- var styles = {};
492
-
493
- Object.defineProperty(styles, "__esModule", {
494
- value: true
495
- });
496
- styles.containerStyleDefault = {
497
- position: 'relative',
498
- overflow: 'hidden',
499
- width: '100%',
500
- height: '100%'
501
- };
502
-
503
- // Overrides containerStyleDefault properties
504
- styles.containerStyleAutoHeight = {
505
- height: 'auto'
506
- };
507
-
508
- styles.viewStyleDefault = {
509
- position: 'absolute',
510
- top: 0,
511
- left: 0,
512
- right: 0,
513
- bottom: 0,
514
- overflow: 'scroll',
515
- WebkitOverflowScrolling: 'touch'
516
- };
517
-
518
- // Overrides viewStyleDefault properties
519
- styles.viewStyleAutoHeight = {
520
- position: 'relative',
521
- top: undefined,
522
- left: undefined,
523
- right: undefined,
524
- bottom: undefined
525
- };
526
-
527
- styles.viewStyleUniversalInitial = {
528
- overflow: 'hidden',
529
- marginRight: 0,
530
- marginBottom: 0
531
- };
532
-
533
- styles.trackHorizontalStyleDefault = {
534
- position: 'absolute',
535
- height: 6
536
- };
537
-
538
- styles.trackVerticalStyleDefault = {
539
- position: 'absolute',
540
- width: 6
541
- };
542
-
543
- styles.thumbHorizontalStyleDefault = {
544
- position: 'relative',
545
- display: 'block',
546
- height: '100%'
547
- };
548
-
549
- styles.thumbVerticalStyleDefault = {
550
- position: 'relative',
551
- display: 'block',
552
- width: '100%'
553
- };
554
-
555
- styles.disableSelectStyle = {
556
- userSelect: 'none'
557
- };
558
-
559
- styles.disableSelectStyleReset = {
560
- userSelect: ''
561
- };
562
-
563
- var defaultRenderElements = {};
564
-
565
- Object.defineProperty(defaultRenderElements, "__esModule", {
566
- value: true
567
- });
568
-
569
- var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
570
-
571
- defaultRenderElements.renderViewDefault = renderViewDefault;
572
- defaultRenderElements.renderTrackHorizontalDefault = renderTrackHorizontalDefault;
573
- defaultRenderElements.renderTrackVerticalDefault = renderTrackVerticalDefault;
574
- defaultRenderElements.renderThumbHorizontalDefault = renderThumbHorizontalDefault;
575
- defaultRenderElements.renderThumbVerticalDefault = renderThumbVerticalDefault;
576
-
577
- var _react = React__default;
578
-
579
- var _react2 = _interopRequireDefault(_react);
580
-
581
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
582
-
583
- function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
584
-
585
- /* eslint-disable react/prop-types */
586
-
587
- function renderViewDefault(props) {
588
- return _react2["default"].createElement('div', props);
589
- }
590
-
591
- function renderTrackHorizontalDefault(_ref) {
592
- var style = _ref.style,
593
- props = _objectWithoutProperties(_ref, ['style']);
594
-
595
- var finalStyle = _extends({}, style, {
596
- right: 2,
597
- bottom: 2,
598
- left: 2,
599
- borderRadius: 3
600
- });
601
- return _react2["default"].createElement('div', _extends({ style: finalStyle }, props));
602
- }
603
-
604
- function renderTrackVerticalDefault(_ref2) {
605
- var style = _ref2.style,
606
- props = _objectWithoutProperties(_ref2, ['style']);
607
-
608
- var finalStyle = _extends({}, style, {
609
- right: 2,
610
- bottom: 2,
611
- top: 2,
612
- borderRadius: 3
613
- });
614
- return _react2["default"].createElement('div', _extends({ style: finalStyle }, props));
615
- }
616
-
617
- function renderThumbHorizontalDefault(_ref3) {
618
- var style = _ref3.style,
619
- props = _objectWithoutProperties(_ref3, ['style']);
620
-
621
- var finalStyle = _extends({}, style, {
622
- cursor: 'pointer',
623
- borderRadius: 'inherit',
624
- backgroundColor: 'rgba(0,0,0,.2)'
625
- });
626
- return _react2["default"].createElement('div', _extends({ style: finalStyle }, props));
627
- }
628
-
629
- function renderThumbVerticalDefault(_ref4) {
630
- var style = _ref4.style,
631
- props = _objectWithoutProperties(_ref4, ['style']);
632
-
633
- var finalStyle = _extends({}, style, {
634
- cursor: 'pointer',
635
- borderRadius: 'inherit',
636
- backgroundColor: 'rgba(0,0,0,.2)'
637
- });
638
- return _react2["default"].createElement('div', _extends({ style: finalStyle }, props));
639
- }
640
-
641
- (function (exports) {
642
-
643
- Object.defineProperty(exports, "__esModule", {
644
- value: true
645
- });
646
-
647
- var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
648
-
649
- var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
650
-
651
- var _raf2 = rafExports;
652
-
653
- var _raf3 = _interopRequireDefault(_raf2);
654
-
655
- var _domCss = domCssExports;
656
-
657
- var _domCss2 = _interopRequireDefault(_domCss);
658
-
659
- var _react = React__default;
660
-
661
- var _propTypes = PropTypes;
662
-
663
- var _propTypes2 = _interopRequireDefault(_propTypes);
664
-
665
- var _isString = isString;
666
-
667
- var _isString2 = _interopRequireDefault(_isString);
668
-
669
- var _getScrollbarWidth = getScrollbarWidth;
670
-
671
- var _getScrollbarWidth2 = _interopRequireDefault(_getScrollbarWidth);
672
-
673
- var _returnFalse = returnFalse;
674
-
675
- var _returnFalse2 = _interopRequireDefault(_returnFalse);
676
-
677
- var _getInnerWidth = getInnerWidth;
678
-
679
- var _getInnerWidth2 = _interopRequireDefault(_getInnerWidth);
680
-
681
- var _getInnerHeight = getInnerHeight;
682
-
683
- var _getInnerHeight2 = _interopRequireDefault(_getInnerHeight);
684
-
685
- var _styles = styles;
686
-
687
- var _defaultRenderElements = defaultRenderElements;
688
-
689
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
690
-
691
- function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
692
-
693
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
694
-
695
- function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
696
-
697
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
698
-
699
- var Scrollbars = function (_Component) {
700
- _inherits(Scrollbars, _Component);
701
-
702
- function Scrollbars(props) {
703
- var _ref;
704
-
705
- _classCallCheck(this, Scrollbars);
706
-
707
- for (var _len = arguments.length, rest = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
708
- rest[_key - 1] = arguments[_key];
709
- }
710
-
711
- var _this = _possibleConstructorReturn(this, (_ref = Scrollbars.__proto__ || Object.getPrototypeOf(Scrollbars)).call.apply(_ref, [this, props].concat(rest)));
712
-
713
- _this.getScrollLeft = _this.getScrollLeft.bind(_this);
714
- _this.getScrollTop = _this.getScrollTop.bind(_this);
715
- _this.getScrollWidth = _this.getScrollWidth.bind(_this);
716
- _this.getScrollHeight = _this.getScrollHeight.bind(_this);
717
- _this.getClientWidth = _this.getClientWidth.bind(_this);
718
- _this.getClientHeight = _this.getClientHeight.bind(_this);
719
- _this.getValues = _this.getValues.bind(_this);
720
- _this.getThumbHorizontalWidth = _this.getThumbHorizontalWidth.bind(_this);
721
- _this.getThumbVerticalHeight = _this.getThumbVerticalHeight.bind(_this);
722
- _this.getScrollLeftForOffset = _this.getScrollLeftForOffset.bind(_this);
723
- _this.getScrollTopForOffset = _this.getScrollTopForOffset.bind(_this);
724
-
725
- _this.scrollLeft = _this.scrollLeft.bind(_this);
726
- _this.scrollTop = _this.scrollTop.bind(_this);
727
- _this.scrollToLeft = _this.scrollToLeft.bind(_this);
728
- _this.scrollToTop = _this.scrollToTop.bind(_this);
729
- _this.scrollToRight = _this.scrollToRight.bind(_this);
730
- _this.scrollToBottom = _this.scrollToBottom.bind(_this);
731
-
732
- _this.handleTrackMouseEnter = _this.handleTrackMouseEnter.bind(_this);
733
- _this.handleTrackMouseLeave = _this.handleTrackMouseLeave.bind(_this);
734
- _this.handleHorizontalTrackMouseDown = _this.handleHorizontalTrackMouseDown.bind(_this);
735
- _this.handleVerticalTrackMouseDown = _this.handleVerticalTrackMouseDown.bind(_this);
736
- _this.handleHorizontalThumbMouseDown = _this.handleHorizontalThumbMouseDown.bind(_this);
737
- _this.handleVerticalThumbMouseDown = _this.handleVerticalThumbMouseDown.bind(_this);
738
- _this.handleWindowResize = _this.handleWindowResize.bind(_this);
739
- _this.handleScroll = _this.handleScroll.bind(_this);
740
- _this.handleDrag = _this.handleDrag.bind(_this);
741
- _this.handleDragEnd = _this.handleDragEnd.bind(_this);
742
-
743
- _this.state = {
744
- didMountUniversal: false
745
- };
746
- return _this;
747
- }
748
-
749
- _createClass(Scrollbars, [{
750
- key: 'componentDidMount',
751
- value: function componentDidMount() {
752
- this.addListeners();
753
- this.update();
754
- this.componentDidMountUniversal();
755
- }
756
- }, {
757
- key: 'componentDidMountUniversal',
758
- value: function componentDidMountUniversal() {
759
- // eslint-disable-line react/sort-comp
760
- var universal = this.props.universal;
761
-
762
- if (!universal) return;
763
- this.setState({ didMountUniversal: true });
764
- }
765
- }, {
766
- key: 'componentDidUpdate',
767
- value: function componentDidUpdate() {
768
- this.update();
769
- }
770
- }, {
771
- key: 'componentWillUnmount',
772
- value: function componentWillUnmount() {
773
- this.removeListeners();
774
- (0, _raf2.cancel)(this.requestFrame);
775
- clearTimeout(this.hideTracksTimeout);
776
- clearInterval(this.detectScrollingInterval);
777
- }
778
- }, {
779
- key: 'getScrollLeft',
780
- value: function getScrollLeft() {
781
- if (!this.view) return 0;
782
- return this.view.scrollLeft;
783
- }
784
- }, {
785
- key: 'getScrollTop',
786
- value: function getScrollTop() {
787
- if (!this.view) return 0;
788
- return this.view.scrollTop;
789
- }
790
- }, {
791
- key: 'getScrollWidth',
792
- value: function getScrollWidth() {
793
- if (!this.view) return 0;
794
- return this.view.scrollWidth;
795
- }
796
- }, {
797
- key: 'getScrollHeight',
798
- value: function getScrollHeight() {
799
- if (!this.view) return 0;
800
- return this.view.scrollHeight;
801
- }
802
- }, {
803
- key: 'getClientWidth',
804
- value: function getClientWidth() {
805
- if (!this.view) return 0;
806
- return this.view.clientWidth;
807
- }
808
- }, {
809
- key: 'getClientHeight',
810
- value: function getClientHeight() {
811
- if (!this.view) return 0;
812
- return this.view.clientHeight;
813
- }
814
- }, {
815
- key: 'getValues',
816
- value: function getValues() {
817
- var _ref2 = this.view || {},
818
- _ref2$scrollLeft = _ref2.scrollLeft,
819
- scrollLeft = _ref2$scrollLeft === undefined ? 0 : _ref2$scrollLeft,
820
- _ref2$scrollTop = _ref2.scrollTop,
821
- scrollTop = _ref2$scrollTop === undefined ? 0 : _ref2$scrollTop,
822
- _ref2$scrollWidth = _ref2.scrollWidth,
823
- scrollWidth = _ref2$scrollWidth === undefined ? 0 : _ref2$scrollWidth,
824
- _ref2$scrollHeight = _ref2.scrollHeight,
825
- scrollHeight = _ref2$scrollHeight === undefined ? 0 : _ref2$scrollHeight,
826
- _ref2$clientWidth = _ref2.clientWidth,
827
- clientWidth = _ref2$clientWidth === undefined ? 0 : _ref2$clientWidth,
828
- _ref2$clientHeight = _ref2.clientHeight,
829
- clientHeight = _ref2$clientHeight === undefined ? 0 : _ref2$clientHeight;
830
-
831
- return {
832
- left: scrollLeft / (scrollWidth - clientWidth) || 0,
833
- top: scrollTop / (scrollHeight - clientHeight) || 0,
834
- scrollLeft: scrollLeft,
835
- scrollTop: scrollTop,
836
- scrollWidth: scrollWidth,
837
- scrollHeight: scrollHeight,
838
- clientWidth: clientWidth,
839
- clientHeight: clientHeight
840
- };
841
- }
842
- }, {
843
- key: 'getThumbHorizontalWidth',
844
- value: function getThumbHorizontalWidth() {
845
- var _props = this.props,
846
- thumbSize = _props.thumbSize,
847
- thumbMinSize = _props.thumbMinSize;
848
- var _view = this.view,
849
- scrollWidth = _view.scrollWidth,
850
- clientWidth = _view.clientWidth;
851
-
852
- var trackWidth = (0, _getInnerWidth2["default"])(this.trackHorizontal);
853
- var width = Math.ceil(clientWidth / scrollWidth * trackWidth);
854
- if (trackWidth === width) return 0;
855
- if (thumbSize) return thumbSize;
856
- return Math.max(width, thumbMinSize);
857
- }
858
- }, {
859
- key: 'getThumbVerticalHeight',
860
- value: function getThumbVerticalHeight() {
861
- var _props2 = this.props,
862
- thumbSize = _props2.thumbSize,
863
- thumbMinSize = _props2.thumbMinSize;
864
- var _view2 = this.view,
865
- scrollHeight = _view2.scrollHeight,
866
- clientHeight = _view2.clientHeight;
867
-
868
- var trackHeight = (0, _getInnerHeight2["default"])(this.trackVertical);
869
- var height = Math.ceil(clientHeight / scrollHeight * trackHeight);
870
- if (trackHeight === height) return 0;
871
- if (thumbSize) return thumbSize;
872
- return Math.max(height, thumbMinSize);
873
- }
874
- }, {
875
- key: 'getScrollLeftForOffset',
876
- value: function getScrollLeftForOffset(offset) {
877
- var _view3 = this.view,
878
- scrollWidth = _view3.scrollWidth,
879
- clientWidth = _view3.clientWidth;
880
-
881
- var trackWidth = (0, _getInnerWidth2["default"])(this.trackHorizontal);
882
- var thumbWidth = this.getThumbHorizontalWidth();
883
- return offset / (trackWidth - thumbWidth) * (scrollWidth - clientWidth);
884
- }
885
- }, {
886
- key: 'getScrollTopForOffset',
887
- value: function getScrollTopForOffset(offset) {
888
- var _view4 = this.view,
889
- scrollHeight = _view4.scrollHeight,
890
- clientHeight = _view4.clientHeight;
891
-
892
- var trackHeight = (0, _getInnerHeight2["default"])(this.trackVertical);
893
- var thumbHeight = this.getThumbVerticalHeight();
894
- return offset / (trackHeight - thumbHeight) * (scrollHeight - clientHeight);
895
- }
896
- }, {
897
- key: 'scrollLeft',
898
- value: function scrollLeft() {
899
- var left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
900
-
901
- if (!this.view) return;
902
- this.view.scrollLeft = left;
903
- }
904
- }, {
905
- key: 'scrollTop',
906
- value: function scrollTop() {
907
- var top = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
908
-
909
- if (!this.view) return;
910
- this.view.scrollTop = top;
911
- }
912
- }, {
913
- key: 'scrollToLeft',
914
- value: function scrollToLeft() {
915
- if (!this.view) return;
916
- this.view.scrollLeft = 0;
917
- }
918
- }, {
919
- key: 'scrollToTop',
920
- value: function scrollToTop() {
921
- if (!this.view) return;
922
- this.view.scrollTop = 0;
923
- }
924
- }, {
925
- key: 'scrollToRight',
926
- value: function scrollToRight() {
927
- if (!this.view) return;
928
- this.view.scrollLeft = this.view.scrollWidth;
929
- }
930
- }, {
931
- key: 'scrollToBottom',
932
- value: function scrollToBottom() {
933
- if (!this.view) return;
934
- this.view.scrollTop = this.view.scrollHeight;
935
- }
936
- }, {
937
- key: 'addListeners',
938
- value: function addListeners() {
939
- /* istanbul ignore if */
940
- if (typeof document === 'undefined' || !this.view) return;
941
- var view = this.view,
942
- trackHorizontal = this.trackHorizontal,
943
- trackVertical = this.trackVertical,
944
- thumbHorizontal = this.thumbHorizontal,
945
- thumbVertical = this.thumbVertical;
946
-
947
- view.addEventListener('scroll', this.handleScroll);
948
- if (!(0, _getScrollbarWidth2["default"])()) return;
949
- trackHorizontal.addEventListener('mouseenter', this.handleTrackMouseEnter);
950
- trackHorizontal.addEventListener('mouseleave', this.handleTrackMouseLeave);
951
- trackHorizontal.addEventListener('mousedown', this.handleHorizontalTrackMouseDown);
952
- trackVertical.addEventListener('mouseenter', this.handleTrackMouseEnter);
953
- trackVertical.addEventListener('mouseleave', this.handleTrackMouseLeave);
954
- trackVertical.addEventListener('mousedown', this.handleVerticalTrackMouseDown);
955
- thumbHorizontal.addEventListener('mousedown', this.handleHorizontalThumbMouseDown);
956
- thumbVertical.addEventListener('mousedown', this.handleVerticalThumbMouseDown);
957
- window.addEventListener('resize', this.handleWindowResize);
958
- }
959
- }, {
960
- key: 'removeListeners',
961
- value: function removeListeners() {
962
- /* istanbul ignore if */
963
- if (typeof document === 'undefined' || !this.view) return;
964
- var view = this.view,
965
- trackHorizontal = this.trackHorizontal,
966
- trackVertical = this.trackVertical,
967
- thumbHorizontal = this.thumbHorizontal,
968
- thumbVertical = this.thumbVertical;
969
-
970
- view.removeEventListener('scroll', this.handleScroll);
971
- if (!(0, _getScrollbarWidth2["default"])()) return;
972
- trackHorizontal.removeEventListener('mouseenter', this.handleTrackMouseEnter);
973
- trackHorizontal.removeEventListener('mouseleave', this.handleTrackMouseLeave);
974
- trackHorizontal.removeEventListener('mousedown', this.handleHorizontalTrackMouseDown);
975
- trackVertical.removeEventListener('mouseenter', this.handleTrackMouseEnter);
976
- trackVertical.removeEventListener('mouseleave', this.handleTrackMouseLeave);
977
- trackVertical.removeEventListener('mousedown', this.handleVerticalTrackMouseDown);
978
- thumbHorizontal.removeEventListener('mousedown', this.handleHorizontalThumbMouseDown);
979
- thumbVertical.removeEventListener('mousedown', this.handleVerticalThumbMouseDown);
980
- window.removeEventListener('resize', this.handleWindowResize);
981
- // Possibly setup by `handleDragStart`
982
- this.teardownDragging();
983
- }
984
- }, {
985
- key: 'handleScroll',
986
- value: function handleScroll(event) {
987
- var _this2 = this;
988
-
989
- var _props3 = this.props,
990
- onScroll = _props3.onScroll,
991
- onScrollFrame = _props3.onScrollFrame;
992
-
993
- if (onScroll) onScroll(event);
994
- this.update(function (values) {
995
- var scrollLeft = values.scrollLeft,
996
- scrollTop = values.scrollTop;
997
-
998
- _this2.viewScrollLeft = scrollLeft;
999
- _this2.viewScrollTop = scrollTop;
1000
- if (onScrollFrame) onScrollFrame(values);
1001
- });
1002
- this.detectScrolling();
1003
- }
1004
- }, {
1005
- key: 'handleScrollStart',
1006
- value: function handleScrollStart() {
1007
- var onScrollStart = this.props.onScrollStart;
1008
-
1009
- if (onScrollStart) onScrollStart();
1010
- this.handleScrollStartAutoHide();
1011
- }
1012
- }, {
1013
- key: 'handleScrollStartAutoHide',
1014
- value: function handleScrollStartAutoHide() {
1015
- var autoHide = this.props.autoHide;
1016
-
1017
- if (!autoHide) return;
1018
- this.showTracks();
1019
- }
1020
- }, {
1021
- key: 'handleScrollStop',
1022
- value: function handleScrollStop() {
1023
- var onScrollStop = this.props.onScrollStop;
1024
-
1025
- if (onScrollStop) onScrollStop();
1026
- this.handleScrollStopAutoHide();
1027
- }
1028
- }, {
1029
- key: 'handleScrollStopAutoHide',
1030
- value: function handleScrollStopAutoHide() {
1031
- var autoHide = this.props.autoHide;
1032
-
1033
- if (!autoHide) return;
1034
- this.hideTracks();
1035
- }
1036
- }, {
1037
- key: 'handleWindowResize',
1038
- value: function handleWindowResize() {
1039
- this.update();
1040
- }
1041
- }, {
1042
- key: 'handleHorizontalTrackMouseDown',
1043
- value: function handleHorizontalTrackMouseDown(event) {
1044
- event.preventDefault();
1045
- var target = event.target,
1046
- clientX = event.clientX;
1047
-
1048
- var _target$getBoundingCl = target.getBoundingClientRect(),
1049
- targetLeft = _target$getBoundingCl.left;
1050
-
1051
- var thumbWidth = this.getThumbHorizontalWidth();
1052
- var offset = Math.abs(targetLeft - clientX) - thumbWidth / 2;
1053
- this.view.scrollLeft = this.getScrollLeftForOffset(offset);
1054
- }
1055
- }, {
1056
- key: 'handleVerticalTrackMouseDown',
1057
- value: function handleVerticalTrackMouseDown(event) {
1058
- event.preventDefault();
1059
- var target = event.target,
1060
- clientY = event.clientY;
1061
-
1062
- var _target$getBoundingCl2 = target.getBoundingClientRect(),
1063
- targetTop = _target$getBoundingCl2.top;
1064
-
1065
- var thumbHeight = this.getThumbVerticalHeight();
1066
- var offset = Math.abs(targetTop - clientY) - thumbHeight / 2;
1067
- this.view.scrollTop = this.getScrollTopForOffset(offset);
1068
- }
1069
- }, {
1070
- key: 'handleHorizontalThumbMouseDown',
1071
- value: function handleHorizontalThumbMouseDown(event) {
1072
- event.preventDefault();
1073
- this.handleDragStart(event);
1074
- var target = event.target,
1075
- clientX = event.clientX;
1076
- var offsetWidth = target.offsetWidth;
1077
-
1078
- var _target$getBoundingCl3 = target.getBoundingClientRect(),
1079
- left = _target$getBoundingCl3.left;
1080
-
1081
- this.prevPageX = offsetWidth - (clientX - left);
1082
- }
1083
- }, {
1084
- key: 'handleVerticalThumbMouseDown',
1085
- value: function handleVerticalThumbMouseDown(event) {
1086
- event.preventDefault();
1087
- this.handleDragStart(event);
1088
- var target = event.target,
1089
- clientY = event.clientY;
1090
- var offsetHeight = target.offsetHeight;
1091
-
1092
- var _target$getBoundingCl4 = target.getBoundingClientRect(),
1093
- top = _target$getBoundingCl4.top;
1094
-
1095
- this.prevPageY = offsetHeight - (clientY - top);
1096
- }
1097
- }, {
1098
- key: 'setupDragging',
1099
- value: function setupDragging() {
1100
- (0, _domCss2["default"])(document.body, _styles.disableSelectStyle);
1101
- document.addEventListener('mousemove', this.handleDrag);
1102
- document.addEventListener('mouseup', this.handleDragEnd);
1103
- document.onselectstart = _returnFalse2["default"];
1104
- }
1105
- }, {
1106
- key: 'teardownDragging',
1107
- value: function teardownDragging() {
1108
- (0, _domCss2["default"])(document.body, _styles.disableSelectStyleReset);
1109
- document.removeEventListener('mousemove', this.handleDrag);
1110
- document.removeEventListener('mouseup', this.handleDragEnd);
1111
- document.onselectstart = undefined;
1112
- }
1113
- }, {
1114
- key: 'handleDragStart',
1115
- value: function handleDragStart(event) {
1116
- this.dragging = true;
1117
- event.stopImmediatePropagation();
1118
- this.setupDragging();
1119
- }
1120
- }, {
1121
- key: 'handleDrag',
1122
- value: function handleDrag(event) {
1123
- if (this.prevPageX) {
1124
- var clientX = event.clientX;
1125
-
1126
- var _trackHorizontal$getB = this.trackHorizontal.getBoundingClientRect(),
1127
- trackLeft = _trackHorizontal$getB.left;
1128
-
1129
- var thumbWidth = this.getThumbHorizontalWidth();
1130
- var clickPosition = thumbWidth - this.prevPageX;
1131
- var offset = -trackLeft + clientX - clickPosition;
1132
- this.view.scrollLeft = this.getScrollLeftForOffset(offset);
1133
- }
1134
- if (this.prevPageY) {
1135
- var clientY = event.clientY;
1136
-
1137
- var _trackVertical$getBou = this.trackVertical.getBoundingClientRect(),
1138
- trackTop = _trackVertical$getBou.top;
1139
-
1140
- var thumbHeight = this.getThumbVerticalHeight();
1141
- var _clickPosition = thumbHeight - this.prevPageY;
1142
- var _offset = -trackTop + clientY - _clickPosition;
1143
- this.view.scrollTop = this.getScrollTopForOffset(_offset);
1144
- }
1145
- return false;
1146
- }
1147
- }, {
1148
- key: 'handleDragEnd',
1149
- value: function handleDragEnd() {
1150
- this.dragging = false;
1151
- this.prevPageX = this.prevPageY = 0;
1152
- this.teardownDragging();
1153
- this.handleDragEndAutoHide();
1154
- }
1155
- }, {
1156
- key: 'handleDragEndAutoHide',
1157
- value: function handleDragEndAutoHide() {
1158
- var autoHide = this.props.autoHide;
1159
-
1160
- if (!autoHide) return;
1161
- this.hideTracks();
1162
- }
1163
- }, {
1164
- key: 'handleTrackMouseEnter',
1165
- value: function handleTrackMouseEnter() {
1166
- this.trackMouseOver = true;
1167
- this.handleTrackMouseEnterAutoHide();
1168
- }
1169
- }, {
1170
- key: 'handleTrackMouseEnterAutoHide',
1171
- value: function handleTrackMouseEnterAutoHide() {
1172
- var autoHide = this.props.autoHide;
1173
-
1174
- if (!autoHide) return;
1175
- this.showTracks();
1176
- }
1177
- }, {
1178
- key: 'handleTrackMouseLeave',
1179
- value: function handleTrackMouseLeave() {
1180
- this.trackMouseOver = false;
1181
- this.handleTrackMouseLeaveAutoHide();
1182
- }
1183
- }, {
1184
- key: 'handleTrackMouseLeaveAutoHide',
1185
- value: function handleTrackMouseLeaveAutoHide() {
1186
- var autoHide = this.props.autoHide;
1187
-
1188
- if (!autoHide) return;
1189
- this.hideTracks();
1190
- }
1191
- }, {
1192
- key: 'showTracks',
1193
- value: function showTracks() {
1194
- clearTimeout(this.hideTracksTimeout);
1195
- (0, _domCss2["default"])(this.trackHorizontal, { opacity: 1 });
1196
- (0, _domCss2["default"])(this.trackVertical, { opacity: 1 });
1197
- }
1198
- }, {
1199
- key: 'hideTracks',
1200
- value: function hideTracks() {
1201
- var _this3 = this;
1202
-
1203
- if (this.dragging) return;
1204
- if (this.scrolling) return;
1205
- if (this.trackMouseOver) return;
1206
- var autoHideTimeout = this.props.autoHideTimeout;
1207
-
1208
- clearTimeout(this.hideTracksTimeout);
1209
- this.hideTracksTimeout = setTimeout(function () {
1210
- (0, _domCss2["default"])(_this3.trackHorizontal, { opacity: 0 });
1211
- (0, _domCss2["default"])(_this3.trackVertical, { opacity: 0 });
1212
- }, autoHideTimeout);
1213
- }
1214
- }, {
1215
- key: 'detectScrolling',
1216
- value: function detectScrolling() {
1217
- var _this4 = this;
1218
-
1219
- if (this.scrolling) return;
1220
- this.scrolling = true;
1221
- this.handleScrollStart();
1222
- this.detectScrollingInterval = setInterval(function () {
1223
- if (_this4.lastViewScrollLeft === _this4.viewScrollLeft && _this4.lastViewScrollTop === _this4.viewScrollTop) {
1224
- clearInterval(_this4.detectScrollingInterval);
1225
- _this4.scrolling = false;
1226
- _this4.handleScrollStop();
1227
- }
1228
- _this4.lastViewScrollLeft = _this4.viewScrollLeft;
1229
- _this4.lastViewScrollTop = _this4.viewScrollTop;
1230
- }, 100);
1231
- }
1232
- }, {
1233
- key: 'raf',
1234
- value: function raf(callback) {
1235
- var _this5 = this;
1236
-
1237
- if (this.requestFrame) _raf3["default"].cancel(this.requestFrame);
1238
- this.requestFrame = (0, _raf3["default"])(function () {
1239
- _this5.requestFrame = undefined;
1240
- callback();
1241
- });
1242
- }
1243
- }, {
1244
- key: 'update',
1245
- value: function update(callback) {
1246
- var _this6 = this;
1247
-
1248
- this.raf(function () {
1249
- return _this6._update(callback);
1250
- });
1251
- }
1252
- }, {
1253
- key: '_update',
1254
- value: function _update(callback) {
1255
- var _props4 = this.props,
1256
- onUpdate = _props4.onUpdate,
1257
- hideTracksWhenNotNeeded = _props4.hideTracksWhenNotNeeded;
1258
-
1259
- var values = this.getValues();
1260
- if ((0, _getScrollbarWidth2["default"])()) {
1261
- var scrollLeft = values.scrollLeft,
1262
- clientWidth = values.clientWidth,
1263
- scrollWidth = values.scrollWidth;
1264
-
1265
- var trackHorizontalWidth = (0, _getInnerWidth2["default"])(this.trackHorizontal);
1266
- var thumbHorizontalWidth = this.getThumbHorizontalWidth();
1267
- var thumbHorizontalX = scrollLeft / (scrollWidth - clientWidth) * (trackHorizontalWidth - thumbHorizontalWidth);
1268
- var thumbHorizontalStyle = {
1269
- width: thumbHorizontalWidth,
1270
- transform: 'translateX(' + thumbHorizontalX + 'px)'
1271
- };
1272
- var scrollTop = values.scrollTop,
1273
- clientHeight = values.clientHeight,
1274
- scrollHeight = values.scrollHeight;
1275
-
1276
- var trackVerticalHeight = (0, _getInnerHeight2["default"])(this.trackVertical);
1277
- var thumbVerticalHeight = this.getThumbVerticalHeight();
1278
- var thumbVerticalY = scrollTop / (scrollHeight - clientHeight) * (trackVerticalHeight - thumbVerticalHeight);
1279
- var thumbVerticalStyle = {
1280
- height: thumbVerticalHeight,
1281
- transform: 'translateY(' + thumbVerticalY + 'px)'
1282
- };
1283
- if (hideTracksWhenNotNeeded) {
1284
- var trackHorizontalStyle = {
1285
- visibility: scrollWidth > clientWidth ? 'visible' : 'hidden'
1286
- };
1287
- var trackVerticalStyle = {
1288
- visibility: scrollHeight > clientHeight ? 'visible' : 'hidden'
1289
- };
1290
- (0, _domCss2["default"])(this.trackHorizontal, trackHorizontalStyle);
1291
- (0, _domCss2["default"])(this.trackVertical, trackVerticalStyle);
1292
- }
1293
- (0, _domCss2["default"])(this.thumbHorizontal, thumbHorizontalStyle);
1294
- (0, _domCss2["default"])(this.thumbVertical, thumbVerticalStyle);
1295
- }
1296
- if (onUpdate) onUpdate(values);
1297
- if (typeof callback !== 'function') return;
1298
- callback(values);
1299
- }
1300
- }, {
1301
- key: 'render',
1302
- value: function render() {
1303
- var _this7 = this;
1304
-
1305
- var scrollbarWidth = (0, _getScrollbarWidth2["default"])();
1306
- /* eslint-disable no-unused-vars */
1307
-
1308
- var _props5 = this.props;
1309
- _props5.onScroll;
1310
- _props5.onScrollFrame;
1311
- _props5.onScrollStart;
1312
- _props5.onScrollStop;
1313
- _props5.onUpdate;
1314
- var renderView = _props5.renderView,
1315
- renderTrackHorizontal = _props5.renderTrackHorizontal,
1316
- renderTrackVertical = _props5.renderTrackVertical,
1317
- renderThumbHorizontal = _props5.renderThumbHorizontal,
1318
- renderThumbVertical = _props5.renderThumbVertical,
1319
- tagName = _props5.tagName;
1320
- _props5.hideTracksWhenNotNeeded;
1321
- var autoHide = _props5.autoHide;
1322
- _props5.autoHideTimeout;
1323
- var autoHideDuration = _props5.autoHideDuration;
1324
- _props5.thumbSize;
1325
- _props5.thumbMinSize;
1326
- var universal = _props5.universal,
1327
- autoHeight = _props5.autoHeight,
1328
- autoHeightMin = _props5.autoHeightMin,
1329
- autoHeightMax = _props5.autoHeightMax,
1330
- style = _props5.style,
1331
- children = _props5.children,
1332
- props = _objectWithoutProperties(_props5, ['onScroll', 'onScrollFrame', 'onScrollStart', 'onScrollStop', 'onUpdate', 'renderView', 'renderTrackHorizontal', 'renderTrackVertical', 'renderThumbHorizontal', 'renderThumbVertical', 'tagName', 'hideTracksWhenNotNeeded', 'autoHide', 'autoHideTimeout', 'autoHideDuration', 'thumbSize', 'thumbMinSize', 'universal', 'autoHeight', 'autoHeightMin', 'autoHeightMax', 'style', 'children']);
1333
- /* eslint-enable no-unused-vars */
1334
-
1335
- var didMountUniversal = this.state.didMountUniversal;
1336
-
1337
-
1338
- var containerStyle = _extends({}, _styles.containerStyleDefault, autoHeight && _extends({}, _styles.containerStyleAutoHeight, {
1339
- minHeight: autoHeightMin,
1340
- maxHeight: autoHeightMax
1341
- }), style);
1342
-
1343
- var viewStyle = _extends({}, _styles.viewStyleDefault, {
1344
- // Hide scrollbars by setting a negative margin
1345
- marginRight: scrollbarWidth ? -scrollbarWidth : 0,
1346
- marginBottom: scrollbarWidth ? -scrollbarWidth : 0
1347
- }, autoHeight && _extends({}, _styles.viewStyleAutoHeight, {
1348
- // Add scrollbarWidth to autoHeight in order to compensate negative margins
1349
- minHeight: (0, _isString2["default"])(autoHeightMin) ? 'calc(' + autoHeightMin + ' + ' + scrollbarWidth + 'px)' : autoHeightMin + scrollbarWidth,
1350
- maxHeight: (0, _isString2["default"])(autoHeightMax) ? 'calc(' + autoHeightMax + ' + ' + scrollbarWidth + 'px)' : autoHeightMax + scrollbarWidth
1351
- }), autoHeight && universal && !didMountUniversal && {
1352
- minHeight: autoHeightMin,
1353
- maxHeight: autoHeightMax
1354
- }, universal && !didMountUniversal && _styles.viewStyleUniversalInitial);
1355
-
1356
- var trackAutoHeightStyle = {
1357
- transition: 'opacity ' + autoHideDuration + 'ms',
1358
- opacity: 0
1359
- };
1360
-
1361
- var trackHorizontalStyle = _extends({}, _styles.trackHorizontalStyleDefault, autoHide && trackAutoHeightStyle, (!scrollbarWidth || universal && !didMountUniversal) && {
1362
- display: 'none'
1363
- });
1364
-
1365
- var trackVerticalStyle = _extends({}, _styles.trackVerticalStyleDefault, autoHide && trackAutoHeightStyle, (!scrollbarWidth || universal && !didMountUniversal) && {
1366
- display: 'none'
1367
- });
1368
-
1369
- return (0, _react.createElement)(tagName, _extends({}, props, { style: containerStyle, ref: function ref(_ref3) {
1370
- _this7.container = _ref3;
1371
- } }), [(0, _react.cloneElement)(renderView({ style: viewStyle }), { key: 'view', ref: function ref(_ref4) {
1372
- _this7.view = _ref4;
1373
- } }, children), (0, _react.cloneElement)(renderTrackHorizontal({ style: trackHorizontalStyle }), { key: 'trackHorizontal', ref: function ref(_ref5) {
1374
- _this7.trackHorizontal = _ref5;
1375
- } }, (0, _react.cloneElement)(renderThumbHorizontal({ style: _styles.thumbHorizontalStyleDefault }), { ref: function ref(_ref6) {
1376
- _this7.thumbHorizontal = _ref6;
1377
- } })), (0, _react.cloneElement)(renderTrackVertical({ style: trackVerticalStyle }), { key: 'trackVertical', ref: function ref(_ref7) {
1378
- _this7.trackVertical = _ref7;
1379
- } }, (0, _react.cloneElement)(renderThumbVertical({ style: _styles.thumbVerticalStyleDefault }), { ref: function ref(_ref8) {
1380
- _this7.thumbVertical = _ref8;
1381
- } }))]);
1382
- }
1383
- }]);
1384
-
1385
- return Scrollbars;
1386
- }(_react.Component);
1387
-
1388
- exports["default"] = Scrollbars;
1389
-
1390
-
1391
- Scrollbars.propTypes = {
1392
- onScroll: _propTypes2["default"].func,
1393
- onScrollFrame: _propTypes2["default"].func,
1394
- onScrollStart: _propTypes2["default"].func,
1395
- onScrollStop: _propTypes2["default"].func,
1396
- onUpdate: _propTypes2["default"].func,
1397
- renderView: _propTypes2["default"].func,
1398
- renderTrackHorizontal: _propTypes2["default"].func,
1399
- renderTrackVertical: _propTypes2["default"].func,
1400
- renderThumbHorizontal: _propTypes2["default"].func,
1401
- renderThumbVertical: _propTypes2["default"].func,
1402
- tagName: _propTypes2["default"].string,
1403
- thumbSize: _propTypes2["default"].number,
1404
- thumbMinSize: _propTypes2["default"].number,
1405
- hideTracksWhenNotNeeded: _propTypes2["default"].bool,
1406
- autoHide: _propTypes2["default"].bool,
1407
- autoHideTimeout: _propTypes2["default"].number,
1408
- autoHideDuration: _propTypes2["default"].number,
1409
- autoHeight: _propTypes2["default"].bool,
1410
- autoHeightMin: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
1411
- autoHeightMax: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
1412
- universal: _propTypes2["default"].bool,
1413
- style: _propTypes2["default"].object,
1414
- children: _propTypes2["default"].node
1415
- };
1416
-
1417
- Scrollbars.defaultProps = {
1418
- renderView: _defaultRenderElements.renderViewDefault,
1419
- renderTrackHorizontal: _defaultRenderElements.renderTrackHorizontalDefault,
1420
- renderTrackVertical: _defaultRenderElements.renderTrackVerticalDefault,
1421
- renderThumbHorizontal: _defaultRenderElements.renderThumbHorizontalDefault,
1422
- renderThumbVertical: _defaultRenderElements.renderThumbVerticalDefault,
1423
- tagName: 'div',
1424
- thumbMinSize: 30,
1425
- hideTracksWhenNotNeeded: false,
1426
- autoHide: false,
1427
- autoHideTimeout: 1000,
1428
- autoHideDuration: 200,
1429
- autoHeight: false,
1430
- autoHeightMin: 0,
1431
- autoHeightMax: 200,
1432
- universal: false
1433
- };
1434
- } (Scrollbars));
1435
-
1436
- (function (exports) {
1437
-
1438
- Object.defineProperty(exports, "__esModule", {
1439
- value: true
1440
- });
1441
- exports.Scrollbars = undefined;
1442
-
1443
- var _Scrollbars = Scrollbars;
1444
-
1445
- var _Scrollbars2 = _interopRequireDefault(_Scrollbars);
1446
-
1447
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
1448
-
1449
- exports["default"] = _Scrollbars2["default"];
1450
- exports.Scrollbars = _Scrollbars2["default"];
1451
- } (lib));
1452
-
1453
- var css_248z = "[data-gene-ui-version=\"2.16.3\"] .scroll-holder{position:relative}[data-gene-ui-version=\"2.16.3\"] .scroll-holder .scroll-thumb{background:rgba(var(--background-sc-rgb),.05);border-radius:var(--scrollbar-size,16px);transition:background .3s,transform .25s}[data-gene-ui-version=\"2.16.3\"] .scroll-holder .scroll-track{cursor:pointer;position:absolute;transition:opacity .3s}[data-gene-ui-version=\"2.16.3\"] .scroll-holder .scroll-track.horizontal{bottom:0;height:var(--scrollbar-size,16px)!important;left:0;padding:var(--scrollbar-space,4px) var(--scrollbar-gutter,10px);width:100%!important}[data-gene-ui-version=\"2.16.3\"] .scroll-holder .scroll-track.vertical{height:100%!important;padding:var(--scrollbar-gutter,10px) var(--scrollbar-space,4px);top:0;width:var(--scrollbar-size,16px)!important}html:not([dir=rtl]) .scroll-holder .scroll-track.vertical{right:0}html[dir=rtl] .scroll-holder .scroll-track.vertical{left:0}[data-gene-ui-version=\"2.16.3\"] .scroll-holder .scroll-track:active .scroll-thumb,[data-gene-ui-version=\"2.16.3\"] .scroll-holder .scroll-track:hover .scroll-thumb{background:rgba(var(--background-sc-rgb),.1);transition:background .3s}[data-gene-ui-version=\"2.16.3\"] .scroll-holder:not(:hover,:active) .scroll-track{opacity:0}[data-gene-ui-version=\"2.16.3\"] .scroll-holder .scroll-content{margin-bottom:var(--sb-margin-bottom);margin-inline-end:var(--sb-margin-side);z-index:0}[data-gene-ui-version=\"2.16.3\"] .scroll-holder.s-small{--scrollbar-size:10px;--scrollbar-thumbSize:4px;--scrollbar-gutter:3px;--scrollbar-space:3px}";
1454
- styleInject(css_248z);
1455
-
1456
- const easeOutQuad = t => t * (2 - t);
1457
- const smoothScrollTo = (element, to, duration) => {
1458
- const start = element.viewScrollTop || 0;
1459
- const change = to - start;
1460
- const startTime = performance.now();
1461
- let animationFrameId;
1462
- const animateScroll = timestamp => {
1463
- const elapsed = timestamp - startTime;
1464
- const progress = Math.min(elapsed / duration, 1);
1465
- const easeProgress = easeOutQuad(progress);
1466
- element.scrollTop(start + change * easeProgress);
1467
- if (progress < 1) {
1468
- animationFrameId = requestAnimationFrame(animateScroll);
1469
- }
1470
- };
1471
- animationFrameId = requestAnimationFrame(animateScroll);
1472
- const cancelScroll = () => {
1473
- if (animationFrameId) {
1474
- cancelAnimationFrame(animationFrameId);
1475
- }
1476
- };
1477
- return cancelScroll;
1478
- };
1479
- const CustomScrollbar = /*#__PURE__*/forwardRef((_ref, ref) => {
1480
- let {
1481
- children,
1482
- className,
1483
- size,
1484
- scrollTop,
1485
- withSmoothScroll,
1486
- ...restProps
1487
- } = _ref;
1488
- useEffect(() => {
1489
- const element = ref === null || ref === void 0 ? void 0 : ref.current;
1490
- if (!element) return;
1491
- let cancelScroll;
1492
- if (withSmoothScroll) {
1493
- cancelScroll = smoothScrollTo(element, scrollTop, 500);
1494
- } else {
1495
- element.scrollTop(scrollTop);
1496
- }
1497
-
1498
- // Clean up the cancellation function if the component unmounts
1499
- // or if there's a change in the scroll position
1500
- return () => {
1501
- cancelScroll && cancelScroll();
1502
- };
1503
- }, [scrollTop]);
1504
- return /*#__PURE__*/React__default.createElement(lib.Scrollbars, _extends$1({
1505
- ref: ref,
1506
- renderView: _ref2 => {
1507
- let {
1508
- style,
1509
- ...props
1510
- } = _ref2;
1511
- return /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
1512
- style: {
1513
- ...style,
1514
- margin: null,
1515
- '--sb-margin-bottom': "".concat(style.marginBottom, "px"),
1516
- '--sb-margin-side': "".concat(style.marginRight, "px")
1517
- /* This change will return the CORE-395 bug due to the fact that we
1518
- * used a virtualized-list in the ScrollBar everywhere.
1519
- * ...
1520
- * overflow: 'auto'
1521
- */
1522
- },
1523
- className: "scroll-content"
1524
- }));
1525
- },
1526
- renderTrackHorizontal: props => /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
1527
- className: "scroll-track horizontal"
1528
- })),
1529
- renderTrackVertical: props => /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
1530
- className: "scroll-track vertical"
1531
- })),
1532
- renderThumbHorizontal: props => /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
1533
- className: "scroll-thumb horizontal"
1534
- })),
1535
- renderThumbVertical: props => /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
1536
- className: "scroll-thumb vertical"
1537
- })),
1538
- className: classnames('scroll-holder', "s-".concat(size), className),
1539
- thumbMinSize: 0,
1540
- hideTracksWhenNotNeeded: true
1541
- }, restProps), children);
1542
- });
1543
- CustomScrollbar.propTypes = {
1544
- /**
1545
- * Any valid React node
1546
- */
1547
- children: PropTypes.node.isRequired,
1548
- /**
1549
- * Enable auto-height mode. When true container grows with content.
1550
- */
1551
- autoHeight: PropTypes.bool,
1552
- /**
1553
- * Set a minimum height for auto-height mode.
1554
- */
1555
- autoHeightMin: PropTypes.number,
1556
- /**
1557
- * Set a maximum height for auto-height mode
1558
- */
1559
- autoHeightMax: PropTypes.number,
1560
- /**
1561
- * Set the size for scrollbar thickness
1562
- */
1563
- size: PropTypes.oneOf(customScrollbarConfig.size),
1564
- /**
1565
- * Set scrollbar top position dynamically.
1566
- * Prop works when ref is provided.
1567
- */
1568
- scrollTop: PropTypes.number,
1569
- /**
1570
- * This prop works with `scrollTop` prop
1571
- * and provide auto scroll type if true
1572
- * then auto scrolling will be smoother
1573
- */
1574
- withSmoothScroll: PropTypes.bool
1575
- };
1576
- CustomScrollbar.defaultProps = {
1577
- autoHeight: false,
1578
- autoHeightMin: 0,
1579
- autoHeightMax: 5000,
1580
- size: customScrollbarConfig.size[0],
1581
- scrollTop: 0,
1582
- withSmoothScroll: false
1583
- };
1584
-
1585
- export { CustomScrollbar as default };