@synerise/ds-scrollbar 1.2.14 → 1.2.15

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 (5) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/DnDScrollbar/DnDScrollbar.styles.d.ts +1 -1
  3. package/dist/DnDScrollbar/DnDScrollbar.styles.js +12 -12
  4. package/dist/style/index.css +1 -1
  5. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.2.15](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@1.2.14...@synerise/ds-scrollbar@1.2.15) (2026-03-09)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **scrollbar:** keep scroll thumb hidden until hovered ([246d4dd](https://github.com/Synerise/synerise-design/commit/246d4ddd977cc4e2b94367234805660d9ae676b6))
11
+
6
12
  ## [1.2.14](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@1.2.13...@synerise/ds-scrollbar@1.2.14) (2026-02-19)
7
13
 
8
14
  **Note:** Version bump only for package @synerise/ds-scrollbar
package/dist/DnDScrollbar/DnDScrollbar.styles.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- export declare const ScrollbarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
2
1
  export declare const ScrollbarContent: import("styled-components").StyledComponent<"div", any, {}, never>;
3
2
  export declare const ScrollbarWrapper: import("styled-components").StyledComponent<"div", any, {
4
3
  absolute?: boolean;
@@ -15,3 +14,4 @@ export declare const TrackVertical: import("styled-components").StyledComponent<
15
14
  export declare const Loader: import("styled-components").StyledComponent<"div", any, {
16
15
  loading?: boolean;
17
16
  }, never>;
17
+ export declare const ScrollbarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
package/dist/DnDScrollbar/DnDScrollbar.styles.js CHANGED
@@ -1,15 +1,11 @@
1
1
  import styled, { keyframes } from 'styled-components';
2
- export var ScrollbarContainer = styled.div.withConfig({
3
- displayName: "DnDScrollbarstyles__ScrollbarContainer",
4
- componentId: "sc-12t6y2d-0"
5
- })(["display:flex;height:100%;overflow:hidden;position:relative;"]);
6
2
  export var ScrollbarContent = styled.div.withConfig({
7
3
  displayName: "DnDScrollbarstyles__ScrollbarContent",
8
- componentId: "sc-12t6y2d-1"
4
+ componentId: "sc-12t6y2d-0"
9
5
  })(["-ms-overflow-style:none;overflow:auto;scrollbar-width:none;width:100%;&::-webkit-scrollbar{display:none;}"]);
10
6
  export var ScrollbarWrapper = styled.div.withConfig({
11
7
  displayName: "DnDScrollbarstyles__ScrollbarWrapper",
12
- componentId: "sc-12t6y2d-2"
8
+ componentId: "sc-12t6y2d-1"
13
9
  })(["padding-right:", ";padding-bottom:", ";& > *{opacity:", ";transition:opacity 0.25s ease-in-out;}"], function (props) {
14
10
  if (props.absolute) {
15
11
  return '';
@@ -25,7 +21,7 @@ export var ScrollbarWrapper = styled.div.withConfig({
25
21
  });
26
22
  export var ThumbVertical = styled.div.withConfig({
27
23
  displayName: "DnDScrollbarstyles__ThumbVertical",
28
- componentId: "sc-12t6y2d-3"
24
+ componentId: "sc-12t6y2d-2"
29
25
  })(["width:", ";background-color:", ";border-radius:3px;right:", ";position:absolute;border:", ";&:hover,&:active{background-color:", ";border:", ";}"], function (props) {
30
26
  return props.largeSize ? '16px' : '3px';
31
27
  }, function (props) {
@@ -41,8 +37,8 @@ export var ThumbVertical = styled.div.withConfig({
41
37
  });
42
38
  export var ScrollbarTrackWrapper = styled.div.withConfig({
43
39
  displayName: "DnDScrollbarstyles__ScrollbarTrackWrapper",
44
- componentId: "sc-12t6y2d-4"
45
- })(["display:block;height:100%;position:absolute;width:", ";top:0;right:", ";bottom:0;user-select:none;", "{width:", ";background-color:", ";border:", ";}&:hover{", "{background-color:", ";border:", ";}}"], function (props) {
40
+ componentId: "sc-12t6y2d-3"
41
+ })(["display:block;height:100%;position:absolute;width:", ";top:0;right:", ";bottom:0;user-select:none;opacity:0;transition:opacity 0.3s ease-in-out;", "{width:", ";background-color:", ";border:", ";}&:hover{", "{background-color:", ";border:", ";}}"], function (props) {
46
42
  return props.largeSize ? '24px' : '11px';
47
43
  }, function (props) {
48
44
  return props.largeSize ? '3px' : '0';
@@ -59,16 +55,20 @@ export var ScrollbarTrackWrapper = styled.div.withConfig({
59
55
  });
60
56
  export var TrackVertical = styled.div.withConfig({
61
57
  displayName: "DnDScrollbarstyles__TrackVertical",
62
- componentId: "sc-12t6y2d-5"
58
+ componentId: "sc-12t6y2d-4"
63
59
  })(["opacity:0.2;width:11px;height:calc(100% - 8px);transform:translateY(4px);overflow:hidden;right:0;top:0;bottom:0;position:absolute;&:hover,&:active,&:focus{opacity:0.6;}"]);
64
60
  var spinnerAnimation = keyframes(["from{transform:rotateZ(0deg);}to{transform:rotateZ(360deg);}"]);
65
61
  export var Loader = styled.div.withConfig({
66
62
  displayName: "DnDScrollbarstyles__Loader",
67
- componentId: "sc-12t6y2d-6"
63
+ componentId: "sc-12t6y2d-5"
68
64
  })(["width:0;height:0;position:absolute;top:calc(50% - 12px);left:calc(50% - 12px);z-index:99;pointer-events:none;display:flex;opacity:", ";transform-origin:12px 12px;transition:opacity 0.3s ease-in-out;animation:", " 1s forwards linear infinite;svg{color:", ";fill:", ";}"], function (props) {
69
65
  return props.loading ? '1' : '0';
70
66
  }, spinnerAnimation, function (props) {
71
67
  return props.theme.palette['blue-600'];
72
68
  }, function (props) {
73
69
  return props.theme.palette['blue-600'];
74
- });
70
+ });
71
+ export var ScrollbarContainer = styled.div.withConfig({
72
+ displayName: "DnDScrollbarstyles__ScrollbarContainer",
73
+ componentId: "sc-12t6y2d-6"
74
+ })(["display:flex;height:100%;overflow:hidden;position:relative;&:hover{", "{opacity:1;}}"], ScrollbarTrackWrapper);
package/dist/style/index.css CHANGED
@@ -1 +1 @@
1
- .ps{overflow:hidden!important;overflow-anchor:none;-ms-overflow-style:none;touch-action:auto;-ms-touch-action:auto}.ps__rail-x{display:none;opacity:0;transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;height:15px;bottom:0;position:absolute}.ps__rail-y{display:none;opacity:0;transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;width:15px;right:0;position:absolute}.ps--active-x>.ps__rail-x,.ps--active-y>.ps__rail-y{display:block;background-color:transparent}.ps--focus>.ps__rail-x,.ps--focus>.ps__rail-y,.ps--scrolling-x>.ps__rail-x,.ps--scrolling-y>.ps__rail-y,.ps:hover>.ps__rail-x,.ps:hover>.ps__rail-y{opacity:.6}.ps .ps__rail-x.ps--clicking,.ps .ps__rail-x:focus,.ps .ps__rail-x:hover,.ps .ps__rail-y.ps--clicking,.ps .ps__rail-y:focus,.ps .ps__rail-y:hover{background-color:#eee;opacity:.9}.ps__thumb-x{background-color:#aaa;border-radius:6px;transition:background-color .2s linear,height .2s ease-in-out;-webkit-transition:background-color .2s linear,height .2s ease-in-out;height:6px;bottom:2px;position:absolute}.ps__thumb-y{background-color:#aaa;border-radius:6px;transition:background-color .2s linear,width .2s ease-in-out;-webkit-transition:background-color .2s linear,width .2s ease-in-out;width:6px;right:2px;position:absolute}.ps__rail-x.ps--clicking .ps__thumb-x,.ps__rail-x:focus>.ps__thumb-x,.ps__rail-x:hover>.ps__thumb-x{background-color:#999;height:11px}.ps__rail-y.ps--clicking .ps__thumb-y,.ps__rail-y:focus>.ps__thumb-y,.ps__rail-y:hover>.ps__thumb-y{background-color:#999;width:11px}@supports (-ms-overflow-style:none){.ps{overflow:auto!important}}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.ps{overflow:auto!important}}.scrollbar-container{position:relative;height:100%}.ps{overscroll-behavior:contain}.ps__rail-x.ps__rail-x{opacity:1;height:11px;top:unset!important;bottom:0;position:absolute;width:calc(100% - 8px)!important;transform:translateX(-4px);overflow:hidden;margin-right:12px}.ps{overscroll-behavior:contain}.ps__rail-y.ps__rail-y{opacity:1;width:11px;left:unset!important;right:0;position:absolute;height:calc(100% - 8px)!important;transform:translateY(4px);overflow:hidden;margin-bottom:12px}.ps:hover .ps__rail-x,.ps:hover .ps__rail-y{opacity:1}.ps .ps__rail-x.ps--clicking,.ps .ps__rail-x:focus,.ps .ps__rail-x:hover,.ps .ps__rail-y.ps--clicking,.ps .ps__rail-y:focus,.ps .ps__rail-y:hover{background-color:unset}.ps__thumb-x{background-color:#dbe0e3;border-radius:3px;height:3px;bottom:4px;margin:0 4px}.ps__thumb-y{background-color:#dbe0e3;border-radius:3px;width:3px;right:4px}.ps__rail-x.ps--clicking .ps__thumb-x,.ps__rail-x:focus>.ps__thumb-x,.ps__rail-x:hover>.ps__thumb-x{background-color:#949ea6;height:3px}.ps__rail-y.ps--clicking .ps__thumb-y,.ps__rail-y:focus>.ps__thumb-y,.ps__rail-y:hover>.ps__thumb-y{background-color:#949ea6;width:3px}.large-size .ps__rail-x.ps__rail-x,.large-size .ps__rail-y.ps__rail-y{opacity:1;width:26px;height:26px;position:absolute;overflow:hidden}.large-size .ps__rail-y.ps--clicking .ps__thumb-y,.large-size .ps__rail-y:focus>.ps__thumb-y,.large-size .ps__rail-y:hover>.ps__thumb-y,.large-size .ps__thumb-x,.large-size .ps__thumb-y,.large-size .ps__thumb-y--clicking,.large-size .ps__thumb-y:hover{background-color:#f4faff;border-radius:3px;width:16px;height:16px;border:1px solid #dbe0e3}.large-size .ps__rail-x.ps--clicking .ps__thumb-x,.large-size .ps__rail-x:focus>.ps__thumb-x,.large-size .ps__rail-x:hover>.ps__thumb-x,.large-size .ps__rail-y.ps--clicking .ps__thumb-y,.large-size .ps__rail-y:focus>.ps__thumb-y,.large-size .ps__rail-y:hover>.ps__thumb-y{background-color:#d9eeff;border:1px solid #b5bdc3;height:16px}
1
+ .ps{overflow:hidden!important;overflow-anchor:none;-ms-overflow-style:none;touch-action:auto;-ms-touch-action:auto}.ps__rail-x{display:none;opacity:0;transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;height:15px;bottom:0;position:absolute}.ps__rail-y{display:none;opacity:0;transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;width:15px;right:0;position:absolute}.ps--active-x>.ps__rail-x,.ps--active-y>.ps__rail-y{display:block;background-color:transparent}.ps--focus>.ps__rail-x,.ps--focus>.ps__rail-y,.ps--scrolling-x>.ps__rail-x,.ps--scrolling-y>.ps__rail-y,.ps:hover>.ps__rail-x,.ps:hover>.ps__rail-y{opacity:.6}.ps .ps__rail-x.ps--clicking,.ps .ps__rail-x:focus,.ps .ps__rail-x:hover,.ps .ps__rail-y.ps--clicking,.ps .ps__rail-y:focus,.ps .ps__rail-y:hover{background-color:#eee;opacity:.9}.ps__thumb-x{background-color:#aaa;border-radius:6px;transition:background-color .2s linear,height .2s ease-in-out;-webkit-transition:background-color .2s linear,height .2s ease-in-out;height:6px;bottom:2px;position:absolute}.ps__thumb-y{background-color:#aaa;border-radius:6px;transition:background-color .2s linear,width .2s ease-in-out;-webkit-transition:background-color .2s linear,width .2s ease-in-out;width:6px;right:2px;position:absolute}.ps__rail-x.ps--clicking .ps__thumb-x,.ps__rail-x:focus>.ps__thumb-x,.ps__rail-x:hover>.ps__thumb-x{background-color:#999;height:11px}.ps__rail-y.ps--clicking .ps__thumb-y,.ps__rail-y:focus>.ps__thumb-y,.ps__rail-y:hover>.ps__thumb-y{background-color:#999;width:11px}@supports (-ms-overflow-style:none){.ps{overflow:auto!important}}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.ps{overflow:auto!important}}.scrollbar-container{position:relative;height:100%}.ps{overscroll-behavior:contain}.ps__rail-x.ps__rail-x{opacity:0;height:11px;top:unset!important;bottom:0;position:absolute;width:calc(100% - 8px)!important;transform:translateX(-4px);overflow:hidden;margin-right:12px;transition:opacity .3s ease-in-out}.ps{overscroll-behavior:contain}.ps__rail-y.ps__rail-y{opacity:0;width:11px;left:unset!important;right:0;position:absolute;height:calc(100% - 8px)!important;transform:translateY(4px);overflow:hidden;margin-bottom:12px;transition:opacity .3s ease-in-out}.ps:hover .ps__rail-x,.ps:hover .ps__rail-y{opacity:1}.ps .ps__rail-x.ps--clicking,.ps .ps__rail-x:focus,.ps .ps__rail-x:hover,.ps .ps__rail-y.ps--clicking,.ps .ps__rail-y:focus,.ps .ps__rail-y:hover{background-color:unset}.ps__thumb-x{background-color:#dbe0e3;border-radius:3px;height:3px;bottom:4px;margin:0 4px}.ps__thumb-y{background-color:#dbe0e3;border-radius:3px;width:3px;right:4px}.ps__rail-x.ps--clicking .ps__thumb-x,.ps__rail-x:focus>.ps__thumb-x,.ps__rail-x:hover>.ps__thumb-x{background-color:#949ea6;height:3px}.ps__rail-y.ps--clicking .ps__thumb-y,.ps__rail-y:focus>.ps__thumb-y,.ps__rail-y:hover>.ps__thumb-y{background-color:#949ea6;width:3px}.large-size .ps__rail-x.ps__rail-x,.large-size .ps__rail-y.ps__rail-y{width:26px;height:26px;position:absolute;overflow:hidden}.large-size .ps__rail-y.ps--clicking .ps__thumb-y,.large-size .ps__rail-y:focus>.ps__thumb-y,.large-size .ps__rail-y:hover>.ps__thumb-y,.large-size .ps__thumb-x,.large-size .ps__thumb-y,.large-size .ps__thumb-y--clicking,.large-size .ps__thumb-y:hover{background-color:#f4faff;border-radius:3px;width:16px;height:16px;border:1px solid #dbe0e3}.large-size .ps__rail-x.ps--clicking .ps__thumb-x,.large-size .ps__rail-x:focus>.ps__thumb-x,.large-size .ps__rail-x:hover>.ps__thumb-x,.large-size .ps__rail-y.ps--clicking .ps__thumb-y,.large-size .ps__rail-y:focus>.ps__thumb-y,.large-size .ps__rail-y:hover>.ps__thumb-y{background-color:#d9eeff;border:1px solid #b5bdc3;height:16px}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-scrollbar",
3
- "version": "1.2.14",
3
+ "version": "1.2.15",
4
4
  "description": "Scrollbar UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -45,5 +45,5 @@
45
45
  "react": ">=16.9.0 <= 18.3.1",
46
46
  "styled-components": "^5.3.3"
47
47
  },
48
- "gitHead": "b3d1312cbfbe69aba1cb5667b54be7f76938156c"
48
+ "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
49
49
  }