@gooddata/sdk-ui-metric-component 0.0.0-stage → 11.65.0-alpha.4

package/README.md

@@ -1,3 +1,14 @@
-# Temporary Holding Version
+# Metric component
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Metric component is a library for editing metrics in gdc-analytical-designer and gdc-meditor.
+Originally it was part of gdc-meditor and released as npm private package @gooddata/metric-component.
+The npm package is now obsolete as the library is now here in the monorepo, still used
+by both gdc-analytical-designer and gdc-meditor apps.
+
+## Development setup
+
+The project is part of the rush-managed monorepository. Follow the main repository guidelines.
+
+## License
+
+Copyright (C) 2007-2025, GoodData(R) Corporation. All rights reserved.

package/esm/MaqlEditor/components/ExpandableTooltip.d.ts

@@ -0,0 +1,50 @@
+import { type MutableRefObject, type ReactElement } from "react";
+import { type Root } from "react-dom/client";
+export declare const ExpandedClass = "expanded";
+export declare const ScrollbarClass = "with-scrollbar";
+export interface IExpandableTooltipProps {
+    reference: MutableRefObject<IRootRef | null>;
+    elements: Array<HTMLElement>;
+    /**
+     * Element that owns the tooltip for outside-click attribution (see {@link IExpandableTooltipSettings.anchor}).
+     */
+    anchor?: HTMLElement;
+    className: string;
+    readOnly?: boolean;
+    onOpen?: () => void;
+    onDestroy?: () => void;
+    cachedPositions?: Array<{
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    } | undefined>;
+}
+export interface IExpandableTooltipSettings {
+    elements: Array<HTMLElement>;
+    /**
+     * Element that owns the tooltip for outside-click attribution: the tooltip is treated as part
+     * of this element's subtree by overlay/dialog outside-click detection. It must be stable for
+     * the tooltip's lifetime — the hovered `elements` are virtual-rendered by Monaco and may be
+     * swapped for fresh nodes while the tooltip is open, so pass the editor's container node
+     * rather than relying on the default (the first hovered element).
+     */
+    anchor?: HTMLElement;
+    className?: string;
+    readOnly?: boolean;
+    onOpen?: () => void;
+    onDestroy?: () => void;
+    cachedPositions?: Array<{
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    } | undefined>;
+}
+export interface IRootRef {
+    element: HTMLElement;
+    root: Root;
+}
+export declare function renderTooltip(ref: MutableRefObject<IRootRef | null>, { elements, anchor, className, readOnly, onOpen, onDestroy, cachedPositions, }: IExpandableTooltipSettings, content: ReactElement): void;
+export declare function destroyTooltip(ref: MutableRefObject<IRootRef | null>): void;
+//# sourceMappingURL=ExpandableTooltip.d.ts.map

package/esm/MaqlEditor/components/ExpandableTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableTooltip.d.ts","sourceRoot":"","sources":["../../../src/MaqlEditor/components/ExpandableTooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,KAAK,gBAAgB,EAErB,KAAK,YAAY,EAGpB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,IAAI,EAAc,MAAM,kBAAkB,CAAC;AAgBzD,eAAO,MAAM,aAAa,aAAa,CAAC;AACxC,eAAO,MAAM,cAAc,mBAAmB,CAAC;AAuE/C,MAAM,WAAW,uBAAuB;IACpC,SAAS,EAAE,gBAAgB,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC;IAC7C,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,eAAe,CAAC,EAAE,KAAK,CACjB;QACI,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAClB,GACD,SAAS,CACd,CAAC;CACL;AAoGD,MAAM,WAAW,0BAA0B;IACvC,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,eAAe,CAAC,EAAE,KAAK,CACjB;QACI,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAClB,GACD,SAAS,CACd,CAAC;CACL;AAED,MAAM,WAAW,QAAQ;IACrB,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,IAAI,CAAC;CACd;AAED,wBAAgB,aAAa,CACzB,GAAG,EAAE,gBAAgB,CAAC,QAAQ,GAAG,IAAI,CAAC,EACtC,EACI,QAAQ,EACR,MAAM,EACN,SAAc,EACd,QAAgB,EAChB,MAAM,EACN,SAAS,EACT,eAAe,GAClB,EAAE,0BAA0B,EAC7B,OAAO,EAAE,YAAY,GACtB,IAAI,CAmDN;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,gBAAgB,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,IAAI,CAiB3E"}

package/esm/MaqlEditor/components/ExpandableTooltip.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2021-2026 GoodData Corporation
+import { useCallback, useEffect, } from "react";
+import { createRoot } from "react-dom/client";
+import { FLOATING_ELEMENT_DATA_ATTR, IconClose, IconExpand, useRegisterFloatingAnchor, } from "@gooddata/sdk-ui-kit";
+import { makeStyles } from "../theme/styles.js";
+import { ExpandableTooltipContextProvider } from "./ExpandableTooltipContext.js";
+import { useExpandableTooltip } from "./hooks/useExpandableTooltip.js";
+import { useRePosition } from "./hooks/useRePosition.js";
+export const ExpandedClass = "expanded";
+export const ScrollbarClass = "with-scrollbar";
+const useStyles = makeStyles()((theme) => ({
+    root: {
+        position: "absolute",
+        zIndex: 9999,
+        fontFamily: theme.globals.font,
+        border: theme.tooltip.borders.default,
+        background: theme.tooltip.colors.background,
+        boxShadow: `0 1px 20px ${theme.globals.colors.shadow}`,
+        borderRadius: theme.tooltip.borderRadius,
+        overflow: "hidden",
+        transition: "top 200ms, left 200ms, transform 200ms, max-width 200ms, max-height 200ms",
+        [`&.${ExpandedClass}`]: {
+            top: "50% !important",
+            left: "50% !important",
+            transform: "translateX(-50%) translateY(-50%)",
+        },
+    },
+    expand: {
+        position: "absolute",
+        zIndex: 99,
+        top: 15,
+        right: 15,
+        cursor: "pointer",
+        [`&.${ScrollbarClass}`]: {
+            right: 30,
+        },
+        "&:hover svg path": {
+            fill: theme.tooltip.colors.hover,
+        },
+    },
+    open: {
+        position: "absolute",
+        zIndex: 99,
+        top: 15,
+        right: 45,
+        cursor: "pointer",
+        color: "#464E56",
+        [`&.${ScrollbarClass}`]: {
+            right: 60,
+        },
+        "&:hover": {
+            color: theme.tooltip.colors.hover,
+        },
+    },
+    overflow: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+    },
+    divider: {
+        top: 19,
+        right: 36,
+        width: 1,
+        backgroundColor: theme.tooltip.colors.line,
+        height: 12,
+        zIndex: 99,
+        position: "absolute",
+    },
+}));
+function ExpandableTooltip({ className, reference, elements, anchor, children, readOnly, onOpen, onDestroy, cachedPositions, }) {
+    const { classes, cx } = useStyles();
+    const { expanded, setExpanded, hasScrollbar, setHasScrollbar } = useExpandableTooltip();
+    const memoizedDestroy = useCallback(() => destroyTooltip(reference), [reference]);
+    const { element, position } = useRePosition(reference, elements, classes.root, expanded, memoizedDestroy, cachedPositions);
+    // The tooltip renders into its own React root appended to <body>, outside the editor that
+    // opened it, so an enclosing overlay/dialog with outside-click dismissal (e.g. the KD insight
+    // overlay hosting AD) cannot attribute clicks inside it by DOM containment and would close on
+    // the "edit" click. Mark it as a floating element anchored to its owner so ownership resolves
+    // through the anchor chain (same contract as UiFloatingElement / PositionedMenuContent).
+    const assignRootEl = useCallback((node) => {
+        element.current = node;
+    }, [element]);
+    const setRootElWithAnchorRegistry = useRegisterFloatingAnchor(assignRootEl, anchor ?? elements[0] ?? null);
+    // Run onDestroy when component unmounts
+    useEffect(() => {
+        return () => onDestroy?.();
+    }, [onDestroy]);
+    return (_jsx("div", { className: cx(classes.overflow, expanded && ExpandedClass), children: _jsxs("div", { className: cx(classes.root, className, expanded && ExpandedClass), style: position, ref: setRootElWithAnchorRegistry, [FLOATING_ELEMENT_DATA_ATTR]: true, children: [onOpen && (_jsx("div", { className: cx(classes.open, hasScrollbar && ScrollbarClass, "s-maql_tooltip-open"), onClick: () => {
+                        onOpen();
+                        destroyTooltip(reference);
+                    }, children: readOnly ? (_jsx("span", { className: "gd-icon-visible" })) : (_jsx("span", { className: "gd-icon-pencil" })) })), !expanded && (_jsx("div", { className: cx(classes.expand, hasScrollbar && ScrollbarClass, "s-maql_tooltip-expand"), onClick: () => {
+                        setExpanded(true);
+                        setHasScrollbar(false);
+                    }, children: _jsx(IconExpand, {}) })), onOpen && expanded && _jsx("div", { className: classes.divider }), expanded && (_jsx("div", { className: cx(classes.expand, hasScrollbar && ScrollbarClass, "s-maql_tooltip-close"), onClick: () => destroyTooltip(reference), children: _jsx(IconClose, {}) })), children] }) }));
+}
+export function renderTooltip(ref, { elements, anchor, className = "", readOnly = false, onOpen, onDestroy, cachedPositions, }, content) {
+    // First ensure any previous tooltip is destroyed
+    destroyTooltip(ref);
+    // Validate elements to ensure they're still in the DOM
+    const validElements = elements.filter((el) => {
+        const isValid = el && document.body.contains(el);
+        // Additional validation to check if elements are visible/have dimensions
+        if (isValid) {
+            try {
+                const rect = el.getBoundingClientRect();
+                return rect.width > 0 && rect.height > 0;
+            }
+            catch {
+                return false;
+            }
+        }
+        return isValid;
+    });
+    if (validElements.length === 0) {
+        return;
+    }
+    const div = document.createElement("div");
+    document.body.appendChild(div);
+    try {
+        const root = createRoot(div);
+        root.render(_jsx(ExpandableTooltipContextProvider, { children: _jsx(ExpandableTooltip, { className: className, reference: ref, elements: validElements, anchor: anchor, readOnly: readOnly, onOpen: onOpen, onDestroy: onDestroy, cachedPositions: cachedPositions, children: content }) }));
+        ref.current = { element: div, root };
+    }
+    catch {
+        // If there's an error during rendering, clean up to avoid memory leaks
+        div.remove();
+    }
+}
+export function destroyTooltip(ref) {
+    if (ref.current) {
+        const { element, root } = ref.current;
+        // Clear the ref first to prevent any race conditions
+        ref.current = null;
+        // Use try-catch to handle potential errors during unmounting
+        try {
+            // Unmount first to allow React to clean up properly
+            root?.unmount();
+        }
+        catch {
+            // Silently handle errors during unmounting
+        }
+        finally {
+            // Always attempt to remove the element from the DOM
+            element?.remove();
+        }
+    }
+}

package/esm/MaqlEditor/components/ExpandableTooltipContext.d.ts

@@ -0,0 +1,10 @@
+import { type PropsWithChildren } from "react";
+export interface IExpandableTooltipContext {
+    expanded: boolean;
+    setExpanded: (state: boolean) => void;
+    hasScrollbar: boolean;
+    setHasScrollbar: (state: boolean) => void;
+}
+export declare const ExpandableTooltipContext: import("react").Context<IExpandableTooltipContext | null>;
+export declare function ExpandableTooltipContextProvider({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ExpandableTooltipContext.d.ts.map

package/esm/MaqlEditor/components/ExpandableTooltipContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableTooltipContext.d.ts","sourceRoot":"","sources":["../../../src/MaqlEditor/components/ExpandableTooltipContext.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,iBAAiB,EAAoC,MAAM,OAAO,CAAC;AAEjF,MAAM,WAAW,yBAAyB;IACtC,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,wBAAwB,2DAAwD,CAAC;AAE9F,wBAAgB,gCAAgC,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAc/E"}

package/esm/MaqlEditor/components/ExpandableTooltipContext.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// (C) 2021-2026 GoodData Corporation
+import { createContext, useMemo, useState } from "react";
+export const ExpandableTooltipContext = createContext(null);
+export function ExpandableTooltipContextProvider({ children }) {
+    const [expanded, setExpanded] = useState(false);
+    const [hasScrollbar, setHasScrollbar] = useState(false);
+    const context = useMemo(() => {
+        return {
+            expanded,
+            hasScrollbar,
+            setExpanded,
+            setHasScrollbar,
+        };
+    }, [expanded, hasScrollbar]);
+    return _jsx(ExpandableTooltipContext.Provider, { value: context, children: children });
+}

package/esm/MaqlEditor/components/hooks/useExpandableTooltip.d.ts

@@ -0,0 +1,3 @@
+import { type IExpandableTooltipContext } from "../ExpandableTooltipContext.js";
+export declare function useExpandableTooltip(): IExpandableTooltipContext;
+//# sourceMappingURL=useExpandableTooltip.d.ts.map

package/esm/MaqlEditor/components/hooks/useExpandableTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExpandableTooltip.d.ts","sourceRoot":"","sources":["../../../../src/MaqlEditor/components/hooks/useExpandableTooltip.ts"],"names":[],"mappings":"AAIA,OAAO,EAA4B,KAAK,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAE1G,wBAAgB,oBAAoB,IAAI,yBAAyB,CAOhE"}

package/esm/MaqlEditor/components/hooks/useExpandableTooltip.js

@@ -0,0 +1,10 @@
+// (C) 2021-2026 GoodData Corporation
+import { useContext } from "react";
+import { ExpandableTooltipContext } from "../ExpandableTooltipContext.js";
+export function useExpandableTooltip() {
+    const expandableTooltip = useContext(ExpandableTooltipContext);
+    if (!expandableTooltip) {
+        throw new Error("useExpandableTooltip must be used inside ExpandableTooltipContextProvider");
+    }
+    return expandableTooltip;
+}

package/esm/MaqlEditor/components/hooks/useOutsideEvents.d.ts

@@ -0,0 +1,10 @@
+import { type MutableRefObject } from "react";
+import { type IRootRef } from "../ExpandableTooltip.js";
+/**
+ * Custom hook that handles all outside events for the tooltip
+ * - Mouse move: Close tooltip when mouse moves outside both the decorated text and tooltip
+ * - Mouse down: Close tooltip when user clicks outside the tooltip (if expanded)
+ * - Key down: Close tooltip when user presses Escape (if expanded)
+ */
+export declare function useOutsideEvents(_reference: MutableRefObject<IRootRef | null>, rectangles: Array<DOMRect>, className: string | null, expanded: boolean, onDestroy: () => void): void;
+//# sourceMappingURL=useOutsideEvents.d.ts.map

package/esm/MaqlEditor/components/hooks/useOutsideEvents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOutsideEvents.d.ts","sourceRoot":"","sources":["../../../../src/MaqlEditor/components/hooks/useOutsideEvents.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,gBAAgB,EAAa,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAIxD;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC5B,UAAU,EAAE,gBAAgB,CAAC,QAAQ,GAAG,IAAI,CAAC,EAC7C,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,EAC1B,SAAS,EAAE,MAAM,GAAG,IAAI,EACxB,QAAQ,EAAE,OAAO,EACjB,SAAS,EAAE,MAAM,IAAI,GACtB,IAAI,CAuCN"}

package/esm/MaqlEditor/components/hooks/useOutsideEvents.js

@@ -0,0 +1,43 @@
+// (C) 2021-2026 GoodData Corporation
+import { useEffect } from "react";
+import { isInside, isIntersect, isKeyCancel } from "./utils.js";
+/**
+ * Custom hook that handles all outside events for the tooltip
+ * - Mouse move: Close tooltip when mouse moves outside both the decorated text and tooltip
+ * - Mouse down: Close tooltip when user clicks outside the tooltip (if expanded)
+ * - Key down: Close tooltip when user presses Escape (if expanded)
+ */
+export function useOutsideEvents(_reference, rectangles, className, expanded, onDestroy) {
+    useEffect(() => {
+        // Handle mouse movement to close on hover out (when not expanded)
+        const handleMouseMove = (e) => {
+            if (expanded)
+                return;
+            const point = [e.clientX, e.clientY];
+            const intersects = rectangles.some((data) => isIntersect(data, point, 5)) || isInside(e, className);
+            if (!intersects) {
+                onDestroy();
+            }
+        };
+        // Handle mouse click outside the tooltip (when expanded)
+        const handleMouseDown = (e) => {
+            if (expanded && !isInside(e, className)) {
+                onDestroy();
+            }
+        };
+        // Handle keyboard escape (when expanded)
+        const handleKeyDown = (e) => {
+            if (expanded && isKeyCancel(e)) {
+                onDestroy();
+            }
+        };
+        document.body.addEventListener("mousemove", handleMouseMove);
+        document.body.addEventListener("mousedown", handleMouseDown);
+        document.body.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.body.removeEventListener("mousemove", handleMouseMove);
+            document.body.removeEventListener("mousedown", handleMouseDown);
+            document.body.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [rectangles, className, expanded, onDestroy]);
+}

package/esm/MaqlEditor/components/hooks/useRePosition.d.ts

@@ -0,0 +1,20 @@
+import { type MutableRefObject } from "react";
+import { type IRootRef } from "../ExpandableTooltip.js";
+interface ICachedPosition {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+type Position = {
+    top?: number;
+    left?: number;
+    bottom?: number;
+    right?: number;
+};
+export declare function useRePosition(reference: MutableRefObject<IRootRef | null>, elements: Array<HTMLElement>, className: string, opened: boolean, onDestroy: () => void, cachedPositions?: Array<ICachedPosition | undefined>): {
+    element: MutableRefObject<HTMLDivElement | null>;
+    position: Position;
+};
+export {};
+//# sourceMappingURL=useRePosition.d.ts.map

package/esm/MaqlEditor/components/hooks/useRePosition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRePosition.d.ts","sourceRoot":"","sources":["../../../../src/MaqlEditor/components/hooks/useRePosition.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,gBAAgB,EAA8C,MAAM,OAAO,CAAC;AAE1F,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAIxD,UAAU,eAAe;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,QAAQ,GAAG;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,wBAAgB,aAAa,CACzB,SAAS,EAAE,gBAAgB,CAAC,QAAQ,GAAG,IAAI,CAAC,EAC5C,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,EAC5B,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,OAAO,EACf,SAAS,EAAE,MAAM,IAAI,EACrB,eAAe,CAAC,EAAE,KAAK,CAAC,eAAe,GAAG,SAAS,CAAC,GACrD;IACC,OAAO,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACjD,QAAQ,EAAE,QAAQ,CAAC;CACtB,CAwGA"}

package/esm/MaqlEditor/components/hooks/useRePosition.js

@@ -0,0 +1,108 @@
+// (C) 2021-2026 GoodData Corporation
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useOutsideEvents } from "./useOutsideEvents.js";
+export function useRePosition(reference, elements, className, opened, onDestroy, cachedPositions) {
+    const element = useRef(null);
+    const [bounding, setBounding] = useState(null);
+    // Get valid rectangles from elements - using cached positions if elements are disconnected
+    const rectangles = useMemo(() => {
+        // Create rectangles from elements or cached positions
+        const rects = [];
+        elements.forEach((el, idx) => {
+            const isConnected = el ? el.isConnected : false;
+            const inBody = el ? document.body.contains(el) : false;
+            let rect = null;
+            // Try to get rectangle from element
+            if (isConnected && inBody) {
+                try {
+                    rect = el.getBoundingClientRect();
+                }
+                catch {
+                    // silent error
+                }
+            }
+            // If element is disconnected, use cached position
+            if ((!rect || rect.width === 0 || rect.height === 0) && cachedPositions?.[idx]) {
+                const cached = cachedPositions[idx];
+                // Create a DOMRect-like object from cached position if cached exists
+                if (cached) {
+                    rect = {
+                        top: cached.top,
+                        left: cached.left,
+                        width: cached.width,
+                        height: cached.height,
+                        right: cached.left + cached.width,
+                        bottom: cached.top + cached.height,
+                        x: cached.left,
+                        y: cached.top,
+                        toJSON: () => ({}),
+                    };
+                }
+            }
+            if (rect && rect.width > 0 && rect.height > 0) {
+                rects.push(rect);
+            }
+        });
+        return rects;
+    }, [elements, cachedPositions]);
+    // Update bounding rect when element or tooltip state changes
+    useLayoutEffect(() => {
+        if (!element.current)
+            return;
+        // Update immediately
+        const initialBounding = element.current.getBoundingClientRect();
+        setBounding(initialBounding);
+        // Update on resize too
+        const observer = new ResizeObserver(() => {
+            if (element.current) {
+                setBounding(element.current.getBoundingClientRect());
+            }
+        });
+        observer.observe(element.current);
+        return () => observer.disconnect();
+    }, [opened]);
+    // Calculate position based on rectangles and window size
+    const position = useMemo(() => {
+        const { innerWidth, innerHeight } = window;
+        const { width, height } = bounding || { width: 0, height: 0 };
+        // If we have no valid rectangles, use a default position
+        if (rectangles.length === 0) {
+            return { top: 10, left: 10 };
+        }
+        const [topCorner, leftCorner] = getPosition(rectangles);
+        const res = { top: topCorner, left: leftCorner };
+        // Handle edge overflow
+        if (leftCorner + width > innerWidth) {
+            delete res.left;
+            res.right = 0;
+        }
+        if (topCorner + height > innerHeight) {
+            delete res.top;
+            res.bottom = 0;
+        }
+        return res;
+    }, [rectangles, bounding]);
+    // Combined hook for all outside interactions
+    useOutsideEvents(reference, rectangles, className, opened, onDestroy);
+    return {
+        element,
+        position,
+    };
+}
+function getPosition(rectangles) {
+    // Add a safeguard for empty rectangles array
+    if (rectangles.length === 0) {
+        return [10, 10]; // Provide a small default offset
+    }
+    const initialValues = [0, Number.MAX_SAFE_INTEGER];
+    const finalPosition = rectangles.reduce((prev, current) => {
+        if (!current)
+            return prev;
+        return [Math.max(prev[0], current.top + current.height), Math.min(prev[1], current.left)];
+    }, initialValues);
+    // If leftCorner is still MAX_SAFE_INTEGER, use a reasonable default
+    if (finalPosition[1] === Number.MAX_SAFE_INTEGER) {
+        finalPosition[1] = 10;
+    }
+    return finalPosition;
+}

package/esm/MaqlEditor/components/hooks/utils.d.ts

@@ -0,0 +1,4 @@
+export declare function isIntersect(rectangle: DOMRect | null | undefined, point: [number, number], overflow?: number): boolean;
+export declare function isInside(e: MouseEvent, className: string | null): boolean;
+export declare function isKeyCancel(e: KeyboardEvent): boolean;
+//# sourceMappingURL=utils.d.ts.map

package/esm/MaqlEditor/components/hooks/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/MaqlEditor/components/hooks/utils.ts"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,CACvB,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,EACrC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EACvB,QAAQ,SAAI,GACb,OAAO,CAYT;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAIzE;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO,CAErD"}

package/esm/MaqlEditor/components/hooks/utils.js

@@ -0,0 +1,18 @@
+// (C) 2021-2026 GoodData Corporation
+export function isIntersect(rectangle, point, overflow = 0) {
+    const [x, y] = point;
+    if (rectangle) {
+        return (rectangle.left - overflow <= x &&
+            x <= rectangle.left + rectangle.width + overflow &&
+            rectangle.top - overflow <= y &&
+            y <= rectangle.top + rectangle.height + overflow);
+    }
+    return false;
+}
+export function isInside(e, className) {
+    const target = e.target;
+    return Boolean(className && target.closest(`.${className}`) !== null);
+}
+export function isKeyCancel(e) {
+    return !(e.ctrlKey || e.metaKey || e.altKey);
+}

package/esm/MaqlEditor/hooks/useAutoformat.d.ts

@@ -0,0 +1,3 @@
+import { type IStandaloneCodeEditor, type Monaco } from "../monaco/MonacoEditor.js";
+export declare function useAutoformat(onChange?: (editor: IStandaloneCodeEditor, monaco: Monaco, value: string) => void): (editor: IStandaloneCodeEditor, monaco: Monaco) => void;
+//# sourceMappingURL=useAutoformat.d.ts.map

package/esm/MaqlEditor/hooks/useAutoformat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutoformat.d.ts","sourceRoot":"","sources":["../../../src/MaqlEditor/hooks/useAutoformat.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,qBAAqB,EAAE,KAAK,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEpF,wBAAgB,aAAa,CACzB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAClF,CAAC,MAAM,EAAE,qBAAqB,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAezD"}

package/esm/MaqlEditor/hooks/useAutoformat.js

@@ -0,0 +1,15 @@
+// (C) 2021-2026 GoodData Corporation
+import { useCallback } from "react";
+export function useAutoformat(onChange) {
+    return useCallback((editor, monaco) => {
+        editor
+            .getAction("editor.action.formatDocument")
+            ?.run()
+            .then(() => {
+            editor.focus();
+            if (onChange) {
+                onChange(editor, monaco, editor.getValue());
+            }
+        });
+    }, [onChange]);
+}

package/esm/MaqlEditor/hooks/useCleanCallback.d.ts

@@ -0,0 +1,4 @@
+import { type MutableRefObject } from "react";
+import { type IDisposable } from "../monaco/MonacoEditor.js";
+export declare function useCleanCallback(...disposables: MutableRefObject<IDisposable[]>[]): void;
+//# sourceMappingURL=useCleanCallback.d.ts.map

package/esm/MaqlEditor/hooks/useCleanCallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCleanCallback.d.ts","sourceRoot":"","sources":["../../../src/MaqlEditor/hooks/useCleanCallback.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,gBAAgB,EAAa,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE7D,wBAAgB,gBAAgB,CAAC,GAAG,WAAW,EAAE,gBAAgB,CAAC,WAAW,EAAE,CAAC,EAAE,GAAG,IAAI,CASxF"}

package/esm/MaqlEditor/hooks/useCleanCallback.js

@@ -0,0 +1,12 @@
+// (C) 2021-2026 GoodData Corporation
+import { useEffect } from "react";
+export function useCleanCallback(...disposables) {
+    useEffect(() => {
+        return () => {
+            disposables.forEach((dis) => {
+                dis.current.forEach((item) => item.dispose());
+            });
+        };
+        // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+}

package/esm/MaqlEditor/hooks/useCodeTheme.d.ts

@@ -0,0 +1,3 @@
+import { type IStandaloneThemeData } from "../monaco/MonacoEditor.js";
+export declare function useCodeTheme(): [string, IStandaloneThemeData];
+//# sourceMappingURL=useCodeTheme.d.ts.map

package/esm/MaqlEditor/hooks/useCodeTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCodeTheme.d.ts","sourceRoot":"","sources":["../../../src/MaqlEditor/hooks/useCodeTheme.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAatE,wBAAgB,YAAY,IAAI,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAgD7D"}

package/esm/MaqlEditor/hooks/useCodeTheme.js

@@ -0,0 +1,48 @@
+// (C) 2021-2026 GoodData Corporation
+import { useMemo } from "react";
+import { DecoratorAttribute, DecoratorComputedAttribute, DecoratorDataset, DecoratorDateAttribute, DecoratorDateLabel, DecoratorFact, DecoratorLabel, DecoratorMetric, DecoratorParameter, } from "../monaco/MonacoEditor.styles.js";
+export function useCodeTheme() {
+    return useMemo(() => [
+        "gooddata-theme",
+        {
+            base: "vs",
+            inherit: true,
+            rules: [
+                //others languages are inherited from vs base theme
+                //maql specific
+                { token: "keyword.maql", foreground: "#7364CF" },
+                { token: "function.maql", foreground: "#7364CF" },
+                { token: "variable.maql", foreground: "#464E56" },
+                { token: "attribute.maql", foreground: "#DB7900" },
+                { token: "label.maql", foreground: "#DB7900" },
+                { token: "fact.maql", foreground: "#00A67D" },
+                { token: "metric.maql", foreground: "#00A67D" },
+                { token: "dataset.maql", foreground: "#952F8E" },
+                { token: "string.maql", foreground: "#D95791" },
+                { token: "number.maql", foreground: "#D95791" },
+                { token: "comment.maql", foreground: "#94A1AD" },
+            ],
+            colors: {
+                "editor.background": "#FCFCFD",
+                [`editor.variable.${DecoratorFact}.color`]: "rgba(0,166,125,1)",
+                [`editor.variable.${DecoratorFact}.background`]: "rgba(0,166,125,0.07)",
+                [`editor.variable.${DecoratorMetric}.color`]: "rgba(0,166,125,1)",
+                [`editor.variable.${DecoratorMetric}.background`]: "rgba(0,166,125,0.07)",
+                [`editor.variable.${DecoratorDataset}.color`]: "rgba(149,47,142,1)",
+                [`editor.variable.${DecoratorDataset}.background`]: "rgba(149,47,142,0.07)",
+                [`editor.variable.${DecoratorAttribute}.color`]: "rgba(219,121,0,1)",
+                [`editor.variable.${DecoratorAttribute}.background`]: "rgba(219,121,0,0.07)",
+                [`editor.variable.${DecoratorLabel}.color`]: "rgba(219,121,0,1)",
+                [`editor.variable.${DecoratorLabel}.background`]: "rgba(219,121,0,0.07)",
+                [`editor.variable.${DecoratorComputedAttribute}.color`]: "rgba(219,121,0,1)",
+                [`editor.variable.${DecoratorComputedAttribute}.background`]: "rgba(219,121,0,0.07)",
+                [`editor.variable.${DecoratorDateAttribute}.color`]: "rgba(0,155,201,1)",
+                [`editor.variable.${DecoratorDateAttribute}.background`]: "rgba(0,155,201,0.07)",
+                [`editor.variable.${DecoratorDateLabel}.color`]: "rgba(0,155,201,1)",
+                [`editor.variable.${DecoratorDateLabel}.background`]: "rgba(0,155,201,0.07)",
+                [`editor.variable.${DecoratorParameter}.color`]: "rgba(148,161,173,1)",
+                [`editor.variable.${DecoratorParameter}.background`]: "rgba(148,161,173,0.07)",
+            },
+        },
+    ], []);
+}

package/esm/MaqlEditor/hooks/useCopyToClipboard.d.ts

@@ -0,0 +1,3 @@
+import { type IStandaloneCodeEditor } from "../monaco/MonacoEditor.js";
+export declare function useCopyToClipboard(): (editor: IStandaloneCodeEditor | null | undefined) => boolean;
+//# sourceMappingURL=useCopyToClipboard.d.ts.map

package/esm/MaqlEditor/hooks/useCopyToClipboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCopyToClipboard.d.ts","sourceRoot":"","sources":["../../../src/MaqlEditor/hooks/useCopyToClipboard.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAEvE,wBAAgB,kBAAkB,IAAI,CAAC,MAAM,EAAE,qBAAqB,GAAG,IAAI,GAAG,SAAS,KAAK,OAAO,CAalG"}

package/esm/MaqlEditor/hooks/useCopyToClipboard.js

@@ -0,0 +1,16 @@
+// (C) 2021-2026 GoodData Corporation
+import { useCallback } from "react";
+export function useCopyToClipboard() {
+    return useCallback((editor) => {
+        if (editor) {
+            const range = editor.getModel()?.getFullModelRange();
+            if (range) {
+                editor.setSelection(range);
+                editor.focus();
+                editor.trigger("editor", "editor.action.clipboardCopyAction", {});
+                return true;
+            }
+        }
+        return false;
+    }, []);
+}