@onepercentio/one-ui 1.3.3 → 1.3.5

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

@@ -0,0 +1,145 @@
+@use "../../assets/styles/index.scss" as *;
+
+.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;
+  }
+  position: relative;
+  max-width: 95vw;
+  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/components/AdaptiveDialog/index.d.ts

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

package/dist/components/AdaptiveDialog/index.js

@@ -0,0 +1,24 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var AdaptiveDialog_1 = require("./AdaptiveDialog");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AdaptiveDialog_1).default; } });
+__exportStar(require("./AdaptiveDialog"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AdaptiveDialog/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,mDAA2C;AAAlC,0HAAA,OAAO,OAAA;AAChB,mDAAiC"}

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

@@ -0,0 +1,25 @@
+import React from "react";
+type AdaptiveSidebarControls = {
+    dismiss: () => void;
+};
+/**
+ * A component that displays a sidebar panel. On mobile devices, it shows a floating button to open and close the panel.
+ * On desktop, the panel displays directly in the page.
+ **/
+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/components/AdaptiveSidebar/AdaptiveSidebar.js

@@ -0,0 +1,61 @@
+"use strict";
+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 jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const MutableHamburgerButton_1 = __importDefault(require("../MutableHamburgerButton"));
+const ScrollAndFocusLock_1 = __importDefault(require("../utilitary/ScrollAndFocusLock"));
+const AdaptiveSidebar_module_scss_1 = __importDefault(require("./AdaptiveSidebar.module.scss"));
+const useBreakpoint_1 = __importDefault(require("../../hooks/ui/useBreakpoint"));
+const OneUIProvider_1 = require("../../context/OneUIProvider");
+const DefaultVisibilityControl = ({ open }) => ((0, jsx_runtime_1.jsx)(MutableHamburgerButton_1.default, { size: 48, state: open ? "closed" : "default" }));
+function _AdaptiveSidebar(_a, ref) {
+    var { open: externalOpen, children, className = "", breakInto = 640, visibilityControlComponent: VisibilityControlComponent = DefaultVisibilityControl } = _a, props = __rest(_a, ["open", "children", "className", "breakInto", "visibilityControlComponent"]);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const containerRef = (0, react_1.useRef)(null);
+    const _open = externalOpen === undefined ? open : externalOpen;
+    const isMobile = (0, useBreakpoint_1.default)(breakInto);
+    const globalClassName = (0, OneUIProvider_1.useOneUIConfig)("component.adaptiveSidebar.className");
+    const globalControlClassName = (0, OneUIProvider_1.useOneUIConfig)("component.adaptiveSidebar.controlClassName");
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        dismiss: () => setOpen(false),
+    }), []);
+    (0, react_1.useEffect)(() => {
+        if (process.env.NODE_ENV === "test")
+            return;
+        containerRef.current.scrollTo({
+            left: 0,
+            behavior: "smooth",
+            top: 0,
+        });
+    }, [_open]);
+    const externalControl = externalOpen !== undefined;
+    const content = ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: containerRef, className: `${isMobile ? AdaptiveSidebar_module_scss_1.default.mobile : AdaptiveSidebar_module_scss_1.default.desktop} ${AdaptiveSidebar_module_scss_1.default.container} ${!externalControl &&
+            DefaultVisibilityControl === VisibilityControlComponent
+            ? AdaptiveSidebar_module_scss_1.default.defaultPadding
+            : ""} ${_open ? AdaptiveSidebar_module_scss_1.default.open : AdaptiveSidebar_module_scss_1.default.closed} ${className} ${globalClassName}` }, props, { children: (0, jsx_runtime_1.jsx)(ScrollAndFocusLock_1.default, { open: _open, children: children }) })));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile
+            ? (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [content, !externalControl && ((0, jsx_runtime_1.jsx)("div", { className: `${isMobile ? AdaptiveSidebar_module_scss_1.default.mobile : AdaptiveSidebar_module_scss_1.default.desktop} ${AdaptiveSidebar_module_scss_1.default.hamburger} ${globalControlClassName}`, onClick: () => setOpen((a) => !a), children: (0, jsx_runtime_1.jsx)(VisibilityControlComponent, { open: _open }) }))] }), document.body)
+            : content }));
+}
+/**
+ * A component that displays a sidebar panel. On mobile devices, it shows a floating button to open and close the panel.
+ * On desktop, the panel displays directly in the page.
+ **/
+const AdaptiveSidebar = (0, react_1.forwardRef)(_AdaptiveSidebar);
+exports.default = AdaptiveSidebar;
+//# sourceMappingURL=AdaptiveSidebar.js.map

package/dist/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/components/AdaptiveSidebar/AdaptiveSidebar.module.scss

@@ -0,0 +1,49 @@
+@use "../../assets/styles/index.scss" as *;
+
+$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/components/AdaptiveSidebar/AdaptiveSidebar.sample.d.ts

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

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

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AdaptiveSidebar_1 = __importDefault(require("./AdaptiveSidebar"));
+function AdaptiveSidebarSample() {
+    return ((0, jsx_runtime_1.jsx)(AdaptiveSidebar_1.default, { children: "Experiment with different resolutions to see how this container behaves" }));
+}
+exports.default = AdaptiveSidebarSample;
+//# sourceMappingURL=AdaptiveSidebar.sample.js.map

package/dist/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,wEAAgD;AAEhD,SAAwB,qBAAqB;IAC3C,OAAO,CACL,uBAAC,yBAAe,0FAEE,CACnB,CAAC;AACJ,CAAC;AAND,wCAMC"}

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

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

package/dist/components/AdaptiveSidebar/index.js

@@ -0,0 +1,24 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var AdaptiveSidebar_1 = require("./AdaptiveSidebar");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AdaptiveSidebar_1).default; } });
+__exportStar(require("./AdaptiveSidebar"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AdaptiveSidebar/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,qDAA4C;AAAnC,2HAAA,OAAO,OAAA;AAChB,oDAAkC"}

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

@@ -0,0 +1,37 @@
+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
+ *
+ * A simple popup that appears near another element, automatically positioning itself to stay visible
+ * on the screen and adjusting its location if the page is scrolled or resized.
+ */
+declare const AnchoredTooltip: React.ForwardRefExoticComponent<Props & React.RefAttributes<{
+    updatePosition: () => void;
+} | null>>;
+export default AnchoredTooltip;

package/dist/components/AnchoredTooltip/AnchoredTooltip.js

@@ -0,0 +1,167 @@
+"use strict";
+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.updateTooltipPosition = exports.AnchoredTooltipAnchor = exports.AnchoredTooltipAlignment = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_dom_1 = __importDefault(require("react-dom"));
+const OneUIProvider_1 = require("../../context/OneUIProvider");
+const FadeIn_1 = __importDefault(require("../FadeIn"));
+const AnchoredTooltip_module_scss_1 = __importDefault(require("./AnchoredTooltip.module.scss"));
+function getPositionOnViewport(element) {
+    return element.getBoundingClientRect();
+}
+var AnchoredTooltipAlignment;
+(function (AnchoredTooltipAlignment) {
+    AnchoredTooltipAlignment[AnchoredTooltipAlignment["LEFT"] = 0] = "LEFT";
+    AnchoredTooltipAlignment[AnchoredTooltipAlignment["CENTER"] = 1] = "CENTER";
+    AnchoredTooltipAlignment[AnchoredTooltipAlignment["RIGHT"] = 2] = "RIGHT";
+})(AnchoredTooltipAlignment || (exports.AnchoredTooltipAlignment = AnchoredTooltipAlignment = {}));
+var AnchoredTooltipAnchor;
+(function (AnchoredTooltipAnchor) {
+    AnchoredTooltipAnchor[AnchoredTooltipAnchor["TOP"] = 0] = "TOP";
+    AnchoredTooltipAnchor[AnchoredTooltipAnchor["BOTTOM"] = 1] = "BOTTOM";
+})(AnchoredTooltipAnchor || (exports.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,
+    };
+}
+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(AnchoredTooltip_module_scss_1.default.anchoredTop);
+        tooltipRef.classList.add(AnchoredTooltip_module_scss_1.default.anchoredBottom);
+    }
+    else {
+        tooltipRef.classList.add(AnchoredTooltip_module_scss_1.default.anchoredTop);
+        tooltipRef.classList.remove(AnchoredTooltip_module_scss_1.default.anchoredBottom);
+    }
+    return { shouldAnchorToBottom };
+}
+exports.updateTooltipPosition = updateTooltipPosition;
+function _AnchoredTooltip(_a, ref) {
+    var { containInViewport = true, alignment } = _a, props = __rest(_a, ["containInViewport", "alignment"]);
+    const { open, children, anchorRef } = props;
+    const tooltipRef = (0, react_1.useRef)(null);
+    const className = (0, OneUIProvider_1.useOneUIConfig)("component.tooltip.className");
+    const [realClosed, setRealClosed] = (0, react_1.useState)(!open);
+    (0, react_1.useEffect)(() => {
+        if (open)
+            setRealClosed(false);
+    }, [open]);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        updatePosition: () => {
+            updateTooltipPosition(tooltipRef.current, anchorRef.current, containInViewport, alignment);
+        },
+    }), [containInViewport]);
+    (0, react_1.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]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (!tooltipRef.current)
+            return;
+        if (open)
+            tooltipRef.current.classList.add(AnchoredTooltip_module_scss_1.default.open);
+        else
+            tooltipRef.current.classList.remove(AnchoredTooltip_module_scss_1.default.open);
+    }, [open]);
+    return !realClosed || open ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(FadeIn_1.default, { onClick: (e) => e.stopPropagation(), ref: tooltipRef, className: `${AnchoredTooltip_module_scss_1.default.tooltipContainer} ${props.className || ""} ${className}`, style: props.style, onHidden: () => setRealClosed(true), children: open && !realClosed ? (0, jsx_runtime_1.jsx)("div", { children: children }) : undefined }), document.body) })) : null;
+}
+/**
+ * This tooltip anchors itself to an element and handles positioning relative to the anchored element
+ *
+ * A simple popup that appears near another element, automatically positioning itself to stay visible
+ * on the screen and adjusting its location if the page is scrolled or resized.
+ */
+const AnchoredTooltip = (0, react_1.forwardRef)(_AnchoredTooltip);
+exports.default = AnchoredTooltip;
+//# sourceMappingURL=AnchoredTooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnchoredTooltip.js","sourceRoot":"","sources":["../../../src/components/AnchoredTooltip/AnchoredTooltip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,iCAWe;AACf,0DAAiC;AACjC,+DAA6D;AAC7D,uDAA+B;AAC/B,gGAAmD;AAkBnD,SAAS,qBAAqB,CAAC,OAAoB;IACjD,OAAO,OAAO,CAAC,qBAAqB,EAAE,CAAC;AACzC,CAAC;AAED,IAAY,wBAIX;AAJD,WAAY,wBAAwB;IAClC,uEAAI,CAAA;IACJ,2EAAM,CAAA;IACN,yEAAK,CAAA;AACP,CAAC,EAJW,wBAAwB,wCAAxB,wBAAwB,QAInC;AAED,IAAY,qBAGX;AAHD,WAAY,qBAAqB;IAC/B,+DAAG,CAAA;IACH,qEAAM,CAAA;AACR,CAAC,EAHW,qBAAqB,qCAArB,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,SAAgB,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,qCAAM,CAAC,WAAW,CAAC,CAAC;QAChD,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,qCAAM,CAAC,cAAc,CAAC,CAAC;IAClD,CAAC;SAAM,CAAC;QACN,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,qCAAM,CAAC,WAAW,CAAC,CAAC;QAC7C,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,qCAAM,CAAC,cAAc,CAAC,CAAC;IACrD,CAAC;IAED,OAAO,EAAE,oBAAoB,EAAE,CAAC;AAClC,CAAC;AAlCD,sDAkCC;AACD,SAAS,gBAAgB,CACvB,EAAwD,EACxD,GAAwD;QADxD,EAAE,iBAAiB,GAAG,IAAI,EAAE,SAAS,OAAmB,EAAd,KAAK,cAA/C,kCAAiD,CAAF;IAG/C,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC5C,MAAM,UAAU,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,IAAA,8BAAc,EAAC,6BAA6B,CAAC,CAAC;IAChE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,IAAI,CAAC,CAAC;IAEpD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,IAAI;YAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,IAAA,2BAAmB,EACjB,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,IAAA,iBAAS,EAAC,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,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,IAAI,CAAC,UAAU,CAAC,OAAO;YAAE,OAAO;QAChC,IAAI,IAAI;YAAE,UAAU,CAAC,OAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,qCAAM,CAAC,IAAI,CAAC,CAAC;;YACpD,UAAU,CAAC,OAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,qCAAM,CAAC,IAAI,CAAC,CAAC;IACzD,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CAAC,UAAU,IAAI,IAAI,CAAC,CAAC,CAAC,CAC3B,2DACG,mBAAQ,CAAC,YAAY,CACpB,uBAAC,gBAAM,IACL,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACnC,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,GAAG,qCAAM,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,0CAAM,QAAQ,GAAO,CAAC,CAAC,CAAC,SAAS,GACjD,EACT,QAAQ,CAAC,IAAI,CACd,GACA,CACJ,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC;AAED;;;;;GAKG;AACH,MAAM,eAAe,GAAG,IAAA,kBAAU,EAAC,gBAAgB,CAAC,CAAC;AACrD,kBAAe,eAAe,CAAC"}

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

@@ -0,0 +1,64 @@
+@use "../../assets/styles/index.scss" as *;
+
+$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/components/AnchoredTooltip/index.d.ts

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