@onepercentio/one-ui 0.2.0 → 0.2.3

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

@@ -1,55 +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("");
-}));
+"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/index.d.ts

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

package/dist/components/Transition/index.js

@@ -1,10 +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; } });
+"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/UncontrolledTransition/UncontrolledTransition.d.ts

@@ -1,12 +1,12 @@
-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;
-    sectionRef: React.RefObject<HTMLDivElement>;
-}>>;
-export default _default;
+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;
+    sectionRef: React.RefObject<HTMLDivElement>;
+}>>;
+export default _default;

package/dist/components/UncontrolledTransition/UncontrolledTransition.js

@@ -1,63 +1,63 @@
-"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;
-});
-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 sectionRef = (0, react_1.useRef)(null);
-    const [{ childStack, offset }, setChildStack] = (0, react_1.useState)({
-        childStack: [children],
-        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")) {
+"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;
+});
+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 sectionRef = (0, react_1.useRef)(null);
+    const [{ childStack, offset }, setChildStack] = (0, react_1.useState)({
+        childStack: [children],
+        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(() => {
@@ -65,39 +65,39 @@ useLayoutEffect(() => {
   ref.current.setOrientation("backwards")
 })
 
-`);
-            }
-        }
-        orientation.current = a;
-    }
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        setOrientation,
-        sectionRef,
-    }), []);
-    (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 (childStack.length === 1 && childStack[0].key === children.key)
-            return;
-        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({ ref: sectionRef, 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);
+`);
+            }
+        }
+        orientation.current = a;
+    }
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        setOrientation,
+        sectionRef,
+    }), []);
+    (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 (childStack.length === 1 && childStack[0].key === children.key)
+            return;
+        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({ ref: sectionRef, 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.stories.d.ts

@@ -1,30 +1,30 @@
-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;
-        sectionRef: React.RefObject<HTMLDivElement>;
-    }>>;
-};
-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;
-        sectionRef: React.RefObject<HTMLDivElement>;
-    }>;
-};
-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;
+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;
+        sectionRef: React.RefObject<HTMLDivElement>;
+    }>>;
+};
+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;
+        sectionRef: React.RefObject<HTMLDivElement>;
+    }>;
+};
+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;