@dreamcommerce/aurora 3.1.28 → 3.1.29

package/build/esm/packages/aurora/src/components/link/link.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../utilities/cn.js';
 import { linkVariants } from './link_variants.js';
@@ -11,7 +11,7 @@ var Link = function Link(_ref) {
     variant = _ref.variant,
     decoration = _ref.decoration,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("a", _objectSpread2({
+  return /*#__PURE__*/React__default.createElement("a", _objectSpread2({
     className: cn(linkVariants({
       size: size,
       variant: variant,

package/build/esm/packages/aurora/src/components/loader/loader.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../utilities/cn.js';
 import { loaderVariants } from './loader_variants.js';
@@ -8,7 +8,7 @@ var Loader = function Loader(_ref) {
   var className = _ref.className,
     variant = _ref.variant,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("div", _objectSpread2({
+  return /*#__PURE__*/React__default.createElement("div", _objectSpread2({
     "data-test-el": "loader",
     className: cn(loaderVariants({
       variant: variant

package/build/esm/packages/aurora/src/components/message_box/message_box.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 import { cn } from '../../utilities/cn.js';
 import { Typography } from '../typography/typography.js';
 import { MESSAGE_BOX_ICONS, MESSAGE_BOX_ICON_COLORS, MESSAGE_BOX_VARIANTS } from './message_box_constants.js';
 import { messageBoxVariants } from './message_box_variants.js';
 
-var MessageBox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var MessageBox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? MESSAGE_BOX_VARIANTS.info : _ref$variant,
     header = _ref.header,
@@ -21,7 +21,7 @@ var MessageBox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     noRadius = _ref$noRadius === void 0 ? false : _ref$noRadius;
   var Icon = MESSAGE_BOX_ICONS[variant];
   var iconColor = MESSAGE_BOX_ICON_COLORS[variant];
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
     className: cn('message-box-link-icon', messageBoxVariants({
       variant: variant
@@ -33,19 +33,19 @@ var MessageBox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       'aurora-border-none': noBorder,
       'aurora-shadow-l': shadow
     }, className)
-  }, showIcon ? (/*#__PURE__*/React.createElement("div", {
+  }, showIcon ? (/*#__PURE__*/React__default.createElement("div", {
     className: cn(children && !fullWidth && 'aurora-h-full aurora-flex aurora-self-start aurora-mt-1')
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React__default.createElement(Icon, {
     className: cn('aurora-mr-2 aurora-w-4 aurora-h-4', iconColor)
-  }))) : null, /*#__PURE__*/React.createElement("div", {
+  }))) : null, /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-flex aurora-justify-between aurora-items-center aurora-w-full"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-flex aurora-flex-col aurora-w-full"
-  }, header && (/*#__PURE__*/React.createElement("div", {
+  }, header && (/*#__PURE__*/React__default.createElement("div", {
     className: "aurora-flex aurora-items-center aurora-w-full"
-  }, /*#__PURE__*/React.createElement("h4", {
+  }, /*#__PURE__*/React__default.createElement("h4", {
     className: "aurora-text-s aurora-font-semibold aurora-text aurora-w-full"
-  }, header))), /*#__PURE__*/React.createElement(Typography, {
+  }, header))), /*#__PURE__*/React__default.createElement(Typography, {
     className: "aurora-w-full",
     size: "xs"
   }, children))));

package/build/esm/packages/aurora/src/components/modal/components/modal/modal.js

@@ -1,17 +1,10 @@
-import React, { useState, useRef, useCallback, useEffect } from 'react';
-import { slicedToArray as _slicedToArray } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { cn } from '../../../../utilities/cn.js';
-import { useClickOutside } from '../../../../hooks/use_click_outside.js';
-import { createPortal } from 'react-dom';
-import { MODAL_VISIBILITY_STATE, MODAL_SLIDE_FADE_DURATION, MODAL_WIDTH_VARIANT } from '../../modal_constants.js';
-import { ModalFooter } from './modal_footer.js';
-import { ModalHeader } from './modal_header.js';
-import { ModalUtils } from './modal_utils.js';
-import { modalVariants } from '../../modal_variants.js';
+import React__default, { useRef, useCallback, useEffect } from 'react';
+import { MODAL_WIDTH_VARIANT } from '../../modal_constants.js';
+import { Root, Portal, Overlay } from '../../../../../../../external/@radix-ui/react-dialog/dist/index.mjs.js';
 import { useModalsContext } from '../../hooks/use_modals_context.js';
+import { ModalContent } from './modal_content.js';
 
 var Modal = function Modal(_ref) {
-  var _header$hasCloseIcon;
   var name = _ref.name,
     hideAllModalsOnClose = _ref.hideAllModalsOnClose,
     _ref$width = _ref.width,
@@ -26,155 +19,45 @@ var Modal = function Modal(_ref) {
     closeOnEscButton = _ref$closeOnEscButton === void 0 ? true : _ref$closeOnEscButton,
     _ref$initiallyVisible = _ref.initiallyVisible,
     initiallyVisible = _ref$initiallyVisible === void 0 ? false : _ref$initiallyVisible;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    visibleClass = _useState2[0],
-    setVisibleClass = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isScrolledToBottom = _useState4[0],
-    setIsScrolledToBottom = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    hasScroll = _useState6[0],
-    setHasScroll = _useState6[1];
-  var scrollTimeoutRef = useRef();
-  var contentRef = useRef(null);
-  var modalRef = useRef(null);
   var isInitializedRef = useRef(false);
+  var initiallyVisibleRef = useRef(initiallyVisible);
   var _useModalsContext = useModalsContext(),
-    modalsManagerContainerSelector = _useModalsContext.modalsManagerContainerSelector,
     addModal = _useModalsContext.addModal,
-    getModal = _useModalsContext.getModal,
+    removeModal = _useModalsContext.removeModal,
     hideModal = _useModalsContext.hideModal,
     showModal = _useModalsContext.showModal,
-    hideAllModals = _useModalsContext.hideAllModals;
-  var $modalsManagerContainer = document.querySelector(modalsManagerContainerSelector);
-  var modal = getModal(name);
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    renderModal = _useState8[0],
-    setRenderModal = _useState8[1];
+    hideAllModals = _useModalsContext.hideAllModals,
+    openModalName = _useModalsContext.openModalName;
   var closeModal = useCallback(function () {
     hideAllModalsOnClose ? hideAllModals(onCloseAction) : hideModal(name, onCloseAction);
   }, [hideAllModalsOnClose, hideAllModals, hideModal, name, onCloseAction]);
-  var checkScroll = useCallback(function () {
-    var contentElement = contentRef.current;
-    if (!contentElement) return;
-    var scrollTop = contentElement.scrollTop,
-      scrollHeight = contentElement.scrollHeight,
-      clientHeight = contentElement.clientHeight;
-    var atBottom = Math.abs(scrollTop + clientHeight - scrollHeight) < 5;
-    var hasScrollableContent = scrollHeight > clientHeight;
-    setIsScrolledToBottom(atBottom);
-    setHasScroll(hasScrollableContent);
-  }, []);
-  var handleScroll = useCallback(function () {
-    if (scrollTimeoutRef.current) {
-      clearTimeout(scrollTimeoutRef.current);
-    }
-    scrollTimeoutRef.current = setTimeout(checkScroll, 50);
-  }, [checkScroll]);
-  // Handle scroll detection
-  useEffect(function () {
-    if (!renderModal || !visibleClass || !children) return;
-    var contentElement = contentRef.current;
-    if (!contentElement) return;
-    checkScroll();
-    contentElement.addEventListener('scroll', handleScroll);
-    return function () {
-      contentElement.removeEventListener('scroll', handleScroll);
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
-    };
-  }, [renderModal, visibleClass, handleScroll, checkScroll, children]);
   // Initial setup
   useEffect(function () {
     if (!isInitializedRef.current) {
-      addModal({
-        name: name,
-        visibilityState: MODAL_VISIBILITY_STATE.none,
-        width: width
-      });
-      if (initiallyVisible) showModal(name);
+      addModal(name);
+      if (initiallyVisibleRef.current) showModal(name);
       isInitializedRef.current = true;
     }
     return function () {
-      return closeModal();
+      return removeModal(name);
     };
-  }, []);
-  // Handle visibility changes
-  useEffect(function () {
-    var timeoutId;
-    switch (modal === null || modal === void 0 ? void 0 : modal.visibilityState) {
-      case MODAL_VISIBILITY_STATE.visible:
-        setRenderModal(true);
-        timeoutId = setTimeout(function () {
-          return setVisibleClass(true);
-        }, MODAL_SLIDE_FADE_DURATION);
-        break;
-      case MODAL_VISIBILITY_STATE.hidden:
-        setVisibleClass(false);
-        break;
-      case MODAL_VISIBILITY_STATE.none:
-        setVisibleClass(false);
-        timeoutId = setTimeout(function () {
-          return setRenderModal(false);
-        }, MODAL_SLIDE_FADE_DURATION);
-        break;
-    }
-    return function () {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-    };
-  }, [modal === null || modal === void 0 ? void 0 : modal.visibilityState]);
-  // Handle keyboard events
-  var handleKeyDown = useCallback(function (event) {
-    if (event.key === 'Escape' && closeOnEscButton) {
-      closeModal();
-    }
-  }, [closeOnEscButton, closeModal]);
-  useEffect(function () {
-    document.addEventListener('keydown', handleKeyDown);
-    return function () {
-      return document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [handleKeyDown]);
-  // Handle outside click
-  useClickOutside({
-    refs: [modalRef],
-    callback: function callback() {
-      if (closeOnOutsideClick && (modal === null || modal === void 0 ? void 0 : modal.visibilityState) === MODAL_VISIBILITY_STATE.visible) {
-        closeModal();
-      }
-    }
-  });
-  if (!$modalsManagerContainer) return null;
-  return renderModal ? /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", {
-    ref: modalRef,
-    "data-modal-id": name,
-    "data-test-id": "modal",
-    className: cn(modalVariants({
-      width: width
-    }), visibleClass ? 'aurora-opacity-100 aurora-animate-modal-slide-in' : 'aurora-opacity-0 aurora-animate-modal-slide-out')
-  }, header && (/*#__PURE__*/React.createElement(ModalHeader, {
-    hasCloseIcon: ModalUtils.isHeaderObject(header) ? (_header$hasCloseIcon = header.hasCloseIcon) !== null && _header$hasCloseIcon !== void 0 ? _header$hasCloseIcon : true : true,
-    onClose: closeModal
-  }, ModalUtils.isHeaderObject(header) ? header.content : header)), children && (/*#__PURE__*/React.createElement("div", {
-    ref: contentRef,
-    className: cn("aurora-overflow-y-auto custom-scrollbar first:aurora-mt-6 last:aurora-mb-6 aurora-px-6", {
-      'aurora-pb-6': footer && hasScroll
-    }),
-    style: {
-      maxHeight: 'calc(100vh - 200px)'
+  }, [name, addModal, removeModal, showModal]);
+  var renderModal = name === openModalName;
+  return /*#__PURE__*/React__default.createElement(Root, {
+    open: renderModal,
+    onOpenChange: function onOpenChange(open) {
+      if (!open) closeModal();
     }
-  }, children)), footer && (/*#__PURE__*/React.createElement(ModalFooter, {
-    className: cn('', {
-      'aurora-border-t': hasScroll && !isScrolledToBottom
-    })
-  }, footer))), $modalsManagerContainer) : null;
+  }, /*#__PURE__*/React__default.createElement(Portal, null, /*#__PURE__*/React__default.createElement(Overlay, {
+    className: "data-[state=open]:aurora-animate-modal-backdrop-fade-in data-[state=closed]:aurora-animate-modal-backdrop-fade-out aurora-fixed aurora-inset-0 aurora-z-[999] aurora-bg-inverse aurora-opacity-70 js__modal-mask"
+  }), /*#__PURE__*/React__default.createElement(ModalContent, {
+    name: name,
+    width: width,
+    header: header,
+    footer: footer,
+    closeOnOutsideClick: closeOnOutsideClick,
+    closeOnEscButton: closeOnEscButton
+  }, children)));
 };
 
 export { Modal };

package/build/esm/packages/aurora/src/components/modal/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA,sCAAsC,wEAA4E;AAClH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_close_icon.d.ts

@@ -1,3 +1,2 @@
-import { FC } from 'react';
-import { IModalCloseIconProps } from "../../modal_types";
-export declare const ModalCloseIcon: FC<IModalCloseIconProps>;
+import React from 'react';
+export declare const ModalCloseIcon: () => React.JSX.Element;

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_close_icon.js

@@ -1,15 +1,8 @@
-import React from 'react';
+import React__default from 'react';
 import { CloseLineIcon } from '../../../../assets/icons/close_line_icon.js';
 
-var ModalCloseIcon = function ModalCloseIcon(_ref) {
-  var onClose = _ref.onClose;
-  return /*#__PURE__*/React.createElement("button", {
-    className: "aurora-p-1 aurora-border-0 aurora-bg-none aurora-cursor-pointer aurora-rounded-4 aurora-bg-transparent hover:aurora-bg-hover",
-    onClick: function onClick() {
-      return onClose();
-    },
-    "data-test-id": "close-modal"
-  }, /*#__PURE__*/React.createElement(CloseLineIcon, null));
+var ModalCloseIcon = function ModalCloseIcon() {
+  return /*#__PURE__*/React__default.createElement(CloseLineIcon, null);
 };
 
 export { ModalCloseIcon };

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_close_icon.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_content.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { TModalContentProps } from "../../modal_types";
+export declare const ModalContent: React.ForwardRefExoticComponent<TModalContentProps & React.RefAttributes<React.ElementType<React.ForwardRefExoticComponent<Dialog.DialogContentProps & React.RefAttributes<HTMLDivElement>>, keyof React.JSX.IntrinsicElements>>>;

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_content.js

@@ -0,0 +1,59 @@
+import React__default, { useRef } from 'react';
+import { cn } from '../../../../utilities/cn.js';
+import { MODAL_WIDTH_VARIANT } from '../../modal_constants.js';
+import { Content } from '../../../../../../../external/@radix-ui/react-dialog/dist/index.mjs.js';
+import { ModalFooter } from './modal_footer.js';
+import { ModalHeader } from './modal_header.js';
+import { ModalUtils } from './modal_utils.js';
+import { modalVariants } from '../../modal_variants.js';
+import { useScroll } from '../../../../hooks/use_scroll.js';
+
+var ModalContent = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var _header$hasCloseIcon;
+  var name = _ref.name,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? MODAL_WIDTH_VARIANT.m : _ref$width,
+    header = _ref.header,
+    footer = _ref.footer,
+    children = _ref.children,
+    _ref$closeOnOutsideCl = _ref.closeOnOutsideClick,
+    closeOnOutsideClick = _ref$closeOnOutsideCl === void 0 ? true : _ref$closeOnOutsideCl,
+    _ref$closeOnEscButton = _ref.closeOnEscButton,
+    closeOnEscButton = _ref$closeOnEscButton === void 0 ? true : _ref$closeOnEscButton;
+  var contentRef = useRef(null);
+  var _useScroll = useScroll(contentRef),
+    atBottom = _useScroll.atBottom,
+    hasScroll = _useScroll.hasScroll;
+  return /*#__PURE__*/React__default.createElement(Content, {
+    onEscapeKeyDown: function onEscapeKeyDown(e) {
+      if (!closeOnEscButton) e.preventDefault();
+    },
+    onInteractOutside: function onInteractOutside(e) {
+      if (!closeOnOutsideClick) e.preventDefault();
+    },
+    "data-modal-id": name,
+    "data-test-id": "modal",
+    className: cn(modalVariants({
+      width: width
+    })),
+    ref: ref
+  }, header && (/*#__PURE__*/React__default.createElement(ModalHeader, {
+    hasCloseIcon: ModalUtils.isHeaderObject(header) ? (_header$hasCloseIcon = header.hasCloseIcon) !== null && _header$hasCloseIcon !== void 0 ? _header$hasCloseIcon : true : true
+  }, ModalUtils.isHeaderObject(header) ? header.content : header)), children && (/*#__PURE__*/React__default.createElement("div", {
+    ref: contentRef,
+    className: cn("aurora-overflow-y-auto custom-scrollbar first:aurora-mt-6 last:aurora-mb-6 aurora-px-6", {
+      'aurora-pb-6': footer && hasScroll
+    }),
+    style: {
+      maxHeight: 'calc(100vh - 200px)'
+    }
+  }, children)), footer && (/*#__PURE__*/React__default.createElement(ModalFooter, {
+    className: cn('', {
+      'aurora-border-t': hasScroll && !atBottom
+    })
+  }, footer)));
+});
+ModalContent.displayName = 'ModalContent';
+
+export { ModalContent };
+//# sourceMappingURL=modal_content.js.map

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA,wBAAwB,wEAA4E;AACpG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_footer.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 import { cn } from '../../../../utilities/cn.js';
 
 var ModalFooter = function ModalFooter(_ref) {
   var className = _ref.className,
     children = _ref.children;
-  return /*#__PURE__*/React.createElement("footer", {
+  return /*#__PURE__*/React__default.createElement("footer", {
     className: cn('aurora-flex aurora-items-center aurora-justify-end aurora-gap-3 aurora-pt-5 aurora-pb-6 aurora-px-6', className),
     "data-test-id": "modal-footer"
   }, children);

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_header.d.ts

@@ -1,3 +1,3 @@
 import React, { PropsWithChildren } from 'react';
 import { IModalHeaderProps } from "../../modal_types";
-export declare const ModalHeader: ({ onClose, hasCloseIcon, children }: PropsWithChildren<IModalHeaderProps>) => React.JSX.Element;
+export declare const ModalHeader: ({ hasCloseIcon, children }: PropsWithChildren<IModalHeaderProps>) => React.JSX.Element;

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_header.js

@@ -1,18 +1,20 @@
-import React from 'react';
+import React__default from 'react';
+import { Title, Close } from '../../../../../../../external/@radix-ui/react-dialog/dist/index.mjs.js';
 import { ModalCloseIcon } from './modal_close_icon.js';
 
 var ModalHeader = function ModalHeader(_ref) {
-  var onClose = _ref.onClose,
-    hasCloseIcon = _ref.hasCloseIcon,
+  var hasCloseIcon = _ref.hasCloseIcon,
     children = _ref.children;
-  return /*#__PURE__*/React.createElement("header", {
+  return /*#__PURE__*/React__default.createElement("header", {
     className: 'aurora-flex aurora-items-center aurora-justify-between aurora-pt-6 aurora-pb-5 aurora-px-6 aurora-mb-6 aurora-border-b',
     "data-test-id": "modal-header"
-  }, children ? /*#__PURE__*/React.createElement("h3", {
+  }, children ? (/*#__PURE__*/React__default.createElement(Title, {
+    asChild: true,
     className: "aurora-font-bold aurora-text-xl"
-  }, children) : null, hasCloseIcon && /*#__PURE__*/React.createElement(ModalCloseIcon, {
-    onClose: onClose
-  }));
+  }, /*#__PURE__*/React__default.createElement("h3", null, children))) : null, hasCloseIcon && (/*#__PURE__*/React__default.createElement(Close, {
+    className: "aurora-p-1 aurora-border-0 aurora-bg-none aurora-cursor-pointer aurora-rounded-4 aurora-bg-transparent hover:aurora-bg-hover",
+    "data-test-id": "close-modal"
+  }, /*#__PURE__*/React__default.createElement(ModalCloseIcon, null))));
 };
 
 export { ModalHeader };

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_header.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,6BAA6B,wEAA4E;AACzG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/modal/hooks/use_modals.d.ts

@@ -1,12 +1,9 @@
-import { IModal } from '../modal_types';
 declare const useModals: () => {
-    modalsManagerContainerSelector: string;
-    addModal: (modal: IModal) => void;
-    updateModal: (modal: IModal) => void;
-    getModal: (modalName: string) => IModal | undefined;
-    showModal: (modalName: string) => void;
-    hideModal: (modalName: string, onCloseAction: () => void | undefined) => void;
-    hideAllModals: (onCloseAction: () => void | undefined) => void;
-    openedModals: string[];
+    addModal: (modalName: string) => void;
+    removeModal: (modalName: string) => void;
+    showModal: (modalName: string, first?: boolean) => void;
+    hideModal: (modalName: string, onCloseAction?: () => void) => void;
+    hideAllModals: (onCloseAction?: () => void) => void;
+    openModalName: string;
 };
 export default useModals;

package/build/esm/packages/aurora/src/components/modal/hooks/use_modals.js

@@ -1,104 +1,54 @@
-import { useState } from 'react';
-import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { MODALS_CONTENT_ID, MODAL_VISIBILITY_STATE } from '../modal_constants.js';
+import { useMemo, useRef, useState, useCallback } from 'react';
+import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 
 var useModals = function useModals() {
+  var modalsStackRef = useRef([]);
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
-    modalsStack = _useState2[0],
-    setModalsStack = _useState2[1];
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    openedModals = _useState4[0],
-    setOpenedModals = _useState4[1];
-  var modalsManagerContainerSelector = "#".concat(MODALS_CONTENT_ID);
-  var addModal = function addModal(modal) {
-    setModalsStack(function (stack) {
-      var modalNameAlreadyExist = stack.some(function (stackModal) {
-        return stackModal.name === modal.name;
-      });
-      if (modalNameAlreadyExist) {
-        return _toConsumableArray(stack);
-      } else {
-        return [].concat(_toConsumableArray(stack), [modal]);
-      }
-    });
-  };
-  var updateModal = function updateModal(modal) {
-    setModalsStack(function (previousStack) {
-      var updatedStack = previousStack.map(function (stackModal) {
-        return stackModal.name === modal.name ? _objectSpread2({}, modal) : stackModal;
-      });
-      return updatedStack;
-    });
-  };
-  var getModal = function getModal(modalName) {
-    return modalsStack.find(function (stackModal) {
-      return stackModal.name === modalName;
-    });
-  };
-  var showModal = function showModal(modalName) {
+    openedModals = _useState2[0],
+    setOpenedModals = _useState2[1];
+  var addModal = useCallback(function (modalName) {
+    if (modalsStackRef.current.includes(modalName)) return;
+    modalsStackRef.current = [].concat(_toConsumableArray(modalsStackRef.current), [modalName]);
+  }, []);
+  var showModal = useCallback(function (modalName) {
+    var first = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (!modalsStackRef.current.includes(modalName)) return;
     setOpenedModals(function (modals) {
-      setVisibleState(modals, MODAL_VISIBILITY_STATE.hidden);
+      if (modals.includes(modalName)) return modals;
+      if (first) return [modalName].concat(_toConsumableArray(modals));
       return [].concat(_toConsumableArray(modals), [modalName]);
     });
-    setVisibleState(modalName, MODAL_VISIBILITY_STATE.visible);
-  };
-  var hideModal = function hideModal(modalName, onCloseAction) {
+  }, []);
+  var hideModal = useCallback(function (modalName, onCloseAction) {
     setOpenedModals(function (modals) {
-      var secondToLastItem = modals[modals.length - 2];
-      setVisibleState(secondToLastItem, MODAL_VISIBILITY_STATE.visible);
-      return modals.filter(function (modal) {
-        return modal !== modalName;
+      return modals.filter(function (m) {
+        return m !== modalName;
       });
     });
-    setVisibleState(modalName, MODAL_VISIBILITY_STATE.none);
     onCloseAction && onCloseAction();
-  };
-  var hideAllModals = function hideAllModals(onCloseAction) {
+  }, []);
+  var removeModal = useCallback(function (modalName) {
+    modalsStackRef.current = modalsStackRef.current.filter(function (m) {
+      return m !== modalName;
+    });
+    hideModal(modalName);
+  }, [hideModal]);
+  var hideAllModals = useCallback(function (onCloseAction) {
     setOpenedModals([]);
-    setVisibleStatesToNone();
     onCloseAction && onCloseAction();
-  };
-  var setVisibleState = function setVisibleState(modalName, state) {
-    if (typeof modalName === 'string') {
-      setModalsStack(function (prevState) {
-        return prevState.map(function (modal) {
-          return modal.name === modalName ? _objectSpread2(_objectSpread2({}, modal), {}, {
-            visibilityState: state
-          }) : modal;
-        });
-      });
-    } else {
-      setModalsStack(function (prevState) {
-        return prevState.map(function (modal) {
-          if (!modalName) return modal;
-          return modalName.includes(modal.name) ? _objectSpread2(_objectSpread2({}, modal), {}, {
-            visibilityState: state
-          }) : modal;
-        });
-      });
-    }
-  };
-  var setVisibleStatesToNone = function setVisibleStatesToNone() {
-    setModalsStack(function (prevState) {
-      return prevState.map(function (modal) {
-        return _objectSpread2(_objectSpread2({}, modal), {}, {
-          visibilityState: MODAL_VISIBILITY_STATE.none
-        });
-      });
-    });
-  };
-  return {
-    modalsManagerContainerSelector: modalsManagerContainerSelector,
-    addModal: addModal,
-    updateModal: updateModal,
-    getModal: getModal,
-    showModal: showModal,
-    hideModal: hideModal,
-    hideAllModals: hideAllModals,
-    openedModals: openedModals
-  };
+  }, []);
+  var openModalName = openedModals[0];
+  return useMemo(function () {
+    return {
+      addModal: addModal,
+      removeModal: removeModal,
+      showModal: showModal,
+      hideModal: hideModal,
+      hideAllModals: hideAllModals,
+      openModalName: openModalName
+    };
+  }, [addModal, removeModal, showModal, hideModal, hideAllModals, openModalName]);
 };
 
 export default useModals;

package/build/esm/packages/aurora/src/components/modal/hooks/use_modals.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/modal/hooks/use_modals_context.js

@@ -3,7 +3,7 @@ import { ModalsManagerContext } from '../modal_context.js';
 
 function useModalsContext() {
   var context = useContext(ModalsManagerContext);
-  if (Object.keys(context).length === 0 && context.constructor === Object) {
+  if (!context) {
     throw new Error("Modal component cannot be rendered outside the ModalWrapper component");
   }
   return context;

package/build/esm/packages/aurora/src/components/modal/modal_constants.d.ts

@@ -1,11 +1,3 @@
-export declare const MODALS_CONTENT_ID = "modals-content";
-export declare const MODALS_WRAPPER_BACKDROP_FADE_DURATION = 300;
-export declare const MODAL_SLIDE_FADE_DURATION = 200;
-export declare const MODAL_VISIBILITY_STATE: {
-    readonly none: "none";
-    readonly hidden: "hidden";
-    readonly visible: "visible";
-};
 export declare const MODAL_WIDTH_VARIANT: {
     readonly s: "s";
     readonly m: "m";