@kaizen/components 1.79.7 → 1.79.9

package/dist/cjs/src/Modal/GenericModal/GenericModal.cjs

@@ -5,6 +5,7 @@ var ReactDOM = require('react-dom');
 var react = require('@headlessui/react');
 var classnames = require('classnames');
 var FocusLock = require('react-focus-lock');
+var useIsClientReady = require('../../utils/useIsClientReady/useIsClientReady.cjs');
 var console = require('../util/console.cjs');
 var ModalContext = require('./context/ModalContext.cjs');
 var GenericModal_module = require('./GenericModal.module.scss.cjs');
@@ -31,6 +32,7 @@ var GenericModal = function (_a) {
   var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
   var labelledByID = React.useId();
   var describedByID = React.useId();
+  var isClientReady = useIsClientReady.useIsClientReady();
   var _c = React.useState(null),
     scrollLayer = _c[0],
     setScrollLayer = _c[1];
@@ -52,6 +54,7 @@ var GenericModal = function (_a) {
     }
   };
   var focusOnAccessibleLabel = function () {
+    if (!isClientReady) return;
     // Check if focus already exists within the modal
     if (modalLayer === null || modalLayer === void 0 ? void 0 : modalLayer.contains(document.activeElement)) {
       return;
@@ -60,6 +63,7 @@ var GenericModal = function (_a) {
     labelElement === null || labelElement === void 0 ? void 0 : labelElement.focus();
   };
   var a11yWarn = function () {
+    if (!isClientReady) return;
     // Ensure that consumers have provided an element that labels the modal
     // to meet ARIA accessibility guidelines.
     if (!document.getElementById(labelledByID)) {
@@ -68,6 +72,7 @@ var GenericModal = function (_a) {
   };
   var preventBodyScroll = function () {
     var _a;
+    if (!isClientReady) return;
     var hasScrollbar = window.innerWidth > document.documentElement.clientWidth;
     var scrollStyles = [GenericModal_module.unscrollable];
     if (hasScrollbar) {
@@ -90,28 +95,31 @@ var GenericModal = function (_a) {
   }, [onEscapeKeyup]);
   var onBeforeEnterHandler = function () {
     preventBodyScroll();
-    if (onEscapeKeyup) {
+    if (onEscapeKeyup && isClientReady) {
       document.addEventListener('keyup', escapeKeyHandler);
     }
   };
-  var cleanUpAfterClose = function () {
+  var cleanUpAfterClose = React.useCallback(function () {
+    if (!isClientReady) return;
     document.documentElement.classList.remove(GenericModal_module.unscrollable, GenericModal_module.pseudoScrollbar);
     if (onEscapeKeyup) {
       document.removeEventListener('keyup', escapeKeyHandler);
     }
-  };
+  }, [escapeKeyHandler, onEscapeKeyup, isClientReady]);
   /* Ensure sure add-on styles (e.g. unscrollable) and key event is cleaned up when the modal is unmounted*/
-  // @todo: Fix if possible - avoiding breaking in eslint upgrade
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   React.useEffect(function () {
     return function () {
       return cleanUpAfterClose();
     };
-  }, []);
+  }, [cleanUpAfterClose]);
   var onAfterLeaveHandler = function () {
     cleanUpAfterClose();
     propsOnAfterLeave === null || propsOnAfterLeave === void 0 ? void 0 : propsOnAfterLeave();
   };
+  // Don't render portal during SSR
+  if (!isClientReady) {
+    return React__default.default.createElement(React__default.default.Fragment, null);
+  }
   return ReactDOM.createPortal(React__default.default.createElement(react.Transition, {
     appear: true,
     show: isOpen,

package/dist/esm/src/Modal/GenericModal/GenericModal.mjs

@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom';
 import { Transition } from '@headlessui/react';
 import classnames from 'classnames';
 import FocusLock from 'react-focus-lock';
+import { useIsClientReady } from '../../utils/useIsClientReady/useIsClientReady.mjs';
 import { warn } from '../util/console.mjs';
 import { ModalContext } from './context/ModalContext.mjs';
 import styles from './GenericModal.module.scss.mjs';
@@ -22,6 +23,7 @@ const GenericModal = /*#__PURE__*/function () {
     var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
     var labelledByID = useId();
     var describedByID = useId();
+    var isClientReady = useIsClientReady();
     var _c = useState(null),
       scrollLayer = _c[0],
       setScrollLayer = _c[1];
@@ -43,6 +45,7 @@ const GenericModal = /*#__PURE__*/function () {
       }
     };
     var focusOnAccessibleLabel = function () {
+      if (!isClientReady) return;
       // Check if focus already exists within the modal
       if (modalLayer === null || modalLayer === void 0 ? void 0 : modalLayer.contains(document.activeElement)) {
         return;
@@ -51,6 +54,7 @@ const GenericModal = /*#__PURE__*/function () {
       labelElement === null || labelElement === void 0 ? void 0 : labelElement.focus();
     };
     var a11yWarn = function () {
+      if (!isClientReady) return;
       // Ensure that consumers have provided an element that labels the modal
       // to meet ARIA accessibility guidelines.
       if (!document.getElementById(labelledByID)) {
@@ -59,6 +63,7 @@ const GenericModal = /*#__PURE__*/function () {
     };
     var preventBodyScroll = function () {
       var _a;
+      if (!isClientReady) return;
       var hasScrollbar = window.innerWidth > document.documentElement.clientWidth;
       var scrollStyles = [styles.unscrollable];
       if (hasScrollbar) {
@@ -81,28 +86,31 @@ const GenericModal = /*#__PURE__*/function () {
     }, [onEscapeKeyup]);
     var onBeforeEnterHandler = function () {
       preventBodyScroll();
-      if (onEscapeKeyup) {
+      if (onEscapeKeyup && isClientReady) {
         document.addEventListener('keyup', escapeKeyHandler);
       }
     };
-    var cleanUpAfterClose = function () {
+    var cleanUpAfterClose = useCallback(function () {
+      if (!isClientReady) return;
       document.documentElement.classList.remove(styles.unscrollable, styles.pseudoScrollbar);
       if (onEscapeKeyup) {
         document.removeEventListener('keyup', escapeKeyHandler);
       }
-    };
+    }, [escapeKeyHandler, onEscapeKeyup, isClientReady]);
     /* Ensure sure add-on styles (e.g. unscrollable) and key event is cleaned up when the modal is unmounted*/
-    // @todo: Fix if possible - avoiding breaking in eslint upgrade
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(function () {
       return function () {
         return cleanUpAfterClose();
       };
-    }, []);
+    }, [cleanUpAfterClose]);
     var onAfterLeaveHandler = function () {
       cleanUpAfterClose();
       propsOnAfterLeave === null || propsOnAfterLeave === void 0 ? void 0 : propsOnAfterLeave();
     };
+    // Don't render portal during SSR
+    if (!isClientReady) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
     return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(Transition, {
       appear: true,
       show: isOpen,