@semcore/scroll-area - npm Package Compare versions

Comparing version 5.33.1 to 5.34.0-prerelease.0

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## [5.34.0] - 2024-07-22
+
+### Added
+
+- Property `observeParentSize` to enable recalculation if the parent of ScrollArea is resized. Default value is `false`.
+
 ## [5.33.1] - 2024-07-22
@@ -7,0 +13,0 @@

lib/cjs/ScrollArea.js

@@ -33,23 +33,23 @@ "use strict";
 /*__reshadow-styles__:"./style/scroll-area.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SScrollArea_48drj_gg_{position:relative;width:100%;height:100%}.___SShadowHorizontal_48drj_gg_:after,.___SShadowHorizontal_48drj_gg_:before,.___SShadowVertical_48drj_gg_:after,.___SShadowVertical_48drj_gg_:before{content:\"\";position:absolute;display:none;pointer-events:none}.___SShadowHorizontal_48drj_gg_:after,.___SShadowHorizontal_48drj_gg_:before{top:0;width:5px;height:100%}.___SShadowHorizontal_48drj_gg_._position_median_48drj_gg_:before{left:0;display:block;background:var(--intergalactic-scroll-area-shadow-left,\n    linear-gradient(to right, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_48drj_gg_._position_median_48drj_gg_:after{right:0;display:block;background:var(--intergalactic-scroll-area-shadow-right,\n    linear-gradient(to left, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_48drj_gg_._position_start_48drj_gg_:before{left:0;display:block;background:var(--intergalactic-scroll-area-shadow-left,\n    linear-gradient(to right, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_48drj_gg_._position_end_48drj_gg_:after{right:0;display:block;background:var(--intergalactic-scroll-area-shadow-right,\n    linear-gradient(to left, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_48drj_gg_.__leftOffset_48drj_gg_:before{left:var(--leftOffset_48drj)}.___SShadowHorizontal_48drj_gg_.__rightOffset_48drj_gg_:after{right:var(--rightOffset_48drj)}.___SShadowVertical_48drj_gg_:after,.___SShadowVertical_48drj_gg_:before{left:0;width:100%;height:5px}.___SShadowVertical_48drj_gg_._position_median_48drj_gg_:before{top:0;display:block;background:var(--intergalactic-scroll-area-shadow-top,\n    linear-gradient(to bottom, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_48drj_gg_._position_median_48drj_gg_:after{bottom:0;display:block;background:var(--intergalactic-scroll-area-shadow-bottom,\n    linear-gradient(to top, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_48drj_gg_._position_start_48drj_gg_:before{top:0;display:block;background:var(--intergalactic-scroll-area-shadow-top,\n    linear-gradient(to bottom, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_48drj_gg_._position_end_48drj_gg_:after{bottom:0;display:block;background:var(--intergalactic-scroll-area-shadow-bottom,\n    linear-gradient(to top, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_48drj_gg_.__topOffset_48drj_gg_:before{top:var(--topOffset_48drj)}.___SShadowVertical_48drj_gg_.__bottomOffset_48drj_gg_:after{bottom:var(--bottomOffset_48drj)}.___SContainer_48drj_gg_{display:block;width:100%;height:100%;box-sizing:content-box;overflow:auto;-webkit-overflow-scrolling:touch;outline:0;scrollbar-width:none;-ms-overflow-style:none}.___SContainer_48drj_gg_::-webkit-scrollbar{display:none}.___SContainer_48drj_gg_.__keyboardFocused_48drj_gg_:focus::after{position:absolute;display:block;content:\"\";top:0;right:0;bottom:0;left:0;top:var(--focusRingTopOffset_48drj);right:var(--focusRingRightOffset_48drj);bottom:var(--focusRingBottomOffset_48drj);left:var(--focusRingLeftOffset_48drj);box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));pointer-events:none;z-index:2}" /*__inner_css_end__*/, "48drj_gg_") /*__reshadow_css_end__*/, {
-  "__SScrollArea": "___SScrollArea_48drj_gg_",
-  "__SShadowHorizontal": "___SShadowHorizontal_48drj_gg_",
-  "_leftOffset": "__leftOffset_48drj_gg_",
-  "--leftOffset": "--leftOffset_48drj",
-  "_rightOffset": "__rightOffset_48drj_gg_",
-  "--rightOffset": "--rightOffset_48drj",
-  "__SShadowVertical": "___SShadowVertical_48drj_gg_",
-  "_topOffset": "__topOffset_48drj_gg_",
-  "--topOffset": "--topOffset_48drj",
-  "_bottomOffset": "__bottomOffset_48drj_gg_",
-  "--bottomOffset": "--bottomOffset_48drj",
-  "__SContainer": "___SContainer_48drj_gg_",
-  "_keyboardFocused": "__keyboardFocused_48drj_gg_",
-  "--focusRingTopOffset": "--focusRingTopOffset_48drj",
-  "--focusRingRightOffset": "--focusRingRightOffset_48drj",
-  "--focusRingBottomOffset": "--focusRingBottomOffset_48drj",
-  "--focusRingLeftOffset": "--focusRingLeftOffset_48drj",
-  "_position_median": "_position_median_48drj_gg_",
-  "_position_start": "_position_start_48drj_gg_",
-  "_position_end": "_position_end_48drj_gg_"
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SScrollArea_zdqvw_gg_{position:relative;width:100%;height:100%}.___SShadowHorizontal_zdqvw_gg_:after,.___SShadowHorizontal_zdqvw_gg_:before,.___SShadowVertical_zdqvw_gg_:after,.___SShadowVertical_zdqvw_gg_:before{content:\"\";position:absolute;display:none;pointer-events:none}.___SShadowHorizontal_zdqvw_gg_:after,.___SShadowHorizontal_zdqvw_gg_:before{top:0;width:5px;height:100%}.___SShadowHorizontal_zdqvw_gg_._position_median_zdqvw_gg_:before{left:0;display:block;background:var(--intergalactic-scroll-area-shadow-left,\n    linear-gradient(to right, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_zdqvw_gg_._position_median_zdqvw_gg_:after{right:0;display:block;background:var(--intergalactic-scroll-area-shadow-right,\n    linear-gradient(to left, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_zdqvw_gg_._position_start_zdqvw_gg_:before{left:0;display:block;background:var(--intergalactic-scroll-area-shadow-left,\n    linear-gradient(to right, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_zdqvw_gg_._position_end_zdqvw_gg_:after{right:0;display:block;background:var(--intergalactic-scroll-area-shadow-right,\n    linear-gradient(to left, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_zdqvw_gg_.__leftOffset_zdqvw_gg_:before{left:var(--leftOffset_zdqvw)}.___SShadowHorizontal_zdqvw_gg_.__rightOffset_zdqvw_gg_:after{right:var(--rightOffset_zdqvw)}.___SShadowVertical_zdqvw_gg_:after,.___SShadowVertical_zdqvw_gg_:before{left:0;width:100%;height:5px}.___SShadowVertical_zdqvw_gg_._position_median_zdqvw_gg_:before{top:0;display:block;background:var(--intergalactic-scroll-area-shadow-top,\n    linear-gradient(to bottom, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_zdqvw_gg_._position_median_zdqvw_gg_:after{bottom:0;display:block;background:var(--intergalactic-scroll-area-shadow-bottom,\n    linear-gradient(to top, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_zdqvw_gg_._position_start_zdqvw_gg_:before{top:0;display:block;background:var(--intergalactic-scroll-area-shadow-top,\n    linear-gradient(to bottom, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_zdqvw_gg_._position_end_zdqvw_gg_:after{bottom:0;display:block;background:var(--intergalactic-scroll-area-shadow-bottom,\n    linear-gradient(to top, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_zdqvw_gg_.__topOffset_zdqvw_gg_:before{top:var(--topOffset_zdqvw)}.___SShadowVertical_zdqvw_gg_.__bottomOffset_zdqvw_gg_:after{bottom:var(--bottomOffset_zdqvw)}.___SContainer_zdqvw_gg_{display:block;width:100%;height:100%;box-sizing:content-box;overflow:auto;-webkit-overflow-scrolling:touch;outline:0;scrollbar-width:none;-ms-overflow-style:none}.___SContainer_zdqvw_gg_::-webkit-scrollbar{display:none}.___SContainer_zdqvw_gg_.__keyboardFocused_zdqvw_gg_:focus::after{position:absolute;display:block;content:\"\";top:0;right:0;bottom:0;left:0;top:var(--focusRingTopOffset_zdqvw);right:var(--focusRingRightOffset_zdqvw);bottom:var(--focusRingBottomOffset_zdqvw);left:var(--focusRingLeftOffset_zdqvw);box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));pointer-events:none;z-index:2}" /*__inner_css_end__*/, "zdqvw_gg_") /*__reshadow_css_end__*/, {
+  "__SScrollArea": "___SScrollArea_zdqvw_gg_",
+  "__SShadowHorizontal": "___SShadowHorizontal_zdqvw_gg_",
+  "_leftOffset": "__leftOffset_zdqvw_gg_",
+  "--leftOffset": "--leftOffset_zdqvw",
+  "_rightOffset": "__rightOffset_zdqvw_gg_",
+  "--rightOffset": "--rightOffset_zdqvw",
+  "__SShadowVertical": "___SShadowVertical_zdqvw_gg_",
+  "_topOffset": "__topOffset_zdqvw_gg_",
+  "--topOffset": "--topOffset_zdqvw",
+  "_bottomOffset": "__bottomOffset_zdqvw_gg_",
+  "--bottomOffset": "--bottomOffset_zdqvw",
+  "__SContainer": "___SContainer_zdqvw_gg_",
+  "_keyboardFocused": "__keyboardFocused_zdqvw_gg_",
+  "--focusRingTopOffset": "--focusRingTopOffset_zdqvw",
+  "--focusRingRightOffset": "--focusRingRightOffset_zdqvw",
+  "--focusRingBottomOffset": "--focusRingBottomOffset_zdqvw",
+  "--focusRingLeftOffset": "--focusRingLeftOffset_zdqvw",
+  "_position_median": "_position_median_zdqvw_gg_",
+  "_position_start": "_position_start_zdqvw_gg_",
+  "_position_end": "_position_end_zdqvw_gg_"
 });
@@ -200,3 +200,6 @@ var eventCalculate = undefined;
     function calculateSizeContainer() {
-      var _parent$getBoundingCl;
+      var _this$asProps2 = this.asProps,
+        wMax = _this$asProps2.wMax,
+        hMax = _this$asProps2.hMax,
+        observeParentSize = _this$asProps2.observeParentSize;
       var size = {
@@ -212,16 +215,19 @@ width: '',
       var parent = this.$wrapper.parentElement;
-      var parentRect = (_parent$getBoundingCl = parent === null || parent === void 0 ? void 0 : parent.getBoundingClientRect()) !== null && _parent$getBoundingCl !== void 0 ? _parent$getBoundingCl : {
+      var parentRect = {
         width: 0,
         height: 0
       };
-      var _this$asProps2 = this.asProps,
-        wMax = _this$asProps2.wMax,
-        hMax = _this$asProps2.hMax;
-      if (wMax) this.setStyleSizeProperty(this.$wrapper, 'max-width', wMax);
-      if (hMax) this.setStyleSizeProperty(this.$wrapper, 'max-height', hMax);
+      if (observeParentSize) {
+        if (parent) {
+          parentRect = parent.getBoundingClientRect();
+        }
+        if (wMax) this.setStyleSizeProperty(this.$wrapper, 'max-width', wMax);
+        if (hMax) this.setStyleSizeProperty(this.$wrapper, 'max-height', hMax);
+      }
       var maxWidth = Number.parseInt(style.getPropertyValue('max-width'));
       var maxHeight = Number.parseInt(style.getPropertyValue('max-height'));
       if (maxWidth) {
-        if (wMax && parent.scrollWidth > parentRect.width) {
-          var diff = parent.scrollWidth - parentRect.width;
+        if (observeParentSize && wMax && parent.scrollWidth > parentRect.width) {
+          /** even if width is like 100.486px we should round it to 100, not 101 */
+          var diff = Math.round(parent.scrollWidth.toFixed(1)) - Math.round(parentRect.width.toFixed(1));
           if (diff < maxWidth) {
@@ -239,3 +245,3 @@ maxWidth = maxWidth - diff;
       if (maxHeight) {
-        if (hMax && parent.scrollHeight > parentRect.height) {
+        if (observeParentSize && hMax && parent.scrollHeight > parentRect.height) {
           /** even if height is like 100.486px we should round it to 100, not 101 */
@@ -370,3 +376,4 @@ var _diff = Math.round(parent.scrollHeight.toFixed(1)) - Math.round(parentRect.height.toFixed(1));
     inner: /*#__PURE__*/_react["default"].createRef(),
-    tabIndex: 0
+    tabIndex: 0,
+    observeParentSize: false
   };
@@ -373,0 +380,0 @@ });

lib/cjs/ScrollBar.js

@@ -24,8 +24,8 @@ "use strict";
 /*__reshadow-styles__:"./style/scroll-bar.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SScrollBar_1j30l_gg_{position:absolute;display:flex}.___SScrollBar_1j30l_gg_._orientation_vertical_1j30l_gg_{top:var(--intergalactic-spacing-1x, 4px);right:0;width:8px;height:calc(100% - var(--offsetSum_1j30l) - var(--intergalactic-spacing-2x, 8px));justify-content:center}.___SScrollBar_1j30l_gg_._orientation_horizontal_1j30l_gg_{bottom:0;height:12px;align-items:center;width:calc(100% - var(--offsetSum_1j30l) - var(--intergalactic-spacing-2x, 8px))}.___SSlider_1j30l_gg_{cursor:pointer;width:6px;height:6px;border-radius:4px;background-color:var(--intergalactic-scroll-bar-background, rgba(25, 27, 35, 0.3))}" /*__inner_css_end__*/, "1j30l_gg_") /*__reshadow_css_end__*/, {
-  "__SScrollBar": "___SScrollBar_1j30l_gg_",
-  "_orientation_vertical": "_orientation_vertical_1j30l_gg_",
-  "--offsetSum": "--offsetSum_1j30l",
-  "_orientation_horizontal": "_orientation_horizontal_1j30l_gg_",
-  "__SSlider": "___SSlider_1j30l_gg_"
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SScrollBar_11dzi_gg_{position:absolute;display:flex}.___SScrollBar_11dzi_gg_._orientation_vertical_11dzi_gg_{top:var(--intergalactic-spacing-1x, 4px);right:0;width:8px;height:calc(100% - var(--offsetSum_11dzi) - var(--intergalactic-spacing-2x, 8px));justify-content:center}.___SScrollBar_11dzi_gg_._orientation_horizontal_11dzi_gg_{bottom:0;height:12px;align-items:center;width:calc(100% - var(--offsetSum_11dzi) - var(--intergalactic-spacing-2x, 8px))}.___SSlider_11dzi_gg_{cursor:pointer;width:6px;height:6px;border-radius:4px;background-color:var(--intergalactic-scroll-bar-background, rgba(25, 27, 35, 0.3))}" /*__inner_css_end__*/, "11dzi_gg_") /*__reshadow_css_end__*/, {
+  "__SScrollBar": "___SScrollBar_11dzi_gg_",
+  "_orientation_vertical": "_orientation_vertical_11dzi_gg_",
+  "--offsetSum": "--offsetSum_11dzi",
+  "_orientation_horizontal": "_orientation_horizontal_11dzi_gg_",
+  "__SSlider": "___SSlider_11dzi_gg_"
 });
@@ -32,0 +32,0 @@ var DEFAULT_SLIDER_SIZE = 50;

lib/es6/ScrollArea.js

@@ -27,23 +27,23 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 /*__reshadow-styles__:"./style/scroll-area.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SScrollArea_48drj_gg_{position:relative;width:100%;height:100%}.___SShadowHorizontal_48drj_gg_:after,.___SShadowHorizontal_48drj_gg_:before,.___SShadowVertical_48drj_gg_:after,.___SShadowVertical_48drj_gg_:before{content:\"\";position:absolute;display:none;pointer-events:none}.___SShadowHorizontal_48drj_gg_:after,.___SShadowHorizontal_48drj_gg_:before{top:0;width:5px;height:100%}.___SShadowHorizontal_48drj_gg_._position_median_48drj_gg_:before{left:0;display:block;background:var(--intergalactic-scroll-area-shadow-left,\n    linear-gradient(to right, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_48drj_gg_._position_median_48drj_gg_:after{right:0;display:block;background:var(--intergalactic-scroll-area-shadow-right,\n    linear-gradient(to left, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_48drj_gg_._position_start_48drj_gg_:before{left:0;display:block;background:var(--intergalactic-scroll-area-shadow-left,\n    linear-gradient(to right, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_48drj_gg_._position_end_48drj_gg_:after{right:0;display:block;background:var(--intergalactic-scroll-area-shadow-right,\n    linear-gradient(to left, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_48drj_gg_.__leftOffset_48drj_gg_:before{left:var(--leftOffset_48drj)}.___SShadowHorizontal_48drj_gg_.__rightOffset_48drj_gg_:after{right:var(--rightOffset_48drj)}.___SShadowVertical_48drj_gg_:after,.___SShadowVertical_48drj_gg_:before{left:0;width:100%;height:5px}.___SShadowVertical_48drj_gg_._position_median_48drj_gg_:before{top:0;display:block;background:var(--intergalactic-scroll-area-shadow-top,\n    linear-gradient(to bottom, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_48drj_gg_._position_median_48drj_gg_:after{bottom:0;display:block;background:var(--intergalactic-scroll-area-shadow-bottom,\n    linear-gradient(to top, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_48drj_gg_._position_start_48drj_gg_:before{top:0;display:block;background:var(--intergalactic-scroll-area-shadow-top,\n    linear-gradient(to bottom, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_48drj_gg_._position_end_48drj_gg_:after{bottom:0;display:block;background:var(--intergalactic-scroll-area-shadow-bottom,\n    linear-gradient(to top, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_48drj_gg_.__topOffset_48drj_gg_:before{top:var(--topOffset_48drj)}.___SShadowVertical_48drj_gg_.__bottomOffset_48drj_gg_:after{bottom:var(--bottomOffset_48drj)}.___SContainer_48drj_gg_{display:block;width:100%;height:100%;box-sizing:content-box;overflow:auto;-webkit-overflow-scrolling:touch;outline:0;scrollbar-width:none;-ms-overflow-style:none}.___SContainer_48drj_gg_::-webkit-scrollbar{display:none}.___SContainer_48drj_gg_.__keyboardFocused_48drj_gg_:focus::after{position:absolute;display:block;content:\"\";top:0;right:0;bottom:0;left:0;top:var(--focusRingTopOffset_48drj);right:var(--focusRingRightOffset_48drj);bottom:var(--focusRingBottomOffset_48drj);left:var(--focusRingLeftOffset_48drj);box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));pointer-events:none;z-index:2}" /*__inner_css_end__*/, "48drj_gg_") /*__reshadow_css_end__*/, {
-  "__SScrollArea": "___SScrollArea_48drj_gg_",
-  "__SShadowHorizontal": "___SShadowHorizontal_48drj_gg_",
-  "_leftOffset": "__leftOffset_48drj_gg_",
-  "--leftOffset": "--leftOffset_48drj",
-  "_rightOffset": "__rightOffset_48drj_gg_",
-  "--rightOffset": "--rightOffset_48drj",
-  "__SShadowVertical": "___SShadowVertical_48drj_gg_",
-  "_topOffset": "__topOffset_48drj_gg_",
-  "--topOffset": "--topOffset_48drj",
-  "_bottomOffset": "__bottomOffset_48drj_gg_",
-  "--bottomOffset": "--bottomOffset_48drj",
-  "__SContainer": "___SContainer_48drj_gg_",
-  "_keyboardFocused": "__keyboardFocused_48drj_gg_",
-  "--focusRingTopOffset": "--focusRingTopOffset_48drj",
-  "--focusRingRightOffset": "--focusRingRightOffset_48drj",
-  "--focusRingBottomOffset": "--focusRingBottomOffset_48drj",
-  "--focusRingLeftOffset": "--focusRingLeftOffset_48drj",
-  "_position_median": "_position_median_48drj_gg_",
-  "_position_start": "_position_start_48drj_gg_",
-  "_position_end": "_position_end_48drj_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SScrollArea_zdqvw_gg_{position:relative;width:100%;height:100%}.___SShadowHorizontal_zdqvw_gg_:after,.___SShadowHorizontal_zdqvw_gg_:before,.___SShadowVertical_zdqvw_gg_:after,.___SShadowVertical_zdqvw_gg_:before{content:\"\";position:absolute;display:none;pointer-events:none}.___SShadowHorizontal_zdqvw_gg_:after,.___SShadowHorizontal_zdqvw_gg_:before{top:0;width:5px;height:100%}.___SShadowHorizontal_zdqvw_gg_._position_median_zdqvw_gg_:before{left:0;display:block;background:var(--intergalactic-scroll-area-shadow-left,\n    linear-gradient(to right, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_zdqvw_gg_._position_median_zdqvw_gg_:after{right:0;display:block;background:var(--intergalactic-scroll-area-shadow-right,\n    linear-gradient(to left, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_zdqvw_gg_._position_start_zdqvw_gg_:before{left:0;display:block;background:var(--intergalactic-scroll-area-shadow-left,\n    linear-gradient(to right, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_zdqvw_gg_._position_end_zdqvw_gg_:after{right:0;display:block;background:var(--intergalactic-scroll-area-shadow-right,\n    linear-gradient(to left, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_zdqvw_gg_.__leftOffset_zdqvw_gg_:before{left:var(--leftOffset_zdqvw)}.___SShadowHorizontal_zdqvw_gg_.__rightOffset_zdqvw_gg_:after{right:var(--rightOffset_zdqvw)}.___SShadowVertical_zdqvw_gg_:after,.___SShadowVertical_zdqvw_gg_:before{left:0;width:100%;height:5px}.___SShadowVertical_zdqvw_gg_._position_median_zdqvw_gg_:before{top:0;display:block;background:var(--intergalactic-scroll-area-shadow-top,\n    linear-gradient(to bottom, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_zdqvw_gg_._position_median_zdqvw_gg_:after{bottom:0;display:block;background:var(--intergalactic-scroll-area-shadow-bottom,\n    linear-gradient(to top, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_zdqvw_gg_._position_start_zdqvw_gg_:before{top:0;display:block;background:var(--intergalactic-scroll-area-shadow-top,\n    linear-gradient(to bottom, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_zdqvw_gg_._position_end_zdqvw_gg_:after{bottom:0;display:block;background:var(--intergalactic-scroll-area-shadow-bottom,\n    linear-gradient(to top, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_zdqvw_gg_.__topOffset_zdqvw_gg_:before{top:var(--topOffset_zdqvw)}.___SShadowVertical_zdqvw_gg_.__bottomOffset_zdqvw_gg_:after{bottom:var(--bottomOffset_zdqvw)}.___SContainer_zdqvw_gg_{display:block;width:100%;height:100%;box-sizing:content-box;overflow:auto;-webkit-overflow-scrolling:touch;outline:0;scrollbar-width:none;-ms-overflow-style:none}.___SContainer_zdqvw_gg_::-webkit-scrollbar{display:none}.___SContainer_zdqvw_gg_.__keyboardFocused_zdqvw_gg_:focus::after{position:absolute;display:block;content:\"\";top:0;right:0;bottom:0;left:0;top:var(--focusRingTopOffset_zdqvw);right:var(--focusRingRightOffset_zdqvw);bottom:var(--focusRingBottomOffset_zdqvw);left:var(--focusRingLeftOffset_zdqvw);box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));pointer-events:none;z-index:2}" /*__inner_css_end__*/, "zdqvw_gg_") /*__reshadow_css_end__*/, {
+  "__SScrollArea": "___SScrollArea_zdqvw_gg_",
+  "__SShadowHorizontal": "___SShadowHorizontal_zdqvw_gg_",
+  "_leftOffset": "__leftOffset_zdqvw_gg_",
+  "--leftOffset": "--leftOffset_zdqvw",
+  "_rightOffset": "__rightOffset_zdqvw_gg_",
+  "--rightOffset": "--rightOffset_zdqvw",
+  "__SShadowVertical": "___SShadowVertical_zdqvw_gg_",
+  "_topOffset": "__topOffset_zdqvw_gg_",
+  "--topOffset": "--topOffset_zdqvw",
+  "_bottomOffset": "__bottomOffset_zdqvw_gg_",
+  "--bottomOffset": "--bottomOffset_zdqvw",
+  "__SContainer": "___SContainer_zdqvw_gg_",
+  "_keyboardFocused": "__keyboardFocused_zdqvw_gg_",
+  "--focusRingTopOffset": "--focusRingTopOffset_zdqvw",
+  "--focusRingRightOffset": "--focusRingRightOffset_zdqvw",
+  "--focusRingBottomOffset": "--focusRingBottomOffset_zdqvw",
+  "--focusRingLeftOffset": "--focusRingLeftOffset_zdqvw",
+  "_position_median": "_position_median_zdqvw_gg_",
+  "_position_start": "_position_start_zdqvw_gg_",
+  "_position_end": "_position_end_zdqvw_gg_"
 });
@@ -193,3 +193,6 @@ var eventCalculate = undefined;
     function calculateSizeContainer() {
-      var _parent$getBoundingCl;
+      var _this$asProps2 = this.asProps,
+        wMax = _this$asProps2.wMax,
+        hMax = _this$asProps2.hMax,
+        observeParentSize = _this$asProps2.observeParentSize;
       var size = {
@@ -205,16 +208,19 @@ width: '',
       var parent = this.$wrapper.parentElement;
-      var parentRect = (_parent$getBoundingCl = parent === null || parent === void 0 ? void 0 : parent.getBoundingClientRect()) !== null && _parent$getBoundingCl !== void 0 ? _parent$getBoundingCl : {
+      var parentRect = {
         width: 0,
         height: 0
       };
-      var _this$asProps2 = this.asProps,
-        wMax = _this$asProps2.wMax,
-        hMax = _this$asProps2.hMax;
-      if (wMax) this.setStyleSizeProperty(this.$wrapper, 'max-width', wMax);
-      if (hMax) this.setStyleSizeProperty(this.$wrapper, 'max-height', hMax);
+      if (observeParentSize) {
+        if (parent) {
+          parentRect = parent.getBoundingClientRect();
+        }
+        if (wMax) this.setStyleSizeProperty(this.$wrapper, 'max-width', wMax);
+        if (hMax) this.setStyleSizeProperty(this.$wrapper, 'max-height', hMax);
+      }
       var maxWidth = Number.parseInt(style.getPropertyValue('max-width'));
       var maxHeight = Number.parseInt(style.getPropertyValue('max-height'));
       if (maxWidth) {
-        if (wMax && parent.scrollWidth > parentRect.width) {
-          var diff = parent.scrollWidth - parentRect.width;
+        if (observeParentSize && wMax && parent.scrollWidth > parentRect.width) {
+          /** even if width is like 100.486px we should round it to 100, not 101 */
+          var diff = Math.round(parent.scrollWidth.toFixed(1)) - Math.round(parentRect.width.toFixed(1));
           if (diff < maxWidth) {
@@ -232,3 +238,3 @@ maxWidth = maxWidth - diff;
       if (maxHeight) {
-        if (hMax && parent.scrollHeight > parentRect.height) {
+        if (observeParentSize && hMax && parent.scrollHeight > parentRect.height) {
           /** even if height is like 100.486px we should round it to 100, not 101 */
@@ -363,3 +369,4 @@ var _diff = Math.round(parent.scrollHeight.toFixed(1)) - Math.round(parentRect.height.toFixed(1));
     inner: /*#__PURE__*/React.createRef(),
-    tabIndex: 0
+    tabIndex: 0,
+    observeParentSize: false
   };
@@ -366,0 +373,0 @@ });

lib/es6/ScrollBar.js

@@ -18,8 +18,8 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 /*__reshadow-styles__:"./style/scroll-bar.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SScrollBar_1j30l_gg_{position:absolute;display:flex}.___SScrollBar_1j30l_gg_._orientation_vertical_1j30l_gg_{top:var(--intergalactic-spacing-1x, 4px);right:0;width:8px;height:calc(100% - var(--offsetSum_1j30l) - var(--intergalactic-spacing-2x, 8px));justify-content:center}.___SScrollBar_1j30l_gg_._orientation_horizontal_1j30l_gg_{bottom:0;height:12px;align-items:center;width:calc(100% - var(--offsetSum_1j30l) - var(--intergalactic-spacing-2x, 8px))}.___SSlider_1j30l_gg_{cursor:pointer;width:6px;height:6px;border-radius:4px;background-color:var(--intergalactic-scroll-bar-background, rgba(25, 27, 35, 0.3))}" /*__inner_css_end__*/, "1j30l_gg_") /*__reshadow_css_end__*/, {
-  "__SScrollBar": "___SScrollBar_1j30l_gg_",
-  "_orientation_vertical": "_orientation_vertical_1j30l_gg_",
-  "--offsetSum": "--offsetSum_1j30l",
-  "_orientation_horizontal": "_orientation_horizontal_1j30l_gg_",
-  "__SSlider": "___SSlider_1j30l_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SScrollBar_11dzi_gg_{position:absolute;display:flex}.___SScrollBar_11dzi_gg_._orientation_vertical_11dzi_gg_{top:var(--intergalactic-spacing-1x, 4px);right:0;width:8px;height:calc(100% - var(--offsetSum_11dzi) - var(--intergalactic-spacing-2x, 8px));justify-content:center}.___SScrollBar_11dzi_gg_._orientation_horizontal_11dzi_gg_{bottom:0;height:12px;align-items:center;width:calc(100% - var(--offsetSum_11dzi) - var(--intergalactic-spacing-2x, 8px))}.___SSlider_11dzi_gg_{cursor:pointer;width:6px;height:6px;border-radius:4px;background-color:var(--intergalactic-scroll-bar-background, rgba(25, 27, 35, 0.3))}" /*__inner_css_end__*/, "11dzi_gg_") /*__reshadow_css_end__*/, {
+  "__SScrollBar": "___SScrollBar_11dzi_gg_",
+  "_orientation_vertical": "_orientation_vertical_11dzi_gg_",
+  "--offsetSum": "--offsetSum_11dzi",
+  "_orientation_horizontal": "_orientation_horizontal_11dzi_gg_",
+  "__SSlider": "___SSlider_11dzi_gg_"
 });
@@ -26,0 +26,0 @@ export var DEFAULT_SLIDER_SIZE = 50;

lib/types/index.d.ts

@@ -23,2 +23,8 @@ import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
 
+  /**
+   * Flag to enable resizing if the parent of ScrollArea is resized
+   * @default false
+   */
+  observeParentSize?: boolean;
+
   topOffset?: number;
@@ -25,0 +31,0 @@ rightOffset?: number;

package.json

 {
   "name": "@semcore/scroll-area",
   "description": "Semrush ScrollArea Component",
-  "version": "5.33.1",
+  "version": "5.34.0-prerelease.0",
   "main": "lib/cjs/index.js",
@@ -12,7 +12,7 @@ "module": "lib/es6/index.js",
   "dependencies": {
-    "@semcore/utils": "4.31.0",
-    "@semcore/flex-box": "5.30.0"
+    "@semcore/utils": "4.32.0-prerelease.0",
+    "@semcore/flex-box": "5.31.0-prerelease.0"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.17.5",
+    "@semcore/core": "^2.29.0-prerelease.0",
     "react": "16.8 - 18",
@@ -19,0 +19,0 @@ "react-dom": "16.8 - 18"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

244339

increased by0.83%

Lines of code

2109

increased by0.91%

Worsened metrics

Number of low quality alerts

2

increased by100%

Dependency changes

• + Added@semcore/flex-box@5.31.0-prerelease.0(transitive)

• + Added@semcore/utils@4.32.0-prerelease.0(transitive)

• - Removed@semcore/flex-box@5.30.0(transitive)

• - Removed@semcore/utils@4.31.0(transitive)

• Updated@semcore/flex-box@5.31.0-prerelease.0

• Updated@semcore/utils@4.32.0-prerelease.0