@synerise/ds-scrollbar 0.11.19 → 0.11.21

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.11.21](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@0.11.20...@synerise/ds-scrollbar@0.11.21) (2024-11-29)
+
+**Note:** Version bump only for package @synerise/ds-scrollbar
+
+
+
+
+
+## [0.11.20](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@0.11.19...@synerise/ds-scrollbar@0.11.20) (2024-11-28)
+
+**Note:** Version bump only for package @synerise/ds-scrollbar
+
+
+
+
+
 ## [0.11.19](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@0.11.18...@synerise/ds-scrollbar@0.11.19) (2024-11-21)
 
 **Note:** Version bump only for package @synerise/ds-scrollbar

package/dist/DnDScrollbar/DnDScrollbar.js

@@ -1,54 +1,44 @@
 var _excluded = ["children", "classes", "maxHeight", "absolute", "loading", "largeSize", "onScroll", "onYReachEnd", "fetchData", "hasMore", "confineScroll"];
-
 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); }
-
 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 React, { useRef, useState, useCallback, useEffect } 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,
-      largeSize = _ref.largeSize,
-      onScroll = _ref.onScroll,
-      onYReachEnd = _ref.onYReachEnd,
-      fetchData = _ref.fetchData,
-      hasMore = _ref.hasMore,
-      confineScroll = _ref.confineScroll,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    classes = _ref.classes,
+    maxHeight = _ref.maxHeight,
+    absolute = _ref.absolute,
+    loading = _ref.loading,
+    largeSize = _ref.largeSize,
+    onScroll = _ref.onScroll,
+    onYReachEnd = _ref.onYReachEnd,
+    fetchData = _ref.fetchData,
+    hasMore = _ref.hasMore,
+    confineScroll = _ref.confineScroll,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var contentRef = useRef(null);
   var wrapperRef = useRef(null);
   var scrollTrackRef = useRef(null);
   var scrollThumbRef = useRef(null);
   var observer = useRef(null);
-
   var _useState = useState(48),
-      thumbHeight = _useState[0],
-      setThumbHeight = _useState[1];
-
+    thumbHeight = _useState[0],
+    setThumbHeight = _useState[1];
   var _useState2 = useState(0),
-      scrollStartPosition = _useState2[0],
-      setScrollStartPosition = _useState2[1];
-
+    scrollStartPosition = _useState2[0],
+    setScrollStartPosition = _useState2[1];
   var _useState3 = useState(0),
-      initialScrollTop = _useState3[0],
-      setInitialScrollTop = _useState3[1];
-
+    initialScrollTop = _useState3[0],
+    setInitialScrollTop = _useState3[1];
   var _useState4 = useState(false),
-      isDragging = _useState4[0],
-      setIsDragging = _useState4[1];
-
+    isDragging = _useState4[0],
+    setIsDragging = _useState4[1];
   var handleTrackClick = useCallback(function (event) {
     event.preventDefault();
     event.stopPropagation();
     var trackCurrent = scrollTrackRef.current;
     var contentCurrent = contentRef.current;
-
     if (trackCurrent && contentCurrent) {
       var clientY = event.clientY;
       var target = event.target;
@@ -67,10 +57,9 @@ export var DnDScrollbar = function DnDScrollbar(_ref) {
     if (!contentRef.current || !scrollTrackRef.current || !scrollThumbRef.current) {
       return;
     }
-
     var _contentRef$current = contentRef.current,
-        contentTop = _contentRef$current.scrollTop,
-        contentHeight = _contentRef$current.scrollHeight;
+      contentTop = _contentRef$current.scrollTop,
+      contentHeight = _contentRef$current.scrollHeight;
     var trackHeight = scrollTrackRef.current.clientHeight;
     var newTop = +contentTop / +contentHeight * trackHeight;
     newTop = Math.min(newTop, trackHeight - thumbHeight);
@@ -85,18 +74,16 @@ export var DnDScrollbar = function DnDScrollbar(_ref) {
   }, []);
   var handleThumbMouseup = useCallback(function (event) {
     event.stopPropagation();
-
     if (isDragging) {
       setIsDragging(false);
     }
   }, [isDragging]);
   var handleThumbMousemove = useCallback(function (event) {
     event.stopPropagation();
-
     if (isDragging && contentRef.current !== null) {
       var _contentRef$current2 = contentRef.current,
-          contentScrollHeight = _contentRef$current2.scrollHeight,
-          contentOffsetHeight = _contentRef$current2.offsetHeight;
+        contentScrollHeight = _contentRef$current2.scrollHeight,
+        contentOffsetHeight = _contentRef$current2.offsetHeight;
       var deltaY = (event.clientY - scrollStartPosition) * (contentOffsetHeight / thumbHeight);
       contentRef.current.scrollTop = Math.min(initialScrollTop + deltaY, contentScrollHeight - contentOffsetHeight);
     }
@@ -104,25 +91,22 @@ export var DnDScrollbar = function DnDScrollbar(_ref) {
   var handleScroll = useCallback(function (event) {
     if (contentRef.current !== null) {
       var _contentRef$current3 = contentRef.current,
-          scrollHeight = _contentRef$current3.scrollHeight,
-          offsetHeight = _contentRef$current3.offsetHeight,
-          scrollTop = _contentRef$current3.scrollTop;
+        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(event);
   }, [fetchData, hasMore, onScroll, onYReachEnd]);
   var handleResize = useCallback(function (trackSize) {
     if (contentRef.current !== null) {
       var _contentRef$current4 = contentRef.current,
-          clientHeightContent = _contentRef$current4.clientHeight,
-          scrollHeightContent = _contentRef$current4.scrollHeight;
-
+        clientHeightContent = _contentRef$current4.clientHeight,
+        scrollHeightContent = _contentRef$current4.scrollHeight;
       if (clientHeightContent === scrollHeightContent) {
         setThumbHeight(0);
       } else {
@@ -131,19 +115,17 @@ export var DnDScrollbar = function DnDScrollbar(_ref) {
       }
     }
   }, [handleThumbPosition]);
-
   var handleWheel = function handleWheel(event) {
     if (confineScroll) {
       event.stopPropagation();
     }
   };
-
   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
-
+      var trackSize = scrollTrackRef.current.clientHeight;
+      // eslint-disable-next-line no-undef
       observer.current = new ResizeObserver(function () {
         handleResize(trackSize);
       });
@@ -153,11 +135,9 @@ export var DnDScrollbar = function DnDScrollbar(_ref) {
         if (observer.current !== null) {
           observer.current.unobserve(ref);
         }
-
         content.removeEventListener('scroll', handleThumbPosition);
       };
     }
-
     return undefined;
   }, [handleResize, handleThumbPosition]);
   useEffect(function () {

package/dist/DnDScrollbar/DnDScrollbar.styles.js

@@ -14,13 +14,11 @@ export var ScrollbarWrapper = styled.div.withConfig({
   if (props.absolute) {
     return '';
   }
-
   return props.largeSize ? '24px !important' : '11px !important';
 }, function (props) {
   if (props.absolute) {
     return '';
   }
-
   return props.largeSize ? '20px !important' : '11px !important';
 }, function (props) {
   return props.loading ? '0.2' : '1';

package/dist/Scrollbar.js

@@ -1,9 +1,6 @@
 var _excluded = ["children", "className", "loading", "withDnd", "fetchData"];
-
 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); }
-
 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 React from 'react';
 import Icon, { SpinnerM } from '@synerise/ds-icon';
 import { theme } from '@synerise/ds-core';
@@ -12,12 +9,11 @@ import { DnDScrollbar } from './DnDScrollbar';
 import { VirtualScrollbar } from './VirtualScrollbar';
 var Scrollbar = React.forwardRef(function (_ref, forwardedRef) {
   var children = _ref.children,
-      className = _ref.className,
-      loading = _ref.loading,
-      withDnd = _ref.withDnd,
-      fetchData = _ref.fetchData,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    className = _ref.className,
+    loading = _ref.loading,
+    withDnd = _ref.withDnd,
+    fetchData = _ref.fetchData,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var Component = withDnd ? DnDScrollbar : VirtualScrollbar;
   var scrollbar = /*#__PURE__*/React.createElement(Component, _extends({}, props, {
     fetchData: fetchData,

package/dist/VirtualScrollbar/VirtualScrollbar.js

@@ -1,13 +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); }
-
 import React, { useCallback, forwardRef, useRef, useEffect, useState } from 'react';
 import PerfectScrollbar from '@ofsajd/react-perfect-scrollbar';
 import { debounce } from 'lodash';
@@ -17,27 +12,25 @@ import * as S from './VirtualScrollbar.styles';
 // eslint-disable-next-line import/prefer-default-export
 export var VirtualScrollbar = 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,
-      largeSize = _ref.largeSize,
-      style = _ref.style,
-      fetchData = _ref.fetchData,
-      onScroll = _ref.onScroll,
-      scrollbarOptions = _ref.scrollbarOptions,
-      onYReachEnd = _ref.onYReachEnd,
-      confineScroll = _ref.confineScroll;
+    absolute = _ref$absolute === void 0 ? false : _ref$absolute,
+    children = _ref.children,
+    classes = _ref.classes,
+    hasMore = _ref.hasMore,
+    loading = _ref.loading,
+    maxHeight = _ref.maxHeight,
+    largeSize = _ref.largeSize,
+    style = _ref.style,
+    fetchData = _ref.fetchData,
+    onScroll = _ref.onScroll,
+    scrollbarOptions = _ref.scrollbarOptions,
+    onYReachEnd = _ref.onYReachEnd,
+    confineScroll = _ref.confineScroll;
   var scrollRef = useRef();
   var wrapperRef = useRef(null);
   var combinedScrollRef = useCombinedRefs(forwardedRef, scrollRef);
-
   var _useState = useState(0),
-      lastScrollTop = _useState[0],
-      setLastScrollTop = _useState[1];
-
+    lastScrollTop = _useState[0],
+    setLastScrollTop = _useState[1];
   var debouncedResize = useRef(debounce(function () {
     if (combinedScrollRef && combinedScrollRef.current) {
       var scrollEvent = new window.Event('scroll');
@@ -52,7 +45,6 @@ export var VirtualScrollbar = forwardRef(function (_ref, forwardedRef) {
     if (wrapperRef.current) {
       resizeObserver.observe(wrapperRef.current);
     }
-
     return function () {
       resizeObserver.disconnect();
       debouncedResize.cancel();
@@ -60,24 +52,19 @@ export var VirtualScrollbar = forwardRef(function (_ref, forwardedRef) {
   }, [resizeObserver, debouncedResize]);
   var handleReachEnd = useCallback(function () {
     var _combinedScrollRef$cu;
-
     if ((combinedScrollRef == null || (_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 = useCallback(function () {
     var _combinedScrollRef$cu2;
-
     if ((combinedScrollRef == null || (_combinedScrollRef$cu2 = combinedScrollRef.current) == null ? void 0 : _combinedScrollRef$cu2.scrollTop) !== 0) {
       setLastScrollTop(0);
     }
@@ -86,7 +73,6 @@ export var VirtualScrollbar = forwardRef(function (_ref, forwardedRef) {
     var handleWheel = confineScroll && function (event) {
       event.preventDefault();
     };
-
     var wrapper = wrapperRef.current;
     wrapper && handleWheel && wrapper.addEventListener('wheel', handleWheel);
     return function () {

package/dist/VirtualScrollbar/VirtualScrollbar.styles.js

@@ -10,13 +10,11 @@ export var ScrollbarWrapper = styled.div.withConfig({
   if (props.absolute) {
     return '';
   }
-
   return props.largeSize ? '24px !important' : '11px !important';
 }, function (props) {
   if (props.absolute) {
     return '';
   }
-
   return props.largeSize ? '20px !important' : '11px !important';
 }, function (props) {
   return props.loading ? '0.2' : '1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-scrollbar",
-  "version": "0.11.19",
+  "version": "0.11.21",
   "description": "Scrollbar UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,7 +35,7 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@ofsajd/react-perfect-scrollbar": "1.0.0",
-    "@synerise/ds-icon": "^0.67.0",
+    "@synerise/ds-icon": "^0.68.0",
     "@synerise/ds-utils": "^0.31.2",
     "lodash": "^4.7.21"
   },
@@ -44,5 +44,5 @@
     "react": ">=16.9.0 <= 17.0.2",
     "styled-components": "5.0.1"
   },
-  "gitHead": "05f083c767e2cec3c2f91c9475aee89852a77d6c"
+  "gitHead": "9ebd107163650754a5f55680d62d30812d740084"
 }