@synerise/ds-scrollbar 0.4.11 → 0.5.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.5.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@0.4.7...@synerise/ds-scrollbar@0.5.0) (2022-08-11)
+
+
+### Features
+
+* **scrollbar:** creates common interface for old and new scrollbars ([ba9956f](https://github.com/Synerise/synerise-design/commit/ba9956f2a89ff9133da6b4c5a931142865e750e8))
+* **scrollbar:** replace react-perfect-scrollbar by custom ([cd3b312](https://github.com/Synerise/synerise-design/commit/cd3b3121adb3d398f68a48d897db6825ee0cc8c1))
+
+
+
+
+
 ## [0.4.7](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@0.4.6...@synerise/ds-scrollbar@0.4.7) (2022-03-30)
 
 **Note:** Version bump only for package @synerise/ds-scrollbar

package/README.md

@@ -28,13 +28,14 @@ import Scrollbar from '@synerise/ds-scrollbar'
 
 ## API
 
-| Property  | Description                                                           | Type                     | Default |
-| --------- | --------------------------------------------------------------------- | ------------------------ | ------- |
-| absolute  | Whether the scrollbar is over content                                 | boolean                  | `true`   |
-| children  | Scrolled component                                                    | React.ReactNode / string | -       |
-| classes   | String with optional classes                                          | string                   | -       |
+| Property  | Description                                                          | Type                     | Default |
+|-----------|----------------------------------------------------------------------|--------------------------|---------|
+| absolute  | Whether the scrollbar is over content                                | boolean                  | `true`  |
+| children  | Scrolled component                                                   | React.ReactNode / string | -       |
+| classes   | String with optional classes                                         | string                   | -       |
 | fetchData | Callback called when scrollbar has been scrolled to the end in Y axis | () => void               | -       |
-| hasMore   | Whether the scrollbar can calls fetchData                             | boolean                  | -       |
-| loading   | Whether the scrollbar shows loading icon                              | boolean                  | -       |
-| maxHeight | Optional max-height value                                             | string / number          | -       |
-| style     | Additional styles for scrollbar wrapper                               | React.CSSProperties      | -       |
+| hasMore   | Whether the scrollbar can calls fetchData                            | boolean                  | -       |
+| loading   | Whether the scrollbar shows loading icon                             | boolean                  | -       |
+| maxHeight | Optional max-height value                                            | string / number          | -       |
+| style     | Additional styles for scrollbar wrapper                              | React.CSSProperties      | -       |
+| withDnd   | Whether use DndScrollbar or VirtualScrollbar component               | boolean                  | false   |

package/dist/DnDScrollbar/DnDScrollbar.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ScrollbarProps } from '../Scrollbar.types';
+export declare const DnDScrollbar: React.FC<ScrollbarProps>;

package/dist/DnDScrollbar/DnDScrollbar.js

@@ -0,0 +1,187 @@
+var _excluded = ["children", "classes", "maxHeight", "absolute", "loading", "onScroll", "onYReachEnd", "fetchData", "hasMore"];
+
+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); }
+
+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; }
+
+import * as React from 'react';
+import * as S from './DnDScrollbar.styles';
+// eslint-disable-next-line import/prefer-default-export
+export var DnDScrollbar = function DnDScrollbar(_ref) {
+  var children = _ref.children,
+      classes = _ref.classes,
+      maxHeight = _ref.maxHeight,
+      absolute = _ref.absolute,
+      loading = _ref.loading,
+      onScroll = _ref.onScroll,
+      onYReachEnd = _ref.onYReachEnd,
+      fetchData = _ref.fetchData,
+      hasMore = _ref.hasMore,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var contentRef = React.useRef(null);
+  var wrapperRef = React.useRef(null);
+  var scrollTrackRef = React.useRef(null);
+  var scrollThumbRef = React.useRef(null);
+  var observer = React.useRef(null);
+
+  var _React$useState = React.useState(48),
+      thumbHeight = _React$useState[0],
+      setThumbHeight = _React$useState[1];
+
+  var _React$useState2 = React.useState(0),
+      scrollStartPosition = _React$useState2[0],
+      setScrollStartPosition = _React$useState2[1];
+
+  var _React$useState3 = React.useState(0),
+      initialScrollTop = _React$useState3[0],
+      setInitialScrollTop = _React$useState3[1];
+
+  var _React$useState4 = React.useState(false),
+      isDragging = _React$useState4[0],
+      setIsDragging = _React$useState4[1];
+
+  var handleTrackClick = React.useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    var trackCurrent = scrollTrackRef.current;
+    var contentCurrent = contentRef.current;
+
+    if (trackCurrent && contentCurrent) {
+      var clientY = e.clientY;
+      var target = e.target;
+      var rect = target.getBoundingClientRect();
+      var trackTop = rect.top;
+      var thumbOffset = -(thumbHeight / 2);
+      var clickRatio = (clientY - trackTop + thumbOffset) / trackCurrent.clientHeight;
+      var scrollAmount = Math.floor(clickRatio * contentCurrent.scrollHeight);
+      contentCurrent.scrollTo({
+        top: scrollAmount,
+        behavior: 'smooth'
+      });
+    }
+  }, [thumbHeight]);
+  var handleThumbPosition = React.useCallback(function () {
+    if (!contentRef.current || !scrollTrackRef.current || !scrollThumbRef.current) {
+      return;
+    }
+
+    var _contentRef$current = contentRef.current,
+        contentTop = _contentRef$current.scrollTop,
+        contentHeight = _contentRef$current.scrollHeight;
+    var trackHeight = scrollTrackRef.current.clientHeight;
+    var newTop = +contentTop / +contentHeight * trackHeight;
+    newTop = Math.min(newTop, trackHeight - thumbHeight);
+    var thumb = scrollThumbRef.current;
+    thumb.style.top = newTop + "px";
+  }, [thumbHeight]);
+  var handleThumbMousedown = React.useCallback(function (e) {
+    e.stopPropagation();
+    setScrollStartPosition(e.clientY);
+    if (contentRef.current) setInitialScrollTop(contentRef.current.scrollTop);
+    setIsDragging(true);
+  }, []);
+  var handleThumbMouseup = React.useCallback(function (e) {
+    e.stopPropagation();
+
+    if (isDragging) {
+      setIsDragging(false);
+    }
+  }, [isDragging]);
+  var handleThumbMousemove = React.useCallback(function (e) {
+    e.stopPropagation();
+
+    if (isDragging && contentRef.current !== null) {
+      var _contentRef$current2 = contentRef.current,
+          contentScrollHeight = _contentRef$current2.scrollHeight,
+          contentOffsetHeight = _contentRef$current2.offsetHeight;
+      var deltaY = (e.clientY - scrollStartPosition) * (contentOffsetHeight / thumbHeight);
+      contentRef.current.scrollTop = Math.min(initialScrollTop + deltaY, contentScrollHeight - contentOffsetHeight);
+    }
+  }, [initialScrollTop, isDragging, scrollStartPosition, thumbHeight]);
+  var handleScroll = React.useCallback(function (e) {
+    if (contentRef.current !== null) {
+      var _contentRef$current3 = contentRef.current,
+          scrollHeight = _contentRef$current3.scrollHeight,
+          offsetHeight = _contentRef$current3.offsetHeight,
+          scrollTop = _contentRef$current3.scrollTop;
+      var progress = Math.round((scrollTop + offsetHeight) / scrollHeight * 100) / 100;
+
+      if (progress === 1 && hasMore) {
+        onYReachEnd && onYReachEnd();
+        fetchData && fetchData();
+      }
+    }
+
+    onScroll && onScroll(e);
+  }, [fetchData, hasMore, onScroll, onYReachEnd]);
+  var handleResize = React.useCallback(function (trackSize) {
+    if (contentRef.current !== null) {
+      var _contentRef$current4 = contentRef.current,
+          clientHeightContent = _contentRef$current4.clientHeight,
+          scrollHeightContent = _contentRef$current4.scrollHeight;
+
+      if (clientHeightContent === scrollHeightContent) {
+        setThumbHeight(0);
+      } else {
+        setThumbHeight(Math.max(clientHeightContent / scrollHeightContent * trackSize, 48));
+        handleThumbPosition();
+      }
+    }
+  }, [handleThumbPosition]);
+  React.useEffect(function () {
+    if (contentRef.current !== null && scrollTrackRef.current !== null && wrapperRef.current !== null) {
+      var ref = wrapperRef.current;
+      var content = contentRef.current;
+      var trackSize = scrollTrackRef.current.clientHeight; // eslint-disable-next-line no-undef
+
+      observer.current = new ResizeObserver(function () {
+        handleResize(trackSize);
+      });
+      observer.current.observe(ref);
+      content.addEventListener('scroll', handleThumbPosition);
+      return function () {
+        if (observer.current !== null) {
+          observer.current.unobserve(ref);
+        }
+
+        content.removeEventListener('scroll', handleThumbPosition);
+      };
+    }
+
+    return undefined;
+  }, [handleResize, handleThumbPosition]);
+  React.useEffect(function () {
+    document.addEventListener('mousemove', handleThumbMousemove);
+    document.addEventListener('mouseup', handleThumbMouseup);
+    document.addEventListener('mouseleave', handleThumbMouseup);
+    return function () {
+      document.removeEventListener('mousemove', handleThumbMousemove);
+      document.removeEventListener('mouseup', handleThumbMouseup);
+      document.removeEventListener('mouseleave', handleThumbMouseup);
+    };
+  }, [handleThumbMousemove, handleThumbMouseup]);
+  return /*#__PURE__*/React.createElement(S.ScrollbarContainer, {
+    "data-testid": "dnd-scrollbar"
+  }, /*#__PURE__*/React.createElement(S.ScrollbarContent, _extends({
+    ref: contentRef
+  }, props, {
+    style: {
+      maxHeight: maxHeight
+    },
+    onScroll: handleScroll
+  }), /*#__PURE__*/React.createElement(S.ScrollbarWrapper, {
+    ref: wrapperRef,
+    loading: loading,
+    absolute: absolute
+  }, children)), /*#__PURE__*/React.createElement(S.ScrollbarTrackWrapper, null, /*#__PURE__*/React.createElement(S.TrackVertical, {
+    ref: scrollTrackRef,
+    onClick: handleTrackClick
+  }), /*#__PURE__*/React.createElement(S.ThumbVertical, {
+    ref: scrollThumbRef,
+    onMouseDown: handleThumbMousedown,
+    style: {
+      height: thumbHeight + "px"
+    }
+  })));
+};

package/dist/DnDScrollbar/DnDScrollbar.styles.d.ts

@@ -0,0 +1,12 @@
+export declare const ScrollbarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ScrollbarContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ScrollbarWrapper: import("styled-components").StyledComponent<"div", any, {
+    absolute?: boolean | undefined;
+    loading?: boolean | undefined;
+}, never>;
+export declare const ScrollbarTrackWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ThumbVertical: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TrackVertical: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Loader: import("styled-components").StyledComponent<"div", any, {
+    loading?: boolean | undefined;
+}, never>;

package/dist/DnDScrollbar/DnDScrollbar.styles.js

@@ -0,0 +1,40 @@
+import styled, { keyframes } from 'styled-components';
+export var ScrollbarContainer = styled.div.withConfig({
+  displayName: "DnDScrollbarstyles__ScrollbarContainer",
+  componentId: "sc-12t6y2d-0"
+})(["display:flex;height:100%;overflow:hidden;position:relative;"]);
+export var ScrollbarContent = styled.div.withConfig({
+  displayName: "DnDScrollbarstyles__ScrollbarContent",
+  componentId: "sc-12t6y2d-1"
+})(["-ms-overflow-style:none;overflow:auto;scrollbar-width:none;width:100%;&::-webkit-scrollbar{display:none;}"]);
+export var ScrollbarWrapper = styled.div.withConfig({
+  displayName: "DnDScrollbarstyles__ScrollbarWrapper",
+  componentId: "sc-12t6y2d-2"
+})(["padding-right:", ";& > *{opacity:", ";transition:all 0.25s ease-in-out;}"], function (props) {
+  return props.absolute ? '' : '11px !important';
+}, function (props) {
+  return props.loading ? '0.2' : '1';
+});
+export var ScrollbarTrackWrapper = styled.div.withConfig({
+  displayName: "DnDScrollbarstyles__ScrollbarTrackWrapper",
+  componentId: "sc-12t6y2d-3"
+})(["display:block;height:100%;position:absolute;width:11px;top:0;right:0;bottom:0;user-select:none;opacity:0.2;&:hover{opacity:0.6;}"]);
+export var ThumbVertical = styled.div.withConfig({
+  displayName: "DnDScrollbarstyles__ThumbVertical",
+  componentId: "sc-12t6y2d-4"
+})(["width:3px;background-color:#6a7580;border-radius:2px;right:4px;position:absolute;"]);
+export var TrackVertical = styled.div.withConfig({
+  displayName: "DnDScrollbarstyles__TrackVertical",
+  componentId: "sc-12t6y2d-5"
+})(["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;}"]);
+var spinnerAnimation = keyframes(["from{transform:rotateZ(0deg);}to{transform:rotateZ(360deg);}"]);
+export var Loader = styled.div.withConfig({
+  displayName: "DnDScrollbarstyles__Loader",
+  componentId: "sc-12t6y2d-6"
+})(["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) {
+  return props.loading ? '1' : '0';
+}, spinnerAnimation, function (props) {
+  return props.theme.palette['blue-600'];
+}, function (props) {
+  return props.theme.palette['blue-600'];
+});

package/dist/DnDScrollbar/index.d.ts

@@ -0,0 +1 @@
+export * from './DnDScrollbar';

package/dist/DnDScrollbar/index.js

@@ -0,0 +1 @@
+export * from './DnDScrollbar';

package/dist/Scrollbar.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import './style/index.less';
 import { ScrollbarProps } from './Scrollbar.types';
 declare const Scrollbar: React.ForwardRefExoticComponent<ScrollbarProps & React.RefAttributes<HTMLElement>>;
 export default Scrollbar;

package/dist/Scrollbar.js

@@ -1,75 +1,28 @@
+var _excluded = ["children", "loading", "withDnd", "fetchData"];
+
+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); }
+
+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; }
+
 import * as React from 'react';
-import PerfectScrollbar from 'react-perfect-scrollbar';
-import { useCombinedRefs } from '@synerise/ds-utils';
-import "./style/index.css";
 import Icon, { SpinnerM } from '@synerise/ds-icon';
 import * as S from './Scrollbar.styles';
+import { DnDScrollbar } from './DnDScrollbar';
+import { VirtualScrollbar } from './VirtualScrollbar';
 var Scrollbar = React.forwardRef(function (_ref, forwardedRef) {
-  var _ref$absolute = _ref.absolute,
-      absolute = _ref$absolute === void 0 ? false : _ref$absolute,
-      children = _ref.children,
-      classes = _ref.classes,
-      hasMore = _ref.hasMore,
+  var children = _ref.children,
       loading = _ref.loading,
-      maxHeight = _ref.maxHeight,
-      style = _ref.style,
+      withDnd = _ref.withDnd,
       fetchData = _ref.fetchData,
-      onScroll = _ref.onScroll,
-      onYReachEnd = _ref.onYReachEnd;
-  var scrollRef = React.useRef();
-  var combinedScrollRef = useCombinedRefs(forwardedRef, scrollRef);
-
-  var _React$useState = React.useState(0),
-      lastScrollTop = _React$useState[0],
-      setLastScrollTop = _React$useState[1];
-
-  var handleReachEnd = React.useCallback(function (container) {
-    var _combinedScrollRef$cu;
-
-    if ((combinedScrollRef == null ? void 0 : (_combinedScrollRef$cu = combinedScrollRef.current) == null ? void 0 : _combinedScrollRef$cu.scrollTop) === lastScrollTop) {
-      return;
-    }
-
-    combinedScrollRef.current && setLastScrollTop(combinedScrollRef.current.scrollTop);
-
-    if (typeof onYReachEnd === 'function') {
-      onYReachEnd(container);
-    }
-
-    if (!loading && hasMore && fetchData) {
-      fetchData();
-    }
-  }, [loading, hasMore, lastScrollTop, fetchData, onYReachEnd, combinedScrollRef]);
-  var handleScrollUp = React.useCallback(function () {
-    var _combinedScrollRef$cu2;
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-    if ((combinedScrollRef == null ? void 0 : (_combinedScrollRef$cu2 = combinedScrollRef.current) == null ? void 0 : _combinedScrollRef$cu2.scrollTop) !== 0) {
-      setLastScrollTop(0);
-    }
-  }, [combinedScrollRef]);
+  var Component = withDnd ? DnDScrollbar : VirtualScrollbar;
   var renderScrollbar = React.useMemo(function () {
-    return /*#__PURE__*/React.createElement(PerfectScrollbar, {
-      containerRef: function containerRef(ref) {
-        combinedScrollRef.current = ref;
-      } // workaround: https://github.com/goldenyz/react-perfect-scrollbar/issues/94#issuecomment-619131257
-      ,
-      onScroll: onScroll,
-      onScrollUp: handleScrollUp,
-      options: {
-        minScrollbarLength: 48
-      },
-      onYReachEnd: handleReachEnd
-    }, /*#__PURE__*/React.createElement(S.ScrollbarContent, {
-      className: classes,
-      style: {
-        maxHeight: maxHeight
-      }
-    }, /*#__PURE__*/React.createElement(S.ScrollbarWrapper, {
-      absolute: absolute,
-      loading: loading,
-      style: style
-    }, children)));
-  }, [onScroll, handleReachEnd, handleScrollUp, classes, maxHeight, absolute, loading, style, children, combinedScrollRef]);
+    return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+      fetchData: fetchData,
+      ref: forwardedRef
+    }), children);
+  }, [children, fetchData, forwardedRef, props]);
   return fetchData ? /*#__PURE__*/React.createElement(S.ScrollbarContainer, null, renderScrollbar, loading && /*#__PURE__*/React.createElement(S.Loader, {
     loading: loading
   }, /*#__PURE__*/React.createElement(Icon, {

package/dist/Scrollbar.styles.d.ts

@@ -1,9 +1,4 @@
-export declare const ScrollbarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ScrollbarContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ScrollbarWrapper: import("styled-components").StyledComponent<"div", any, {
-    absolute?: boolean | undefined;
-    loading?: boolean | undefined;
-}, never>;
 export declare const Loader: import("styled-components").StyledComponent<"div", any, {
     loading?: boolean | undefined;
 }, never>;
+export declare const ScrollbarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Scrollbar.styles.js

@@ -1,28 +1,16 @@
 import styled, { keyframes } from 'styled-components';
-export var ScrollbarContainer = styled.div.withConfig({
-  displayName: "Scrollbarstyles__ScrollbarContainer",
-  componentId: "rfwkf7-0"
-})(["position:relative;height:100%;"]);
-export var ScrollbarContent = styled.div.withConfig({
-  displayName: "Scrollbarstyles__ScrollbarContent",
-  componentId: "rfwkf7-1"
-})([""]);
-export var ScrollbarWrapper = styled.div.withConfig({
-  displayName: "Scrollbarstyles__ScrollbarWrapper",
-  componentId: "rfwkf7-2"
-})(["padding-right:", ";& > *{opacity:", ";transition:all 0.25s ease-in-out;}"], function (props) {
-  return props.absolute ? '' : '11px !important';
-}, function (props) {
-  return props.loading ? '0.2' : '1';
-});
 var spinnerAnimation = keyframes(["from{transform:rotateZ(0deg);}to{transform:rotateZ(360deg);}"]);
 export var Loader = styled.div.withConfig({
   displayName: "Scrollbarstyles__Loader",
-  componentId: "rfwkf7-3"
+  componentId: "rfwkf7-0"
 })(["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) {
   return props.loading ? '1' : '0';
 }, spinnerAnimation, function (props) {
   return props.theme.palette['blue-600'];
 }, function (props) {
   return props.theme.palette['blue-600'];
-});
+});
+export var ScrollbarContainer = styled.div.withConfig({
+  displayName: "Scrollbarstyles__ScrollbarContainer",
+  componentId: "rfwkf7-1"
+})(["position:relative;height:100%;"]);

package/dist/Scrollbar.types.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { ScrollBarProps } from 'react-perfect-scrollbar';
 export declare type ScrollbarProps = {
     absolute?: boolean;
     children: React.ReactNode | string;
@@ -10,5 +9,6 @@ export declare type ScrollbarProps = {
     style?: React.CSSProperties;
     fetchData?: () => void;
     onScroll?: (e: React.UIEvent) => void;
-    onYReachEnd?: ScrollBarProps['onYReachEnd'];
+    onYReachEnd?: () => void;
+    withDnd?: boolean;
 };

package/dist/VirtualScrollbar/VirtualScrollbar.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import './style/index.less';
+import { ScrollbarProps } from '../Scrollbar.types';
+export declare const VirtualScrollbar: React.ForwardRefExoticComponent<ScrollbarProps & React.RefAttributes<HTMLElement>>;

package/dist/VirtualScrollbar/VirtualScrollbar.js

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import PerfectScrollbar from 'react-perfect-scrollbar';
+import { useCombinedRefs } from '@synerise/ds-utils';
+import "./style/index.css";
+import * as S from './VirtualScrollbar.styles';
+// eslint-disable-next-line import/prefer-default-export
+export var VirtualScrollbar = React.forwardRef(function (_ref, forwardedRef) {
+  var _ref$absolute = _ref.absolute,
+      absolute = _ref$absolute === void 0 ? false : _ref$absolute,
+      children = _ref.children,
+      classes = _ref.classes,
+      hasMore = _ref.hasMore,
+      loading = _ref.loading,
+      maxHeight = _ref.maxHeight,
+      style = _ref.style,
+      fetchData = _ref.fetchData,
+      onScroll = _ref.onScroll,
+      onYReachEnd = _ref.onYReachEnd;
+  var scrollRef = React.useRef();
+  var combinedScrollRef = useCombinedRefs(forwardedRef, scrollRef);
+
+  var _React$useState = React.useState(0),
+      lastScrollTop = _React$useState[0],
+      setLastScrollTop = _React$useState[1];
+
+  var handleReachEnd = React.useCallback(function () {
+    var _combinedScrollRef$cu;
+
+    if ((combinedScrollRef == null ? void 0 : (_combinedScrollRef$cu = combinedScrollRef.current) == null ? void 0 : _combinedScrollRef$cu.scrollTop) === lastScrollTop) {
+      return;
+    }
+
+    combinedScrollRef.current && setLastScrollTop(combinedScrollRef.current.scrollTop);
+
+    if (typeof onYReachEnd === 'function') {
+      onYReachEnd();
+    }
+
+    if (!loading && hasMore && fetchData) {
+      fetchData();
+    }
+  }, [loading, hasMore, lastScrollTop, fetchData, onYReachEnd, combinedScrollRef]);
+  var handleScrollUp = React.useCallback(function () {
+    var _combinedScrollRef$cu2;
+
+    if ((combinedScrollRef == null ? void 0 : (_combinedScrollRef$cu2 = combinedScrollRef.current) == null ? void 0 : _combinedScrollRef$cu2.scrollTop) !== 0) {
+      setLastScrollTop(0);
+    }
+  }, [combinedScrollRef]);
+  return /*#__PURE__*/React.createElement(PerfectScrollbar, {
+    containerRef: function containerRef(ref) {
+      combinedScrollRef.current = ref;
+    } // workaround: https://github.com/goldenyz/react-perfect-scrollbar/issues/94#issuecomment-619131257
+    ,
+    onScroll: onScroll,
+    onScrollUp: handleScrollUp,
+    options: {
+      minScrollbarLength: 48
+    },
+    onYReachEnd: handleReachEnd
+  }, /*#__PURE__*/React.createElement(S.ScrollbarContent, {
+    className: classes,
+    style: {
+      maxHeight: maxHeight
+    },
+    "data-testid": "virtual-scrollbar"
+  }, /*#__PURE__*/React.createElement(S.ScrollbarWrapper, {
+    absolute: absolute,
+    loading: loading,
+    style: style
+  }, children)));
+});

package/dist/VirtualScrollbar/VirtualScrollbar.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const ScrollbarContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ScrollbarWrapper: import("styled-components").StyledComponent<"div", any, {
+    absolute?: boolean | undefined;
+    loading?: boolean | undefined;
+}, never>;

package/dist/VirtualScrollbar/VirtualScrollbar.styles.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+export var ScrollbarContent = styled.div.withConfig({
+  displayName: "VirtualScrollbarstyles__ScrollbarContent",
+  componentId: "hoiad9-0"
+})([""]);
+export var ScrollbarWrapper = styled.div.withConfig({
+  displayName: "VirtualScrollbarstyles__ScrollbarWrapper",
+  componentId: "hoiad9-1"
+})(["padding-right:", ";& > *{opacity:", ";transition:all 0.25s ease-in-out;}"], function (props) {
+  return props.absolute ? '' : '11px !important';
+}, function (props) {
+  return props.loading ? '0.2' : '1';
+});

package/dist/VirtualScrollbar/index.d.ts

@@ -0,0 +1 @@
+export * from './VirtualScrollbar';

package/dist/VirtualScrollbar/index.js

@@ -0,0 +1 @@
+export * from './VirtualScrollbar';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-scrollbar",
-  "version": "0.4.11",
+  "version": "0.5.0",
   "description": "Scrollbar UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -32,7 +32,7 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^0.49.0",
+    "@synerise/ds-icon": "^0.49.5",
     "react-perfect-scrollbar": "^1.5.8"
   },
   "peerDependencies": {
@@ -40,7 +40,8 @@
     "react": ">=16.9.0 < 17.0.0"
   },
   "devDependencies": {
-    "@synerise/ds-utils": "^0.19.0"
+    "@synerise/ds-utils": "^0.19.0",
+    "@types/resize-observer-browser": "^0.1.7"
   },
-  "gitHead": "1ff23a390382403be15699d1963ad8f6c26e5ba6"
+  "gitHead": "a95bdd142863a7e132acf2cc4bf66e247d06a26c"
 }