glints-aries 4.0.281 → 4.0.282

package/es/@next/Modal/Modal.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["isOpen", "header", "headerDescription", "children", "secondaryAction", "primaryAction", "customActions", "showBackButton", "showCloseButton", "showHeaderBorder", "closeOnClickOutside", "onClose", "onBack", "zIndexOverride"];
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Button, PrimaryButton } from '../Button';
 import { ButtonGroup } from '../ButtonGroup';
 import { Icon } from '../Icon';
@@ -27,6 +27,26 @@ export var Modal = /*#__PURE__*/React.forwardRef(function Modal(_ref, ref) {
     _ref$zIndexOverride = _ref.zIndexOverride,
     zIndexOverride = _ref$zIndexOverride === void 0 ? 999 : _ref$zIndexOverride,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState(false),
+    isContentHasScrollbar = _useState[0],
+    setIsContentHasScrollbar = _useState[1];
+  var modalContentRef = useRef(null);
+  useEffect(function () {
+    var checkScrollbar = function checkScrollbar() {
+      var modalContent = modalContentRef.current;
+      if (modalContent) {
+        setIsContentHasScrollbar(modalContent.scrollHeight > modalContent.clientHeight);
+      }
+    };
+    checkScrollbar();
+    var handleResize = function handleResize() {
+      return checkScrollbar();
+    };
+    window.addEventListener('resize', handleResize);
+    return function () {
+      window.removeEventListener('resize', handleResize);
+    };
+  });
   useEffect(function () {
     if (typeof window === 'undefined' || !window.document) return;
     var enableScroll = function enableScroll() {
@@ -100,6 +120,8 @@ export var Modal = /*#__PURE__*/React.forwardRef(function Modal(_ref, ref) {
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "ri-close"
   })))), /*#__PURE__*/React.createElement(StyledModalContent, {
-    className: "modal-content"
+    className: "modal-content",
+    ref: modalContentRef,
+    "data-has-scrollbar": isContentHasScrollbar
   }, content), hasActions && /*#__PURE__*/React.createElement(StyledModalActions, null, actionsContent))));
 });

package/es/@next/Modal/ModalStyle.js

@@ -12,7 +12,7 @@ export var StyledModalWrapper = styled.div.withConfig({
 export var StyledModalContainer = styled.div.withConfig({
   displayName: "ModalStyle__StyledModalContainer",
   componentId: "sc-1694up4-1"
-})(["position:relative;background:", ";display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:0;box-shadow:0px 26px 80px rgba(0,0,0,0.2),0px 0px 1px rgba(0,0,0,0.2);border-radius:", ";min-width:320px;width:fit-content;max-width:calc(100vw - 32px);height:fit-content;max-height:calc(100vh - 96px);overflow:hidden;"], Neutral.B100, borderRadius8);
+})(["position:relative;background:", ";display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:0;box-shadow:0px 26px 80px rgba(0,0,0,0.2),0px 0px 1px rgba(0,0,0,0.2);border-radius:", ";min-width:320px;width:fit-content;max-width:calc(100vw - 32px);height:fit-content;max-height:calc(100vh - 96px);overflow:hidden;@media (max-width:", "){position:fixed;bottom:0;width:100vw;max-width:none;max-height:calc(100vh - 70px);border-radius:0;}"], Neutral.B100, borderRadius8, Breakpoints.large);
 export var StyledModalHeader = styled.div.withConfig({
   displayName: "ModalStyle__StyledModalHeader",
   componentId: "sc-1694up4-2"
@@ -20,7 +20,7 @@ export var StyledModalHeader = styled.div.withConfig({
 export var StyledModalContent = styled.div.withConfig({
   displayName: "ModalStyle__StyledModalContent",
   componentId: "sc-1694up4-3"
-})(["min-height:24px;color:#202223;width:fit-content;padding:20px;overflow:auto;@media (max-width:", "){padding:20px ", ";}"], Breakpoints.large, space16);
+})(["min-height:24px;color:#202223;width:fit-content;padding:20px;overflow:auto;::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-thumb{background-color:", ";border-radius:2px;}::-webkit-scrollbar-thumb:hover{background-color:", ";}@media (max-width:", "){padding:20px 16px;&[data-has-scrollbar='true']{padding:20px 6px 20px 16px;width:calc(100vw - 27px);}}"], Neutral.B68, Neutral.B40, Breakpoints.large);
 export var StyledModalActions = styled.div.withConfig({
   displayName: "ModalStyle__StyledModalActions",
   componentId: "sc-1694up4-4"

package/lib/@next/Modal/Modal.js

@@ -34,6 +34,26 @@ var Modal = /*#__PURE__*/_react["default"].forwardRef(function Modal(_ref, ref)
     _ref$zIndexOverride = _ref.zIndexOverride,
     zIndexOverride = _ref$zIndexOverride === void 0 ? 999 : _ref$zIndexOverride,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _useState = (0, _react.useState)(false),
+    isContentHasScrollbar = _useState[0],
+    setIsContentHasScrollbar = _useState[1];
+  var modalContentRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var checkScrollbar = function checkScrollbar() {
+      var modalContent = modalContentRef.current;
+      if (modalContent) {
+        setIsContentHasScrollbar(modalContent.scrollHeight > modalContent.clientHeight);
+      }
+    };
+    checkScrollbar();
+    var handleResize = function handleResize() {
+      return checkScrollbar();
+    };
+    window.addEventListener('resize', handleResize);
+    return function () {
+      window.removeEventListener('resize', handleResize);
+    };
+  });
   (0, _react.useEffect)(function () {
     if (typeof window === 'undefined' || !window.document) return;
     var enableScroll = function enableScroll() {
@@ -107,7 +127,9 @@ var Modal = /*#__PURE__*/_react["default"].forwardRef(function Modal(_ref, ref)
   }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
     name: "ri-close"
   })))), /*#__PURE__*/_react["default"].createElement(_ModalStyle.StyledModalContent, {
-    className: "modal-content"
+    className: "modal-content",
+    ref: modalContentRef,
+    "data-has-scrollbar": isContentHasScrollbar
   }, content), hasActions && /*#__PURE__*/_react["default"].createElement(_ModalStyle.StyledModalActions, null, actionsContent))));
 });
 exports.Modal = Modal;

package/lib/@next/Modal/ModalStyle.js

@@ -20,7 +20,7 @@ exports.StyledModalWrapper = StyledModalWrapper;
 var StyledModalContainer = _styledComponents["default"].div.withConfig({
   displayName: "ModalStyle__StyledModalContainer",
   componentId: "sc-1694up4-1"
-})(["position:relative;background:", ";display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:0;box-shadow:0px 26px 80px rgba(0,0,0,0.2),0px 0px 1px rgba(0,0,0,0.2);border-radius:", ";min-width:320px;width:fit-content;max-width:calc(100vw - 32px);height:fit-content;max-height:calc(100vh - 96px);overflow:hidden;"], _colors.Neutral.B100, _borderRadius.borderRadius8);
+})(["position:relative;background:", ";display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:0;box-shadow:0px 26px 80px rgba(0,0,0,0.2),0px 0px 1px rgba(0,0,0,0.2);border-radius:", ";min-width:320px;width:fit-content;max-width:calc(100vw - 32px);height:fit-content;max-height:calc(100vh - 96px);overflow:hidden;@media (max-width:", "){position:fixed;bottom:0;width:100vw;max-width:none;max-height:calc(100vh - 70px);border-radius:0;}"], _colors.Neutral.B100, _borderRadius.borderRadius8, Breakpoints.large);
 exports.StyledModalContainer = StyledModalContainer;
 var StyledModalHeader = _styledComponents["default"].div.withConfig({
   displayName: "ModalStyle__StyledModalHeader",
@@ -30,7 +30,7 @@ exports.StyledModalHeader = StyledModalHeader;
 var StyledModalContent = _styledComponents["default"].div.withConfig({
   displayName: "ModalStyle__StyledModalContent",
   componentId: "sc-1694up4-3"
-})(["min-height:24px;color:#202223;width:fit-content;padding:20px;overflow:auto;@media (max-width:", "){padding:20px ", ";}"], Breakpoints.large, _spacing.space16);
+})(["min-height:24px;color:#202223;width:fit-content;padding:20px;overflow:auto;::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-thumb{background-color:", ";border-radius:2px;}::-webkit-scrollbar-thumb:hover{background-color:", ";}@media (max-width:", "){padding:20px 16px;&[data-has-scrollbar='true']{padding:20px 6px 20px 16px;width:calc(100vw - 27px);}}"], _colors.Neutral.B68, _colors.Neutral.B40, Breakpoints.large);
 exports.StyledModalContent = StyledModalContent;
 var StyledModalActions = _styledComponents["default"].div.withConfig({
   displayName: "ModalStyle__StyledModalActions",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.0.281",
+  "version": "4.0.282",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",