@geneui/components 3.0.0-next-6501ddf-03042025 → 3.0.0-next-b9c382c-15042025

package/Popover.js

@@ -1,13 +1,318 @@
-export { P as Popover, a as PopoverBody, b as PopoverFooter, c as PopoverFooterActions } from './index-fd485ab0.js';
-import 'react';
-import './floating-ui.react-0485e4db.js';
+import React__default, { forwardRef, useState, useContext, useRef, useImperativeHandle, useEffect, 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 SvgInfoOutlined } from './InfoOutlined-fc7d9afa.js';
+import { S as SvgX } from './X-20da3b4a.js';
+import Button from './Button.js';
+import { a as GeneUIDesignSystemContext } from './index-7fa24b9c.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import { c as classNames } from './index-ce02421b.js';
+import Scrollbar from './Scrollbar.js';
 import 'react-dom';
-import './InfoOutlined-fc7d9afa.js';
 import './ActivityRecent-b88e2ba8.js';
-import './X-20da3b4a.js';
-import './style-inject.es-746bb8ed.js';
-import './index-7fa24b9c.js';
-import './useDebounceCallback-999deae7.js';
-import './Button.js';
-import './index-ce02421b.js';
 import './Loader.js';
+import './useDebounceCallback-999deae7.js';
+import 'prop-types';
+
+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{max-width:82rem;min-width:64rem}.popover_size_xLarge .popover__body{max-height:82rem;min-height:32rem}.popover_size_large{max-width:64rem;min-width:52rem}.popover_size_large .popover__body{max-height:64rem;min-height:26rem}.popover_size_medium{max-width:52rem;min-width:28rem}.popover_size_medium .popover__body{max-height:52rem;min-height:14rem}.popover_size_small{max-width:28rem;min-width:16rem}.popover_size_small .popover__body{max-height:52rem;min-height:4rem}.popover_size_large .popover__footer,.popover_size_xLarge .popover__footer{height:6.4rem}.popover_size_fitContent{width:-moz-fit-content;width:fit-content}.popover_size_reference{min-width:auto;width:var(--parent-width)}.popover__container{display:grid;grid-template-rows:auto 1fr auto}.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;overflow:hidden}.popover__title{color:var(--guit-sem-color-foreground-neutral-2);flex:1}.popover__title_icon{flex:0 0 auto}.popover__title_text{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family),sans-serif;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{min-width:0}.popover__body_withPadding{padding-block:var(--guit-ref-spacing-large);padding-inline:var(--guit-ref-spacing-large)}.popover__content{height:100%;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;overflow:hidden;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{margin-inline-start:auto}";
+styleInject(css_248z);
+
+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 floating 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 = forwardRef(({ size = "medium", fitReference, position = "bottom-center", margin = 10, defaultOpen = false, setProps, title, withArrow = true, children, disableReposition = false, onClose, open }, popoverRef) => {
+    const [popoverOpened, setPopoverOpened] = useState(defaultOpen);
+    const { geneUIProviderRef, breakpoint } = useContext(GeneUIDesignSystemContext);
+    const [currentPosition, setCurrentPosition] = useState(correctPosition[position]);
+    const arrowRef = useRef(null);
+    const isMobile = breakpoint === null || breakpoint === void 0 ? void 0 : breakpoint.isMobileBreakpoint;
+    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(margin),
+            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
+    });
+    useImperativeHandle(popoverRef, () => {
+        return {
+            referenceElement: refs.reference,
+            floatingElement: refs.floating
+        };
+    }, []);
+    useEffect(() => {
+        if (!popoverOpened && onClose) {
+            onClose();
+        }
+    }, [popoverOpened]);
+    useDismiss(context, {
+        outsidePressEvent: "click"
+    });
+    const click = useClick(context, {
+        event: "click"
+    });
+    const role = useRole(context);
+    const { getReferenceProps, getFloatingProps } = useInteractions([click, role]);
+    useEffect(() => {
+        const internalControl = open === undefined ? getReferenceProps() : {};
+        setProps(Object.assign({ ref: refs.setReference }, internalControl));
+    }, [setProps, getReferenceProps, open, 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 isPopoverOpened = open || popoverOpened;
+    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, position, currentPosition]);
+    const arrowOffsetFromEdge = 5;
+    const parentElement = refs.reference.current;
+    return (React__default.createElement(React__default.Fragment, null, isPopoverOpened &&
+        (isMobile ? (React__default.createElement("span", null, "Spreadsheet component")) : (React__default.createElement(FloatingPortal, { root: geneUIProviderRef.current },
+            React__default.createElement("div", Object.assign({ style: fitReference && parentElement
+                    ? Object.assign(Object.assign({}, floatingStyles), { "--parent-width": `${parentElement === null || parentElement === void 0 ? void 0 : parentElement.offsetWidth}px` }) : floatingStyles, className: `popover ${fitReference && "popover_size_reference"} popover_size_${size} popover_position_${currentDirection}`, ref: refs.setFloating }, getFloatingProps()),
+                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(SvgInfoOutlined, { className: "popover__title_icon", size: 20 }),
+                            React__default.createElement("span", { className: "popover__title_text ellipsis-text" }, title)),
+                        React__default.createElement(Button, { Icon: SvgX, size: "small", appearance: "secondary", displayType: "text", className: "popover__close", onClick: () => setPopoverOpened(false) }))),
+                    children)))))));
+});
+
+const PopoverBody = ({ children, withPadding = true, className, withScrollbar = true }) => {
+    return (React__default.createElement("div", { className: classNames("popover__body", { popover__body_withPadding: withPadding }, className) },
+        React__default.createElement("div", { className: "popover__content" }, withScrollbar ? React__default.createElement(Scrollbar, null, children) : 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" }, children);
+};
+
+export { Popover, PopoverBody, PopoverFooter, PopoverFooterActions };

package/Scrollbar.js

@@ -3392,7 +3392,7 @@ function (_super) {
   return Scrollbar;
 }(React$1.Component);
 
-var css_248z = ".scrollbar{min-height:0;min-width:0}.scrollbar_width_full{width:100%}.scrollbar_width_auto{width:auto}.scrollbar_height_full{height:100%}.scrollbar_height_auto{height:auto}.scrollbar__wrapper{height:100%;position:relative!important;width:100%}.scrollbar__scroller{height:100%;inset:auto!important;margin:0!important;position:relative!important}.scrollbar__scroller::-webkit-scrollbar,.scrollbar__scroller::-webkit-scrollbar-thumb,.scrollbar__scroller::-webkit-scrollbar-track{height:0;width:0}.scrollbar__content{padding:0!important}.scrollbar__content:focus-visible{outline:none}.scrollbar__track{border-radius:var(--guit-ref-radius-3xsmall);bottom:var(--guit-ref-spacing-3xsmall)!important;inset-inline-end:var(--guit-ref-spacing-4xsmall);overflow:hidden;position:absolute;z-index:100}.scrollbar__track_direction_y{height:100%;top:0;width:.6rem}.scrollbar__track_direction_x{bottom:0;height:.6rem;width:100%}.scrollbar__thumb{background:var(--guit-sem-color-background-transparent-2);border-radius:var(--guit-ref-radius-3xsmall);overflow:hidden;position:absolute}.scrollbar__thumb_direction_y{height:100%;inset-inline-end:0;top:0;width:.6rem}.scrollbar__thumb_direction_x{bottom:0;height:.6rem;inset-inline-start:0;width:100%}.scrollbar__thumb_direction_hide{height:0;width:0}";
+var css_248z = ".scrollbar{min-height:0;min-width:0}.scrollbar_width_full,.scrollbar_width_full .scrollbar__content{width:100%}.scrollbar_width_auto{width:auto}.scrollbar_height_full,.scrollbar_height_full .scrollbar__content{height:100%}.scrollbar_height_auto{height:auto}.scrollbar__wrapper{height:100%;position:relative!important;width:100%}.scrollbar__scroller{height:100%;inset:auto!important;margin:0!important;position:relative!important}.scrollbar__scroller::-webkit-scrollbar,.scrollbar__scroller::-webkit-scrollbar-thumb,.scrollbar__scroller::-webkit-scrollbar-track{height:0;width:0}.scrollbar__content{padding:0!important}.scrollbar__content:focus-visible{outline:none}.scrollbar__track{border-radius:var(--guit-ref-radius-3xsmall);bottom:var(--guit-ref-spacing-3xsmall)!important;inset-inline-end:var(--guit-ref-spacing-4xsmall);overflow:hidden;position:absolute;z-index:100}.scrollbar__track_direction_y{height:100%;top:0;width:.6rem}.scrollbar__track_direction_x{bottom:0;height:.6rem;width:100%}.scrollbar__thumb{background:var(--guit-sem-color-background-transparent-2);border-radius:var(--guit-ref-radius-3xsmall);overflow:hidden;position:absolute}.scrollbar__thumb_direction_y{height:100%;inset-inline-end:0;top:0;width:.6rem}.scrollbar__thumb_direction_x{bottom:0;height:.6rem;inset-inline-start:0;width:100%}.scrollbar__thumb_direction_hide{height:0;width:0}";
 styleInject(css_248z);
 
 /**

package/components/atoms/Popover/Popover.d.ts

@@ -16,30 +16,31 @@ export interface IPopoverProps {
     defaultOpen?: boolean;
     /**
      * Define width and height of the popover.<br>
-     * Possible values: <code> xLarge | large | medium | small | mobile </code>
+     * Possible values: `xLarge | large | medium | small | fitContent`
      */
-    size?: "xLarge" | "large" | "medium" | "small" | "mobile";
+    size?: "small" | "medium" | "large" | "xLarge" | "fitContent";
+    /**
+     * When set to true, the `width` of the `popover` will match the `width` of the reference (trigger, anchor) element.
+     * The `height` of the popover will still be determined by the `size` prop.
+     */
+    fitReference?: boolean;
     /**
      * Title displayed in the popover header.
      */
     title?: string;
     /**
-     * Position of the popover, relative to the target.<br><br>
-     * Possible values: <code> bottom-center | bottom-left | bottom-right | left-bottom | left-center | left-top | <br><br> right-bottom | right-center | right-top | top-center | top-left | top-right | auto </code>
+     * Position of the popover, relative to the reference (trigger, anchor) element.<br><br>
+     * Possible values: `bottom-center | bottom-left | bottom-right | left-bottom | left-center` <br> `left-top | right-bottom | right-center | right-top | top-center | top-left | top-right | auto`
      */
     position?: keyof typeof correctPosition;
     /**
-     * Margin between the popover and its target element.
+     * Margin between the popover and its reference (trigger, anchor) element.
      */
     margin?: number;
     /**
      * Function to update popover props dynamically.
      */
     setProps: Dispatch<SetStateAction<Record<string, unknown>>>;
-    /**
-     * Additional content displayed in the popover footer.
-     */
-    footerContent?: ReactNode;
     /**
      * The content displayed inside the popover.
      */
@@ -49,22 +50,37 @@ export interface IPopoverProps {
      */
     withArrow?: boolean;
     /**
-     * If this property is enabled, rather than the popover content repositioning on a boundary collision,
-     * the popover content container will move beyond the window's bounds.
-     * You are, however, supplied with nudgedLeft and nudgedTop values, so you may choose to handle content overflow as you wish.
+     * If `true`, disables automatic repositioning of the popover when it would otherwise
+     * overflow or collide with a window boundary. By default, the popover will attempt
+     * to reposition itself (e.g., flip to another side) to remain visible.
+     *
+     * When `disableReposition` is enabled, the popover will instead remain in its
+     * original placement, even if that causes it to overflow the viewport.
+     * This can be useful when you want to handle overflow behavior manually or
+     * maintain consistent placement.
+     *
+     * Note: Even with repositioning disabled, the component still provides
+     * `nudgedLeft` and `nudgedTop` values, which can be used to handle content overflow.
      */
     disableReposition?: boolean;
     /**
-     * A callback function that is called when the popover needs to be closed.
+     * A callback function that is called when the popover is closed.
      */
     onClose?: () => void;
     /**
-     * Use `open` prop to control open state. By default, open is controls by component.
+     * Controls the open state of the popover externally.
+     *
+     * If `open` is provided, the component becomes a controlled component,
+     * and its visibility will be dictated by the parent.
+     * If `open` is not provided, the component manages its own open/close
+     * state internally via user interaction (e.g., clicks).
+     *
+     * This allows the component to be used both in controlled and uncontrolled modes.
      */
     open?: boolean;
 }
 /**
- Popover displays additional content or information in an overlay box.
+ Popover displays additional content or information in an overlay floating 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.

package/components/atoms/Popover/PopoverBody.d.ts

@@ -9,6 +9,10 @@ interface IPopoverBodyProps extends PropsWithChildren {
      * By default the PopoverBody has <code>--guit-ref-spacing-large</code> padding.
      */
     withPadding?: boolean;
+    /**
+     * By default, the withScrollbar is <code>true</code>. Set withScrollbar <code>false</code> to return only children.
+     */
+    withScrollbar?: boolean;
 }
 declare const PopoverBody: FC<IPopoverBodyProps>;
 export default PopoverBody;

package/index.js

@@ -10,7 +10,7 @@ export { default as Logo } from './Logo.js';
 export { default as Rate } from './Rate.js';
 export { default as Radio } from './Radio.js';
 export { default as Text } from './Text.js';
-export { P as Popover, a as PopoverBody, b as PopoverFooter, c as PopoverFooterActions, u as useScrollLock } from './index-fd485ab0.js';
+export { Popover, PopoverBody, PopoverFooter, PopoverFooterActions } from './Popover.js';
 export { default as Badge } from './Badge.js';
 export { default as Scrollbar } from './Scrollbar.js';
 export { Col, Grid, Row } from './Grid.js';
@@ -37,6 +37,30 @@ import 'react-dom';
 import './X-20da3b4a.js';
 import 'prop-types';
 
+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 useClickOutside = (callback, relativeElements) => {
     const ref = useRef(null);
     const handleClickOutside = useCallback((e) => {
@@ -110,4 +134,4 @@ const useDeviceInfo = () => {
     }, []);
 };
 
-export { useClickOutside, useDeviceInfo };
+export { useClickOutside, useDeviceInfo, useScrollLock };

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-6501ddf-03042025",
+    "version": "3.0.0-next-b9c382c-15042025",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {

package/index-fd485ab0.js

@@ -1,355 +0,0 @@
-import React__default, { useRef, useCallback, useEffect, forwardRef, useState, useContext, useImperativeHandle, 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 SvgInfoOutlined } from './InfoOutlined-fc7d9afa.js';
-import { S as SvgX } from './X-20da3b4a.js';
-import { s as styleInject } from './style-inject.es-746bb8ed.js';
-import { a as GeneUIDesignSystemContext } from './index-7fa24b9c.js';
-import Button from './Button.js';
-import { c as classNames } from './index-ce02421b.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_withPadding{padding-block:var(--guit-ref-spacing-large);padding-inline:var(--guit-ref-spacing-large)}.popover__content{height:100%;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{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 = forwardRef(({ size = "medium", position = "bottom-center", margin = 10, defaultOpen = false, setProps, title, withArrow = true, children, disableReposition = false, onClose, open }, popoverRef) => {
-    const { lock: lockBodyScroll, unlock: unlockBodyScroll } = useScrollLock(document.body);
-    const [popoverOpened, setPopoverOpened] = useState(defaultOpen);
-    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(margin),
-            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
-    });
-    useImperativeHandle(popoverRef, () => {
-        return {
-            referenceElement: refs.reference,
-            floatingElement: refs.floating
-        };
-    }, []);
-    useEffect(() => {
-        if (!popoverOpened && onClose) {
-            onClose();
-        }
-    }, [popoverOpened]);
-    useDismiss(context, {
-        outsidePressEvent: "click"
-    });
-    const click = useClick(context, {
-        event: "click"
-    });
-    const role = useRole(context);
-    const { getReferenceProps, getFloatingProps } = useInteractions([click, role]);
-    useEffect(() => {
-        const internalControl = open === undefined ? getReferenceProps() : {};
-        setProps(Object.assign({ ref: refs.setReference }, internalControl));
-    }, [setProps, getReferenceProps, open, 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 = open || 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, position, currentPosition]);
-    const arrowOffsetFromEdge = 5;
-    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(SvgInfoOutlined, { className: "popover__title_icon", size: 20 }),
-                        React__default.createElement("span", { className: "popover__title_text ellipsis-text" }, title)),
-                    React__default.createElement(Button, { Icon: SvgX, size: "small", appearance: "secondary", displayType: "text", className: "popover__close", onClick: () => setPopoverOpened(false) }))),
-                children))))));
-});
-
-const PopoverBody = ({ children, withPadding = true, className }) => {
-    return (React__default.createElement("div", { className: classNames("popover__body", { popover__body_withPadding: withPadding }, className) },
-        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 };