@onepercentio/one-ui 0.2.0 → 0.2.1

package/dist/components/AnchoredTooltip/AnchoredTooltip.js

@@ -1,174 +1,174 @@
-"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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateTooltipPosition = void 0;
-const react_1 = __importStar(require("react"));
-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();
-}
-function calculateTooltipFromAnchor(anchorRef, tooltipRef) {
-    const anchorPosition = getPositionOnViewport(anchorRef);
-    const shouldAnchorToBottom = tooltipRef.clientHeight > anchorPosition.top;
-    let top = anchorPosition.top - tooltipRef.clientHeight;
-    let left = anchorPosition.left + anchorPosition.width / 2 - tooltipRef.clientWidth / 2;
-    if (shouldAnchorToBottom)
-        top += tooltipRef.clientHeight + anchorRef.clientHeight;
-    if (top < 0)
-        top = 0;
-    const offset = top + tooltipRef.clientHeight - window.innerHeight;
-    if (offset > 0) {
-        top -= offset;
-    }
-    const offsetLeft = left + tooltipRef.clientWidth - window.innerWidth;
-    if (offsetLeft > 0) {
-        left -= offsetLeft;
-    }
-    if (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) {
-    const { top, left, shouldAnchorToBottom, offsetIndicatorLeft } = calculateTooltipFromAnchor(anchorRef, tooltipRef);
-    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);
-    }
-}
-exports.updateTooltipPosition = updateTooltipPosition;
-/**
- * This tooltip anchors itself to an element and handles positioning relative to the anchored element
- **/
-function AnchoredTooltip(props) {
-    const { open, children, anchorRef } = props;
-    const tooltipRef = (0, react_1.useRef)(null);
-    const { component: { tooltip: { className = "" } = {} } = {} } = (0, OneUIProvider_1.useOneUIContext)();
-    (0, react_1.useEffect)(() => {
-        if (open) {
-            if (anchorRef.current && tooltipRef.current)
-                updateTooltipPosition(tooltipRef.current, anchorRef.current);
-            const scrollHandler = () => {
-                if (anchorRef.current && tooltipRef.current)
-                    updateTooltipPosition(tooltipRef.current, anchorRef.current);
-            };
-            window.addEventListener("scroll", scrollHandler);
-            return () => {
-                window.removeEventListener("scroll", scrollHandler);
-            };
-        }
-    }, [open, anchorRef]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(FadeIn_1.default, { onClick: (e) => e.stopPropagation(), ref: tooltipRef, className: `${AnchoredTooltip_module_scss_1.default.tooltipContainer} ${open ? AnchoredTooltip_module_scss_1.default.open : ""} ${props.className || ""} ${className}` }, open ? react_1.default.createElement("div", null, children) : undefined)));
-}
-exports.default = AnchoredTooltip;
-function DebuggingHelper(props) {
-    const [anchorInfo, setAnchorInfo] = (0, react_1.useState)({});
-    function update() {
-        return getPositionOnViewport(props.anchorRef.current).toJSON();
-    }
-    (0, react_1.useEffect)(() => {
-        setAnchorInfo(update());
-        setInterval(() => {
-            setAnchorInfo(update());
-        }, 500);
-    }, []);
-    return (react_1.default.createElement("div", { style: {
-            backgroundColor: "black",
-            position: "fixed",
-            color: "green",
-            fontFamily: "monospace",
-            padding: "1em",
-            fontSize: "16px",
-            lineHeight: "1.5em",
-            opacity: 0.75,
-            bottom: 0,
-            right: 0,
-            maxHeight: "50vh",
-            overflow: "auto",
-            pointerEvents: "none",
-        } },
-        "Calculated info:",
-        react_1.default.createElement("br", null),
-        props.anchorRef.current &&
-            props.tooltipRef.current &&
-            Object.entries(calculateTooltipFromAnchor(props.anchorRef.current, props.tooltipRef.current)).map(([k, v]) => {
-                return (react_1.default.createElement("p", null,
-                    react_1.default.createElement("b", null, k),
-                    ": ",
-                    typeof v !== "boolean" ? v : v ? "true" : "false"));
-            }),
-        "Window info:",
-        react_1.default.createElement("br", null),
-        react_1.default.createElement("p", null,
-            react_1.default.createElement("b", null, "Height:"),
-            " ",
-            window.innerHeight),
-        react_1.default.createElement("br", null),
-        "Anchor info:",
-        Object.entries(anchorInfo).map(([name, value]) => {
-            return (react_1.default.createElement("p", null,
-                react_1.default.createElement("b", null, name),
-                ": ",
-                value));
-        })));
-}
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateTooltipPosition = void 0;
+const react_1 = __importStar(require("react"));
+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();
+}
+function calculateTooltipFromAnchor(anchorRef, tooltipRef) {
+    const anchorPosition = getPositionOnViewport(anchorRef);
+    const shouldAnchorToBottom = tooltipRef.clientHeight > anchorPosition.top;
+    let top = anchorPosition.top - tooltipRef.clientHeight;
+    let left = anchorPosition.left + anchorPosition.width / 2 - tooltipRef.clientWidth / 2;
+    if (shouldAnchorToBottom)
+        top += tooltipRef.clientHeight + anchorRef.clientHeight;
+    if (top < 0)
+        top = 0;
+    const offset = top + tooltipRef.clientHeight - window.innerHeight;
+    if (offset > 0) {
+        top -= offset;
+    }
+    const offsetLeft = left + tooltipRef.clientWidth - window.innerWidth;
+    if (offsetLeft > 0) {
+        left -= offsetLeft;
+    }
+    if (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) {
+    const { top, left, shouldAnchorToBottom, offsetIndicatorLeft } = calculateTooltipFromAnchor(anchorRef, tooltipRef);
+    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);
+    }
+}
+exports.updateTooltipPosition = updateTooltipPosition;
+/**
+ * This tooltip anchors itself to an element and handles positioning relative to the anchored element
+ **/
+function AnchoredTooltip(props) {
+    const { open, children, anchorRef } = props;
+    const tooltipRef = (0, react_1.useRef)(null);
+    const { component: { tooltip: { className = "" } = {} } = {} } = (0, OneUIProvider_1.useOneUIContext)();
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            if (anchorRef.current && tooltipRef.current)
+                updateTooltipPosition(tooltipRef.current, anchorRef.current);
+            const scrollHandler = () => {
+                if (anchorRef.current && tooltipRef.current)
+                    updateTooltipPosition(tooltipRef.current, anchorRef.current);
+            };
+            window.addEventListener("scroll", scrollHandler);
+            return () => {
+                window.removeEventListener("scroll", scrollHandler);
+            };
+        }
+    }, [open, anchorRef]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(FadeIn_1.default, { onClick: (e) => e.stopPropagation(), ref: tooltipRef, className: `${AnchoredTooltip_module_scss_1.default.tooltipContainer} ${open ? AnchoredTooltip_module_scss_1.default.open : ""} ${props.className || ""} ${className}` }, open ? react_1.default.createElement("div", null, children) : undefined)));
+}
+exports.default = AnchoredTooltip;
+function DebuggingHelper(props) {
+    const [anchorInfo, setAnchorInfo] = (0, react_1.useState)({});
+    function update() {
+        return getPositionOnViewport(props.anchorRef.current).toJSON();
+    }
+    (0, react_1.useEffect)(() => {
+        setAnchorInfo(update());
+        setInterval(() => {
+            setAnchorInfo(update());
+        }, 500);
+    }, []);
+    return (react_1.default.createElement("div", { style: {
+            backgroundColor: "black",
+            position: "fixed",
+            color: "green",
+            fontFamily: "monospace",
+            padding: "1em",
+            fontSize: "16px",
+            lineHeight: "1.5em",
+            opacity: 0.75,
+            bottom: 0,
+            right: 0,
+            maxHeight: "50vh",
+            overflow: "auto",
+            pointerEvents: "none",
+        } },
+        "Calculated info:",
+        react_1.default.createElement("br", null),
+        props.anchorRef.current &&
+            props.tooltipRef.current &&
+            Object.entries(calculateTooltipFromAnchor(props.anchorRef.current, props.tooltipRef.current)).map(([k, v]) => {
+                return (react_1.default.createElement("p", null,
+                    react_1.default.createElement("b", null, k),
+                    ": ",
+                    typeof v !== "boolean" ? v : v ? "true" : "false"));
+            }),
+        "Window info:",
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("p", null,
+            react_1.default.createElement("b", null, "Height:"),
+            " ",
+            window.innerHeight),
+        react_1.default.createElement("br", null),
+        "Anchor info:",
+        Object.entries(anchorInfo).map(([name, value]) => {
+            return (react_1.default.createElement("p", null,
+                react_1.default.createElement("b", null, name),
+                ": ",
+                value));
+        })));
+}
 //# sourceMappingURL=AnchoredTooltip.js.map

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

@@ -1,16 +1,16 @@
-import React from "react";
-import AnchoredTooltip from "./AnchoredTooltip";
-declare const _default: {
-    component: typeof AnchoredTooltip;
-    title: string;
-};
-export default _default;
-export declare const InitialImplementation: {
-    (args: any): JSX.Element;
-    args: Partial<{
-        children: JSX.Element;
-        anchorRef: React.RefObject<HTMLElement>;
-        open: boolean;
-        className?: string | undefined;
-    }>;
-};
+import React from "react";
+import AnchoredTooltip from "./AnchoredTooltip";
+declare const _default: {
+    component: typeof AnchoredTooltip;
+    title: string;
+};
+export default _default;
+export declare const InitialImplementation: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        children: JSX.Element;
+        anchorRef: React.RefObject<HTMLElement>;
+        open: boolean;
+        className?: string | undefined;
+    }>;
+};

package/dist/components/AnchoredTooltip/AnchoredTooltip.stories.js

@@ -1,86 +1,86 @@
-"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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InitialImplementation = void 0;
-const react_1 = __importStar(require("react"));
-const AnchoredTooltip_1 = __importDefault(require("./AnchoredTooltip"));
-exports.default = {
-    component: AnchoredTooltip_1.default,
-    title: "Anchored Tooltip",
-};
-const InitialImplementation = (args) => {
-    const [open, setOpen] = (0, react_1.useState)(false);
-    const [open2, setOpen2] = (0, react_1.useState)(false);
-    const [open3, setOpen3] = (0, react_1.useState)(false);
-    const [open4, setOpen4] = (0, react_1.useState)(false);
-    const elementRef = (0, react_1.useRef)(null);
-    const elementRef2 = (0, react_1.useRef)(null);
-    const elementRef3 = (0, react_1.useRef)(null);
-    const elementRef4 = (0, react_1.useRef)(null);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { "data-testid": "viewport", style: {
-                width: "200vw",
-                height: "100vh",
-                backgroundColor: "lightblue",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                marginBottom: "200vh",
-                flexDirection: "column",
-            } },
-            react_1.default.createElement("h1", { ref: elementRef, style: {
-                    width: "200px",
-                    height: "200px",
-                    backgroundColor: "lightyellow",
-                }, onClick: () => setOpen((a) => !a) },
-                "Element to anchor to",
-                react_1.default.createElement("br", null),
-                "Click to open tooltip"),
-            react_1.default.createElement("h1", { ref: elementRef3, style: {
-                    alignSelf: "flex-end",
-                }, onClick: () => setOpen3((a) => !a) }, "This one is aligned right"),
-            react_1.default.createElement(AnchoredTooltip_1.default, { anchorRef: elementRef3, open: open3 },
-                react_1.default.createElement("h1", { style: { maxWidth: "1000px", margin: "0px" } }, "This content will overflow the available width of the screen so it needs to go to the left side so all the content can be visible by the user currently watching the screen and interacting with the elements available")),
-            react_1.default.createElement("h1", { ref: elementRef4, style: {
-                    alignSelf: "flex-start",
-                }, onClick: () => setOpen4((a) => !a) }, "This one is aligned left"),
-            react_1.default.createElement(AnchoredTooltip_1.default, { anchorRef: elementRef4, open: open4 },
-                react_1.default.createElement("h1", { style: { maxWidth: "1000px", margin: "0px" } }, "This content will overflow the available width of the screen so it needs to go to the right side so all the content can be visible by the user currently watching the screen and interacting with the elements available")),
-            react_1.default.createElement(AnchoredTooltip_1.default, { anchorRef: elementRef, open: open },
-                react_1.default.createElement("div", { style: { color: "white" } },
-                    "The content of the tooltip",
-                    react_1.default.createElement("br", null),
-                    react_1.default.createElement("div", null,
-                        react_1.default.createElement("h1", { style: { margin: 0 } }, "Some extra content"))))),
-        react_1.default.createElement("h1", { ref: elementRef2, onClick: () => setOpen2((a) => !a) }, "Another tooltip to show"),
-        react_1.default.createElement(AnchoredTooltip_1.default, { open: open2, anchorRef: elementRef2 },
-            react_1.default.createElement("h1", { style: { margin: 0 } }, "Another tooltip"))));
-};
-exports.InitialImplementation = InitialImplementation;
-exports.InitialImplementation.args = {};
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InitialImplementation = void 0;
+const react_1 = __importStar(require("react"));
+const AnchoredTooltip_1 = __importDefault(require("./AnchoredTooltip"));
+exports.default = {
+    component: AnchoredTooltip_1.default,
+    title: "Anchored Tooltip",
+};
+const InitialImplementation = (args) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [open2, setOpen2] = (0, react_1.useState)(false);
+    const [open3, setOpen3] = (0, react_1.useState)(false);
+    const [open4, setOpen4] = (0, react_1.useState)(false);
+    const elementRef = (0, react_1.useRef)(null);
+    const elementRef2 = (0, react_1.useRef)(null);
+    const elementRef3 = (0, react_1.useRef)(null);
+    const elementRef4 = (0, react_1.useRef)(null);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { "data-testid": "viewport", style: {
+                width: "200vw",
+                height: "100vh",
+                backgroundColor: "lightblue",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                marginBottom: "200vh",
+                flexDirection: "column",
+            } },
+            react_1.default.createElement("h1", { ref: elementRef, style: {
+                    width: "200px",
+                    height: "200px",
+                    backgroundColor: "lightyellow",
+                }, onClick: () => setOpen((a) => !a) },
+                "Element to anchor to",
+                react_1.default.createElement("br", null),
+                "Click to open tooltip"),
+            react_1.default.createElement("h1", { ref: elementRef3, style: {
+                    alignSelf: "flex-end",
+                }, onClick: () => setOpen3((a) => !a) }, "This one is aligned right"),
+            react_1.default.createElement(AnchoredTooltip_1.default, { anchorRef: elementRef3, open: open3 },
+                react_1.default.createElement("h1", { style: { maxWidth: "1000px", margin: "0px" } }, "This content will overflow the available width of the screen so it needs to go to the left side so all the content can be visible by the user currently watching the screen and interacting with the elements available")),
+            react_1.default.createElement("h1", { ref: elementRef4, style: {
+                    alignSelf: "flex-start",
+                }, onClick: () => setOpen4((a) => !a) }, "This one is aligned left"),
+            react_1.default.createElement(AnchoredTooltip_1.default, { anchorRef: elementRef4, open: open4 },
+                react_1.default.createElement("h1", { style: { maxWidth: "1000px", margin: "0px" } }, "This content will overflow the available width of the screen so it needs to go to the right side so all the content can be visible by the user currently watching the screen and interacting with the elements available")),
+            react_1.default.createElement(AnchoredTooltip_1.default, { anchorRef: elementRef, open: open },
+                react_1.default.createElement("div", { style: { color: "white" } },
+                    "The content of the tooltip",
+                    react_1.default.createElement("br", null),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("h1", { style: { margin: 0 } }, "Some extra content"))))),
+        react_1.default.createElement("h1", { ref: elementRef2, onClick: () => setOpen2((a) => !a) }, "Another tooltip to show"),
+        react_1.default.createElement(AnchoredTooltip_1.default, { open: open2, anchorRef: elementRef2 },
+            react_1.default.createElement("h1", { style: { margin: 0 } }, "Another tooltip"))));
+};
+exports.InitialImplementation = InitialImplementation;
+exports.InitialImplementation.args = {};
 //# sourceMappingURL=AnchoredTooltip.stories.js.map

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

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

package/dist/components/AnchoredTooltip/AnchoredTooltip.test.js

@@ -1,20 +1,20 @@
-"use strict";
-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 AnchoredTooltip_stories_1 = require("./AnchoredTooltip.stories");
-function renderScreen(props) {
-    return (0, react_2.render)(react_1.default.createElement(AnchoredTooltip_stories_1.InitialImplementation, Object.assign({}, props)));
-}
-it('Should at least render :)', () => {
-    renderScreen({});
-});
-it.todo("Should display over the bound element", () => {
-});
-it.todo("Should position under when it can't show fully on top");
-it.todo("Should move left when the content will overflow viewport");
-it.todo("Should anchor to parent if we scroll over the current position");
+"use strict";
+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 AnchoredTooltip_stories_1 = require("./AnchoredTooltip.stories");
+function renderScreen(props) {
+    return (0, react_2.render)(react_1.default.createElement(AnchoredTooltip_stories_1.InitialImplementation, Object.assign({}, props)));
+}
+it('Should at least render :)', () => {
+    renderScreen({});
+});
+it.todo("Should display over the bound element", () => {
+});
+it.todo("Should position under when it can't show fully on top");
+it.todo("Should move left when the content will overflow viewport");
+it.todo("Should anchor to parent if we scroll over the current position");
 //# sourceMappingURL=AnchoredTooltip.test.js.map

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

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

package/dist/components/AnchoredTooltip/index.js

@@ -1,9 +1,9 @@
-"use strict";
-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 AnchoredTooltip_1 = require("./AnchoredTooltip");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AnchoredTooltip_1).default; } });
+"use strict";
+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 AnchoredTooltip_1 = require("./AnchoredTooltip");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AnchoredTooltip_1).default; } });
 //# sourceMappingURL=index.js.map

package/dist/components/AsyncWrapper/AsyncWrapper.d.ts

@@ -1,10 +1,10 @@
-import { PropsWithChildren } from "react";
-/**
- * This is a generic implementation of the loading, and error handling
- **/
-export default function AsyncWrapper({ loading, error, onClose, onRetry, children, }: PropsWithChildren<{
-    loading: boolean;
-    error: boolean;
-    onClose: () => void;
-    onRetry: () => void;
-}>): JSX.Element;
+import { PropsWithChildren } from "react";
+/**
+ * This is a generic implementation of the loading, and error handling
+ **/
+export default function AsyncWrapper({ loading, error, onClose, onRetry, children, }: PropsWithChildren<{
+    loading: boolean;
+    error: boolean;
+    onClose: () => void;
+    onRetry: () => void;
+}>): JSX.Element;