@laser-ui/components 1.0.2 → 1.1.1

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.1](https://github.com/laser-ui/laser-ui/compare/v1.1.0...v1.1.1) (2024-08-30)
+
+### Bug Fixes
+
+- fix automatically update when nested ([d1c0b46](https://github.com/laser-ui/laser-ui/commit/d1c0b4645965e31b382058b60b2569b253c162e5))
+
+# [1.1.0](https://github.com/laser-ui/laser-ui/compare/v1.0.2...v1.1.0) (2024-08-30)
+
+### Features
+
+- automatically update when scrolling ([9030e9e](https://github.com/laser-ui/laser-ui/commit/9030e9e1fa1739bb84f426004eefa6e00d6f2773))
+
 ## [1.0.2](https://github.com/laser-ui/laser-ui/compare/v1.0.1...v1.0.2) (2024-07-20)
 
 ### Bug Fixes

package/affix/Affix.js

@@ -1,9 +1,9 @@
 import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEvent, useEventCallback, useMount, useRefExtra, useResize } from '@laser-ui/hooks';
+import { useEventCallback, useMount, useRefExtra, useResize } from '@laser-ui/hooks';
 import { getOffsetToRoot, toPx } from '@laser-ui/utils';
 import { isFunction, isString, isUndefined } from 'lodash';
 import { cloneElement, forwardRef, useId, useImperativeHandle, useState } from 'react';
-import { useComponentProps, useJSS, useLayout, useListenGlobalScrolling, useNamespace } from '../hooks';
+import { useComponentProps, useContainerScrolling, useJSS, useLayout, useNamespace } from '../hooks';
 export const Affix = forwardRef((props, ref) => {
     const { children, top = 0, target, zIndex } = useComponentProps('Affix', props);
     const namespace = useNamespace();
@@ -46,9 +46,7 @@ export const Affix = forwardRef((props, ref) => {
     useMount(() => {
         updatePosition();
     });
-    const listenGlobalScrolling = useListenGlobalScrolling(updatePosition);
-    useEvent(pageScrollRef, 'scroll', updatePosition, { passive: true }, listenGlobalScrolling);
-    useEvent(targetRef, 'scroll', updatePosition, { passive: true }, listenGlobalScrolling || isUndefined(target));
+    useContainerScrolling(affixRef, updatePosition);
     useResize(sticky ? placeholderRef : affixRef, updatePosition);
     useResize(contentResizeRef, updatePosition);
     useImperativeHandle(ref, () => ({

package/anchor/Anchor.js

@@ -5,7 +5,7 @@ import { getOffsetToRoot, scrollTo, toPx } from '@laser-ui/utils';
 import { isArray, isString, isUndefined } from 'lodash';
 import { Fragment, forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import { CLASSES, DOT_INDICATOR, LINE_INDICATOR } from './vars';
-import { useComponentProps, useLayout, useListenGlobalScrolling, useStyled } from '../hooks';
+import { useComponentProps, useLayout, useStyled } from '../hooks';
 import { mergeCS } from '../utils';
 function AnchorFC(props, ref) {
     const _a = useComponentProps('Anchor', props), { styleOverrides, styleProvider, list, page, distance: distanceProp = 0, scrollBehavior = 'instant', indicator = DOT_INDICATOR, onClick } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "list", "page", "distance", "scrollBehavior", "indicator", "onClick"]);
@@ -56,8 +56,7 @@ function AnchorFC(props, ref) {
     useMount(() => {
         updateAnchor();
     });
-    const listenGlobalScrolling = useListenGlobalScrolling(updateAnchor);
-    useEvent(pageRef, 'scroll', updateAnchor, { passive: true }, listenGlobalScrolling);
+    useEvent(pageRef, 'scroll', updateAnchor, { passive: true });
     useResize(contentResizeRef, updateAnchor);
     useImperativeHandle(ref, () => ({
         active,

package/cascader/Cascader.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEvent, useEventCallback, useForkRef, useResize } from '@laser-ui/hooks';
+import { useEventCallback, useForkRef, useResize } from '@laser-ui/hooks';
 import { findNested } from '@laser-ui/utils';
 import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
 import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
@@ -13,7 +13,7 @@ import { CascaderSearchPanel } from './internal/CascaderSearchPanel';
 import { CLASSES } from './vars';
 import { BaseInput } from '../base-input';
 import { Dropdown } from '../dropdown';
-import { useComponentProps, useControlled, useDesign, useFocusVisible, useJSS, useLayout, useListenGlobalScrolling, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
+import { useComponentProps, useContainerScrolling, useControlled, useDesign, useFocusVisible, useJSS, useLayout, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
 import { Icon } from '../icon';
 import { CircularProgress } from '../internal/circular-progress';
 import { Portal } from '../internal/portal';
@@ -35,7 +35,7 @@ function CascaderFC(props, ref) {
     const uniqueId = useId();
     const listId = `${namespace}-cascader-list-${uniqueId}`;
     const getItemId = (val) => `${namespace}-cascader-item-${val}-${uniqueId}`;
-    const { pageScrollRef, contentResizeRef } = useLayout();
+    const { contentResizeRef } = useLayout();
     const boxRef = useRef(null);
     const popupRef = useRef(null);
     const inputRef = useRef(null);
@@ -202,8 +202,7 @@ function CascaderFC(props, ref) {
             popupRef.current.classList.toggle(sheet.classes.position, true);
         }
     });
-    const listenGlobalScrolling = useListenGlobalScrolling(updatePosition, !visible);
-    useEvent(pageScrollRef, 'scroll', updatePosition, { passive: true }, !visible || listenGlobalScrolling);
+    useContainerScrolling(boxRef, updatePosition, !visible);
     useResize(boxRef, updatePosition, undefined, !visible);
     useResize(popupRef, updatePosition, undefined, !visible);
     useResize(contentResizeRef, updatePosition, undefined, !visible);

package/context/index.d.ts

@@ -11,7 +11,6 @@ interface LContextData {
     };
     layoutPageScrollEl: RefExtra | null;
     layoutContentResizeEl: RefExtra | null;
-    listenGlobalScrolling: boolean;
 }
 export type LContextIn = Partial<LContextData>;
 export declare class LContextManager {
@@ -21,7 +20,6 @@ export declare class LContextManager {
     componentDefaultProps: LContextData['componentDefaultProps'];
     layoutPageScrollEl: LContextData['layoutPageScrollEl'];
     layoutContentResizeEl: LContextData['layoutContentResizeEl'];
-    listenGlobalScrolling: LContextData['listenGlobalScrolling'];
     private _parent;
     get parent(): LContextManager | null;
     get root(): LContextManager;

package/context/index.js

@@ -49,12 +49,6 @@ export class LContextManager {
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "listenGlobalScrolling", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
         Object.defineProperty(this, "_parent", {
             enumerable: true,
             configurable: true,
@@ -67,7 +61,6 @@ export class LContextManager {
         this.componentDefaultProps = context.componentDefaultProps;
         this.layoutPageScrollEl = context.layoutPageScrollEl;
         this.layoutContentResizeEl = context.layoutContentResizeEl;
-        this.listenGlobalScrolling = context.listenGlobalScrolling;
     }
     setParent(parent) {
         this._parent = parent;
@@ -80,7 +73,6 @@ export class LContextManager {
             componentDefaultProps: Object.assign({}, this.componentDefaultProps),
             layoutPageScrollEl: this.layoutPageScrollEl,
             layoutContentResizeEl: this.layoutContentResizeEl,
-            listenGlobalScrolling: this.listenGlobalScrolling,
         };
         Object.keys(context).forEach((key) => {
             if (!isUndefined(context[key])) {
@@ -102,5 +94,4 @@ export const LContext = createContext(new LContextManager({
     componentDefaultProps: {},
     layoutPageScrollEl: ':root',
     layoutContentResizeEl: null,
-    listenGlobalScrolling: false,
 }));

package/date-picker/DatePicker.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAsync, useEvent, useEventCallback, useForceUpdate, useForkRef, useImmer, useResize } from '@laser-ui/hooks';
+import { useAsync, useEventCallback, useForceUpdate, useForkRef, useImmer, useResize } from '@laser-ui/hooks';
 import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
 import CalendarTodayOutlined from '@material-design-icons/svg/outlined/calendar_today.svg?react';
 import SwapHorizOutlined from '@material-design-icons/svg/outlined/swap_horiz.svg?react';
@@ -12,7 +12,7 @@ import { CLASSES } from './vars';
 import { BaseInput } from '../base-input';
 import { Button } from '../button';
 import dayjs from '../dayjs';
-import { useComponentProps, useControlled, useDesign, useJSS, useLayout, useListenGlobalScrolling, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
+import { useComponentProps, useContainerScrolling, useControlled, useDesign, useJSS, useLayout, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
 import { Icon } from '../icon';
 import { Portal } from '../internal/portal';
 import { Transition } from '../internal/transition';
@@ -34,7 +34,7 @@ export const DatePicker = forwardRef((props, ref) => {
     const { t } = useTranslation();
     const forceUpdate = useForceUpdate();
     const async = useAsync();
-    const { pageScrollRef, contentResizeRef } = useLayout();
+    const { contentResizeRef } = useLayout();
     const boxRef = useRef(null);
     const popupRef = useRef(null);
     const inputLeftRef = useRef(null);
@@ -141,8 +141,7 @@ export const DatePicker = forwardRef((props, ref) => {
             popupRef.current.classList.toggle(sheet.classes.position, true);
         }
     });
-    const listenGlobalScrolling = useListenGlobalScrolling(updatePosition, !visible);
-    useEvent(pageScrollRef, 'scroll', updatePosition, { passive: true }, !visible || listenGlobalScrolling);
+    useContainerScrolling(boxRef, updatePosition, !visible);
     useResize(boxRef, updatePosition, undefined, !visible);
     useResize(popupRef, updatePosition, undefined, !visible);
     useResize(contentResizeRef, updatePosition, undefined, !visible);

package/dropdown/Dropdown.js

@@ -9,7 +9,7 @@ import { DropdownItem as DropdownItemFC } from './internal/DropdownItem';
 import { DropdownSub } from './internal/DropdownSub';
 import { checkEnableItem, getSameLevelEnableItems } from './utils';
 import { CLASSES } from './vars';
-import { useComponentProps, useControlled, useFocusVisible, useJSS, useMaxIndex, useNamespace, useNestedPopup, useStyled, useTranslation, } from '../hooks';
+import { useComponentProps, useContainerScrolling, useControlled, useFocusVisible, useJSS, useMaxIndex, useNamespace, useNestedPopup, useStyled, useTranslation, } from '../hooks';
 import { Popup } from '../internal/popup';
 import { Portal } from '../internal/portal';
 import { Transition } from '../internal/transition';
@@ -254,19 +254,18 @@ function DropdownFC(props, ref) {
         });
         return getNodes(list, 0, []);
     })();
-    useImperativeHandle(ref, () => ({
-        updatePosition: () => {
-            updatePosition();
-            for (const fn of dataRef.current.updatePosition.values()) {
-                fn();
-            }
-        },
-    }), [updatePosition]);
+    const updateAllPosition = useEventCallback(() => {
+        updatePosition();
+        for (const fn of dataRef.current.updatePosition.values()) {
+            fn();
+        }
+    });
+    useContainerScrolling(triggerRef, updateAllPosition, !visible);
+    useImperativeHandle(ref, () => ({ updatePosition: updateAllPosition }), [updateAllPosition]);
     return (_jsx(Popup, { visible: visible, trigger: trigger, updatePosition: {
             fn: updatePosition,
             triggerRef,
             popupRef,
-            containerRefs: [],
         }, onVisibleChange: changeVisible, children: ({ renderTrigger, renderPopup }) => {
             const render = (el) => {
                 var _a, _b;

package/dropdown/internal/DropdownSub.js

@@ -20,7 +20,7 @@ export const DropdownSub = forwardRef((props, ref) => {
     const visible = !isUndefined(popupState);
     const transformOrigin = useRef();
     const updatePosition = useEventCallback(() => {
-        if (visible && popupRef.current && triggerRef.current) {
+        if (!disabled && visible && popupRef.current && triggerRef.current) {
             const [width, height] = [popupRef.current.offsetWidth, popupRef.current.offsetHeight];
             const position = getHorizontalSidePosition(triggerRef.current, { width, height }, {
                 placement: 'right',
@@ -42,7 +42,7 @@ export const DropdownSub = forwardRef((props, ref) => {
             fn: updatePosition,
             triggerRef,
             popupRef,
-            containerRefs: [],
+            scroll: false,
         }, onVisibleChange: onVisibleChange, children: ({ renderTrigger, renderPopup }) => (_jsxs(_Fragment, { children: [renderTrigger(_jsxs("li", Object.assign({}, mergeCS(styled('dropdown__item', 'dropdown__item--sub', {
                     'dropdown__item.is-expand': visible,
                     'dropdown__item.is-disabled': disabled,

package/fab/FabBacktop.js

@@ -6,7 +6,7 @@ import VerticalAlignTopOutlined from '@material-design-icons/svg/outlined/vertic
 import { isString } from 'lodash';
 import { cloneElement, useRef, useState } from 'react';
 import { FabButton } from './FabButton';
-import { useComponentProps, useLayout, useListenGlobalScrolling } from '../hooks';
+import { useComponentProps, useLayout } from '../hooks';
 import { Icon } from '../icon';
 import { Transition } from '../internal/transition';
 import { TTANSITION_DURING_BASE } from '../vars';
@@ -37,8 +37,7 @@ export function FabBacktop(props) {
         updateBackTop();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    const listenGlobalScrolling = useListenGlobalScrolling(updateBackTop);
-    useEvent(pageRef, 'scroll', updateBackTop, { passive: true }, listenGlobalScrolling);
+    useEvent(pageRef, 'scroll', updateBackTop, { passive: true });
     useResize(contentResizeRef, updateBackTop);
     const node = (_jsx(FabButton, Object.assign({}, restProps, { children: children !== null && children !== void 0 ? children : (_jsx(Icon, { children: _jsx(VerticalAlignTopOutlined, {}) })) })));
     return (_jsx(Transition, { enter: visible, during: TTANSITION_DURING_BASE, children: (state) => cloneElement(node, {

package/hooks/index.d.ts

@@ -1,11 +1,11 @@
 export { useComponentProps } from './useComponentProps';
+export { useContainerScrolling } from './useContainerScrolling';
 export { useControlled } from './useControlled';
 export { useDesign } from './useDesign';
 export { useDialogService } from './useDialogService';
 export { useFocusVisible } from './useFocusVisible';
 export { useJSS } from './useJSS';
 export { useLayout } from './useLayout';
-export { useListenGlobalScrolling } from './useListenGlobalScrolling';
 export { useLockScroll } from './useLockScroll';
 export { useMaxIndex } from './useMaxIndex';
 export { useNamespace } from './useNamespace';

package/hooks/index.js

@@ -1,11 +1,11 @@
 export { useComponentProps } from './useComponentProps';
+export { useContainerScrolling } from './useContainerScrolling';
 export { useControlled } from './useControlled';
 export { useDesign } from './useDesign';
 export { useDialogService } from './useDialogService';
 export { useFocusVisible } from './useFocusVisible';
 export { useJSS } from './useJSS';
 export { useLayout } from './useLayout';
-export { useListenGlobalScrolling } from './useListenGlobalScrolling';
 export { useLockScroll } from './useLockScroll';
 export { useMaxIndex } from './useMaxIndex';
 export { useNamespace } from './useNamespace';

package/hooks/useContainerScrolling.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function useContainerScrolling(target: React.RefObject<HTMLElement | null>, callback?: () => void, disabled?: boolean): void;

package/hooks/useContainerScrolling.js

@@ -0,0 +1,17 @@
+import { useScroll } from '@laser-ui/hooks';
+import { useEffect, useRef } from 'react';
+export function useContainerScrolling(target, callback, disabled = false) {
+    const parentElements = useRef(new WeakSet());
+    useEffect(() => {
+        let el = target.current;
+        while (el) {
+            parentElements.current.add(el);
+            el = el.parentElement;
+        }
+    }, []);
+    useScroll(false, (e) => {
+        if (parentElements.current.has(e.target)) {
+            callback === null || callback === void 0 ? void 0 : callback();
+        }
+    }, disabled);
+}

package/internal/popup/Popup.js

@@ -1,10 +1,10 @@
 import { useAsync, useEvent, useRefExtra, useResize } from '@laser-ui/hooks';
 import { isUndefined } from 'lodash';
-import { cloneElement, useEffect, useRef } from 'react';
-import { useLayout, useListenGlobalScrolling } from '../../hooks';
+import { cloneElement, useRef } from 'react';
+import { useContainerScrolling, useLayout } from '../../hooks';
 export function Popup(props) {
     const { children, visible: visibleProp, trigger, disabled = false, mouseEnterDelay = 150, mouseLeaveDelay = 200, updatePosition, onVisibleChange, } = props;
-    const { pageScrollRef, contentResizeRef } = useLayout();
+    const { contentResizeRef } = useLayout();
     const windowRef = useRefExtra(() => window);
     const dataRef = useRef({});
     const async = useAsync();
@@ -42,23 +42,7 @@ export function Popup(props) {
             changeVisible();
         }
     };
-    const listenGlobalScrolling = useListenGlobalScrolling(updatePosition.fn, disabled || !visibleProp);
-    useEffect(() => {
-        if (!disabled && visibleProp && !listenGlobalScrolling) {
-            const els = [pageScrollRef, ...updatePosition.containerRefs].map((ref) => ref.current).filter((el) => el);
-            const listener = () => {
-                updatePosition.fn();
-            };
-            els.forEach((el) => {
-                el.addEventListener('scroll', listener, { passive: true });
-            });
-            return () => {
-                els.forEach((el) => {
-                    el.removeEventListener('scroll', listener, { passive: true });
-                });
-            };
-        }
-    });
+    useContainerScrolling(updatePosition.triggerRef, updatePosition.fn, disabled || updatePosition.scroll === false || !visibleProp);
     useResize(updatePosition.triggerRef, updatePosition.fn, undefined, disabled || !visibleProp);
     useResize(updatePosition.popupRef, updatePosition.fn, undefined, disabled || !visibleProp);
     useResize(contentResizeRef, updatePosition.fn, undefined, disabled || !visibleProp);

package/internal/popup/types.d.ts

@@ -15,7 +15,7 @@ export interface PopupProps {
         fn: () => void;
         triggerRef: React.RefObject<HTMLElement>;
         popupRef: React.RefObject<HTMLElement>;
-        containerRefs: React.RefObject<HTMLElement | null>[];
+        scroll?: boolean;
     };
     onVisibleChange: (visible: boolean) => void;
 }

package/menu/Menu.js

@@ -2,13 +2,13 @@ import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { findNested } from '@laser-ui/utils';
 import { isNull, isUndefined, nth } from 'lodash';
-import { Fragment, forwardRef, useId, useImperativeHandle, useRef, useState } from 'react';
+import { Fragment, forwardRef, useCallback, useId, useImperativeHandle, useRef, useState } from 'react';
 import { MenuGroup } from './internal/MenuGroup';
 import { MenuItem as MenuItemFC } from './internal/MenuItem';
 import { MenuSub } from './internal/MenuSub';
 import { checkEnableItem, getSameLevelEnableItems } from './utils';
 import { CLASSES } from './vars';
-import { useComponentProps, useControlled, useFocusVisible, useNamespace, useNestedPopup, useStyled } from '../hooks';
+import { useComponentProps, useContainerScrolling, useControlled, useFocusVisible, useNamespace, useNestedPopup, useStyled, } from '../hooks';
 import { CollapseTransition } from '../internal/transition';
 import { mergeCS } from '../utils';
 import { TTANSITION_DURING_BASE } from '../vars';
@@ -18,6 +18,7 @@ function MenuFC(props, ref) {
     const styled = useStyled(CLASSES, { menu: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.menu, 'menu-popup': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['menu-popup'] }, styleOverrides);
     const uniqueId = useId();
     const getItemId = (id) => `${namespace}-menu-item-${id}-${uniqueId}`;
+    const menuRef = useRef(null);
     const dataRef = useRef({
         mousedown: false,
         updatePosition: new Map(),
@@ -324,13 +325,13 @@ function MenuFC(props, ref) {
         };
         return getNodes(list, 0, [], true);
     })();
-    useImperativeHandle(ref, () => ({
-        updatePosition: () => {
-            for (const fn of dataRef.current.updatePosition.values()) {
-                fn();
-            }
-        },
-    }), []);
+    const updatePosition = useCallback(() => {
+        for (const fn of dataRef.current.updatePosition.values()) {
+            fn();
+        }
+    }, []);
+    useContainerScrolling(menuRef, updatePosition);
+    useImperativeHandle(ref, () => ({ updatePosition }), [updatePosition]);
     return (_jsx(CollapseTransition, { originalSize: {
             width,
         }, collapsedSize: {
@@ -342,7 +343,7 @@ function MenuFC(props, ref) {
             leaving: {
                 transition: ['width', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms linear`).join(', '),
             },
-        }, children: (menuRef, collapseStyle) => {
+        }, children: (collapseRef, collapseStyle) => {
             var _a;
             const preventBlur = (e) => {
                 if (document.activeElement === e.currentTarget && e.button === 0) {
@@ -354,7 +355,10 @@ function MenuFC(props, ref) {
             _jsx("nav", Object.assign({}, restProps, mergeCS(styled('menu', { 'menu--horizontal': mode === 'horizontal' }), {
                 className: restProps.className,
                 style: Object.assign(Object.assign(Object.assign({}, restProps.style), { width }), collapseStyle),
-            }), { ref: menuRef, tabIndex: (_a = restProps.tabIndex) !== null && _a !== void 0 ? _a : 0, role: "menubar", "aria-orientation": mode === 'horizontal' ? 'horizontal' : 'vertical', "aria-activedescendant": isUndefined(focusId) ? undefined : getItemId(focusId), onFocus: (e) => {
+            }), { ref: (el) => {
+                    collapseRef.current = el;
+                    menuRef.current = el;
+                }, tabIndex: (_a = restProps.tabIndex) !== null && _a !== void 0 ? _a : 0, role: "menubar", "aria-orientation": mode === 'horizontal' ? 'horizontal' : 'vertical', "aria-activedescendant": isUndefined(focusId) ? undefined : getItemId(focusId), onFocus: (e) => {
                     var _a;
                     (_a = restProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
                     if (!dataRef.current.mousedown) {

package/menu/internal/MenuSub.js

@@ -21,7 +21,7 @@ export const MenuSub = forwardRef((props, ref) => {
     const iconMode = mode === 'icon' && inNav;
     const transformOrigin = useRef();
     const updatePosition = useEventCallback(() => {
-        if (visible && popupRef.current && triggerRef.current) {
+        if (!(disabled || mode === 'vertical') && visible && popupRef.current && triggerRef.current) {
             const height = popupRef.current.offsetHeight;
             let width = popupRef.current.offsetWidth;
             if (inHorizontalNav) {
@@ -56,7 +56,7 @@ export const MenuSub = forwardRef((props, ref) => {
                     fn: updatePosition,
                     triggerRef,
                     popupRef,
-                    containerRefs: [],
+                    scroll: false,
                 }, onVisibleChange: onVisibleChange, children: ({ renderTrigger, renderPopup }) => (_jsxs(_Fragment, { children: [renderTrigger(_jsxs("li", Object.assign({}, mergeCS(styled('menu__item', 'menu__item--sub', {
                             'menu__item--horizontal': inHorizontalNav,
                             'menu__item--icon': iconMode,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laser-ui/components",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -40,5 +40,5 @@
     "access": "public",
     "directory": "../../dist/libs/components"
   },
-  "gitHead": "55a7ca519ecde41b605f3ec922e3b7d79eca8bae"
+  "gitHead": "5d76520ca057de8e9b23faa06ad88d5e7429d64d"
 }

package/popover/Popover.js

@@ -12,7 +12,7 @@ import { Portal } from '../internal/portal';
 import { Transition } from '../internal/transition';
 import { getPopupPosition, handleModalKeyDown, mergeCS } from '../utils';
 function PopoverFC(props, ref) {
-    const _a = useComponentProps('Popover', props), { children, styleOverrides, styleProvider, content, header: headerProp, footer, visible: visibleProp, defaultVisible, trigger: triggerProp = 'hover', placement: placementProp = 'top', placementFixed = false, arrow = true, escClosable = true, gap = 10, inWindow = false, mouseEnterDelay = 150, mouseLeaveDelay = 200, modal = false, skipFirstTransition = true, destroyAfterClose = true, zIndex: zIndexProp, scrolling, onVisibleChange, afterVisibleChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "content", "header", "footer", "visible", "defaultVisible", "trigger", "placement", "placementFixed", "arrow", "escClosable", "gap", "inWindow", "mouseEnterDelay", "mouseLeaveDelay", "modal", "skipFirstTransition", "destroyAfterClose", "zIndex", "scrolling", "onVisibleChange", "afterVisibleChange"]);
+    const _a = useComponentProps('Popover', props), { children, styleOverrides, styleProvider, content, header: headerProp, footer, visible: visibleProp, defaultVisible, trigger: triggerProp = 'hover', placement: placementProp = 'top', placementFixed = false, arrow = true, escClosable = true, gap = 10, inWindow = false, mouseEnterDelay = 150, mouseLeaveDelay = 200, modal = false, skipFirstTransition = true, destroyAfterClose = true, zIndex: zIndexProp, onVisibleChange, afterVisibleChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "content", "header", "footer", "visible", "defaultVisible", "trigger", "placement", "placementFixed", "arrow", "escClosable", "gap", "inWindow", "mouseEnterDelay", "mouseLeaveDelay", "modal", "skipFirstTransition", "destroyAfterClose", "zIndex", "onVisibleChange", "afterVisibleChange"]);
     const trigger = modal ? 'click' : triggerProp;
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { popover: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.popover }, styleOverrides);
@@ -24,7 +24,6 @@ function PopoverFC(props, ref) {
     const triggerRef = useRefExtra(() => document.getElementById(triggerId));
     const popoverRef = useRef(null);
     const popupRef = useRef(null);
-    const scrollingRef = useRefExtra(scrolling);
     const dataRef = useRef({
         prevActiveEl: null,
     });
@@ -75,7 +74,6 @@ function PopoverFC(props, ref) {
             fn: updatePosition,
             triggerRef,
             popupRef,
-            containerRefs: [scrollingRef],
         }, onVisibleChange: changeVisible, children: ({ renderTrigger, renderPopup }) => {
             const render = (el) => {
                 var _a;

package/popover/types.d.ts

@@ -2,7 +2,6 @@
 import type { CLASSES } from './vars';
 import type { ButtonProps } from '../button';
 import type { BaseProps, CloneHTMLElement, PopupPlacement } from '../types';
-import type { RefExtra } from '@laser-ui/hooks/useRefExtra';
 export {};
 export interface PopoverRef {
     updatePosition: () => void;
@@ -27,7 +26,6 @@ export interface PopoverProps extends BaseProps<'popover', typeof CLASSES>, Omit
     skipFirstTransition?: boolean;
     destroyAfterClose?: boolean;
     zIndex?: number | string;
-    scrolling?: RefExtra;
     onVisibleChange?: (visible: boolean) => void;
     afterVisibleChange?: (visible: boolean) => void;
 }

package/select/Select.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEvent, useEventCallback, useForkRef, useResize } from '@laser-ui/hooks';
+import { useEventCallback, useForkRef, useResize } from '@laser-ui/hooks';
 import { findNested, scrollIntoViewIfNeeded } from '@laser-ui/utils';
 import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
 import AddOutlined from '@material-design-icons/svg/outlined/add.svg?react';
@@ -15,7 +15,7 @@ import { BaseInput } from '../base-input';
 import { Checkbox } from '../checkbox';
 import { Dropdown } from '../dropdown';
 import { Empty } from '../empty';
-import { useComponentProps, useControlled, useDesign, useFocusVisible, useJSS, useLayout, useListenGlobalScrolling, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
+import { useComponentProps, useContainerScrolling, useControlled, useDesign, useFocusVisible, useJSS, useLayout, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
 import { Icon } from '../icon';
 import { CircularProgress } from '../internal/circular-progress';
 import { Portal } from '../internal/portal';
@@ -34,7 +34,7 @@ function SelectFC(props, ref) {
     const uniqueId = useId();
     const listId = `${namespace}-select-list-${uniqueId}`;
     const getItemId = (val) => `${namespace}-select-item-${val}-${uniqueId}`;
-    const { pageScrollRef, contentResizeRef } = useLayout();
+    const { contentResizeRef } = useLayout();
     const boxRef = useRef(null);
     const popupRef = useRef(null);
     const listRef = useRef(null);
@@ -217,8 +217,7 @@ function SelectFC(props, ref) {
             }
         }
     });
-    const listenGlobalScrolling = useListenGlobalScrolling(updatePosition, !visible);
-    useEvent(pageScrollRef, 'scroll', updatePosition, { passive: true }, !visible || listenGlobalScrolling);
+    useContainerScrolling(boxRef, updatePosition, !visible);
     useResize(boxRef, updatePosition, undefined, !visible);
     useResize(popupRef, updatePosition, undefined, !visible);
     useResize(contentResizeRef, updatePosition, undefined, !visible);

package/table/TableFilter.js

@@ -9,7 +9,7 @@ import { Icon } from '../icon';
 import { Input } from '../input';
 import { Popover } from '../popover';
 export function TableFilter(props) {
-    const _a = useComponentProps('TableFilter', props), { children, styleOverrides, styleProvider, content, footer, visible, placement = 'bottom-right', placementFixed = false, escClosable = true, gap, inWindow = false, searchable = false, searchValue, modal = false, destroyAfterClose = true, zIndex, scrolling, onVisibleChange, onSearch, onReset, afterVisibleChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "content", "footer", "visible", "placement", "placementFixed", "escClosable", "gap", "inWindow", "searchable", "searchValue", "modal", "destroyAfterClose", "zIndex", "scrolling", "onVisibleChange", "onSearch", "onReset", "afterVisibleChange"]);
+    const _a = useComponentProps('TableFilter', props), { children, styleOverrides, styleProvider, content, footer, visible, placement = 'bottom-right', placementFixed = false, escClosable = true, gap, inWindow = false, searchable = false, searchValue, modal = false, destroyAfterClose = true, zIndex, onVisibleChange, onSearch, onReset, afterVisibleChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "content", "footer", "visible", "placement", "placementFixed", "escClosable", "gap", "inWindow", "searchable", "searchValue", "modal", "destroyAfterClose", "zIndex", "onVisibleChange", "onSearch", "onReset", "afterVisibleChange"]);
     const styled = useStyled(CLASSES, { table: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.table }, styleOverrides);
     const { t } = useTranslation();
     return (_jsx(Popover, Object.assign({}, restProps, { children: children, content: _jsxs("div", Object.assign({}, styled('table__filter'), { children: [searchable && (_jsx(Input, { style: { display: 'flex' }, model: searchValue, prefix: _jsx(Icon, { children: _jsx(SearchOutlined, {}) }), placeholder: t('Search'), clearable: true, onModelChange: (value) => {
@@ -19,5 +19,5 @@ export function TableFilter(props) {
                         onReset === null || onReset === void 0 ? void 0 : onReset();
                     }, children: t('Table', 'Reset') }),
                 'ok',
-            ] })) : footer === false ? undefined : (footer), visible: visible, trigger: "click", placement: placement, placementFixed: placementFixed, arrow: false, escClosable: escClosable, gap: gap, inWindow: inWindow, modal: modal, destroyAfterClose: destroyAfterClose, zIndex: zIndex, scrolling: scrolling, onVisibleChange: onVisibleChange, afterVisibleChange: afterVisibleChange })));
+            ] })) : footer === false ? undefined : (footer), visible: visible, trigger: "click", placement: placement, placementFixed: placementFixed, arrow: false, escClosable: escClosable, gap: gap, inWindow: inWindow, modal: modal, destroyAfterClose: destroyAfterClose, zIndex: zIndex, onVisibleChange: onVisibleChange, afterVisibleChange: afterVisibleChange })));
 }

package/table/types.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { CLASSES } from './vars';
 import type { BaseProps, CloneHTMLElement, PopupPlacement } from '../types';
-import type { RefExtra } from '@laser-ui/hooks/useRefExtra';
 export {};
 export interface TableContextData {
     fixed: ('left' | 'right')[];
@@ -55,7 +54,6 @@ export interface TableFilterProps extends BaseProps<'table', typeof CLASSES>, Om
     modal?: boolean;
     destroyAfterClose?: boolean;
     zIndex?: number | string;
-    scrolling?: RefExtra;
     onVisibleChange?: (visible: boolean) => void;
     onSearch?: (value: string) => void;
     onReset?: () => void;

package/time-picker/TimePicker.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAsync, useEvent, useEventCallback, useForceUpdate, useForkRef, useImmer, useResize } from '@laser-ui/hooks';
+import { useAsync, useEventCallback, useForceUpdate, useForkRef, useImmer, useResize } from '@laser-ui/hooks';
 import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
 import AccessTimeOutlined from '@material-design-icons/svg/outlined/access_time.svg?react';
 import SwapHorizOutlined from '@material-design-icons/svg/outlined/swap_horiz.svg?react';
@@ -12,7 +12,7 @@ import { CLASSES } from './vars';
 import { BaseInput } from '../base-input';
 import { Button } from '../button';
 import dayjs from '../dayjs';
-import { useComponentProps, useControlled, useDesign, useJSS, useLayout, useListenGlobalScrolling, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
+import { useComponentProps, useContainerScrolling, useControlled, useDesign, useJSS, useLayout, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
 import { Icon } from '../icon';
 import { Portal } from '../internal/portal';
 import { Transition } from '../internal/transition';
@@ -28,7 +28,7 @@ export const TimePicker = forwardRef((props, ref) => {
     const { t } = useTranslation();
     const forceUpdate = useForceUpdate();
     const async = useAsync();
-    const { pageScrollRef, contentResizeRef } = useLayout();
+    const { contentResizeRef } = useLayout();
     const boxRef = useRef(null);
     const popupRef = useRef(null);
     const inputLeftRef = useRef(null);
@@ -128,8 +128,7 @@ export const TimePicker = forwardRef((props, ref) => {
             popupRef.current.classList.toggle(sheet.classes.position, true);
         }
     });
-    const listenGlobalScrolling = useListenGlobalScrolling(updatePosition, !visible);
-    useEvent(pageScrollRef, 'scroll', updatePosition, { passive: true }, !visible || listenGlobalScrolling);
+    useContainerScrolling(boxRef, updatePosition, !visible);
     useResize(boxRef, updatePosition, undefined, !visible);
     useResize(popupRef, updatePosition, undefined, !visible);
     useResize(contentResizeRef, updatePosition, undefined, !visible);

package/tooltip/Tooltip.js

@@ -11,7 +11,7 @@ import { Transition } from '../internal/transition';
 import { getPopupPosition, mergeCS } from '../utils';
 export const Tooltip = forwardRef((props, ref) => {
     var _a;
-    const _b = useComponentProps('Tooltip', props), { children, styleOverrides, styleProvider, title, visible: visibleProp, defaultVisible, trigger = 'hover', placement: placementProp = 'top', placementFixed = false, arrow = true, escClosable = true, gap = 10, inWindow = false, mouseEnterDelay = 150, mouseLeaveDelay = 200, skipFirstTransition = true, destroyAfterClose = true, zIndex: zIndexProp, scrolling, onVisibleChange, afterVisibleChange } = _b, restProps = __rest(_b, ["children", "styleOverrides", "styleProvider", "title", "visible", "defaultVisible", "trigger", "placement", "placementFixed", "arrow", "escClosable", "gap", "inWindow", "mouseEnterDelay", "mouseLeaveDelay", "skipFirstTransition", "destroyAfterClose", "zIndex", "scrolling", "onVisibleChange", "afterVisibleChange"]);
+    const _b = useComponentProps('Tooltip', props), { children, styleOverrides, styleProvider, title, visible: visibleProp, defaultVisible, trigger = 'hover', placement: placementProp = 'top', placementFixed = false, arrow = true, escClosable = true, gap = 10, inWindow = false, mouseEnterDelay = 150, mouseLeaveDelay = 200, skipFirstTransition = true, destroyAfterClose = true, zIndex: zIndexProp, onVisibleChange, afterVisibleChange } = _b, restProps = __rest(_b, ["children", "styleOverrides", "styleProvider", "title", "visible", "defaultVisible", "trigger", "placement", "placementFixed", "arrow", "escClosable", "gap", "inWindow", "mouseEnterDelay", "mouseLeaveDelay", "skipFirstTransition", "destroyAfterClose", "zIndex", "onVisibleChange", "afterVisibleChange"]);
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { tooltip: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.tooltip }, styleOverrides);
     const sheet = useJSS();
@@ -19,7 +19,6 @@ export const Tooltip = forwardRef((props, ref) => {
     const id = (_a = restProps.id) !== null && _a !== void 0 ? _a : `${namespace}-tooltip-${uniqueId}`;
     const triggerRef = useRefExtra(() => document.querySelector(`[aria-describedby="${id}"]`));
     const tooltipRef = useRef(null);
-    const scrollingRef = useRefExtra(scrolling);
     const [visible, changeVisible] = useControlled(defaultVisible !== null && defaultVisible !== void 0 ? defaultVisible : false, visibleProp, onVisibleChange);
     const maxZIndex = useMaxIndex(visible);
     const zIndex = !isUndefined(zIndexProp) ? zIndexProp : `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
@@ -55,7 +54,6 @@ export const Tooltip = forwardRef((props, ref) => {
             fn: updatePosition,
             triggerRef,
             popupRef: tooltipRef,
-            containerRefs: [scrollingRef],
         }, onVisibleChange: changeVisible, children: ({ renderTrigger, renderPopup }) => {
             const render = (el) => renderTrigger(cloneElement(el, {
                 'aria-describedby': id,

package/tooltip/types.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { CLASSES } from './vars';
 import type { BaseProps, CloneHTMLElement, PopupPlacement } from '../types';
-import type { RefExtra } from '@laser-ui/hooks/useRefExtra';
 export {};
 export interface TooltipRef {
     updatePosition: () => void;
@@ -23,7 +22,6 @@ export interface TooltipProps extends BaseProps<'tooltip', typeof CLASSES>, Omit
     skipFirstTransition?: boolean;
     destroyAfterClose?: boolean;
     zIndex?: number | string;
-    scrolling?: RefExtra;
     onVisibleChange?: (visible: boolean) => void;
     afterVisibleChange?: (visible: boolean) => void;
 }

package/tree-select/TreeSelect.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEvent, useEventCallback, useForkRef, useResize } from '@laser-ui/hooks';
+import { useEventCallback, useForkRef, useResize } from '@laser-ui/hooks';
 import { findNested } from '@laser-ui/utils';
 import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
 import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
@@ -12,7 +12,7 @@ import { TreeSelectSearchPanel } from './internal/TreeSelectSearchPanel';
 import { CLASSES } from './vars';
 import { BaseInput } from '../base-input';
 import { Dropdown } from '../dropdown';
-import { useComponentProps, useControlled, useDesign, useFocusVisible, useJSS, useLayout, useListenGlobalScrolling, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
+import { useComponentProps, useContainerScrolling, useControlled, useDesign, useFocusVisible, useJSS, useLayout, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
 import { Icon } from '../icon';
 import { CircularProgress } from '../internal/circular-progress';
 import { Portal } from '../internal/portal';
@@ -42,7 +42,7 @@ function TreeSelectFC(props, ref) {
     const uniqueId = useId();
     const listId = `${namespace}-tree-select-list-${uniqueId}`;
     const getItemId = (val) => `${namespace}-tree-select-item-${val}-${uniqueId}`;
-    const { pageScrollRef, contentResizeRef } = useLayout();
+    const { contentResizeRef } = useLayout();
     const boxRef = useRef(null);
     const popupRef = useRef(null);
     const inputRef = useRef(null);
@@ -203,8 +203,7 @@ function TreeSelectFC(props, ref) {
             popupRef.current.classList.toggle(sheet.classes.position, true);
         }
     });
-    const listenGlobalScrolling = useListenGlobalScrolling(updatePosition, !visible);
-    useEvent(pageScrollRef, 'scroll', updatePosition, { passive: true }, !visible || listenGlobalScrolling);
+    useContainerScrolling(boxRef, updatePosition, !visible);
     useResize(boxRef, updatePosition, undefined, !visible);
     useResize(popupRef, updatePosition, undefined, !visible);
     useResize(contentResizeRef, updatePosition, undefined, !visible);

package/hooks/useListenGlobalScrolling.d.ts

@@ -1 +0,0 @@
-export declare function useListenGlobalScrolling(callback?: () => void, disabled?: boolean): boolean;

package/hooks/useListenGlobalScrolling.js

@@ -1,9 +0,0 @@
-import { useEvent, useRefExtra } from '@laser-ui/hooks';
-import { useContext } from 'react';
-import { LContext } from '../context';
-export function useListenGlobalScrolling(callback, disabled = false) {
-    const context = useContext(LContext);
-    const windowRef = useRefExtra(() => window);
-    useEvent(windowRef, 'scroll', callback, { passive: true, capture: true }, !context.listenGlobalScrolling || disabled);
-    return context.listenGlobalScrolling;
-}