@semcore/scroll-area - npm Package Compare versions

Comparing version 5.29.1 to 5.30.0-prerelease.0

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## [5.30.0] - 2024-05-29
+
+### Added
+
+- Auto resizing for `ScrollArea` if the parent element changes its size.
+
 ## [5.29.1] - 2024-05-28
@@ -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_hxr3z_gg_{position:relative;width:100%;height:100%}.___SShadowHorizontal_hxr3z_gg_:after,.___SShadowHorizontal_hxr3z_gg_:before,.___SShadowVertical_hxr3z_gg_:after,.___SShadowVertical_hxr3z_gg_:before{content:\"\";position:absolute;pointer-events:none}.___SShadowHorizontal_hxr3z_gg_:after,.___SShadowHorizontal_hxr3z_gg_:before{top:0;display:block;width:5px;height:100%}.___SShadowHorizontal_hxr3z_gg_._position_median_hxr3z_gg_:before{left:0;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_hxr3z_gg_._position_median_hxr3z_gg_:after{right:0;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_hxr3z_gg_._position_start_hxr3z_gg_:before{left:0;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_hxr3z_gg_._position_end_hxr3z_gg_:after{right:0;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_hxr3z_gg_.__leftOffset_hxr3z_gg_:before{left:var(--leftOffset_hxr3z)}.___SShadowHorizontal_hxr3z_gg_.__rightOffset_hxr3z_gg_:after{right:var(--rightOffset_hxr3z)}.___SShadowVertical_hxr3z_gg_:after,.___SShadowVertical_hxr3z_gg_:before{left:0;display:block;width:100%;height:5px}.___SShadowVertical_hxr3z_gg_._position_median_hxr3z_gg_:before{top:0;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_hxr3z_gg_._position_median_hxr3z_gg_:after{bottom:0;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_hxr3z_gg_._position_start_hxr3z_gg_:before{top:0;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_hxr3z_gg_._position_end_hxr3z_gg_:after{bottom:0;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_hxr3z_gg_.__topOffset_hxr3z_gg_:before{top:var(--topOffset_hxr3z)}.___SShadowVertical_hxr3z_gg_.__bottomOffset_hxr3z_gg_:after{bottom:var(--bottomOffset_hxr3z)}.___SContainer_hxr3z_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_hxr3z_gg_::-webkit-scrollbar{display:none}.___SContainer_hxr3z_gg_.__keyboardFocused_hxr3z_gg_:focus::after{position:absolute;display:block;content:\"\";top:0;right:0;bottom:0;left:0;top:var(--focusRingTopOffset_hxr3z);right:var(--focusRingRightOffset_hxr3z);bottom:var(--focusRingBottomOffset_hxr3z);left:var(--focusRingLeftOffset_hxr3z);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__*/, "hxr3z_gg_") /*__reshadow_css_end__*/, {
-  "__SScrollArea": "___SScrollArea_hxr3z_gg_",
-  "__SShadowHorizontal": "___SShadowHorizontal_hxr3z_gg_",
-  "_leftOffset": "__leftOffset_hxr3z_gg_",
-  "--leftOffset": "--leftOffset_hxr3z",
-  "_rightOffset": "__rightOffset_hxr3z_gg_",
-  "--rightOffset": "--rightOffset_hxr3z",
-  "__SShadowVertical": "___SShadowVertical_hxr3z_gg_",
-  "_topOffset": "__topOffset_hxr3z_gg_",
-  "--topOffset": "--topOffset_hxr3z",
-  "_bottomOffset": "__bottomOffset_hxr3z_gg_",
-  "--bottomOffset": "--bottomOffset_hxr3z",
-  "__SContainer": "___SContainer_hxr3z_gg_",
-  "_keyboardFocused": "__keyboardFocused_hxr3z_gg_",
-  "--focusRingTopOffset": "--focusRingTopOffset_hxr3z",
-  "--focusRingRightOffset": "--focusRingRightOffset_hxr3z",
-  "--focusRingBottomOffset": "--focusRingBottomOffset_hxr3z",
-  "--focusRingLeftOffset": "--focusRingLeftOffset_hxr3z",
-  "_position_median": "_position_median_hxr3z_gg_",
-  "_position_start": "_position_start_hxr3z_gg_",
-  "_position_end": "_position_end_hxr3z_gg_"
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SScrollArea_15xg1_gg_{position:relative;width:100%;height:100%}.___SShadowHorizontal_15xg1_gg_:after,.___SShadowHorizontal_15xg1_gg_:before,.___SShadowVertical_15xg1_gg_:after,.___SShadowVertical_15xg1_gg_:before{content:\"\";position:absolute;display:none;pointer-events:none}.___SShadowHorizontal_15xg1_gg_:after,.___SShadowHorizontal_15xg1_gg_:before{top:0;width:5px;height:100%}.___SShadowHorizontal_15xg1_gg_._position_median_15xg1_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_15xg1_gg_._position_median_15xg1_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_15xg1_gg_._position_start_15xg1_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_15xg1_gg_._position_end_15xg1_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_15xg1_gg_.__leftOffset_15xg1_gg_:before{left:var(--leftOffset_15xg1)}.___SShadowHorizontal_15xg1_gg_.__rightOffset_15xg1_gg_:after{right:var(--rightOffset_15xg1)}.___SShadowVertical_15xg1_gg_:after,.___SShadowVertical_15xg1_gg_:before{left:0;width:100%;height:5px}.___SShadowVertical_15xg1_gg_._position_median_15xg1_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_15xg1_gg_._position_median_15xg1_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_15xg1_gg_._position_start_15xg1_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_15xg1_gg_._position_end_15xg1_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_15xg1_gg_.__topOffset_15xg1_gg_:before{top:var(--topOffset_15xg1)}.___SShadowVertical_15xg1_gg_.__bottomOffset_15xg1_gg_:after{bottom:var(--bottomOffset_15xg1)}.___SContainer_15xg1_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_15xg1_gg_::-webkit-scrollbar{display:none}.___SContainer_15xg1_gg_.__keyboardFocused_15xg1_gg_:focus::after{position:absolute;display:block;content:\"\";top:0;right:0;bottom:0;left:0;top:var(--focusRingTopOffset_15xg1);right:var(--focusRingRightOffset_15xg1);bottom:var(--focusRingBottomOffset_15xg1);left:var(--focusRingLeftOffset_15xg1);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__*/, "15xg1_gg_") /*__reshadow_css_end__*/, {
+  "__SScrollArea": "___SScrollArea_15xg1_gg_",
+  "__SShadowHorizontal": "___SShadowHorizontal_15xg1_gg_",
+  "_leftOffset": "__leftOffset_15xg1_gg_",
+  "--leftOffset": "--leftOffset_15xg1",
+  "_rightOffset": "__rightOffset_15xg1_gg_",
+  "--rightOffset": "--rightOffset_15xg1",
+  "__SShadowVertical": "___SShadowVertical_15xg1_gg_",
+  "_topOffset": "__topOffset_15xg1_gg_",
+  "--topOffset": "--topOffset_15xg1",
+  "_bottomOffset": "__bottomOffset_15xg1_gg_",
+  "--bottomOffset": "--bottomOffset_15xg1",
+  "__SContainer": "___SContainer_15xg1_gg_",
+  "_keyboardFocused": "__keyboardFocused_15xg1_gg_",
+  "--focusRingTopOffset": "--focusRingTopOffset_15xg1",
+  "--focusRingRightOffset": "--focusRingRightOffset_15xg1",
+  "--focusRingBottomOffset": "--focusRingBottomOffset_15xg1",
+  "--focusRingLeftOffset": "--focusRingLeftOffset_15xg1",
+  "_position_median": "_position_median_15xg1_gg_",
+  "_position_start": "_position_start_15xg1_gg_",
+  "_position_end": "_position_end_15xg1_gg_"
 });
@@ -86,2 +86,9 @@ var eventCalculate = undefined;
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setStyleSizeProperty", function (element, propertyKey, value) {
+      var propertyValue = value;
+      if (typeof value === 'number') {
+        propertyValue = value < 1 ? "".concat(100 * value, "%") : "".concat(value, "px");
+      }
+      element.style.setProperty(propertyKey, propertyValue);
+    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "calculate", (0, _rafTrottle["default"])(function () {
@@ -194,2 +201,3 @@ if (!_this.$container) return;
     function calculateSizeContainer() {
+      var _parent$getBoundingCl;
       var size = {
@@ -204,5 +212,22 @@ width: '',
       var style = window.getComputedStyle(this.$wrapper);
+      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 : {
+        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);
       var maxWidth = Number.parseInt(style.getPropertyValue('max-width'));
       var maxHeight = Number.parseInt(style.getPropertyValue('max-height'));
       if (maxWidth) {
+        if (parent.scrollWidth > parentRect.width) {
+          var diff = parent.scrollWidth - parentRect.width;
+          if (diff < maxWidth) {
+            maxWidth = maxWidth - diff;
+            this.$wrapper.style.setProperty('max-width', "".concat(maxWidth, "px"));
+          }
+        }
         if (scrollWidth > maxWidth) {
@@ -215,2 +240,9 @@ size.width = "".concat(maxWidth, "px");
       if (maxHeight) {
+        if (parent.scrollHeight > parentRect.height) {
+          var _diff = parent.scrollHeight - parentRect.height;
+          if (_diff < maxHeight) {
+            maxHeight = maxHeight - _diff;
+            this.$wrapper.style.setProperty('max-height', "".concat(maxHeight, "px"));
+          }
+        }
         if (scrollHeight > maxHeight) {
@@ -227,7 +259,7 @@ size.height = "".concat(maxHeight, "px");
     value: function getContainerProps() {
-      var _this$asProps2 = this.asProps,
-        container = _this$asProps2.container,
-        inner = _this$asProps2.inner,
-        onScroll = _this$asProps2.onScroll,
-        uid = _this$asProps2.uid;
+      var _this$asProps3 = this.asProps,
+        container = _this$asProps3.container,
+        inner = _this$asProps3.inner,
+        onScroll = _this$asProps3.onScroll,
+        uid = _this$asProps3.uid;
       return {
@@ -243,8 +275,8 @@ id: "igc-".concat(uid, "-scroll-container"),
     value: function getBarProps() {
-      var _this$asProps3 = this.asProps,
-        container = _this$asProps3.container,
-        orientation = _this$asProps3.orientation,
-        uid = _this$asProps3.uid,
-        leftOffset = _this$asProps3.leftOffset,
-        rightOffset = _this$asProps3.rightOffset;
+      var _this$asProps4 = this.asProps,
+        container = _this$asProps4.container,
+        orientation = _this$asProps4.orientation,
+        uid = _this$asProps4.uid,
+        leftOffset = _this$asProps4.leftOffset,
+        rightOffset = _this$asProps4.rightOffset;
       return {
@@ -296,12 +328,12 @@ container: container,
       var SShadowHorizontal = BoxWithoutPosition;
-      var _this$asProps4 = this.asProps,
-        Children = _this$asProps4.Children,
-        styles = _this$asProps4.styles,
-        orientation = _this$asProps4.orientation,
-        tabIndex = _this$asProps4.tabIndex,
-        forcedAdvancedMode = _this$asProps4.forcedAdvancedMode,
-        leftOffset = _this$asProps4.leftOffset,
-        rightOffset = _this$asProps4.rightOffset,
-        topOffset = _this$asProps4.topOffset,
-        bottomOffset = _this$asProps4.bottomOffset;
+      var _this$asProps5 = this.asProps,
+        Children = _this$asProps5.Children,
+        styles = _this$asProps5.styles,
+        orientation = _this$asProps5.orientation,
+        tabIndex = _this$asProps5.tabIndex,
+        forcedAdvancedMode = _this$asProps5.forcedAdvancedMode,
+        leftOffset = _this$asProps5.leftOffset,
+        rightOffset = _this$asProps5.rightOffset,
+        topOffset = _this$asProps5.topOffset,
+        bottomOffset = _this$asProps5.bottomOffset;
       var _this$state = this.state,
@@ -308,0 +340,0 @@ shadowVertical = _this$state.shadowVertical,

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_duqeo_gg_{position:absolute;display:flex}.___SScrollBar_duqeo_gg_._orientation_vertical_duqeo_gg_{top:var(--intergalactic-spacing-1x, 4px);right:0;width:8px;height:calc(100% - var(--offsetSum_duqeo) - var(--intergalactic-spacing-2x, 8px));justify-content:center}.___SScrollBar_duqeo_gg_._orientation_horizontal_duqeo_gg_{bottom:0;height:12px;align-items:center;width:calc(100% - var(--offsetSum_duqeo) - var(--intergalactic-spacing-2x, 8px))}.___SSlider_duqeo_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__*/, "duqeo_gg_") /*__reshadow_css_end__*/, {
-  "__SScrollBar": "___SScrollBar_duqeo_gg_",
-  "_orientation_vertical": "_orientation_vertical_duqeo_gg_",
-  "--offsetSum": "--offsetSum_duqeo",
-  "_orientation_horizontal": "_orientation_horizontal_duqeo_gg_",
-  "__SSlider": "___SSlider_duqeo_gg_"
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SScrollBar_s15o7_gg_{position:absolute;display:flex}.___SScrollBar_s15o7_gg_._orientation_vertical_s15o7_gg_{top:var(--intergalactic-spacing-1x, 4px);right:0;width:8px;height:calc(100% - var(--offsetSum_s15o7) - var(--intergalactic-spacing-2x, 8px));justify-content:center}.___SScrollBar_s15o7_gg_._orientation_horizontal_s15o7_gg_{bottom:0;height:12px;align-items:center;width:calc(100% - var(--offsetSum_s15o7) - var(--intergalactic-spacing-2x, 8px))}.___SSlider_s15o7_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__*/, "s15o7_gg_") /*__reshadow_css_end__*/, {
+  "__SScrollBar": "___SScrollBar_s15o7_gg_",
+  "_orientation_vertical": "_orientation_vertical_s15o7_gg_",
+  "--offsetSum": "--offsetSum_s15o7",
+  "_orientation_horizontal": "_orientation_horizontal_s15o7_gg_",
+  "__SSlider": "___SSlider_s15o7_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_hxr3z_gg_{position:relative;width:100%;height:100%}.___SShadowHorizontal_hxr3z_gg_:after,.___SShadowHorizontal_hxr3z_gg_:before,.___SShadowVertical_hxr3z_gg_:after,.___SShadowVertical_hxr3z_gg_:before{content:\"\";position:absolute;pointer-events:none}.___SShadowHorizontal_hxr3z_gg_:after,.___SShadowHorizontal_hxr3z_gg_:before{top:0;display:block;width:5px;height:100%}.___SShadowHorizontal_hxr3z_gg_._position_median_hxr3z_gg_:before{left:0;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_hxr3z_gg_._position_median_hxr3z_gg_:after{right:0;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_hxr3z_gg_._position_start_hxr3z_gg_:before{left:0;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_hxr3z_gg_._position_end_hxr3z_gg_:after{right:0;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_hxr3z_gg_.__leftOffset_hxr3z_gg_:before{left:var(--leftOffset_hxr3z)}.___SShadowHorizontal_hxr3z_gg_.__rightOffset_hxr3z_gg_:after{right:var(--rightOffset_hxr3z)}.___SShadowVertical_hxr3z_gg_:after,.___SShadowVertical_hxr3z_gg_:before{left:0;display:block;width:100%;height:5px}.___SShadowVertical_hxr3z_gg_._position_median_hxr3z_gg_:before{top:0;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_hxr3z_gg_._position_median_hxr3z_gg_:after{bottom:0;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_hxr3z_gg_._position_start_hxr3z_gg_:before{top:0;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_hxr3z_gg_._position_end_hxr3z_gg_:after{bottom:0;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_hxr3z_gg_.__topOffset_hxr3z_gg_:before{top:var(--topOffset_hxr3z)}.___SShadowVertical_hxr3z_gg_.__bottomOffset_hxr3z_gg_:after{bottom:var(--bottomOffset_hxr3z)}.___SContainer_hxr3z_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_hxr3z_gg_::-webkit-scrollbar{display:none}.___SContainer_hxr3z_gg_.__keyboardFocused_hxr3z_gg_:focus::after{position:absolute;display:block;content:\"\";top:0;right:0;bottom:0;left:0;top:var(--focusRingTopOffset_hxr3z);right:var(--focusRingRightOffset_hxr3z);bottom:var(--focusRingBottomOffset_hxr3z);left:var(--focusRingLeftOffset_hxr3z);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__*/, "hxr3z_gg_") /*__reshadow_css_end__*/, {
-  "__SScrollArea": "___SScrollArea_hxr3z_gg_",
-  "__SShadowHorizontal": "___SShadowHorizontal_hxr3z_gg_",
-  "_leftOffset": "__leftOffset_hxr3z_gg_",
-  "--leftOffset": "--leftOffset_hxr3z",
-  "_rightOffset": "__rightOffset_hxr3z_gg_",
-  "--rightOffset": "--rightOffset_hxr3z",
-  "__SShadowVertical": "___SShadowVertical_hxr3z_gg_",
-  "_topOffset": "__topOffset_hxr3z_gg_",
-  "--topOffset": "--topOffset_hxr3z",
-  "_bottomOffset": "__bottomOffset_hxr3z_gg_",
-  "--bottomOffset": "--bottomOffset_hxr3z",
-  "__SContainer": "___SContainer_hxr3z_gg_",
-  "_keyboardFocused": "__keyboardFocused_hxr3z_gg_",
-  "--focusRingTopOffset": "--focusRingTopOffset_hxr3z",
-  "--focusRingRightOffset": "--focusRingRightOffset_hxr3z",
-  "--focusRingBottomOffset": "--focusRingBottomOffset_hxr3z",
-  "--focusRingLeftOffset": "--focusRingLeftOffset_hxr3z",
-  "_position_median": "_position_median_hxr3z_gg_",
-  "_position_start": "_position_start_hxr3z_gg_",
-  "_position_end": "_position_end_hxr3z_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SScrollArea_15xg1_gg_{position:relative;width:100%;height:100%}.___SShadowHorizontal_15xg1_gg_:after,.___SShadowHorizontal_15xg1_gg_:before,.___SShadowVertical_15xg1_gg_:after,.___SShadowVertical_15xg1_gg_:before{content:\"\";position:absolute;display:none;pointer-events:none}.___SShadowHorizontal_15xg1_gg_:after,.___SShadowHorizontal_15xg1_gg_:before{top:0;width:5px;height:100%}.___SShadowHorizontal_15xg1_gg_._position_median_15xg1_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_15xg1_gg_._position_median_15xg1_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_15xg1_gg_._position_start_15xg1_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_15xg1_gg_._position_end_15xg1_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_15xg1_gg_.__leftOffset_15xg1_gg_:before{left:var(--leftOffset_15xg1)}.___SShadowHorizontal_15xg1_gg_.__rightOffset_15xg1_gg_:after{right:var(--rightOffset_15xg1)}.___SShadowVertical_15xg1_gg_:after,.___SShadowVertical_15xg1_gg_:before{left:0;width:100%;height:5px}.___SShadowVertical_15xg1_gg_._position_median_15xg1_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_15xg1_gg_._position_median_15xg1_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_15xg1_gg_._position_start_15xg1_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_15xg1_gg_._position_end_15xg1_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_15xg1_gg_.__topOffset_15xg1_gg_:before{top:var(--topOffset_15xg1)}.___SShadowVertical_15xg1_gg_.__bottomOffset_15xg1_gg_:after{bottom:var(--bottomOffset_15xg1)}.___SContainer_15xg1_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_15xg1_gg_::-webkit-scrollbar{display:none}.___SContainer_15xg1_gg_.__keyboardFocused_15xg1_gg_:focus::after{position:absolute;display:block;content:\"\";top:0;right:0;bottom:0;left:0;top:var(--focusRingTopOffset_15xg1);right:var(--focusRingRightOffset_15xg1);bottom:var(--focusRingBottomOffset_15xg1);left:var(--focusRingLeftOffset_15xg1);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__*/, "15xg1_gg_") /*__reshadow_css_end__*/, {
+  "__SScrollArea": "___SScrollArea_15xg1_gg_",
+  "__SShadowHorizontal": "___SShadowHorizontal_15xg1_gg_",
+  "_leftOffset": "__leftOffset_15xg1_gg_",
+  "--leftOffset": "--leftOffset_15xg1",
+  "_rightOffset": "__rightOffset_15xg1_gg_",
+  "--rightOffset": "--rightOffset_15xg1",
+  "__SShadowVertical": "___SShadowVertical_15xg1_gg_",
+  "_topOffset": "__topOffset_15xg1_gg_",
+  "--topOffset": "--topOffset_15xg1",
+  "_bottomOffset": "__bottomOffset_15xg1_gg_",
+  "--bottomOffset": "--bottomOffset_15xg1",
+  "__SContainer": "___SContainer_15xg1_gg_",
+  "_keyboardFocused": "__keyboardFocused_15xg1_gg_",
+  "--focusRingTopOffset": "--focusRingTopOffset_15xg1",
+  "--focusRingRightOffset": "--focusRingRightOffset_15xg1",
+  "--focusRingBottomOffset": "--focusRingBottomOffset_15xg1",
+  "--focusRingLeftOffset": "--focusRingLeftOffset_15xg1",
+  "_position_median": "_position_median_15xg1_gg_",
+  "_position_start": "_position_start_15xg1_gg_",
+  "_position_end": "_position_end_15xg1_gg_"
 });
@@ -79,2 +79,9 @@ var eventCalculate = undefined;
     });
+    _defineProperty(_assertThisInitialized(_this), "setStyleSizeProperty", function (element, propertyKey, value) {
+      var propertyValue = value;
+      if (typeof value === 'number') {
+        propertyValue = value < 1 ? "".concat(100 * value, "%") : "".concat(value, "px");
+      }
+      element.style.setProperty(propertyKey, propertyValue);
+    });
     _defineProperty(_assertThisInitialized(_this), "calculate", trottle(function () {
@@ -187,2 +194,3 @@ if (!_this.$container) return;
     function calculateSizeContainer() {
+      var _parent$getBoundingCl;
       var size = {
@@ -197,5 +205,22 @@ width: '',
       var style = window.getComputedStyle(this.$wrapper);
+      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 : {
+        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);
       var maxWidth = Number.parseInt(style.getPropertyValue('max-width'));
       var maxHeight = Number.parseInt(style.getPropertyValue('max-height'));
       if (maxWidth) {
+        if (parent.scrollWidth > parentRect.width) {
+          var diff = parent.scrollWidth - parentRect.width;
+          if (diff < maxWidth) {
+            maxWidth = maxWidth - diff;
+            this.$wrapper.style.setProperty('max-width', "".concat(maxWidth, "px"));
+          }
+        }
         if (scrollWidth > maxWidth) {
@@ -208,2 +233,9 @@ size.width = "".concat(maxWidth, "px");
       if (maxHeight) {
+        if (parent.scrollHeight > parentRect.height) {
+          var _diff = parent.scrollHeight - parentRect.height;
+          if (_diff < maxHeight) {
+            maxHeight = maxHeight - _diff;
+            this.$wrapper.style.setProperty('max-height', "".concat(maxHeight, "px"));
+          }
+        }
         if (scrollHeight > maxHeight) {
@@ -220,7 +252,7 @@ size.height = "".concat(maxHeight, "px");
     value: function getContainerProps() {
-      var _this$asProps2 = this.asProps,
-        container = _this$asProps2.container,
-        inner = _this$asProps2.inner,
-        onScroll = _this$asProps2.onScroll,
-        uid = _this$asProps2.uid;
+      var _this$asProps3 = this.asProps,
+        container = _this$asProps3.container,
+        inner = _this$asProps3.inner,
+        onScroll = _this$asProps3.onScroll,
+        uid = _this$asProps3.uid;
       return {
@@ -236,8 +268,8 @@ id: "igc-".concat(uid, "-scroll-container"),
     value: function getBarProps() {
-      var _this$asProps3 = this.asProps,
-        container = _this$asProps3.container,
-        orientation = _this$asProps3.orientation,
-        uid = _this$asProps3.uid,
-        leftOffset = _this$asProps3.leftOffset,
-        rightOffset = _this$asProps3.rightOffset;
+      var _this$asProps4 = this.asProps,
+        container = _this$asProps4.container,
+        orientation = _this$asProps4.orientation,
+        uid = _this$asProps4.uid,
+        leftOffset = _this$asProps4.leftOffset,
+        rightOffset = _this$asProps4.rightOffset;
       return {
@@ -289,12 +321,12 @@ container: container,
       var SShadowHorizontal = BoxWithoutPosition;
-      var _this$asProps4 = this.asProps,
-        Children = _this$asProps4.Children,
-        styles = _this$asProps4.styles,
-        orientation = _this$asProps4.orientation,
-        tabIndex = _this$asProps4.tabIndex,
-        forcedAdvancedMode = _this$asProps4.forcedAdvancedMode,
-        leftOffset = _this$asProps4.leftOffset,
-        rightOffset = _this$asProps4.rightOffset,
-        topOffset = _this$asProps4.topOffset,
-        bottomOffset = _this$asProps4.bottomOffset;
+      var _this$asProps5 = this.asProps,
+        Children = _this$asProps5.Children,
+        styles = _this$asProps5.styles,
+        orientation = _this$asProps5.orientation,
+        tabIndex = _this$asProps5.tabIndex,
+        forcedAdvancedMode = _this$asProps5.forcedAdvancedMode,
+        leftOffset = _this$asProps5.leftOffset,
+        rightOffset = _this$asProps5.rightOffset,
+        topOffset = _this$asProps5.topOffset,
+        bottomOffset = _this$asProps5.bottomOffset;
       var _this$state = this.state,
@@ -301,0 +333,0 @@ shadowVertical = _this$state.shadowVertical,

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_duqeo_gg_{position:absolute;display:flex}.___SScrollBar_duqeo_gg_._orientation_vertical_duqeo_gg_{top:var(--intergalactic-spacing-1x, 4px);right:0;width:8px;height:calc(100% - var(--offsetSum_duqeo) - var(--intergalactic-spacing-2x, 8px));justify-content:center}.___SScrollBar_duqeo_gg_._orientation_horizontal_duqeo_gg_{bottom:0;height:12px;align-items:center;width:calc(100% - var(--offsetSum_duqeo) - var(--intergalactic-spacing-2x, 8px))}.___SSlider_duqeo_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__*/, "duqeo_gg_") /*__reshadow_css_end__*/, {
-  "__SScrollBar": "___SScrollBar_duqeo_gg_",
-  "_orientation_vertical": "_orientation_vertical_duqeo_gg_",
-  "--offsetSum": "--offsetSum_duqeo",
-  "_orientation_horizontal": "_orientation_horizontal_duqeo_gg_",
-  "__SSlider": "___SSlider_duqeo_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SScrollBar_s15o7_gg_{position:absolute;display:flex}.___SScrollBar_s15o7_gg_._orientation_vertical_s15o7_gg_{top:var(--intergalactic-spacing-1x, 4px);right:0;width:8px;height:calc(100% - var(--offsetSum_s15o7) - var(--intergalactic-spacing-2x, 8px));justify-content:center}.___SScrollBar_s15o7_gg_._orientation_horizontal_s15o7_gg_{bottom:0;height:12px;align-items:center;width:calc(100% - var(--offsetSum_s15o7) - var(--intergalactic-spacing-2x, 8px))}.___SSlider_s15o7_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__*/, "s15o7_gg_") /*__reshadow_css_end__*/, {
+  "__SScrollBar": "___SScrollBar_s15o7_gg_",
+  "_orientation_vertical": "_orientation_vertical_s15o7_gg_",
+  "--offsetSum": "--offsetSum_s15o7",
+  "_orientation_horizontal": "_orientation_horizontal_s15o7_gg_",
+  "__SSlider": "___SSlider_s15o7_gg_"
 });
@@ -26,0 +26,0 @@ export var DEFAULT_SLIDER_SIZE = 50;

package.json

 {
   "name": "@semcore/scroll-area",
   "description": "Semrush ScrollArea Component",
-  "version": "5.29.1",
+  "version": "5.30.0-prerelease.0",
   "main": "lib/cjs/index.js",
@@ -6,0 +6,0 @@ "module": "lib/es6/index.js",

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

240328

increased by4.03%

Lines of code

2088

increased by3.98%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes