@synerise/ds-scrollbar 1.1.0 → 1.1.2

package/README.md

@@ -27,6 +27,7 @@ import Scrollbar from '@synerise/ds-scrollbar'
 <iframe src="/storybook-static/iframe.html?id=components-scrollbar--default"></iframe>
 
 ## API
+
 | Property      | Description                                                                      | Type                     | Default |
 | ------------- | -------------------------------------------------------------------------------- | ------------------------ | ------- |
 | absolute      | Whether the scrollbar is over content                                            | boolean                  | `true`  |

package/dist/DnDScrollbar/DnDScrollbar.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { ScrollbarProps } from '../Scrollbar.types';
+import { type 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,9 +1,8 @@
 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, { useRef, useState, useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useRef, useState } 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,
@@ -69,7 +68,9 @@ export var DnDScrollbar = function DnDScrollbar(_ref) {
   var handleThumbMousedown = useCallback(function (event) {
     event.stopPropagation();
     setScrollStartPosition(event.clientY);
-    if (contentRef.current) setInitialScrollTop(contentRef.current.scrollTop);
+    if (contentRef.current) {
+      setInitialScrollTop(contentRef.current.scrollTop);
+    }
     setIsDragging(true);
   }, []);
   var handleThumbMouseup = useCallback(function (event) {
@@ -125,7 +126,6 @@ export var DnDScrollbar = function DnDScrollbar(_ref) {
       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);
       });

package/dist/DnDScrollbar/DnDScrollbar.styles.js

@@ -10,7 +10,7 @@ export var ScrollbarContent = styled.div.withConfig({
 export var ScrollbarWrapper = styled.div.withConfig({
   displayName: "DnDScrollbarstyles__ScrollbarWrapper",
   componentId: "sc-12t6y2d-2"
-})(["padding-right:", ";padding-bottom:", ";& > *{opacity:", ";transition:all 0.25s ease-in-out;}"], function (props) {
+})(["padding-right:", ";padding-bottom:", ";& > *{opacity:", ";transition:opacity 0.25s ease-in-out;}"], function (props) {
   if (props.absolute) {
     return '';
   }

package/dist/Scrollbar.d.ts

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

package/dist/Scrollbar.js

@@ -2,10 +2,10 @@ 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 { theme } from '@synerise/ds-core';
-import * as S from './Scrollbar.styles';
 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,
@@ -14,6 +14,7 @@ var Scrollbar = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
     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

package/dist/Scrollbar.types.d.ts

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

package/dist/VirtualScrollbar/VirtualScrollbar.js

@@ -1,11 +1,10 @@
 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 React, { useCallback, forwardRef, useRef, useEffect, useState } from 'react';
-import PerfectScrollbar from '@ofsajd/react-perfect-scrollbar';
 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';
-// eslint-disable-next-line import/prefer-default-export
 export var VirtualScrollbar = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var _ref$absolute = _ref.absolute,
     absolute = _ref$absolute === void 0 ? false : _ref$absolute,

package/dist/style/index.css

@@ -1 +1 @@
-.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}
+.ps{overflow:hidden!important;overflow-anchor:none;-ms-overflow-style:none;touch-action:auto;-ms-touch-action:auto}.ps__rail-x{display:none;opacity:0;transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;height:15px;bottom:0;position:absolute}.ps__rail-y{display:none;opacity:0;transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;width:15px;right:0;position:absolute}.ps--active-x>.ps__rail-x,.ps--active-y>.ps__rail-y{display:block;background-color:transparent}.ps--focus>.ps__rail-x,.ps--focus>.ps__rail-y,.ps--scrolling-x>.ps__rail-x,.ps--scrolling-y>.ps__rail-y,.ps:hover>.ps__rail-x,.ps:hover>.ps__rail-y{opacity:.6}.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:#eee;opacity:.9}.ps__thumb-x{background-color:#aaa;border-radius:6px;transition:background-color .2s linear,height .2s ease-in-out;-webkit-transition:background-color .2s linear,height .2s ease-in-out;height:6px;bottom:2px;position:absolute}.ps__thumb-y{background-color:#aaa;border-radius:6px;transition:background-color .2s linear,width .2s ease-in-out;-webkit-transition:background-color .2s linear,width .2s ease-in-out;width:6px;right:2px;position:absolute}.ps__rail-x.ps--clicking .ps__thumb-x,.ps__rail-x:focus>.ps__thumb-x,.ps__rail-x:hover>.ps__thumb-x{background-color:#999;height:11px}.ps__rail-y.ps--clicking .ps__thumb-y,.ps__rail-y:focus>.ps__thumb-y,.ps__rail-y:hover>.ps__thumb-y{background-color:#999;width:11px}@supports (-ms-overflow-style:none){.ps{overflow:auto!important}}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.ps{overflow:auto!important}}.scrollbar-container{position:relative;height:100%}.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-scrollbar",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Scrollbar UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,8 +35,8 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@ofsajd/react-perfect-scrollbar": "1.0.0",
-    "@synerise/ds-icon": "^1.5.3",
-    "@synerise/ds-utils": "^1.3.0",
+    "@synerise/ds-icon": "^1.5.4",
+    "@synerise/ds-utils": "^1.3.1",
     "classnames": "^2.3.2",
     "lodash": "^4.7.21"
   },
@@ -45,5 +45,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "f2713cd35cfe22f63a159f05144585834897a132"
+  "gitHead": "4512641033ba3581a3df208143c547fcfed45895"
 }