@royaloperahouse/chord 2.2.3-b-chord-development → 2.2.3-c-chord-development

package/dist/chord.cjs.development.js

@@ -8575,13 +8575,79 @@ var _templateObject$1a, _templateObject2$R, _templateObject3$H, _templateObject4
 var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 62px;\n  background-color: var(--base-color-white);\n  z-index: ", ";\n  position: relative;\n\n  @media ", ", ", " {\n    height: 100vh;\n    padding: 62px 0 0;\n  }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
 var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  margin: 15px;\n  height: 26px;\n  width: 26px;\n  padding: 0;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  @media ", " {\n    margin: 25px;\n  }\n  @media ", ", ", " {\n    margin: 30px;\n  }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
 var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  align-content: center;\n  background-color: rgba(0, 0, 0, 0.40);\n"])));
+var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  align-content: center;\n  background-color: rgba(0, 0, 0, 0.4);\n"])));
 
 var _excluded$k = ["isOpen", "setIsOpen", "children", "appElementId"];
+var MAX_Z_INDEX = 9999999999;
 
 if (Modal.defaultStyles.content) {
   Modal.defaultStyles.content.position = 'static';
 }
+/**
+ * A ModalWindow component, leveraging React Modal for rendering modals with enhanced accessibility
+ * and styling customization. This component is designed to be flexible for various use cases, with
+ * support for mobile responsiveness, custom z-indexes, and a close button.
+ *
+ * # Usage
+ * This component is intended to be used in React applications where modal functionality is required.
+ * It supports a range of props for customization, including isOpen, setIsOpen, children, appElementId,
+ * and accepts all additional props supported by React Modal for further configuration.
+ *
+ * ## Basic Example
+ * ```tsx
+ * import React, { useState } from 'react';
+ * import ModalWindow from './ModalWindow';
+ *
+ * const App = () => {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *
+ *   const toggleModal = () => setIsOpen(!isOpen);
+ *
+ *   return (
+ *     <>
+ *       <button onClick={toggleModal}>Open Modal</button>
+ *       <ModalWindow
+ *         isOpen={isOpen}
+ *         setIsOpen={setIsOpen}
+ *         appElementId="root"
+ *       >
+ *         <div>Modal Content Here</div>
+ *       </ModalWindow>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * ## Advanced Usage
+ * You can further customize the modal by directly passing props supported by React Modal.
+ * This component adapts its z-index based on the device type (mobile or desktop) and allows for an
+ * accessible close functionality.
+ *
+ * ```tsx
+ * <ModalWindow
+ *   isOpen={isOpen}
+ *   setIsOpen={setIsOpen}
+ *   appElementId="root"
+ *   shouldCloseOnOverlayClick={true}
+ * >
+ *   <YourCustomComponent />
+ * </ModalWindow>
+ * ```
+ *
+ * # Props
+ * - `isOpen`: Boolean indicating if the modal is open.
+ * - `setIsOpen`: Function to set the open state of the modal.
+ * - `children`: Content to be displayed within the modal.
+ * - `appElementId`: ID of the app element to assist with accessibility.
+ * - All other props are passed directly to the underlying React Modal component, allowing for extensive customization.
+ *
+ * # Design and Accessibility
+ * This component automatically applies a `ScrollLock` when the modal is open to prevent background
+ * scrolling and sets appropriate z-index values to ensure the modal is layered correctly on the page.
+ * It also configures the modal for accessibility, including support for closing on ESC and setting
+ * `aria-modal` to true.
+ */
+
 
 var ModalWindow = function ModalWindow(_ref) {
   var isOpen = _ref.isOpen,
@@ -8593,10 +8659,10 @@ var ModalWindow = function ModalWindow(_ref) {
   var isMobile = useMobile();
   var customStyles = {
     overlay: {
-      zIndex: isMobile ? 9999999999 : zIndexes.overlay
+      zIndex: isMobile ? MAX_Z_INDEX : zIndexes.overlay
     },
     content: {
-      zIndex: isMobile ? 9999999999 : zIndexes.popup,
+      zIndex: isMobile ? MAX_Z_INDEX : zIndexes.popup,
       background: 'none',
       border: 'none'
     }
@@ -8612,9 +8678,7 @@ var ModalWindow = function ModalWindow(_ref) {
     style: customStyles,
     appElement: appElement,
     shouldCloseOnEsc: true,
-    onRequestClose: function onRequestClose() {
-      return setIsOpen(false);
-    },
+    onRequestClose: closeModalHandler,
     "aria-modal": "true"
   }, modalProps), /*#__PURE__*/React__default.createElement(Overlay, null, /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 6,