@salutejs/plasma-new-hope 0.337.1-canary.2276.18280051462.0 → 0.338.0-canary.2254.18336605490.0
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/cjs/components/Combobox/ComboboxNew/Combobox.js +1 -1
- package/cjs/components/Combobox/ComboboxNew/Combobox.js.map +1 -1
- package/cjs/components/Modal/Modal.css +2 -2
- package/cjs/components/Modal/Modal.js +4 -5
- package/cjs/components/Modal/Modal.js.map +1 -1
- package/cjs/components/Select/Select.js +1 -1
- package/cjs/components/Select/Select.js.map +1 -1
- package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.js +1 -1
- package/emotion/cjs/components/Modal/Modal.js +6 -7
- package/emotion/cjs/components/Scrollbar/Scrollbar.js +423 -0
- package/emotion/cjs/components/Scrollbar/Scrollbar.styles.js +59 -0
- package/emotion/cjs/components/Scrollbar/Scrollbar.tokens.js +39 -0
- package/emotion/cjs/components/Scrollbar/Scrollbar.types.js +4 -0
- package/emotion/cjs/components/Scrollbar/index.js +26 -0
- package/emotion/cjs/components/Scrollbar/utils.js +87 -0
- package/emotion/cjs/components/Scrollbar/variations/_size/base.js +12 -0
- package/emotion/cjs/components/Scrollbar/variations/_view/base.js +12 -0
- package/emotion/cjs/components/Select/Select.js +1 -1
- package/emotion/cjs/examples/components/Scrollbar/Scrollbar.config.js +27 -0
- package/emotion/cjs/examples/components/Scrollbar/Scrollbar.js +15 -0
- package/emotion/cjs/mixins/addScrollbar.js +24 -0
- package/emotion/es/components/Combobox/ComboboxNew/Combobox.js +1 -1
- package/emotion/es/components/Modal/Modal.js +5 -6
- package/emotion/es/components/Scrollbar/Scrollbar.js +359 -0
- package/emotion/es/components/Scrollbar/Scrollbar.styles.js +24 -0
- package/emotion/es/components/Scrollbar/Scrollbar.tokens.js +21 -0
- package/emotion/es/components/Scrollbar/Scrollbar.types.js +1 -0
- package/emotion/es/components/Scrollbar/index.js +2 -0
- package/emotion/es/components/Scrollbar/utils.js +69 -0
- package/emotion/es/components/Scrollbar/variations/_size/base.js +2 -0
- package/emotion/es/components/Scrollbar/variations/_view/base.js +2 -0
- package/emotion/es/components/Select/Select.js +1 -1
- package/emotion/es/examples/components/Scrollbar/Scrollbar.config.js +17 -0
- package/emotion/es/examples/components/Scrollbar/Scrollbar.js +5 -0
- package/emotion/es/mixins/addScrollbar.js +6 -0
- package/es/components/Combobox/ComboboxNew/Combobox.js +1 -1
- package/es/components/Combobox/ComboboxNew/Combobox.js.map +1 -1
- package/es/components/Modal/Modal.css +2 -2
- package/es/components/Modal/Modal.js +4 -5
- package/es/components/Modal/Modal.js.map +1 -1
- package/es/components/Select/Select.js +1 -1
- package/es/components/Select/Select.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.js +1 -1
- package/styled-components/cjs/components/Modal/Modal.js +6 -7
- package/styled-components/cjs/components/Scrollbar/Scrollbar.js +423 -0
- package/styled-components/cjs/components/Scrollbar/Scrollbar.styles.js +121 -0
- package/styled-components/cjs/components/Scrollbar/Scrollbar.tokens.js +39 -0
- package/styled-components/cjs/components/Scrollbar/Scrollbar.types.js +4 -0
- package/styled-components/cjs/components/Scrollbar/index.js +26 -0
- package/styled-components/cjs/components/Scrollbar/utils.js +87 -0
- package/styled-components/cjs/components/Scrollbar/variations/_size/base.js +14 -0
- package/styled-components/cjs/components/Scrollbar/variations/_view/base.js +14 -0
- package/styled-components/cjs/components/Select/Select.js +1 -1
- package/styled-components/cjs/examples/components/Scrollbar/Scrollbar.config.js +45 -0
- package/styled-components/cjs/examples/components/Scrollbar/Scrollbar.js +15 -0
- package/styled-components/cjs/mixins/addScrollbar.js +24 -0
- package/styled-components/es/components/Combobox/ComboboxNew/Combobox.js +1 -1
- package/styled-components/es/components/Modal/Modal.js +5 -6
- package/styled-components/es/components/Scrollbar/Scrollbar.js +359 -0
- package/styled-components/es/components/Scrollbar/Scrollbar.styles.js +51 -0
- package/styled-components/es/components/Scrollbar/Scrollbar.tokens.js +21 -0
- package/styled-components/es/components/Scrollbar/Scrollbar.types.js +1 -0
- package/styled-components/es/components/Scrollbar/index.js +2 -0
- package/styled-components/es/components/Scrollbar/utils.js +69 -0
- package/styled-components/es/components/Scrollbar/variations/_size/base.js +4 -0
- package/styled-components/es/components/Scrollbar/variations/_view/base.js +4 -0
- package/styled-components/es/components/Select/Select.js +1 -1
- package/styled-components/es/examples/components/Scrollbar/Scrollbar.config.js +35 -0
- package/styled-components/es/examples/components/Scrollbar/Scrollbar.js +5 -0
- package/styled-components/es/mixins/addScrollbar.js +6 -0
- package/types/components/Modal/Modal.d.ts.map +1 -1
- package/types/components/Scrollbar/Scrollbar.d.ts +23 -0
- package/types/components/Scrollbar/Scrollbar.d.ts.map +1 -0
- package/types/components/Scrollbar/Scrollbar.styles.d.ts +7 -0
- package/types/components/Scrollbar/Scrollbar.styles.d.ts.map +1 -0
- package/types/components/Scrollbar/Scrollbar.tokens.d.ts +22 -0
- package/types/components/Scrollbar/Scrollbar.tokens.d.ts.map +1 -0
- package/types/components/Scrollbar/Scrollbar.types.d.ts +52 -0
- package/types/components/Scrollbar/Scrollbar.types.d.ts.map +1 -0
- package/types/components/Scrollbar/index.d.ts +4 -0
- package/types/components/Scrollbar/index.d.ts.map +1 -0
- package/types/components/Scrollbar/utils.d.ts +7 -0
- package/types/components/Scrollbar/utils.d.ts.map +1 -0
- package/types/components/Scrollbar/variations/_size/base.d.ts +2 -0
- package/types/components/Scrollbar/variations/_size/base.d.ts.map +1 -0
- package/types/components/Scrollbar/variations/_view/base.d.ts +2 -0
- package/types/components/Scrollbar/variations/_view/base.d.ts.map +1 -0
- package/types/examples/components/Scrollbar/Scrollbar.config.d.ts +16 -0
- package/types/examples/components/Scrollbar/Scrollbar.config.d.ts.map +1 -0
- package/types/examples/components/Scrollbar/Scrollbar.d.ts +10 -0
- package/types/examples/components/Scrollbar/Scrollbar.d.ts.map +1 -0
- package/types/mixins/addScrollbar.d.ts +3 -0
- package/types/mixins/addScrollbar.d.ts.map +1 -0
|
@@ -0,0 +1,423 @@
|
|
|
1
|
+
/* eslint-disable */ "use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
get scrollbarConfig () {
|
|
13
|
+
return scrollbarConfig;
|
|
14
|
+
},
|
|
15
|
+
get scrollbarRoot () {
|
|
16
|
+
return scrollbarRoot;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
|
|
20
|
+
var _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
|
|
21
|
+
var _base = require("./variations/_size/base");
|
|
22
|
+
var _base1 = require("./variations/_view/base");
|
|
23
|
+
var _Scrollbarstyles = require("./Scrollbar.styles");
|
|
24
|
+
var _Scrollbartokens = require("./Scrollbar.tokens");
|
|
25
|
+
var _utils = require("./utils");
|
|
26
|
+
function _array_like_to_array(arr, len) {
|
|
27
|
+
if (len == null || len > arr.length) len = arr.length;
|
|
28
|
+
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
29
|
+
return arr2;
|
|
30
|
+
}
|
|
31
|
+
function _array_with_holes(arr) {
|
|
32
|
+
if (Array.isArray(arr)) return arr;
|
|
33
|
+
}
|
|
34
|
+
function _define_property(obj, key, value) {
|
|
35
|
+
if (key in obj) {
|
|
36
|
+
Object.defineProperty(obj, key, {
|
|
37
|
+
value: value,
|
|
38
|
+
enumerable: true,
|
|
39
|
+
configurable: true,
|
|
40
|
+
writable: true
|
|
41
|
+
});
|
|
42
|
+
} else {
|
|
43
|
+
obj[key] = value;
|
|
44
|
+
}
|
|
45
|
+
return obj;
|
|
46
|
+
}
|
|
47
|
+
function _interop_require_default(obj) {
|
|
48
|
+
return obj && obj.__esModule ? obj : {
|
|
49
|
+
default: obj
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
function _getRequireWildcardCache(nodeInterop) {
|
|
53
|
+
if (typeof WeakMap !== "function") return null;
|
|
54
|
+
var cacheBabelInterop = new WeakMap();
|
|
55
|
+
var cacheNodeInterop = new WeakMap();
|
|
56
|
+
return (_getRequireWildcardCache = function(nodeInterop) {
|
|
57
|
+
return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
|
|
58
|
+
})(nodeInterop);
|
|
59
|
+
}
|
|
60
|
+
function _interop_require_wildcard(obj, nodeInterop) {
|
|
61
|
+
if (!nodeInterop && obj && obj.__esModule) {
|
|
62
|
+
return obj;
|
|
63
|
+
}
|
|
64
|
+
if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
|
|
65
|
+
return {
|
|
66
|
+
default: obj
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
var cache = _getRequireWildcardCache(nodeInterop);
|
|
70
|
+
if (cache && cache.has(obj)) {
|
|
71
|
+
return cache.get(obj);
|
|
72
|
+
}
|
|
73
|
+
var newObj = {
|
|
74
|
+
__proto__: null
|
|
75
|
+
};
|
|
76
|
+
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
|
|
77
|
+
for(var key in obj){
|
|
78
|
+
if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
79
|
+
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
|
|
80
|
+
if (desc && (desc.get || desc.set)) {
|
|
81
|
+
Object.defineProperty(newObj, key, desc);
|
|
82
|
+
} else {
|
|
83
|
+
newObj[key] = obj[key];
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
newObj.default = obj;
|
|
88
|
+
if (cache) {
|
|
89
|
+
cache.set(obj, newObj);
|
|
90
|
+
}
|
|
91
|
+
return newObj;
|
|
92
|
+
}
|
|
93
|
+
function _iterable_to_array_limit(arr, i) {
|
|
94
|
+
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
95
|
+
if (_i == null) return;
|
|
96
|
+
var _arr = [];
|
|
97
|
+
var _n = true;
|
|
98
|
+
var _d = false;
|
|
99
|
+
var _s, _e;
|
|
100
|
+
try {
|
|
101
|
+
for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
|
|
102
|
+
_arr.push(_s.value);
|
|
103
|
+
if (i && _arr.length === i) break;
|
|
104
|
+
}
|
|
105
|
+
} catch (err) {
|
|
106
|
+
_d = true;
|
|
107
|
+
_e = err;
|
|
108
|
+
} finally{
|
|
109
|
+
try {
|
|
110
|
+
if (!_n && _i["return"] != null) _i["return"]();
|
|
111
|
+
} finally{
|
|
112
|
+
if (_d) throw _e;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
return _arr;
|
|
116
|
+
}
|
|
117
|
+
function _non_iterable_rest() {
|
|
118
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
119
|
+
}
|
|
120
|
+
function _object_spread(target) {
|
|
121
|
+
for(var i = 1; i < arguments.length; i++){
|
|
122
|
+
var source = arguments[i] != null ? arguments[i] : {};
|
|
123
|
+
var ownKeys = Object.keys(source);
|
|
124
|
+
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
125
|
+
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
126
|
+
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
127
|
+
}));
|
|
128
|
+
}
|
|
129
|
+
ownKeys.forEach(function(key) {
|
|
130
|
+
_define_property(target, key, source[key]);
|
|
131
|
+
});
|
|
132
|
+
}
|
|
133
|
+
return target;
|
|
134
|
+
}
|
|
135
|
+
function ownKeys(object, enumerableOnly) {
|
|
136
|
+
var keys = Object.keys(object);
|
|
137
|
+
if (Object.getOwnPropertySymbols) {
|
|
138
|
+
var symbols = Object.getOwnPropertySymbols(object);
|
|
139
|
+
if (enumerableOnly) {
|
|
140
|
+
symbols = symbols.filter(function(sym) {
|
|
141
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
142
|
+
});
|
|
143
|
+
}
|
|
144
|
+
keys.push.apply(keys, symbols);
|
|
145
|
+
}
|
|
146
|
+
return keys;
|
|
147
|
+
}
|
|
148
|
+
function _object_spread_props(target, source) {
|
|
149
|
+
source = source != null ? source : {};
|
|
150
|
+
if (Object.getOwnPropertyDescriptors) {
|
|
151
|
+
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
152
|
+
} else {
|
|
153
|
+
ownKeys(Object(source)).forEach(function(key) {
|
|
154
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
return target;
|
|
158
|
+
}
|
|
159
|
+
function _object_without_properties(source, excluded) {
|
|
160
|
+
if (source == null) return {};
|
|
161
|
+
var target = _object_without_properties_loose(source, excluded);
|
|
162
|
+
var key, i;
|
|
163
|
+
if (Object.getOwnPropertySymbols) {
|
|
164
|
+
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
165
|
+
for(i = 0; i < sourceSymbolKeys.length; i++){
|
|
166
|
+
key = sourceSymbolKeys[i];
|
|
167
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
168
|
+
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
169
|
+
target[key] = source[key];
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
return target;
|
|
173
|
+
}
|
|
174
|
+
function _object_without_properties_loose(source, excluded) {
|
|
175
|
+
if (source == null) return {};
|
|
176
|
+
var target = {};
|
|
177
|
+
var sourceKeys = Object.keys(source);
|
|
178
|
+
var key, i;
|
|
179
|
+
for(i = 0; i < sourceKeys.length; i++){
|
|
180
|
+
key = sourceKeys[i];
|
|
181
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
182
|
+
target[key] = source[key];
|
|
183
|
+
}
|
|
184
|
+
return target;
|
|
185
|
+
}
|
|
186
|
+
function _sliced_to_array(arr, i) {
|
|
187
|
+
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
|
|
188
|
+
}
|
|
189
|
+
function _unsupported_iterable_to_array(o, minLen) {
|
|
190
|
+
if (!o) return;
|
|
191
|
+
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
192
|
+
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
193
|
+
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
194
|
+
if (n === "Map" || n === "Set") return Array.from(n);
|
|
195
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
196
|
+
}
|
|
197
|
+
var MIN_SCROLLBAR_TRACK_HEIGHT = 20;
|
|
198
|
+
var scrollbarRoot = function(Root) {
|
|
199
|
+
return /*#__PURE__*/ (0, _react.forwardRef)(function(_param, ref) {
|
|
200
|
+
var className = _param.className, _param_view = _param.view, view = _param_view === void 0 ? 'default' : _param_view, _param_size = _param.size, size = _param_size === void 0 ? 'm' : _param_size, _param_placement = _param.placement, placement = _param_placement === void 0 ? 'right' : _param_placement, _param_offset = _param.offset, offset = _param_offset === void 0 ? '4px' : _param_offset, _param_autoHide = _param.autoHide, autoHide = _param_autoHide === void 0 ? true : _param_autoHide, _param_autoHideDelay = _param.autoHideDelay, autoHideDelay = _param_autoHideDelay === void 0 ? 2000 : _param_autoHideDelay, style = _param.style, children = _param.children, rest = _object_without_properties(_param, [
|
|
201
|
+
"className",
|
|
202
|
+
"view",
|
|
203
|
+
"size",
|
|
204
|
+
"placement",
|
|
205
|
+
"offset",
|
|
206
|
+
"autoHide",
|
|
207
|
+
"autoHideDelay",
|
|
208
|
+
"style",
|
|
209
|
+
"children"
|
|
210
|
+
]);
|
|
211
|
+
var containerRef = (0, _react.useRef)(null);
|
|
212
|
+
var contentRef = (0, _react.useRef)(null);
|
|
213
|
+
var trackRef = (0, _react.useRef)(null);
|
|
214
|
+
var thumbRef = (0, _react.useRef)(null);
|
|
215
|
+
var hideTimeoutRef = (0, _react.useRef)(null);
|
|
216
|
+
var isInitializedRef = (0, _react.useRef)(false);
|
|
217
|
+
var _useState = _sliced_to_array((0, _react.useState)({
|
|
218
|
+
isVisible: false,
|
|
219
|
+
thumbHeight: 0,
|
|
220
|
+
thumbPosition: 0,
|
|
221
|
+
isDragging: false
|
|
222
|
+
}), 2), scrollbarState = _useState[0], setScrollbarState = _useState[1];
|
|
223
|
+
var parsedOffset = (0, _utils.parseOffset)(offset);
|
|
224
|
+
var updateScrollbar = function() {
|
|
225
|
+
var show = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
|
|
226
|
+
var container = containerRef.current;
|
|
227
|
+
if (!container) return;
|
|
228
|
+
var _calculateScrollbar = (0, _utils.calculateScrollbar)(container, parsedOffset, MIN_SCROLLBAR_TRACK_HEIGHT), thumbHeight = _calculateScrollbar.thumbHeight, thumbPosition = _calculateScrollbar.thumbPosition;
|
|
229
|
+
setScrollbarState(function(prevState) {
|
|
230
|
+
if (prevState.thumbHeight === thumbHeight && prevState.thumbPosition === thumbPosition && prevState.isVisible === (show || prevState.isVisible)) {
|
|
231
|
+
return prevState;
|
|
232
|
+
}
|
|
233
|
+
return _object_spread_props(_object_spread({}, prevState), {
|
|
234
|
+
thumbHeight: thumbHeight,
|
|
235
|
+
thumbPosition: thumbPosition,
|
|
236
|
+
isVisible: show || prevState.isVisible
|
|
237
|
+
});
|
|
238
|
+
});
|
|
239
|
+
};
|
|
240
|
+
var clearHideTimeout = function() {
|
|
241
|
+
if (hideTimeoutRef.current) {
|
|
242
|
+
clearTimeout(hideTimeoutRef.current);
|
|
243
|
+
hideTimeoutRef.current = null;
|
|
244
|
+
}
|
|
245
|
+
};
|
|
246
|
+
var showScrollbarWithDelay = function() {
|
|
247
|
+
clearHideTimeout();
|
|
248
|
+
updateScrollbar(true);
|
|
249
|
+
if (autoHide) {
|
|
250
|
+
hideTimeoutRef.current = window.setTimeout(function() {
|
|
251
|
+
setScrollbarState(function(prevState) {
|
|
252
|
+
return _object_spread_props(_object_spread({}, prevState), {
|
|
253
|
+
isVisible: false
|
|
254
|
+
});
|
|
255
|
+
});
|
|
256
|
+
}, autoHideDelay);
|
|
257
|
+
}
|
|
258
|
+
};
|
|
259
|
+
var handleScroll = function() {
|
|
260
|
+
showScrollbarWithDelay();
|
|
261
|
+
updateScrollbar();
|
|
262
|
+
};
|
|
263
|
+
var handleMouseEnter = function() {
|
|
264
|
+
showScrollbarWithDelay();
|
|
265
|
+
};
|
|
266
|
+
var handleScrollbarDrag = function(e) {
|
|
267
|
+
e.preventDefault();
|
|
268
|
+
e.stopPropagation();
|
|
269
|
+
var thumb = e.currentTarget;
|
|
270
|
+
var track = thumb.parentElement;
|
|
271
|
+
var container = containerRef.current;
|
|
272
|
+
if (!container || !track) return;
|
|
273
|
+
clearHideTimeout();
|
|
274
|
+
var startY = e.clientY;
|
|
275
|
+
var startThumbPosition = parseFloat(thumb.style.top || '0');
|
|
276
|
+
var trackRect = track.getBoundingClientRect();
|
|
277
|
+
var trackHeight = trackRect.height;
|
|
278
|
+
var thumbHeight = thumb.offsetHeight;
|
|
279
|
+
var scrollHeight = container.scrollHeight, clientHeight = container.clientHeight;
|
|
280
|
+
var maxScroll = scrollHeight - clientHeight;
|
|
281
|
+
var handleMouseMove = function(moveEvent) {
|
|
282
|
+
var deltaY = moveEvent.clientY - startY;
|
|
283
|
+
var newThumbPosition = Math.max(0, Math.min(trackHeight - thumbHeight, startThumbPosition + deltaY));
|
|
284
|
+
var scrollPercentage = newThumbPosition / (trackHeight - thumbHeight);
|
|
285
|
+
var newScrollTop = scrollPercentage * maxScroll;
|
|
286
|
+
container.scrollTop = newScrollTop;
|
|
287
|
+
setScrollbarState(function(prevState) {
|
|
288
|
+
return _object_spread_props(_object_spread({}, prevState), {
|
|
289
|
+
thumbPosition: newThumbPosition,
|
|
290
|
+
isDragging: true,
|
|
291
|
+
isVisible: true
|
|
292
|
+
});
|
|
293
|
+
});
|
|
294
|
+
};
|
|
295
|
+
var handleMouseUp = function() {
|
|
296
|
+
document.removeEventListener('mousemove', handleMouseMove);
|
|
297
|
+
document.removeEventListener('mouseup', handleMouseUp);
|
|
298
|
+
setScrollbarState(function(prevState) {
|
|
299
|
+
return _object_spread_props(_object_spread({}, prevState), {
|
|
300
|
+
isDragging: false
|
|
301
|
+
});
|
|
302
|
+
});
|
|
303
|
+
showScrollbarWithDelay();
|
|
304
|
+
};
|
|
305
|
+
document.addEventListener('mousemove', handleMouseMove);
|
|
306
|
+
document.addEventListener('mouseup', handleMouseUp);
|
|
307
|
+
};
|
|
308
|
+
var handleTrackClick = function(e) {
|
|
309
|
+
e.preventDefault();
|
|
310
|
+
e.stopPropagation();
|
|
311
|
+
var track = e.currentTarget;
|
|
312
|
+
var container = containerRef.current;
|
|
313
|
+
if (!container || !track) return;
|
|
314
|
+
if (thumbRef.current && thumbRef.current.contains(e.target)) {
|
|
315
|
+
return;
|
|
316
|
+
}
|
|
317
|
+
clearHideTimeout();
|
|
318
|
+
var trackRect = track.getBoundingClientRect();
|
|
319
|
+
var clickY = e.clientY - trackRect.top;
|
|
320
|
+
var trackHeight = trackRect.height;
|
|
321
|
+
var thumbHeight = scrollbarState.thumbHeight;
|
|
322
|
+
var scrollHeight = container.scrollHeight, clientHeight = container.clientHeight;
|
|
323
|
+
var maxScroll = scrollHeight - clientHeight;
|
|
324
|
+
if (maxScroll <= 0) return;
|
|
325
|
+
var newThumbPosition = clickY - thumbHeight / 2;
|
|
326
|
+
newThumbPosition = Math.max(0, Math.min(trackHeight - thumbHeight, newThumbPosition));
|
|
327
|
+
var scrollPercentage = newThumbPosition / (trackHeight - thumbHeight);
|
|
328
|
+
var newScrollTop = scrollPercentage * maxScroll;
|
|
329
|
+
container.scrollTop = newScrollTop;
|
|
330
|
+
setScrollbarState(function(prevState) {
|
|
331
|
+
return _object_spread_props(_object_spread({}, prevState), {
|
|
332
|
+
thumbPosition: newThumbPosition,
|
|
333
|
+
isVisible: true
|
|
334
|
+
});
|
|
335
|
+
});
|
|
336
|
+
showScrollbarWithDelay();
|
|
337
|
+
};
|
|
338
|
+
(0, _react.useEffect)(function() {
|
|
339
|
+
var container = containerRef.current;
|
|
340
|
+
if (!container) return;
|
|
341
|
+
if (!isInitializedRef.current) {
|
|
342
|
+
updateScrollbar();
|
|
343
|
+
isInitializedRef.current = true;
|
|
344
|
+
}
|
|
345
|
+
container.addEventListener('scroll', handleScroll);
|
|
346
|
+
container.addEventListener('mouseenter', handleMouseEnter);
|
|
347
|
+
var resizeObserver = new ResizeObserver(function() {
|
|
348
|
+
updateScrollbar();
|
|
349
|
+
});
|
|
350
|
+
if (contentRef.current) {
|
|
351
|
+
resizeObserver.observe(contentRef.current);
|
|
352
|
+
}
|
|
353
|
+
return function() {
|
|
354
|
+
container.removeEventListener('scroll', handleScroll);
|
|
355
|
+
container.removeEventListener('mouseenter', handleMouseEnter);
|
|
356
|
+
resizeObserver.disconnect();
|
|
357
|
+
clearHideTimeout();
|
|
358
|
+
};
|
|
359
|
+
}, []);
|
|
360
|
+
(0, _react.useEffect)(function() {
|
|
361
|
+
updateScrollbar();
|
|
362
|
+
}, [
|
|
363
|
+
children,
|
|
364
|
+
offset
|
|
365
|
+
]);
|
|
366
|
+
var _obj;
|
|
367
|
+
return /*#__PURE__*/ _react.default.createElement(Root, _object_spread({
|
|
368
|
+
view: view,
|
|
369
|
+
size: size,
|
|
370
|
+
className: (0, _classnames.default)(_Scrollbartokens.classes.scrollBarRoot, className),
|
|
371
|
+
ref: ref
|
|
372
|
+
}, rest), /*#__PURE__*/ _react.default.createElement(_Scrollbarstyles.StyledScrollBar, {
|
|
373
|
+
className: (0, _classnames.default)((_obj = {}, _define_property(_obj, _Scrollbartokens.classes.scrollBarVisible, scrollbarState.isVisible), _define_property(_obj, _Scrollbartokens.classes.scrollBarDragging, scrollbarState.isDragging), _obj)),
|
|
374
|
+
style: _object_spread_props(_object_spread({}, style), {
|
|
375
|
+
'--scrollbar-offset-top': parsedOffset.top,
|
|
376
|
+
'--scrollbar-offset-right': parsedOffset.right,
|
|
377
|
+
'--scrollbar-offset-bottom': parsedOffset.bottom,
|
|
378
|
+
'--scrollbar-offset-left': parsedOffset.left
|
|
379
|
+
}),
|
|
380
|
+
"data-placement": placement,
|
|
381
|
+
"data-size": size,
|
|
382
|
+
"data-view": view
|
|
383
|
+
}, /*#__PURE__*/ _react.default.createElement(_Scrollbarstyles.StyledContainer, {
|
|
384
|
+
ref: containerRef,
|
|
385
|
+
className: _Scrollbartokens.classes.scrollBarContainer,
|
|
386
|
+
"data-placement": placement
|
|
387
|
+
}, /*#__PURE__*/ _react.default.createElement(_Scrollbarstyles.StyledContent, {
|
|
388
|
+
ref: contentRef,
|
|
389
|
+
className: _Scrollbartokens.classes.scrollBarContent
|
|
390
|
+
}, children)), /*#__PURE__*/ _react.default.createElement(_Scrollbarstyles.StyledTrack, {
|
|
391
|
+
ref: trackRef,
|
|
392
|
+
className: (0, _classnames.default)(_Scrollbartokens.classes.scrollBarTrack, _define_property({}, _Scrollbartokens.classes.scrollBarTrackVisible, scrollbarState.isVisible)),
|
|
393
|
+
"data-placement": placement,
|
|
394
|
+
onMouseDown: handleTrackClick
|
|
395
|
+
}, /*#__PURE__*/ _react.default.createElement(_Scrollbarstyles.StyledThumb, {
|
|
396
|
+
ref: thumbRef,
|
|
397
|
+
className: _Scrollbartokens.classes.scrollBarThumb,
|
|
398
|
+
style: {
|
|
399
|
+
height: "".concat(scrollbarState.thumbHeight, "px"),
|
|
400
|
+
top: "".concat(scrollbarState.thumbPosition, "px")
|
|
401
|
+
},
|
|
402
|
+
onMouseDown: handleScrollbarDrag
|
|
403
|
+
}))));
|
|
404
|
+
});
|
|
405
|
+
};
|
|
406
|
+
var scrollbarConfig = {
|
|
407
|
+
name: 'Scrollbar',
|
|
408
|
+
tag: 'div',
|
|
409
|
+
layout: scrollbarRoot,
|
|
410
|
+
base: _Scrollbarstyles.base,
|
|
411
|
+
variations: {
|
|
412
|
+
view: {
|
|
413
|
+
css: _base1.base
|
|
414
|
+
},
|
|
415
|
+
size: {
|
|
416
|
+
css: _base.base
|
|
417
|
+
}
|
|
418
|
+
},
|
|
419
|
+
defaults: {
|
|
420
|
+
size: 'm',
|
|
421
|
+
view: 'default'
|
|
422
|
+
}
|
|
423
|
+
};
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
get StyledContainer () {
|
|
13
|
+
return StyledContainer;
|
|
14
|
+
},
|
|
15
|
+
get StyledContent () {
|
|
16
|
+
return StyledContent;
|
|
17
|
+
},
|
|
18
|
+
get StyledScrollBar () {
|
|
19
|
+
return StyledScrollBar;
|
|
20
|
+
},
|
|
21
|
+
get StyledThumb () {
|
|
22
|
+
return StyledThumb;
|
|
23
|
+
},
|
|
24
|
+
get StyledTrack () {
|
|
25
|
+
return StyledTrack;
|
|
26
|
+
},
|
|
27
|
+
get base () {
|
|
28
|
+
return base;
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
var _styledcomponents = /*#__PURE__*/ _interop_require_wildcard(require("styled-components"));
|
|
32
|
+
var _Scrollbartokens = require("./Scrollbar.tokens");
|
|
33
|
+
function _getRequireWildcardCache(nodeInterop) {
|
|
34
|
+
if (typeof WeakMap !== "function") return null;
|
|
35
|
+
var cacheBabelInterop = new WeakMap();
|
|
36
|
+
var cacheNodeInterop = new WeakMap();
|
|
37
|
+
return (_getRequireWildcardCache = function(nodeInterop) {
|
|
38
|
+
return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
|
|
39
|
+
})(nodeInterop);
|
|
40
|
+
}
|
|
41
|
+
function _interop_require_wildcard(obj, nodeInterop) {
|
|
42
|
+
if (!nodeInterop && obj && obj.__esModule) {
|
|
43
|
+
return obj;
|
|
44
|
+
}
|
|
45
|
+
if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
|
|
46
|
+
return {
|
|
47
|
+
default: obj
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
var cache = _getRequireWildcardCache(nodeInterop);
|
|
51
|
+
if (cache && cache.has(obj)) {
|
|
52
|
+
return cache.get(obj);
|
|
53
|
+
}
|
|
54
|
+
var newObj = {
|
|
55
|
+
__proto__: null
|
|
56
|
+
};
|
|
57
|
+
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
|
|
58
|
+
for(var key in obj){
|
|
59
|
+
if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
60
|
+
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
|
|
61
|
+
if (desc && (desc.get || desc.set)) {
|
|
62
|
+
Object.defineProperty(newObj, key, desc);
|
|
63
|
+
} else {
|
|
64
|
+
newObj[key] = obj[key];
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
newObj.default = obj;
|
|
69
|
+
if (cache) {
|
|
70
|
+
cache.set(obj, newObj);
|
|
71
|
+
}
|
|
72
|
+
return newObj;
|
|
73
|
+
}
|
|
74
|
+
var base = (0, _styledcomponents.css)([
|
|
75
|
+
"display:flex;position:relative;width:100%;height:100%;"
|
|
76
|
+
]);
|
|
77
|
+
var StyledScrollBar = _styledcomponents.default.div.withConfig({
|
|
78
|
+
displayName: "Scrollbar.styles__StyledScrollBar",
|
|
79
|
+
componentId: "sc-d13e1ac1-0"
|
|
80
|
+
})([
|
|
81
|
+
"position:relative;width:var(",
|
|
82
|
+
",100%);height:var(",
|
|
83
|
+
",100%);overflow:hidden;&.",
|
|
84
|
+
"{.",
|
|
85
|
+
"{opacity:1;pointer-events:auto;}}&.",
|
|
86
|
+
"{.",
|
|
87
|
+
"{background-color:var(",
|
|
88
|
+
") !important;}}"
|
|
89
|
+
], _Scrollbartokens.tokens.width, _Scrollbartokens.tokens.height, _Scrollbartokens.classes.scrollBarVisible, _Scrollbartokens.classes.scrollBarTrack, _Scrollbartokens.classes.scrollBarDragging, _Scrollbartokens.classes.scrollBarThumb, _Scrollbartokens.tokens.thumbColorActive);
|
|
90
|
+
var StyledContainer = _styledcomponents.default.div.withConfig({
|
|
91
|
+
displayName: "Scrollbar.styles__StyledContainer",
|
|
92
|
+
componentId: "sc-d13e1ac1-1"
|
|
93
|
+
})([
|
|
94
|
+
"width:100%;height:100%;overflow:auto;overflow:overlay;scrollbar-width:none;-ms-overflow-style:none;box-sizing:border-box;&::-webkit-scrollbar{display:none;width:0;height:0;}"
|
|
95
|
+
]);
|
|
96
|
+
var StyledContent = _styledcomponents.default.div.withConfig({
|
|
97
|
+
displayName: "Scrollbar.styles__StyledContent",
|
|
98
|
+
componentId: "sc-d13e1ac1-2"
|
|
99
|
+
})([
|
|
100
|
+
"min-height:100%;box-sizing:border-box;width:100%;"
|
|
101
|
+
]);
|
|
102
|
+
var StyledTrack = _styledcomponents.default.div.withConfig({
|
|
103
|
+
displayName: "Scrollbar.styles__StyledTrack",
|
|
104
|
+
componentId: "sc-d13e1ac1-3"
|
|
105
|
+
})([
|
|
106
|
+
"position:absolute;width:var(",
|
|
107
|
+
");opacity:0;transition:opacity 0.3s ease;pointer-events:none;z-index:10;background:var(",
|
|
108
|
+
");border-radius:var(",
|
|
109
|
+
");top:var(--scrollbar-offset-top,0);bottom:var(--scrollbar-offset-bottom,0);&[data-placement='left']{left:var(--scrollbar-offset-left,0);}&[data-placement='right']{right:var(--scrollbar-offset-right,0);}&.",
|
|
110
|
+
"{opacity:1;pointer-events:auto;}"
|
|
111
|
+
], _Scrollbartokens.tokens.trackWidth, _Scrollbartokens.tokens.trackColor, _Scrollbartokens.tokens.trackBorderRadius, _Scrollbartokens.classes.scrollBarTrackVisible);
|
|
112
|
+
var StyledThumb = _styledcomponents.default.div.withConfig({
|
|
113
|
+
displayName: "Scrollbar.styles__StyledThumb",
|
|
114
|
+
componentId: "sc-d13e1ac1-4"
|
|
115
|
+
})([
|
|
116
|
+
"position:absolute;left:0;width:100%;background:var(",
|
|
117
|
+
");border-radius:var(",
|
|
118
|
+
");cursor:pointer;transition:background-color 0.2s ease;box-sizing:border-box;&:hover{background:var(",
|
|
119
|
+
");}&:active{background:var(",
|
|
120
|
+
");}"
|
|
121
|
+
], _Scrollbartokens.tokens.thumbColor, _Scrollbartokens.tokens.thumbBorderRadius, _Scrollbartokens.tokens.thumbColorHover, _Scrollbartokens.tokens.thumbColorActive);
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
get classes () {
|
|
13
|
+
return classes;
|
|
14
|
+
},
|
|
15
|
+
get tokens () {
|
|
16
|
+
return tokens;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
var tokens = {
|
|
20
|
+
width: '--scrollbar-width',
|
|
21
|
+
height: '--scrollbar-height',
|
|
22
|
+
trackWidth: '--scrollbar-track-width',
|
|
23
|
+
trackColor: '--scrollbar-track-color',
|
|
24
|
+
trackBorderRadius: '--scrollbar-track-border-radius',
|
|
25
|
+
thumbColor: '--scrollbar-thumb-color',
|
|
26
|
+
thumbColorHover: '--scrollbar-thumb-color-hover',
|
|
27
|
+
thumbColorActive: '--scrollbar-thumb-color-active',
|
|
28
|
+
thumbBorderRadius: '--scrollbar-thumb-border-radius'
|
|
29
|
+
};
|
|
30
|
+
var classes = {
|
|
31
|
+
scrollBarRoot: 'scrollbar-root',
|
|
32
|
+
scrollBarContainer: 'scrollbar-container',
|
|
33
|
+
scrollBarContent: 'scrollbar-content',
|
|
34
|
+
scrollBarTrack: 'scrollbar-track',
|
|
35
|
+
scrollBarThumb: 'scrollbar-thumb',
|
|
36
|
+
scrollBarVisible: 'scrollbar-visible',
|
|
37
|
+
scrollBarDragging: 'scrollbar-dragging',
|
|
38
|
+
scrollBarTrackVisible: 'scrollbar-track-visible'
|
|
39
|
+
};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
get scrollbarClasses () {
|
|
13
|
+
return _Scrollbartokens.classes;
|
|
14
|
+
},
|
|
15
|
+
get scrollbarConfig () {
|
|
16
|
+
return _Scrollbar.scrollbarConfig;
|
|
17
|
+
},
|
|
18
|
+
get scrollbarRoot () {
|
|
19
|
+
return _Scrollbar.scrollbarRoot;
|
|
20
|
+
},
|
|
21
|
+
get scrollbarTokens () {
|
|
22
|
+
return _Scrollbartokens.tokens;
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
var _Scrollbar = require("./Scrollbar");
|
|
26
|
+
var _Scrollbartokens = require("./Scrollbar.tokens");
|