@onepercentio/one-ui 0.29.0 → 0.29.2

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

@@ -0,0 +1,147 @@
+@import "../../assets/styles/index.scss";
+
+.backdrop {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  transition: backdrop-filter $veryFast linear;
+  backdrop-filter: var(--adaptive-dialog-backdrop-backdrop, initial);
+  pointer-events: none;
+
+  @media screen and (orientation: "portrait") {
+    align-items: flex-end;
+  }
+}
+.backdrop,
+.container {
+  animation-duration: $fast;
+  animation-fill-mode: forwards;
+}
+
+.open {
+  &.backdrop {
+    animation-name: backdropAppear;
+  }
+  .container {
+    animation-name: reveal;
+  }
+  @media screen and (orientation: "portrait") {
+    .container {
+      animation-timing-function: ease-in-out;
+      animation-name: slideUp;
+      transform: translateY(100%);
+    }
+  }
+}
+
+.close {
+  &.backdrop {
+    animation-name: backdropDismiss;
+  }
+
+  .container {
+    animation-name: dismiss;
+  }
+
+  @media screen and (orientation: "portrait") {
+    .container {
+      animation-name: slideDown;
+    }
+  }
+}
+
+.container {
+  > .closeBtn {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+    background: none;
+    border: none;
+    width: auto;
+    height: auto;
+    padding: 0px !important;
+  }
+  padding: 16px 32px;
+  position: relative;
+  width: 100%;
+  max-width: 640px;
+  background: $mainBackgroundColor;
+  backdrop-filter: var(--adaptive-dialog-backdrop, initial);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  max-height: 90% !important;
+  overscroll-behavior: contain;
+  @media screen and (orientation: "portrait") {
+    min-height: initial;
+    align-items: flex-start;
+  }
+}
+
+@keyframes backdropAppear {
+  0% {
+    background-color: #0000;
+  }
+
+  100% {
+    background-color: #0005;
+  }
+}
+
+@keyframes backdropDismiss {
+  0% {
+    background-color: #0005;
+  }
+
+  100% {
+    background-color: #0000;
+  }
+}
+
+@keyframes reveal {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes dismiss {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes slideUp {
+  0% {
+    min-height: 0px;
+    transform: translateY(100%);
+  }
+
+  100% {
+    min-height: 0px;
+    transform: translateY(0%);
+  }
+}
+
+@keyframes slideDown {
+  0% {
+    transform: translateY(0%);
+  }
+
+  100% {
+    min-height: 0px;
+    transform: translateY(100%);
+  }
+}

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

@@ -0,0 +1,2 @@
+export { default } from "./AdaptiveDialog";
+export * from "./AdaptiveDialog";

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

@@ -0,0 +1,3 @@
+export { default } from "./AdaptiveDialog";
+export * from "./AdaptiveDialog";
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,24 @@
+import React from "react";
+type AdaptiveSidebarControls = {
+    dismiss: () => void;
+};
+/**
+ * A component that you can put anywhere but hides when small enough and shows the control via a fixed floating button
+ **/
+declare const AdaptiveSidebar: React.ForwardRefExoticComponent<{
+    /** To control AdaptiveSidebar externally
+     * (created for flows that requires floating views when on mobile)
+     **/
+    open?: boolean | undefined;
+    /**
+     * The screen width to turn into responsive mode
+     */
+    breakInto?: number | undefined;
+    className?: string | undefined;
+    visibilityControlComponent?: ((props: {
+        open: boolean;
+    }) => React.ReactElement) | undefined;
+} & Omit<React.HTMLProps<HTMLDivElement>, "ref"> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<AdaptiveSidebarControls>>;
+export default AdaptiveSidebar;

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":";AAAA,OAAc,EAEZ,UAAU,EAEV,SAAS,EACT,mBAAmB,EACnB,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,sBAAsB,MAAM,2BAA2B,CAAC;AAC/D,OAAO,kBAAkB,MAAM,iCAAiC,CAAC;AACjE,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,aAAa,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,MAAM,wBAAwB,GAAG,CAAC,EAAE,IAAI,EAAqB,EAAE,EAAE,CAAC,CAChE,KAAC,sBAAsB,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,GAAI,CACzE,CAAC;AAKF,SAAS,gBAAgB,CACvB,EACE,IAAI,EAAE,YAAY,EAClB,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,SAAS,GAAG,GAAG,EACf,0BAA0B,EACxB,0BAA0B,GAAG,wBAAwB,EACvD,GAAG,KAAK,EAgBT,EACD,GAA0C;IAE1C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,KAAK,GAAG,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC;IAC/D,MAAM,QAAQ,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,eAAe,GAAG,cAAc,CAAC,qCAAqC,CAAC,CAAC;IAC9E,MAAM,sBAAsB,GAAG,cAAc,CAC3C,4CAA4C,CAC7C,CAAC;IAEF,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC;QACL,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC;KAC9B,CAAC,EACF,EAAE,CACH,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,MAAM;YAAE,OAAO;QAC5C,YAAY,CAAC,OAAQ,CAAC,QAAQ,CAAC;YAC7B,IAAI,EAAE,CAAC;YACP,QAAQ,EAAE,QAAQ;YAClB,GAAG,EAAE,CAAC;SACP,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACZ,MAAM,eAAe,GAAG,YAAY,KAAK,SAAS,CAAC;IAEnD,MAAM,OAAO,GAAG,CACd,cACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,IACrD,MAAM,CAAC,SACT,IACE,CAAC,eAAe;YAChB,wBAAwB,KAAK,0BAA0B;YACrD,CAAC,CAAC,MAAM,CAAC,cAAc;YACvB,CAAC,CAAC,EACN,IAAI,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,SAAS,IAAI,eAAe,EAAE,KACrE,KAAK,YAET,KAAC,kBAAkB,IAAC,IAAI,EAAE,KAAK,YAAG,QAAQ,GAAsB,GAC5D,CACP,CAAC;IAEF,OAAO,CACL,4BACG,QAAQ;YACP,CAAC,CAAC,YAAY,CACV,8BACG,OAAO,EACP,CAAC,eAAe,IAAI,CACnB,cACE,SAAS,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,IACrD,MAAM,CAAC,SACT,IAAI,sBAAsB,EAAE,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,YAEjC,KAAC,0BAA0B,IAAC,IAAI,EAAE,KAAK,GAAI,GACvC,CACP,IACA,EACH,QAAQ,CAAC,IAAI,CACd;YACH,CAAC,CAAC,OAAO,GACV,CACJ,CAAC;AACJ,CAAC;AAED;;IAEI;AACJ,MAAM,eAAe,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;AACrD,eAAe,eAAe,CAAC"}

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,2 @@
+export { default } from "./AdaptiveSidebar";
+export * from "./AdaptiveSidebar";

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

@@ -0,0 +1,3 @@
+export { default } from "./AdaptiveSidebar";
+export * 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;AAC5C,cAAc,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":";AAAA,OAAc,EAEZ,UAAU,EAIV,SAAS,EACT,mBAAmB,EACnB,eAAe,EACf,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,MAAM,MAAM,+BAA+B,CAAC;AAkBnD,SAAS,qBAAqB,CAAC,OAAoB;IACjD,OAAO,OAAO,CAAC,qBAAqB,EAAE,CAAC;AACzC,CAAC;AAED,MAAM,CAAN,IAAY,wBAIX;AAJD,WAAY,wBAAwB;IAClC,uEAAI,CAAA;IACJ,2EAAM,CAAA;IACN,yEAAK,CAAA;AACP,CAAC,EAJW,wBAAwB,KAAxB,wBAAwB,QAInC;AAED,MAAM,CAAN,IAAY,qBAGX;AAHD,WAAY,qBAAqB;IAC/B,+DAAG,CAAA;IACH,qEAAM,CAAA;AACR,CAAC,EAHW,qBAAqB,KAArB,qBAAqB,QAGhC;AAED,SAAS,0BAA0B,CACjC,SAAsB,EACtB,UAA0B,EAC1B,iBAA0B,EAC1B,UAAoC,wBAAwB,CAAC,MAAM,EACnE,WAAkC,qBAAqB,CAAC,GAAG;IAE3D,MAAM,cAAc,GAAG,qBAAqB,CAAC,SAAS,CAAC,CAAC;IAExD,MAAM,oBAAoB,GACxB,QAAQ,KAAK,qBAAqB,CAAC,MAAM;QACzC,UAAU,CAAC,YAAY,GAAG,cAAc,CAAC,GAAG,CAAC;IAE/C,IAAI,GAAG,GAAG,cAAc,CAAC,GAAG,GAAG,UAAU,CAAC,YAAY,CAAC;IAEvD;;;;;OAKG;IACH,IAAI,IAAI,GAAG,CAAC,GAAG,EAAE;QACf,QAAQ,OAAO,EAAE,CAAC;YAChB,KAAK,wBAAwB,CAAC,MAAM;gBAClC,OAAO,CACL,cAAc,CAAC,IAAI;oBACnB,cAAc,CAAC,KAAK,GAAG,CAAC;oBACxB,UAAU,CAAC,WAAW,GAAG,CAAC,CAC3B,CAAC;YACJ,KAAK,wBAAwB,CAAC,IAAI;gBAChC,OAAO,cAAc,CAAC,IAAI,CAAC;YAC7B,KAAK,wBAAwB,CAAC,KAAK;gBACjC,OAAO,CACL,cAAc,CAAC,IAAI,GAAG,cAAc,CAAC,KAAK,GAAG,UAAU,CAAC,WAAW,CACpE,CAAC;QACN,CAAC;IACH,CAAC,CAAC,EAAE,CAAC;IAEL,IAAI,oBAAoB;QACtB,GAAG,IAAI,UAAU,CAAC,YAAY,GAAG,SAAS,CAAC,YAAY,CAAC;IAE1D,IAAI,iBAAiB,IAAI,GAAG,GAAG,CAAC;QAAE,GAAG,GAAG,CAAC,CAAC;IAC1C,MAAM,MAAM,GAAG,GAAG,GAAG,UAAU,CAAC,YAAY,GAAG,MAAM,CAAC,WAAW,CAAC;IAClE,IAAI,iBAAiB,IAAI,MAAM,GAAG,CAAC,EAAE,CAAC;QACpC,GAAG,IAAI,MAAM,CAAC;IAChB,CAAC;IACD,MAAM,UAAU,GAAG,IAAI,GAAG,UAAU,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;IACrE,IAAI,iBAAiB,IAAI,UAAU,GAAG,CAAC,EAAE,CAAC;QACxC,IAAI,IAAI,UAAU,CAAC;IACrB,CAAC;IACD,IAAI,iBAAiB,IAAI,IAAI,GAAG,CAAC,EAAE,CAAC;QAClC,IAAI,GAAG,CAAC,CAAC;IACX,CAAC;IAED,MAAM,sBAAsB,GAAG,UAAU,CAAC,WAAW,GAAG,CAAC,GAAG,EAAE,CAAC;IAC/D,MAAM,aAAa,GAAG,UAAU,CAAC,WAAW,GAAG,CAAC,GAAG,IAAI,CAAC;IACxD,MAAM,oBAAoB,GAAG,cAAc,CAAC,IAAI,GAAG,cAAc,CAAC,KAAK,GAAG,CAAC,CAAC;IAE5E,MAAM,aAAa,GAAG,oBAAoB,GAAG,aAAa,CAAC;IAC3D,MAAM,gBAAgB,GAAG,CAAC,CAAC,UAAU,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC;IAE5D,MAAM,mBAAmB,GACvB,UAAU,GAAG,CAAC;QACZ,CAAC,CAAC,UAAU,GAAG,sBAAsB;YACnC,CAAC,CAAC,sBAAsB;YACxB,CAAC,CAAC,UAAU;QACd,CAAC,CAAC,aAAa,GAAG,CAAC;YACnB,CAAC,CAAC,aAAa,GAAG,gBAAgB;gBAChC,CAAC,CAAC,gBAAgB;gBAClB,CAAC,CAAC,aAAa;YACjB,CAAC,CAAC,CAAC,CAAC;IAER,OAAO;QACL,MAAM;QACN,mBAAmB;QACnB,GAAG;QACH,IAAI;QACJ,oBAAoB;KACrB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,qBAAqB,CACnC,UAA0B,EAC1B,SAAsB,EACtB,kBAA2B,IAAI,EAC/B,YAAsC,wBAAwB,CAAC,MAAM,EACrE,WAAkC,qBAAqB,CAAC,GAAG;IAE3D,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,GAC5D,0BAA0B,CACxB,SAAS,EACT,UAAU,EACV,eAAe,EACf,SAAS,EACT,QAAQ,CACT,CAAC;IACJ,IAAI,eAAe,EAAE,CAAC;QACpB,MAAM,SAAS,GAAG,MAAM,CAAC,WAAW,GAAG,GAAG,CAAC;QAC3C,UAAU,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,SAAS,GAAG,EAAE,IAAI,CAAC;IACrD,CAAC;IACD,UAAU,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IAClC,UAAU,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,IAAI,CAAC;IACpC,UAAU,CAAC,KAAK,CAAC,WAAW,CAC1B,gCAAgC,EAChC,GAAG,mBAAmB,IAAI,CAC3B,CAAC;IACF,IAAI,oBAAoB,EAAE,CAAC;QACzB,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;QAChD,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;IAClD,CAAC;SAAM,CAAC;QACN,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;QAC7C,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;IACrD,CAAC;IAED,OAAO,EAAE,oBAAoB,EAAE,CAAC;AAClC,CAAC;AACD,SAAS,gBAAgB,CACvB,EAAE,iBAAiB,GAAG,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAS,EACxD,GAAwD;IAExD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC5C,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,cAAc,CAAC,6BAA6B,CAAC,CAAC;IAChE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC;IAEpD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI;YAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC;QACL,cAAc,EAAE,GAAG,EAAE;YACnB,qBAAqB,CACnB,UAAU,CAAC,OAAQ,EACnB,SAAS,CAAC,OAAQ,EAClB,iBAAiB,EACjB,SAAS,CACV,CAAC;QACJ,CAAC;KACF,CAAC,EACF,CAAC,iBAAiB,CAAC,CACpB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACxB,IAAI,SAAS,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO;gBACzC,qBAAqB,CACnB,UAAU,CAAC,OAAO,EAClB,SAAS,CAAC,OAAO,EACjB,iBAAiB,EACjB,SAAS,CACV,CAAC;YACJ,MAAM,aAAa,GAAG,GAAG,EAAE;gBACzB,IAAI,SAAS,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO;oBACzC,qBAAqB,CACnB,UAAU,CAAC,OAAO,EAClB,SAAS,CAAC,OAAO,EACjB,iBAAiB,EACjB,SAAS,CACV,CAAC;YACN,CAAC,CAAC;YACF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,EAAE;gBAC/C,OAAO,EAAE,IAAI;aACd,CAAC,CAAC;YACH,OAAO,GAAG,EAAE;gBACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;YACtD,CAAC,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAElC,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,UAAU,CAAC,OAAO;YAAE,OAAO;QAChC,IAAI,IAAI;YAAE,UAAU,CAAC,OAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;;YACpD,UAAU,CAAC,OAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACzD,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CAAC,UAAU,IAAI,IAAI,CAAC,CAAC,CAAC,CAC3B,4BACG,QAAQ,CAAC,YAAY,CACpB,KAAC,MAAM,IACL,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACnC,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,GAAG,MAAM,CAAC,gBAAgB,IACnC,KAAK,CAAC,SAAS,IAAI,EACrB,IAAI,SAAS,EAAE,EACf,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,YAElC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,wBAAM,QAAQ,GAAO,CAAC,CAAC,CAAC,SAAS,GACjD,EACT,QAAQ,CAAC,IAAI,CACd,GACA,CACJ,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC;AAED;;IAEI;AACJ,MAAM,eAAe,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;AACrD,eAAe,eAAe,CAAC"}

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,2 @@
+export { default } from "./AnchoredTooltip";
+export * from "./AnchoredTooltip";

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

@@ -0,0 +1,3 @@
+export { default } from "./AnchoredTooltip";
+export * 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;AAC5C,cAAc,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;