@kaizen/components 1.81.0 → 1.81.2

package/dist/cjs/reactAriaComponentsKZ.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var reactAriaComponents = require('react-aria-components');
+Object.keys(reactAriaComponents).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () {
+      return reactAriaComponents[k];
+    }
+  });
+});

package/dist/cjs/reactAriaKZ.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var reactAria = require('react-aria');
+Object.keys(reactAria).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () {
+      return reactAria[k];
+    }
+  });
+});

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

@@ -4,7 +4,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 reactFocusOn = require('react-focus-on');
 var useIsClientReady = require('../../utils/useIsClientReady/useIsClientReady.cjs');
 var console = require('../util/console.cjs');
 var ModalContext = require('./context/ModalContext.cjs');
@@ -16,7 +16,6 @@ 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,
     children = _a.children,
@@ -33,87 +32,60 @@ var GenericModal = function (_a) {
   var labelledByID = React.useId();
   var describedByID = React.useId();
   var isClientReady = useIsClientReady.useIsClientReady();
-  var _c = React.useState(null),
-    scrollLayer = _c[0],
-    setScrollLayer = _c[1];
-  var _d = React.useState(null),
-    modalLayer = _d[0],
-    setModalLayer = _d[1];
+  var scrollLayerRef = React.useRef(null);
+  var modalLayerRef = React.useRef(null);
   var scrollModalToTop = function () {
     // If we have a really long modal, the autofocus could land on an element down below
     // causing the modal to scroll down and skipping over the content near the modal's top.
     // Ensure that when the modal opens, we are at the top of its content.
     requestAnimationFrame(function () {
-      if (!scrollLayer) return;
-      scrollLayer.scrollTop = 0;
+      var scrollElement = scrollLayerRef.current;
+      // This little verbose of a check but this ensures that the element is attached to the DOM as it animates in. This additional check aims to avoid race conditions
+      if (!(scrollElement === null || scrollElement === void 0 ? void 0 : scrollElement.isConnected)) return;
+      scrollElement.scrollTop = 0;
     });
   };
-  var outsideModalClickHandler = function (event) {
-    if (event.target === scrollLayer || event.target === modalLayer) {
-      onOutsideModalClick === null || onOutsideModalClick === void 0 ? void 0 : onOutsideModalClick(event);
+  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)) {
+      console.warn("When using the Modal component, you must provide a label for the modal.\n        Make sure you have a <ModalAccessibleLabel /> component with content that labels the modal.");
     }
   };
   var focusOnAccessibleLabel = function () {
     if (!isClientReady) return;
+    var modalElement = modalLayerRef.current;
+    if (!(modalElement === null || modalElement === void 0 ? void 0 : modalElement.isConnected)) return;
     // Check if focus already exists within the modal
-    if (modalLayer === null || modalLayer === void 0 ? void 0 : modalLayer.contains(document.activeElement)) {
+    if (modalElement.contains(document.activeElement)) {
       return;
     }
     var labelElement = document.getElementById(labelledByID);
-    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)) {
-      console.warn("When using the Modal component, you must provide a label for the modal.\n        Make sure you have a <ModalAccessibleLabel /> component with content that labels the modal.");
+    if (labelElement === null || labelElement === void 0 ? void 0 : labelElement.isConnected) {
+      labelElement.focus();
     }
   };
-  var preventBodyScroll = function () {
-    var _a;
-    if (!isClientReady) return;
-    var hasScrollbar = window.innerWidth > document.documentElement.clientWidth;
-    var scrollStyles = [GenericModal_module.unscrollable];
-    if (hasScrollbar) {
-      scrollStyles.push(GenericModal_module.pseudoScrollbar);
+  var onEscapeKeyHandler = function (e) {
+    if (e instanceof KeyboardEvent) {
+      onEscapeKeyup === null || onEscapeKeyup === void 0 ? void 0 : onEscapeKeyup(e);
     }
-    (_a = document.documentElement.classList).add.apply(_a, scrollStyles);
   };
   var onAfterEnterHandler = function () {
     scrollModalToTop();
-    if (modalLayer) {
+    var modalElement = modalLayerRef.current;
+    if (modalElement) {
       onAfterEnter === null || onAfterEnter === void 0 ? void 0 : onAfterEnter();
       focusOnAccessibleLabel();
       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 && isClientReady) {
-      document.addEventListener('keyup', escapeKeyHandler);
+  var outsideModalClickHandler = function (e) {
+    if (e.target === scrollLayerRef.current || e.target === modalLayerRef.current) {
+      onOutsideModalClick === null || onOutsideModalClick === void 0 ? void 0 : onOutsideModalClick(e);
     }
   };
-  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*/
-  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
@@ -123,7 +95,6 @@ var GenericModal = function (_a) {
   return ReactDOM.createPortal(React__default.default.createElement(react.Transition, {
     appear: true,
     show: isOpen,
-    beforeEnter: onBeforeEnterHandler,
     afterEnter: onAfterEnterHandler,
     afterLeave: onAfterLeaveHandler,
     "data-generic-modal-transition-wrapper": true,
@@ -131,9 +102,10 @@ var GenericModal = function (_a) {
     leave: GenericModal_module.animatingLeave,
     as: "div",
     className: classnames__default.default(GenericModal_module.transitionLayer, className)
-  }, React__default.default.createElement(FocusLock__default.default, {
-    disabled: focusLockDisabled,
+  }, React__default.default.createElement(reactFocusOn.FocusOn, {
+    focusLock: focusLockDisabled,
     returnFocus: true,
+    onEscapeKey: onEscapeKeyHandler,
     // Disabling false positive
     // eslint-disable-next-line jsx-a11y/no-autofocus
     autoFocus: false
@@ -141,11 +113,9 @@ var GenericModal = function (_a) {
     className: GenericModal_module.backdropLayer
   }), React__default.default.createElement("div", {
     className: GenericModal_module.scrollLayer,
-    ref: function (scrollLayerRef) {
-      setScrollLayer(scrollLayerRef);
-    },
-    onClick: outsideModalClickHandler,
-    "data-testid": "".concat(id, "-scrollLayer")
+    ref: scrollLayerRef,
+    "data-testid": "".concat(id, "-scrollLayer"),
+    onClick: outsideModalClickHandler
   }, React__default.default.createElement(ModalContext.ModalContext.Provider, {
     value: {
       labelledByID: labelledByID,
@@ -156,9 +126,7 @@ var GenericModal = function (_a) {
     className: GenericModal_module.modalLayer,
     "aria-labelledby": labelledByID,
     "aria-describedby": describedByID,
-    ref: function (modalLayerRef) {
-      return setModalLayer(modalLayerRef);
-    },
+    ref: modalLayerRef,
     "data-testid": id
   }, children))))), document.body);
 };

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

@@ -6,8 +6,6 @@ var styles = {
   "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",
-  "pseudoScrollbar": "GenericModal-module_pseudoScrollbar__BhRqh"
+  "animatingLeave": "GenericModal-module_animatingLeave__rNkKX"
 };
 module.exports = styles;

package/dist/esm/reactAriaComponentsKZ.mjs

@@ -0,0 +1 @@
+export * from 'react-aria-components';

package/dist/esm/reactAriaKZ.mjs

@@ -0,0 +1 @@
+export * from 'react-aria';

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

@@ -1,8 +1,8 @@
-import React, { useId, useState, useCallback, useEffect } from 'react';
+import React, { useId, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { Transition } from '@headlessui/react';
 import classnames from 'classnames';
-import FocusLock from 'react-focus-lock';
+import { FocusOn } from 'react-focus-on';
 import { useIsClientReady } from '../../utils/useIsClientReady/useIsClientReady.mjs';
 import { warn } from '../util/console.mjs';
 import { ModalContext } from './context/ModalContext.mjs';
@@ -24,87 +24,60 @@ const GenericModal = /*#__PURE__*/function () {
     var labelledByID = useId();
     var describedByID = useId();
     var isClientReady = useIsClientReady();
-    var _c = useState(null),
-      scrollLayer = _c[0],
-      setScrollLayer = _c[1];
-    var _d = useState(null),
-      modalLayer = _d[0],
-      setModalLayer = _d[1];
+    var scrollLayerRef = useRef(null);
+    var modalLayerRef = useRef(null);
     var scrollModalToTop = function () {
       // If we have a really long modal, the autofocus could land on an element down below
       // causing the modal to scroll down and skipping over the content near the modal's top.
       // Ensure that when the modal opens, we are at the top of its content.
       requestAnimationFrame(function () {
-        if (!scrollLayer) return;
-        scrollLayer.scrollTop = 0;
+        var scrollElement = scrollLayerRef.current;
+        // This little verbose of a check but this ensures that the element is attached to the DOM as it animates in. This additional check aims to avoid race conditions
+        if (!(scrollElement === null || scrollElement === void 0 ? void 0 : scrollElement.isConnected)) return;
+        scrollElement.scrollTop = 0;
       });
     };
-    var outsideModalClickHandler = function (event) {
-      if (event.target === scrollLayer || event.target === modalLayer) {
-        onOutsideModalClick === null || onOutsideModalClick === void 0 ? void 0 : onOutsideModalClick(event);
+    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)) {
+        warn("When using the Modal component, you must provide a label for the modal.\n        Make sure you have a <ModalAccessibleLabel /> component with content that labels the modal.");
       }
     };
     var focusOnAccessibleLabel = function () {
       if (!isClientReady) return;
+      var modalElement = modalLayerRef.current;
+      if (!(modalElement === null || modalElement === void 0 ? void 0 : modalElement.isConnected)) return;
       // Check if focus already exists within the modal
-      if (modalLayer === null || modalLayer === void 0 ? void 0 : modalLayer.contains(document.activeElement)) {
+      if (modalElement.contains(document.activeElement)) {
         return;
       }
       var labelElement = document.getElementById(labelledByID);
-      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)) {
-        warn("When using the Modal component, you must provide a label for the modal.\n        Make sure you have a <ModalAccessibleLabel /> component with content that labels the modal.");
+      if (labelElement === null || labelElement === void 0 ? void 0 : labelElement.isConnected) {
+        labelElement.focus();
       }
     };
-    var preventBodyScroll = function () {
-      var _a;
-      if (!isClientReady) return;
-      var hasScrollbar = window.innerWidth > document.documentElement.clientWidth;
-      var scrollStyles = [styles.unscrollable];
-      if (hasScrollbar) {
-        scrollStyles.push(styles.pseudoScrollbar);
+    var onEscapeKeyHandler = function (e) {
+      if (e instanceof KeyboardEvent) {
+        onEscapeKeyup === null || onEscapeKeyup === void 0 ? void 0 : onEscapeKeyup(e);
       }
-      (_a = document.documentElement.classList).add.apply(_a, scrollStyles);
     };
     var onAfterEnterHandler = function () {
       scrollModalToTop();
-      if (modalLayer) {
+      var modalElement = modalLayerRef.current;
+      if (modalElement) {
         onAfterEnter === null || onAfterEnter === void 0 ? void 0 : onAfterEnter();
         focusOnAccessibleLabel();
         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 && isClientReady) {
-        document.addEventListener('keyup', escapeKeyHandler);
+    var outsideModalClickHandler = function (e) {
+      if (e.target === scrollLayerRef.current || e.target === modalLayerRef.current) {
+        onOutsideModalClick === null || onOutsideModalClick === void 0 ? void 0 : onOutsideModalClick(e);
       }
     };
-    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*/
-    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
@@ -114,7 +87,6 @@ const GenericModal = /*#__PURE__*/function () {
     return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(Transition, {
       appear: true,
       show: isOpen,
-      beforeEnter: onBeforeEnterHandler,
       afterEnter: onAfterEnterHandler,
       afterLeave: onAfterLeaveHandler,
       "data-generic-modal-transition-wrapper": true,
@@ -122,9 +94,10 @@ const GenericModal = /*#__PURE__*/function () {
       leave: styles.animatingLeave,
       as: "div",
       className: classnames(styles.transitionLayer, className)
-    }, /*#__PURE__*/React.createElement(FocusLock, {
-      disabled: focusLockDisabled,
+    }, /*#__PURE__*/React.createElement(FocusOn, {
+      focusLock: focusLockDisabled,
       returnFocus: true,
+      onEscapeKey: onEscapeKeyHandler,
       // Disabling false positive
       // eslint-disable-next-line jsx-a11y/no-autofocus
       autoFocus: false
@@ -132,11 +105,9 @@ const GenericModal = /*#__PURE__*/function () {
       className: styles.backdropLayer
     }), /*#__PURE__*/React.createElement("div", {
       className: styles.scrollLayer,
-      ref: function (scrollLayerRef) {
-        setScrollLayer(scrollLayerRef);
-      },
-      onClick: outsideModalClickHandler,
-      "data-testid": "".concat(id, "-scrollLayer")
+      ref: scrollLayerRef,
+      "data-testid": "".concat(id, "-scrollLayer"),
+      onClick: outsideModalClickHandler
     }, /*#__PURE__*/React.createElement(ModalContext.Provider, {
       value: {
         labelledByID: labelledByID,
@@ -147,9 +118,7 @@ const GenericModal = /*#__PURE__*/function () {
       className: styles.modalLayer,
       "aria-labelledby": labelledByID,
       "aria-describedby": describedByID,
-      ref: function (modalLayerRef) {
-        return setModalLayer(modalLayerRef);
-      },
+      ref: modalLayerRef,
       "data-testid": id
     }, children))))), document.body);
   };

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

@@ -4,8 +4,6 @@ var styles = {
   "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",
-  "pseudoScrollbar": "GenericModal-module_pseudoScrollbar__BhRqh"
+  "animatingLeave": "GenericModal-module_animatingLeave__rNkKX"
 };
 export { styles as default };

package/dist/styles.css

@@ -1,83 +1,4 @@
 @layer tokens, normalize, reset, kz-components;@layer tokens{:root{--theme-key:heart;--animation-easing-function-ease-in-out:cubic-bezier(0.455,0.03,0.515,0.955);--animation-easing-function-ease-in:cubic-bezier(0.55,0.085,0.68,0.53);--animation-easing-function-ease-out:cubic-bezier(0.25,0.46,0.45,0.94);--animation-easing-function-linear:linear;--animation-easing-function-bounce-in:cubic-bezier(0.485,0.155,0.24,1.245);--animation-easing-function-bounce-out:cubic-bezier(0.485,0.155,0.515,0.845);--animation-easing-function-bounce-in-out:cubic-bezier(0.76,-0.245,0.24,1.245);--animation-duration-instant:0ms;--animation-duration-immediate:100ms;--animation-duration-rapid:200ms;--animation-duration-fast:300ms;--animation-duration-slow:400ms;--animation-duration-deliberate:700ms;--border-solid-border-width:2px;--border-solid-border-radius:7px;--border-solid-border-style:solid;--border-solid-border-color:#e1e2ea;--border-solid-border-color-rgb:225,226,234;--border-dashed-border-width:2px;--border-dashed-border-radius:7px;--border-dashed-border-style:dashed;--border-borderless-border-width:2px;--border-borderless-border-radius:7px;--border-borderless-border-style:solid;--border-borderless-border-color:transparent;--border-borderless-border-color-rgb:0,0,0;--border-focus-ring-border-width:2px;--border-focus-ring-border-radius:10px;--border-focus-ring-border-style:solid;--border-width-1:1px;--color-purple-100:#f4edf8;--color-purple-100-rgb:244,237,248;--color-purple-200:#dfc9ea;--color-purple-200-rgb:223,201,234;--color-purple-300:#c9a5dd;--color-purple-300-rgb:201,165,221;--color-purple-400:#ae67b1;--color-purple-400-rgb:174,103,177;--color-purple-500:#844587;--color-purple-500-rgb:132,69,135;--color-purple-600:#5f3361;--color-purple-600-rgb:95,51,97;--color-purple-700:#4a234d;--color-purple-700-rgb:74,35,77;--color-purple-800:#2f2438;--color-purple-800-rgb:47,36,56;--color-blue-100:#e6f6ff;--color-blue-100-rgb:230,246,255;--color-blue-200:#bde2f5;--color-blue-200-rgb:189,226,245;--color-blue-300:#73c0e8;--color-blue-300-rgb:115,192,232;--color-blue-400:#008bd6;--color-blue-400-rgb:0,139,214;--color-blue-500:#0168b3;--color-blue-500-rgb:1,104,179;--color-blue-600:#004970;--color-blue-600-rgb:0,73,112;--color-blue-700:#003157;--color-blue-700-rgb:0,49,87;--color-green-100:#e8f8f4;--color-green-100-rgb:232,248,244;--color-green-200:#c4ede2;--color-green-200-rgb:196,237,226;--color-green-300:#8fdbc7;--color-green-300-rgb:143,219,199;--color-green-400:#5dcaad;--color-green-400-rgb:93,202,173;--color-green-500:#3f9a86;--color-green-500-rgb:63,154,134;--color-green-600:#2c7d67;--color-green-600-rgb:44,125,103;--color-green-700:#22594a;--color-green-700-rgb:34,89,74;--color-yellow-100:#fff9e4;--color-yellow-100-rgb:255,249,228;--color-yellow-200:#ffeeb3;--color-yellow-200-rgb:255,238,179;--color-yellow-300:#ffe36e;--color-yellow-300-rgb:255,227,110;--color-yellow-400:#ffca4d;--color-yellow-400-rgb:255,202,77;--color-yellow-500:#ffb600;--color-yellow-500-rgb:255,182,0;--color-yellow-600:#c68600;--color-yellow-600-rgb:198,134,0;--color-yellow-700:#876400;--color-yellow-700-rgb:135,100,0;--color-red-100:#fdeaee;--color-red-100-rgb:253,234,238;--color-red-200:#f9c2cb;--color-red-200-rgb:249,194,203;--color-red-300:#f597a8;--color-red-300-rgb:245,151,168;--color-red-400:#e0707d;--color-red-400-rgb:224,112,125;--color-red-500:#c93b55;--color-red-500-rgb:201,59,85;--color-red-600:#a82433;--color-red-600-rgb:168,36,51;--color-red-700:#6c1e20;--color-red-700-rgb:108,30,32;--color-orange-100:#fff0e8;--color-orange-100-rgb:255,240,232;--color-orange-200:#ffd1b9;--color-orange-200-rgb:255,209,185;--color-orange-300:#ffb08a;--color-orange-300-rgb:255,176,138;--color-orange-400:#ff9461;--color-orange-400-rgb:255,148,97;--color-orange-500:#e96c2f;--color-orange-500-rgb:233,108,47;--color-orange-600:#b74302;--color-orange-600-rgb:183,67,2;--color-orange-700:#903c00;--color-orange-700-rgb:144,60,0;--color-gray-100:#f9f9f9;--color-gray-100-rgb:249,249,249;--color-gray-200:#f4f4f5;--color-gray-200-rgb:244,244,245;--color-gray-300:#eaeaec;--color-gray-300-rgb:234,234,236;--color-gray-400:#cdcdd0;--color-gray-400-rgb:205,205,208;--color-gray-500:#878792;--color-gray-500-rgb:135,135,146;--color-gray-600:#524e56;--color-gray-600-rgb:82,78,86;--color-white:#fff;--color-white-rgb:255,255,255;--color-black:#000;--color-black-rgb:0,0,0;--data-viz-favorable:#7dd5bd;--data-viz-favorable-rgb:125,213,189;--data-viz-unfavorable:#e68d97;--data-viz-unfavorable-rgb:230,141,151;--layout-content-max-width:1392px;--layout-content-max-width-with-sidebar:1080px;--layout-content-side-margin:72px;--layout-mobile-actions-drawer-height:60px;--layout-navigation-bar-height:72px;--layout-breakpoints-medium:768px;--layout-breakpoints-large:1080px;--shadow-small-box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06);--shadow-large-box-shadow:0 3px 9px 0 rgba(0,0,0,.1),0 8px 40px 0 rgba(0,0,0,.08);--spacing-0:0;--spacing-1:.0625rem;--spacing-2:.125rem;--spacing-4:.25rem;--spacing-6:.375rem;--spacing-8:.5rem;--spacing-12:.75rem;--spacing-16:1rem;--spacing-20:1.25rem;--spacing-24:1.5rem;--spacing-32:2rem;--spacing-40:2.5rem;--spacing-48:3rem;--spacing-56:3.5rem;--spacing-64:4rem;--spacing-72:4.5rem;--spacing-80:5rem;--spacing-96:6rem;--spacing-112:7rem;--spacing-128:8rem;--spacing-160:10rem;--spacing-200:12.5rem;--spacing-240:15rem;--spacing-280:17.5rem;--spacing-320:20rem;--spacing-xs:0.375rem;--spacing-sm:0.75rem;--spacing-md:1.5rem;--spacing-lg:2.25rem;--spacing-xl:3rem;--spacing-xxl:3.75rem;--spacing-xxxl:4.5rem;--spacing-xxxxl:5.25rem;--spacing-xxxxxl:6rem;--typography-data-large-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-large-font-weight:700;--typography-data-large-font-size:5.25rem;--typography-data-large-line-height:5.25rem;--typography-data-large-letter-spacing:normal;--typography-data-large-units-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-large-units-font-weight:700;--typography-data-large-units-font-size:2.625rem;--typography-data-large-units-line-height:5.25rem;--typography-data-large-units-letter-spacing:normal;--typography-data-medium-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-medium-font-weight:700;--typography-data-medium-font-size:3rem;--typography-data-medium-line-height:5rem;--typography-data-medium-letter-spacing:normal;--typography-data-medium-units-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-medium-units-font-weight:700;--typography-data-medium-units-font-size:1.5rem;--typography-data-medium-units-line-height:5rem;--typography-data-medium-units-letter-spacing:normal;--typography-data-small-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-small-font-weight:700;--typography-data-small-font-size:1.5rem;--typography-data-small-line-height:1.5rem;--typography-data-small-letter-spacing:normal;--typography-data-small-units-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-small-units-font-weight:700;--typography-data-small-units-font-size:1.125rem;--typography-data-small-units-line-height:1.5rem;--typography-data-small-units-letter-spacing:normal;--typography-display-0-font-family:"Tiempos Headline",Georgia,serif;--typography-display-0-font-weight:800;--typography-display-0-font-size:4.5rem;--typography-display-0-line-height:5.25rem;--typography-display-0-letter-spacing:0em;--typography-heading-1-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-1-font-weight:500;--typography-heading-1-font-size:2.125rem;--typography-heading-1-line-height:2.625rem;--typography-heading-1-letter-spacing:normal;--typography-heading-2-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-2-font-weight:600;--typography-heading-2-font-size:1.75rem;--typography-heading-2-line-height:2.25rem;--typography-heading-2-letter-spacing:normal;--typography-heading-3-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-3-font-weight:600;--typography-heading-3-font-size:1.375rem;--typography-heading-3-line-height:1.875rem;--typography-heading-3-letter-spacing:normal;--typography-heading-4-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-4-font-weight:600;--typography-heading-4-font-size:1.125rem;--typography-heading-4-line-height:1.5rem;--typography-heading-4-letter-spacing:normal;--typography-heading-5-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-5-font-weight:600;--typography-heading-5-font-size:1rem;--typography-heading-5-line-height:1.5rem;--typography-heading-5-letter-spacing:normal;--typography-heading-6-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-6-font-weight:600;--typography-heading-6-font-size:0.875rem;--typography-heading-6-line-height:1.5rem;--typography-heading-6-letter-spacing:normal;--typography-paragraph-intro-lede-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-intro-lede-font-weight:400;--typography-paragraph-intro-lede-font-size:1.25rem;--typography-paragraph-intro-lede-line-height:1.875rem;--typography-paragraph-intro-lede-letter-spacing:0;--typography-paragraph-intro-lede-max-width:975px;--typography-paragraph-body-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-body-font-weight:400;--typography-paragraph-body-font-size:1rem;--typography-paragraph-body-line-height:1.5rem;--typography-paragraph-body-letter-spacing:normal;--typography-paragraph-body-max-width:780px;--typography-paragraph-small-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-small-font-weight:400;--typography-paragraph-small-font-size:0.875rem;--typography-paragraph-small-line-height:1.125rem;--typography-paragraph-small-letter-spacing:normal;--typography-paragraph-small-max-width:680px;--typography-paragraph-extra-small-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-extra-small-font-weight:400;--typography-paragraph-extra-small-font-size:0.75rem;--typography-paragraph-extra-small-line-height:1.125rem;--typography-paragraph-extra-small-letter-spacing:normal;--typography-paragraph-extra-small-max-width:600px;--typography-paragraph-bold-font-weight:600;--typography-button-primary-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-button-primary-font-weight:500;--typography-button-primary-font-size:1.125rem;--typography-button-primary-line-height:1.5rem;--typography-button-primary-letter-spacing:normal;--typography-button-secondary-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-button-secondary-font-weight:500;--typography-button-secondary-font-size:1rem;--typography-button-secondary-line-height:1.5rem;--typography-button-secondary-letter-spacing:normal}}@layer normalize{html{text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{appearance:auto}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:auto;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}}@layer reset{@font-face{font-family:Tiempos Headline;font-weight:800;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff)}@font-face{font-family:Tiempos Headline;font-weight:500;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-medium.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-medium.woff)}@font-face{font-family:Greycliff CF;font-weight:300;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-light.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:400;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-regular.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:500;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-medium.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:600;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-demi-bold.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:700;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-bold.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:800;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-extra-bold.woff) format("woff")}@font-face{font-family:Inter;font-weight:300;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-light.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-light.woff)}@font-face{font-family:Inter;font-weight:400;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff)}@font-face{font-family:Inter;font-weight:500;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff)}@font-face{font-family:Inter;font-weight:600;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff)}@font-face{font-family:Inter;font-weight:700;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff)}@font-face{font-family:Inter;font-weight:800;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-extra-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-extra-bold.woff)}@font-face{font-family:IBM Plex Mono;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/ibm-plex-mono/ibm-plex-mono-regular.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/ibm-plex-mono/ibm-plex-mono-regular.woff)}}@layer reset{*,:after,:before{border-color:var(--border-solid-border-color,"currentColor");border-style:solid;border-width:0}}
-@layer kz-components {
-  .ListSection-module_listSectionHeader__bptHg {
-    font-family: var(--typography-heading-5-font-family);
-    font-weight: var(--typography-heading-5-font-weight);
-    font-size: var(--typography-heading-5-font-size);
-    line-height: var(--typography-heading-5-line-height);
-    letter-spacing: var(--typography-heading-5-letter-spacing);
-  }
-}
-
-@layer kz-components {
-  .ListItem-module_listItem__xGr6A {
-    font-family: var(--typography-paragraph-body-font-family);
-    font-weight: var(--typography-paragraph-body-font-weight);
-    font-size: var(--typography-paragraph-body-font-size);
-    line-height: var(--typography-paragraph-body-line-height);
-    letter-spacing: var(--typography-paragraph-body-letter-spacing);
-    padding: var(--spacing-8) var(--spacing-16);
-  }
-
-  .ListItem-module_listItem__xGr6A:focus-visible {
-    background-color: var(--color-blue-200);
-    outline: none;
-    border-color: white;
-  }
-}
-
-@layer kz-components {
-  .List-module_list__bbFPn {
-    display: flex;
-    flex-direction: column;
-  }
-}
-
-@layer kz-components {
-  .Trigger-module_button__giSqA {
-    anchor-name: var(--anchor-name);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-family: var(--typography-paragraph-body-font-family);
-    font-weight: var(--typography-paragraph-body-font-weight);
-    font-size: var(--typography-paragraph-body-font-size);
-    line-height: var(--typography-paragraph-body-line-height);
-    letter-spacing: var(--typography-paragraph-body-letter-spacing);
-    padding: var(--spacing-12);
-    min-height: var(--spacing-48);
-    min-width: var(--spacing-200);
-    background-color: var(--color-white);
-    border-radius: var(--spacing-8);
-    border: 1px solid var(--color-gray-500);
-  }
-}
-
-@layer kz-components {
-  .Popover-module_popover__BjY2S {
-    position: absolute;
-    height: auto;
-    background-color: var(--color-white);
-    border-radius: var(--spacing-8);
-    padding: 0;
-    box-shadow: var(--shadow-small-box-shadow);
-    overflow: hidden auto;
-    margin: 0;
-    box-sizing: border-box;
-
-    /* TODO: update width based on design */
-    width: 200px;
-
-    @supports (anchor-name: --anchor) {
-      position-anchor: var(--position-anchor);
-      margin-block: var(--spacing-4);
-      position-area: var(--position-area) center;
-      /* stylelint-disable-next-line declaration-property-value-no-unknown */
-      width: anchor-size(width);
-    }
-  }
-}
-
 @layer kz-components {
   /*
  * This is taken from the Material Symbols CDN
@@ -12093,3 +12014,82 @@
   }
 }
 
+@layer kz-components {
+  .List-module_list__bbFPn {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+@layer kz-components {
+  .ListSection-module_listSectionHeader__bptHg {
+    font-family: var(--typography-heading-5-font-family);
+    font-weight: var(--typography-heading-5-font-weight);
+    font-size: var(--typography-heading-5-font-size);
+    line-height: var(--typography-heading-5-line-height);
+    letter-spacing: var(--typography-heading-5-letter-spacing);
+  }
+}
+
+@layer kz-components {
+  .ListItem-module_listItem__xGr6A {
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+    padding: var(--spacing-8) var(--spacing-16);
+  }
+
+  .ListItem-module_listItem__xGr6A:focus-visible {
+    background-color: var(--color-blue-200);
+    outline: none;
+    border-color: white;
+  }
+}
+
+@layer kz-components {
+  .Trigger-module_button__giSqA {
+    anchor-name: var(--anchor-name);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+    padding: var(--spacing-12);
+    min-height: var(--spacing-48);
+    min-width: var(--spacing-200);
+    background-color: var(--color-white);
+    border-radius: var(--spacing-8);
+    border: 1px solid var(--color-gray-500);
+  }
+}
+
+@layer kz-components {
+  .Popover-module_popover__BjY2S {
+    position: absolute;
+    height: auto;
+    background-color: var(--color-white);
+    border-radius: var(--spacing-8);
+    padding: 0;
+    box-shadow: var(--shadow-small-box-shadow);
+    overflow: hidden auto;
+    margin: 0;
+    box-sizing: border-box;
+
+    /* TODO: update width based on design */
+    width: 200px;
+
+    @supports (anchor-name: --anchor) {
+      position-anchor: var(--position-anchor);
+      margin-block: var(--spacing-4);
+      position-area: var(--position-area) center;
+      /* stylelint-disable-next-line declaration-property-value-no-unknown */
+      width: anchor-size(width);
+    }
+  }
+}
+

package/dist/types/__libs__/react-aria/index.d.ts

@@ -0,0 +1 @@
+export * from 'react-aria';

package/dist/types/__libs__/react-aria-components/index.d.ts

@@ -0,0 +1 @@
+export * from 'react-aria-components';

package/libs/README.md

@@ -0,0 +1,7 @@
+# Entrypoint: libs
+
+This directory is here to redirect any imports from `@kaizen/components/libs` to the correct distribution of compiled code to allow for treeshaking of external libraries like `react-aria`.
+
+These are exported to reduce compatibility issues when using libs within our components.
+
+More details: [https://github.com/theKashey/multiple-entry-points-example](https://github.com/theKashey/multiple-entry-points-example)

package/libs/react-aria/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../../dist/cjs/reactAriaKZ.cjs",
+  "module": "../../dist/esm/reactAriaKZ.mjs",
+  "types": "../../dist/types/__libs__/react-aria/index.d.ts"
+}

package/libs/react-aria-components/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../../dist/cjs/reactAriaComponentsKZ.cjs",
+  "module": "../../dist/esm/reactAriaComponentsKZ.mjs",
+  "types": "../../dist/types/__libs__/react-aria-components/index.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.81.0",
+  "version": "1.81.2",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -20,6 +20,7 @@
     "v1",
     "v2",
     "v3",
+    "libs",
     "dist",
     "icons",
     "locales",
@@ -47,6 +48,16 @@
       "import": "./dist/esm/next.mjs",
       "require": "./dist/cjs/next.cjs"
     },
+    "./libs/react-aria": {
+      "types": "./dist/types/__libs__/react-aria/index.d.ts",
+      "import": "./dist/esm/reactAriaKZ.mjs",
+      "require": "./dist/cjs/reactAriaKZ.cjs"
+    },
+    "./libs/react-aria-components": {
+      "types": "./dist/types/__libs__/react-aria-components/index.d.ts",
+      "import": "./dist/esm/reactAriaComponentsKZ.mjs",
+      "require": "./dist/cjs/reactAriaComponentsKZ.cjs"
+    },
     "./v1/actions": {
       "types": "./dist/types/v1-actions.d.ts",
       "import": "./dist/esm/actionsV1.mjs",

package/src/Modal/GenericModal/GenericModal.spec.tsx

@@ -71,7 +71,7 @@ describe('<GenericModal />', () => {
 
   it('closes the modal when a click is outside of the modal content', async () => {
     const handleDismiss = vi.fn()
-    render(<GenericModalWrapper onOutsideModalClick={handleDismiss} />)
+    render(<GenericModalWrapper onOutsideModalClick={handleDismiss()} />)
 
     await user.click(screen.getByTestId('GenericModalTestId-scrollLayer'))
     await waitFor(() => {

package/src/Modal/GenericModal/GenericModal.tsx

@@ -1,9 +1,10 @@
-import React, { useCallback, useEffect, useId, useState } from 'react'
+import React, { useId, useRef } from 'react'
 import { createPortal } from 'react-dom'
 import { Transition } from '@headlessui/react'
 import classnames from 'classnames'
-import FocusLock from 'react-focus-lock'
+import { FocusOn } from 'react-focus-on'
 import { useIsClientReady } from '../../utils/useIsClientReady'
+
 import { warn } from '../util/console'
 import { ModalContext } from './context/ModalContext'
 import styles from './GenericModal.module.scss'
@@ -38,39 +39,22 @@ export const GenericModal = ({
 
   const labelledByID = useId()
   const describedByID = useId()
-
   const isClientReady = useIsClientReady()
 
-  const [scrollLayer, setScrollLayer] = useState<HTMLDivElement | null>(null)
-  const [modalLayer, setModalLayer] = useState<HTMLDivElement | null>(null)
+  const scrollLayerRef = useRef<HTMLDivElement | null>(null)
+  const modalLayerRef = useRef<HTMLDivElement | null>(null)
 
   const scrollModalToTop = (): void => {
     // If we have a really long modal, the autofocus could land on an element down below
     // causing the modal to scroll down and skipping over the content near the modal's top.
     // Ensure that when the modal opens, we are at the top of its content.
     requestAnimationFrame(() => {
-      if (!scrollLayer) return
-      scrollLayer.scrollTop = 0
-    })
-  }
-
-  const outsideModalClickHandler = (event: React.MouseEvent): void => {
-    if (event.target === scrollLayer || event.target === modalLayer) {
-      onOutsideModalClick?.(event)
-    }
-  }
-
-  const focusOnAccessibleLabel = (): void => {
-    if (!isClientReady) return
-
-    // Check if focus already exists within the modal
-    if (modalLayer?.contains(document.activeElement)) {
-      return
-    }
+      const scrollElement = scrollLayerRef.current
 
-    const labelElement: HTMLElement | null = document.getElementById(labelledByID)
-
-    labelElement?.focus()
+      // This little verbose of a check but this ensures that the element is attached to the DOM as it animates in. This additional check aims to avoid race conditions
+      if (!scrollElement?.isConnected) return
+      scrollElement.scrollTop = 0
+    })
   }
 
   const a11yWarn = (): void => {
@@ -86,60 +70,46 @@ export const GenericModal = ({
     }
   }
 
-  const preventBodyScroll = (): void => {
+  const focusOnAccessibleLabel = (): void => {
     if (!isClientReady) return
+    const modalElement = modalLayerRef.current
+    if (!modalElement?.isConnected) return
 
-    const hasScrollbar = window.innerWidth > document.documentElement.clientWidth
-    const scrollStyles = [styles.unscrollable]
+    // Check if focus already exists within the modal
+    if (modalElement.contains(document.activeElement)) {
+      return
+    }
+
+    const labelElement: HTMLElement | null = document.getElementById(labelledByID)
 
-    if (hasScrollbar) {
-      scrollStyles.push(styles.pseudoScrollbar)
+    if (labelElement?.isConnected) {
+      labelElement.focus()
     }
+  }
 
-    document.documentElement.classList.add(...scrollStyles)
+  const onEscapeKeyHandler = (e: Event): void => {
+    if (e instanceof KeyboardEvent) {
+      onEscapeKeyup?.(e)
+    }
   }
 
   const onAfterEnterHandler = (): void => {
     scrollModalToTop()
-    if (modalLayer) {
+    const modalElement = modalLayerRef.current
+    if (modalElement) {
       onAfterEnter?.()
       focusOnAccessibleLabel()
       a11yWarn()
     }
   }
 
-  const escapeKeyHandler = useCallback(
-    (event: KeyboardEvent): void => {
-      if (event.key === 'Escape') {
-        onEscapeKeyup?.(event)
-      }
-    },
-    [onEscapeKeyup],
-  )
-
-  const onBeforeEnterHandler = (): void => {
-    preventBodyScroll()
-
-    if (onEscapeKeyup && isClientReady) {
-      document.addEventListener('keyup', escapeKeyHandler)
+  const outsideModalClickHandler = (e: React.MouseEvent): void => {
+    if (e.target === scrollLayerRef.current || e.target === modalLayerRef.current) {
+      onOutsideModalClick?.(e)
     }
   }
 
-  const cleanUpAfterClose = useCallback(() => {
-    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*/
-  useEffect(() => () => cleanUpAfterClose(), [cleanUpAfterClose])
-
   const onAfterLeaveHandler = (): void => {
-    cleanUpAfterClose()
     propsOnAfterLeave?.()
   }
 
@@ -152,7 +122,6 @@ export const GenericModal = ({
     <Transition
       appear={true}
       show={isOpen}
-      beforeEnter={onBeforeEnterHandler}
       afterEnter={onAfterEnterHandler}
       afterLeave={onAfterLeaveHandler}
       data-generic-modal-transition-wrapper
@@ -161,9 +130,10 @@ export const GenericModal = ({
       as="div"
       className={classnames(styles.transitionLayer, className)}
     >
-      <FocusLock
-        disabled={focusLockDisabled}
+      <FocusOn
+        focusLock={focusLockDisabled}
         returnFocus={true}
+        onEscapeKey={onEscapeKeyHandler}
         // Disabling false positive
         // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus={false}
@@ -174,11 +144,9 @@ export const GenericModal = ({
         {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
         <div
           className={styles.scrollLayer}
-          ref={(scrollLayerRef): void => {
-            setScrollLayer(scrollLayerRef)
-          }}
-          onClick={outsideModalClickHandler}
+          ref={scrollLayerRef}
           data-testid={`${id}-scrollLayer`}
+          onClick={outsideModalClickHandler}
         >
           <ModalContext.Provider
             value={{
@@ -191,14 +159,14 @@ export const GenericModal = ({
               className={styles.modalLayer}
               aria-labelledby={labelledByID}
               aria-describedby={describedByID}
-              ref={(modalLayerRef): void => setModalLayer(modalLayerRef)}
+              ref={modalLayerRef}
               data-testid={id}
             >
               {children}
             </div>
           </ModalContext.Provider>
         </div>
-      </FocusLock>
+      </FocusOn>
     </Transition>,
     document.body,
   )

package/src/RichTextEditor/RichTextEditor/RichTextEditor.spec.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { type StoryObj } from '@storybook/react'
-import { expect, userEvent, within } from '@storybook/test'
+import { expect, userEvent, waitFor, within } from '@storybook/test'
 import { type EditorContentArray } from '../types'
 import { RichTextEditor, type RichTextEditorProps } from './RichTextEditor'
 
@@ -149,8 +149,9 @@ export const CreateALink: Story = {
   name: 'Create a link',
   play: async (context) => {
     const { canvasElement, step } = context
-    const { getByRole, getByText } = within(canvasElement)
+    const { getByRole, getByText, queryByRole, findByRole } = within(canvasElement)
     const editor = getByRole('textbox')
+
     await step('Focus on editor', async () => {
       await userEvent.click(editor)
       expect(editor).toHaveFocus()
@@ -185,8 +186,14 @@ export const CreateALink: Story = {
       await userEvent.keyboard('{Tab}{Enter}')
     })
 
+    await step('The Link Modal closes', async () => {
+      await waitFor(() => {
+        expect(queryByRole('dialog')).not.toBeInTheDocument()
+      })
+    })
+
     await step('Link exists in the RTE', async () => {
-      const link = getByRole('link', { name: 'Link' })
+      const link = await findByRole('link', { name: 'Link' })
       expect(link).toBeInTheDocument()
     })
   },

package/src/__libs__/react-aria/index.ts

@@ -0,0 +1 @@
+export * from 'react-aria'

package/src/__libs__/react-aria-components/index.ts

@@ -0,0 +1 @@
+export * from 'react-aria-components'