@cloud-ru/ds-scroll 1.0.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.
Files changed (32) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/LICENSE +201 -0
  3. package/README.md +179 -0
  4. package/dist/cjs/Scroll.d.ts +107 -0
  5. package/dist/cjs/Scroll.js +124 -0
  6. package/dist/cjs/constants.d.ts +22 -0
  7. package/dist/cjs/constants.js +28 -0
  8. package/dist/cjs/index.d.ts +4 -0
  9. package/dist/cjs/index.js +13 -0
  10. package/dist/cjs/package.json +3 -0
  11. package/dist/cjs/style.css +290 -0
  12. package/dist/cjs/styles.module.css +290 -0
  13. package/dist/cjs/types.d.ts +6 -0
  14. package/dist/cjs/types.js +2 -0
  15. package/dist/esm/Scroll.d.ts +107 -0
  16. package/dist/esm/Scroll.js +118 -0
  17. package/dist/esm/constants.d.ts +22 -0
  18. package/dist/esm/constants.js +25 -0
  19. package/dist/esm/index.d.ts +4 -0
  20. package/dist/esm/index.js +2 -0
  21. package/dist/esm/style.css +290 -0
  22. package/dist/esm/styles.module.css +290 -0
  23. package/dist/esm/types.d.ts +6 -0
  24. package/dist/esm/types.js +1 -0
  25. package/dist/tsconfig.cjs.tsbuildinfo +1 -0
  26. package/dist/tsconfig.esm.tsbuildinfo +1 -0
  27. package/package.json +45 -0
  28. package/src/Scroll.tsx +240 -0
  29. package/src/constants.ts +30 -0
  30. package/src/index.ts +11 -0
  31. package/src/styles.module.scss +163 -0
  32. package/src/types.ts +11 -0
package/dist/cjs/styles.module.css ADDED
@@ -0,0 +1,290 @@
1
+ @charset "UTF-8";
2
+ .scroll{
3
+ position:relative;
4
+ z-index:0;
5
+ box-sizing:border-box;
6
+ width:100%;
7
+ height:100%;
8
+ }
9
+
10
+ .stateLayer{
11
+ visibility:initial;
12
+ }
13
+ :global(.osThemeSnack .os-scrollbar){
14
+ padding:0;
15
+ }
16
+ :global(.osThemeSnack[data-untouchable-scrollbars] > .os-scrollbar-vertical){
17
+ pointer-events:none;
18
+ }
19
+ :global(.osThemeSnack[data-untouchable-scrollbars] > .os-scrollbar-vertical > .os-scrollbar-track){
20
+ pointer-events:none;
21
+ }
22
+ :global(.osThemeSnack[data-untouchable-scrollbars] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
23
+ pointer-events:none;
24
+ }
25
+ :global(.osThemeSnack[data-untouchable-scrollbars] > .os-scrollbar-horizontal){
26
+ pointer-events:none;
27
+ }
28
+ :global(.osThemeSnack[data-untouchable-scrollbars] > .os-scrollbar-horizontal > .os-scrollbar-track){
29
+ pointer-events:none;
30
+ }
31
+ :global(.osThemeSnack[data-untouchable-scrollbars] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
32
+ pointer-events:none;
33
+ }
34
+ :global(.osThemeSnack[data-size=s] > .os-scrollbar-vertical){
35
+ width:var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px));
36
+ pointer-events:none;
37
+ overflow:hidden;
38
+ }
39
+ :global(.osThemeSnack[data-size=s] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
40
+ border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
41
+ width:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
42
+ }
43
+ :global(.osThemeSnack[data-size=s] > .os-scrollbar-horizontal){
44
+ height:var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px));
45
+ pointer-events:none;
46
+ overflow:hidden;
47
+ }
48
+ :global(.osThemeSnack[data-size=s] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
49
+ border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
50
+ height:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
51
+ }
52
+ :global(.osThemeSnack[data-size=s].os-host-resize-disabled > .os-scrollbar-horizontal){
53
+ right:var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px));
54
+ }
55
+ :global(.osThemeSnack[data-size=s].os-host-resize-disabled.os-host-rtl > .os-scrollbar-horizontal){
56
+ right:0;
57
+ left:var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px));
58
+ }
59
+ :global(.osThemeSnack[data-size=s].os-host-resize-disabled > .os-scrollbar-vertical){
60
+ bottom:var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px));
61
+ }
62
+ :global(.osThemeSnack[data-size=m] > .os-scrollbar-vertical){
63
+ width:var(--sn-scroll-anatomy-container-size-m-square, var(--sn-primitive-dimension-16, 16px));
64
+ pointer-events:none;
65
+ overflow:hidden;
66
+ }
67
+ :global(.osThemeSnack[data-size=m] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
68
+ border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
69
+ width:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
70
+ }
71
+ :global(.osThemeSnack[data-size=m] > .os-scrollbar-horizontal){
72
+ height:var(--sn-scroll-anatomy-container-size-m-square, var(--sn-primitive-dimension-16, 16px));
73
+ pointer-events:none;
74
+ overflow:hidden;
75
+ }
76
+ :global(.osThemeSnack[data-size=m] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
77
+ border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
78
+ height:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
79
+ }
80
+ :global(.osThemeSnack[data-size=m].os-host-resize-disabled > .os-scrollbar-horizontal){
81
+ right:var(--sn-scroll-anatomy-container-size-m-square, var(--sn-primitive-dimension-16, 16px));
82
+ }
83
+ :global(.osThemeSnack[data-size=m].os-host-resize-disabled.os-host-rtl > .os-scrollbar-horizontal){
84
+ right:0;
85
+ left:var(--sn-scroll-anatomy-container-size-m-square, var(--sn-primitive-dimension-16, 16px));
86
+ }
87
+ :global(.osThemeSnack[data-size=m].os-host-resize-disabled > .os-scrollbar-vertical){
88
+ bottom:var(--sn-scroll-anatomy-container-size-m-square, var(--sn-primitive-dimension-16, 16px));
89
+ }
90
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
91
+ pointer-events:initial;
92
+ position:relative;
93
+ border:var(--sn-primitive-strokeWeight-strokeThin, 0.5px) solid var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
94
+ background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
95
+ }
96
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer{
97
+ transition:background 0.15s;
98
+ }
99
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer{
100
+ position:absolute;
101
+ inset:0;
102
+ border-radius:inherit;
103
+ }
104
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=borderOnBackground]{
105
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
106
+ border-style:solid;
107
+ border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
108
+ }
109
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=emptyNeutralOnBackground]{
110
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
111
+ }
112
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
113
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
114
+ }
115
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
116
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
117
+ }
118
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=emptyVersionOnColor]{
119
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
120
+ }
121
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=inversionOnColor]{
122
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
123
+ }
124
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=emptyInversionOnColor]{
125
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
126
+ }
127
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=emptyDarkOnAccent]{
128
+ background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
129
+ }
130
+ @media (hover: hover){
131
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
132
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
133
+ }
134
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
135
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
136
+ }
137
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
138
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
139
+ }
140
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
141
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
142
+ }
143
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
144
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
145
+ }
146
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
147
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
148
+ }
149
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
150
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
151
+ }
152
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
153
+ background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
154
+ }
155
+ }
156
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
157
+ }
158
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=borderOnBackground], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
159
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
160
+ }
161
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
162
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
163
+ }
164
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=activatedOnBackground], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
165
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
166
+ }
167
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=versionOnColor], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
168
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
169
+ }
170
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=emptyVersionOnColor], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
171
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
172
+ }
173
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=inversionOnColor], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
174
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
175
+ }
176
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=emptyInversionOnColor], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
177
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
178
+ }
179
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=emptyDarkOnAccent], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
180
+ background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
181
+ }
182
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
183
+ left:50%;
184
+ translate:-50% 0;
185
+ }
186
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)::before{
187
+ right:-12px;
188
+ left:-12px;
189
+ }
190
+
191
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
192
+ pointer-events:initial;
193
+ position:relative;
194
+ border:var(--sn-primitive-strokeWeight-strokeThin, 0.5px) solid var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
195
+ background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
196
+ }
197
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer{
198
+ transition:background 0.15s;
199
+ }
200
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer{
201
+ position:absolute;
202
+ inset:0;
203
+ border-radius:inherit;
204
+ }
205
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=borderOnBackground]{
206
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
207
+ border-style:solid;
208
+ border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
209
+ }
210
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=emptyNeutralOnBackground]{
211
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
212
+ }
213
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
214
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
215
+ }
216
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
217
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
218
+ }
219
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=emptyVersionOnColor]{
220
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
221
+ }
222
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=inversionOnColor]{
223
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
224
+ }
225
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=emptyInversionOnColor]{
226
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
227
+ }
228
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=emptyDarkOnAccent]{
229
+ background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
230
+ }
231
+ @media (hover: hover){
232
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
233
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
234
+ }
235
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
236
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
237
+ }
238
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
239
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
240
+ }
241
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
242
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
243
+ }
244
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
245
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
246
+ }
247
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
248
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
249
+ }
250
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
251
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
252
+ }
253
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
254
+ background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
255
+ }
256
+ }
257
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
258
+ }
259
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=borderOnBackground], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
260
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
261
+ }
262
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
263
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
264
+ }
265
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=activatedOnBackground], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
266
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
267
+ }
268
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=versionOnColor], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
269
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
270
+ }
271
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=emptyVersionOnColor], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
272
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
273
+ }
274
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=inversionOnColor], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
275
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
276
+ }
277
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=emptyInversionOnColor], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
278
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
279
+ }
280
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=emptyDarkOnAccent], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
281
+ background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
282
+ }
283
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
284
+ top:50%;
285
+ translate:0 -50%;
286
+ }
287
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)::before{
288
+ top:-12px;
289
+ bottom:-12px;
290
+ }
package/dist/cjs/types.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { ValueOf } from '@cloud-ru/ds-utils';
2
+ import { AUTOSCROLL_TO, BAR_HIDE_STRATEGY, RESIZE, SIZE } from './constants';
3
+ export type Size = ValueOf<typeof SIZE>;
4
+ export type AutoscrollTo = ValueOf<typeof AUTOSCROLL_TO>;
5
+ export type Resize = ValueOf<typeof RESIZE>;
6
+ export type BarHideStrategy = ValueOf<typeof BAR_HIDE_STRATEGY>;
package/dist/cjs/types.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
package/dist/esm/Scroll.d.ts ADDED
@@ -0,0 +1,107 @@
1
+ import 'overlayscrollbars/styles/overlayscrollbars.css';
2
+ import { WithSupportProps } from '@cloud-ru/ds-utils';
3
+ import { PropsWithChildren } from 'react';
4
+ import { AutoscrollTo, BarHideStrategy, Resize, Size } from './types.js';
5
+ export type ScrollProps = WithSupportProps<PropsWithChildren<{
6
+ className?: string;
7
+ /** Размер скролбаров */
8
+ size?: Size;
9
+ /** Скролить ли по клику в скроллбар. */
10
+ clickScrolling?: boolean;
11
+ /**
12
+ * Включает автоскрол при маунте и изменении размера контента:
13
+ * <br /> - `bottom` - автоскрол вниз,
14
+ * <br /> - `right` - автоскрол вправо,
15
+ */
16
+ autoscrollTo?: AutoscrollTo;
17
+ /**
18
+ * Управление скрытием скролл баров:
19
+ * <br /> - `Never` - показывать всегда
20
+ * <br /> - `Leave` - скрывать когда курсор покидает компонент
21
+ * <br /> - `Scroll` - показывать только когда происходит скроллинг
22
+ * <br /> - `Move` - показывать при движении курсора над компонентом
23
+ */
24
+ barHideStrategy?: BarHideStrategy;
25
+ /** Колбек события скрола. */
26
+ onScroll?: (event?: Event) => void;
27
+ /**
28
+ * Настройка возможности регулировать Scroll-контейнер:
29
+ * <br /> - `None` - нельзя изменять размер
30
+ * <br /> - `Horizontal` - можно изменять размер только по горизонтали
31
+ * <br /> - `Vertical` - можно изменять размер только по вертикали
32
+ * <br /> - `Both` - можно изменять размер в обеих координатах
33
+ */
34
+ resize?: Resize;
35
+ /** Отключает возможность взаимодействовать со скролбарами мышью. */
36
+ untouchableScrollbars?: boolean;
37
+ /** Должны ли паддинги быть абсолютными */
38
+ paddingAbsolute?: boolean;
39
+ /**
40
+ * Поведение overflow по осям. По умолчанию OverlayScrollbars выставляет `scroll`
41
+ * на обе оси; если контента по оси быть не должно — передавай `'hidden'`.
42
+ */
43
+ overflow?: {
44
+ x?: 'hidden' | 'visible' | 'scroll' | 'visible-hidden' | 'visible-scroll';
45
+ y?: 'hidden' | 'visible' | 'scroll' | 'visible-hidden' | 'visible-scroll';
46
+ };
47
+ /** Коллбэк вызывающийся на инициализацию скролла */
48
+ onInitialized?(): void;
49
+ }>>;
50
+ /**
51
+ * Установить nonce атрибут для инлайн стилей.
52
+ * @function setNonce
53
+ */
54
+ export declare const setNonce: (newNonce: string | undefined) => void;
55
+ /**
56
+ * Scroll — контейнер с кастомными скроллбарами (OverlayScrollbars).
57
+ * Стили из @cloud-ru/ds-figma-variables (anatomy container + slider + theme colors).
58
+ */
59
+ export declare const Scroll: import("react").ForwardRefExoticComponent<{
60
+ 'data-test-id'?: string;
61
+ } & import("react").AriaAttributes & {
62
+ className?: string;
63
+ /** Размер скролбаров */
64
+ size?: Size;
65
+ /** Скролить ли по клику в скроллбар. */
66
+ clickScrolling?: boolean;
67
+ /**
68
+ * Включает автоскрол при маунте и изменении размера контента:
69
+ * <br /> - `bottom` - автоскрол вниз,
70
+ * <br /> - `right` - автоскрол вправо,
71
+ */
72
+ autoscrollTo?: AutoscrollTo;
73
+ /**
74
+ * Управление скрытием скролл баров:
75
+ * <br /> - `Never` - показывать всегда
76
+ * <br /> - `Leave` - скрывать когда курсор покидает компонент
77
+ * <br /> - `Scroll` - показывать только когда происходит скроллинг
78
+ * <br /> - `Move` - показывать при движении курсора над компонентом
79
+ */
80
+ barHideStrategy?: BarHideStrategy;
81
+ /** Колбек события скрола. */
82
+ onScroll?: (event?: Event) => void;
83
+ /**
84
+ * Настройка возможности регулировать Scroll-контейнер:
85
+ * <br /> - `None` - нельзя изменять размер
86
+ * <br /> - `Horizontal` - можно изменять размер только по горизонтали
87
+ * <br /> - `Vertical` - можно изменять размер только по вертикали
88
+ * <br /> - `Both` - можно изменять размер в обеих координатах
89
+ */
90
+ resize?: Resize;
91
+ /** Отключает возможность взаимодействовать со скролбарами мышью. */
92
+ untouchableScrollbars?: boolean;
93
+ /** Должны ли паддинги быть абсолютными */
94
+ paddingAbsolute?: boolean;
95
+ /**
96
+ * Поведение overflow по осям. По умолчанию OverlayScrollbars выставляет `scroll`
97
+ * на обе оси; если контента по оси быть не должно — передавай `'hidden'`.
98
+ */
99
+ overflow?: {
100
+ x?: "hidden" | "visible" | "scroll" | "visible-hidden" | "visible-scroll";
101
+ y?: "hidden" | "visible" | "scroll" | "visible-hidden" | "visible-scroll";
102
+ };
103
+ /** Коллбэк вызывающийся на инициализацию скролла */
104
+ onInitialized?(): void;
105
+ } & {
106
+ children?: import("react").ReactNode | undefined;
107
+ } & import("react").RefAttributes<HTMLElement>>;
package/dist/esm/Scroll.js ADDED
@@ -0,0 +1,118 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import 'overlayscrollbars/styles/overlayscrollbars.css';
3
+ import { isBrowser, useLayoutEffect } from '@cloud-ru/ds-utils';
4
+ import cn from 'classnames';
5
+ import { OverlayScrollbars } from 'overlayscrollbars';
6
+ import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
7
+ import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
8
+ import { AUTOSCROLL_ENABLE_LIMIT, AUTOSCROLL_TO, BAR_AUTO_HIDE_DELAY_MS, BAR_HIDE_STRATEGY, RESIZE, SIZE, } from './constants.js';
9
+ import styles from './styles.module.css';
10
+ /**
11
+ * Установить nonce атрибут для инлайн стилей.
12
+ * @function setNonce
13
+ */
14
+ export const setNonce = OverlayScrollbars.nonce;
15
+ /**
16
+ * Scroll — контейнер с кастомными скроллбарами (OverlayScrollbars).
17
+ * Стили из @cloud-ru/ds-figma-variables (anatomy container + slider + theme colors).
18
+ */
19
+ export const Scroll = forwardRef(function Scroll({ children, className, onScroll: onScrollProp, onInitialized: onInitializedProp, size = SIZE.M, resize = RESIZE.None, clickScrolling = true, barHideStrategy = BAR_HIDE_STRATEGY.Leave, autoscrollTo, paddingAbsolute, overflow, untouchableScrollbars = false, ...rest }, ref) {
20
+ const overlayScrollbarsRef = useRef(null);
21
+ const [isOverlayScrollbarInited, setOverlayScrollbarInited] = useState(false);
22
+ const getOSInstance = useCallback((overlayScrollbars = overlayScrollbarsRef.current) => overlayScrollbars?.osInstance(), [overlayScrollbarsRef]);
23
+ useImperativeHandle(ref, () => (overlayScrollbarsRef.current?.osInstance()?.elements().viewport ?? null));
24
+ const lastPositionsRef = useRef({ scrolledToBottom: false, scrolledToRight: false });
25
+ const syncPositions = useCallback((scrollbars) => {
26
+ const instance = getOSInstance(scrollbars);
27
+ if (instance) {
28
+ const { viewport } = instance.elements();
29
+ const gapToBottom = viewport.scrollHeight - (viewport.offsetHeight + viewport.scrollTop);
30
+ const gapToRight = viewport.scrollWidth - (viewport.offsetWidth + viewport.scrollLeft);
31
+ const hasYScroll = viewport.scrollHeight > viewport.offsetHeight;
32
+ const hasXScroll = viewport.scrollWidth > viewport.offsetWidth;
33
+ lastPositionsRef.current.scrolledToBottom = gapToBottom < AUTOSCROLL_ENABLE_LIMIT || !hasYScroll;
34
+ lastPositionsRef.current.scrolledToRight = gapToRight < AUTOSCROLL_ENABLE_LIMIT || !hasXScroll;
35
+ }
36
+ }, [getOSInstance]);
37
+ useLayoutEffect(() => {
38
+ if (!autoscrollTo) {
39
+ onInitializedProp?.();
40
+ return;
41
+ }
42
+ const instance = getOSInstance();
43
+ if (instance && isOverlayScrollbarInited) {
44
+ syncPositions();
45
+ const { content } = instance.elements();
46
+ autoscrollTo === AUTOSCROLL_TO.Bottom && content.scroll(0, content.scrollHeight);
47
+ autoscrollTo === AUTOSCROLL_TO.Right && content.scroll(content.scrollWidth, 0);
48
+ }
49
+ onInitializedProp?.();
50
+ /* autoscrollTo умышленно не в депсах — интересен только на момент маунта */
51
+ // eslint-disable-next-line react-hooks/exhaustive-deps
52
+ }, [getOSInstance, isOverlayScrollbarInited, syncPositions]);
53
+ const injectStateLayers = useCallback(() => {
54
+ const instance = overlayScrollbarsRef.current?.osInstance();
55
+ const host = instance?.elements().host;
56
+ if (!host) {
57
+ return;
58
+ }
59
+ host.querySelectorAll('.os-scrollbar-handle').forEach((handle) => {
60
+ const stateLayerClass = styles.stateLayer ?? '';
61
+ if (!stateLayerClass)
62
+ return;
63
+ if (handle.querySelector(`.${CSS.escape(stateLayerClass)}`)) {
64
+ return;
65
+ }
66
+ if (isBrowser()) {
67
+ const layer = document.createElement('div');
68
+ layer.classList.add(stateLayerClass);
69
+ layer.setAttribute('data-state', 'versionOnColor');
70
+ handle.appendChild(layer);
71
+ }
72
+ });
73
+ }, []);
74
+ const onInitialized = useCallback(() => {
75
+ injectStateLayers();
76
+ setOverlayScrollbarInited(true);
77
+ }, [injectStateLayers]);
78
+ const onScroll = useCallback((event) => {
79
+ onScrollProp?.(event);
80
+ if (autoscrollTo) {
81
+ syncPositions();
82
+ }
83
+ },
84
+ /* autoscrollTo не аффектит на расчеты в syncPositions */
85
+ // eslint-disable-next-line react-hooks/exhaustive-deps
86
+ [onScrollProp, syncPositions]);
87
+ const onContentSizeChanged = useCallback(() => {
88
+ if (!autoscrollTo)
89
+ return;
90
+ const instance = getOSInstance()?.elements();
91
+ if (instance?.content) {
92
+ if (lastPositionsRef.current.scrolledToBottom && autoscrollTo === AUTOSCROLL_TO.Bottom) {
93
+ instance?.content.scroll(0, instance?.content.scrollHeight);
94
+ }
95
+ if (lastPositionsRef.current.scrolledToRight && autoscrollTo === AUTOSCROLL_TO.Right) {
96
+ instance?.content.scroll(instance?.content.scrollWidth, 0);
97
+ }
98
+ }
99
+ }, [getOSInstance, autoscrollTo]);
100
+ return (_jsx(OverlayScrollbarsComponent, { ...rest, ref: overlayScrollbarsRef, "data-size": size, "data-untouchable-scrollbars": untouchableScrollbars || undefined, className: cn(className, styles.scroll, 'osThemeSnack'), style: { resize }, options: {
101
+ paddingAbsolute,
102
+ overflow,
103
+ scrollbars: {
104
+ autoHide: barHideStrategy,
105
+ autoHideDelay: BAR_AUTO_HIDE_DELAY_MS,
106
+ clickScroll: clickScrolling,
107
+ },
108
+ }, events: {
109
+ initialized: onInitialized,
110
+ scroll: (_instance, event) => {
111
+ onScroll(event);
112
+ },
113
+ updated: () => {
114
+ injectStateLayers();
115
+ onContentSizeChanged();
116
+ },
117
+ }, children: autoscrollTo ? isOverlayScrollbarInited && children : children }));
118
+ });
package/dist/esm/constants.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ export declare const SIZE: {
2
+ readonly S: "s";
3
+ readonly M: "m";
4
+ };
5
+ export declare const BAR_HIDE_STRATEGY: {
6
+ readonly Never: "never";
7
+ readonly Leave: "leave";
8
+ readonly Scroll: "scroll";
9
+ readonly Move: "move";
10
+ };
11
+ export declare const RESIZE: {
12
+ readonly None: "none";
13
+ readonly Horizontal: "horizontal";
14
+ readonly Vertical: "vertical";
15
+ readonly Both: "both";
16
+ };
17
+ export declare const AUTOSCROLL_TO: {
18
+ readonly Bottom: "bottom";
19
+ readonly Right: "right";
20
+ };
21
+ export declare const BAR_AUTO_HIDE_DELAY_MS = 100;
22
+ export declare const AUTOSCROLL_ENABLE_LIMIT = 2;
package/dist/esm/constants.js ADDED
@@ -0,0 +1,25 @@
1
+ export const SIZE = {
2
+ S: 's',
3
+ M: 'm',
4
+ };
5
+ export const BAR_HIDE_STRATEGY = {
6
+ Never: 'never',
7
+ Leave: 'leave',
8
+ Scroll: 'scroll',
9
+ Move: 'move',
10
+ };
11
+ export const RESIZE = {
12
+ None: 'none',
13
+ Horizontal: 'horizontal',
14
+ Vertical: 'vertical',
15
+ Both: 'both',
16
+ };
17
+ export const AUTOSCROLL_TO = {
18
+ Bottom: 'bottom',
19
+ Right: 'right',
20
+ };
21
+ export const BAR_AUTO_HIDE_DELAY_MS = 100;
22
+ /*
23
+ * Значение отступа до края контейнера при котором считается что контейнер проскролен до конца вниз или вправо, в пикселях.
24
+ */
25
+ export const AUTOSCROLL_ENABLE_LIMIT = 2;
package/dist/esm/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export { Scroll, setNonce } from './Scroll.js';
2
+ export type { ScrollProps } from './Scroll.js';
3
+ export { SIZE, BAR_HIDE_STRATEGY, RESIZE, AUTOSCROLL_TO, BAR_AUTO_HIDE_DELAY_MS, AUTOSCROLL_ENABLE_LIMIT, } from './constants.js';
4
+ export type { Size, BarHideStrategy, Resize, AutoscrollTo } from './types.js';
package/dist/esm/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export { Scroll, setNonce } from './Scroll.js';
2
+ export { SIZE, BAR_HIDE_STRATEGY, RESIZE, AUTOSCROLL_TO, BAR_AUTO_HIDE_DELAY_MS, AUTOSCROLL_ENABLE_LIMIT, } from './constants.js';