@dreamcommerce/aurora 3.1.28-1 → 3.1.29

package/build/tailwind.config.js

@@ -387,15 +387,19 @@ module.exports = {
                 },
                 'modal-backdrop-fade-in': {
                     from: { opacity: '0' },
-                    to: { oapcity: '1' }
+                    to: { opacity: '0.7' }
+                },
+                'modal-backdrop-fade-out': {
+                    from: { opacity: '0.7' },
+                    to: { opacity: '0' }
                 },
                 'modal-slide-in': {
-                    from: { transform: 'translate3d(0, -20vh, 0)' },
-                    to: { transform: 'translate3d(0, 0, 0)' }
+                    from: { opacity: '0', transform: 'translate(-50%, calc(-20vh - 50%))' },
+                    to: { opacity: '1', transform: 'translate(-50%, -50%)' }
                 },
                 'modal-slide-out': {
-                    from: { transform: 'translate3d(0, 0, 0)' },
-                    to: { transform: 'translate3d(0, -20vh, 0)' }
+                    from: { opacity: '1', transform: 'translate(-50%, -50%)' },
+                    to: { opacity: '0', transform: 'translate(-50%, calc(-20vh - 50%))' }
                 },
                 'toast-slide-in-from-right': {
                     from: { transform: 'translateX(calc(100% + var(--a-toast-viewport-padding)))' },
@@ -422,6 +426,7 @@ module.exports = {
                 'accordion-down': 'accordion-down 0.2s ease-out',
                 'accordion-up': 'accordion-up 0.2s ease-out',
                 'modal-backdrop-fade-in': 'modal-backdrop-fade-in 0.3s ease',
+                'modal-backdrop-fade-out': 'modal-backdrop-fade-out 0.3s ease',
                 'modal-slide-in': 'modal-slide-in 0.2s ease',
                 'modal-slide-out': 'modal-slide-out 0.2s ease',
                 'toast-slide-in-from-right': 'toast-slide-in-from-right 0.15s ease-out',

package/package.json

@@ -2,7 +2,7 @@
   "name": "@dreamcommerce/aurora",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "3.1.28-1",
+  "version": "3.1.29",
   "description": "aurora",
   "author": "zefirek",
   "license": "MIT",
@@ -59,6 +59,7 @@
     "@dreamcommerce/utilities": "^1.20.1-6",
     "@radix-ui/react-accordion": "1.1.0",
     "@radix-ui/react-checkbox": "1.1.3",
+    "@radix-ui/react-dialog": "1.1.6",
     "@radix-ui/react-dropdown-menu": "2.1.2",
     "@radix-ui/react-icons": "1.3.2",
     "@radix-ui/react-label": "2.1.0",

package/build/cjs/packages/aurora/src/components/modal/components/modals_wrapper.js

@@ -1,52 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var ReactDOM = require('react-dom');
-var modal_constants = require('../modal_constants.js');
-var use_modals_context = require('../hooks/use_modals_context.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-var ModalsWrapper = function ModalsWrapper() {
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    showWrapper = _useState2[0],
-    setShowWrapper = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    visibleClass = _useState4[0],
-    setVisibleClass = _useState4[1];
-  var _useModalsContext = use_modals_context.useModalsContext(),
-    openedModals = _useModalsContext.openedModals;
-  React.useEffect(function () {
-    var showWrapperTimeout;
-    if (openedModals.length) {
-      setShowWrapper(true);
-      setVisibleClass(true);
-    } else {
-      setVisibleClass(false);
-      showWrapperTimeout = setTimeout(function () {
-        setShowWrapper(false);
-      }, modal_constants.MODALS_WRAPPER_BACKDROP_FADE_DURATION);
-    }
-    return function () {
-      return clearTimeout(showWrapperTimeout);
-    };
-  }, [openedModals]);
-  return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, showWrapper && (/*#__PURE__*/React__default['default'].createElement("div", {
-    className: "aurora-fixed aurora-flex aurora-items-center aurora-justify-center aurora-top-0 aurora-left-0 aurora-w-full aurora-h-full aurora-z-[1000] aurora-p-4"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "aurora-absolute aurora-inset-x-0 aurora-inset-y-0 aurora-bg-inverse aurora-z-10 aurora-transition-opacity aurora-duration-300 aurora-animate-modal-backdrop-fade-in ".concat(visibleClass ? 'aurora-opacity-70' : 'aurora-opacity-0', " js__modal-mask")
-  }), /*#__PURE__*/React__default['default'].createElement("div", {
-    id: modal_constants.MODALS_CONTENT_ID,
-    className: "aurora-flex aurora-items-center aurora-justify-center aurora-z-30"
-  })))), document.body);
-};
-
-exports.ModalsWrapper = ModalsWrapper;
-//# sourceMappingURL=modals_wrapper.js.map

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

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ModalsWrapper: React.FC;

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

@@ -1,44 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { createPortal } from 'react-dom';
-import { MODALS_WRAPPER_BACKDROP_FADE_DURATION, MODALS_CONTENT_ID } from '../modal_constants.js';
-import { useModalsContext } from '../hooks/use_modals_context.js';
-
-var ModalsWrapper = function ModalsWrapper() {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showWrapper = _useState2[0],
-    setShowWrapper = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    visibleClass = _useState4[0],
-    setVisibleClass = _useState4[1];
-  var _useModalsContext = useModalsContext(),
-    openedModals = _useModalsContext.openedModals;
-  useEffect(function () {
-    var showWrapperTimeout;
-    if (openedModals.length) {
-      setShowWrapper(true);
-      setVisibleClass(true);
-    } else {
-      setVisibleClass(false);
-      showWrapperTimeout = setTimeout(function () {
-        setShowWrapper(false);
-      }, MODALS_WRAPPER_BACKDROP_FADE_DURATION);
-    }
-    return function () {
-      return clearTimeout(showWrapperTimeout);
-    };
-  }, [openedModals]);
-  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(React.Fragment, null, showWrapper && (/*#__PURE__*/React.createElement("div", {
-    className: "aurora-fixed aurora-flex aurora-items-center aurora-justify-center aurora-top-0 aurora-left-0 aurora-w-full aurora-h-full aurora-z-[1000] aurora-p-4"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "aurora-absolute aurora-inset-x-0 aurora-inset-y-0 aurora-bg-inverse aurora-z-10 aurora-transition-opacity aurora-duration-300 aurora-animate-modal-backdrop-fade-in ".concat(visibleClass ? 'aurora-opacity-70' : 'aurora-opacity-0', " js__modal-mask")
-  }), /*#__PURE__*/React.createElement("div", {
-    id: MODALS_CONTENT_ID,
-    className: "aurora-flex aurora-items-center aurora-justify-center aurora-z-30"
-  })))), document.body);
-};
-
-export { ModalsWrapper };
-//# sourceMappingURL=modals_wrapper.js.map