@kaizen/components 1.75.1 → 1.75.2

package/dist/cjs/Modal/ConfirmationModal/ConfirmationModal.module.scss.cjs

@@ -6,12 +6,14 @@ var styles = {
   "scrollLayer": "ConfirmationModal-module_scrollLayer__x-yP4",
   "modalLayer": "ConfirmationModal-module_modalLayer__MucTZ",
   "modal": "ConfirmationModal-module_modal__k3pXu",
-  "animatingEnter": "ConfirmationModal-module_animatingEnter__4W4xh",
+  "transitionLayer": "ConfirmationModal-module_transitionLayer__Ue95T",
   "fade-0-to-0-5": "ConfirmationModal-module_fade-0-to-0-5__353tZ",
   "custom-1": "ConfirmationModal-module_custom-1__Ibcy-",
+  "animatingEnter": "ConfirmationModal-module_animatingEnter__4W4xh",
+  "custom-3": "ConfirmationModal-module_custom-3__MEO7v",
   "animatingLeave": "ConfirmationModal-module_animatingLeave__n-S4X",
   "fade-0-5-to-0": "ConfirmationModal-module_fade-0-5-to-0__pfhV-",
-  "custom-3": "ConfirmationModal-module_custom-3__MEO7v",
+  "custom-5": "ConfirmationModal-module_custom-5__zbG38",
   "unscrollable": "ConfirmationModal-module_unscrollable__wg2AZ",
   "pseudoScrollbar": "ConfirmationModal-module_pseudoScrollbar__NqMuT",
   "hide": "ConfirmationModal-module_hide__jOdWV",

package/dist/cjs/Modal/ContextModal/ContextModal.module.scss.cjs

@@ -6,17 +6,19 @@ var styles = {
   "scrollLayer": "ContextModal-module_scrollLayer__JANXA",
   "modalLayer": "ContextModal-module_modalLayer__Cx6aX",
   "modal": "ContextModal-module_modal__wriV7",
-  "animatingEnter": "ContextModal-module_animatingEnter__53BlF",
+  "transitionLayer": "ContextModal-module_transitionLayer__IjJem",
   "fade-0-to-0-5": "ContextModal-module_fade-0-to-0-5__vZx9M",
   "custom-1": "ContextModal-module_custom-1__be8sO",
+  "animatingEnter": "ContextModal-module_animatingEnter__53BlF",
+  "custom-3": "ContextModal-module_custom-3__klp3m",
   "animatingLeave": "ContextModal-module_animatingLeave__-JR11",
   "fade-0-5-to-0": "ContextModal-module_fade-0-5-to-0__R4eO-",
-  "custom-3": "ContextModal-module_custom-3__klp3m",
+  "custom-5": "ContextModal-module_custom-5__deZpl",
   "unscrollable": "ContextModal-module_unscrollable__kF7MR",
   "pseudoScrollbar": "ContextModal-module_pseudoScrollbar__6RfHj",
   "hide": "ContextModal-module_hide__Sdnsg",
-  "custom-5": "ContextModal-module_custom-5__deZpl",
   "custom-7": "ContextModal-module_custom-7__rPmP4",
+  "custom-9": "ContextModal-module_custom-9__QZcNq",
   "header": "ContextModal-module_header__V4IRF",
   "padded": "ContextModal-module_padded__osmk1",
   "footerWithSecondaryAction": "ContextModal-module_footerWithSecondaryAction__-5sq8",

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

@@ -3,6 +3,7 @@
 var React = require('react');
 var ReactDOM = require('react-dom');
 var react = require('@headlessui/react');
+var classnames = require('classnames');
 var FocusLock = require('react-focus-lock');
 var console = require('../util/console.cjs');
 var ModalContext = require('./context/ModalContext.cjs');
@@ -13,6 +14,7 @@ function _interopDefault(e) {
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var FocusLock__default = /*#__PURE__*/_interopDefault(FocusLock);
 var GenericModal = function (_a) {
   var propsId = _a.id,
@@ -81,20 +83,21 @@ var GenericModal = function (_a) {
       a11yWarn();
     }
   };
+  var escapeKeyHandler = React.useCallback(function (event) {
+    if (event.key === 'Escape') {
+      onEscapeKeyup === null || onEscapeKeyup === void 0 ? void 0 : onEscapeKeyup(event);
+    }
+  }, [onEscapeKeyup]);
   var onBeforeEnterHandler = function () {
     preventBodyScroll();
     if (onEscapeKeyup) {
-      document.addEventListener('keyup', function (event) {
-        if (event.key === 'Escape') {
-          onEscapeKeyup === null || onEscapeKeyup === void 0 ? void 0 : onEscapeKeyup(event);
-        }
-      });
+      document.addEventListener('keyup', escapeKeyHandler);
     }
   };
   var cleanUpAfterClose = function () {
     document.documentElement.classList.remove(GenericModal_module.unscrollable, GenericModal_module.pseudoScrollbar);
     if (onEscapeKeyup) {
-      document.removeEventListener('keyup', onEscapeKeyup);
+      document.removeEventListener('keyup', escapeKeyHandler);
     }
   };
   /* Ensure sure add-on styles (e.g. unscrollable) and key event is cleaned up when the modal is unmounted*/
@@ -112,16 +115,14 @@ var GenericModal = function (_a) {
   return ReactDOM.createPortal(React__default.default.createElement(react.Transition, {
     appear: true,
     show: isOpen,
-    enter: GenericModal_module.animatingEnter,
-    leave: GenericModal_module.animatingLeave,
     beforeEnter: onBeforeEnterHandler,
     afterEnter: onAfterEnterHandler,
     afterLeave: onAfterLeaveHandler,
     "data-generic-modal-transition-wrapper": true,
-    onClick: function (e) {
-      return e.stopPropagation();
-    },
-    className: className
+    enter: GenericModal_module.animatingEnter,
+    leave: GenericModal_module.animatingLeave,
+    as: "div",
+    className: classnames__default.default(GenericModal_module.transitionLayer, className)
   }, React__default.default.createElement(FocusLock__default.default, {
     disabled: focusLockDisabled,
     returnFocus: true,

package/dist/cjs/Modal/GenericModal/GenericModal.module.scss.cjs

@@ -4,6 +4,7 @@ var styles = {
   "backdropLayer": "GenericModal-module_backdropLayer__RNQ-U",
   "scrollLayer": "GenericModal-module_scrollLayer__A5VdY",
   "modalLayer": "GenericModal-module_modalLayer__WfD1U",
+  "transitionLayer": "GenericModal-module_transitionLayer__zTH-C",
   "animatingEnter": "GenericModal-module_animatingEnter__P3wuk",
   "animatingLeave": "GenericModal-module_animatingLeave__rNkKX",
   "unscrollable": "GenericModal-module_unscrollable__HjRaW",

package/dist/esm/Modal/ConfirmationModal/ConfirmationModal.module.scss.mjs

@@ -4,12 +4,14 @@ var styles = {
   "scrollLayer": "ConfirmationModal-module_scrollLayer__x-yP4",
   "modalLayer": "ConfirmationModal-module_modalLayer__MucTZ",
   "modal": "ConfirmationModal-module_modal__k3pXu",
-  "animatingEnter": "ConfirmationModal-module_animatingEnter__4W4xh",
+  "transitionLayer": "ConfirmationModal-module_transitionLayer__Ue95T",
   "fade-0-to-0-5": "ConfirmationModal-module_fade-0-to-0-5__353tZ",
   "custom-1": "ConfirmationModal-module_custom-1__Ibcy-",
+  "animatingEnter": "ConfirmationModal-module_animatingEnter__4W4xh",
+  "custom-3": "ConfirmationModal-module_custom-3__MEO7v",
   "animatingLeave": "ConfirmationModal-module_animatingLeave__n-S4X",
   "fade-0-5-to-0": "ConfirmationModal-module_fade-0-5-to-0__pfhV-",
-  "custom-3": "ConfirmationModal-module_custom-3__MEO7v",
+  "custom-5": "ConfirmationModal-module_custom-5__zbG38",
   "unscrollable": "ConfirmationModal-module_unscrollable__wg2AZ",
   "pseudoScrollbar": "ConfirmationModal-module_pseudoScrollbar__NqMuT",
   "hide": "ConfirmationModal-module_hide__jOdWV",

package/dist/esm/Modal/ContextModal/ContextModal.module.scss.mjs

@@ -4,17 +4,19 @@ var styles = {
   "scrollLayer": "ContextModal-module_scrollLayer__JANXA",
   "modalLayer": "ContextModal-module_modalLayer__Cx6aX",
   "modal": "ContextModal-module_modal__wriV7",
-  "animatingEnter": "ContextModal-module_animatingEnter__53BlF",
+  "transitionLayer": "ContextModal-module_transitionLayer__IjJem",
   "fade-0-to-0-5": "ContextModal-module_fade-0-to-0-5__vZx9M",
   "custom-1": "ContextModal-module_custom-1__be8sO",
+  "animatingEnter": "ContextModal-module_animatingEnter__53BlF",
+  "custom-3": "ContextModal-module_custom-3__klp3m",
   "animatingLeave": "ContextModal-module_animatingLeave__-JR11",
   "fade-0-5-to-0": "ContextModal-module_fade-0-5-to-0__R4eO-",
-  "custom-3": "ContextModal-module_custom-3__klp3m",
+  "custom-5": "ContextModal-module_custom-5__deZpl",
   "unscrollable": "ContextModal-module_unscrollable__kF7MR",
   "pseudoScrollbar": "ContextModal-module_pseudoScrollbar__6RfHj",
   "hide": "ContextModal-module_hide__Sdnsg",
-  "custom-5": "ContextModal-module_custom-5__deZpl",
   "custom-7": "ContextModal-module_custom-7__rPmP4",
+  "custom-9": "ContextModal-module_custom-9__QZcNq",
   "header": "ContextModal-module_header__V4IRF",
   "padded": "ContextModal-module_padded__osmk1",
   "footerWithSecondaryAction": "ContextModal-module_footerWithSecondaryAction__-5sq8",

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

@@ -1,6 +1,7 @@
-import React, { useId, useState, useEffect } from 'react';
+import React, { useId, useState, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { Transition } from '@headlessui/react';
+import classnames from 'classnames';
 import FocusLock from 'react-focus-lock';
 import { warn } from '../util/console.mjs';
 import { ModalContext } from './context/ModalContext.mjs';
@@ -73,20 +74,21 @@ const GenericModal = /*#__PURE__*/function () {
         a11yWarn();
       }
     };
+    var escapeKeyHandler = useCallback(function (event) {
+      if (event.key === 'Escape') {
+        onEscapeKeyup === null || onEscapeKeyup === void 0 ? void 0 : onEscapeKeyup(event);
+      }
+    }, [onEscapeKeyup]);
     var onBeforeEnterHandler = function () {
       preventBodyScroll();
       if (onEscapeKeyup) {
-        document.addEventListener('keyup', function (event) {
-          if (event.key === 'Escape') {
-            onEscapeKeyup === null || onEscapeKeyup === void 0 ? void 0 : onEscapeKeyup(event);
-          }
-        });
+        document.addEventListener('keyup', escapeKeyHandler);
       }
     };
     var cleanUpAfterClose = function () {
       document.documentElement.classList.remove(styles.unscrollable, styles.pseudoScrollbar);
       if (onEscapeKeyup) {
-        document.removeEventListener('keyup', onEscapeKeyup);
+        document.removeEventListener('keyup', escapeKeyHandler);
       }
     };
     /* Ensure sure add-on styles (e.g. unscrollable) and key event is cleaned up when the modal is unmounted*/
@@ -104,16 +106,14 @@ const GenericModal = /*#__PURE__*/function () {
     return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(Transition, {
       appear: true,
       show: isOpen,
-      enter: styles.animatingEnter,
-      leave: styles.animatingLeave,
       beforeEnter: onBeforeEnterHandler,
       afterEnter: onAfterEnterHandler,
       afterLeave: onAfterLeaveHandler,
       "data-generic-modal-transition-wrapper": true,
-      onClick: function (e) {
-        return e.stopPropagation();
-      },
-      className: className
+      enter: styles.animatingEnter,
+      leave: styles.animatingLeave,
+      as: "div",
+      className: classnames(styles.transitionLayer, className)
     }, /*#__PURE__*/React.createElement(FocusLock, {
       disabled: focusLockDisabled,
       returnFocus: true,

package/dist/esm/Modal/GenericModal/GenericModal.module.scss.mjs

@@ -2,6 +2,7 @@ var styles = {
   "backdropLayer": "GenericModal-module_backdropLayer__RNQ-U",
   "scrollLayer": "GenericModal-module_scrollLayer__A5VdY",
   "modalLayer": "GenericModal-module_modalLayer__WfD1U",
+  "transitionLayer": "GenericModal-module_transitionLayer__zTH-C",
   "animatingEnter": "GenericModal-module_animatingEnter__P3wuk",
   "animatingLeave": "GenericModal-module_animatingLeave__rNkKX",
   "unscrollable": "GenericModal-module_unscrollable__HjRaW",

package/dist/styles.css

@@ -6240,10 +6240,11 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   width: 100%;
 }
 
-.GenericModal-module_animatingEnter__P3wuk {
-  transition-duration: var(--animation-duration-fast, 300ms);
+.GenericModal-module_transitionLayer__zTH-C {
+  transition: opacity var(--animation-duration-fast, 300ms) ease-in-out;
+  opacity: 1;
 }
-.GenericModal-module_animatingEnter__P3wuk .GenericModal-module_backdropLayer__RNQ-U {
+.GenericModal-module_transitionLayer__zTH-C .GenericModal-module_backdropLayer__RNQ-U {
   /*
     There's a weird bug in Chrome/Blink 102.x that animates the opacity
     all the way to 1 with 200ms ("rapid" token), but is fine with
@@ -6262,7 +6263,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
     opacity: 0.5;
   }
 }
-.GenericModal-module_animatingEnter__P3wuk [data-modal] {
+.GenericModal-module_transitionLayer__zTH-C [data-modal] {
   animation-duration: var(--animation-duration-fast, 300ms);
   animation-fill-mode: forwards;
   animation-timing-function: var(--animation-easing-function-bounce-in, cubic-bezier(0.485, 0.155, 0.24, 1.245));
@@ -6280,8 +6281,27 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   }
 }
 
+.GenericModal-module_animatingEnter__P3wuk [data-modal] {
+  animation-duration: var(--animation-duration-fast, 300ms);
+  animation-fill-mode: forwards;
+  animation-timing-function: var(--animation-easing-function-bounce-in, cubic-bezier(0.485, 0.155, 0.24, 1.245));
+  /* stylelint-disable-next-line scss/function-unquote-no-unquoted-strings-inside */
+  animation-name: GenericModal-module_custom-3__oWflS;
+}
+@keyframes GenericModal-module_custom-3__oWflS {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 .GenericModal-module_animatingLeave__rNkKX {
   transition-duration: var(--animation-duration-rapid, 200ms);
+  opacity: 0;
 }
 .GenericModal-module_animatingLeave__rNkKX .GenericModal-module_backdropLayer__RNQ-U {
   animation-duration: var(--animation-duration-rapid, 200ms);
@@ -6302,9 +6322,9 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   animation-fill-mode: forwards;
   animation-timing-function: var(--animation-easing-function-bounce-out, cubic-bezier(0.485, 0.155, 0.515, 0.845));
   /* stylelint-disable-next-line scss/function-unquote-no-unquoted-strings-inside */
-  animation-name: GenericModal-module_custom-3__oWflS;
+  animation-name: GenericModal-module_custom-5__b6Zah;
 }
-@keyframes GenericModal-module_custom-3__oWflS {
+@keyframes GenericModal-module_custom-5__b6Zah {
   0% {
     opacity: 1;
     transform: scale(1);
@@ -6623,10 +6643,11 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   outline-offset: 2px;
 }
 
-.ConfirmationModal-module_animatingEnter__4W4xh {
-  transition-duration: var(--animation-duration-fast, 300ms);
+.ConfirmationModal-module_transitionLayer__Ue95T {
+  transition: opacity var(--animation-duration-fast, 300ms) ease-in-out;
+  opacity: 1;
 }
-.ConfirmationModal-module_animatingEnter__4W4xh .ConfirmationModal-module_backdropLayer__wvXnl {
+.ConfirmationModal-module_transitionLayer__Ue95T .ConfirmationModal-module_backdropLayer__wvXnl {
   /*
     There's a weird bug in Chrome/Blink 102.x that animates the opacity
     all the way to 1 with 200ms ("rapid" token), but is fine with
@@ -6645,7 +6666,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
     opacity: 0.5;
   }
 }
-.ConfirmationModal-module_animatingEnter__4W4xh [data-modal] {
+.ConfirmationModal-module_transitionLayer__Ue95T [data-modal] {
   animation-duration: var(--animation-duration-fast, 300ms);
   animation-fill-mode: forwards;
   animation-timing-function: var(--animation-easing-function-bounce-in, cubic-bezier(0.485, 0.155, 0.24, 1.245));
@@ -6663,8 +6684,27 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   }
 }
 
+.ConfirmationModal-module_animatingEnter__4W4xh [data-modal] {
+  animation-duration: var(--animation-duration-fast, 300ms);
+  animation-fill-mode: forwards;
+  animation-timing-function: var(--animation-easing-function-bounce-in, cubic-bezier(0.485, 0.155, 0.24, 1.245));
+  /* stylelint-disable-next-line scss/function-unquote-no-unquoted-strings-inside */
+  animation-name: ConfirmationModal-module_custom-3__MEO7v;
+}
+@keyframes ConfirmationModal-module_custom-3__MEO7v {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 .ConfirmationModal-module_animatingLeave__n-S4X {
   transition-duration: var(--animation-duration-rapid, 200ms);
+  opacity: 0;
 }
 .ConfirmationModal-module_animatingLeave__n-S4X .ConfirmationModal-module_backdropLayer__wvXnl {
   animation-duration: var(--animation-duration-rapid, 200ms);
@@ -6685,9 +6725,9 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   animation-fill-mode: forwards;
   animation-timing-function: var(--animation-easing-function-bounce-out, cubic-bezier(0.485, 0.155, 0.515, 0.845));
   /* stylelint-disable-next-line scss/function-unquote-no-unquoted-strings-inside */
-  animation-name: ConfirmationModal-module_custom-3__MEO7v;
+  animation-name: ConfirmationModal-module_custom-5__zbG38;
 }
-@keyframes ConfirmationModal-module_custom-3__MEO7v {
+@keyframes ConfirmationModal-module_custom-5__zbG38 {
   0% {
     opacity: 1;
     transform: scale(1);
@@ -6972,10 +7012,11 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   outline-offset: 2px;
 }
 
-.ContextModal-module_animatingEnter__53BlF {
-  transition-duration: var(--animation-duration-fast, 300ms);
+.ContextModal-module_transitionLayer__IjJem {
+  transition: opacity var(--animation-duration-fast, 300ms) ease-in-out;
+  opacity: 1;
 }
-.ContextModal-module_animatingEnter__53BlF .ContextModal-module_backdropLayer__wuj3B {
+.ContextModal-module_transitionLayer__IjJem .ContextModal-module_backdropLayer__wuj3B {
   /*
     There's a weird bug in Chrome/Blink 102.x that animates the opacity
     all the way to 1 with 200ms ("rapid" token), but is fine with
@@ -6994,7 +7035,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
     opacity: 0.5;
   }
 }
-.ContextModal-module_animatingEnter__53BlF [data-modal] {
+.ContextModal-module_transitionLayer__IjJem [data-modal] {
   animation-duration: var(--animation-duration-fast, 300ms);
   animation-fill-mode: forwards;
   animation-timing-function: var(--animation-easing-function-bounce-in, cubic-bezier(0.485, 0.155, 0.24, 1.245));
@@ -7012,8 +7053,27 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   }
 }
 
+.ContextModal-module_animatingEnter__53BlF [data-modal] {
+  animation-duration: var(--animation-duration-fast, 300ms);
+  animation-fill-mode: forwards;
+  animation-timing-function: var(--animation-easing-function-bounce-in, cubic-bezier(0.485, 0.155, 0.24, 1.245));
+  /* stylelint-disable-next-line scss/function-unquote-no-unquoted-strings-inside */
+  animation-name: ContextModal-module_custom-3__klp3m;
+}
+@keyframes ContextModal-module_custom-3__klp3m {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 .ContextModal-module_animatingLeave__-JR11 {
   transition-duration: var(--animation-duration-rapid, 200ms);
+  opacity: 0;
 }
 .ContextModal-module_animatingLeave__-JR11 .ContextModal-module_backdropLayer__wuj3B {
   animation-duration: var(--animation-duration-rapid, 200ms);
@@ -7034,9 +7094,9 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   animation-fill-mode: forwards;
   animation-timing-function: var(--animation-easing-function-bounce-out, cubic-bezier(0.485, 0.155, 0.515, 0.845));
   /* stylelint-disable-next-line scss/function-unquote-no-unquoted-strings-inside */
-  animation-name: ContextModal-module_custom-3__klp3m;
+  animation-name: ContextModal-module_custom-5__deZpl;
 }
-@keyframes ContextModal-module_custom-3__klp3m {
+@keyframes ContextModal-module_custom-5__deZpl {
   0% {
     opacity: 1;
     transform: scale(1);
@@ -7076,9 +7136,9 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   animation-fill-mode: forwards;
   animation-timing-function: var(--animation-easing-function-bounce-in, cubic-bezier(0.485, 0.155, 0.24, 1.245));
   /* stylelint-disable-next-line scss/function-unquote-no-unquoted-strings-inside */
-  animation-name: ContextModal-module_custom-5__deZpl;
+  animation-name: ContextModal-module_custom-7__rPmP4;
 }
-@keyframes ContextModal-module_custom-5__deZpl {
+@keyframes ContextModal-module_custom-7__rPmP4 {
   0% {
     opacity: 0;
     transform: scale(0.5);
@@ -7093,9 +7153,9 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   animation-fill-mode: forwards;
   animation-timing-function: var(--animation-easing-function-bounce-out, cubic-bezier(0.485, 0.155, 0.515, 0.845));
   /* stylelint-disable-next-line scss/function-unquote-no-unquoted-strings-inside */
-  animation-name: ContextModal-module_custom-7__rPmP4;
+  animation-name: ContextModal-module_custom-9__QZcNq;
 }
-@keyframes ContextModal-module_custom-7__rPmP4 {
+@keyframes ContextModal-module_custom-9__QZcNq {
   0% {
     opacity: 1;
     transform: scale(1);
@@ -7289,10 +7349,11 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   outline-offset: 2px;
 }
 
-.InputEditModal-module_animatingEnter__qZgX2 {
-  transition-duration: var(--animation-duration-fast, 300ms);
+.InputEditModal-module_transitionLayer__1B3VI {
+  transition: opacity var(--animation-duration-fast, 300ms) ease-in-out;
+  opacity: 1;
 }
-.InputEditModal-module_animatingEnter__qZgX2 .InputEditModal-module_backdropLayer__aVLSb {
+.InputEditModal-module_transitionLayer__1B3VI .InputEditModal-module_backdropLayer__aVLSb {
   /*
     There's a weird bug in Chrome/Blink 102.x that animates the opacity
     all the way to 1 with 200ms ("rapid" token), but is fine with
@@ -7311,7 +7372,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
     opacity: 0.5;
   }
 }
-.InputEditModal-module_animatingEnter__qZgX2 [data-modal] {
+.InputEditModal-module_transitionLayer__1B3VI [data-modal] {
   animation-duration: var(--animation-duration-fast, 300ms);
   animation-fill-mode: forwards;
   animation-timing-function: var(--animation-easing-function-bounce-in, cubic-bezier(0.485, 0.155, 0.24, 1.245));
@@ -7329,8 +7390,27 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   }
 }
 
+.InputEditModal-module_animatingEnter__qZgX2 [data-modal] {
+  animation-duration: var(--animation-duration-fast, 300ms);
+  animation-fill-mode: forwards;
+  animation-timing-function: var(--animation-easing-function-bounce-in, cubic-bezier(0.485, 0.155, 0.24, 1.245));
+  /* stylelint-disable-next-line scss/function-unquote-no-unquoted-strings-inside */
+  animation-name: InputEditModal-module_custom-3__T3riv;
+}
+@keyframes InputEditModal-module_custom-3__T3riv {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 .InputEditModal-module_animatingLeave__S2HGz {
   transition-duration: var(--animation-duration-rapid, 200ms);
+  opacity: 0;
 }
 .InputEditModal-module_animatingLeave__S2HGz .InputEditModal-module_backdropLayer__aVLSb {
   animation-duration: var(--animation-duration-rapid, 200ms);
@@ -7351,9 +7431,9 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   animation-fill-mode: forwards;
   animation-timing-function: var(--animation-easing-function-bounce-out, cubic-bezier(0.485, 0.155, 0.515, 0.845));
   /* stylelint-disable-next-line scss/function-unquote-no-unquoted-strings-inside */
-  animation-name: InputEditModal-module_custom-3__T3riv;
+  animation-name: InputEditModal-module_custom-5__trORr;
 }
-@keyframes InputEditModal-module_custom-3__T3riv {
+@keyframes InputEditModal-module_custom-5__trORr {
   0% {
     opacity: 1;
     transform: scale(1);
@@ -7388,9 +7468,9 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   animation-fill-mode: forwards;
   animation-timing-function: var(--animation-easing-function-bounce-in, cubic-bezier(0.485, 0.155, 0.24, 1.245));
   /* stylelint-disable-next-line scss/function-unquote-no-unquoted-strings-inside */
-  animation-name: InputEditModal-module_custom-5__trORr;
+  animation-name: InputEditModal-module_custom-7__-98CZ;
 }
-@keyframes InputEditModal-module_custom-5__trORr {
+@keyframes InputEditModal-module_custom-7__-98CZ {
   0% {
     opacity: 0;
     transform: scale(0.5);
@@ -7405,9 +7485,9 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   animation-fill-mode: forwards;
   animation-timing-function: var(--animation-easing-function-bounce-out, cubic-bezier(0.485, 0.155, 0.515, 0.845));
   /* stylelint-disable-next-line scss/function-unquote-no-unquoted-strings-inside */
-  animation-name: InputEditModal-module_custom-7__-98CZ;
+  animation-name: InputEditModal-module_custom-9__VnL9W;
 }
-@keyframes InputEditModal-module_custom-7__-98CZ {
+@keyframes InputEditModal-module_custom-9__VnL9W {
   0% {
     opacity: 1;
     transform: scale(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.75.1",
+  "version": "1.75.2",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -103,7 +103,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@headlessui/react": "<=1.5.0",
+    "@headlessui/react": "^2.2.0",
     "@internationalized/date": "^3.7.0",
     "@popperjs/core": "^2.11.8",
     "@reach/tabs": "^0.18.0",

package/src/Modal/GenericModal/GenericModal.module.scss

@@ -64,9 +64,9 @@
   }
 }
 
-// WAITING FOR TEXTFIELD
-.animatingEnter {
-  transition-duration: $ca-duration-fast;
+.transitionLayer {
+  transition: opacity $ca-duration-fast ease-in-out;
+  opacity: 1;
 
   .backdropLayer {
     /*
@@ -86,8 +86,20 @@
   }
 }
 
+// WAITING FOR TEXTFIELD
+.animatingEnter {
+  [data-modal] {
+    animation-duration: $ca-duration-fast;
+    animation-fill-mode: forwards;
+    animation-timing-function: $ca-bounce-in;
+
+    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
+  }
+}
+
 .animatingLeave {
   transition-duration: $ca-duration-rapid;
+  opacity: 0;
 
   .backdropLayer {
     @include ca-animation-fade($duration: $ca-duration-rapid, $from: 0.5, $to: 0);

package/src/Modal/GenericModal/GenericModal.tsx

@@ -1,6 +1,7 @@
-import React, { useEffect, useId, useState } from 'react'
+import React, { useCallback, useEffect, useId, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { Transition } from '@headlessui/react'
+import classnames from 'classnames'
 import FocusLock from 'react-focus-lock'
 import { warn } from '../util/console'
 import { ModalContext } from './context/ModalContext'
@@ -98,15 +99,20 @@ export const GenericModal = ({
     }
   }
 
+  const escapeKeyHandler = useCallback(
+    (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') {
+        onEscapeKeyup?.(event)
+      }
+    },
+    [onEscapeKeyup],
+  )
+
   const onBeforeEnterHandler = (): void => {
     preventBodyScroll()
 
     if (onEscapeKeyup) {
-      document.addEventListener('keyup', (event) => {
-        if (event.key === 'Escape') {
-          onEscapeKeyup?.(event)
-        }
-      })
+      document.addEventListener('keyup', escapeKeyHandler)
     }
   }
 
@@ -114,7 +120,7 @@ export const GenericModal = ({
     document.documentElement.classList.remove(styles.unscrollable, styles.pseudoScrollbar)
 
     if (onEscapeKeyup) {
-      document.removeEventListener('keyup', onEscapeKeyup)
+      document.removeEventListener('keyup', escapeKeyHandler)
     }
   }
 
@@ -127,19 +133,18 @@ export const GenericModal = ({
     cleanUpAfterClose()
     propsOnAfterLeave?.()
   }
-
   return createPortal(
     <Transition
       appear={true}
       show={isOpen}
-      enter={styles.animatingEnter}
-      leave={styles.animatingLeave}
       beforeEnter={onBeforeEnterHandler}
       afterEnter={onAfterEnterHandler}
       afterLeave={onAfterLeaveHandler}
       data-generic-modal-transition-wrapper
-      onClick={(e: React.MouseEvent): void => e.stopPropagation()}
-      className={className}
+      enter={styles.animatingEnter}
+      leave={styles.animatingLeave}
+      as="div"
+      className={classnames(styles.transitionLayer, className)}
     >
       <FocusLock
         disabled={focusLockDisabled}