@laser-ui/components 2.0.5 → 2.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.
 
+## [2.1.1](https://github.com/laser-ui/laser-ui/compare/v2.1.0...v2.1.1) (2025-06-16)
+
+### Bug Fixes
+
+- fix zindex increment ([4ebc565](https://github.com/laser-ui/laser-ui/commit/4ebc565b3a3a645a0ae587e49d58a420c8c47286))
+
+# [2.1.0](https://github.com/laser-ui/laser-ui/compare/v2.0.5...v2.1.0) (2025-06-09)
+
+### Features
+
+- **components:** support prevent close dialog ([6431830](https://github.com/laser-ui/laser-ui/commit/6431830b84ad26d3985f634b52e348f959eac674))
+
 ## [2.0.5](https://github.com/laser-ui/laser-ui/compare/v2.0.4...v2.0.5) (2025-01-13)
 
 ### Features

package/cascader/Cascader.js

@@ -14,7 +14,7 @@ import { CLASSES } from './vars';
 import { BaseInput } from '../base-input';
 import { CircularProgress } from '../circular-progress';
 import { Dropdown } from '../dropdown';
-import { useComponentProps, useContainerScrolling, useControlled, useDesign, useFocusVisible, useLayout, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
+import { useComponentProps, useContainerScrolling, useControlled, useDesign, useFocusVisible, useLayout, useNamespace, useScopedProps, useStyled, useTranslation, useZIndex, } from '../hooks';
 import { Icon } from '../icon';
 import { Portal } from '../internal/portal';
 import { ROOT_DATA } from '../root/vars';
@@ -174,8 +174,8 @@ export function Cascader(props) {
             return findNested(searchList, (item) => item[TREE_NODE_KEY].enabled);
         }
     })();
-    const maxZIndex = useMaxIndex(visible);
-    const zIndex = `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
+    const zIndexValue = useZIndex(visible);
+    const zIndex = `calc(var(--${namespace}-zindex-fixed) + ${zIndexValue})`;
     const updatePosition = useEventCallback(() => {
         if (visible && boxRef.current && popupRef.current) {
             const height = popupRef.current.offsetHeight;

package/date-picker/DatePicker.js

@@ -13,7 +13,7 @@ import { CLASSES } from './vars';
 import { BaseInput } from '../base-input';
 import { Button } from '../button';
 import dayjs from '../dayjs';
-import { useComponentProps, useContainerScrolling, useControlled, useDesign, useLayout, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
+import { useComponentProps, useContainerScrolling, useControlled, useDesign, useLayout, useNamespace, useScopedProps, useStyled, useTranslation, useZIndex, } from '../hooks';
 import { Icon } from '../icon';
 import { Portal } from '../internal/portal';
 import { ROOT_DATA } from '../root/vars';
@@ -115,8 +115,8 @@ export function DatePicker(props) {
         ? ((_b = placeholder) !== null && _b !== void 0 ? _b : [])
         : [placeholder];
     const { size, disabled } = useScopedProps({ size: sizeProp, disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
-    const maxZIndex = useMaxIndex(visible);
-    const zIndex = `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
+    const zIndexValue = useZIndex(visible);
+    const zIndex = `calc(var(--${namespace}-zindex-fixed) + ${zIndexValue})`;
     const updatePosition = useEventCallback(() => {
         if (visible && boxRef.current && popupRef.current) {
             const height = popupRef.current.offsetHeight;

package/dialog-service.d.ts

@@ -4,6 +4,7 @@ export declare class DialogInstance<P extends object> {
     private type;
     private props;
     private service;
+    visible: boolean;
     get node(): React.ReactElement<P>;
     constructor(key: string | number, type: React.FC<P>, props: any, service: DialogService);
     rerender(props: Partial<P>): void;
@@ -11,8 +12,8 @@ export declare class DialogInstance<P extends object> {
 }
 export declare class DialogService {
     private _key;
-    private _dialogs;
     private _emitChange;
+    dialogs: DialogInstance<any>[];
     constructor(emitChange: (dialogs: DialogInstance<any>[]) => void);
     open<P extends object>(type: React.FC<P>, props: Omit<P, 'visible'>, key?: string | number): DialogInstance<P>;
     emitChange(key: string | number): void;

package/dialog-service.js

@@ -1,8 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export class DialogInstance {
     get node() {
+        var _a;
         const Type = this.type;
-        return _jsx(Type, Object.assign({}, this.props), this.key);
+        return (_jsx(Type, Object.assign({}, this.props, { visible: this.visible, skipFirstTransition: (_a = this.props.skipFirstTransition) !== null && _a !== void 0 ? _a : false, onClose: () => {
+                var _a, _b;
+                const res = (_b = (_a = this.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+                if (res !== false) {
+                    this.close();
+                }
+            }, afterVisibleChange: (visible) => {
+                var _a, _b;
+                (_b = (_a = this.props).afterVisibleChange) === null || _b === void 0 ? void 0 : _b.call(_a, visible);
+                if (!visible) {
+                    const index = this.service.dialogs.findIndex((dialog) => dialog.key === this.key);
+                    if (index !== -1) {
+                        this.service.dialogs.splice(index, 1);
+                    }
+                    this.service.emitChange(this.key);
+                }
+            } }), this.key));
     }
     constructor(key, type, props, service) {
         Object.defineProperty(this, "key", {
@@ -29,13 +46,19 @@ export class DialogInstance {
             writable: true,
             value: service
         });
+        Object.defineProperty(this, "visible", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
     }
     rerender(props) {
         Object.assign(this.props, props);
         this.service.emitChange(this.key);
     }
     close() {
-        this.props.visible = false;
+        this.visible = false;
         this.service.emitChange(this.key);
     }
 }
@@ -47,62 +70,43 @@ export class DialogService {
             writable: true,
             value: -1
         });
-        Object.defineProperty(this, "_dialogs", {
+        Object.defineProperty(this, "_emitChange", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: []
+            value: void 0
         });
-        Object.defineProperty(this, "_emitChange", {
+        Object.defineProperty(this, "dialogs", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: []
         });
         this._emitChange = () => {
-            emitChange([].concat(this._dialogs));
+            emitChange([].concat(this.dialogs));
         };
     }
     open(type, props, key) {
         const dialogKey = key !== null && key !== void 0 ? key : `l_#${++this._key}`;
-        const dialogProps = Object.assign(Object.assign({}, props), { visible: true, skipFirstTransition: false, onClose: () => {
-                var _a, _b;
-                (_b = (_a = props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
-                const index = this._dialogs.findIndex((dialog) => dialog.key === dialogKey);
-                if (index !== -1) {
-                    const instance = this._dialogs[index];
-                    instance.close();
-                }
-            }, afterVisibleChange: (visible) => {
-                var _a, _b;
-                (_b = (_a = props).afterVisibleChange) === null || _b === void 0 ? void 0 : _b.call(_a, visible);
-                if (!visible) {
-                    const index = this._dialogs.findIndex((dialog) => dialog.key === dialogKey);
-                    if (index !== -1) {
-                        this._dialogs.splice(index, 1);
-                        this._emitChange();
-                    }
-                }
-            } });
-        const instance = new DialogInstance(dialogKey, type, dialogProps, this);
-        this._dialogs.push(instance);
+        const instance = new DialogInstance(dialogKey, type, props, this);
+        this.dialogs.push(instance);
         this._emitChange();
         return instance;
     }
     emitChange(key) {
-        const index = this._dialogs.findIndex((dialog) => dialog.key === key);
+        const index = this.dialogs.findIndex((dialog) => dialog.key === key);
         if (index !== -1) {
             this._emitChange();
         }
     }
     closeAll(animation = true) {
         if (animation) {
-            this._dialogs.forEach((dialog) => {
+            this.dialogs.forEach((dialog) => {
                 dialog.close();
             });
         }
         else {
-            this._dialogs = [];
+            this.dialogs = [];
             this._emitChange();
         }
     }

package/drawer/Drawer.js

@@ -5,7 +5,7 @@ import { use, useId, useRef, useState } from 'react';
 import { DrawerFooter } from './DrawerFooter';
 import { DrawerHeader } from './DrawerHeader';
 import { CLASSES, DrawerContext } from './vars';
-import { useComponentProps, useLockScroll, useMaxIndex, useNamespace, useStyled } from '../hooks';
+import { useComponentProps, useLockScroll, useNamespace, useStyled, useZIndex } from '../hooks';
 import { LazyLoading } from '../internal/lazy-loading';
 import { Portal } from '../internal/portal';
 import { Mask } from '../mask';
@@ -38,12 +38,12 @@ export const Drawer = (props) => {
         }
     };
     const [offset, setOffset] = useState(0);
-    const maxZIndex = useMaxIndex(visible);
+    const zIndexValue = useZIndex(visible);
     const zIndex = !isUndefined(zIndexProp)
         ? zIndexProp
         : !isFixed
             ? `var(--${namespace}-zindex-absolute)`
-            : `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
+            : `calc(var(--${namespace}-zindex-fixed) + ${zIndexValue})`;
     useLockScroll(isFixed && visible);
     return (_jsx(Portal, { selector: isUndefined(container)
             ? () => {

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, useContainerScrolling, useControlled, useFocusVisible, useMaxIndex, useNamespace, useNestedPopup, useStyled, useTranslation, } from '../hooks';
+import { useComponentProps, useContainerScrolling, useControlled, useFocusVisible, useNamespace, useNestedPopup, useStyled, useTranslation, useZIndex, } from '../hooks';
 import { Popup } from '../internal/popup';
 import { Portal } from '../internal/portal';
 import { Separator } from '../separator';
@@ -87,8 +87,8 @@ export function Dropdown(props) {
         reduceArr(list);
         setFocusIds(ids);
     };
-    const maxZIndex = useMaxIndex(visible);
-    const zIndex = !isUndefined(zIndexProp) ? zIndexProp : `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
+    const zIndexValue = useZIndex(visible);
+    const zIndex = !isUndefined(zIndexProp) ? zIndexProp : `calc(var(--${namespace}-zindex-fixed) + ${zIndexValue})`;
     const placement = useRef(placementProp);
     const updatePosition = useEventCallback(() => {
         if (visible && triggerRef.current && dropdownRef.current && popupRef.current) {

package/hooks/index.d.ts

@@ -6,9 +6,9 @@ export { useDialogService } from './useDialogService';
 export { useFocusVisible } from './useFocusVisible';
 export { useLayout } from './useLayout';
 export { useLockScroll } from './useLockScroll';
-export { useMaxIndex } from './useMaxIndex';
 export { useNamespace } from './useNamespace';
 export { useNestedPopup } from './useNestedPopup';
 export { useScopedProps } from './useScopedProps';
 export { useStyled } from './useStyled';
 export { useTranslation } from './useTranslation';
+export { useZIndex } from './useZIndex';

package/hooks/index.js

@@ -6,9 +6,9 @@ export { useDialogService } from './useDialogService';
 export { useFocusVisible } from './useFocusVisible';
 export { useLayout } from './useLayout';
 export { useLockScroll } from './useLockScroll';
-export { useMaxIndex } from './useMaxIndex';
 export { useNamespace } from './useNamespace';
 export { useNestedPopup } from './useNestedPopup';
 export { useScopedProps } from './useScopedProps';
 export { useStyled } from './useStyled';
 export { useTranslation } from './useTranslation';
+export { useZIndex } from './useZIndex';

package/hooks/useZIndex.d.ts

@@ -0,0 +1 @@
+export declare function useZIndex(visible: boolean): number;

package/hooks/useZIndex.js

@@ -0,0 +1,22 @@
+import { useUnmount } from '@laser-ui/hooks';
+import { useRef } from 'react';
+let ZINDEX = [];
+export function useZIndex(visible) {
+    var _a;
+    const previousVisible = useRef(false);
+    const zIndex = useRef(0);
+    if (visible !== previousVisible.current) {
+        previousVisible.current = visible;
+        if (visible) {
+            zIndex.current = ((_a = ZINDEX[ZINDEX.length - 1]) !== null && _a !== void 0 ? _a : 0) + 1;
+            ZINDEX.push(zIndex.current);
+        }
+        else {
+            ZINDEX = ZINDEX.filter((val) => val !== zIndex.current);
+        }
+    }
+    useUnmount(() => {
+        ZINDEX = ZINDEX.filter((z) => z !== zIndex.current);
+    });
+    return zIndex.current;
+}

package/image/ImagePreview.js

@@ -12,7 +12,7 @@ import { isNull, isUndefined } from 'lodash';
 import { useRef, useState } from 'react';
 import { PREVIEW_CLASSES } from './vars';
 import { Button } from '../button';
-import { useComponentProps, useControlled, useLockScroll, useMaxIndex, useNamespace, useStyled } from '../hooks';
+import { useComponentProps, useControlled, useLockScroll, useNamespace, useStyled, useZIndex } from '../hooks';
 import { Icon } from '../icon';
 import { Input } from '../input';
 import { Portal } from '../internal/portal';
@@ -49,8 +49,8 @@ export function ImagePreview(props) {
     startIndex = Math.max(endIndex - offset * 2, 0);
     const [isDragging, setIsDragging] = useState(false);
     const listenDragEvent = visible && isDragging;
-    const maxZIndex = useMaxIndex(visible);
-    const zIndex = !isUndefined(zIndexProp) ? zIndexProp : `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
+    const zIndexValue = useZIndex(visible);
+    const zIndex = !isUndefined(zIndexProp) ? zIndexProp : `calc(var(--${namespace}-zindex-fixed) + ${zIndexValue})`;
     useLockScroll(visible);
     const setTransform = (update, scaleByClick = false) => {
         var _a, _b;

package/menu/internal/MenuSub.js

@@ -3,7 +3,7 @@ import { useEventCallback } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
 import { isUndefined } from 'lodash';
 import { useImperativeHandle, useRef } from 'react';
-import { useMaxIndex, useTranslation } from '../../hooks';
+import { useTranslation, useZIndex } from '../../hooks';
 import { Popup } from '../../internal/popup';
 import { Portal } from '../../internal/portal';
 import { CollapseTransition, Transition } from '../../transition';
@@ -42,7 +42,8 @@ export function MenuSub(props) {
             popupRef.current.style.width = inHorizontalNav ? width + 'px' : '';
         }
     });
-    const maxZIndex = useMaxIndex(visible);
+    const zIndexValue = useZIndex(visible);
+    const zIndex = `calc(var(--${namespace}-zindex-fixed) + ${zIndexValue})`;
     useImperativeHandle(ref, () => updatePosition, [updatePosition]);
     return (_jsxs(_Fragment, { children: [_jsx(Popup, { visible: popupState !== null && popupState !== void 0 ? popupState : false, trigger: trigger, disabled: disabled || mode === 'vertical', updatePosition: {
                     fn: updatePosition,
@@ -78,7 +79,7 @@ export function MenuSub(props) {
                                 }
                                 return el;
                             }, children: _jsx(Transition, { enter: visible, name: `${namespace}-popup-down`, duration: TTANSITION_DURING_POPUP, onSkipEnter: updatePosition, onBeforeEnter: updatePosition, children: (transitionRef, leaved) => (_jsx("div", Object.assign({}, mergeCS(styled('menu-popup'), {
-                                    style: Object.assign(Object.assign({ zIndex: `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})` }, (inHorizontalNav ? undefined : { '--popup-down-scale': 0.01, minWidth: 160 })), (leaved ? { display: 'none' } : undefined)),
+                                    style: Object.assign(Object.assign({ zIndex }, (inHorizontalNav ? undefined : { '--popup-down-scale': 0.01, minWidth: 160 })), (leaved ? { display: 'none' } : undefined)),
                                 }), { ref: (instance) => {
                                         popupRef.current = instance;
                                         transitionRef(instance);

package/modal/Modal.js

@@ -6,7 +6,7 @@ import { ModalAlert } from './ModalAlert';
 import { ModalFooter } from './ModalFooter';
 import { ModalHeader } from './ModalHeader';
 import { CLASSES, ModalContext } from './vars';
-import { useComponentProps, useLockScroll, useMaxIndex, useNamespace, useStyled } from '../hooks';
+import { useComponentProps, useLockScroll, useNamespace, useStyled, useZIndex } from '../hooks';
 import { LazyLoading } from '../internal/lazy-loading';
 import { Portal } from '../internal/portal';
 import { Mask } from '../mask';
@@ -24,8 +24,8 @@ export const Modal = (props) => {
     const uniqueId = useId();
     const titleId = `${namespace}-modal-title-${uniqueId}`;
     const bodyId = `${namespace}-modal-content-${uniqueId}`;
-    const maxZIndex = useMaxIndex(visible);
-    const zIndex = !isUndefined(zIndexProp) ? zIndexProp : `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
+    const zIndexValue = useZIndex(visible);
+    const zIndex = !isUndefined(zIndexProp) ? zIndexProp : `calc(var(--${namespace}-zindex-fixed) + ${zIndexValue})`;
     useLockScroll(visible);
     return (_jsx(Portal, { selector: () => {
             let el = document.getElementById(`${namespace}-modal-root`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laser-ui/components",
-  "version": "2.0.5",
+  "version": "2.1.1",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -37,5 +37,5 @@
     "access": "public",
     "directory": "../../dist/libs/components"
   },
-  "gitHead": "fb803f4dd41dc2ce86f4aa34aefa67255424942e"
+  "gitHead": "2d2d855edaebaab9445064d804a50175a0408b2d"
 }

package/popover/Popover.js

@@ -6,7 +6,7 @@ import { useId, useImperativeHandle, useRef } from 'react';
 import { PopoverFooter } from './PopoverFooter';
 import { PopoverHeader } from './PopoverHeader';
 import { CLASSES, PopoverContext, TTANSITION_DURING } from './vars';
-import { useComponentProps, useControlled, useLockScroll, useMaxIndex, useNamespace, useStyled } from '../hooks';
+import { useComponentProps, useControlled, useLockScroll, useNamespace, useStyled, useZIndex } from '../hooks';
 import { LazyLoading } from '../internal/lazy-loading';
 import { Popup } from '../internal/popup';
 import { Portal } from '../internal/portal';
@@ -26,8 +26,8 @@ export const Popover = (props) => {
     const popupRef = useRef(null);
     const prevActiveEl = useRef(null);
     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})`;
+    const zIndexValue = useZIndex(visible);
+    const zIndex = !isUndefined(zIndexProp) ? zIndexProp : `calc(var(--${namespace}-zindex-fixed) + ${zIndexValue})`;
     const placement = useRef(placementProp);
     const updatePosition = useEventCallback(() => {
         if (visible && triggerRef.current && popoverRef.current && popupRef.current) {

package/select/Select.js

@@ -16,7 +16,7 @@ import { Checkbox } from '../checkbox';
 import { CircularProgress } from '../circular-progress';
 import { Dropdown } from '../dropdown';
 import { Empty } from '../empty';
-import { useComponentProps, useContainerScrolling, useControlled, useDesign, useFocusVisible, useLayout, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
+import { useComponentProps, useContainerScrolling, useControlled, useDesign, useFocusVisible, useLayout, useNamespace, useScopedProps, useStyled, useTranslation, useZIndex, } from '../hooks';
 import { Icon } from '../icon';
 import { Portal } from '../internal/portal';
 import { ROOT_DATA } from '../root/vars';
@@ -169,8 +169,8 @@ export function Select(props) {
             onCreateItem === null || onCreateItem === void 0 ? void 0 : onCreateItem(newItem);
         }
     };
-    const maxZIndex = useMaxIndex(visible);
-    const zIndex = `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
+    const zIndexValue = useZIndex(visible);
+    const zIndex = `calc(var(--${namespace}-zindex-fixed) + ${zIndexValue})`;
     const updatePosition = useEventCallback(() => {
         if (visible && boxRef.current && popupRef.current) {
             if (monospaced) {

package/time-picker/TimePicker.js

@@ -13,7 +13,7 @@ import { CLASSES } from './vars';
 import { BaseInput } from '../base-input';
 import { Button } from '../button';
 import dayjs from '../dayjs';
-import { useComponentProps, useContainerScrolling, useControlled, useDesign, useLayout, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
+import { useComponentProps, useContainerScrolling, useControlled, useDesign, useLayout, useNamespace, useScopedProps, useStyled, useTranslation, useZIndex, } from '../hooks';
 import { Icon } from '../icon';
 import { Portal } from '../internal/portal';
 import { ROOT_DATA } from '../root/vars';
@@ -102,8 +102,8 @@ export function TimePicker(props) {
         ? ((_b = placeholder) !== null && _b !== void 0 ? _b : [])
         : [placeholder];
     const { size, disabled } = useScopedProps({ size: sizeProp, disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
-    const maxZIndex = useMaxIndex(visible);
-    const zIndex = `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
+    const zIndexValue = useZIndex(visible);
+    const zIndex = `calc(var(--${namespace}-zindex-fixed) + ${zIndexValue})`;
     const updatePosition = useEventCallback(() => {
         if (visible && boxRef.current && popupRef.current) {
             const height = popupRef.current.offsetHeight;

package/tooltip/Tooltip.js

@@ -4,7 +4,7 @@ import { useEventCallback, useRefExtra } from '@laser-ui/hooks';
 import { isUndefined } from 'lodash';
 import { useId, useImperativeHandle, useRef } from 'react';
 import { CLASSES, TTANSITION_DURING } from './vars';
-import { useComponentProps, useControlled, useMaxIndex, useNamespace, useStyled } from '../hooks';
+import { useComponentProps, useControlled, useNamespace, useStyled, useZIndex } from '../hooks';
 import { LazyLoading } from '../internal/lazy-loading';
 import { Popup } from '../internal/popup';
 import { Portal } from '../internal/portal';
@@ -20,8 +20,8 @@ export function Tooltip(props) {
     const triggerRef = useRefExtra(() => document.querySelector(`[aria-describedby="${id}"]`));
     const tooltipRef = useRef(null);
     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})`;
+    const zIndexValue = useZIndex(visible);
+    const zIndex = !isUndefined(zIndexProp) ? zIndexProp : `calc(var(--${namespace}-zindex-fixed) + ${zIndexValue})`;
     const placement = useRef(placementProp);
     const updatePosition = useEventCallback(() => {
         if (visible && triggerRef.current && tooltipRef.current) {

package/tree-select/TreeSelect.js

@@ -13,7 +13,7 @@ import { CLASSES } from './vars';
 import { BaseInput } from '../base-input';
 import { CircularProgress } from '../circular-progress';
 import { Dropdown } from '../dropdown';
-import { useComponentProps, useContainerScrolling, useControlled, useDesign, useFocusVisible, useLayout, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
+import { useComponentProps, useContainerScrolling, useControlled, useDesign, useFocusVisible, useLayout, useNamespace, useScopedProps, useStyled, useTranslation, useZIndex, } from '../hooks';
 import { Icon } from '../icon';
 import { Portal } from '../internal/portal';
 import { ROOT_DATA } from '../root/vars';
@@ -173,8 +173,8 @@ export function TreeSelect(props) {
             return findNested(searchList, (item) => item[TREE_NODE_KEY].enabled);
         }
     })();
-    const maxZIndex = useMaxIndex(visible);
-    const zIndex = `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
+    const zIndexValue = useZIndex(visible);
+    const zIndex = `calc(var(--${namespace}-zindex-fixed) + ${zIndexValue})`;
     const updatePosition = useEventCallback(() => {
         if (visible && boxRef.current && popupRef.current) {
             const boxWidth = boxRef.current.offsetWidth;

package/hooks/useMaxIndex.d.ts

@@ -1 +0,0 @@
-export declare function useMaxIndex(visible: boolean): number;

package/hooks/useMaxIndex.js

@@ -1,24 +0,0 @@
-import { useUnmount } from '@laser-ui/hooks';
-import { nth } from 'lodash';
-import { useMemo, useRef } from 'react';
-let ZINDEX = [];
-export function useMaxIndex(visible) {
-    const zIndex = useRef(0);
-    const maxZIndex = useMemo(() => {
-        var _a;
-        if (visible) {
-            const z = ((_a = nth(ZINDEX, -1)) !== null && _a !== void 0 ? _a : 0) + 1;
-            zIndex.current = z;
-            ZINDEX.push(z);
-            return z;
-        }
-        else {
-            ZINDEX = ZINDEX.filter((z) => z !== zIndex.current);
-            return zIndex.current;
-        }
-    }, [visible]);
-    useUnmount(() => {
-        ZINDEX = ZINDEX.filter((z) => z !== zIndex.current);
-    });
-    return maxZIndex;
-}