@synerise/ds-scrollbar 1.2.16 → 1.2.18

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.18](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@1.2.17...@synerise/ds-scrollbar@1.2.18) (2026-04-01)
+
+**Note:** Version bump only for package @synerise/ds-scrollbar
+
+## [1.2.17](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@1.2.16...@synerise/ds-scrollbar@1.2.17) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-scrollbar
+
 ## [1.2.16](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@1.2.15...@synerise/ds-scrollbar@1.2.16) (2026-03-20)
 
 **Note:** Version bump only for package @synerise/ds-scrollbar

package/dist/DnDScrollbar/DnDScrollbar.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-import { type ScrollbarProps } from '../Scrollbar.types';
+import { default as React } from 'react';
+import { ScrollbarProps } from '../Scrollbar.types';
 export declare const DnDScrollbar: ({ children, classes, maxHeight, absolute, loading, largeSize, onScroll, onYReachEnd, fetchData, hasMore, confineScroll, ...props }: ScrollbarProps) => React.JSX.Element;

package/dist/DnDScrollbar/DnDScrollbar.js

@@ -1,71 +1,71 @@
-var _excluded = ["children", "classes", "maxHeight", "absolute", "loading", "largeSize", "onScroll", "onYReachEnd", "fetchData", "hasMore", "confineScroll"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import * as S from './DnDScrollbar.styles';
-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);
-  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];
-  var _useState2 = useState(0),
-    scrollStartPosition = _useState2[0],
-    setScrollStartPosition = _useState2[1];
-  var _useState3 = useState(0),
-    initialScrollTop = _useState3[0],
-    setInitialScrollTop = _useState3[1];
-  var _useState4 = useState(false),
-    isDragging = _useState4[0],
-    setIsDragging = _useState4[1];
-  var handleTrackClick = useCallback(function (event) {
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useEffect } from "react";
+import { ScrollbarContainer, ScrollbarContent, ScrollbarWrapper, ScrollbarTrackWrapper, TrackVertical, ThumbVertical } from "./DnDScrollbar.styles.js";
+const DnDScrollbar = ({
+  children,
+  classes,
+  maxHeight,
+  absolute,
+  loading,
+  largeSize,
+  onScroll,
+  onYReachEnd,
+  fetchData,
+  hasMore,
+  confineScroll,
+  ...props
+}) => {
+  const contentRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const scrollTrackRef = useRef(null);
+  const scrollThumbRef = useRef(null);
+  const observer = useRef(null);
+  const [thumbHeight, setThumbHeight] = useState(48);
+  const [scrollStartPosition, setScrollStartPosition] = useState(0);
+  const [initialScrollTop, setInitialScrollTop] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const handleTrackClick = useCallback((event) => {
     event.preventDefault();
     event.stopPropagation();
-    var trackCurrent = scrollTrackRef.current;
-    var contentCurrent = contentRef.current;
+    const {
+      current: trackCurrent
+    } = scrollTrackRef;
+    const {
+      current: contentCurrent
+    } = contentRef;
     if (trackCurrent && contentCurrent) {
-      var clientY = event.clientY;
-      var target = event.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);
+      const {
+        clientY
+      } = event;
+      const target = event.target;
+      const rect = target.getBoundingClientRect();
+      const trackTop = rect.top;
+      const thumbOffset = -(thumbHeight / 2);
+      const clickRatio = (clientY - trackTop + thumbOffset) / trackCurrent.clientHeight;
+      const scrollAmount = Math.floor(clickRatio * contentCurrent.scrollHeight);
       contentCurrent.scrollTo({
         top: scrollAmount,
-        behavior: 'smooth'
+        behavior: "smooth"
       });
     }
   }, [thumbHeight]);
-  var handleThumbPosition = useCallback(function () {
+  const handleThumbPosition = useCallback(() => {
     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;
+    const {
+      scrollTop: contentTop,
+      scrollHeight: contentHeight
+    } = contentRef.current;
+    const {
+      clientHeight: trackHeight
+    } = scrollTrackRef.current;
+    let newTop = +contentTop / +contentHeight * trackHeight;
     newTop = Math.min(newTop, trackHeight - thumbHeight);
-    var thumb = scrollThumbRef.current;
-    thumb.style.top = newTop + "px";
+    const thumb = scrollThumbRef.current;
+    thumb.style.top = `${newTop}px`;
   }, [thumbHeight]);
-  var handleThumbMousedown = useCallback(function (event) {
+  const handleThumbMousedown = useCallback((event) => {
     event.stopPropagation();
     setScrollStartPosition(event.clientY);
     if (contentRef.current) {
@@ -73,29 +73,31 @@ export var DnDScrollbar = function DnDScrollbar(_ref) {
     }
     setIsDragging(true);
   }, []);
-  var handleThumbMouseup = useCallback(function (event) {
+  const handleThumbMouseup = useCallback((event) => {
     event.stopPropagation();
     if (isDragging) {
       setIsDragging(false);
     }
   }, [isDragging]);
-  var handleThumbMousemove = useCallback(function (event) {
+  const handleThumbMousemove = useCallback((event) => {
     event.stopPropagation();
     if (isDragging && contentRef.current !== null) {
-      var _contentRef$current2 = contentRef.current,
-        contentScrollHeight = _contentRef$current2.scrollHeight,
-        contentOffsetHeight = _contentRef$current2.offsetHeight;
-      var deltaY = (event.clientY - scrollStartPosition) * (contentOffsetHeight / thumbHeight);
+      const {
+        scrollHeight: contentScrollHeight,
+        offsetHeight: contentOffsetHeight
+      } = contentRef.current;
+      const deltaY = (event.clientY - scrollStartPosition) * (contentOffsetHeight / thumbHeight);
       contentRef.current.scrollTop = Math.min(initialScrollTop + deltaY, contentScrollHeight - contentOffsetHeight);
     }
   }, [initialScrollTop, isDragging, scrollStartPosition, thumbHeight]);
-  var handleScroll = useCallback(function (event) {
+  const handleScroll = useCallback((event) => {
     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;
+      const {
+        scrollHeight,
+        offsetHeight,
+        scrollTop
+      } = contentRef.current;
+      const progress = Math.round((scrollTop + offsetHeight) / scrollHeight * 100) / 100;
       if (progress === 1 && hasMore) {
         onYReachEnd && onYReachEnd();
         fetchData && fetchData();
@@ -103,11 +105,12 @@ export var DnDScrollbar = function DnDScrollbar(_ref) {
     }
     onScroll && onScroll(event);
   }, [fetchData, hasMore, onScroll, onYReachEnd]);
-  var handleResize = useCallback(function (trackSize) {
+  const handleResize = useCallback((trackSize) => {
     if (contentRef.current !== null) {
-      var _contentRef$current4 = contentRef.current,
-        clientHeightContent = _contentRef$current4.clientHeight,
-        scrollHeightContent = _contentRef$current4.scrollHeight;
+      const {
+        clientHeight: clientHeightContent,
+        scrollHeight: scrollHeightContent
+      } = contentRef.current;
       if (clientHeightContent === scrollHeightContent) {
         setThumbHeight(0);
       } else {
@@ -116,65 +119,54 @@ export var DnDScrollbar = function DnDScrollbar(_ref) {
       }
     }
   }, [handleThumbPosition]);
-  var handleWheel = function handleWheel(event) {
+  const handleWheel = (event) => {
     if (confineScroll) {
       event.stopPropagation();
     }
   };
-  useEffect(function () {
+  useEffect(() => {
     if (contentRef.current !== null && scrollTrackRef.current !== null && wrapperRef.current !== null) {
-      var ref = wrapperRef.current;
-      var content = contentRef.current;
-      var trackSize = scrollTrackRef.current.clientHeight;
-      observer.current = new ResizeObserver(function () {
+      const ref = wrapperRef.current;
+      const content = contentRef.current;
+      const {
+        clientHeight: trackSize
+      } = scrollTrackRef.current;
+      observer.current = new ResizeObserver(() => {
         handleResize(trackSize);
       });
       observer.current.observe(ref);
-      content.addEventListener('scroll', handleThumbPosition);
-      return function () {
+      content.addEventListener("scroll", handleThumbPosition);
+      return () => {
         if (observer.current !== null) {
           observer.current.unobserve(ref);
         }
-        content.removeEventListener('scroll', handleThumbPosition);
+        content.removeEventListener("scroll", handleThumbPosition);
       };
     }
-    return undefined;
+    return void 0;
   }, [handleResize, handleThumbPosition]);
-  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);
+  useEffect(() => {
+    document.addEventListener("mousemove", handleThumbMousemove);
+    document.addEventListener("mouseup", handleThumbMouseup);
+    document.addEventListener("mouseleave", handleThumbMouseup);
+    return () => {
+      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,
-    onWheel: handleWheel
-  }), /*#__PURE__*/React.createElement(S.ScrollbarWrapper, {
-    ref: wrapperRef,
-    loading: loading,
-    absolute: absolute,
-    largeSize: largeSize
-  }, children)), /*#__PURE__*/React.createElement(S.ScrollbarTrackWrapper, {
-    largeSize: largeSize
-  }, /*#__PURE__*/React.createElement(S.TrackVertical, {
-    ref: scrollTrackRef,
-    onClick: handleTrackClick
-  }), /*#__PURE__*/React.createElement(S.ThumbVertical, {
-    ref: scrollThumbRef,
-    onMouseDown: handleThumbMousedown,
-    style: {
-      height: thumbHeight + "px"
-    }
-  })));
-};
+  return /* @__PURE__ */ jsxs(ScrollbarContainer, { "data-testid": "dnd-scrollbar", children: [
+    /* @__PURE__ */ jsx(ScrollbarContent, { ref: contentRef, ...props, style: {
+      maxHeight
+    }, onScroll: handleScroll, onWheel: handleWheel, children: /* @__PURE__ */ jsx(ScrollbarWrapper, { ref: wrapperRef, loading, absolute, largeSize, children }) }),
+    /* @__PURE__ */ jsxs(ScrollbarTrackWrapper, { largeSize, children: [
+      /* @__PURE__ */ jsx(TrackVertical, { ref: scrollTrackRef, onClick: handleTrackClick }),
+      /* @__PURE__ */ jsx(ThumbVertical, { ref: scrollThumbRef, onMouseDown: handleThumbMousedown, style: {
+        height: `${thumbHeight}px`
+      } })
+    ] })
+  ] });
+};
+export {
+  DnDScrollbar
+};

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

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

package/dist/DnDScrollbar/DnDScrollbar.styles.js

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

package/dist/DnDScrollbar/index.js

@@ -1 +1,4 @@
-export * from './DnDScrollbar';
+import { DnDScrollbar } from "./DnDScrollbar.js";
+export {
+  DnDScrollbar
+};

package/dist/Scrollbar.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type ScrollbarProps, type VirtualScrollbarProps } from './Scrollbar.types';
+import { default as React } from 'react';
+import { ScrollbarProps, VirtualScrollbarProps } from './Scrollbar.types';
 declare const Scrollbar: React.ForwardRefExoticComponent<(ScrollbarProps | VirtualScrollbarProps) & React.RefAttributes<HTMLElement>>;
 export default Scrollbar;

package/dist/Scrollbar.js

@@ -1,31 +1,25 @@
-var _excluded = ["children", "className", "loading", "withDnd", "fetchData"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { forwardRef } from 'react';
-import { useTheme } from '@synerise/ds-core';
-import Icon, { SpinnerM } from '@synerise/ds-icon';
-import { DnDScrollbar } from './DnDScrollbar';
-import * as S from './Scrollbar.styles';
-import { VirtualScrollbar } from './VirtualScrollbar';
-var Scrollbar = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
-  var children = _ref.children,
-    className = _ref.className,
-    loading = _ref.loading,
-    withDnd = _ref.withDnd,
-    fetchData = _ref.fetchData,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var theme = useTheme();
-  var Component = withDnd ? DnDScrollbar : VirtualScrollbar;
-  return /*#__PURE__*/React.createElement(S.ScrollbarContainer, {
-    className: className
-  }, /*#__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),
-    color: theme.palette['grey-600']
-  }))));
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useTheme } from "@synerise/ds-core";
+import Icon, { SpinnerM } from "@synerise/ds-icon";
+import { DnDScrollbar } from "./DnDScrollbar/DnDScrollbar.js";
+import { ScrollbarContainer, LoaderWrapper, Loader } from "./Scrollbar.styles.js";
+import { VirtualScrollbar } from "./VirtualScrollbar/VirtualScrollbar.js";
+const Scrollbar = forwardRef(({
+  children,
+  className,
+  loading,
+  withDnd,
+  fetchData,
+  ...props
+}, forwardedRef) => {
+  const theme = useTheme();
+  const Component = withDnd ? DnDScrollbar : VirtualScrollbar;
+  return /* @__PURE__ */ jsxs(ScrollbarContainer, { className, children: [
+    /* @__PURE__ */ jsx(Component, { ...props, fetchData, ref: forwardedRef, children }),
+    loading && /* @__PURE__ */ jsx(LoaderWrapper, { children: /* @__PURE__ */ jsx(Loader, { loading, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SpinnerM, {}), color: theme.palette["grey-600"] }) }) })
+  ] });
 });
-export default Scrollbar;
+export {
+  Scrollbar as default
+};

package/dist/Scrollbar.styles.d.ts

@@ -1,5 +1,5 @@
-export declare const Loader: import("styled-components").StyledComponent<"div", any, {
+export declare const Loader: import('styled-components').StyledComponent<"div", any, {
     loading?: boolean;
 }, never>;
-export declare const LoaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ScrollbarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LoaderWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ScrollbarContainer: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/Scrollbar.styles.js

@@ -1,20 +1,19 @@
-import styled, { keyframes } from 'styled-components';
-var spinnerAnimation = keyframes(["from{transform:rotateZ(0deg);}to{transform:rotateZ(360deg);}"]);
-export var Loader = styled.div.withConfig({
+import styled, { keyframes } from "styled-components";
+const spinnerAnimation = /* @__PURE__ */ keyframes(["from{transform:rotateZ(0deg);}to{transform:rotateZ(360deg);}"]);
+const Loader = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Scrollbarstyles__Loader",
   componentId: "sc-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['grey-600'];
-}, function (props) {
-  return props.theme.palette['grey-600'];
-});
-export var LoaderWrapper = styled.div.withConfig({
+})(["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:", ";}"], (props) => props.loading ? "1" : "0", spinnerAnimation, (props) => props.theme.palette["grey-600"], (props) => props.theme.palette["grey-600"]);
+const LoaderWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Scrollbarstyles__LoaderWrapper",
   componentId: "sc-rfwkf7-1"
 })(["width:100%;height:100%;bottom:0;left:0;position:absolute;background-color:rgba(255,255,255,0.6);"]);
-export var ScrollbarContainer = styled.div.withConfig({
+const ScrollbarContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Scrollbarstyles__ScrollbarContainer",
   componentId: "sc-rfwkf7-2"
-})(["position:relative;height:100%;"]);
+})(["position:relative;height:100%;"]);
+export {
+  Loader,
+  LoaderWrapper,
+  ScrollbarContainer
+};

package/dist/Scrollbar.types.d.ts

@@ -1,5 +1,5 @@
-import { type CSSProperties, type ReactNode, type UIEvent } from 'react';
-import { type ScrollBarProps } from '@ofsajd/react-perfect-scrollbar';
+import { CSSProperties, ReactNode, UIEvent } from 'react';
+import { ScrollBarProps } from '@ofsajd/react-perfect-scrollbar';
 export type ScrollbarAdditionalProps = {
     absolute?: boolean;
     classes?: string;

package/dist/Scrollbar.types.js

@@ -1 +1 @@
-export {};
+

package/dist/VirtualScrollbar/VirtualScrollbar.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
-import '../style/index.less';
-export declare const VirtualScrollbar: React.ForwardRefExoticComponent<import("../Scrollbar.types").ScrollbarAdditionalProps & {
+import { default as React } from 'react';
+export declare const VirtualScrollbar: React.ForwardRefExoticComponent<import('../Scrollbar.types').ScrollbarAdditionalProps & {
     children?: React.ReactNode;
 } & {
-    scrollbarOptions?: import("@ofsajd/react-perfect-scrollbar").ScrollBarProps["options"];
+    scrollbarOptions?: import('@ofsajd/react-perfect-scrollbar').ScrollBarProps["options"];
 } & React.RefAttributes<HTMLElement>>;

package/dist/VirtualScrollbar/VirtualScrollbar.js

@@ -1,111 +1,106 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import classnames from 'classnames';
-import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
-import PerfectScrollbar from '@ofsajd/react-perfect-scrollbar';
-import { useCombinedRefs, useResizeObserver } from '@synerise/ds-utils';
-import "../style/index.css";
-import * as S from './VirtualScrollbar.styles';
-export var VirtualScrollbar = /*#__PURE__*/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;
-  var scrollRef = useRef();
-  var wrapperRef = useRef(null);
-  var combinedScrollRef = useCombinedRefs(forwardedRef, scrollRef);
-  var _useState = useState(0),
-    lastScrollTop = _useState[0],
-    setLastScrollTop = _useState[1];
-  var _useResizeObserver = useResizeObserver(wrapperRef),
-    height = _useResizeObserver.height,
-    width = _useResizeObserver.width;
-  var triggerScrollbarGeometryUpdate = useCallback(function () {
-    var scrollEvent = new window.Event('scroll');
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef, useRef, useState, useCallback, useEffect } from "react";
+import PerfectScrollbar from "@ofsajd/react-perfect-scrollbar";
+import { useCombinedRefs, useResizeObserver } from "@synerise/ds-utils";
+import { ScrollbarContent, ScrollbarWrapper } from "./VirtualScrollbar.styles.js";
+import "./../style/index.css";
+const VirtualScrollbar = forwardRef(({
+  absolute = false,
+  children,
+  classes,
+  hasMore,
+  loading,
+  maxHeight,
+  largeSize,
+  style,
+  fetchData,
+  onScroll,
+  scrollbarOptions,
+  onYReachEnd,
+  confineScroll
+}, forwardedRef) => {
+  const scrollRef = useRef();
+  const wrapperRef = useRef(null);
+  const combinedScrollRef = useCombinedRefs(forwardedRef, scrollRef);
+  const [lastScrollTop, setLastScrollTop] = useState(0);
+  const {
+    height,
+    width
+  } = useResizeObserver(wrapperRef);
+  const triggerScrollbarGeometryUpdate = useCallback(() => {
+    const scrollEvent = new window.Event("scroll");
     wrapperRef.current && wrapperRef.current.dispatchEvent(scrollEvent);
     combinedScrollRef.current && combinedScrollRef.current.dispatchEvent(scrollEvent);
   }, [combinedScrollRef]);
-  useEffect(function () {
+  useEffect(() => {
     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) {
+  const handleReachEnd = useCallback(() => {
+    if (combinedScrollRef?.current?.scrollTop === lastScrollTop) {
       return;
     }
     combinedScrollRef.current && setLastScrollTop(combinedScrollRef.current.scrollTop);
-    if (typeof onYReachEnd === 'function') {
+    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) {
+  const handleScrollUp = useCallback(() => {
+    if (combinedScrollRef?.current?.scrollTop !== 0) {
       setLastScrollTop(0);
     }
   }, [combinedScrollRef]);
-  useEffect(function () {
-    var handleWheel = confineScroll && function (event) {
+  useEffect(() => {
+    const handleWheel = confineScroll && ((event) => {
       event.preventDefault();
-    };
-    var wrapper = wrapperRef.current;
-    wrapper && handleWheel && wrapper.addEventListener('wheel', handleWheel);
-    return function () {
-      wrapper && handleWheel && wrapper.removeEventListener('wheel', handleWheel);
+    });
+    const wrapper = wrapperRef.current;
+    wrapper && handleWheel && wrapper.addEventListener("wheel", handleWheel);
+    return () => {
+      wrapper && handleWheel && wrapper.removeEventListener("wheel", handleWheel);
     };
   }, [confineScroll]);
-  useEffect(function () {
-    var endHandler = function endHandler(_ref2) {
-      var target = _ref2.target;
+  useEffect(() => {
+    const endHandler = ({
+      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);
+    document.body.addEventListener("transitionend", endHandler);
+    document.body.addEventListener("animationend", endHandler);
+    return () => {
+      document.body.removeEventListener("transitionend", endHandler);
+      document.body.removeEventListener("animationend", endHandler);
     };
   });
-  var className = classnames('perfect-scrollbar-wrapper', {
-    'large-size': largeSize
+  const className = classnames("perfect-scrollbar-wrapper", {
+    "large-size": largeSize
   });
-  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: _extends({}, scrollbarOptions, {
-      minScrollbarLength: 48
-    }),
-    onYReachEnd: handleReachEnd,
-    className: className
-  }, /*#__PURE__*/React.createElement(S.ScrollbarContent, {
-    className: "" + classes,
-    style: {
-      maxHeight: maxHeight
-    },
-    "data-testid": "virtual-scrollbar"
-  }, /*#__PURE__*/React.createElement(S.ScrollbarWrapper, {
-    ref: wrapperRef,
-    absolute: absolute,
-    loading: loading,
-    style: style,
-    largeSize: largeSize
-  }, children)));
-});
+  return /* @__PURE__ */ jsx(
+    PerfectScrollbar,
+    {
+      containerRef: (ref) => {
+        combinedScrollRef.current = ref;
+      },
+      onScroll,
+      onScrollUp: handleScrollUp,
+      options: {
+        ...scrollbarOptions,
+        minScrollbarLength: 48
+      },
+      onYReachEnd: handleReachEnd,
+      className,
+      children: /* @__PURE__ */ jsx(ScrollbarContent, { className: `${classes}`, style: {
+        maxHeight
+      }, "data-testid": "virtual-scrollbar", children: /* @__PURE__ */ jsx(ScrollbarWrapper, { ref: wrapperRef, absolute, loading, style, largeSize, children }) })
+    }
+  );
+});
+export {
+  VirtualScrollbar
+};

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

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

package/dist/VirtualScrollbar/VirtualScrollbar.styles.js

@@ -1,21 +1,23 @@
-import styled from 'styled-components';
-export var ScrollbarContent = styled.div.withConfig({
+import styled from "styled-components";
+const ScrollbarContent = /* @__PURE__ */ styled.div.withConfig({
   displayName: "VirtualScrollbarstyles__ScrollbarContent",
   componentId: "sc-hoiad9-0"
 })([""]);
-export var ScrollbarWrapper = styled.div.withConfig({
+const ScrollbarWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "VirtualScrollbarstyles__ScrollbarWrapper",
   componentId: "sc-hoiad9-1"
-})(["padding-right:", ";.ps--active-x &{padding-bottom:", ";}& > *{opacity:", ";transition:all 0.25s ease-in-out;}"], function (props) {
+})(["padding-right:", ";.ps--active-x &{padding-bottom:", ";}& > *{opacity:", ";transition:all 0.25s ease-in-out;}"], (props) => {
   if (props.absolute) {
-    return '';
+    return "";
   }
-  return props.largeSize ? '24px !important' : '11px !important';
-}, function (props) {
+  return props.largeSize ? "24px !important" : "11px !important";
+}, (props) => {
   if (props.absolute) {
-    return '';
+    return "";
   }
-  return props.largeSize ? '20px !important' : '11px !important';
-}, function (props) {
-  return props.loading ? '0.2' : '1';
-});
+  return props.largeSize ? "20px !important" : "11px !important";
+}, (props) => props.loading ? "0.2" : "1");
+export {
+  ScrollbarContent,
+  ScrollbarWrapper
+};

package/dist/VirtualScrollbar/index.js

@@ -1 +1,4 @@
-export * from './VirtualScrollbar';
+import { VirtualScrollbar } from "./VirtualScrollbar.js";
+export {
+  VirtualScrollbar
+};

package/dist/index.js

@@ -1,2 +1,4 @@
-export { default } from './Scrollbar';
-export * from './Scrollbar.types';
+import { default as default2 } from "./Scrollbar.js";
+export {
+  default2 as default
+};

package/dist/modules.d.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-scrollbar",
-  "version": "1.2.16",
+  "version": "1.2.18",
   "description": "Scrollbar UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -36,8 +36,8 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@ofsajd/react-perfect-scrollbar": "1.0.0",
-    "@synerise/ds-icon": "^1.15.0",
-    "@synerise/ds-utils": "^1.7.0",
+    "@synerise/ds-icon": "^1.15.2",
+    "@synerise/ds-utils": "^1.7.1",
     "classnames": "^2.3.2"
   },
   "peerDependencies": {
@@ -45,5 +45,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
+  "gitHead": "c2384982c3533a31eb5e5e0408f8dcecb2b0f399"
 }