@synerise/ds-scrollbar 0.11.24 → 0.12.1

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.12.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@0.12.0...@synerise/ds-scrollbar@0.12.1) (2025-02-14)
+
+**Note:** Version bump only for package @synerise/ds-scrollbar
+
+
+
+
+
+# [0.12.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@0.11.24...@synerise/ds-scrollbar@0.12.0) (2025-01-29)
+
+
+### Features
+
+* antd@4.24 react@18 ([d97a667](https://github.com/Synerise/synerise-design/commit/d97a667b1f33aed3177e1851de3b6f60be2d46a6))
+
+
+
+
+
 ## [0.11.24](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@0.11.23...@synerise/ds-scrollbar@0.11.24) (2025-01-21)
 
 **Note:** Version bump only for package @synerise/ds-scrollbar

package/dist/Scrollbar.js

@@ -15,13 +15,12 @@ var Scrollbar = React.forwardRef(function (_ref, forwardedRef) {
     fetchData = _ref.fetchData,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var Component = withDnd ? DnDScrollbar : VirtualScrollbar;
-  var scrollbar = /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-    fetchData: fetchData,
-    ref: forwardedRef
-  }), children);
   return /*#__PURE__*/React.createElement(S.ScrollbarContainer, {
     className: className
-  }, scrollbar, loading && /*#__PURE__*/React.createElement(S.LoaderWrapper, null, /*#__PURE__*/React.createElement(S.Loader, {
+  }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+    fetchData: fetchData,
+    ref: forwardedRef
+  }), children), 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/VirtualScrollbar/VirtualScrollbar.js

@@ -1,12 +1,8 @@
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 import React, { useCallback, forwardRef, useRef, useEffect, useState } from 'react';
 import PerfectScrollbar from '@ofsajd/react-perfect-scrollbar';
-import { debounce } from 'lodash';
-import { useCombinedRefs } from '@synerise/ds-utils';
+// import { debounce } from 'lodash';
+import { useCombinedRefs, useResizeObserver } from '@synerise/ds-utils';
 import "./style/index.css";
 import * as S from './VirtualScrollbar.styles';
 // eslint-disable-next-line import/prefer-default-export
@@ -31,25 +27,17 @@ export var VirtualScrollbar = forwardRef(function (_ref, forwardedRef) {
   var _useState = useState(0),
     lastScrollTop = _useState[0],
     setLastScrollTop = _useState[1];
-  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 ResizeObserver(debouncedResize)).current;
+  var _useResizeObserver = useResizeObserver(wrapperRef),
+    height = _useResizeObserver.height,
+    width = _useResizeObserver.width;
+  var triggerScrollbarGeometryUpdate = useCallback(function () {
+    var scrollEvent = new window.Event('scroll');
+    wrapperRef.current && wrapperRef.current.dispatchEvent(scrollEvent);
+    combinedScrollRef.current && combinedScrollRef.current.dispatchEvent(scrollEvent);
+  }, [combinedScrollRef]);
   useEffect(function () {
-    if (wrapperRef.current) {
-      resizeObserver.observe(wrapperRef.current);
-    }
-    return function () {
-      resizeObserver.disconnect();
-      debouncedResize.cancel();
-    };
-  }, [resizeObserver, debouncedResize]);
+    triggerScrollbarGeometryUpdate();
+  }, [height, width, triggerScrollbarGeometryUpdate]);
   var handleReachEnd = useCallback(function () {
     var _combinedScrollRef$cu;
     if ((combinedScrollRef == null || (_combinedScrollRef$cu = combinedScrollRef.current) == null ? void 0 : _combinedScrollRef$cu.scrollTop) === lastScrollTop) {
@@ -79,6 +67,20 @@ export var VirtualScrollbar = forwardRef(function (_ref, forwardedRef) {
       wrapper && handleWheel && wrapper.removeEventListener('wheel', handleWheel);
     };
   }, [confineScroll]);
+  useEffect(function () {
+    var endHandler = function endHandler(_ref2) {
+      var target = _ref2.target;
+      if (target instanceof HTMLElement && combinedScrollRef.current && target.contains(combinedScrollRef.current)) {
+        triggerScrollbarGeometryUpdate();
+      }
+    };
+    document.body.addEventListener('transitionend', endHandler);
+    document.body.addEventListener('animationend', endHandler);
+    return function () {
+      document.body.removeEventListener('transitionend', endHandler);
+      document.body.removeEventListener('animationend', endHandler);
+    };
+  });
   return /*#__PURE__*/React.createElement(PerfectScrollbar, {
     containerRef: function containerRef(ref) {
       combinedScrollRef.current = ref;
@@ -86,7 +88,7 @@ export var VirtualScrollbar = forwardRef(function (_ref, forwardedRef) {
     ,
     onScroll: onScroll,
     onScrollUp: handleScrollUp,
-    options: _objectSpread({}, scrollbarOptions, {
+    options: _extends({}, scrollbarOptions, {
       minScrollbarLength: 48
     }),
     onYReachEnd: handleReachEnd,

package/dist/VirtualScrollbar/style/index.css

@@ -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{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{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}
+@import '~@ofsajd/react-perfect-scrollbar/dist/css/styles.css';.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}

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-scrollbar",
-  "version": "0.11.24",
+  "version": "0.12.1",
   "description": "Scrollbar UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,14 +35,14 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@ofsajd/react-perfect-scrollbar": "1.0.0",
-    "@synerise/ds-icon": "^0.70.0",
-    "@synerise/ds-utils": "^0.31.2",
+    "@synerise/ds-icon": "^0.71.1",
+    "@synerise/ds-utils": "^0.32.1",
     "lodash": "^4.7.21"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
-    "react": ">=16.9.0 <= 17.0.2",
-    "styled-components": "5.0.1"
+    "react": ">=16.9.0 <= 18.3.1",
+    "styled-components": "^5.3.3"
   },
-  "gitHead": "56e23cda61b7ddfe7da4669307183b105a500e1a"
+  "gitHead": "38cb22e1c46d175306dd87e10649410eb93a4e44"
 }