@synerise/ds-scrollbar 0.8.3 → 0.10.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 (9) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/README.md +13 -13
  3. package/dist/DnDScrollbar/DnDScrollbar.d.ts +1 -2
  4. package/dist/DnDScrollbar/DnDScrollbar.js +48 -39
  5. package/dist/Scrollbar.types.d.ts +5 -4
  6. package/dist/VirtualScrollbar/VirtualScrollbar.d.ts +1 -1
  7. package/dist/VirtualScrollbar/VirtualScrollbar.js +13 -1
  8. package/dist/VirtualScrollbar/style/index.css +1 -1
  9. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,28 @@
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
+ # [0.10.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@0.9.0...@synerise/ds-scrollbar@0.10.0) (2024-03-29)
7
+
8
+
9
+ ### Features
10
+
11
+ * **scrollbar:** added prop to control wheel event bubbling ([ef0b8e9](https://github.com/Synerise/synerise-design/commit/ef0b8e939a5293b62b99f01553b6d78350957360))
12
+
13
+
14
+
15
+
16
+
17
+ # [0.9.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@0.8.3...@synerise/ds-scrollbar@0.9.0) (2024-03-20)
18
+
19
+
20
+ ### Features
21
+
22
+ * **table:** sticky virtualised table ([4733821](https://github.com/Synerise/synerise-design/commit/47338215ed6355a90edf7350e6002c96c9f83809))
23
+
24
+
25
+
26
+
27
+
6
28
  ## [0.8.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@0.8.2...@synerise/ds-scrollbar@0.8.3) (2024-03-05)
7
29
 
8
30
  **Note:** Version bump only for package @synerise/ds-scrollbar
package/README.md CHANGED
@@ -27,16 +27,16 @@ import Scrollbar from '@synerise/ds-scrollbar'
27
27
  <iframe src="/storybook-static/iframe.html?id=components-scrollbar--default"></iframe>
28
28
 
29
29
  ## API
30
-
31
- | Property | Description | Type | Default |
32
- |-----------|----------------------------------------------------------------------|--------------------------|---------|
33
- | absolute | Whether the scrollbar is over content | boolean | `true` |
34
- | largeSize | Larger scrollbar | boolean | boolean | false
35
- | children | Scrolled component | React.ReactNode / string | - |
36
- | classes | String with optional classes | string | - |
37
- | fetchData | Callback called when scrollbar has been scrolled to the end in Y axis | () => void | - |
38
- | hasMore | Whether the scrollbar can calls fetchData | boolean | - |
39
- | loading | Whether the scrollbar shows loading icon | boolean | - |
40
- | maxHeight | Optional max-height value | string / number | - |
41
- | style | Additional styles for scrollbar wrapper | React.CSSProperties | - |
42
- | withDnd | Whether use DndScrollbar or VirtualScrollbar component | boolean | false |
30
+ | Property | Description | Type | Default |
31
+ | ------------- | -------------------------------------------------------------------------------- | ------------------------ | ------- |
32
+ | absolute | Whether the scrollbar is over content | boolean | `true` |
33
+ | largeSize | Larger scrollbar | boolean | false |
34
+ | children | Scrolled component | React.ReactNode / string | - |
35
+ | classes | String with optional classes | string | - |
36
+ | fetchData | Callback called when scrollbar has been scrolled to the end in Y axis | () => void | - |
37
+ | hasMore | Whether the scrollbar can calls fetchData | boolean | - |
38
+ | loading | Whether the scrollbar shows loading icon | boolean | - |
39
+ | maxHeight | Optional max-height value | string / number | - |
40
+ | style | Additional styles for scrollbar wrapper | React.CSSProperties | - |
41
+ | withDnd | Whether use DndScrollbar or VirtualScrollbar component | boolean | false |
42
+ | confineScroll | Will prevent wheel event from propagating (scrolling outer scope) if set to true | boolean | false |
package/dist/DnDScrollbar/DnDScrollbar.d.ts CHANGED
@@ -1,3 +1,2 @@
1
- import * as React from 'react';
2
1
  import { ScrollbarProps } from '../Scrollbar.types';
3
- export declare const DnDScrollbar: React.FC<ScrollbarProps>;
2
+ export declare const DnDScrollbar: ({ children, classes, maxHeight, absolute, loading, largeSize, onScroll, onYReachEnd, fetchData, hasMore, confineScroll, ...props }: ScrollbarProps) => JSX.Element;
package/dist/DnDScrollbar/DnDScrollbar.js CHANGED
@@ -1,10 +1,10 @@
1
- var _excluded = ["children", "classes", "maxHeight", "absolute", "loading", "largeSize", "onScroll", "onYReachEnd", "fetchData", "hasMore"];
1
+ var _excluded = ["children", "classes", "maxHeight", "absolute", "loading", "largeSize", "onScroll", "onYReachEnd", "fetchData", "hasMore", "confineScroll"];
2
2
 
3
3
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
4
 
5
5
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
6
6
 
7
- import * as React from 'react';
7
+ import React, { useRef, useState, useCallback, useEffect } from 'react';
8
8
  import * as S from './DnDScrollbar.styles';
9
9
  // eslint-disable-next-line import/prefer-default-export
10
10
  export var DnDScrollbar = function DnDScrollbar(_ref) {
@@ -18,39 +18,40 @@ export var DnDScrollbar = function DnDScrollbar(_ref) {
18
18
  onYReachEnd = _ref.onYReachEnd,
19
19
  fetchData = _ref.fetchData,
20
20
  hasMore = _ref.hasMore,
21
+ confineScroll = _ref.confineScroll,
21
22
  props = _objectWithoutPropertiesLoose(_ref, _excluded);
22
23
 
23
- var contentRef = React.useRef(null);
24
- var wrapperRef = React.useRef(null);
25
- var scrollTrackRef = React.useRef(null);
26
- var scrollThumbRef = React.useRef(null);
27
- var observer = React.useRef(null);
24
+ var contentRef = useRef(null);
25
+ var wrapperRef = useRef(null);
26
+ var scrollTrackRef = useRef(null);
27
+ var scrollThumbRef = useRef(null);
28
+ var observer = useRef(null);
28
29
 
29
- var _React$useState = React.useState(48),
30
- thumbHeight = _React$useState[0],
31
- setThumbHeight = _React$useState[1];
30
+ var _useState = useState(48),
31
+ thumbHeight = _useState[0],
32
+ setThumbHeight = _useState[1];
32
33
 
33
- var _React$useState2 = React.useState(0),
34
- scrollStartPosition = _React$useState2[0],
35
- setScrollStartPosition = _React$useState2[1];
34
+ var _useState2 = useState(0),
35
+ scrollStartPosition = _useState2[0],
36
+ setScrollStartPosition = _useState2[1];
36
37
 
37
- var _React$useState3 = React.useState(0),
38
- initialScrollTop = _React$useState3[0],
39
- setInitialScrollTop = _React$useState3[1];
38
+ var _useState3 = useState(0),
39
+ initialScrollTop = _useState3[0],
40
+ setInitialScrollTop = _useState3[1];
40
41
 
41
- var _React$useState4 = React.useState(false),
42
- isDragging = _React$useState4[0],
43
- setIsDragging = _React$useState4[1];
42
+ var _useState4 = useState(false),
43
+ isDragging = _useState4[0],
44
+ setIsDragging = _useState4[1];
44
45
 
45
- var handleTrackClick = React.useCallback(function (e) {
46
- e.preventDefault();
47
- e.stopPropagation();
46
+ var handleTrackClick = useCallback(function (event) {
47
+ event.preventDefault();
48
+ event.stopPropagation();
48
49
  var trackCurrent = scrollTrackRef.current;
49
50
  var contentCurrent = contentRef.current;
50
51
 
51
52
  if (trackCurrent && contentCurrent) {
52
- var clientY = e.clientY;
53
- var target = e.target;
53
+ var clientY = event.clientY;
54
+ var target = event.target;
54
55
  var rect = target.getBoundingClientRect();
55
56
  var trackTop = rect.top;
56
57
  var thumbOffset = -(thumbHeight / 2);
@@ -62,7 +63,7 @@ export var DnDScrollbar = function DnDScrollbar(_ref) {
62
63
  });
63
64
  }
64
65
  }, [thumbHeight]);
65
- var handleThumbPosition = React.useCallback(function () {
66
+ var handleThumbPosition = useCallback(function () {
66
67
  if (!contentRef.current || !scrollTrackRef.current || !scrollThumbRef.current) {
67
68
  return;
68
69
  }
@@ -76,31 +77,31 @@ export var DnDScrollbar = function DnDScrollbar(_ref) {
76
77
  var thumb = scrollThumbRef.current;
77
78
  thumb.style.top = newTop + "px";
78
79
  }, [thumbHeight]);
79
- var handleThumbMousedown = React.useCallback(function (e) {
80
- e.stopPropagation();
81
- setScrollStartPosition(e.clientY);
80
+ var handleThumbMousedown = useCallback(function (event) {
81
+ event.stopPropagation();
82
+ setScrollStartPosition(event.clientY);
82
83
  if (contentRef.current) setInitialScrollTop(contentRef.current.scrollTop);
83
84
  setIsDragging(true);
84
85
  }, []);
85
- var handleThumbMouseup = React.useCallback(function (e) {
86
- e.stopPropagation();
86
+ var handleThumbMouseup = useCallback(function (event) {
87
+ event.stopPropagation();
87
88
 
88
89
  if (isDragging) {
89
90
  setIsDragging(false);
90
91
  }
91
92
  }, [isDragging]);
92
- var handleThumbMousemove = React.useCallback(function (e) {
93
- e.stopPropagation();
93
+ var handleThumbMousemove = useCallback(function (event) {
94
+ event.stopPropagation();
94
95
 
95
96
  if (isDragging && contentRef.current !== null) {
96
97
  var _contentRef$current2 = contentRef.current,
97
98
  contentScrollHeight = _contentRef$current2.scrollHeight,
98
99
  contentOffsetHeight = _contentRef$current2.offsetHeight;
99
- var deltaY = (e.clientY - scrollStartPosition) * (contentOffsetHeight / thumbHeight);
100
+ var deltaY = (event.clientY - scrollStartPosition) * (contentOffsetHeight / thumbHeight);
100
101
  contentRef.current.scrollTop = Math.min(initialScrollTop + deltaY, contentScrollHeight - contentOffsetHeight);
101
102
  }
102
103
  }, [initialScrollTop, isDragging, scrollStartPosition, thumbHeight]);
103
- var handleScroll = React.useCallback(function (e) {
104
+ var handleScroll = useCallback(function (event) {
104
105
  if (contentRef.current !== null) {
105
106
  var _contentRef$current3 = contentRef.current,
106
107
  scrollHeight = _contentRef$current3.scrollHeight,
@@ -114,9 +115,9 @@ export var DnDScrollbar = function DnDScrollbar(_ref) {
114
115
  }
115
116
  }
116
117
 
117
- onScroll && onScroll(e);
118
+ onScroll && onScroll(event);
118
119
  }, [fetchData, hasMore, onScroll, onYReachEnd]);
119
- var handleResize = React.useCallback(function (trackSize) {
120
+ var handleResize = useCallback(function (trackSize) {
120
121
  if (contentRef.current !== null) {
121
122
  var _contentRef$current4 = contentRef.current,
122
123
  clientHeightContent = _contentRef$current4.clientHeight,
@@ -130,7 +131,14 @@ export var DnDScrollbar = function DnDScrollbar(_ref) {
130
131
  }
131
132
  }
132
133
  }, [handleThumbPosition]);
133
- React.useEffect(function () {
134
+
135
+ var handleWheel = function handleWheel(event) {
136
+ if (confineScroll) {
137
+ event.stopPropagation();
138
+ }
139
+ };
140
+
141
+ useEffect(function () {
134
142
  if (contentRef.current !== null && scrollTrackRef.current !== null && wrapperRef.current !== null) {
135
143
  var ref = wrapperRef.current;
136
144
  var content = contentRef.current;
@@ -152,7 +160,7 @@ export var DnDScrollbar = function DnDScrollbar(_ref) {
152
160
 
153
161
  return undefined;
154
162
  }, [handleResize, handleThumbPosition]);
155
- React.useEffect(function () {
163
+ useEffect(function () {
156
164
  document.addEventListener('mousemove', handleThumbMousemove);
157
165
  document.addEventListener('mouseup', handleThumbMouseup);
158
166
  document.addEventListener('mouseleave', handleThumbMouseup);
@@ -170,7 +178,8 @@ export var DnDScrollbar = function DnDScrollbar(_ref) {
170
178
  style: {
171
179
  maxHeight: maxHeight
172
180
  },
173
- onScroll: handleScroll
181
+ onScroll: handleScroll,
182
+ onWheel: handleWheel
174
183
  }), /*#__PURE__*/React.createElement(S.ScrollbarWrapper, {
175
184
  ref: wrapperRef,
176
185
  loading: loading,
package/dist/Scrollbar.types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import * as React from 'react';
1
+ import { CSSProperties, ReactNode, UIEvent } from 'react';
2
2
  import { ScrollBarProps } from 'react-perfect-scrollbar';
3
3
  export type ScrollbarAdditionalProps = {
4
4
  absolute?: boolean;
@@ -8,14 +8,15 @@ export type ScrollbarAdditionalProps = {
8
8
  loading?: boolean;
9
9
  maxHeight?: string | number;
10
10
  largeSize?: boolean;
11
- style?: React.CSSProperties;
11
+ style?: CSSProperties;
12
12
  fetchData?: () => void;
13
- onScroll?: (e: React.UIEvent) => void;
13
+ onScroll?: (event: UIEvent) => void;
14
14
  onYReachEnd?: () => void;
15
15
  withDnd?: boolean;
16
+ confineScroll?: boolean;
16
17
  };
17
18
  export type ScrollbarProps = ScrollbarAdditionalProps & {
18
- children: React.ReactNode | string;
19
+ children?: ReactNode;
19
20
  };
20
21
  export type VirtualScrollbarProps = ScrollbarProps & {
21
22
  scrollbarOptions?: ScrollBarProps['options'];
package/dist/VirtualScrollbar/VirtualScrollbar.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  import React from 'react';
3
3
  import './style/index.less';
4
4
  export declare const VirtualScrollbar: React.ForwardRefExoticComponent<import("../Scrollbar.types").ScrollbarAdditionalProps & {
5
- children: React.ReactNode;
5
+ children?: React.ReactNode;
6
6
  } & {
7
7
  scrollbarOptions?: import("perfect-scrollbar").default.Options | undefined;
8
8
  } & React.RefAttributes<HTMLElement>>;
package/dist/VirtualScrollbar/VirtualScrollbar.js CHANGED
@@ -24,7 +24,8 @@ export var VirtualScrollbar = forwardRef(function (_ref, forwardedRef) {
24
24
  fetchData = _ref.fetchData,
25
25
  onScroll = _ref.onScroll,
26
26
  scrollbarOptions = _ref.scrollbarOptions,
27
- onYReachEnd = _ref.onYReachEnd;
27
+ onYReachEnd = _ref.onYReachEnd,
28
+ confineScroll = _ref.confineScroll;
28
29
  var scrollRef = useRef();
29
30
  var wrapperRef = useRef(null);
30
31
  var combinedScrollRef = useCombinedRefs(forwardedRef, scrollRef);
@@ -77,6 +78,17 @@ export var VirtualScrollbar = forwardRef(function (_ref, forwardedRef) {
77
78
  setLastScrollTop(0);
78
79
  }
79
80
  }, [combinedScrollRef]);
81
+ useEffect(function () {
82
+ var handleWheel = confineScroll && function (event) {
83
+ event.preventDefault();
84
+ };
85
+
86
+ var wrapper = wrapperRef.current;
87
+ wrapper && handleWheel && wrapper.addEventListener('wheel', handleWheel);
88
+ return function () {
89
+ wrapper && handleWheel && wrapper.removeEventListener('wheel', handleWheel);
90
+ };
91
+ }, [confineScroll]);
80
92
  return /*#__PURE__*/React.createElement(PerfectScrollbar, {
81
93
  containerRef: function containerRef(ref) {
82
94
  combinedScrollRef.current = ref;
package/dist/VirtualScrollbar/style/index.css CHANGED
@@ -1 +1 @@
1
- @import '~@ofsajd/react-perfect-scrollbar/dist/css/styles.css';.ps{overscroll-behavior:contain}.ps__rail-x.ps__rail-x{opacity:1;height:11px;position:absolute;width:calc(100% - 8px)!important;transform:translateX(-4px);overflow:hidden;margin-right:12px}.ps__rail-y.ps__rail-y{opacity:1;width:11px;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,.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
+ @import '~@ofsajd/react-perfect-scrollbar/dist/css/styles.css';.ps{overscroll-behavior:contain}.ps__rail-x.ps__rail-x{opacity:1;height:11px;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;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,.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}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-scrollbar",
3
- "version": "0.8.3",
3
+ "version": "0.10.0",
4
4
  "description": "Scrollbar UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -34,7 +34,7 @@
34
34
  "types": "dist/index.d.ts",
35
35
  "dependencies": {
36
36
  "@ofsajd/react-perfect-scrollbar": "1.0.0",
37
- "@synerise/ds-icon": "^0.60.3"
37
+ "@synerise/ds-icon": "^0.60.5"
38
38
  },
39
39
  "peerDependencies": {
40
40
  "@synerise/ds-core": "*",
@@ -42,9 +42,9 @@
42
42
  "styled-components": "5.0.1"
43
43
  },
44
44
  "devDependencies": {
45
- "@synerise/ds-utils": "^0.25.0",
45
+ "@synerise/ds-utils": "^0.26.1",
46
46
  "@testing-library/jest-dom": "5.1.1",
47
47
  "@types/resize-observer-browser": "^0.1.7"
48
48
  },
49
- "gitHead": "6b8da853a2bb4e993d89e9b0b3041216f0c9c976"
49
+ "gitHead": "07304b7bf03826701df904c7be058d93588a9611"
50
50
  }