@onepercentio/one-ui 0.29.0 → 0.29.1

package/dist-ts/components/AdaptiveSidebar/AdaptiveSidebar.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState, } from "react";
+import { createPortal } from "react-dom";
+import MutableHamburgerButton from "../MutableHamburgerButton";
+import ScrollAndFocusLock from "../utilitary/ScrollAndFocusLock";
+import Styles from "./AdaptiveSidebar.module.scss";
+import useBreakpoint from "../../hooks/ui/useBreakpoint";
+import { useOneUIConfig } from "../../context/OneUIProvider";
+const DefaultVisibilityControl = ({ open }) => (_jsx(MutableHamburgerButton, { size: 48, state: open ? "closed" : "default" }));
+function _AdaptiveSidebar({ open: externalOpen, children, className = "", breakInto = 640, visibilityControlComponent: VisibilityControlComponent = DefaultVisibilityControl, ...props }, ref) {
+    const [open, setOpen] = useState(false);
+    const containerRef = useRef(null);
+    const _open = externalOpen === undefined ? open : externalOpen;
+    const isMobile = useBreakpoint(breakInto);
+    const globalClassName = useOneUIConfig("component.adaptiveSidebar.className");
+    const globalControlClassName = useOneUIConfig("component.adaptiveSidebar.controlClassName");
+    useImperativeHandle(ref, () => ({
+        dismiss: () => setOpen(false),
+    }), []);
+    useEffect(() => {
+        if (process.env.NODE_ENV === "test")
+            return;
+        containerRef.current.scrollTo({
+            left: 0,
+            behavior: "smooth",
+            top: 0,
+        });
+    }, [_open]);
+    const externalControl = externalOpen !== undefined;
+    const content = (_jsx("div", { ref: containerRef, className: `${isMobile ? Styles.mobile : Styles.desktop} ${Styles.container} ${!externalControl &&
+            DefaultVisibilityControl === VisibilityControlComponent
+            ? Styles.defaultPadding
+            : ""} ${_open ? Styles.open : Styles.closed} ${className} ${globalClassName}`, ...props, children: _jsx(ScrollAndFocusLock, { open: _open, children: children }) }));
+    return (_jsx(_Fragment, { children: isMobile
+            ? createPortal(_jsxs(_Fragment, { children: [content, !externalControl && (_jsx("div", { className: `${isMobile ? Styles.mobile : Styles.desktop} ${Styles.hamburger} ${globalControlClassName}`, onClick: () => setOpen((a) => !a), children: _jsx(VisibilityControlComponent, { open: _open }) }))] }), document.body)
+            : content }));
+}
+/**
+ * A component that you can put anywhere but hides when small enough and shows the control via a fixed floating button
+ **/
+const AdaptiveSidebar = forwardRef(_AdaptiveSidebar);
+export default AdaptiveSidebar;
+//# sourceMappingURL=AdaptiveSidebar.js.map

package/dist-ts/components/AdaptiveSidebar/AdaptiveSidebar.js.map

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

package/dist-ts/components/AdaptiveSidebar/AdaptiveSidebar.module.scss

@@ -0,0 +1,49 @@
+@import "../../assets/styles/index.scss";
+
+$hamburgerSize: 48;
+$hamburgerOffset: 24;
+
+@value hamburgerSize #{$hamburgerSize};
+
+.hamburger {
+  position: fixed;
+  top: #{$hamburgerOffset}px;
+  left: #{$hamburgerOffset}px;
+}
+
+.hamburger {
+  display: initial;
+}
+
+.hamburger,
+.container {
+  z-index: 1000;
+}
+
+.container {
+  box-sizing: border-box;
+  height: 100%;
+}
+.hamburger.desktop {
+  display: none;
+}
+
+.container.mobile {
+  &.defaultPadding {
+    padding-top: #{$hamburgerSize + $hamburgerOffset * 2}px;
+  }
+  position: fixed;
+  width: 100%;
+  overflow: auto;
+  z-index: 1000;
+  left: 0;
+
+  &.open {
+    transition: transform $veryFast ease-out;
+    transform: translateX(-0%);
+  }
+  &.closed {
+    transition: transform $veryFast ease-in;
+    transform: translateX(-100%);
+  }
+}

package/dist-ts/components/AdaptiveSidebar/AdaptiveSidebar.sample.d.ts

@@ -0,0 +1 @@
+export default function AdaptiveSidebarSample(): import("react/jsx-runtime").JSX.Element;

package/dist-ts/components/AdaptiveSidebar/AdaptiveSidebar.sample.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import AdaptiveSidebar from "./AdaptiveSidebar";
+export default function AdaptiveSidebarSample() {
+    return (_jsx(AdaptiveSidebar, { children: "Experiment with different resolutions to see how this container behaves" }));
+}
+//# sourceMappingURL=AdaptiveSidebar.sample.js.map

package/dist-ts/components/AdaptiveSidebar/AdaptiveSidebar.sample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdaptiveSidebar.sample.js","sourceRoot":"","sources":["../../../src/components/AdaptiveSidebar/AdaptiveSidebar.sample.tsx"],"names":[],"mappings":";AACA,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,MAAM,CAAC,OAAO,UAAU,qBAAqB;IAC3C,OAAO,CACL,KAAC,eAAe,0FAEE,CACnB,CAAC;AACJ,CAAC"}

package/dist-ts/components/AdaptiveSidebar/index.d.ts

@@ -0,0 +1 @@
+export { default } from './AdaptiveSidebar';

package/dist-ts/components/AdaptiveSidebar/index.js

@@ -0,0 +1,2 @@
+export { default } from './AdaptiveSidebar';
+//# sourceMappingURL=index.js.map

package/dist-ts/components/AdaptiveSidebar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AdaptiveSidebar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC"}

package/dist-ts/components/AnchoredTooltip/AnchoredTooltip.d.ts

@@ -0,0 +1,34 @@
+import React, { JSX, RefObject } from "react";
+type Props = {
+    children: JSX.Element;
+    anchorRef: RefObject<HTMLElement | null>;
+    open: boolean;
+    className?: string;
+    /**
+     * Indicates the tooltip should be always visible on viewport
+     *
+     * @default true
+     */
+    containInViewport?: boolean;
+    style?: any;
+    alignment?: AnchoredTooltipAlignment;
+};
+export declare enum AnchoredTooltipAlignment {
+    LEFT = 0,
+    CENTER = 1,
+    RIGHT = 2
+}
+export declare enum AnchoredTooltipAnchor {
+    TOP = 0,
+    BOTTOM = 1
+}
+export declare function updateTooltipPosition(tooltipRef: HTMLDivElement, anchorRef: HTMLElement, limitToViewport?: boolean, alignment?: AnchoredTooltipAlignment, anchorTo?: AnchoredTooltipAnchor): {
+    shouldAnchorToBottom: boolean;
+};
+/**
+ * This tooltip anchors itself to an element and handles positioning relative to the anchored element
+ **/
+declare const AnchoredTooltip: React.ForwardRefExoticComponent<Props & React.RefAttributes<{
+    updatePosition: () => void;
+} | null>>;
+export default AnchoredTooltip;

package/dist-ts/components/AnchoredTooltip/AnchoredTooltip.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, } from "react";
+import ReactDOM from "react-dom";
+import { useOneUIConfig } from "../../context/OneUIProvider";
+import FadeIn from "../FadeIn";
+import Styles from "./AnchoredTooltip.module.scss";
+function getPositionOnViewport(element) {
+    return element.getBoundingClientRect();
+}
+export var AnchoredTooltipAlignment;
+(function (AnchoredTooltipAlignment) {
+    AnchoredTooltipAlignment[AnchoredTooltipAlignment["LEFT"] = 0] = "LEFT";
+    AnchoredTooltipAlignment[AnchoredTooltipAlignment["CENTER"] = 1] = "CENTER";
+    AnchoredTooltipAlignment[AnchoredTooltipAlignment["RIGHT"] = 2] = "RIGHT";
+})(AnchoredTooltipAlignment || (AnchoredTooltipAlignment = {}));
+export var AnchoredTooltipAnchor;
+(function (AnchoredTooltipAnchor) {
+    AnchoredTooltipAnchor[AnchoredTooltipAnchor["TOP"] = 0] = "TOP";
+    AnchoredTooltipAnchor[AnchoredTooltipAnchor["BOTTOM"] = 1] = "BOTTOM";
+})(AnchoredTooltipAnchor || (AnchoredTooltipAnchor = {}));
+function calculateTooltipFromAnchor(anchorRef, tooltipRef, containInViewport, alignTo = AnchoredTooltipAlignment.CENTER, anchorTo = AnchoredTooltipAnchor.TOP) {
+    const anchorPosition = getPositionOnViewport(anchorRef);
+    const shouldAnchorToBottom = anchorTo === AnchoredTooltipAnchor.BOTTOM ||
+        tooltipRef.clientHeight > anchorPosition.top;
+    let top = anchorPosition.top - tooltipRef.clientHeight;
+    /**
+     * The terms mean:
+     * anchorPosition.left    = The left to get to the left border of the anchor (visible element)
+     * anchorPosition.width   = The width of the anchor (visible element)
+     * tooltipRef.clientWidth = The width of the content
+     */
+    let left = (() => {
+        switch (alignTo) {
+            case AnchoredTooltipAlignment.CENTER:
+                return (anchorPosition.left +
+                    anchorPosition.width / 2 -
+                    tooltipRef.clientWidth / 2);
+            case AnchoredTooltipAlignment.LEFT:
+                return anchorPosition.left;
+            case AnchoredTooltipAlignment.RIGHT:
+                return (anchorPosition.left + anchorPosition.width - tooltipRef.clientWidth);
+        }
+    })();
+    if (shouldAnchorToBottom)
+        top += tooltipRef.clientHeight + anchorRef.clientHeight;
+    if (containInViewport && top < 0)
+        top = 0;
+    const offset = top + tooltipRef.clientHeight - window.innerHeight;
+    if (containInViewport && offset > 0) {
+        top -= offset;
+    }
+    const offsetLeft = left + tooltipRef.clientWidth - window.innerWidth;
+    if (containInViewport && offsetLeft > 0) {
+        left -= offsetLeft;
+    }
+    if (containInViewport && left < 0) {
+        left = 0;
+    }
+    const maxLeftOffsetIndicator = tooltipRef.clientWidth / 2 - 60;
+    const tooltipCenter = tooltipRef.clientWidth / 2 + left;
+    const anchorPositionCenter = anchorPosition.left + anchorPosition.width / 2;
+    const offsetTooltip = anchorPositionCenter - tooltipCenter;
+    const minOffsetTooltip = -(tooltipRef.clientWidth / 2) + 60;
+    const offsetIndicatorLeft = offsetLeft > 0
+        ? offsetLeft > maxLeftOffsetIndicator
+            ? maxLeftOffsetIndicator
+            : offsetLeft
+        : offsetTooltip < 0
+            ? offsetTooltip < minOffsetTooltip
+                ? minOffsetTooltip
+                : offsetTooltip
+            : 0;
+    return {
+        offset,
+        offsetIndicatorLeft,
+        top,
+        left,
+        shouldAnchorToBottom,
+    };
+}
+export function updateTooltipPosition(tooltipRef, anchorRef, limitToViewport = true, alignment = AnchoredTooltipAlignment.CENTER, anchorTo = AnchoredTooltipAnchor.TOP) {
+    const { top, left, shouldAnchorToBottom, offsetIndicatorLeft } = calculateTooltipFromAnchor(anchorRef, tooltipRef, limitToViewport, alignment, anchorTo);
+    if (limitToViewport) {
+        const maxHeight = window.innerHeight - top;
+        tooltipRef.style.maxHeight = `${maxHeight - 32}px`;
+    }
+    tooltipRef.style.top = `${top}px`;
+    tooltipRef.style.left = `${left}px`;
+    tooltipRef.style.setProperty("--anchor-indicator-offset-left", `${offsetIndicatorLeft}px`);
+    if (shouldAnchorToBottom) {
+        tooltipRef.classList.remove(Styles.anchoredTop);
+        tooltipRef.classList.add(Styles.anchoredBottom);
+    }
+    else {
+        tooltipRef.classList.add(Styles.anchoredTop);
+        tooltipRef.classList.remove(Styles.anchoredBottom);
+    }
+    return { shouldAnchorToBottom };
+}
+function _AnchoredTooltip({ containInViewport = true, alignment, ...props }, ref) {
+    const { open, children, anchorRef } = props;
+    const tooltipRef = useRef(null);
+    const className = useOneUIConfig("component.tooltip.className");
+    const [realClosed, setRealClosed] = useState(!open);
+    useEffect(() => {
+        if (open)
+            setRealClosed(false);
+    }, [open]);
+    useImperativeHandle(ref, () => ({
+        updatePosition: () => {
+            updateTooltipPosition(tooltipRef.current, anchorRef.current, containInViewport, alignment);
+        },
+    }), [containInViewport]);
+    useEffect(() => {
+        if (open && !realClosed) {
+            if (anchorRef.current && tooltipRef.current)
+                updateTooltipPosition(tooltipRef.current, anchorRef.current, containInViewport, alignment);
+            const scrollHandler = () => {
+                if (anchorRef.current && tooltipRef.current)
+                    updateTooltipPosition(tooltipRef.current, anchorRef.current, containInViewport, alignment);
+            };
+            window.addEventListener("scroll", scrollHandler, {
+                passive: true,
+            });
+            return () => {
+                window.removeEventListener("scroll", scrollHandler);
+            };
+        }
+    }, [open, anchorRef, realClosed]);
+    useLayoutEffect(() => {
+        if (!tooltipRef.current)
+            return;
+        if (open)
+            tooltipRef.current.classList.add(Styles.open);
+        else
+            tooltipRef.current.classList.remove(Styles.open);
+    }, [open]);
+    return !realClosed || open ? (_jsx(_Fragment, { children: ReactDOM.createPortal(_jsx(FadeIn, { onClick: (e) => e.stopPropagation(), ref: tooltipRef, className: `${Styles.tooltipContainer} ${props.className || ""} ${className}`, style: props.style, onHidden: () => setRealClosed(true), children: open && !realClosed ? _jsx("div", { children: children }) : undefined }), document.body) })) : null;
+}
+/**
+ * This tooltip anchors itself to an element and handles positioning relative to the anchored element
+ **/
+const AnchoredTooltip = forwardRef(_AnchoredTooltip);
+export default AnchoredTooltip;
+//# sourceMappingURL=AnchoredTooltip.js.map

package/dist-ts/components/AnchoredTooltip/AnchoredTooltip.js.map

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

package/dist-ts/components/AnchoredTooltip/AnchoredTooltip.module.scss

@@ -0,0 +1,64 @@
+@import "../../assets/styles/index.scss";
+
+$arrowDim: 1em;
+
+/**
+* Some notions to take into account
+*/
+
+.tooltipContainer {
+  & > div {
+    background-color: $tooltipBackgroudColor;
+  }
+  // It should not overflow the viewport (screen)
+  max-width: 100vw;
+  max-height: 100vh;
+  min-width: fit-content;
+
+  // It should be floating over some point into the viewport
+  position: fixed;
+
+  // The position will be calculated via the javascript and the context
+
+  transition: top $almostInstant, left $almostInstant, opacity $normal;
+  z-index: 1000;
+
+  pointer-events: none;
+
+  &.open {
+    pointer-events: initial;
+  }
+
+  &::after,
+  &::before {
+    content: " ";
+    width: 0px;
+    height: 0px;
+    border: $arrowDim solid $tooltipBackgroudColor;
+    border-top-color: transparent;
+    border-right-color: transparent;
+    transform: translateY(-$arrowDim) rotate(-45deg);
+    display: block;
+    margin: auto;
+    position: relative;
+    left: var(--anchor-indicator-offset-left, 0px);
+    z-index: -1;
+  }
+
+  &::before {
+    display: none;
+    transform: translateY($arrowDim) rotate(135deg);
+  }
+  &.anchoredTop {
+    transform: translateY(4px);
+  }
+  &.anchoredBottom {
+    transform: translateY(-4px);
+    &::after {
+      display: none;
+    }
+    &::before {
+      display: block;
+    }
+  }
+}

package/dist-ts/components/AnchoredTooltip/index.d.ts

@@ -0,0 +1 @@
+export { default } from './AnchoredTooltip';

package/dist-ts/components/AnchoredTooltip/index.js

@@ -0,0 +1,2 @@
+export { default } from './AnchoredTooltip';
+//# sourceMappingURL=index.js.map

package/dist-ts/components/AnchoredTooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AnchoredTooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC"}

package/dist-ts/components/AnimatedEntrance/AnimatedEntrance.d.ts

@@ -0,0 +1,18 @@
+import { Key, ReactElement } from "react";
+export declare enum EntranceType {
+    SLIDE_AND_EXPAND = 0,
+    EXPAND = 1
+}
+export declare function AnimatedEntranceItem({ children, noEntranceAnimation, onRemoveChildren, entranceType, }: {
+    children: ReactElement;
+    noEntranceAnimation: boolean;
+    onRemoveChildren: (key: Key) => void;
+    entranceType: EntranceType;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Animates the entrance and exit of a component
+ **/
+export default function AnimatedEntrance({ children, entranceType, }: {
+    children: ReactElement[];
+    entranceType?: EntranceType;
+}): import("react/jsx-runtime").JSX.Element;

package/dist-ts/components/AnimatedEntrance/AnimatedEntrance.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { TransitionAnimationTypes } from "../Transition";
+import UncontrolledTransition from "../UncontrolledTransition";
+import Styles from "./AnimatedEntrance.module.scss";
+export var EntranceType;
+(function (EntranceType) {
+    EntranceType[EntranceType["SLIDE_AND_EXPAND"] = 0] = "SLIDE_AND_EXPAND";
+    EntranceType[EntranceType["EXPAND"] = 1] = "EXPAND";
+})(EntranceType || (EntranceType = {}));
+const CONFIGS_BY_ENTRANCE_TYPE = {
+    [EntranceType.SLIDE_AND_EXPAND]: {
+        forward: {
+            elementEntering: Styles.elementEntering,
+            elementExiting: Styles.elementExiting,
+        },
+        backward: {
+            elementEntering: Styles.elementEnteringReverse,
+            elementExiting: Styles.elementExitingReverse,
+        },
+    },
+    [EntranceType.EXPAND]: {
+        forward: {
+            elementEntering: Styles.elementExpanding,
+            elementExiting: Styles.elementShrinking,
+        },
+        backward: {
+            elementEntering: Styles.elementExpandingReverse,
+            elementExiting: Styles.elementShrinkingReverse,
+        },
+    },
+};
+export function AnimatedEntranceItem({ children, noEntranceAnimation, onRemoveChildren, entranceType, }) {
+    const uncontRef = useRef(null);
+    const [screen, setScreen] = useState(noEntranceAnimation ? children : _jsx(Fragment, {}, "null"));
+    console.log(screen, children.key);
+    useLayoutEffect(() => {
+        if (String(children.key).includes("-nullated") && uncontRef.current) {
+            uncontRef.current.setOrientation("backward");
+        }
+    }, [children.key]);
+    useEffect(() => {
+        setScreen(String(children.key));
+    }, [children.key]);
+    useEffect(() => {
+        if (screen === null)
+            return;
+        const x = setTimeout(() => {
+            const key = String(typeof screen === "string" ? screen : screen.key);
+            if (key === "null" || key.includes("-nullated")) {
+                uncontRef.current.sectionRef.current.style.maxHeight = `${uncontRef.current.sectionRef.current.scrollHeight}px`;
+                setTimeout(() => {
+                    uncontRef.current.sectionRef.current.style.maxHeight = `0px`;
+                }, 100);
+            }
+            else {
+                uncontRef.current.sectionRef.current.style.maxHeight = `${uncontRef.current.sectionRef.current.scrollHeight}px`;
+                if (!noEntranceAnimation) {
+                    const restoreAutoHeight = ({ target, currentTarget, }) => {
+                        if (target !== currentTarget)
+                            return;
+                        uncontRef.current.sectionRef.current.style.removeProperty("max-height");
+                        uncontRef.current.sectionRef.current.classList.remove(Styles.maxHeight);
+                        uncontRef.current.sectionRef.current.removeEventListener("transitionend", restoreAutoHeight);
+                    };
+                    uncontRef.current.sectionRef.current.addEventListener("transitionend", restoreAutoHeight);
+                }
+                else {
+                    uncontRef.current.sectionRef.current.style.removeProperty("max-height");
+                    uncontRef.current.sectionRef.current.classList.remove(Styles.maxHeight);
+                }
+            }
+        }, 100);
+        return () => {
+            clearTimeout(x);
+        };
+    }, [typeof screen === "object" ? screen?.key : screen]);
+    const firstRenderClass = useMemo(() => (noEntranceAnimation ? "" : Styles.maxHeight), [screen === null]);
+    return (_jsx(UncontrolledTransition, { ref: uncontRef, transitionType: TransitionAnimationTypes.CUSTOM, className: `${Styles.resetHeight} ${firstRenderClass}`, lockTransitionWidth: true, onDiscardStep: (k) => {
+            if (k !== "null") {
+                onRemoveChildren(k);
+                setScreen(null);
+            }
+        }, config: CONFIGS_BY_ENTRANCE_TYPE[entranceType], children: screen === null ? (_jsx(Fragment, {}, "null")) : typeof screen === "string" ? ((children.key?.endsWith("-nullated") && screen.endsWith("-nullated"))
+            ? _jsx(Fragment, {}, children.key + "-null")
+            : children) : (screen) }, String(children.key).replace("-nullated", "")));
+}
+/**
+ * Animates the entrance and exit of a component
+ **/
+export default function AnimatedEntrance({ children, entranceType = EntranceType.SLIDE_AND_EXPAND, }) {
+    const firstRef = useRef(true);
+    useEffect(() => {
+        firstRef.current = false;
+    }, []);
+    const prevChildren = useRef([]);
+    const childrenDelayed = useMemo(() => {
+        const newChildren = children.filter((c) => !prevChildren.current.find((a) => a.key === c.key));
+        const filteredOutChildren = prevChildren.current.map((c) => {
+            return children.find((a) => a.key === c.key) ? ( // If the previous child still exists, mantain
+            c) : (
+            // If not, toggle to null to animate exit
+            _jsx(Fragment, { children: prevChildren.current.find(a => a.key === c.key) }, String(c.key).includes("-nullated") ? c.key : `${c.key}-nullated`));
+        });
+        for (let child of newChildren) {
+            const previousChildKey = children[children.indexOf(child) - 1]?.key;
+            if (previousChildKey) {
+                filteredOutChildren.splice(filteredOutChildren.findIndex((a) => a.key === previousChildKey) + 1, 0, child);
+            }
+            else {
+                filteredOutChildren.unshift(child);
+            }
+        }
+        return filteredOutChildren;
+    }, [children]);
+    prevChildren.current = childrenDelayed;
+    console.log(childrenDelayed.map(a => a.key));
+    return (_jsx(_Fragment, { children: childrenDelayed.map((child) => (_jsx(AnimatedEntranceItem, { noEntranceAnimation: firstRef.current, entranceType: entranceType, onRemoveChildren: (k) => {
+                (prevChildren.current = prevChildren.current.filter((a) => a.key !== String(k) + "-nullated"));
+            }, children: children.find((c) => c.key === child.key) || child }, String(child.key).replace("-nullated", "")))) }));
+}
+//# sourceMappingURL=AnimatedEntrance.js.map

package/dist-ts/components/AnimatedEntrance/AnimatedEntrance.js.map

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

package/dist-ts/components/AnimatedEntrance/AnimatedEntrance.module.scss

@@ -0,0 +1,108 @@
+@use 'sass:math';
+@keyframes expand {
+  0% {
+    transform: translateX(100%);
+  }
+
+  35% {
+    transform: translateX(100%);
+  }
+
+  85% {
+    transform: translateX(-5%);
+  }
+
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+@keyframes exiting {
+  100% {
+    transform: translateX(100%);
+  }
+
+  65% {
+    transform: translateX(100%);
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  15% {
+    transform: translateX(-5%);
+    opacity: 1;
+  }
+
+  0% {
+    transform: translateX(0%);
+  }
+}
+$duration: 1s;
+
+.elementExiting {
+  animation-duration: $duration !important;
+  animation-name: exiting;
+  position: absolute;
+}
+
+.elementEntering {
+  animation-duration: $duration !important;
+  animation-name: expand;
+}
+.elementExitingReverse {
+  animation-duration: $duration !important;
+  animation-name: exiting;
+}
+
+.elementEnteringReverse {
+  animation-duration: $duration !important;
+  animation-name: expand;
+  position: absolute;
+}
+
+.resetHeight {
+  transition: max-height math.div($duration, 2) $duration * 0.2;
+  min-height: initial;
+  align-items: flex-start !important;
+  flex-shrink: 0;
+  > * {
+    justify-content: flex-start !important;
+  }
+}
+
+.maxHeight {
+  max-height: 0px;
+}
+
+@keyframes nothing {
+  100% {
+    transform: translateX(0%);
+  }
+
+  0% {
+    transform: translateX(0%);
+  }
+}
+
+.elementShrinking {
+  animation-duration: $duration !important;
+  animation-name: nothing;
+  position: absolute;
+}
+
+.elementExpanding {
+  animation-duration: $duration !important;
+  animation-name: nothing;
+}
+.elementShrinkingReverse {
+  animation-duration: $duration !important;
+  animation-name: nothing;
+}
+
+.elementExpandingReverse {
+  animation-duration: $duration !important;
+  animation-name: nothing;
+  position: absolute;
+}

package/dist-ts/components/AnimatedEntrance/index.d.ts

@@ -0,0 +1 @@
+export { default, AnimatedEntranceItem, EntranceType, } from "./AnimatedEntrance";