@synerise/ds-scrollbar 0.6.6 → 0.6.8

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.6.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@0.6.7...@synerise/ds-scrollbar@0.6.8) (2023-10-02)
+
+
+### Bug Fixes
+
+* **scrollbar:** fixed toggling rail visibility on resize ([8df2258](https://github.com/Synerise/synerise-design/commit/8df2258d9f9ae8837510f4ddd6786c3018bdf96a))
+
+
+
+
+
+## [0.6.7](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@0.6.6...@synerise/ds-scrollbar@0.6.7) (2023-09-26)
+
+**Note:** Version bump only for package @synerise/ds-scrollbar
+
+
+
+
+
 ## [0.6.6](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@0.6.5...@synerise/ds-scrollbar@0.6.6) (2023-09-05)
 
 **Note:** Version bump only for package @synerise/ds-scrollbar

package/dist/Scrollbar.js

@@ -18,13 +18,11 @@ var Scrollbar = React.forwardRef(function (_ref, forwardedRef) {
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var Component = withDnd ? DnDScrollbar : VirtualScrollbar;
-  var renderScrollbar = React.useMemo(function () {
-    return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-      fetchData: fetchData,
-      ref: forwardedRef
-    }), children);
-  }, [children, fetchData, forwardedRef, props]);
-  return /*#__PURE__*/React.createElement(S.ScrollbarContainer, null, renderScrollbar, loading && /*#__PURE__*/React.createElement(S.LoaderWrapper, null, /*#__PURE__*/React.createElement(S.Loader, {
+  var scrollbar = /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+    fetchData: fetchData,
+    ref: forwardedRef
+  }), children);
+  return /*#__PURE__*/React.createElement(S.ScrollbarContainer, null, scrollbar, loading && /*#__PURE__*/React.createElement(S.LoaderWrapper, null, /*#__PURE__*/React.createElement(S.Loader, {
     loading: loading
   }, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(SpinnerM, null),

package/dist/Scrollbar.types.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare type ScrollbarAdditionalProps = {
+export type ScrollbarAdditionalProps = {
     absolute?: boolean;
     classes?: string;
     hasMore?: boolean;
@@ -11,6 +11,6 @@ export declare type ScrollbarAdditionalProps = {
     onYReachEnd?: () => void;
     withDnd?: boolean;
 };
-export declare type ScrollbarProps = ScrollbarAdditionalProps & {
+export type ScrollbarProps = ScrollbarAdditionalProps & {
     children: React.ReactNode | string;
 };

package/dist/VirtualScrollbar/VirtualScrollbar.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import './style/index.less';
 export declare const VirtualScrollbar: React.ForwardRefExoticComponent<import("../Scrollbar.types").ScrollbarAdditionalProps & {
     children: React.ReactNode;

package/dist/VirtualScrollbar/VirtualScrollbar.js

@@ -1,10 +1,11 @@
-import * as React from 'react';
+import React, { useCallback, forwardRef, useRef, useEffect, useState } from 'react';
 import PerfectScrollbar from 'react-perfect-scrollbar';
+import { debounce } from 'lodash';
 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) {
+export var VirtualScrollbar = forwardRef(function (_ref, forwardedRef) {
   var _ref$absolute = _ref.absolute,
       absolute = _ref$absolute === void 0 ? false : _ref$absolute,
       children = _ref.children,
@@ -16,14 +17,35 @@ export var VirtualScrollbar = React.forwardRef(function (_ref, forwardedRef) {
       fetchData = _ref.fetchData,
       onScroll = _ref.onScroll,
       onYReachEnd = _ref.onYReachEnd;
-  var scrollRef = React.useRef();
+  var scrollRef = useRef();
+  var wrapperRef = useRef(null);
   var combinedScrollRef = useCombinedRefs(forwardedRef, scrollRef);
 
-  var _React$useState = React.useState(0),
-      lastScrollTop = _React$useState[0],
-      setLastScrollTop = _React$useState[1];
+  var _useState = useState(0),
+      lastScrollTop = _useState[0],
+      setLastScrollTop = _useState[1];
 
-  var handleReachEnd = React.useCallback(function () {
+  var debouncedResize = useRef(debounce(function () {
+    if (combinedScrollRef && combinedScrollRef.current) {
+      var scrollEvent = new window.Event('scroll');
+      combinedScrollRef.current.dispatchEvent(scrollEvent);
+    }
+  }, 100, {
+    leading: true,
+    trailing: true
+  })).current;
+  var resizeObserver = useRef(new window.ResizeObserver(debouncedResize)).current;
+  useEffect(function () {
+    if (wrapperRef.current) {
+      resizeObserver.observe(wrapperRef.current);
+    }
+
+    return function () {
+      resizeObserver.disconnect();
+      debouncedResize.cancel();
+    };
+  }, [resizeObserver, debouncedResize]);
+  var handleReachEnd = useCallback(function () {
     var _combinedScrollRef$cu;
 
     if ((combinedScrollRef == null ? void 0 : (_combinedScrollRef$cu = combinedScrollRef.current) == null ? void 0 : _combinedScrollRef$cu.scrollTop) === lastScrollTop) {
@@ -40,7 +62,7 @@ export var VirtualScrollbar = React.forwardRef(function (_ref, forwardedRef) {
       fetchData();
     }
   }, [loading, hasMore, lastScrollTop, fetchData, onYReachEnd, combinedScrollRef]);
-  var handleScrollUp = React.useCallback(function () {
+  var handleScrollUp = useCallback(function () {
     var _combinedScrollRef$cu2;
 
     if ((combinedScrollRef == null ? void 0 : (_combinedScrollRef$cu2 = combinedScrollRef.current) == null ? void 0 : _combinedScrollRef$cu2.scrollTop) !== 0) {
@@ -65,6 +87,7 @@ export var VirtualScrollbar = React.forwardRef(function (_ref, forwardedRef) {
     },
     "data-testid": "virtual-scrollbar"
   }, /*#__PURE__*/React.createElement(S.ScrollbarWrapper, {
+    ref: wrapperRef,
     absolute: absolute,
     loading: loading,
     style: style

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-scrollbar",
-  "version": "0.6.6",
+  "version": "0.6.8",
   "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.58.1",
+    "@synerise/ds-icon": "^0.58.3",
     "react-perfect-scrollbar": "^1.5.8"
   },
   "peerDependencies": {
@@ -41,9 +41,9 @@
     "styled-components": "5.0.1"
   },
   "devDependencies": {
-    "@synerise/ds-utils": "^0.24.15",
+    "@synerise/ds-utils": "^0.24.17",
     "@testing-library/jest-dom": "5.1.1",
     "@types/resize-observer-browser": "^0.1.7"
   },
-  "gitHead": "a2b1a3a78d87edfdbe97ae2f66573f4736f30e8b"
+  "gitHead": "1c1adf344f447e404a1d6320ad1d3f8486f29f67"
 }