@geneui/components 3.0.0-next-9bedd8e-12022025 → 3.0.0-next-5cecb1e-17022025

package/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export { default as useDebounce } from "./useDebounceCallback";
 export { default as useEllipsisDetection } from "./useEllipsisDetection";
+export { default as useScrollLock } from "./useScrollLock";
 export { default as useWindowSize } from "./useWindowSize";

package/hooks/useScrollLock/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useScrollLock";

package/hooks/useScrollLock/useScrollLock.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from "react";
+type TargetElement<T extends HTMLElement> = T | RefObject<T>;
+declare const useScrollLock: <T extends HTMLElement>(target: TargetElement<T>) => {
+    lock: () => void;
+    unlock: () => void;
+};
+export default useScrollLock;

package/index-18e397a9.js

@@ -0,0 +1,342 @@
+import React__default, { useRef, useCallback, useEffect, useState, useContext, useLayoutEffect } from 'react';
+import { u as useFloating, p as platform, o as offset, f as flip, a as arrow, s as shift, b as autoUpdate, c as useDismiss, d as useClick, e as useRole, g as useInteractions, F as FloatingPortal } from './floating-ui.react-0485e4db.js';
+import { S as SvgClose } from './Close-e8302008.js';
+import { S as SvgInfoOutline } from './InfoOutline-dd2e89d9.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import { GeneUIDesignSystemContext } from './GeneUIProvider.js';
+import Button from './Button.js';
+
+var css_248z = ".popover{background-color:var(--guit-sem-color-background-neutral-1-nudge);border-top-left-radius:var(--guit-ref-radius-2xsmall);border-top-right-radius:var(--guit-ref-radius-2xsmall);filter:drop-shadow(var(--guit-sem-shadow-floating-2-position-x-1) var(--guit-sem-shadow-floating-2-position-y-1) var(--guit-sem-shadow-floating-2-blur-1) var(--guit-sem-color-floating-2-rgba-1)) drop-shadow(var(--guit-sem-shadow-floating-2-position-x-2) var(--guit-sem-shadow-floating-2-position-y-2) var(--guit-sem-shadow-floating-2-blur-2) var(--guit-sem-color-floating-2-rgba-2))}.popover:not(.popover_size_mobile){border-bottom-left-radius:var(--guit-ref-radius-2xsmall);border-bottom-right-radius:var(--guit-ref-radius-2xsmall)}.popover:not(.popover_size_mobile) .popover__arrow{position:absolute}.popover:not(.popover_size_mobile) .popover__arrowPath{fill:var(--guit-sem-color-background-neutral-1-nudge)}.popover_position_top .popover__arrow{transform:rotate(180deg)}.popover_position_bottom .popover__arrow{transform:rotate(0deg)}.popover_position_left .popover__arrow{transform:rotate(90deg)}.popover_position_right .popover__arrow{transform:rotate(-90deg)}.popover_size_xLarge{width:72rem}.popover_size_xLarge .popover__body{height:15.4rem}.popover_size_xLarge .popover__footer{height:6.4rem}.popover_size_large{width:48rem}.popover_size_medium{width:36rem}.popover_size_large .popover__body,.popover_size_medium .popover__body{height:17.2rem}.popover_size_large .popover__footer,.popover_size_medium .popover__footer{height:5.6rem}.popover_size_small{width:24rem}.popover_size_small .popover__body{height:8.8rem}.popover_size_small .popover__footer{height:5.6rem}.popover_size_mobile{min-width:32rem;width:100%}.popover_size_mobile .popover__body{height:17.2rem}.popover_size_mobile .popover__footer{height:6.4rem}.popover__header{border-bottom:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);height:4.8rem;justify-content:space-between;padding-inline:var(--guit-ref-spacing-large)}.popover__header,.popover__title{align-items:center;column-gap:var(--guit-ref-spacing-xsmall);display:flex}.popover__title{color:var(--guit-sem-color-foreground-neutral-2);flex:1;overflow:hidden}.popover__title_icon{flex:0 0 auto}.popover__title_text{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-semibold-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}.popover__close{flex:0 0 auto}.popover__body{padding-block:var(--guit-ref-spacing-large);padding-inline:var(--guit-ref-spacing-large)}.popover__content{height:100%;overflow-y:auto;width:100%}.popover__footer{border-top:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);justify-content:space-between;padding-block:var(--guit-ref-spacing-large);padding-inline:var(--guit-ref-spacing-large)}.popover__footer,.popover__footer_buttons{align-items:center;column-gap:var(--guit-ref-spacing-xsmall);display:flex}.popover__footer_buttons{-webkit-margin-start:auto;margin-inline-start:auto}";
+styleInject(css_248z);
+
+const SCROLL_LOCK_CLASS = "scroll-lock";
+const useScrollLock = (target) => {
+    const resolvedElement = target instanceof HTMLElement ? target : target.current;
+    const lockedRef = useRef(false);
+    const lock = useCallback(() => {
+        if (resolvedElement && !lockedRef.current) {
+            resolvedElement.classList.add(SCROLL_LOCK_CLASS);
+            lockedRef.current = true;
+        }
+    }, [resolvedElement]);
+    const unlock = useCallback(() => {
+        if (resolvedElement && lockedRef.current) {
+            resolvedElement.classList.remove(SCROLL_LOCK_CLASS);
+            lockedRef.current = false;
+        }
+    }, [resolvedElement]);
+    useEffect(() => {
+        return () => {
+            unlock();
+        };
+    }, [unlock]);
+    return { lock, unlock };
+};
+
+const getPositionRect = (currentPopoverRect, position) => {
+    const { width, height, top, right, bottom, left } = currentPopoverRect;
+    switch (position) {
+        case "top":
+            return {
+                top: top - width,
+                left,
+                bottom: top,
+                right: left + width
+            };
+        case "right":
+            return {
+                top,
+                left: right,
+                bottom: top + height,
+                right: right + width
+            };
+        case "bottom":
+            return {
+                top: bottom,
+                left,
+                bottom: bottom + height,
+                right: left + width
+            };
+        case "left":
+            return {
+                top,
+                left: left - width,
+                bottom: top + height,
+                right: left
+            };
+        case "top-start":
+            return {
+                top: top - height,
+                left: left - width / 2,
+                bottom: top,
+                right: left + width / 2
+            };
+        case "right-start":
+            return {
+                top: top - height / 2,
+                left: right,
+                bottom: top + height / 2,
+                right: right + width
+            };
+        case "bottom-start":
+            return {
+                top: bottom,
+                left: left - width / 2,
+                bottom: bottom + height,
+                right: left + width / 2
+            };
+        case "left-start":
+            return {
+                top: top - height / 2,
+                left: left - width,
+                bottom: top + height / 2,
+                right: left
+            };
+        case "top-end":
+            return {
+                top: top - height,
+                left: right - width,
+                bottom: top,
+                right
+            };
+        case "right-end":
+            return {
+                top: bottom - height,
+                left: right,
+                bottom,
+                right: right + width
+            };
+        case "bottom-end":
+            return {
+                top: bottom,
+                left: right - width,
+                bottom: bottom + height,
+                right
+            };
+        case "left-end":
+            return {
+                top: top + height / 2,
+                left: left - width,
+                bottom: bottom - height / 2,
+                right: left
+            };
+        default:
+            return currentPopoverRect;
+    }
+};
+const calculateOverlap = (rect1, rect2) => {
+    if (rect1.right <= rect2.left ||
+        rect1.left >= rect2.right ||
+        rect1.bottom <= rect2.top ||
+        rect1.top >= rect2.bottom) {
+        return 0;
+    }
+    const overlapWidth = Math.min(rect1.right, rect2.right) - Math.max(rect1.left, rect2.left);
+    const overlapHeight = Math.min(rect1.bottom, rect2.bottom) - Math.max(rect1.top, rect2.top);
+    return overlapWidth * overlapHeight;
+};
+
+const positions = [
+    "top",
+    "bottom",
+    "right",
+    "left",
+    "top-start",
+    "right-start",
+    "bottom-start",
+    "left-start",
+    "top-end",
+    "right-end",
+    "bottom-end",
+    "left-end"
+];
+const correctPosition = {
+    "bottom-center": "bottom",
+    "bottom-left": "bottom-start",
+    "bottom-right": "bottom-end",
+    "left-bottom": "left-end",
+    "left-center": "left",
+    "left-top": "left-start",
+    "right-bottom": "right-end",
+    "right-center": "right",
+    "right-top": "right-start",
+    "top-center": "top",
+    "top-left": "top-start",
+    "top-right": "top-end",
+    auto: "auto"
+};
+const arrowPositions = {
+    "top-start": "left",
+    "top-end": "right",
+    "bottom-end": "right",
+    "bottom-start": "left"
+};
+const staticSides = {
+    top: "bottom",
+    right: "left",
+    bottom: "top",
+    left: "right"
+};
+/**
+ Popover displays additional content or information in an overlay box.
+ It appears on top of the main content when triggered by a user action,
+ such as a click or hover. Unlike tooltips, popovers can contain more
+ complex and interactive content, including text, images, and form elements.
+*/
+const Popover = ({ size = "medium", position = "bottom-center", padding = 10, isOpen = false, alwaysShow, setProps, title, withArrow = true, children, disableReposition = true }) => {
+    const { lock: lockBodyScroll, unlock: unlockBodyScroll } = useScrollLock(document.body);
+    const [popoverOpened, setPopoverOpened] = useState(isOpen);
+    const { geneUIProviderRef } = useContext(GeneUIDesignSystemContext);
+    const [currentPosition, setCurrentPosition] = useState(correctPosition[position]);
+    const arrowRef = useRef(null);
+    const wosPosed = useRef(new Map());
+    const { refs, floatingStyles, context, middlewareData, placement } = useFloating({
+        open: popoverOpened,
+        onOpenChange: setPopoverOpened,
+        placement: currentPosition,
+        platform: Object.assign(Object.assign({}, platform), { isRTL: () => false }),
+        middleware: [
+            offset(padding),
+            flip({
+                mainAxis: position !== "auto" && !disableReposition,
+                fallbackAxisSideDirection: "none",
+                fallbackPlacements: position === "auto" ? [] : positions
+            }),
+            arrow({ element: arrowRef }),
+            shift({
+                mainAxis: false,
+                crossAxis: false,
+                limiter: {
+                    fn: ({ x, y }) => ({
+                        x: Math.max(0, x),
+                        y: Math.max(0, y)
+                    })
+                }
+            })
+        ],
+        whileElementsMounted: autoUpdate
+    });
+    useDismiss(context, {
+        outsidePressEvent: "click"
+    });
+    const click = useClick(context, {
+        event: "click"
+    });
+    const role = useRole(context);
+    const { getReferenceProps, getFloatingProps } = useInteractions([click, role]);
+    useEffect(() => {
+        setProps(Object.assign({ ref: refs.setReference }, getReferenceProps()));
+    }, [setProps, getReferenceProps, refs.setReference]);
+    const [currentDirection] = placement.split("-");
+    const offsetFromEdge = 8;
+    const middlewareArrowData = middlewareData.arrow;
+    const staticSide = staticSides[currentDirection];
+    const arrowPosition = arrowPositions[placement];
+    const getCorrectPosition = arrowPosition
+        ? { [arrowPosition]: offsetFromEdge }
+        : { insetInlineStart: middlewareArrowData === null || middlewareArrowData === void 0 ? void 0 : middlewareArrowData.x };
+    const styles = size === "mobile"
+        ? {
+            position: "fixed",
+            bottom: "0"
+        }
+        : floatingStyles;
+    const isShowPopover = alwaysShow || popoverOpened;
+    useEffect(() => {
+        if (size === "mobile" && isShowPopover) {
+            lockBodyScroll();
+        }
+        else {
+            unlockBodyScroll();
+        }
+    }, [size, isShowPopover]);
+    useEffect(() => {
+        return () => {
+            unlockBodyScroll();
+        };
+    }, []);
+    useLayoutEffect(() => {
+        if (position === "auto") {
+            setCurrentPosition(size === "small" ? "auto" : "bottom");
+            return;
+        }
+        setCurrentPosition(correctPosition[position]);
+        return () => {
+            wosPosed.current.clear();
+        };
+    }, [position, size]);
+    /* eslint consistent-return: off */
+    useEffect(() => {
+        if (!refs.floating.current || position !== "auto")
+            return;
+        const currentPopoverRect = refs.floating.current.getBoundingClientRect();
+        const otherPopovers = document.querySelectorAll(".popover");
+        let bestPosition = correctPosition[position];
+        let leastOverlap = Infinity;
+        let hasOverlap = false;
+        const preventPosition = correctPosition[currentPosition];
+        const updatePopoverPosition = () => {
+            positions.forEach((possiblePositions) => {
+                const rect = getPositionRect(currentPopoverRect, possiblePositions);
+                let overlap = 0;
+                otherPopovers.forEach((otherPopover) => {
+                    if (otherPopover === refs.floating.current)
+                        return;
+                    const otherRect = otherPopover.getBoundingClientRect();
+                    overlap += calculateOverlap(rect, otherRect);
+                });
+                if (overlap < leastOverlap) {
+                    leastOverlap = overlap;
+                    bestPosition = possiblePositions;
+                }
+            });
+            hasOverlap = leastOverlap > 0;
+            if (preventPosition !== bestPosition && !hasOverlap && !wosPosed.current.has(bestPosition)) {
+                wosPosed.current.set(bestPosition, true);
+                setCurrentPosition(bestPosition);
+            }
+        };
+        const checkInterval = setInterval(() => {
+            updatePopoverPosition();
+            if (!hasOverlap) {
+                clearInterval(checkInterval);
+            }
+        });
+        return () => {
+            clearInterval(checkInterval);
+            leastOverlap = Infinity;
+        };
+    }, [popoverOpened, refs.floating.current, placement, alwaysShow, position, currentPosition]);
+    const arrowOffsetFromEdge = staticSide === "left" || staticSide === "right" ? 7 : 11;
+    return (React__default.createElement(React__default.Fragment, null, isShowPopover && (React__default.createElement(FloatingPortal, { root: geneUIProviderRef.current },
+        React__default.createElement("div", Object.assign({ style: styles, className: `popover  popover_size_${size} popover_position_${currentDirection}`, ref: refs.setFloating }, getFloatingProps()),
+            size !== "mobile" && (React__default.createElement("div", { ref: arrowRef, className: "popover__arrow", style: Object.assign(Object.assign({}, getCorrectPosition), { top: middlewareArrowData === null || middlewareArrowData === void 0 ? void 0 : middlewareArrowData.y, [staticSide]: arrowRef.current
+                        ? `${-arrowRef.current.offsetWidth + arrowOffsetFromEdge}px`
+                        : 0 }) },
+                React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "8", viewBox: "0 0 20 8", fill: "none" }, withArrow && (React__default.createElement("path", { d: "M8.75061 0.999513C9.48105 0.415163 10.519 0.415162 11.2494 0.999512L20 8H0L8.75061 0.999513Z", className: "popover__arrowPath" }))))),
+            React__default.createElement("div", { className: "popover__container" },
+                title && (React__default.createElement("div", { className: "popover__header" },
+                    React__default.createElement("p", { className: "popover__title" },
+                        React__default.createElement(SvgInfoOutline, { className: "popover__title_icon", size: 20 }),
+                        React__default.createElement("span", { className: "popover__title_text ellipsis-text" }, title)),
+                    React__default.createElement(Button, { Icon: SvgClose, size: "small", appearance: "secondary", displayType: "text", className: "popover__close", onClick: () => setPopoverOpened(false) }))),
+                children))))));
+};
+
+const PopoverBody = ({ children }) => {
+    return (React__default.createElement("div", { className: "popover__body" },
+        React__default.createElement("div", { className: "popover__content" },
+            children,
+            " ")));
+};
+
+const PopoverFooter = ({ children }) => {
+    return React__default.createElement("div", { className: "popover__footer" }, children);
+};
+
+const PopoverFooterActions = ({ children }) => {
+    return (React__default.createElement("div", { className: "popover__footer_buttons" },
+        React__default.createElement("div", { className: "popover__footer_buttons" }, children)));
+};
+
+export { Popover as P, PopoverBody as a, PopoverFooter as b, PopoverFooterActions as c, useScrollLock as u };

package/index.d.ts

@@ -6,6 +6,7 @@ export { default as Pill, IPillProps } from "./components/atoms/Pill";
 export { default as Divider, IDividerProps } from "./components/atoms/Divider";
 export { default as Info, IInfoProps } from "./components/atoms/Info";
 export { default as Button, IButtonProps } from "./components/atoms/Button";
+export { Popover, PopoverBody, PopoverFooter, PopoverFooterActions, IPopoverProps } from "./components/atoms/Popover";
 export { default as Badge, IBadgeProps } from "./components/atoms/Badge";
 export { default as Scrollbar, IScrollbarProps } from "./components/atoms/Scrollbar";
 export { Grid, Col, Row, IColProps, IRowProps } from "./components/atoms/Grid";
@@ -16,4 +17,5 @@ export { default as Tag, ITagProps } from "./components/molecules/Tag";
 export { default as GeneUIProvider, GeneUIDesignSystemContext, IGeneUIDesignSystemContext, IGeneUIProviderProps } from "./components/providers/GeneUIProvider";
 export { default as useDebounce } from "./hooks/useDebounceCallback";
 export { default as useEllipsisDetection } from "./hooks/useEllipsisDetection";
+export { default as useScrollLock } from "./hooks/useScrollLock";
 export { default as useWindowSize } from "./hooks/useWindowSize";

package/index.js

@@ -6,6 +6,7 @@ export { default as Pill } from './Pill.js';
 export { default as Divider } from './Divider.js';
 export { default as Info } from './Info.js';
 export { default as Button } from './Button.js';
+export { P as Popover, a as PopoverBody, b as PopoverFooter, c as PopoverFooterActions, u as useScrollLock } from './index-18e397a9.js';
 export { default as Badge } from './Badge.js';
 export { default as Scrollbar } from './Scrollbar.js';
 export { Col, Grid, Row } from './Grid.js';
@@ -22,8 +23,11 @@ import './ArrowLeft-b88e2ba8.js';
 import './style-inject.es-746bb8ed.js';
 import './ErrorAlertFill-a0afebbf.js';
 import './WarningFill-143d0870.js';
-import 'prop-types';
+import './InfoOutline-dd2e89d9.js';
+import './floating-ui.react-0485e4db.js';
 import 'react-dom';
+import './Close-e8302008.js';
+import 'prop-types';
 
 const useWindowSize = () => {
     const [windowSize, setWindowSize] = useState({ width: 0, height: 0 });

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@geneui/components",
     "description": "The Gene UI components library designed for BI tools",
-    "version": "3.0.0-next-9bedd8e-12022025",
+    "version": "3.0.0-next-5cecb1e-17022025",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {