@salutejs/plasma-new-hope 0.337.0-canary.2254.18093353790.0 → 0.337.0-canary.2254.18122005940.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/Dropdown/ui/DropdownInner/DropdownInner.js +1 -1
- package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +1 -1
- package/cjs/components/Pagination/utils/index.js +10 -1
- package/cjs/components/Pagination/utils/index.js.map +1 -1
- package/emotion/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +1 -1
- package/emotion/cjs/components/Pagination/utils/index.js +36 -1
- package/emotion/cjs/components/Scrollbar/Scrollbar.js +48 -35
- package/emotion/cjs/components/Scrollbar/Scrollbar.styles.js +11 -11
- package/emotion/cjs/examples/components/Scrollbar/Scrollbar.config.js +3 -3
- package/emotion/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +1 -1
- package/emotion/es/components/Pagination/utils/index.js +36 -1
- package/emotion/es/components/Scrollbar/Scrollbar.js +49 -36
- package/emotion/es/components/Scrollbar/Scrollbar.styles.js +11 -11
- package/emotion/es/examples/components/Scrollbar/Scrollbar.config.js +3 -3
- package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +1 -1
- package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +1 -1
- package/es/components/Pagination/utils/index.js +10 -1
- package/es/components/Pagination/utils/index.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +1 -1
- package/styled-components/cjs/components/Pagination/utils/index.js +36 -1
- package/styled-components/cjs/components/Scrollbar/Scrollbar.js +48 -35
- package/styled-components/cjs/components/Scrollbar/Scrollbar.styles.js +5 -5
- package/styled-components/cjs/examples/components/Combobox/Combobox.js +15 -0
- package/styled-components/cjs/examples/components/Scrollbar/Scrollbar.config.js +2 -2
- package/styled-components/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +1 -1
- package/styled-components/es/components/Pagination/utils/index.js +36 -1
- package/styled-components/es/components/Scrollbar/Scrollbar.js +49 -36
- package/styled-components/es/components/Scrollbar/Scrollbar.styles.js +5 -5
- package/styled-components/es/examples/components/Combobox/Combobox.js +7 -0
- package/styled-components/es/examples/components/Scrollbar/Scrollbar.config.js +2 -2
- package/types/components/Dropdown/ui/DropdownInner/DropdownInner.d.ts.map +1 -1
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.type.d.ts +5 -0
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.type.d.ts.map +1 -1
- package/types/components/Pagination/Pagination.types.d.ts +1 -1
- package/types/components/Pagination/utils/index.d.ts +1 -1
- package/types/components/Pagination/utils/index.d.ts.map +1 -1
- package/types/components/Scrollbar/Scrollbar.d.ts.map +1 -1
- package/types/components/Scrollbar/Scrollbar.styles.d.ts.map +1 -1
|
@@ -219,7 +219,7 @@ var scrollbarRoot = function(Root) {
|
|
|
219
219
|
isDragging: false
|
|
220
220
|
}), 2), scrollbarState = _useState[0], setScrollbarState = _useState[1];
|
|
221
221
|
var minScrollbarTrackHeight = 20;
|
|
222
|
-
var calculateScrollbar =
|
|
222
|
+
var calculateScrollbar = function() {
|
|
223
223
|
if (!containerRef.current || !contentRef.current) {
|
|
224
224
|
return {
|
|
225
225
|
thumbHeight: 0,
|
|
@@ -235,10 +235,8 @@ var scrollbarRoot = function(Root) {
|
|
|
235
235
|
thumbHeight: thumbHeight,
|
|
236
236
|
thumbPosition: thumbPosition
|
|
237
237
|
};
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
]);
|
|
241
|
-
var updateScrollbar = (0, _react.useCallback)(function() {
|
|
238
|
+
};
|
|
239
|
+
var updateScrollbar = function() {
|
|
242
240
|
var show = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
|
|
243
241
|
if (!containerRef.current) return;
|
|
244
242
|
var _calculateScrollbar = calculateScrollbar(), thumbHeight = _calculateScrollbar.thumbHeight, thumbPosition = _calculateScrollbar.thumbPosition;
|
|
@@ -249,10 +247,8 @@ var scrollbarRoot = function(Root) {
|
|
|
249
247
|
isVisible: show || prev.isVisible
|
|
250
248
|
});
|
|
251
249
|
});
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
]);
|
|
255
|
-
var showScrollbarWithDelay = (0, _react.useCallback)(function() {
|
|
250
|
+
};
|
|
251
|
+
var showScrollbarWithDelay = function() {
|
|
256
252
|
if (hideTimeoutRef.current) {
|
|
257
253
|
clearTimeout(hideTimeoutRef.current);
|
|
258
254
|
}
|
|
@@ -267,23 +263,15 @@ var scrollbarRoot = function(Root) {
|
|
|
267
263
|
hideTimeoutRef.current = null;
|
|
268
264
|
}, autoHideDelay);
|
|
269
265
|
}
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
autoHideDelay,
|
|
273
|
-
updateScrollbar
|
|
274
|
-
]);
|
|
275
|
-
var handleScroll = (0, _react.useCallback)(function() {
|
|
266
|
+
};
|
|
267
|
+
var handleScroll = function() {
|
|
276
268
|
if (!containerRef.current) return;
|
|
277
269
|
showScrollbarWithDelay();
|
|
278
|
-
}
|
|
279
|
-
|
|
280
|
-
]);
|
|
281
|
-
var handleMouseEnter = (0, _react.useCallback)(function() {
|
|
270
|
+
};
|
|
271
|
+
var handleMouseEnter = function() {
|
|
282
272
|
showScrollbarWithDelay();
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
]);
|
|
286
|
-
var handleScrollbarDrag = (0, _react.useCallback)(function(e) {
|
|
273
|
+
};
|
|
274
|
+
var handleScrollbarDrag = function(e) {
|
|
287
275
|
e.preventDefault();
|
|
288
276
|
var thumb = e.currentTarget;
|
|
289
277
|
var track = thumb.parentElement;
|
|
@@ -327,9 +315,39 @@ var scrollbarRoot = function(Root) {
|
|
|
327
315
|
};
|
|
328
316
|
document.addEventListener('mousemove', handleMouseMove);
|
|
329
317
|
document.addEventListener('mouseup', handleMouseUp);
|
|
330
|
-
}
|
|
331
|
-
|
|
332
|
-
|
|
318
|
+
};
|
|
319
|
+
var handleTrackClick = function(e) {
|
|
320
|
+
e.preventDefault();
|
|
321
|
+
var track = e.currentTarget;
|
|
322
|
+
var container = containerRef.current;
|
|
323
|
+
if (!container || !track) return;
|
|
324
|
+
if (thumbRef.current && thumbRef.current.contains(e.target)) {
|
|
325
|
+
return;
|
|
326
|
+
}
|
|
327
|
+
if (hideTimeoutRef.current) {
|
|
328
|
+
clearTimeout(hideTimeoutRef.current);
|
|
329
|
+
hideTimeoutRef.current = null;
|
|
330
|
+
}
|
|
331
|
+
var trackRect = track.getBoundingClientRect();
|
|
332
|
+
var clickY = e.clientY - trackRect.top;
|
|
333
|
+
var trackHeight = trackRect.height;
|
|
334
|
+
var thumbHeight = scrollbarState.thumbHeight;
|
|
335
|
+
var scrollHeight = container.scrollHeight, clientHeight = container.clientHeight;
|
|
336
|
+
var maxScroll = scrollHeight - clientHeight;
|
|
337
|
+
if (maxScroll <= 0) return;
|
|
338
|
+
var newThumbPosition = clickY - thumbHeight / 2;
|
|
339
|
+
newThumbPosition = Math.max(0, Math.min(trackHeight - thumbHeight, newThumbPosition));
|
|
340
|
+
var scrollPercentage = newThumbPosition / (trackHeight - thumbHeight);
|
|
341
|
+
var newScrollTop = scrollPercentage * maxScroll;
|
|
342
|
+
container.scrollTop = newScrollTop;
|
|
343
|
+
setScrollbarState(function(prev) {
|
|
344
|
+
return _object_spread_props(_object_spread({}, prev), {
|
|
345
|
+
thumbPosition: newThumbPosition,
|
|
346
|
+
isVisible: true
|
|
347
|
+
});
|
|
348
|
+
});
|
|
349
|
+
showScrollbarWithDelay();
|
|
350
|
+
};
|
|
333
351
|
(0, _react.useEffect)(function() {
|
|
334
352
|
return function() {
|
|
335
353
|
if (hideTimeoutRef.current) {
|
|
@@ -353,16 +371,10 @@ var scrollbarRoot = function(Root) {
|
|
|
353
371
|
container.removeEventListener('mouseenter', handleMouseEnter);
|
|
354
372
|
resizeObserver.disconnect();
|
|
355
373
|
};
|
|
356
|
-
}, [
|
|
357
|
-
handleScroll,
|
|
358
|
-
handleMouseEnter,
|
|
359
|
-
updateScrollbar
|
|
360
|
-
]);
|
|
374
|
+
}, []);
|
|
361
375
|
(0, _react.useEffect)(function() {
|
|
362
376
|
updateScrollbar();
|
|
363
|
-
}
|
|
364
|
-
updateScrollbar
|
|
365
|
-
]);
|
|
377
|
+
});
|
|
366
378
|
var _obj, _obj1;
|
|
367
379
|
return /*#__PURE__*/ _react.default.createElement(Root, _object_spread({
|
|
368
380
|
view: view,
|
|
@@ -386,7 +398,8 @@ var scrollbarRoot = function(Root) {
|
|
|
386
398
|
ref: trackRef,
|
|
387
399
|
className: (0, _classnames.default)(_Scrollbartokens.classes.scrollBarTrack, _define_property({}, _Scrollbartokens.classes.scrollBarTrackVisible, scrollbarState.isVisible)),
|
|
388
400
|
"data-placement": placement,
|
|
389
|
-
style: (_obj1 = {}, _define_property(_obj1, placement, offset), _define_property(_obj1, "top", verticalOffset), _define_property(_obj1, "bottom", verticalOffset), _obj1)
|
|
401
|
+
style: (_obj1 = {}, _define_property(_obj1, placement, offset), _define_property(_obj1, "top", verticalOffset), _define_property(_obj1, "bottom", verticalOffset), _obj1),
|
|
402
|
+
onMouseDown: handleTrackClick
|
|
390
403
|
}, /*#__PURE__*/ _react.default.createElement(_Scrollbarstyles.StyledThumb, {
|
|
391
404
|
ref: thumbRef,
|
|
392
405
|
className: _Scrollbartokens.classes.scrollBarThumb,
|
|
@@ -76,7 +76,7 @@ var base = (0, _styledcomponents.css)([
|
|
|
76
76
|
]);
|
|
77
77
|
var StyledScrollBar = _styledcomponents.default.div.withConfig({
|
|
78
78
|
displayName: "Scrollbar.styles__StyledScrollBar",
|
|
79
|
-
componentId: "sc-
|
|
79
|
+
componentId: "sc-6f2e68f2-0"
|
|
80
80
|
})([
|
|
81
81
|
"position:relative;width:var(",
|
|
82
82
|
",100%);height:var(",
|
|
@@ -89,7 +89,7 @@ var StyledScrollBar = _styledcomponents.default.div.withConfig({
|
|
|
89
89
|
], _Scrollbartokens.tokens.width, _Scrollbartokens.tokens.height, _Scrollbartokens.classes.scrollBarVisible, _Scrollbartokens.classes.scrollBarTrack, _Scrollbartokens.classes.scrollBarDragging, _Scrollbartokens.classes.scrollBarThumb, _Scrollbartokens.tokens.thumbColorActive);
|
|
90
90
|
var StyledContainer = _styledcomponents.default.div.withConfig({
|
|
91
91
|
displayName: "Scrollbar.styles__StyledContainer",
|
|
92
|
-
componentId: "sc-
|
|
92
|
+
componentId: "sc-6f2e68f2-1"
|
|
93
93
|
})([
|
|
94
94
|
"width:100%;height:100%;overflow:auto;scrollbar-width:none;-ms-overflow-style:none;box-sizing:border-box;&[data-placement='left']{padding-left:var(",
|
|
95
95
|
");}&[data-placement='right']{padding-right:var(",
|
|
@@ -97,13 +97,13 @@ var StyledContainer = _styledcomponents.default.div.withConfig({
|
|
|
97
97
|
], _Scrollbartokens.tokens.trackWidth, _Scrollbartokens.tokens.trackWidth);
|
|
98
98
|
var StyledContent = _styledcomponents.default.div.withConfig({
|
|
99
99
|
displayName: "Scrollbar.styles__StyledContent",
|
|
100
|
-
componentId: "sc-
|
|
100
|
+
componentId: "sc-6f2e68f2-2"
|
|
101
101
|
})([
|
|
102
102
|
"min-height:100%;box-sizing:border-box;"
|
|
103
103
|
]);
|
|
104
104
|
var StyledTrack = _styledcomponents.default.div.withConfig({
|
|
105
105
|
displayName: "Scrollbar.styles__StyledTrack",
|
|
106
|
-
componentId: "sc-
|
|
106
|
+
componentId: "sc-6f2e68f2-3"
|
|
107
107
|
})([
|
|
108
108
|
"position:absolute;width:var(",
|
|
109
109
|
");opacity:0;transition:opacity 0.3s ease;pointer-events:none;z-index:10;background:var(",
|
|
@@ -113,7 +113,7 @@ var StyledTrack = _styledcomponents.default.div.withConfig({
|
|
|
113
113
|
], _Scrollbartokens.tokens.trackWidth, _Scrollbartokens.tokens.trackColor, _Scrollbartokens.tokens.trackBorderRadius, _Scrollbartokens.classes.scrollBarTrackVisible);
|
|
114
114
|
var StyledThumb = _styledcomponents.default.div.withConfig({
|
|
115
115
|
displayName: "Scrollbar.styles__StyledThumb",
|
|
116
|
-
componentId: "sc-
|
|
116
|
+
componentId: "sc-6f2e68f2-4"
|
|
117
117
|
})([
|
|
118
118
|
"position:absolute;left:0;width:100%;background:var(",
|
|
119
119
|
");border-radius:var(",
|
|
@@ -1 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "Combobox", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return Combobox;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
var _engines = require("../../../engines");
|
|
12
|
+
var _ = require("../../..");
|
|
13
|
+
var _Comboboxconfig = require("./Combobox.config");
|
|
14
|
+
var mergedConfig = (0, _engines.mergeConfig)(_.comboboxNewConfig, _Comboboxconfig.config);
|
|
15
|
+
var ComboboxComponent = (0, _engines.component)(mergedConfig);
|
|
16
|
+
var Combobox = ComboboxComponent;
|
|
@@ -21,8 +21,8 @@ var config = {
|
|
|
21
21
|
"",
|
|
22
22
|
":var(--surface-transparent-primary);",
|
|
23
23
|
":var(--surface-transparent-tertiary);",
|
|
24
|
-
":var(--surface-transparent-tertiary);",
|
|
25
|
-
":var(--surface-transparent-tertiary);"
|
|
24
|
+
":var(--surface-transparent-tertiary-hover);",
|
|
25
|
+
":var(--surface-transparent-tertiary-active);"
|
|
26
26
|
], _Scrollbar.scrollbarTokens.trackColor, _Scrollbar.scrollbarTokens.thumbColor, _Scrollbar.scrollbarTokens.thumbColorHover, _Scrollbar.scrollbarTokens.thumbColorActive)
|
|
27
27
|
},
|
|
28
28
|
size: {
|
|
@@ -50,7 +50,7 @@ var DropdownInner = function(param) {
|
|
|
50
50
|
id: listId,
|
|
51
51
|
role: "group",
|
|
52
52
|
listMaxHeight: item.listMaxHeight
|
|
53
|
-
}, item.items.map(function(innerItem, innerIndex) {
|
|
53
|
+
}, item.beforeList, item.items.map(function(innerItem, innerIndex) {
|
|
54
54
|
return /*#__PURE__*/ React.createElement(DropdownInner, {
|
|
55
55
|
key: "".concat(innerIndex, "/").concat(currentLevel),
|
|
56
56
|
item: innerItem,
|
|
@@ -6,6 +6,36 @@ var generateSection = function(length, add) {
|
|
|
6
6
|
var dType = 'default';
|
|
7
7
|
var dDlots = 9;
|
|
8
8
|
var sections = {
|
|
9
|
+
1: [
|
|
10
|
+
1,
|
|
11
|
+
0,
|
|
12
|
+
0
|
|
13
|
+
],
|
|
14
|
+
2: [
|
|
15
|
+
2,
|
|
16
|
+
0,
|
|
17
|
+
0
|
|
18
|
+
],
|
|
19
|
+
3: [
|
|
20
|
+
3,
|
|
21
|
+
0,
|
|
22
|
+
0
|
|
23
|
+
],
|
|
24
|
+
4: [
|
|
25
|
+
4,
|
|
26
|
+
0,
|
|
27
|
+
0
|
|
28
|
+
],
|
|
29
|
+
5: [
|
|
30
|
+
5,
|
|
31
|
+
0,
|
|
32
|
+
0
|
|
33
|
+
],
|
|
34
|
+
6: [
|
|
35
|
+
6,
|
|
36
|
+
0,
|
|
37
|
+
0
|
|
38
|
+
],
|
|
9
39
|
7: [
|
|
10
40
|
1,
|
|
11
41
|
3,
|
|
@@ -80,12 +110,17 @@ export var getSections = function(value, pages, slots) {
|
|
|
80
110
|
var pageArray = [
|
|
81
111
|
generateSection(pages, 1)
|
|
82
112
|
];
|
|
83
|
-
if (slots >= pages
|
|
113
|
+
if (slots >= pages) {
|
|
84
114
|
return pageArray;
|
|
85
115
|
}
|
|
86
116
|
if (!sections[slots]) {
|
|
87
117
|
return pageArray;
|
|
88
118
|
}
|
|
119
|
+
if (slots < 7) {
|
|
120
|
+
return [
|
|
121
|
+
generateSection(slots, value)
|
|
122
|
+
];
|
|
123
|
+
}
|
|
89
124
|
var smallSection = Math.min(Math.floor((slots - 1) / 2), 6);
|
|
90
125
|
var bigSection = Math.min(Math.floor(slots / 2), 6);
|
|
91
126
|
var defaultSection = sections[slots][1];
|
|
@@ -123,7 +123,7 @@ function _unsupported_iterable_to_array(o, minLen) {
|
|
|
123
123
|
if (n === "Map" || n === "Set") return Array.from(n);
|
|
124
124
|
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
125
125
|
}
|
|
126
|
-
import React, { forwardRef, useRef, useState, useEffect
|
|
126
|
+
import React, { forwardRef, useRef, useState, useEffect } from "react";
|
|
127
127
|
import cls from "classnames";
|
|
128
128
|
import { base as sizeCSS } from "./variations/_size/base";
|
|
129
129
|
import { base as viewCSS } from "./variations/_view/base";
|
|
@@ -155,7 +155,7 @@ export var scrollbarRoot = function(Root) {
|
|
|
155
155
|
isDragging: false
|
|
156
156
|
}), 2), scrollbarState = _useState[0], setScrollbarState = _useState[1];
|
|
157
157
|
var minScrollbarTrackHeight = 20;
|
|
158
|
-
var calculateScrollbar =
|
|
158
|
+
var calculateScrollbar = function() {
|
|
159
159
|
if (!containerRef.current || !contentRef.current) {
|
|
160
160
|
return {
|
|
161
161
|
thumbHeight: 0,
|
|
@@ -171,10 +171,8 @@ export var scrollbarRoot = function(Root) {
|
|
|
171
171
|
thumbHeight: thumbHeight,
|
|
172
172
|
thumbPosition: thumbPosition
|
|
173
173
|
};
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
]);
|
|
177
|
-
var updateScrollbar = useCallback(function() {
|
|
174
|
+
};
|
|
175
|
+
var updateScrollbar = function() {
|
|
178
176
|
var show = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
|
|
179
177
|
if (!containerRef.current) return;
|
|
180
178
|
var _calculateScrollbar = calculateScrollbar(), thumbHeight = _calculateScrollbar.thumbHeight, thumbPosition = _calculateScrollbar.thumbPosition;
|
|
@@ -185,10 +183,8 @@ export var scrollbarRoot = function(Root) {
|
|
|
185
183
|
isVisible: show || prev.isVisible
|
|
186
184
|
});
|
|
187
185
|
});
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
]);
|
|
191
|
-
var showScrollbarWithDelay = useCallback(function() {
|
|
186
|
+
};
|
|
187
|
+
var showScrollbarWithDelay = function() {
|
|
192
188
|
if (hideTimeoutRef.current) {
|
|
193
189
|
clearTimeout(hideTimeoutRef.current);
|
|
194
190
|
}
|
|
@@ -203,23 +199,15 @@ export var scrollbarRoot = function(Root) {
|
|
|
203
199
|
hideTimeoutRef.current = null;
|
|
204
200
|
}, autoHideDelay);
|
|
205
201
|
}
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
autoHideDelay,
|
|
209
|
-
updateScrollbar
|
|
210
|
-
]);
|
|
211
|
-
var handleScroll = useCallback(function() {
|
|
202
|
+
};
|
|
203
|
+
var handleScroll = function() {
|
|
212
204
|
if (!containerRef.current) return;
|
|
213
205
|
showScrollbarWithDelay();
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
]);
|
|
217
|
-
var handleMouseEnter = useCallback(function() {
|
|
206
|
+
};
|
|
207
|
+
var handleMouseEnter = function() {
|
|
218
208
|
showScrollbarWithDelay();
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
]);
|
|
222
|
-
var handleScrollbarDrag = useCallback(function(e) {
|
|
209
|
+
};
|
|
210
|
+
var handleScrollbarDrag = function(e) {
|
|
223
211
|
e.preventDefault();
|
|
224
212
|
var thumb = e.currentTarget;
|
|
225
213
|
var track = thumb.parentElement;
|
|
@@ -263,9 +251,39 @@ export var scrollbarRoot = function(Root) {
|
|
|
263
251
|
};
|
|
264
252
|
document.addEventListener('mousemove', handleMouseMove);
|
|
265
253
|
document.addEventListener('mouseup', handleMouseUp);
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
|
|
254
|
+
};
|
|
255
|
+
var handleTrackClick = function(e) {
|
|
256
|
+
e.preventDefault();
|
|
257
|
+
var track = e.currentTarget;
|
|
258
|
+
var container = containerRef.current;
|
|
259
|
+
if (!container || !track) return;
|
|
260
|
+
if (thumbRef.current && thumbRef.current.contains(e.target)) {
|
|
261
|
+
return;
|
|
262
|
+
}
|
|
263
|
+
if (hideTimeoutRef.current) {
|
|
264
|
+
clearTimeout(hideTimeoutRef.current);
|
|
265
|
+
hideTimeoutRef.current = null;
|
|
266
|
+
}
|
|
267
|
+
var trackRect = track.getBoundingClientRect();
|
|
268
|
+
var clickY = e.clientY - trackRect.top;
|
|
269
|
+
var trackHeight = trackRect.height;
|
|
270
|
+
var thumbHeight = scrollbarState.thumbHeight;
|
|
271
|
+
var scrollHeight = container.scrollHeight, clientHeight = container.clientHeight;
|
|
272
|
+
var maxScroll = scrollHeight - clientHeight;
|
|
273
|
+
if (maxScroll <= 0) return;
|
|
274
|
+
var newThumbPosition = clickY - thumbHeight / 2;
|
|
275
|
+
newThumbPosition = Math.max(0, Math.min(trackHeight - thumbHeight, newThumbPosition));
|
|
276
|
+
var scrollPercentage = newThumbPosition / (trackHeight - thumbHeight);
|
|
277
|
+
var newScrollTop = scrollPercentage * maxScroll;
|
|
278
|
+
container.scrollTop = newScrollTop;
|
|
279
|
+
setScrollbarState(function(prev) {
|
|
280
|
+
return _object_spread_props(_object_spread({}, prev), {
|
|
281
|
+
thumbPosition: newThumbPosition,
|
|
282
|
+
isVisible: true
|
|
283
|
+
});
|
|
284
|
+
});
|
|
285
|
+
showScrollbarWithDelay();
|
|
286
|
+
};
|
|
269
287
|
useEffect(function() {
|
|
270
288
|
return function() {
|
|
271
289
|
if (hideTimeoutRef.current) {
|
|
@@ -289,16 +307,10 @@ export var scrollbarRoot = function(Root) {
|
|
|
289
307
|
container.removeEventListener('mouseenter', handleMouseEnter);
|
|
290
308
|
resizeObserver.disconnect();
|
|
291
309
|
};
|
|
292
|
-
}, [
|
|
293
|
-
handleScroll,
|
|
294
|
-
handleMouseEnter,
|
|
295
|
-
updateScrollbar
|
|
296
|
-
]);
|
|
310
|
+
}, []);
|
|
297
311
|
useEffect(function() {
|
|
298
312
|
updateScrollbar();
|
|
299
|
-
}
|
|
300
|
-
updateScrollbar
|
|
301
|
-
]);
|
|
313
|
+
});
|
|
302
314
|
var _obj, _obj1;
|
|
303
315
|
return /*#__PURE__*/ React.createElement(Root, _object_spread({
|
|
304
316
|
view: view,
|
|
@@ -322,7 +334,8 @@ export var scrollbarRoot = function(Root) {
|
|
|
322
334
|
ref: trackRef,
|
|
323
335
|
className: cls(classes.scrollBarTrack, _define_property({}, classes.scrollBarTrackVisible, scrollbarState.isVisible)),
|
|
324
336
|
"data-placement": placement,
|
|
325
|
-
style: (_obj1 = {}, _define_property(_obj1, placement, offset), _define_property(_obj1, "top", verticalOffset), _define_property(_obj1, "bottom", verticalOffset), _obj1)
|
|
337
|
+
style: (_obj1 = {}, _define_property(_obj1, placement, offset), _define_property(_obj1, "top", verticalOffset), _define_property(_obj1, "bottom", verticalOffset), _obj1),
|
|
338
|
+
onMouseDown: handleTrackClick
|
|
326
339
|
}, /*#__PURE__*/ React.createElement(StyledThumb, {
|
|
327
340
|
ref: thumbRef,
|
|
328
341
|
className: classes.scrollBarThumb,
|
|
@@ -6,7 +6,7 @@ export var base = css([
|
|
|
6
6
|
]);
|
|
7
7
|
export var StyledScrollBar = styled.div.withConfig({
|
|
8
8
|
displayName: "Scrollbar.styles__StyledScrollBar",
|
|
9
|
-
componentId: "sc-
|
|
9
|
+
componentId: "sc-6f2e68f2-0"
|
|
10
10
|
})([
|
|
11
11
|
"position:relative;width:var(",
|
|
12
12
|
",100%);height:var(",
|
|
@@ -19,7 +19,7 @@ export var StyledScrollBar = styled.div.withConfig({
|
|
|
19
19
|
], tokens.width, tokens.height, classes.scrollBarVisible, classes.scrollBarTrack, classes.scrollBarDragging, classes.scrollBarThumb, tokens.thumbColorActive);
|
|
20
20
|
export var StyledContainer = styled.div.withConfig({
|
|
21
21
|
displayName: "Scrollbar.styles__StyledContainer",
|
|
22
|
-
componentId: "sc-
|
|
22
|
+
componentId: "sc-6f2e68f2-1"
|
|
23
23
|
})([
|
|
24
24
|
"width:100%;height:100%;overflow:auto;scrollbar-width:none;-ms-overflow-style:none;box-sizing:border-box;&[data-placement='left']{padding-left:var(",
|
|
25
25
|
");}&[data-placement='right']{padding-right:var(",
|
|
@@ -27,13 +27,13 @@ export var StyledContainer = styled.div.withConfig({
|
|
|
27
27
|
], tokens.trackWidth, tokens.trackWidth);
|
|
28
28
|
export var StyledContent = styled.div.withConfig({
|
|
29
29
|
displayName: "Scrollbar.styles__StyledContent",
|
|
30
|
-
componentId: "sc-
|
|
30
|
+
componentId: "sc-6f2e68f2-2"
|
|
31
31
|
})([
|
|
32
32
|
"min-height:100%;box-sizing:border-box;"
|
|
33
33
|
]);
|
|
34
34
|
export var StyledTrack = styled.div.withConfig({
|
|
35
35
|
displayName: "Scrollbar.styles__StyledTrack",
|
|
36
|
-
componentId: "sc-
|
|
36
|
+
componentId: "sc-6f2e68f2-3"
|
|
37
37
|
})([
|
|
38
38
|
"position:absolute;width:var(",
|
|
39
39
|
");opacity:0;transition:opacity 0.3s ease;pointer-events:none;z-index:10;background:var(",
|
|
@@ -43,7 +43,7 @@ export var StyledTrack = styled.div.withConfig({
|
|
|
43
43
|
], tokens.trackWidth, tokens.trackColor, tokens.trackBorderRadius, classes.scrollBarTrackVisible);
|
|
44
44
|
export var StyledThumb = styled.div.withConfig({
|
|
45
45
|
displayName: "Scrollbar.styles__StyledThumb",
|
|
46
|
-
componentId: "sc-
|
|
46
|
+
componentId: "sc-6f2e68f2-4"
|
|
47
47
|
})([
|
|
48
48
|
"position:absolute;left:0;width:100%;background:var(",
|
|
49
49
|
");border-radius:var(",
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { component, mergeConfig } from "../../../engines";
|
|
2
|
+
import { comboboxNewConfig } from "../../..";
|
|
3
|
+
import { config } from "./Combobox.config";
|
|
4
|
+
var mergedConfig = mergeConfig(comboboxNewConfig, config);
|
|
5
|
+
var ComboboxComponent = component(mergedConfig);
|
|
6
|
+
var Combobox = ComboboxComponent;
|
|
7
|
+
export { Combobox };
|
|
@@ -11,8 +11,8 @@ export var config = {
|
|
|
11
11
|
"",
|
|
12
12
|
":var(--surface-transparent-primary);",
|
|
13
13
|
":var(--surface-transparent-tertiary);",
|
|
14
|
-
":var(--surface-transparent-tertiary);",
|
|
15
|
-
":var(--surface-transparent-tertiary);"
|
|
14
|
+
":var(--surface-transparent-tertiary-hover);",
|
|
15
|
+
":var(--surface-transparent-tertiary-active);"
|
|
16
16
|
], tokens.trackColor, tokens.thumbColor, tokens.thumbColorHover, tokens.thumbColorActive)
|
|
17
17
|
},
|
|
18
18
|
size: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownInner.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/ui/DropdownInner/DropdownInner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQhC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,
|
|
1
|
+
{"version":3,"file":"DropdownInner.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/ui/DropdownInner/DropdownInner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQhC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAwEzC,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -18,6 +18,11 @@ export type DropdownItemOption = {
|
|
|
18
18
|
* Список дочерних items
|
|
19
19
|
*/
|
|
20
20
|
items?: Array<DropdownItemOption>;
|
|
21
|
+
/**
|
|
22
|
+
* Ячейка для контента в начале выпадающего списка.
|
|
23
|
+
* Применяется только к при наличии дочерних элементов `items`
|
|
24
|
+
*/
|
|
25
|
+
beforeList?: ReactNode;
|
|
21
26
|
/**
|
|
22
27
|
* Item не активен
|
|
23
28
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownItem.type.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/ui/DropdownItem/DropdownItem.type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE/E,MAAM,MAAM,kBAAkB,GAAG;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IAExC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,aAAa,CAAC;IACpE,IAAI,EAAE,kBAAkB,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;IAC/C,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;CAClD"}
|
|
1
|
+
{"version":3,"file":"DropdownItem.type.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/ui/DropdownItem/DropdownItem.type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE/E,MAAM,MAAM,kBAAkB,GAAG;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC;IAClC;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IAExC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,aAAa,CAAC;IACpE,IAAI,EAAE,kBAAkB,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;IAC/C,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;CAClD"}
|
|
@@ -15,5 +15,5 @@ export declare const defaultValues: {
|
|
|
15
15
|
textQuickJump: string;
|
|
16
16
|
textPerPage: string;
|
|
17
17
|
};
|
|
18
|
-
export declare const getSections: (value?: number, pages?: number, slots?: NumericRange<CreateArrayWithLengthX<
|
|
18
|
+
export declare const getSections: (value?: number, pages?: number, slots?: NumericRange<CreateArrayWithLengthX<1>, 15>) => number[][];
|
|
19
19
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Pagination/utils/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Pagination/utils/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AA2B3E,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;CAezB,CAAC;AAEF,eAAO,MAAM,WAAW,WACZ,MAAM,UACN,MAAM,UACN,YAAY,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,KACpD,MAAM,EAAE,EA8CV,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Scrollbar.d.ts","sourceRoot":"","sources":["../../../src/components/Scrollbar/Scrollbar.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Scrollbar.d.ts","sourceRoot":"","sources":["../../../src/components/Scrollbar/Scrollbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAM7C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AASnD,eAAO,MAAM,aAAa,SAAU,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC,0FA4QxE,CAAC;AAEN,eAAO,MAAM,eAAe;;;mBA9QQ,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC;;;;;;;;;;;;;;CA+R5E,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Scrollbar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Scrollbar/Scrollbar.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,0CAKhB,CAAC;AAEF,eAAO,MAAM,eAAe,qKAkB3B,CAAC;AAEF,eAAO,MAAM,eAAe,qKAqB3B,CAAC;AAEF,eAAO,MAAM,aAAa,qKAGzB,CAAC;AAEF,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"Scrollbar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Scrollbar/Scrollbar.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,0CAKhB,CAAC;AAEF,eAAO,MAAM,eAAe,qKAkB3B,CAAC;AAEF,eAAO,MAAM,eAAe,qKAqB3B,CAAC;AAEF,eAAO,MAAM,aAAa,qKAGzB,CAAC;AAEF,eAAO,MAAM,WAAW,qKAsBvB,CAAC;AAEF,eAAO,MAAM,WAAW,qKAiBvB,CAAC"}
|