@synerise/ds-time-picker 0.6.37 → 0.6.38

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.6.38](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@0.6.37...@synerise/ds-time-picker@0.6.38) (2022-09-13)
+
+
+### Bug Fixes
+
+* **time-picker:** fix scroll picker issue ([6ab6f23](https://github.com/Synerise/synerise-design/commit/6ab6f23e50cc063494afb22496b286672f29ff35))
+
+
+
+
+
 ## [0.6.37](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@0.6.36...@synerise/ds-time-picker@0.6.37) (2022-09-07)
 
 **Note:** Version bump only for package @synerise/ds-time-picker

package/dist/TimePicker.styles.js

@@ -15,7 +15,7 @@ export var OverlayContainer = styled.div.withConfig({
 export var Unit = styled.div.withConfig({
   displayName: "TimePickerstyles__Unit",
   componentId: "yk19n0-2"
-})(["display:flex;flex-direction:column;width:100%;height:192px;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;&::-webkit-scrollbar{width:0;}"]);
+})(["display:flex;flex-direction:column;width:100%;overflow-x:hidden;overflow-y:scroll;.scrollbar-container{margin-right:-11px;}"]);
 export var UnitSeperator = styled.div.withConfig({
   displayName: "TimePickerstyles__UnitSeperator",
   componentId: "yk19n0-3"
@@ -31,7 +31,7 @@ export var CellText = styled(Label).withConfig({
 export var Cell = styled.button.withConfig({
   displayName: "TimePickerstyles__Cell",
   componentId: "yk19n0-5"
-})(["height:32px;text-align:center;display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:background-color 0.3s;cursor:pointer;background-color:", ";&&{border:none;padding:0;}&:hover{background-color:", ";", "{color:", ";}}&:disabled{&&{cursor:not-allowed;background-color:", ";}", "{cursor:not-allowed;opacity:0.4;}}", ";"], function (props) {
+})(["height:32px;width:100%;text-align:center;display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:background-color 0.3s;cursor:pointer;background-color:", ";&&{border:none;padding:0;}&:hover{background-color:", ";", "{color:", ";}}&:disabled{&&{cursor:not-allowed;background-color:", ";}", "{cursor:not-allowed;opacity:0.4;}}", ";"], function (props) {
   return props.theme.palette.white;
 }, function (props) {
   return props.theme.palette['grey-050'];
@@ -61,7 +61,7 @@ export var TimePickerInput = styled(Input).withConfig({
 export var PlaceholderWrapper = styled.div.withConfig({
   displayName: "TimePickerstyles__PlaceholderWrapper",
   componentId: "yk19n0-8"
-})(["  width:100%;position:relative;"]);
+})(["width:100%;position:relative;"]);
 export var Placeholder = styled.div.withConfig({
   displayName: "TimePickerstyles__Placeholder",
   componentId: "yk19n0-9"

package/dist/Unit.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import dayjs from 'dayjs';
 import { debounce } from 'debounce';
+import Scrollbar from '@synerise/ds-scrollbar';
 import * as S from './TimePicker.styles';
 var CELL_HEIGHT = 32;
 var DEBOUNCE_DELAY = 150;
@@ -61,9 +62,11 @@ var Unit = function Unit(_ref) {
     }
   }, [selectedCellRef, unitContainerRef, isFirstRender, forceUpdate, containerHeight]);
   return /*#__PURE__*/React.createElement(S.Unit, {
-    "data-testid": "ds-time-picker-unit-" + unit,
+    "data-testid": "ds-time-picker-unit-" + unit
+  }, /*#__PURE__*/React.createElement(Scrollbar, {
     ref: unitContainerRef,
-    onScroll: debounce(scrollHandler, DEBOUNCE_DELAY)
+    onScroll: debounce(scrollHandler, DEBOUNCE_DELAY),
+    maxHeight: 192
   }, options.map(function (option) {
     var normalizedStringValue = option < 10 ? "0" + option : option.toString();
     var isDisabled = disabled && disabled.includes(option);
@@ -83,7 +86,7 @@ var Unit = function Unit(_ref) {
     }, /*#__PURE__*/React.createElement(S.CellText, null, normalizedStringValue));
   }), !!containerHeight && /*#__PURE__*/React.createElement(S.PlaceholderWrapper, null, /*#__PURE__*/React.createElement(S.Placeholder, {
     height: containerHeight - CELL_HEIGHT
-  })));
+  }))));
 };
 
 export default Unit;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-time-picker",
-  "version": "0.6.37",
+  "version": "0.6.38",
   "description": "TimePicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -47,5 +47,5 @@
   "devDependencies": {
     "@types/debounce": "^1.2.0"
   },
-  "gitHead": "93bd4f1ab7f265f408a77218692a7987190ebce2"
+  "gitHead": "4a728965c03f982f1da86336e3a16db41ffc5a27"
 }