@onepercentio/one-ui 0.1.2

package/dist/components/Transition/Transition.js

@@ -0,0 +1,223 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
+});
+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"));
+function TransitionClasses(type) {
+    switch (type) {
+        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,
+                },
+            };
+    }
+}
+/**
+ * Handles the transition between multiple children and recycling of elements
+ **/
+function Transition(_a) {
+    var _b, _c;
+    var { step, contentStyle, contentClassName = "", children, className, onDiscardStep, lockTransitionWidth = false } = _a, props = __rest(_a, ["step", "contentStyle", "contentClassName", "children", "className", "onDiscardStep", "lockTransitionWidth"]);
+    const preTransitionDetails = (0, react_1.useRef)({
+        transformOrigin: "initial",
+    });
+    const containerRef = (0, react_1.useRef)(null);
+    const [screensStack, setScreensStack] = (0, react_1.useState)([
+        react_1.default.createElement("div", { "data-testid": "transition-container", key: String(((_b = children[step]) === null || _b === void 0 ? void 0 : _b.key) || step), style: contentStyle, className: contentClassName }, children[step]),
+    ]);
+    const prevStep = (0, react_1.useRef)(step);
+    const prevKey = (0, react_1.useRef)((_c = children[step]) === null || _c === void 0 ? void 0 : _c.key);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        containerRef.current.style.overflow = "hidden";
+        const transitionClasses = props.transitionType === TransitionAnimationTypes.CUSTOM
+            ? props.config
+            : TransitionClasses(props.transitionType || TransitionAnimationTypes.SLIDE);
+        if (prevKey.current !== null &&
+            ((_a = children[step]) === null || _a === void 0 ? void 0 : _a.key) === prevKey.current // I'm rendering the same screen
+        ) {
+            return () => {
+                prevStep.current = step;
+            };
+        }
+        const key = ((_b = children[step]) === null || _b === void 0 ? void 0 : _b.key) || step;
+        if (prevStep.current !== step && lockTransitionWidth)
+            containerRef.current.style.width = `${containerRef.current.clientWidth}px`;
+        if (prevStep.current > step) {
+            const stepToRemove = prevStep.current;
+            const prevKeyToRemove = prevKey.current || stepToRemove;
+            setScreensStack((screensBeforeChangingStep) => {
+                var _a;
+                const enteringScreenRef = (0, react_1.createRef)();
+                const [firstNextScreen, ...restOfScreens] = screensBeforeChangingStep.filter((a) => a.key !== String(key));
+                const clonedFirst = react_1.default.cloneElement(firstNextScreen, {
+                    "data-testid": "transition-container",
+                    style: Object.assign({}, contentStyle),
+                    className: `${transitionClasses.backward.elementExiting} ${((_a = firstNextScreen.props.className) === null || _a === void 0 ? void 0 : _a.replace(transitionClasses.backward.elementEntering, "")) || ""}`,
+                });
+                function animationEndListener(element) {
+                    var _a, _b;
+                    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);
+                    setScreensStack((screensAfterTheCurrentStepEntered) => {
+                        if (onDiscardStep && isAnimationFromExpectedState)
+                            onDiscardStep(prevKeyToRemove);
+                        return screensAfterTheCurrentStepEntered.filter((s) => s.key !== String(prevKeyToRemove));
+                    });
+                    element.currentTarget.removeEventListener("animationend", animationEndListener);
+                }
+                return [
+                    react_1.default.createElement("div", { ref: enteringScreenRef, "data-testid": "transition-container", key: key, className: `${transitionClasses.backward.elementEntering} ${contentClassName}`, style: Object.assign({}, contentStyle), onAnimationEnd: animationEndListener }, children[step]),
+                    clonedFirst,
+                    ...restOfScreens,
+                ];
+            });
+        }
+        else if (prevStep.current < step) {
+            const stepToDelete = prevStep.current;
+            const prevKeyToRemove = prevKey.current || stepToDelete;
+            setScreensStack((screensBeforeChangingStep) => {
+                const lastIndex = screensBeforeChangingStep.length - 1;
+                const lastScreen = screensBeforeChangingStep[lastIndex];
+                const nextScreenRef = (0, react_1.createRef)();
+                const clonedLast = react_1.default.cloneElement(lastScreen, {
+                    "data-testid": "transition-container",
+                    style: Object.assign({}, contentStyle),
+                    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);
+                        setScreensStack((screensAfterTheCurrentStepEntered) => {
+                            const nextState = screensAfterTheCurrentStepEntered.filter((s) => {
+                                return s.key !== String(prevKeyToRemove);
+                            });
+                            return nextState;
+                        });
+                    },
+                });
+                return [
+                    ...screensBeforeChangingStep.slice(0, lastIndex),
+                    clonedLast,
+                    react_1.default.createElement("div", { ref: nextScreenRef, "data-testid": "transition-container", key: key, style: Object.assign({}, contentStyle), className: `${contentClassName} ${transitionClasses.forward.elementEntering}` }, children[step]),
+                ];
+            });
+        }
+        return () => {
+            var _a;
+            prevStep.current = step;
+            prevKey.current = (_a = children[step]) === null || _a === void 0 ? void 0 : _a.key;
+        };
+    }, [step]);
+    (0, react_1.useEffect)(() => {
+        if (screensStack.length === 1 && lockTransitionWidth)
+            containerRef.current.style.width = "";
+    }, [screensStack.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}%`,
+                });
+            }
+        }
+        else {
+            Object.assign(containerRef.current.style, preTransitionDetails.current);
+        }
+        if (screensStack.length === 1) {
+            containerRef.current.style.overflow = "";
+        }
+    }, [screensStack.length]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("section", { onClick: ({ currentTarget: { offsetTop, offsetLeft, clientWidth, clientHeight }, clientX, clientY, }) => {
+                const offsetX = clientX - offsetLeft;
+                const offsetY = clientY - offsetTop;
+                const percentX = (offsetX * 100) / clientWidth;
+                const percentY = (offsetY * 100) / clientHeight;
+                preTransitionDetails.current.transformOrigin = `${percentX}% ${percentY}%`;
+            }, "data-testid": "transition-controller", ref: containerRef, className: `${Transition_module_scss_1.default.section} ${className}` }, screensStack)));
+}
+exports.default = Transition;
+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["CUSTOM"] = 4] = "CUSTOM";
+})(TransitionAnimationTypes = exports.TransitionAnimationTypes || (exports.TransitionAnimationTypes = {}));
+//# sourceMappingURL=Transition.js.map

package/dist/components/Transition/Transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Transition.js","sourceRoot":"","sources":["../../../src/components/Transition/Transition.tsx"],"names":[],"mappings":"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"}

package/dist/components/Transition/Transition.module.scss

@@ -0,0 +1,135 @@
+@import "../../assets/styles/index.scss";
+
+.section {
+  * {
+    box-sizing: border-box;
+  }
+  position: relative;
+  min-height: 250px;
+  display: flex;
+  align-items: center;
+  > div {
+    display: flex;
+    flex-direction: column;
+    min-height: inherit;
+    min-width: 100%;
+    animation-duration: var(--animation-speed-transition, $fast);
+    animation-timing-function: var(--animation-timing-transition, initial);
+    animation-fill-mode: forwards;
+    transform-origin: inherit;
+  }
+}
+
+div.entranceLeft {
+  animation-name: entranceLeft;
+}
+div.exitLeft {
+  animation-name: exitLeft;
+}
+
+@keyframes entranceLeft {
+  0% {
+    margin-left: -100%;
+  }
+  100% {
+    margin-left: 0%;
+  }
+}
+@keyframes exitLeft {
+  0% {
+    margin-left: 0%;
+  }
+  100% {
+    margin-left: -100%;
+  }
+}
+
+div.fadeOut {
+  animation-name: fadeOut;
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+div.scaleIn {
+  animation-fill-mode: initial;
+  animation-name: scaleIn;
+}
+
+@keyframes scaleIn {
+  0% {
+    position: absolute;
+    transform: scale(0);
+  }
+  100% {
+    position: absolute;
+    transform: scale(1);
+  }
+}
+
+div.scaleOut {
+  animation-fill-mode: initial;
+  animation-name: scaleOut;
+}
+
+@keyframes scaleOut {
+  0% {
+    position: absolute;
+    transform: scale(1);
+  }
+  100% {
+    position: absolute;
+    transform: scale(0);
+  }
+}
+
+div.fadeIn {
+  animation-name: fadeIn;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInDelayed {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.10;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fadeOutDelayed {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.10;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.fadeInDelayed {
+  animation-name: fadeInDelayed;
+}
+
+.fadeOutAbsolute {
+  position: absolute;
+  animation-name: fadeOutDelayed;
+}

package/dist/components/Transition/Transition.stories.d.ts

@@ -0,0 +1,10 @@
+import Transition from "./Transition";
+declare const _default: {
+    component: typeof Transition;
+    title: string;
+};
+export default _default;
+export declare const InitialImplementation: {
+    (args: any): JSX.Element;
+    args: Partial<import("./Transition").TransitionProps>;
+};

package/dist/components/Transition/Transition.stories.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InitialImplementation = void 0;
+const react_1 = __importDefault(require("react"));
+const Text_1 = __importDefault(require("../Text"));
+const Transition_1 = __importDefault(require("./Transition"));
+exports.default = {
+    component: Transition_1.default,
+    title: "Transitor de elementos",
+};
+const InitialImplementation = (args) => (react_1.default.createElement(react_1.default.Fragment, null,
+    react_1.default.createElement(Transition_1.default, Object.assign({}, args),
+        react_1.default.createElement("div", { style: { backgroundColor: "red" } },
+            react_1.default.createElement(Text_1.default, { style: { padding: 48, textAlign: "center" }, type: "title" }, "Etapa 1")),
+        react_1.default.createElement("div", { style: { backgroundColor: "green" } },
+            react_1.default.createElement(Text_1.default, { style: { padding: 48, textAlign: "center" }, type: "title" }, "Etapa 2")),
+        react_1.default.createElement("div", { style: { backgroundColor: "blue" } },
+            react_1.default.createElement(Text_1.default, { style: { padding: 48, textAlign: "center" }, type: "title" }, "Etapa 3")),
+        react_1.default.createElement("div", { style: { backgroundColor: "yellow" } },
+            react_1.default.createElement(Text_1.default, { style: { padding: 48, textAlign: "center" }, type: "title" }, "Etapa 4"))),
+    react_1.default.createElement("h1", null, "Controle o elemento atual pelos controles abaixo, existem 4 etapas")));
+exports.InitialImplementation = InitialImplementation;
+exports.InitialImplementation.args = {
+    step: 0,
+};
+//# sourceMappingURL=Transition.stories.js.map

package/dist/components/Transition/Transition.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Transition.stories.js","sourceRoot":"","sources":["../../../src/components/Transition/Transition.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,mDAA2B;AAC3B,8DAAsC;AAEtC,kBAAe;IACb,SAAS,EAAE,oBAAU;IACrB,KAAK,EAAE,wBAAwB;CAChC,CAAC;AAEK,MAAM,qBAAqB,GAAG,CAAC,IAAS,EAAE,EAAE,CAAC,CAClD;IACE,8BAAC,oBAAU,oBAAK,IAAI;QAClB,uCAAK,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE;YACpC,8BAAC,cAAI,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAC,OAAO,cAExD,CACH;QACN,uCAAK,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,EAAE;YACtC,8BAAC,cAAI,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAC,OAAO,cAExD,CACH;QACN,uCAAK,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE;YACrC,8BAAC,cAAI,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAC,OAAO,cAExD,CACH;QACN,uCAAK,KAAK,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE;YACvC,8BAAC,cAAI,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAC,OAAO,cAExD,CACH,CACK;IACb,+GAA2E,CAC1E,CACJ,CAAC;AA1BW,QAAA,qBAAqB,yBA0BhC;AACF,6BAAqB,CAAC,IAAI,GAAG;IAC3B,IAAI,EAAE,CAAC;CAC4C,CAAC"}

package/dist/components/Transition/Transition.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Transition/Transition.test.js

@@ -0,0 +1,55 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const Transition_stories_1 = require("./Transition.stories");
+const utils_1 = require("../../__test__/utils");
+function renderScreen(props) {
+    return (0, react_2.render)(react_1.default.createElement(Transition_stories_1.InitialImplementation, Object.assign({}, props)));
+}
+it("Should at least render :)", () => {
+    renderScreen({ step: 0 });
+});
+it("Should not break this crazy logic", () => __awaiter(void 0, void 0, void 0, function* () {
+    const wrapper = (0, react_2.render)(react_1.default.createElement(Transition_stories_1.InitialImplementation, { step: 0 }));
+    wrapper.rerender(react_1.default.createElement(Transition_stories_1.InitialImplementation, { step: 1 }));
+    wrapper.rerender(react_1.default.createElement(Transition_stories_1.InitialImplementation, { step: 2 }));
+    wrapper.rerender(react_1.default.createElement(Transition_stories_1.InitialImplementation, { step: 3 }));
+    wrapper.rerender(react_1.default.createElement(Transition_stories_1.InitialImplementation, { step: 2 }));
+    const [el3WhenGoinBack, el1, el2] = wrapper.getAllByTestId("transition-container");
+    expect(wrapper.container.textContent).toMatchSnapshot();
+    const event = new Event("animationend");
+    event.initEvent("animationend", true, true);
+    el1.dispatchEvent(event);
+    expect(wrapper.container.textContent).toMatchSnapshot();
+    el2.dispatchEvent(event);
+    expect(wrapper.container.textContent).toMatchSnapshot();
+    el3WhenGoinBack.dispatchEvent(event);
+    expect(wrapper.container.textContent).toMatchSnapshot();
+}));
+it("Should lock the current width when transitioning", () => __awaiter(void 0, void 0, void 0, function* () {
+    const wrapper = (0, react_2.render)(react_1.default.createElement(Transition_stories_1.InitialImplementation, { lockTransitionWidth: true, step: 0 }));
+    const el = wrapper.getByTestId("transition-controller");
+    expect(el.style.width).toEqual("");
+    wrapper.rerender(react_1.default.createElement(Transition_stories_1.InitialImplementation, { lockTransitionWidth: true, step: 1 }));
+    expect(el.style.width).toEqual("0px");
+    const [el1] = wrapper.getAllByTestId("transition-container");
+    const event = new Event("animationend");
+    event.initEvent("animationend", true, true);
+    el1.dispatchEvent(event);
+    yield (0, utils_1.WaitTimeout)();
+    expect(el.style.width).toEqual("");
+}));
+//# sourceMappingURL=Transition.test.js.map

package/dist/components/Transition/Transition.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Transition.test.js","sourceRoot":"","sources":["../../../src/components/Transition/Transition.test.tsx"],"names":[],"mappings":"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"}

package/dist/components/Transition/index.d.ts

@@ -0,0 +1 @@
+export { default, TransitionAnimationTypes } from "./Transition";

package/dist/components/Transition/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransitionAnimationTypes = exports.default = void 0;
+var Transition_1 = require("./Transition");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Transition_1).default; } });
+Object.defineProperty(exports, "TransitionAnimationTypes", { enumerable: true, get: function () { return Transition_1.TransitionAnimationTypes; } });
+//# sourceMappingURL=index.js.map

package/dist/components/Transition/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Transition/index.tsx"],"names":[],"mappings":";;;;;;AAAA,2CAAiE;AAAxD,sHAAA,OAAO,OAAA;AAAE,sHAAA,wBAAwB,OAAA"}

package/dist/components/UncontrolledTransition/UncontrolledTransition.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { TransitionProps, TransitionTypeDefinitions } from "../Transition/Transition";
+declare const _default: React.ForwardRefExoticComponent<({
+    className?: string | undefined;
+    contentClassName?: string | undefined;
+    children?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    lockTransitionWidth?: boolean | undefined;
+} & Pick<TransitionProps, "contentStyle"> & TransitionTypeDefinitions) & React.RefAttributes<{
+    setOrientation: (orientation: "forward" | "backward") => void;
+}>>;
+export default _default;

package/dist/components/UncontrolledTransition/UncontrolledTransition.js

@@ -0,0 +1,95 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
+});
+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 });
+const react_1 = __importStar(require("react"));
+const Transition_1 = __importDefault(require("../Transition"));
+/**
+ * This component handles when a child changes and transition this child change, allowing the finest experiences
+ **/
+function UncontrolledTransition(_a, ref) {
+    var { className = "", contentClassName, children = react_1.default.createElement(react_1.default.Fragment, { key: "default" }), lockTransitionWidth = true, contentStyle } = _a, props = __rest(_a, ["className", "contentClassName", "children", "lockTransitionWidth", "contentStyle"]);
+    const [{ childStack, offset }, setChildStack] = (0, react_1.useState)({
+        childStack: [],
+        offset: 1,
+    });
+    // const [offset, setOffset] = useState(1);
+    const orientation = (0, react_1.useRef)("forward");
+    function setOrientation(a) {
+        try {
+            throw new Error();
+        }
+        catch (e) {
+            const stacktrace = e.stack;
+            if (stacktrace === null || stacktrace === void 0 ? void 0 : stacktrace.includes("invokePassiveEffectCreate")) {
+                throw new Error(`It seems you are calling the setBackwards from a useEffect. This will cause unexpected behaviour. Please switch to:
+        
+useLayoutEffect(() => {
+  // do your thing
+  ref.current.setOrientation("backwards")
+})
+
+`);
+            }
+        }
+        orientation.current = a;
+    }
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        setOrientation,
+    }), []);
+    (0, react_1.useEffect)(() => {
+        if (process.env.NODE_ENV !== "production" && !children.key)
+            throw new Error("The provided child should have a key property, please provide it");
+        if (orientation.current === "forward")
+            setChildStack((p) => (Object.assign(Object.assign({}, p), { childStack: [...p.childStack, children] })));
+        else
+            setChildStack((p) => (Object.assign(Object.assign({}, p), { childStack: [children, ...p.childStack] })));
+    }, [children.key]);
+    (0, react_1.useEffect)(() => {
+        if (orientation.current === "backward") {
+            setChildStack((prev) => (Object.assign(Object.assign({}, prev), { offset: 2 })));
+        }
+    }, [childStack.length]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, childStack.length ? (react_1.default.createElement(Transition_1.default, Object.assign({ contentStyle: contentStyle, className: className, step: childStack.length - offset, onDiscardStep: (discardedKey) => {
+            orientation.current = "forward";
+            setChildStack((prev) => {
+                return {
+                    childStack: prev.childStack.filter((a) => a.key !== discardedKey),
+                    offset: 1,
+                };
+            });
+        }, lockTransitionWidth: lockTransitionWidth, contentClassName: contentClassName }, props), childStack)) : null));
+}
+exports.default = (0, react_1.forwardRef)(UncontrolledTransition);
+//# sourceMappingURL=UncontrolledTransition.js.map

package/dist/components/UncontrolledTransition/UncontrolledTransition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UncontrolledTransition.js","sourceRoot":"","sources":["../../../src/components/UncontrolledTransition/UncontrolledTransition.tsx"],"names":[],"mappings":"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"}

package/dist/components/UncontrolledTransition/UncontrolledTransition.stories.d.ts

@@ -0,0 +1,28 @@
+import React, { ComponentProps } from "react";
+import UncontrolledTransition from ".";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<({
+        className?: string | undefined;
+        contentClassName?: string | undefined;
+        children?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+        lockTransitionWidth?: boolean | undefined;
+    } & Pick<import("../Transition/Transition").TransitionProps, "contentStyle"> & import("../Transition/Transition").TransitionTypeDefinitions) & React.RefAttributes<{
+        setOrientation: (orientation: "forward" | "backward") => void;
+    }>>;
+};
+export default _default;
+export declare const ClickBasedTransition: {
+    (args: ComponentProps<typeof UncontrolledTransition>): JSX.Element;
+    args: ({
+        className?: string | undefined;
+        contentClassName?: string | undefined;
+        children?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+        lockTransitionWidth?: boolean | undefined;
+    } & Pick<import("../Transition/Transition").TransitionProps, "contentStyle"> & import("../Transition/Transition").TransitionTypeDefinitions) & React.RefAttributes<{
+        setOrientation: (orientation: "forward" | "backward") => void;
+    }>;
+};
+export declare const AnchorBasedTransition: (args: ComponentProps<typeof UncontrolledTransition>) => JSX.Element;
+export declare const FadeTransition: (args: ComponentProps<typeof UncontrolledTransition>) => JSX.Element;
+export declare const BUGFIX_BackwardsInconsistency: () => JSX.Element;