@sebgroup/green-react 3.15.0 → 3.16.0

package/README.md

@@ -1,5 +1,5 @@
 <div align="center">
-<img width="600" alt="green-react" src="https://github.com/sebgroup/green/assets/11420341/ad4c9fe3-137f-4230-9ea7-a4de87752aa9">
+<img width="600" alt="green-react" src="https://github.com/seb-oss/green/assets/11420341/ad4c9fe3-137f-4230-9ea7-a4de87752aa9">
 <h1>@sebgroup/green-react</h1>
 <p>
 React components with SEB's look and feel.

package/index.esm.js

@@ -9,6 +9,7 @@ import { GdsDropdown, GdsOption } from '@sebgroup/green-core/components/dropdown
 import { GdsContextMenu, GdsMenuItem, GdsMenuHeading } from '@sebgroup/green-core/components/context-menu/index.js';
 import classNames from 'classnames';
 import { GdsGroupedList, GdsListItem } from '@sebgroup/green-core/components/grouped-list/index.js';
+import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
 import { IconAirplaneUp as IconAirplaneUp$1 } from '@sebgroup/green-core/components/icon/icons/airplane-up.js';
 import { IconAppleMusic as IconAppleMusic$1 } from '@sebgroup/green-core/components/icon/icons/apple-music.js';
 import { IconArchive as IconArchive$1 } from '@sebgroup/green-core/components/icon/icons/archive.js';
@@ -2966,6 +2967,7 @@ var Modal = function Modal(_a) {
     _useState6 = _slicedToArray(_useState5, 2),
     shouldRender = _useState6[0],
     setShouldRender = _useState6[1];
+  var modalRef = useRef(null);
   useEffect(function () {
     if (isOpen && !shouldRender && status === UNMOUNTED) {
       setShouldRender(true);
@@ -2984,6 +2986,17 @@ var Modal = function Modal(_a) {
         setShouldRender(false);
       }, DELAY);
     }
+    if (isOpen && modalRef.current) {
+      // Disable scrolling on the body when the modal is open
+      disableBodyScroll(modalRef.current);
+    } else if (modalRef.current) {
+      // Enable scrolling on the body when the modal is closed
+      enableBodyScroll(modalRef.current);
+    }
+    return function () {
+      // Cleanup by enabling body scroll and removing all scroll locks
+      clearAllBodyScrollLocks();
+    };
   }, [isOpen, shouldRender, status]);
   if (!isOpen) return null;
   var bodyId = "".concat(uuid, "_body");
@@ -3006,6 +3019,7 @@ var Modal = function Modal(_a) {
         modalContent = jsxs("aside", Object.assign({
           className: className
         }, dialogProps, {
+          ref: modalRef,
           children: [jsx(ModalHeader, Object.assign({
             id: headerId,
             setStatus: setStatus,
@@ -3020,6 +3034,7 @@ var Modal = function Modal(_a) {
     case 'takeover':
       {
         modalContent = jsxs("main", Object.assign({}, dialogProps, {
+          ref: modalRef,
           children: [jsx(ModalHeader, Object.assign({
             id: headerId
           }, props)), jsx(ModalBody, Object.assign({
@@ -3032,6 +3047,7 @@ var Modal = function Modal(_a) {
       {
         modalContent = jsx("div", {
           className: "gds-dialog-wrapper",
+          ref: modalRef,
           children: jsxs("section", Object.assign({}, dialogProps, {
             children: [jsx(ModalHeader, Object.assign({
               id: headerId

package/package.json

@@ -1,21 +1,22 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "3.15.0",
+  "version": "3.16.0",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "dependencies": {
     "@sebgroup/green-core": "^1.38.1",
-    "@sebgroup/chlorophyll": "^3.4.1",
+    "@sebgroup/chlorophyll": "^3.6.2",
     "@sebgroup/extract": "^3.0.1",
     "@lit/react": "^1.0.2",
-    "classnames": "^2.3.2"
+    "classnames": "^2.3.2",
+    "body-scroll-lock": "^3.1.5"
   },
   "description": "React components built on top of @sebgroup/chlorophyll.",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/sebgroup/green.git"
+    "url": "git+https://github.com/seb-oss/green.git"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -26,7 +27,7 @@
   "contributors": [],
   "license": "Apache-2.0",
   "bugs": {
-    "url": "https://github.com/sebgroup/green/labels/react"
+    "url": "https://github.com/seb-oss/green/labels/react"
   },
   "homepage": "https://storybook.seb.io/latest/react/",
   "module": "./index.esm.js",