@sebgroup/green-react 3.14.1 → 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';
@@ -1422,6 +1423,7 @@ var IconButton = function IconButton(_a) {
     "aria-controls": props['aria-controls'],
     "aria-expanded": props['aria-expanded'],
     type: (_b = props.type) !== null && _b !== void 0 ? _b : 'button',
+    title: props.title,
     children: children
   });
 };
@@ -2965,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);
@@ -2983,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");
@@ -3005,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,
@@ -3019,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({
@@ -3031,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.14.1",
+  "version": "3.16.0",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "dependencies": {
-    "@sebgroup/green-core": "^1.35.0",
-    "@sebgroup/chlorophyll": "^3.4.1",
+    "@sebgroup/green-core": "^1.38.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",

package/src/lib/form/iconButton/iconButton.d.ts

@@ -7,6 +7,7 @@ interface IconButtonInterface {
     'aria-expanded'?: boolean;
     'aria-controls'?: string;
     size?: 'small' | 'normal';
+    title?: string;
 }
 export declare const IconButton: ({ children, onClick, ...props }: IconButtonInterface) => import("react/jsx-runtime").JSX.Element;
 export {};