@synerise/ds-scrollbar 0.6.13 → 0.7.0

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.7.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@0.6.14...@synerise/ds-scrollbar@0.7.0) (2023-12-13)
+
+
+### Features
+
+* **scrollbar:** added new design for scrollbar ([0fe6588](https://github.com/Synerise/synerise-design/commit/0fe65884204bdc2fabae4b54d559f84e5761d7fb))
+
+
+
+
+
+## [0.6.14](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@0.6.13...@synerise/ds-scrollbar@0.6.14) (2023-12-11)
+
+**Note:** Version bump only for package @synerise/ds-scrollbar
+
+
+
+
+
 ## [0.6.13](https://github.com/Synerise/synerise-design/compare/@synerise/ds-scrollbar@0.6.12...@synerise/ds-scrollbar@0.6.13) (2023-11-16)
 
 

package/README.md

@@ -31,6 +31,7 @@ import Scrollbar from '@synerise/ds-scrollbar'
 | Property  | Description                                                          | Type                     | Default |
 |-----------|----------------------------------------------------------------------|--------------------------|---------|
 | absolute  | Whether the scrollbar is over content                                | boolean                  | `true`  |
+| largeSize  | Larger scrollbar                                | boolean                  | boolean  | false
 | children  | Scrolled component                                                   | React.ReactNode / string | -       |
 | classes   | String with optional classes                                         | string                   | -       |
 | fetchData | Callback called when scrollbar has been scrolled to the end in Y axis | () => void               | -       |

package/dist/DnDScrollbar/DnDScrollbar.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "classes", "maxHeight", "absolute", "loading", "onScroll", "onYReachEnd", "fetchData", "hasMore"];
+var _excluded = ["children", "classes", "maxHeight", "absolute", "loading", "largeSize", "onScroll", "onYReachEnd", "fetchData", "hasMore"];
 
 function _extends() { _extends = Object.assign || 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); }
 
@@ -13,6 +13,7 @@ export var DnDScrollbar = function DnDScrollbar(_ref) {
       maxHeight = _ref.maxHeight,
       absolute = _ref.absolute,
       loading = _ref.loading,
+      largeSize = _ref.largeSize,
       onScroll = _ref.onScroll,
       onYReachEnd = _ref.onYReachEnd,
       fetchData = _ref.fetchData,
@@ -173,8 +174,11 @@ export var DnDScrollbar = function DnDScrollbar(_ref) {
   }), /*#__PURE__*/React.createElement(S.ScrollbarWrapper, {
     ref: wrapperRef,
     loading: loading,
-    absolute: absolute
-  }, children)), /*#__PURE__*/React.createElement(S.ScrollbarTrackWrapper, null, /*#__PURE__*/React.createElement(S.TrackVertical, {
+    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, {

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

@@ -3,9 +3,14 @@ export declare const ScrollbarContent: import("styled-components").StyledCompone
 export declare const ScrollbarWrapper: import("styled-components").StyledComponent<"div", any, {
     absolute?: boolean | undefined;
     loading?: boolean | undefined;
+    largeSize?: boolean | undefined;
+}, never>;
+export declare const ThumbVertical: import("styled-components").StyledComponent<"div", any, {
+    largeSize?: boolean | undefined;
+}, never>;
+export declare const ScrollbarTrackWrapper: import("styled-components").StyledComponent<"div", any, {
+    largeSize?: boolean | undefined;
 }, never>;
-export declare const ThumbVertical: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ScrollbarTrackWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TrackVertical: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Loader: import("styled-components").StyledComponent<"div", any, {
     loading?: boolean | undefined;

package/dist/DnDScrollbar/DnDScrollbar.styles.js

@@ -10,22 +10,54 @@ export var ScrollbarContent = styled.div.withConfig({
 export var ScrollbarWrapper = styled.div.withConfig({
   displayName: "DnDScrollbarstyles__ScrollbarWrapper",
   componentId: "sc-12t6y2d-2"
-})(["padding-right:", ";& > *{opacity:", ";transition:all 0.25s ease-in-out;}"], function (props) {
-  return props.absolute ? '' : '11px !important';
+})(["padding-right:", ";padding-bottom:", ";& > *{opacity:", ";transition:all 0.25s ease-in-out;}"], function (props) {
+  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';
 });
 export var ThumbVertical = styled.div.withConfig({
   displayName: "DnDScrollbarstyles__ThumbVertical",
   componentId: "sc-12t6y2d-3"
-})(["width:3px;background-color:", ";border-radius:2px;right:4px;position:absolute;"], function (props) {
-  return props.theme.palette['grey-300'];
+})(["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({
   displayName: "DnDScrollbarstyles__ScrollbarTrackWrapper",
   componentId: "sc-12t6y2d-4"
-})(["display:block;height:100%;position:absolute;width:11px;top:0;right:0;bottom:0;user-select:none;&:hover{", "{background-color:", ";}}"], ThumbVertical, function (props) {
-  return props.theme.palette['grey-500'];
+})(["display:block;height:100%;position:absolute;width:", ";top:0;right:", ";bottom:0;user-select:none;", "{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({
   displayName: "DnDScrollbarstyles__TrackVertical",

package/dist/Scrollbar.types.d.ts

@@ -6,6 +6,7 @@ export type ScrollbarAdditionalProps = {
     hasMore?: boolean;
     loading?: boolean;
     maxHeight?: string | number;
+    largeSize?: boolean;
     style?: React.CSSProperties;
     fetchData?: () => void;
     onScroll?: (e: React.UIEvent) => void;

package/dist/VirtualScrollbar/VirtualScrollbar.js

@@ -13,6 +13,7 @@ export var VirtualScrollbar = forwardRef(function (_ref, forwardedRef) {
       hasMore = _ref.hasMore,
       loading = _ref.loading,
       maxHeight = _ref.maxHeight,
+      largeSize = _ref.largeSize,
       style = _ref.style,
       fetchData = _ref.fetchData,
       onScroll = _ref.onScroll,
@@ -79,9 +80,10 @@ export var VirtualScrollbar = forwardRef(function (_ref, forwardedRef) {
     options: {
       minScrollbarLength: 48
     },
-    onYReachEnd: handleReachEnd
+    onYReachEnd: handleReachEnd,
+    className: "" + (largeSize ? 'large-size' : '')
   }, /*#__PURE__*/React.createElement(S.ScrollbarContent, {
-    className: classes,
+    className: "" + classes,
     style: {
       maxHeight: maxHeight
     },
@@ -90,6 +92,7 @@ export var VirtualScrollbar = forwardRef(function (_ref, forwardedRef) {
     ref: wrapperRef,
     absolute: absolute,
     loading: loading,
-    style: style
+    style: style,
+    largeSize: largeSize
   }, children)));
 });

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

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

package/dist/VirtualScrollbar/VirtualScrollbar.styles.js

@@ -6,8 +6,18 @@ export var ScrollbarContent = styled.div.withConfig({
 export var ScrollbarWrapper = styled.div.withConfig({
   displayName: "VirtualScrollbarstyles__ScrollbarWrapper",
   componentId: "hoiad9-1"
-})(["padding-right:", ";& > *{opacity:", ";transition:all 0.25s ease-in-out;}"], function (props) {
-  return props.absolute ? '' : '11px !important';
+})(["padding-right:", ";padding-bottom:", ";& > *{opacity:", ";transition:all 0.25s ease-in-out;}"], function (props) {
+  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/VirtualScrollbar/style/index.css

@@ -1 +1 @@
-@import '~react-perfect-scrollbar/dist/css/styles.css';.ps__rail-x.ps__rail-x{opacity:1;height:11px;position:absolute;width:calc(100% - 8px)!important;transform:translateX(-4px);overflow:hidden}.ps__rail-y.ps__rail-y{opacity:1;width:11px;position:absolute;height:calc(100% - 8px)!important;transform:translateY(4px);overflow:hidden}.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:2px;height:3px;bottom:4px;margin:0 4px}.ps__thumb-y{background-color:#dbe0e3;border-radius:2px;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}
+@import '~react-perfect-scrollbar/dist/css/styles.css';.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__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,.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": "0.6.13",
+  "version": "0.7.0",
   "description": "Scrollbar UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -18,7 +18,7 @@
   "scripts": {
     "build": "npm run build:js && npm run build:css && npm run defs",
     "build:css": "node ../../../scripts/style/less.js",
-    "build:js": "babel --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
+    "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
     "build:watch": "npm run build:js -- --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "npm pack --pack-destination ../../portal/storybook-static/static",
@@ -33,7 +33,7 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^0.58.7",
+    "@synerise/ds-icon": "^0.58.9",
     "react-perfect-scrollbar": "^1.5.8"
   },
   "peerDependencies": {
@@ -42,9 +42,9 @@
     "styled-components": "5.0.1"
   },
   "devDependencies": {
-    "@synerise/ds-utils": "^0.24.21",
+    "@synerise/ds-utils": "^0.24.23",
     "@testing-library/jest-dom": "5.1.1",
     "@types/resize-observer-browser": "^0.1.7"
   },
-  "gitHead": "7c20a32482f03300c9a6c6cd3c644d307371bb0d"
+  "gitHead": "76edb4723a30c59f1a54f666f66fcd814de0af70"
 }