@kaizen/components 1.81.0 → 1.81.1

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 };