@synerise/ds-scrollbar 1.2.19 → 1.3.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 (12) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/README.md +1 -0
  3. package/dist/DnDScrollbar/DnDScrollbar.d.ts +1 -1
  4. package/dist/DnDScrollbar/DnDScrollbar.js +2 -1
  5. package/dist/DnDScrollbar/DnDScrollbar.styles.d.ts +4 -1
  6. package/dist/DnDScrollbar/DnDScrollbar.styles.js +1 -1
  7. package/dist/Scrollbar.js +3 -2
  8. package/dist/Scrollbar.styles.d.ts +4 -1
  9. package/dist/Scrollbar.styles.js +1 -1
  10. package/dist/Scrollbar.types.d.ts +2 -0
  11. package/dist/style/index.css +1 -1
  12. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,16 @@
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.3.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@1.2.20...@synerise/ds-scrollbar@1.3.0) (2026-04-22)
7
+
8
+ ### Features
9
+
10
+ - **scrollbar:** add overscrollBehavior prop ([d699d9a](https://github.com/Synerise/synerise-design/commit/d699d9a7d79210c45098d5728ff24785ce060875))
11
+
12
+ ## [1.2.20](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@1.2.19...@synerise/ds-scrollbar@1.2.20) (2026-04-21)
13
+
14
+ **Note:** Version bump only for package @synerise/ds-scrollbar
15
+
6
16
  ## [1.2.19](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@1.2.18...@synerise/ds-scrollbar@1.2.19) (2026-04-10)
7
17
 
8
18
  **Note:** Version bump only for package @synerise/ds-scrollbar
package/README.md CHANGED
@@ -43,3 +43,4 @@ import Scrollbar from '@synerise/ds-scrollbar'
43
43
  | onScroll | Callback fired on scroll events | (event: UIEvent) => void | - |
44
44
  | onYReachEnd | Callback fired independently when scroll reaches the Y end | () => void | - |
45
45
  | confineScroll | Will prevent wheel event from propagating (scrolling outer scope) if set to true | boolean | false |
46
+ | overscrollBehavior | CSS `overscroll-behavior` applied to the scroll container — honored by both the virtual and `withDnd` variants | `'auto' \| 'contain' \| 'none'` | `'contain'` |
package/dist/DnDScrollbar/DnDScrollbar.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { default as React } from 'react';
2
2
  import { ScrollbarProps } from '../Scrollbar.types';
3
- export declare const DnDScrollbar: ({ children, classes, maxHeight, absolute, loading, largeSize, onScroll, onYReachEnd, fetchData, hasMore, confineScroll, ...props }: ScrollbarProps) => React.JSX.Element;
3
+ export declare const DnDScrollbar: ({ children, classes, maxHeight, absolute, loading, largeSize, onScroll, onYReachEnd, fetchData, hasMore, confineScroll, overscrollBehavior, ...props }: ScrollbarProps) => React.JSX.Element;
package/dist/DnDScrollbar/DnDScrollbar.js CHANGED
@@ -13,6 +13,7 @@ const DnDScrollbar = ({
13
13
  fetchData,
14
14
  hasMore,
15
15
  confineScroll,
16
+ overscrollBehavior = "contain",
16
17
  ...props
17
18
  }) => {
18
19
  const contentRef = useRef(null);
@@ -155,7 +156,7 @@ const DnDScrollbar = ({
155
156
  document.removeEventListener("mouseleave", handleThumbMouseup);
156
157
  };
157
158
  }, [handleThumbMousemove, handleThumbMouseup]);
158
- return /* @__PURE__ */ jsxs(ScrollbarContainer, { "data-testid": "dnd-scrollbar", children: [
159
+ return /* @__PURE__ */ jsxs(ScrollbarContainer, { overscrollBehavior, "data-testid": "dnd-scrollbar", children: [
159
160
  /* @__PURE__ */ jsx(ScrollbarContent, { ref: contentRef, ...props, style: {
160
161
  maxHeight
161
162
  }, onScroll: handleScroll, onWheel: handleWheel, children: /* @__PURE__ */ jsx(ScrollbarWrapper, { ref: wrapperRef, loading, absolute, largeSize, children }) }),
package/dist/DnDScrollbar/DnDScrollbar.styles.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { OverscrollBehavior } from '../Scrollbar.types';
1
2
  export declare const ScrollbarContent: import('styled-components').StyledComponent<"div", any, {}, never>;
2
3
  export declare const ScrollbarWrapper: import('styled-components').StyledComponent<"div", any, {
3
4
  absolute?: boolean;
@@ -14,4 +15,6 @@ export declare const TrackVertical: import('styled-components').StyledComponent<
14
15
  export declare const Loader: import('styled-components').StyledComponent<"div", any, {
15
16
  loading?: boolean;
16
17
  }, never>;
17
- export declare const ScrollbarContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
18
+ export declare const ScrollbarContainer: import('styled-components').StyledComponent<"div", any, {
19
+ overscrollBehavior: OverscrollBehavior;
20
+ }, never>;
package/dist/DnDScrollbar/DnDScrollbar.styles.js CHANGED
@@ -37,7 +37,7 @@ const Loader = /* @__PURE__ */ styled.div.withConfig({
37
37
  const ScrollbarContainer = /* @__PURE__ */ styled.div.withConfig({
38
38
  displayName: "DnDScrollbarstyles__ScrollbarContainer",
39
39
  componentId: "sc-12t6y2d-6"
40
- })(["display:flex;height:100%;overflow:hidden;position:relative;&:hover{", "{opacity:1;}}"], ScrollbarTrackWrapper);
40
+ })(["display:flex;height:100%;overflow:hidden;position:relative;overscroll-behavior:", ";&:hover{", "{opacity:1;}}"], (props) => props.overscrollBehavior, ScrollbarTrackWrapper);
41
41
  export {
42
42
  Loader,
43
43
  ScrollbarContainer,
package/dist/Scrollbar.js CHANGED
@@ -11,12 +11,13 @@ const Scrollbar = forwardRef(({
11
11
  loading,
12
12
  withDnd,
13
13
  fetchData,
14
+ overscrollBehavior = "contain",
14
15
  ...props
15
16
  }, forwardedRef) => {
16
17
  const theme = useTheme();
17
18
  const Component = withDnd ? DnDScrollbar : VirtualScrollbar;
18
- return /* @__PURE__ */ jsxs(ScrollbarContainer, { className, children: [
19
- /* @__PURE__ */ jsx(Component, { ...props, fetchData, ref: forwardedRef, children }),
19
+ return /* @__PURE__ */ jsxs(ScrollbarContainer, { overscrollBehavior, className, children: [
20
+ /* @__PURE__ */ jsx(Component, { ...props, overscrollBehavior, fetchData, ref: forwardedRef, children }),
20
21
  loading && /* @__PURE__ */ jsx(LoaderWrapper, { children: /* @__PURE__ */ jsx(Loader, { loading, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SpinnerM, {}), color: theme.palette["grey-600"] }) }) })
21
22
  ] });
22
23
  });
package/dist/Scrollbar.styles.d.ts CHANGED
@@ -1,5 +1,8 @@
1
+ import { OverscrollBehavior } from './Scrollbar.types';
1
2
  export declare const Loader: import('styled-components').StyledComponent<"div", any, {
2
3
  loading?: boolean;
3
4
  }, never>;
4
5
  export declare const LoaderWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
5
- export declare const ScrollbarContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
6
+ export declare const ScrollbarContainer: import('styled-components').StyledComponent<"div", any, {
7
+ overscrollBehavior: OverscrollBehavior;
8
+ }, never>;
package/dist/Scrollbar.styles.js CHANGED
@@ -11,7 +11,7 @@ const LoaderWrapper = /* @__PURE__ */ styled.div.withConfig({
11
11
  const ScrollbarContainer = /* @__PURE__ */ styled.div.withConfig({
12
12
  displayName: "Scrollbarstyles__ScrollbarContainer",
13
13
  componentId: "sc-rfwkf7-2"
14
- })(["position:relative;height:100%;"]);
14
+ })(["position:relative;height:100%;.ps{overscroll-behavior:", ";}"], (props) => props.overscrollBehavior);
15
15
  export {
16
16
  Loader,
17
17
  LoaderWrapper,
package/dist/Scrollbar.types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { CSSProperties, ReactNode, UIEvent } from 'react';
2
2
  import { ScrollBarProps } from '@ofsajd/react-perfect-scrollbar';
3
+ export type OverscrollBehavior = 'contain' | 'auto' | 'none';
3
4
  export type ScrollbarAdditionalProps = {
4
5
  absolute?: boolean;
5
6
  classes?: string;
@@ -14,6 +15,7 @@ export type ScrollbarAdditionalProps = {
14
15
  onYReachEnd?: () => void;
15
16
  withDnd?: boolean;
16
17
  confineScroll?: boolean;
18
+ overscrollBehavior?: OverscrollBehavior;
17
19
  };
18
20
  export type ScrollbarProps = ScrollbarAdditionalProps & {
19
21
  children?: ReactNode;
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: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}
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__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__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.19",
3
+ "version": "1.3.0",
4
4
  "description": "Scrollbar UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -33,7 +33,7 @@
33
33
  "types": "dist/index.d.ts",
34
34
  "dependencies": {
35
35
  "@ofsajd/react-perfect-scrollbar": "1.0.0",
36
- "@synerise/ds-icon": "^1.15.3",
36
+ "@synerise/ds-icon": "^1.16.0",
37
37
  "@synerise/ds-utils": "^1.8.0",
38
38
  "classnames": "^2.3.2"
39
39
  },
@@ -43,5 +43,5 @@
43
43
  "styled-components": "^5.3.3",
44
44
  "vitest": "4"
45
45
  },
46
- "gitHead": "ce3c6d75efe8573a2b274853636f959b75a6cd32"
46
+ "gitHead": "6d4f42c9a899ff73f582a7405a5a2470a4b07083"
47
47
  }