@onepercentio/one-ui 0.19.1 → 0.19.3

package/dist/components/Transition/Transition.js

@@ -1,326 +1,333 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TransitionAnimationTypes = void 0;
-const react_1 = __importStar(require("react"));
-const Transition_module_scss_1 = __importDefault(require("./Transition.module.scss"));
+exports.default = exports.TransitionAnimationTypes = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _TransitionModule = _interopRequireDefault(require("./Transition.module.scss"));
+const _excluded = ["step", "contentStyle", "contentClassName", "children", "className", "onDiscardStep", "lockTransitionWidth", "lockTransitionHeight"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest(); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function TransitionClasses(type) {
-    switch (type) {
-        case TransitionAnimationTypes.COIN_FLIP:
-            return {
-                backward: {
-                    elementExiting: Transition_module_scss_1.default.flipBottomUpOut,
-                    elementEntering: Transition_module_scss_1.default.flipBottomUpIn,
-                },
-                forward: {
-                    elementExiting: Transition_module_scss_1.default.flipBottomUpOut,
-                    elementEntering: Transition_module_scss_1.default.flipBottomUpIn,
-                },
-            };
-        case TransitionAnimationTypes.FADE:
-            return {
-                backward: {
-                    elementExiting: Transition_module_scss_1.default.fadeOutAbsolute,
-                    elementEntering: Transition_module_scss_1.default.fadeInDelayed,
-                },
-                forward: {
-                    elementExiting: Transition_module_scss_1.default.fadeOutAbsolute,
-                    elementEntering: Transition_module_scss_1.default.fadeInDelayed,
-                },
-            };
-        case TransitionAnimationTypes.SLIDE:
-            return {
-                backward: {
-                    elementEntering: Transition_module_scss_1.default.entranceLeft,
-                    elementExiting: "",
-                },
-                forward: {
-                    elementEntering: "",
-                    elementExiting: Transition_module_scss_1.default.exitLeft,
-                },
-            };
-        case TransitionAnimationTypes.POP_FROM_CLICK_ORIGIN:
-        case TransitionAnimationTypes.POP_FROM_ELEMENT_ID:
-            return {
-                backward: {
-                    elementEntering: Transition_module_scss_1.default.fadeIn,
-                    elementExiting: Transition_module_scss_1.default.scaleOut,
-                },
-                forward: {
-                    elementEntering: Transition_module_scss_1.default.scaleIn,
-                    elementExiting: Transition_module_scss_1.default.fadeOut,
-                },
-            };
-        case TransitionAnimationTypes.MASK:
-            return {
-                backward: {
-                    elementEntering: Transition_module_scss_1.default.stubEntering,
-                    elementExiting: Transition_module_scss_1.default.stub,
-                },
-                forward: {
-                    elementEntering: Transition_module_scss_1.default.stubEntering,
-                    elementExiting: Transition_module_scss_1.default.stub,
-                },
-            };
-    }
+  switch (type) {
+    case TransitionAnimationTypes.COIN_FLIP:
+      return {
+        backward: {
+          elementExiting: _TransitionModule.default.flipBottomUpOut,
+          elementEntering: _TransitionModule.default.flipBottomUpIn
+        },
+        forward: {
+          elementExiting: _TransitionModule.default.flipBottomUpOut,
+          elementEntering: _TransitionModule.default.flipBottomUpIn
+        }
+      };
+    case TransitionAnimationTypes.FADE:
+      return {
+        backward: {
+          elementExiting: _TransitionModule.default.fadeOutAbsolute,
+          elementEntering: _TransitionModule.default.fadeInDelayed
+        },
+        forward: {
+          elementExiting: _TransitionModule.default.fadeOutAbsolute,
+          elementEntering: _TransitionModule.default.fadeInDelayed
+        }
+      };
+    case TransitionAnimationTypes.SLIDE:
+      return {
+        backward: {
+          elementEntering: _TransitionModule.default.entranceLeft,
+          elementExiting: ""
+        },
+        forward: {
+          elementEntering: "",
+          elementExiting: _TransitionModule.default.exitLeft
+        }
+      };
+    case TransitionAnimationTypes.POP_FROM_CLICK_ORIGIN:
+    case TransitionAnimationTypes.POP_FROM_ELEMENT_ID:
+      return {
+        backward: {
+          elementEntering: _TransitionModule.default.fadeIn,
+          elementExiting: _TransitionModule.default.scaleOut
+        },
+        forward: {
+          elementEntering: _TransitionModule.default.scaleIn,
+          elementExiting: _TransitionModule.default.fadeOut
+        }
+      };
+    case TransitionAnimationTypes.MASK:
+      return {
+        backward: {
+          elementEntering: _TransitionModule.default.stubEntering,
+          elementExiting: _TransitionModule.default.stub
+        },
+        forward: {
+          elementEntering: _TransitionModule.default.stubEntering,
+          elementExiting: _TransitionModule.default.stub
+        }
+      };
+  }
 }
 function ChildrenWrapperFactory(func, key, externalPropsContainer, toRemoveKeys) {
-    func.associatedKey = key;
-    func.toRemoveKeys = toRemoveKeys;
-    func.externalProps = externalPropsContainer;
-    return func;
+  func.associatedKey = key;
+  func.toRemoveKeys = toRemoveKeys;
+  func.externalProps = externalPropsContainer;
+  return func;
 }
+
 /**
  * Handles the transition between multiple children and recycling of elements
  **/
-function Transition(_a, _containerRef) {
-    var { step, contentStyle, contentClassName = "", children, className, onDiscardStep, lockTransitionWidth = false, lockTransitionHeight = false } = _a, props = __rest(_a, ["step", "contentStyle", "contentClassName", "children", "className", "onDiscardStep", "lockTransitionWidth", "lockTransitionHeight"]);
-    const containerRef = (0, react_1.useMemo)(() => _containerRef || (0, react_1.createRef)(), [_containerRef]);
-    const preTransitionDetails = (0, react_1.useRef)({
-        transformOrigin: "initial",
-    });
-    const [childrenWrappers, setChildrenWrappers] = (0, react_1.useState)(() => {
-        var _a;
-        const externalProps = {
-            "data-testid": "transition-container",
-            key: String(((_a = children[step]) === null || _a === void 0 ? void 0 : _a.key) || step),
-            style: contentStyle,
-            className: contentClassName,
-        };
-        const func = ChildrenWrapperFactory(({ children }) => react_1.default.createElement("div", Object.assign({}, externalProps), children), children[step].key || step, externalProps, []);
-        return [func];
-    });
-    const prevStep = (0, react_1.useRef)(step);
-    const prevChild = (0, react_1.useRef)(children[step]);
-    (0, react_1.useEffect)(() => () => {
-        prevChild.current = children[step];
-    });
-    (0, react_1.useEffect)(() => {
-        var _a, _b, _c, _d, _e;
-        containerRef.current.style.overflow = "hidden";
-        const transitionClasses = props.transitionType === TransitionAnimationTypes.CUSTOM
-            ? props.config
-            : TransitionClasses(props.transitionType || TransitionAnimationTypes.SLIDE);
-        if (prevChild.current !== null &&
-            ((_a = children[step]) === null || _a === void 0 ? void 0 : _a.key) === ((_b = prevChild.current) === null || _b === void 0 ? void 0 : _b.key) // I'm rendering the same screen
-        ) {
-            return () => {
-                prevStep.current = step;
-            };
-        }
-        const key = ((_c = children[step]) === null || _c === void 0 ? void 0 : _c.key) || step;
-        if (prevStep.current !== step && lockTransitionWidth)
-            containerRef.current.style.width = `${containerRef.current.clientWidth}px`;
-        if (prevStep.current !== step && lockTransitionHeight)
-            containerRef.current.style.height = `${containerRef.current.clientHeight}px`;
-        const transitionMask = props.transitionType === TransitionAnimationTypes.MASK
-            ? props.maskFactory(containerRef.current)
-            : "";
-        /** This runs on backwards */
-        if (prevStep.current > step) {
-            const stepToRemove = prevStep.current;
-            const prevKeyToRemove = ((_d = prevChild.current) === null || _d === void 0 ? void 0 : _d.key) || stepToRemove;
-            setChildrenWrappers((screensBeforeChangingStep) => {
-                const enteringScreenRef = (0, react_1.createRef)();
-                const [FirstNextScreen, ...restOfScreens] = screensBeforeChangingStep.filter((a) => (a === null || a === void 0 ? void 0 : a.associatedKey) !== String(key));
-                if (FirstNextScreen) {
-                    Object.assign(FirstNextScreen.externalProps, {
-                        "data-testid": "transition-container",
-                        style: Object.assign(Object.assign({}, contentStyle), { WebkitMaskImage: transitionMask }),
-                        className: `${transitionClasses.backward.elementExiting}`,
-                    });
-                }
-                function animationEndListener(event) {
-                    var _a, _b;
-                    if (event.target !== event.currentTarget)
-                        return;
-                    const isAnimationFromExpectedState = (_a = enteringScreenRef.current) === null || _a === void 0 ? void 0 : _a.classList.contains(transitionClasses.backward.elementEntering);
-                    (_b = enteringScreenRef.current) === null || _b === void 0 ? void 0 : _b.classList.remove(transitionClasses.backward.elementEntering);
-                    setChildrenWrappers((screensAfterTheCurrentStepEntered) => {
-                        if (onDiscardStep) {
-                            if (isAnimationFromExpectedState)
-                                onDiscardStep(prevKeyToRemove);
-                            if (FirstNextScreen && FirstNextScreen.toRemoveKeys)
-                                FirstNextScreen.toRemoveKeys.forEach(onDiscardStep);
-                        }
-                        return screensAfterTheCurrentStepEntered.filter((s) => {
-                            var _a;
-                            const shouldKeep = (s === null || s === void 0 ? void 0 : s.associatedKey) !== String(prevKeyToRemove) &&
-                                !((_a = FirstNextScreen === null || FirstNextScreen === void 0 ? void 0 : FirstNextScreen.toRemoveKeys) === null || _a === void 0 ? void 0 : _a.some((k) => String(k) === String(s === null || s === void 0 ? void 0 : s.associatedKey)));
-                            return shouldKeep;
-                        });
-                    });
-                    event.currentTarget.removeEventListener("animationend", animationEndListener);
-                }
-                const propsContainer = {
-                    ref: enteringScreenRef,
-                    "data-testid": "transition-container",
-                    key,
-                    className: `${transitionClasses.backward.elementEntering} ${contentClassName}`,
-                    style: Object.assign({}, contentStyle),
-                    onAnimationEnd: animationEndListener,
-                };
-                const newWrapper = ChildrenWrapperFactory(({ children }) => {
-                    return react_1.default.createElement("div", Object.assign({}, propsContainer), children);
-                }, key, propsContainer, [prevKeyToRemove, ...((FirstNextScreen === null || FirstNextScreen === void 0 ? void 0 : FirstNextScreen.toRemoveKeys) || [])]);
-                if (FirstNextScreen)
-                    return [
-                        newWrapper,
-                        FirstNextScreen ||
-                            ChildrenWrapperFactory(() => react_1.default.createElement(react_1.default.Fragment, null), "", {}),
-                        ...restOfScreens,
-                    ];
-                else
-                    return [newWrapper];
-            });
+function Transition(_ref, _containerRef) {
+  let step = _ref.step,
+    contentStyle = _ref.contentStyle,
+    _ref$contentClassName = _ref.contentClassName,
+    contentClassName = _ref$contentClassName === void 0 ? "" : _ref$contentClassName,
+    children = _ref.children,
+    className = _ref.className,
+    onDiscardStep = _ref.onDiscardStep,
+    _ref$lockTransitionWi = _ref.lockTransitionWidth,
+    lockTransitionWidth = _ref$lockTransitionWi === void 0 ? false : _ref$lockTransitionWi,
+    _ref$lockTransitionHe = _ref.lockTransitionHeight,
+    lockTransitionHeight = _ref$lockTransitionHe === void 0 ? false : _ref$lockTransitionHe,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const containerRef = (0, _react.useMemo)(function () {
+    return _containerRef || /*#__PURE__*/(0, _react.createRef)();
+  }, [_containerRef]);
+  const preTransitionDetails = (0, _react.useRef)({
+    transformOrigin: "initial"
+  });
+  const _useState = (0, _react.useState)(function () {
+      var _children$step;
+      const externalProps = {
+        key: String(((_children$step = children[step]) === null || _children$step === void 0 ? void 0 : _children$step.key) || step),
+        style: contentStyle,
+        className: contentClassName
+      };
+      const func = ChildrenWrapperFactory(function (_ref2) {
+        let children = _ref2.children;
+        return /*#__PURE__*/_react.default.createElement("div", externalProps, children);
+      }, children[step].key || step, externalProps, []);
+      return [func];
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    childrenWrappers = _useState2[0],
+    setChildrenWrappers = _useState2[1];
+  const prevStep = (0, _react.useRef)(step);
+  const prevChild = (0, _react.useRef)(children[step]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      prevChild.current = children[step];
+    };
+  });
+  (0, _react.useEffect)(function () {
+    var _children$step2, _prevChild$current, _children$step3;
+    containerRef.current.style.overflow = "hidden";
+    const transitionClasses = props.transitionType === TransitionAnimationTypes.CUSTOM ? props.config : TransitionClasses(props.transitionType || TransitionAnimationTypes.SLIDE);
+    if (prevChild.current !== null && ((_children$step2 = children[step]) === null || _children$step2 === void 0 ? void 0 : _children$step2.key) === ((_prevChild$current = prevChild.current) === null || _prevChild$current === void 0 ? void 0 : _prevChild$current.key) // I'm rendering the same screen
+    ) {
+      return function () {
+        prevStep.current = step;
+      };
+    }
+    const key = ((_children$step3 = children[step]) === null || _children$step3 === void 0 ? void 0 : _children$step3.key) || step;
+    if (prevStep.current !== step && lockTransitionWidth) containerRef.current.style.width = "".concat(containerRef.current.clientWidth, "px");
+    if (prevStep.current !== step && lockTransitionHeight) containerRef.current.style.height = "".concat(containerRef.current.clientHeight, "px");
+    const transitionMask = props.transitionType === TransitionAnimationTypes.MASK ? props.maskFactory(containerRef.current) : "";
+
+    /** This runs on backwards */
+    if (prevStep.current > step) {
+      var _prevChild$current2;
+      const stepToRemove = prevStep.current;
+      const prevKeyToRemove = ((_prevChild$current2 = prevChild.current) === null || _prevChild$current2 === void 0 ? void 0 : _prevChild$current2.key) || stepToRemove;
+      setChildrenWrappers(function (screensBeforeChangingStep) {
+        const enteringScreenRef = /*#__PURE__*/(0, _react.createRef)();
+        const _screensBeforeChangin = screensBeforeChangingStep.filter(function (a) {
+            return (a === null || a === void 0 ? void 0 : a.associatedKey) !== String(key);
+          }),
+          _screensBeforeChangin2 = _toArray(_screensBeforeChangin),
+          FirstNextScreen = _screensBeforeChangin2[0],
+          restOfScreens = _screensBeforeChangin2.slice(1);
+        if (FirstNextScreen) {
+          Object.assign(FirstNextScreen.externalProps, {
+            style: _objectSpread(_objectSpread({}, contentStyle), {}, {
+              WebkitMaskImage: transitionMask
+            }),
+            className: "".concat(transitionClasses.backward.elementExiting)
+          });
         }
-        else if (prevStep.current < step) {
-            const stepToDelete = prevStep.current;
-            const prevKeyToRemove = String(((_e = prevChild.current) === null || _e === void 0 ? void 0 : _e.key) || stepToDelete);
-            setChildrenWrappers((screensBeforeChangingStep) => {
-                const lastIndex = screensBeforeChangingStep.length - 1;
-                const lastWrapper = screensBeforeChangingStep[lastIndex];
-                const nextScreenRef = (0, react_1.createRef)();
-                if (lastWrapper) {
-                    Object.assign(lastWrapper.externalProps, {
-                        "data-testid": "transition-container",
-                        style: Object.assign(Object.assign({}, contentStyle), { WebkitMaskImage: transitionMask }),
-                        className: `${contentClassName} ${transitionClasses.forward.elementExiting}`,
-                        onAnimationEnd: (e) => {
-                            var _a;
-                            if (e.target !== e.currentTarget)
-                                return;
-                            if (transitionClasses.forward.elementEntering)
-                                (_a = nextScreenRef.current) === null || _a === void 0 ? void 0 : _a.classList.remove(transitionClasses.forward.elementEntering);
-                            if (onDiscardStep)
-                                onDiscardStep(prevKeyToRemove);
-                            setChildrenWrappers((screensAfterTheCurrentStepEntered) => {
-                                const nextState = screensAfterTheCurrentStepEntered.filter((s) => {
-                                    const shouldMantain = (s === null || s === void 0 ? void 0 : s.associatedKey) !== String(prevKeyToRemove);
-                                    return shouldMantain;
-                                });
-                                return nextState;
-                            });
-                        },
-                    });
-                }
-                const propsContainer = {
-                    ref: nextScreenRef,
-                    "data-testid": "transition-container",
-                    key,
-                    style: Object.assign({}, contentStyle),
-                    className: `${contentClassName} ${transitionClasses.forward.elementEntering}`,
-                };
-                const newWrapper = ChildrenWrapperFactory(({ children }) => {
-                    return react_1.default.createElement("div", Object.assign({}, propsContainer), children);
-                }, key, propsContainer);
-                return [
-                    ...screensBeforeChangingStep.slice(0, lastIndex),
-                    lastWrapper ||
-                        ChildrenWrapperFactory(() => react_1.default.createElement(react_1.default.Fragment, null), "fallback", {}),
-                    newWrapper,
-                ];
+        function animationEndListener(event) {
+          var _enteringScreenRef$cu, _enteringScreenRef$cu2;
+          if (event.target !== event.currentTarget) return;
+          const isAnimationFromExpectedState = (_enteringScreenRef$cu = enteringScreenRef.current) === null || _enteringScreenRef$cu === void 0 ? void 0 : _enteringScreenRef$cu.classList.contains(transitionClasses.backward.elementEntering);
+          (_enteringScreenRef$cu2 = enteringScreenRef.current) === null || _enteringScreenRef$cu2 === void 0 ? void 0 : _enteringScreenRef$cu2.classList.remove(transitionClasses.backward.elementEntering);
+          setChildrenWrappers(function (screensAfterTheCurrentStepEntered) {
+            if (onDiscardStep) {
+              if (isAnimationFromExpectedState) onDiscardStep(prevKeyToRemove);
+              if (FirstNextScreen && FirstNextScreen.toRemoveKeys) FirstNextScreen.toRemoveKeys.forEach(onDiscardStep);
+            }
+            return screensAfterTheCurrentStepEntered.filter(function (s) {
+              var _FirstNextScreen$toRe;
+              const shouldKeep = (s === null || s === void 0 ? void 0 : s.associatedKey) !== String(prevKeyToRemove) && !(FirstNextScreen !== null && FirstNextScreen !== void 0 && (_FirstNextScreen$toRe = FirstNextScreen.toRemoveKeys) !== null && _FirstNextScreen$toRe !== void 0 && _FirstNextScreen$toRe.some(function (k) {
+                return String(k) === String(s === null || s === void 0 ? void 0 : s.associatedKey);
+              }));
+              return shouldKeep;
             });
+          });
+          event.currentTarget.removeEventListener("animationend", animationEndListener);
         }
-        return () => {
-            prevStep.current = step;
+        const propsContainer = {
+          ref: enteringScreenRef,
+          key: key,
+          className: "".concat(transitionClasses.backward.elementEntering, " ").concat(contentClassName),
+          style: _objectSpread({}, contentStyle),
+          onAnimationEnd: animationEndListener
         };
-    }, [step]);
-    (0, react_1.useEffect)(() => {
-        if (childrenWrappers.length === 1 && lockTransitionWidth)
-            containerRef.current.style.width = "";
-        if (childrenWrappers.length === 1 && lockTransitionHeight)
-            containerRef.current.style.height = "";
-    }, [childrenWrappers.length !== 1]);
-    (0, react_1.useEffect)(() => {
-        if (props.transitionType === TransitionAnimationTypes.POP_FROM_ELEMENT_ID &&
-            "elementId" in props) {
-            const element = document.querySelector(`#${props.elementId}`);
-            if (element) {
-                const { clientWidth, clientHeight } = containerRef.current;
-                const offsetX = element.clientLeft + element.offsetLeft + element.clientWidth / 2;
-                const offsetY = element.clientTop + element.offsetTop + element.clientHeight / 2;
-                const percentX = (offsetX * 100) / clientWidth;
-                const percentY = (offsetY * 100) / clientHeight;
-                preTransitionDetails.current.transformOrigin = `${percentX}% ${percentY}%`;
-                Object.assign(containerRef.current.style, {
-                    transformOrigin: `${percentX}% ${percentY}%`,
+        const newWrapper = ChildrenWrapperFactory(function (_ref3) {
+          let children = _ref3.children;
+          return /*#__PURE__*/_react.default.createElement("div", propsContainer, children);
+        }, key, propsContainer, [prevKeyToRemove].concat(_toConsumableArray((FirstNextScreen === null || FirstNextScreen === void 0 ? void 0 : FirstNextScreen.toRemoveKeys) || [])));
+        if (FirstNextScreen) return [newWrapper, FirstNextScreen || ChildrenWrapperFactory(function () {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }, "", {})].concat(_toConsumableArray(restOfScreens));else return [newWrapper];
+      });
+    } else if (prevStep.current < step) {
+      var _prevChild$current3;
+      const stepToDelete = prevStep.current;
+      const prevKeyToRemove = String(((_prevChild$current3 = prevChild.current) === null || _prevChild$current3 === void 0 ? void 0 : _prevChild$current3.key) || stepToDelete);
+      setChildrenWrappers(function (screensBeforeChangingStep) {
+        const lastIndex = screensBeforeChangingStep.length - 1;
+        const lastWrapper = screensBeforeChangingStep[lastIndex];
+        const nextScreenRef = /*#__PURE__*/(0, _react.createRef)();
+        if (lastWrapper) {
+          Object.assign(lastWrapper.externalProps, {
+            style: _objectSpread(_objectSpread({}, contentStyle), {}, {
+              WebkitMaskImage: transitionMask
+            }),
+            className: "".concat(contentClassName, " ").concat(transitionClasses.forward.elementExiting),
+            onAnimationEnd: function onAnimationEnd(e) {
+              var _nextScreenRef$curren;
+              if (e.target !== e.currentTarget) return;
+              if (transitionClasses.forward.elementEntering) (_nextScreenRef$curren = nextScreenRef.current) === null || _nextScreenRef$curren === void 0 ? void 0 : _nextScreenRef$curren.classList.remove(transitionClasses.forward.elementEntering);
+              if (onDiscardStep) onDiscardStep(prevKeyToRemove);
+              setChildrenWrappers(function (screensAfterTheCurrentStepEntered) {
+                const nextState = screensAfterTheCurrentStepEntered.filter(function (s) {
+                  const shouldMantain = (s === null || s === void 0 ? void 0 : s.associatedKey) !== String(prevKeyToRemove);
+                  return shouldMantain;
                 });
+                return nextState;
+              });
             }
+          });
         }
-        else {
-            Object.assign(containerRef.current.style, preTransitionDetails.current);
-        }
-        if (childrenWrappers.length === 1) {
-            containerRef.current.style.overflow = "";
-        }
-    }, [childrenWrappers.length]);
-    const _b = props, { transitionType: _transitionType, config } = _b, propsToSpread = __rest(_b, ["transitionType", "config"]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("section", Object.assign({}, propsToSpread, { onClick: (e) => {
-                const { currentTarget: { offsetTop, offsetLeft, clientWidth, clientHeight }, clientX, clientY, } = e;
-                const offsetX = clientX - offsetLeft;
-                const offsetY = clientY - offsetTop;
-                const percentX = (offsetX * 100) / clientWidth;
-                const percentY = (offsetY * 100) / clientHeight;
-                if (props.transitionType ===
-                    TransitionAnimationTypes.POP_FROM_ELEMENT_ID ||
-                    props.transitionType ===
-                        TransitionAnimationTypes.POP_FROM_CLICK_ORIGIN)
-                    preTransitionDetails.current.transformOrigin = `${percentX}% ${percentY}%`;
-                if (props.onClick)
-                    props.onClick(e);
-            }, "data-testid": "transition-controller", ref: containerRef, className: `${Transition_module_scss_1.default.section} ${className}` }), childrenWrappers.map((Wrapper) => {
-            const childToRender = children.find((a, i) => ((a === null || a === void 0 ? void 0 : a.key) || i) === (Wrapper === null || Wrapper === void 0 ? void 0 : Wrapper.associatedKey));
-            return (react_1.default.createElement(Wrapper, { key: Wrapper === null || Wrapper === void 0 ? void 0 : Wrapper.associatedKey },
-                react_1.default.createElement(react_1.default.Fragment, null, childToRender)));
-        }))));
+        const propsContainer = {
+          ref: nextScreenRef,
+          key: key,
+          style: _objectSpread({}, contentStyle),
+          className: "".concat(contentClassName, " ").concat(transitionClasses.forward.elementEntering)
+        };
+        const newWrapper = ChildrenWrapperFactory(function (_ref4) {
+          let children = _ref4.children;
+          return /*#__PURE__*/_react.default.createElement("div", propsContainer, children);
+        }, key, propsContainer);
+        return [].concat(_toConsumableArray(screensBeforeChangingStep.slice(0, lastIndex)), [lastWrapper || ChildrenWrapperFactory(function () {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }, "fallback", {}), newWrapper]);
+      });
+    }
+    return function () {
+      prevStep.current = step;
+    };
+  }, [step]);
+  (0, _react.useEffect)(function () {
+    if (childrenWrappers.length === 1 && lockTransitionWidth) containerRef.current.style.width = "";
+    if (childrenWrappers.length === 1 && lockTransitionHeight) containerRef.current.style.height = "";
+  }, [childrenWrappers.length !== 1]);
+  (0, _react.useEffect)(function () {
+    if (props.transitionType === TransitionAnimationTypes.POP_FROM_ELEMENT_ID && "elementId" in props) {
+      const element = document.querySelector("#".concat(props.elementId));
+      if (element) {
+        const _ref5 = containerRef.current,
+          clientWidth = _ref5.clientWidth,
+          clientHeight = _ref5.clientHeight;
+        const offsetX = element.clientLeft + element.offsetLeft + element.clientWidth / 2;
+        const offsetY = element.clientTop + element.offsetTop + element.clientHeight / 2;
+        const percentX = offsetX * 100 / clientWidth;
+        const percentY = offsetY * 100 / clientHeight;
+        preTransitionDetails.current.transformOrigin = "".concat(percentX, "% ").concat(percentY, "%");
+        Object.assign(containerRef.current.style, {
+          transformOrigin: "".concat(percentX, "% ").concat(percentY, "%")
+        });
+      }
+    } else {
+      Object.assign(containerRef.current.style, preTransitionDetails.current);
+    }
+    if (childrenWrappers.length === 1) {
+      containerRef.current.style.overflow = "";
+    }
+  }, [childrenWrappers.length]);
+  const propsToSpread = _objectSpread({}, props);
+  delete propsToSpread.transitionType;
+  delete propsToSpread.config;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("section", _extends({}, propsToSpread, {
+    onClick: function onClick(e) {
+      const _e$currentTarget = e.currentTarget,
+        offsetTop = _e$currentTarget.offsetTop,
+        offsetLeft = _e$currentTarget.offsetLeft,
+        clientWidth = _e$currentTarget.clientWidth,
+        clientHeight = _e$currentTarget.clientHeight,
+        clientX = e.clientX,
+        clientY = e.clientY;
+      const offsetX = clientX - offsetLeft;
+      const offsetY = clientY - offsetTop;
+      const percentX = offsetX * 100 / clientWidth;
+      const percentY = offsetY * 100 / clientHeight;
+      if (props.transitionType === TransitionAnimationTypes.POP_FROM_ELEMENT_ID || props.transitionType === TransitionAnimationTypes.POP_FROM_CLICK_ORIGIN) preTransitionDetails.current.transformOrigin = "".concat(percentX, "% ").concat(percentY, "%");
+      if (props.onClick) props.onClick(e);
+    },
+    ref: containerRef,
+    className: "".concat(_TransitionModule.default.section, " ").concat(className)
+  }), childrenWrappers.map(function (Wrapper) {
+    const childToRender = children.find(function (a, i) {
+      return ((a === null || a === void 0 ? void 0 : a.key) || i) === (Wrapper === null || Wrapper === void 0 ? void 0 : Wrapper.associatedKey);
+    });
+    return /*#__PURE__*/_react.default.createElement(Wrapper, {
+      key: Wrapper === null || Wrapper === void 0 ? void 0 : Wrapper.associatedKey
+    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, childToRender));
+  })));
 }
-var TransitionAnimationTypes;
-(function (TransitionAnimationTypes) {
-    TransitionAnimationTypes[TransitionAnimationTypes["SLIDE"] = 0] = "SLIDE";
-    TransitionAnimationTypes[TransitionAnimationTypes["POP_FROM_CLICK_ORIGIN"] = 1] = "POP_FROM_CLICK_ORIGIN";
-    TransitionAnimationTypes[TransitionAnimationTypes["POP_FROM_ELEMENT_ID"] = 2] = "POP_FROM_ELEMENT_ID";
-    TransitionAnimationTypes[TransitionAnimationTypes["FADE"] = 3] = "FADE";
-    TransitionAnimationTypes[TransitionAnimationTypes["COIN_FLIP"] = 4] = "COIN_FLIP";
-    TransitionAnimationTypes[TransitionAnimationTypes["MASK"] = 5] = "MASK";
-    TransitionAnimationTypes[TransitionAnimationTypes["CUSTOM"] = 6] = "CUSTOM";
-})(TransitionAnimationTypes = exports.TransitionAnimationTypes || (exports.TransitionAnimationTypes = {}));
-exports.default = (0, react_1.forwardRef)(Transition);
-//# sourceMappingURL=Transition.js.map
+let TransitionAnimationTypes = /*#__PURE__*/function (TransitionAnimationTypes) {
+  TransitionAnimationTypes[TransitionAnimationTypes["SLIDE"] = 0] = "SLIDE";
+  TransitionAnimationTypes[TransitionAnimationTypes["POP_FROM_CLICK_ORIGIN"] = 1] = "POP_FROM_CLICK_ORIGIN";
+  TransitionAnimationTypes[TransitionAnimationTypes["POP_FROM_ELEMENT_ID"] = 2] = "POP_FROM_ELEMENT_ID";
+  TransitionAnimationTypes[TransitionAnimationTypes["FADE"] = 3] = "FADE";
+  TransitionAnimationTypes[TransitionAnimationTypes["COIN_FLIP"] = 4] = "COIN_FLIP";
+  TransitionAnimationTypes[TransitionAnimationTypes["MASK"] = 5] = "MASK";
+  TransitionAnimationTypes[TransitionAnimationTypes["CUSTOM"] = 6] = "CUSTOM";
+  return TransitionAnimationTypes;
+}({});
+exports.TransitionAnimationTypes = TransitionAnimationTypes;
+var _default = /*#__PURE__*/(0, _react.forwardRef)(Transition);
+exports.default = _default;