@laser-ui/components 2.1.2 → 2.2.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.2.0](https://github.com/laser-ui/laser-ui/compare/v2.1.3...v2.2.0) (2025-06-23)
+
+### Bug Fixes
+
+- **components:** update `listSize` of `VirtualScroll` ([a38d857](https://github.com/laser-ui/laser-ui/commit/a38d85779850d6f58aeffc55cd8c2be93a0f921c))
+
+### Features
+
+- **components:** dropdown support virtual scroll ([3e64aac](https://github.com/laser-ui/laser-ui/commit/3e64aac4a5f2819122600c97e18fd37d2aee50f9))
+
+## [2.1.3](https://github.com/laser-ui/laser-ui/compare/v2.1.2...v2.1.3) (2025-06-16)
+
+### Bug Fixes
+
+- **components:** fix zindex ([cedfd1b](https://github.com/laser-ui/laser-ui/commit/cedfd1b5f244d6433215e5b4eaf3c79aae4440de))
+
 ## [2.1.2](https://github.com/laser-ui/laser-ui/compare/v2.1.1...v2.1.2) (2025-06-16)
 
 ### Bug Fixes

package/cascader/Cascader.js

@@ -224,7 +224,7 @@ export function Cascader(props) {
                     title: label,
                     type: 'item',
                     disabled: node === null || node === void 0 ? void 0 : node.origin.disabled,
-                })), onClick: (id) => {
+                })), virtual: virtual, onClick: (id) => {
                     changeSelected((draft) => {
                         draft.splice(draft.findIndex((v) => v === id), 1);
                     });

package/cascader/internal/CascaderPanel.js

@@ -104,7 +104,7 @@ export function CascaderPanel(props) {
                     return () => {
                         vsRef.current = null;
                     };
-                }, enable: virtual !== false, listSize: 264, listPadding: 4, itemRender: (item, index, props) => {
+                }, enable: virtual !== false, listSize: 200 + 32 * 2, listPadding: 4, itemRender: (item, index, props) => {
                     let isSelectedAncestry = false;
                     if (item.children && itemSelected) {
                         let node = itemSelected;

package/cascader/internal/CascaderSearchPanel.js

@@ -51,7 +51,7 @@ export function CascaderSearchPanel(props) {
             return () => {
                 vsRef.current = null;
             };
-        }, enable: virtual !== false, listSize: 264, listPadding: 4, itemRender: (item, index, props) => {
+        }, enable: virtual !== false, listSize: 200 + 32 * 2, listPadding: 4, itemRender: (item, index, props) => {
             const node = item[TREE_NODE_KEY];
             let inSelected = node.checked;
             if (!onlyLeafSelectable) {

package/dropdown/Dropdown.js

@@ -1,26 +1,21 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEventCallback, useRefExtra } from '@laser-ui/hooks';
-import { scrollIntoViewIfNeeded } from '@laser-ui/utils';
-import { isNumber, isUndefined, nth } from 'lodash';
-import { Fragment, useId, useImperativeHandle, useRef, useState } from 'react';
-import { DropdownGroup } from './internal/DropdownGroup';
-import { DropdownItem as DropdownItemFC } from './internal/DropdownItem';
-import { DropdownSub } from './internal/DropdownSub';
-import { checkEnableItem, getSameLevelEnableItems } from './utils';
+import { isUndefined, nth } from 'lodash';
+import { useId, useImperativeHandle, useRef, useState } from 'react';
+import { DropdownList } from './internal/DropdownList';
+import { checkEnableItem } from './utils';
 import { CLASSES } from './vars';
-import { useComponentProps, useContainerScrolling, useControlled, useFocusVisible, useNamespace, useNestedPopup, useStyled, useTranslation, useZIndex, } from '../hooks';
+import { useComponentProps, useContainerScrolling, useControlled, useFocusVisible, useNamespace, useNestedPopup, useStyled, useZIndex, } from '../hooks';
 import { Popup } from '../internal/popup';
 import { Portal } from '../internal/portal';
-import { Separator } from '../separator';
 import { Transition } from '../transition';
 import { getVerticalSidePosition, mergeCS } from '../utils';
 import { TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../vars';
 export function Dropdown(props) {
     var _a;
-    const _b = useComponentProps('Dropdown', props), { ref, children, styleOverrides, styleProvider, list, visible: visibleProp, defaultVisible, trigger = 'hover', placement: placementProp = 'bottom-right', placementFixed = false, arrow = false, escClosable = true, zIndex: zIndexProp, popupRender, onVisibleChange, afterVisibleChange, onClick } = _b, restProps = __rest(_b, ["ref", "children", "styleOverrides", "styleProvider", "list", "visible", "defaultVisible", "trigger", "placement", "placementFixed", "arrow", "escClosable", "zIndex", "popupRender", "onVisibleChange", "afterVisibleChange", "onClick"]);
+    const _b = useComponentProps('Dropdown', props), { ref, children, styleOverrides, styleProvider, list, visible: visibleProp, defaultVisible, trigger = 'hover', placement: placementProp = 'bottom-right', placementFixed = false, arrow = false, virtual = false, escClosable = true, zIndex: zIndexProp, popupRender, onVisibleChange, afterVisibleChange, onClick } = _b, restProps = __rest(_b, ["ref", "children", "styleOverrides", "styleProvider", "list", "visible", "defaultVisible", "trigger", "placement", "placementFixed", "arrow", "virtual", "escClosable", "zIndex", "popupRender", "onVisibleChange", "afterVisibleChange", "onClick"]);
     const namespace = useNamespace();
-    const { t } = useTranslation();
     const styled = useStyled(CLASSES, { dropdown: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.dropdown, 'dropdown-popup': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['dropdown-popup'] }, styleOverrides);
     const uniqueId = useId();
     const id = (_a = restProps.id) !== null && _a !== void 0 ? _a : `${namespace}-dropdown-${uniqueId}`;
@@ -28,7 +23,6 @@ export function Dropdown(props) {
     const getItemId = (id) => `${namespace}-dropdown-item-${id}-${uniqueId}`;
     const triggerRef = useRefExtra(() => document.getElementById(triggerId));
     const popupRef = useRef(null);
-    const ulRef = useRef(null);
     const dropdownRef = useRef(null);
     const updateSubPosition = useRef(new Map());
     const [focusVisible, focusVisibleProps] = useFocusVisible((code) => code.startsWith('Arrow') || ['Home', 'End', 'Enter', 'Space'].includes(code));
@@ -111,139 +105,7 @@ export function Dropdown(props) {
             e.preventDefault();
         }
     };
-    let handleKeyDown;
-    const nodes = (() => {
-        const getNodes = (arr, level, subParents) => arr.map((item) => {
-            const { id: itemId, title: itemTitle, type: itemType, icon: itemIcon, disabled: itemDisabled = false, separator: itemSeparator, children, } = item;
-            const newSubParents = itemType === 'sub' ? subParents.concat([item]) : subParents;
-            const id = getItemId(itemId);
-            const isFocus = itemId === focusId;
-            const isEmpty = !(children && children.length > 0);
-            const popupState = popupIds.find((v) => v.id === itemId);
-            const handleItemClick = () => {
-                const close = onClick === null || onClick === void 0 ? void 0 : onClick(itemId, item);
-                setFocusIds(subParents.map((parentItem) => parentItem.id).concat([itemId]));
-                if (close !== false) {
-                    changeVisible(false);
-                }
-            };
-            if (isFocus) {
-                handleKeyDown = (e) => {
-                    var _a, _b, _c, _d;
-                    const sameLevelItems = getSameLevelEnableItems((_b = (_a = nth(subParents, -1)) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : list);
-                    const focusItem = (val) => {
-                        if (val) {
-                            setFocusIds(subParents.map((parentItem) => parentItem.id).concat([val.id]));
-                        }
-                    };
-                    const scrollToItem = (val) => {
-                        if (val) {
-                            const el = document.getElementById(getItemId(val.id));
-                            if (el && ulRef.current) {
-                                scrollIntoViewIfNeeded(el, ulRef.current);
-                            }
-                        }
-                    };
-                    switch (e.code) {
-                        case 'ArrowUp': {
-                            e.preventDefault();
-                            const index = sameLevelItems.findIndex((sameLevelItem) => sameLevelItem.id === itemId);
-                            const item = nth(sameLevelItems, index - 1);
-                            focusItem(item);
-                            scrollToItem(item);
-                            if (item && ((_c = nth(popupIds, -1)) === null || _c === void 0 ? void 0 : _c.id) === itemId) {
-                                setPopupIds(popupIds.slice(0, -1));
-                            }
-                            break;
-                        }
-                        case 'ArrowDown': {
-                            e.preventDefault();
-                            const index = sameLevelItems.findIndex((sameLevelItem) => sameLevelItem.id === itemId);
-                            const item = nth(sameLevelItems, (index + 1) % sameLevelItems.length);
-                            focusItem(item);
-                            scrollToItem(item);
-                            if (item && ((_d = nth(popupIds, -1)) === null || _d === void 0 ? void 0 : _d.id) === itemId) {
-                                setPopupIds(popupIds.slice(0, -1));
-                            }
-                            break;
-                        }
-                        case 'ArrowLeft': {
-                            e.preventDefault();
-                            setPopupIds(popupIds.slice(0, -1));
-                            const ids = subParents.map((item) => item.id);
-                            if (ids.length > 0) {
-                                setFocusIds(ids);
-                            }
-                            break;
-                        }
-                        case 'ArrowRight':
-                            e.preventDefault();
-                            if (itemType === 'sub') {
-                                addPopupId(itemId);
-                                if (children) {
-                                    const newFocusItem = nth(getSameLevelEnableItems(children), 0);
-                                    if (newFocusItem) {
-                                        setFocusIds(newSubParents.map((parentItem) => parentItem.id).concat([newFocusItem.id]));
-                                    }
-                                }
-                            }
-                            break;
-                        case 'Home':
-                            e.preventDefault();
-                            focusItem(nth(sameLevelItems, 0));
-                            if (ulRef.current) {
-                                ulRef.current.scrollTop = 0;
-                            }
-                            break;
-                        case 'End':
-                            e.preventDefault();
-                            focusItem(nth(sameLevelItems, -1));
-                            if (ulRef.current) {
-                                ulRef.current.scrollTop = ulRef.current.scrollHeight;
-                            }
-                            break;
-                        case 'Enter':
-                        case 'Space':
-                            e.preventDefault();
-                            if (itemType === 'item') {
-                                handleItemClick();
-                            }
-                            else if (itemType === 'sub') {
-                                addPopupId(itemId);
-                            }
-                            break;
-                        default:
-                            break;
-                    }
-                };
-            }
-            return (_jsxs(Fragment, { children: [itemSeparator && _jsx(Separator, { style: { margin: '2px 0' } }), itemType === 'item' ? (_jsx(DropdownItemFC, { namespace: namespace, styled: styled, id: id, level: level, icon: itemIcon, focus: focusVisible && isFocus, disabled: itemDisabled, onClick: handleItemClick, children: itemTitle })) : itemType === 'group' ? (_jsx(DropdownGroup, { styled: styled, id: id, level: level, list: children && getNodes(children, level + 1, newSubParents), empty: isEmpty, children: itemTitle })) : (_jsx(DropdownSub, { ref: (instance) => {
-                            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                            const fn = instance;
-                            updateSubPosition.current.set(itemId, fn);
-                            return () => {
-                                updateSubPosition.current.delete(itemId);
-                            };
-                        }, namespace: namespace, styled: styled, id: id, level: level, icon: itemIcon, list: children && getNodes(children, 0, newSubParents), popupState: popupState === null || popupState === void 0 ? void 0 : popupState.visible, trigger: trigger, empty: isEmpty, focus: focusVisible && isFocus, disabled: itemDisabled, zIndex: isUndefined(zIndex)
-                            ? zIndex
-                            : isNumber(zIndex)
-                                ? zIndex + 1 + subParents.length
-                                : `calc(${zIndex} + ${1 + subParents.length})`, onVisibleChange: (visible) => {
-                            if (visible) {
-                                if (subParents.length === 0) {
-                                    setPopupIds([{ id: itemId, visible: true }]);
-                                }
-                                else {
-                                    addPopupId(itemId);
-                                }
-                            }
-                            else {
-                                removePopupId(itemId);
-                            }
-                        }, children: itemTitle }))] }, itemId));
-        });
-        return getNodes(list, 0, []);
-    })();
+    const handleKeyDown = useRef(undefined);
     const updateAllPosition = useEventCallback(() => {
         var _a;
         updatePosition();
@@ -281,6 +143,7 @@ export function Dropdown(props) {
                         changeVisible(false);
                     },
                     onKeyDown: (e) => {
+                        var _a;
                         focusVisibleProps.onKeyDown(e);
                         if (visible) {
                             if (escClosable && e.code === 'Escape') {
@@ -289,7 +152,7 @@ export function Dropdown(props) {
                                 changeVisible(false);
                             }
                             else {
-                                handleKeyDown === null || handleKeyDown === void 0 ? void 0 : handleKeyDown(e);
+                                (_a = handleKeyDown.current) === null || _a === void 0 ? void 0 : _a.call(handleKeyDown, e);
                             }
                         }
                         else {
@@ -349,12 +212,17 @@ export function Dropdown(props) {
                                         transitionRef(null);
                                     };
                                 } }, popupProps.popup, { children: [(() => {
-                                        const el = (_jsx("ul", Object.assign({}, styled('dropdown__list'), { ref: (instance) => {
-                                                ulRef.current = instance;
-                                                return () => {
-                                                    ulRef.current = null;
-                                                };
-                                            }, id: id, tabIndex: -1, role: "menu", "aria-labelledby": triggerId, "aria-activedescendant": isUndefined(focusId) ? undefined : getItemId(focusId), children: list.length === 0 ? _jsx("div", Object.assign({}, styled('dropdown__empty'), { children: t('No data') })) : nodes })));
-                                        return popupRender ? popupRender(el) : el;
+                                        const node = (_jsx(DropdownList, { namespace: namespace, styled: styled, ulProps: {
+                                                id,
+                                                'aria-labelledby': triggerId,
+                                                'aria-activedescendant': isUndefined(focusId) ? undefined : getItemId(focusId),
+                                            }, list: list, virtual: virtual, focusVisible: focusVisible, focusId: focusId, popupIds: popupIds, updateSubPosition: updateSubPosition, trigger: trigger, zIndex: zIndex, handleKeyDown: handleKeyDown, getItemId: getItemId, onClick: onClick, onFocusIdsChange: (ids) => {
+                                                setFocusIds(ids);
+                                            }, onPopupIdsChange: (ids) => {
+                                                setPopupIds(ids);
+                                            }, addPopupId: addPopupId, removePopupId: removePopupId, onVisibleChange: (visible) => {
+                                                changeVisible(visible);
+                                            } }));
+                                        return popupRender ? popupRender(node) : node;
                                     })(), arrow && _jsx("div", Object.assign({}, styled('dropdown__arrow')))] })) }))) }) })] })) }));
 }

package/dropdown/internal/DropdownList.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import type { Styled } from '../../hooks/useStyled';
+import type { DropdownItem } from '../types';
+import type { CLASSES } from '../vars';
+interface DropdownListProps<ID extends React.Key, T extends DropdownItem<ID>> {
+    namespace: string;
+    styled: Styled<typeof CLASSES>;
+    ulProps: any;
+    list: T[];
+    ancestryOfSub?: T[];
+    virtual?: boolean | number;
+    focusVisible: boolean;
+    focusId: ID | undefined;
+    popupIds: {
+        id: ID;
+        visible: boolean;
+    }[];
+    updateSubPosition: React.RefObject<Map<ID, () => void>>;
+    trigger: 'hover' | 'click';
+    zIndex: string | number;
+    handleKeyDown: React.RefObject<React.KeyboardEventHandler<HTMLElement> | undefined>;
+    getItemId: (id: ID) => string;
+    onClick?: (id: ID, origin: T) => void | false;
+    onFocusIdsChange: (ids: ID[]) => void;
+    onPopupIdsChange: (ids: {
+        id: ID;
+        visible: boolean;
+    }[]) => void;
+    addPopupId: (id: ID) => void;
+    removePopupId: (id: ID) => void;
+    onVisibleChange: (visible: boolean) => void;
+}
+export declare function DropdownList<ID extends React.Key, T extends DropdownItem<ID>>(props: DropdownListProps<ID, T>): React.ReactElement | null;
+export {};

package/dropdown/internal/DropdownList.js

@@ -0,0 +1,178 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { checkNodeExist } from '@laser-ui/utils';
+import { isNumber, isUndefined, nth } from 'lodash';
+import { Fragment, useCallback, useMemo, useRef } from 'react';
+import { DropdownSub } from './DropdownSub';
+import { useTranslation } from '../../hooks';
+import { Separator } from '../../separator';
+import { mergeCS } from '../../utils';
+import { VirtualScroll } from '../../virtual-scroll';
+import { getSameLevelEnableItems } from '../utils';
+export function DropdownList(props) {
+    const { namespace, styled, ulProps, list, ancestryOfSub = [], virtual, focusVisible, focusId, popupIds, updateSubPosition, trigger, zIndex, handleKeyDown, getItemId, onClick, onFocusIdsChange, onPopupIdsChange, addPopupId, removePopupId, onVisibleChange, } = props;
+    const ulRef = useRef(null);
+    const vsRef = useRef(null);
+    const { t } = useTranslation();
+    const canSelectedItem = useCallback((item) => !item.disabled && item.type !== 'group', []);
+    const ancestryOfSubIds = ancestryOfSub.map((item) => item.id);
+    const vsProps = useMemo(() => ({
+        list,
+        itemKey: (item) => item.id,
+        itemSize: (item) => (item.separator ? 3 : 0) + (isNumber(virtual) ? virtual : 32),
+        itemEmptySize: 32,
+        itemNested: (item) => (item.type === 'group' ? item.children : undefined),
+        itemFocusable: canSelectedItem,
+    }), [canSelectedItem, list, virtual]);
+    return (_jsx(VirtualScroll, Object.assign({}, vsProps, { ref: (instance) => {
+            vsRef.current = instance;
+            return () => {
+                vsRef.current = null;
+            };
+        }, enable: virtual !== false, listSize: 200 + 32 * 2, listPadding: 4, itemRender: (item, index, props, ancestry, childrenNode) => {
+            const { id: itemId, title: itemTitle, type: itemType, icon: itemIcon, disabled: itemDisabled = false, separator: itemSeparator, children, } = item;
+            const id = getItemId(itemId);
+            const isFocus = itemId === focusId;
+            const popupState = popupIds.find((v) => v.id === itemId);
+            const currentAncestryOfSub = ancestryOfSub.concat(itemType === 'sub' ? [item] : []);
+            const handleItemClick = () => {
+                const close = onClick === null || onClick === void 0 ? void 0 : onClick(itemId, item);
+                onFocusIdsChange(ancestryOfSubIds.concat([itemId]));
+                if (close !== false) {
+                    onVisibleChange(false);
+                }
+            };
+            if (isFocus) {
+                handleKeyDown.current = (e) => {
+                    var _a, _b, _c, _d;
+                    const sameLevelItems = getSameLevelEnableItems((_b = (_a = nth(ancestryOfSub, -1)) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : list);
+                    const focusItem = (val) => {
+                        if (val) {
+                            onFocusIdsChange(ancestryOfSub.map((item) => item.id).concat([val.id]));
+                        }
+                    };
+                    const scrollToItem = (val) => {
+                        var _a;
+                        if (ulRef.current && val) {
+                            (_a = vsRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(ulRef.current, val.id);
+                        }
+                    };
+                    switch (e.code) {
+                        case 'ArrowUp': {
+                            e.preventDefault();
+                            const index = sameLevelItems.findIndex((sameLevelItem) => sameLevelItem.id === itemId);
+                            const item = nth(sameLevelItems, index - 1);
+                            focusItem(item);
+                            scrollToItem(item);
+                            if (item && ((_c = nth(popupIds, -1)) === null || _c === void 0 ? void 0 : _c.id) === itemId) {
+                                onPopupIdsChange(popupIds.slice(0, -1));
+                            }
+                            break;
+                        }
+                        case 'ArrowDown': {
+                            e.preventDefault();
+                            const index = sameLevelItems.findIndex((sameLevelItem) => sameLevelItem.id === itemId);
+                            const item = nth(sameLevelItems, (index + 1) % sameLevelItems.length);
+                            focusItem(item);
+                            scrollToItem(item);
+                            if (item && ((_d = nth(popupIds, -1)) === null || _d === void 0 ? void 0 : _d.id) === itemId) {
+                                onPopupIdsChange(popupIds.slice(0, -1));
+                            }
+                            break;
+                        }
+                        case 'ArrowLeft': {
+                            e.preventDefault();
+                            onPopupIdsChange(popupIds.slice(0, -1));
+                            if (ancestryOfSubIds.length > 0) {
+                                onFocusIdsChange(ancestryOfSubIds);
+                            }
+                            break;
+                        }
+                        case 'ArrowRight':
+                            e.preventDefault();
+                            if (itemType === 'sub') {
+                                addPopupId(itemId);
+                                if (children) {
+                                    const newFocusItem = nth(getSameLevelEnableItems(children), 0);
+                                    if (newFocusItem) {
+                                        onFocusIdsChange(currentAncestryOfSub.map((item) => item.id).concat([newFocusItem.id]));
+                                    }
+                                }
+                            }
+                            break;
+                        case 'Home':
+                            e.preventDefault();
+                            focusItem(nth(sameLevelItems, 0));
+                            if (ulRef.current) {
+                                ulRef.current.scrollTop = 0;
+                            }
+                            break;
+                        case 'End':
+                            e.preventDefault();
+                            focusItem(nth(sameLevelItems, -1));
+                            if (ulRef.current) {
+                                ulRef.current.scrollTop = ulRef.current.scrollHeight;
+                            }
+                            break;
+                        case 'Enter':
+                        case 'Space':
+                            e.preventDefault();
+                            if (itemType === 'item') {
+                                handleItemClick();
+                            }
+                            else if (itemType === 'sub') {
+                                addPopupId(itemId);
+                            }
+                            break;
+                        default:
+                            break;
+                    }
+                };
+            }
+            return (_jsxs(Fragment, { children: [itemSeparator && _jsx(Separator, { style: { margin: '2px 0' } }), itemType === 'item' ? (_jsxs("li", Object.assign({}, styled('dropdown__item', 'dropdown__item--item', {
+                        'dropdown__item.is-disabled': itemDisabled,
+                    }), { id: id, role: "menuitem", "aria-disabled": itemDisabled, onClick: handleItemClick, children: [focusVisible && isFocus && _jsx("div", { className: `${namespace}-focus-outline` }), checkNodeExist(itemIcon) && _jsx("div", Object.assign({}, styled('dropdown__item-icon'), { children: itemIcon })), _jsx("div", Object.assign({}, styled('dropdown__item-content'), { children: itemTitle }))] }))) : itemType === 'group' ? (_jsxs(_Fragment, { children: [_jsx("li", Object.assign({}, styled('dropdown__group-title'), { id: id, role: "presentation", children: itemTitle })), _jsx("ul", Object.assign({}, mergeCS(styled('dropdown__group-list'), {
+                                style: {
+                                    '--level': (() => {
+                                        let val = 1;
+                                        for (let index = ancestry.length - 1; index > -1; index--) {
+                                            if (ancestry[index].type === 'group') {
+                                                val += 1;
+                                            }
+                                            if (ancestry[index].type === 'sub') {
+                                                break;
+                                            }
+                                        }
+                                        return val;
+                                    })(),
+                                },
+                            }), { role: "group", "aria-labelledby": id, children: childrenNode }))] })) : (_jsx(DropdownSub, { ref: (instance) => {
+                            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                            const fn = instance;
+                            updateSubPosition.current.set(itemId, fn);
+                            return () => {
+                                updateSubPosition.current.delete(itemId);
+                            };
+                        }, namespace: namespace, styled: styled, id: id, icon: itemIcon, list: _jsx(DropdownList, { namespace: namespace, styled: styled, ulProps: { 'aria-labelledby': id }, list: (children !== null && children !== void 0 ? children : []), ancestryOfSub: currentAncestryOfSub, virtual: virtual, focusVisible: focusVisible, focusId: focusId, popupIds: popupIds, updateSubPosition: updateSubPosition, trigger: trigger, zIndex: zIndex, handleKeyDown: handleKeyDown, getItemId: getItemId, onClick: onClick, onFocusIdsChange: onFocusIdsChange, onPopupIdsChange: onPopupIdsChange, addPopupId: addPopupId, removePopupId: removePopupId, onVisibleChange: onVisibleChange }), popupState: popupState === null || popupState === void 0 ? void 0 : popupState.visible, trigger: trigger, focus: focusVisible && isFocus, disabled: itemDisabled, zIndex: isUndefined(zIndex)
+                            ? zIndex
+                            : isNumber(zIndex)
+                                ? zIndex + 1 + ancestryOfSub.length
+                                : `calc(${zIndex} + ${1 + ancestryOfSub.length})`, onVisibleChange: (visible) => {
+                            if (visible) {
+                                if (ancestryOfSub.length === 0) {
+                                    onPopupIdsChange([{ id: itemId, visible: true }]);
+                                }
+                                else {
+                                    addPopupId(itemId);
+                                }
+                            }
+                            else {
+                                removePopupId(itemId);
+                            }
+                        }, children: itemTitle }))] }, itemId));
+        }, itemFocused: focusId, itemEmptyRender: () => (_jsx("li", Object.assign({}, styled('dropdown__empty'), { children: _jsx("div", Object.assign({}, styled('dropdown__item-content'), { children: t('No data') })) }))), itemInAriaSetsize: (item) => item.type === 'item', placeholder: "li", children: (vsList, onScroll) => (_jsx("ul", Object.assign({}, styled('dropdown__list'), ulProps, { ref: (instance) => {
+                ulRef.current = instance;
+                return () => {
+                    ulRef.current = null;
+                };
+            }, tabIndex: -1, role: "menu", onScroll: onScroll, children: list.length === 0 ? (_jsx("li", Object.assign({}, styled('dropdown__empty'), { children: _jsx("div", Object.assign({}, styled('dropdown__item-content'), { children: t('No data') })) }))) : (vsList) }))) })));
+}

package/dropdown/internal/DropdownSub.d.ts

@@ -7,12 +7,10 @@ interface DropdownSubProps {
     namespace: string;
     styled: Styled<typeof CLASSES>;
     id: string;
-    level: number;
     icon: React.ReactNode | undefined;
     list: React.ReactNode;
     popupState: boolean | undefined;
     trigger: 'hover' | 'click';
-    empty: boolean;
     focus: boolean;
     disabled: boolean;
     zIndex: number | string | undefined;

package/dropdown/internal/DropdownSub.js

@@ -4,7 +4,6 @@ import { checkNodeExist } from '@laser-ui/utils';
 import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
 import { isUndefined } from 'lodash';
 import { useImperativeHandle, useRef } from 'react';
-import { useTranslation } from '../../hooks';
 import { Icon } from '../../icon';
 import { Popup } from '../../internal/popup';
 import { Portal } from '../../internal/portal';
@@ -12,10 +11,9 @@ import { Transition } from '../../transition';
 import { getHorizontalSidePosition, mergeCS } from '../../utils';
 import { TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../../vars';
 export function DropdownSub(props) {
-    const { ref, children, namespace, styled, id, level, icon, list, popupState, trigger, empty, focus, disabled, zIndex, onVisibleChange } = props;
+    const { ref, children, namespace, styled, id, icon, list, popupState, trigger, focus, disabled, zIndex, onVisibleChange } = props;
     const triggerRef = useRef(null);
     const popupRef = useRef(null);
-    const { t } = useTranslation();
     const visible = !isUndefined(popupState);
     const updatePosition = useEventCallback(() => {
         if (!disabled && visible && popupRef.current && triggerRef.current) {
@@ -35,10 +33,10 @@ export function DropdownSub(props) {
             triggerRef,
             popupRef,
             scroll: false,
-        }, onVisibleChange: onVisibleChange, children: (popupProps) => (_jsxs(_Fragment, { children: [_jsxs("li", Object.assign({}, mergeCS(styled('dropdown__item', 'dropdown__item--sub', {
+        }, onVisibleChange: onVisibleChange, children: (popupProps) => (_jsxs(_Fragment, { children: [_jsxs("li", Object.assign({}, styled('dropdown__item', 'dropdown__item--sub', {
                     'dropdown__item.is-expand': visible,
                     'dropdown__item.is-disabled': disabled,
-                }), { style: { paddingLeft: 12 + level * 16 } }), { ref: (instance) => {
+                }), { ref: (instance) => {
                         triggerRef.current = instance;
                         return () => {
                             triggerRef.current = null;
@@ -60,5 +58,5 @@ export function DropdownSub(props) {
                                     popupRef.current = null;
                                     transitionRef(null);
                                 };
-                            } }, popupProps.popup, { children: _jsx("ul", Object.assign({}, styled('dropdown__list'), { role: "menu", "aria-labelledby": id, children: empty ? (_jsx("div", Object.assign({}, mergeCS(styled('dropdown__empty'), { style: { paddingLeft: 12 + level * 16 } }), { children: t('No data') }))) : (list) })) }))) }) })] })) }));
+                            } }, popupProps.popup, { children: list }))) }) })] })) }));
 }

package/dropdown/types.d.ts

@@ -36,6 +36,7 @@ export interface DropdownProps<ID extends React.Key, T extends DropdownItem<ID>>
     placement?: VerticalSidePlacement;
     placementFixed?: boolean;
     arrow?: boolean;
+    virtual?: boolean | number;
     escClosable?: boolean;
     zIndex?: number | string;
     popupRender?: (el: React.ReactElement) => React.ReactNode;

package/hooks/useZIndex.js

@@ -1,32 +1,22 @@
-import { useUnmount } from '@laser-ui/hooks';
-import { isUndefined } from 'lodash';
-import { useId, useRef } from 'react';
-const ZINDEX = [0];
-const INDEX = new Map();
+import { useIsomorphicLayoutEffect } from '@laser-ui/hooks';
+import { useId, useState } from 'react';
+const ZINDEX = new Map([['$ZERO', 0]]);
 export function useZIndex(visible) {
     const id = useId();
-    const zIndex = useRef(0);
-    if (visible) {
-        const index = INDEX.get(id);
-        if (isUndefined(index)) {
-            zIndex.current = ZINDEX[ZINDEX.length - 1] + 1;
-            ZINDEX.push(zIndex.current);
-            INDEX.set(id, ZINDEX.length - 1);
+    const [zIndex, setZIndex] = useState(0);
+    useIsomorphicLayoutEffect(() => {
+        if (visible) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const zIndex = Array.from(ZINDEX).at(-1)[1] + 1;
+            ZINDEX.set(id, zIndex);
+            setZIndex(zIndex);
+            return () => {
+                ZINDEX.delete(id);
+            };
         }
-    }
-    else {
-        const index = INDEX.get(id);
-        if (!isUndefined(index)) {
-            ZINDEX.splice(index, 1);
-            INDEX.delete(id);
+        else {
+            ZINDEX.delete(id);
         }
-    }
-    useUnmount(() => {
-        const index = INDEX.get(id);
-        if (!isUndefined(index)) {
-            ZINDEX.splice(index, 1);
-            INDEX.delete(id);
-        }
-    });
-    return zIndex.current;
+    }, [id, visible]);
+    return zIndex;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laser-ui/components",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -37,5 +37,5 @@
     "access": "public",
     "directory": "../../dist/libs/components"
   },
-  "gitHead": "52633969337fe51323792d2fb71ad230057b681b"
+  "gitHead": "be091d302eaa1c5a3fa73cebbcdab245ec8b1e1f"
 }

package/select/Select.js

@@ -9,7 +9,7 @@ import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
 import KeyboardArrowDownOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg?react';
 import SearchOutlined from '@material-design-icons/svg/outlined/search.svg?react';
 import { isNull, isNumber, isUndefined } from 'lodash';
-import { useCallback, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Fragment, useCallback, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { CLASSES, IS_CREATED } from './vars';
 import { BaseInput } from '../base-input';
 import { Checkbox } from '../checkbox';
@@ -238,7 +238,7 @@ export function Select(props) {
                     title: label,
                     type: 'item',
                     disabled: item === null || item === void 0 ? void 0 : item.disabled,
-                })), onClick: (id) => {
+                })), virtual: virtual, onClick: (id) => {
                     changeSelectedByClick(id);
                     return false;
                 }, children: (dropdownProps) => (_jsx(Tag, Object.assign({}, dropdownProps, { tabIndex: -1, size: size, children: selected.size }))) }));
@@ -491,14 +491,20 @@ export function Select(props) {
                                             return () => {
                                                 vsRef.current = null;
                                             };
-                                        }, enable: virtual !== false, listSize: 264, listPadding: 4, itemRender: (item, index, props, ancestry, children) => {
+                                        }, enable: virtual !== false, listSize: 200 + 32 * 2, listPadding: 4, itemRender: (item, index, props, ancestry, children) => {
                                             const { label: itemLabel, value: itemValue, disabled: itemDisabled } = item;
                                             const node = customItem ? customItem(item) : itemLabel;
                                             if (children) {
-                                                return (_createElement("ul", Object.assign({}, styled('select__option-group'), { key: itemValue, role: "group", "aria-labelledby": getItemId(itemValue) }),
-                                                    _createElement("li", Object.assign({}, styled('select__option-group-label'), { key: itemValue, id: getItemId(itemValue), role: "presentation" }),
-                                                        _jsx("div", Object.assign({}, styled('select__option-content'), { children: node }))),
-                                                    children));
+                                                const level = (() => {
+                                                    let val = 1;
+                                                    for (let index = ancestry.length - 1; index > -1; index--) {
+                                                        if (ancestry[index].children) {
+                                                            val += 1;
+                                                        }
+                                                    }
+                                                    return val;
+                                                })();
+                                                return (_jsxs(Fragment, { children: [_jsx("li", Object.assign({}, styled('select__option-group-label'), { id: getItemId(itemValue), role: "presentation", children: _jsx("div", Object.assign({}, styled('select__option-content'), { children: node })) })), _jsx("ul", Object.assign({}, mergeCS(styled('select__option-group'), { style: { '--level': level } }), { role: "group", "aria-labelledby": getItemId(itemValue), children: children }))] }, itemValue));
                                             }
                                             let isSelected = false;
                                             if (multiple) {
@@ -507,10 +513,10 @@ export function Select(props) {
                                             else {
                                                 isSelected = selected === itemValue;
                                             }
-                                            return (_createElement("li", Object.assign({}, mergeCS(styled('select__option', {
+                                            return (_createElement("li", Object.assign({}, styled('select__option', {
                                                 'select__option.is-selected': !multiple && isSelected,
                                                 'select__option.is-disabled': itemDisabled,
-                                            }), { style: { paddingLeft: ancestry.length === 0 ? undefined : 12 + 8 } }), props, { key: itemValue, id: getItemId(itemValue), title: (item[IS_CREATED] ? t('Create') + ' ' : '') + itemLabel, role: "option", "aria-selected": isSelected, "aria-disabled": itemDisabled, onClick: () => {
+                                            }), props, { key: itemValue, id: getItemId(itemValue), title: (item[IS_CREATED] ? t('Create') + ' ' : '') + itemLabel, role: "option", "aria-selected": isSelected, "aria-disabled": itemDisabled, onClick: () => {
                                                     if (item[IS_CREATED]) {
                                                         handleCreateItem(item);
                                                     }

package/transfer/internal/TransferPanel.js

@@ -32,7 +32,7 @@ export function TransferPanel(props) {
                             return () => {
                                 vsRef.current = null;
                             };
-                        }, enable: virtual !== false, listSize: 192, listPadding: 0, itemRender: (item, index, props) => (_createElement("li", Object.assign({}, styled('transfer__option', {
+                        }, enable: virtual !== false, listSize: 192 + 32 * 2, listPadding: 0, itemRender: (item, index, props) => (_createElement("li", Object.assign({}, styled('transfer__option', {
                             'transfer__option.is-disabled': item.disabled,
                         }), props, { key: item.value, id: getItemId(item.value), title: item.label, onClick: () => {
                                 if (!item.disabled) {

package/tree-select/TreeSelect.js

@@ -244,7 +244,7 @@ export function TreeSelect(props) {
                     title: label,
                     type: 'item',
                     disabled: node === null || node === void 0 ? void 0 : node.origin.disabled,
-                })), onClick: (id) => {
+                })), virtual: virtual, onClick: (id) => {
                     changeSelected((draft) => {
                         draft.splice(draft.findIndex((v) => v === id), 1);
                     });
@@ -505,7 +505,13 @@ export function TreeSelect(props) {
                                             return () => {
                                                 focusRef.current = null;
                                             };
-                                        }, id: listId, namespace: namespace, styled: styled, list: nodes, itemId: getItemId, itemSelected: !multiple && hasSelected ? nodesMap.get(selected) : undefined, itemFocused: itemFocusedWithoutSearch, expands: expands, customItem: customItem, showLine: showLine, multiple: multiple, onlyLeafSelectable: onlyLeafSelectable, disabled: false, virtual: virtual === false ? undefined : { listSize: 264, listPadding: 4, itemSize: isNumber(virtual) ? virtual : 32 }, focusVisible: focusVisible, onNodeFocus: setItemFocusedWithoutSearch, onNodeExpand: handleExpand, onNodeClick: changeSelectedByClickWithoutSearch, onScrollBottom: onScrollBottom }))] })));
+                                        }, id: listId, namespace: namespace, styled: styled, list: nodes, itemId: getItemId, itemSelected: !multiple && hasSelected ? nodesMap.get(selected) : undefined, itemFocused: itemFocusedWithoutSearch, expands: expands, customItem: customItem, showLine: showLine, multiple: multiple, onlyLeafSelectable: onlyLeafSelectable, disabled: false, virtual: virtual === false
+                                            ? undefined
+                                            : {
+                                                listSize: 200 + 32 * 2,
+                                                listPadding: 4,
+                                                itemSize: isNumber(virtual) ? virtual : 32,
+                                            }, focusVisible: focusVisible, onNodeFocus: setItemFocusedWithoutSearch, onNodeExpand: handleExpand, onNodeClick: changeSelectedByClickWithoutSearch, onScrollBottom: onScrollBottom }))] })));
                             return popupRender ? popupRender(el) : el;
                         })() }))) }) })] }));
 }

package/tree-select/internal/TreeSelectSearchPanel.js

@@ -51,7 +51,7 @@ export function TreeSelectSearchPanel(props) {
             return () => {
                 vsRef.current = null;
             };
-        }, enable: virtual !== false, listSize: 264, listPadding: 4, itemRender: (item, index, props) => {
+        }, enable: virtual !== false, listSize: 200 + 32 * 2, listPadding: 4, itemRender: (item, index, props) => {
             const node = item[TREE_NODE_KEY];
             let inSelected = node.checked;
             if (!onlyLeafSelectable) {

package/dropdown/internal/DropdownGroup.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import type { Styled } from '../../hooks/useStyled';
-import type { CLASSES } from '../vars';
-interface DropdownGroupProps {
-    children: React.ReactNode;
-    styled: Styled<typeof CLASSES>;
-    id: string;
-    level: number;
-    list: React.ReactNode;
-    empty: boolean;
-}
-export declare function DropdownGroup(props: DropdownGroupProps): React.ReactElement | null;
-export {};

package/dropdown/internal/DropdownGroup.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTranslation } from '../../hooks';
-import { mergeCS } from '../../utils';
-export function DropdownGroup(props) {
-    const { children, styled, id, level, list, empty } = props;
-    const { t } = useTranslation();
-    return (_jsxs("ul", Object.assign({}, styled('dropdown__group-list'), { role: "group", "aria-labelledby": id, children: [_jsx("li", Object.assign({}, mergeCS(styled('dropdown__group-title'), { style: { paddingLeft: 12 + level * 16 } }), { id: id, role: "presentation", children: children })), empty ? _jsx("div", Object.assign({}, mergeCS(styled('dropdown__empty'), { style: { paddingLeft: 12 + (level + 1) * 16 } }), { children: t('No data') })) : list] })));
-}

package/dropdown/internal/DropdownItem.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import type { Styled } from '../../hooks/useStyled';
-import type { CLASSES } from '../vars';
-interface DropdownItemProps {
-    children: React.ReactNode;
-    namespace: string;
-    styled: Styled<typeof CLASSES>;
-    id: string;
-    level: number;
-    icon: React.ReactNode;
-    focus: boolean;
-    disabled: boolean;
-    onClick: () => void;
-}
-export declare function DropdownItem(props: DropdownItemProps): React.ReactElement | null;
-export {};

package/dropdown/internal/DropdownItem.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { checkNodeExist } from '@laser-ui/utils';
-import { mergeCS } from '../../utils';
-export function DropdownItem(props) {
-    const { children, namespace, styled, id, level, icon, focus, disabled, onClick } = props;
-    return (_jsxs("li", Object.assign({}, mergeCS(styled('dropdown__item', 'dropdown__item--item', {
-        'dropdown__item.is-disabled': disabled,
-    }), { style: { paddingLeft: 12 + level * 16 } }), { id: id, role: "menuitem", "aria-disabled": disabled, onClick: onClick, children: [focus && _jsx("div", { className: `${namespace}-focus-outline` }), checkNodeExist(icon) && _jsx("div", Object.assign({}, styled('dropdown__item-icon'), { children: icon })), _jsx("div", Object.assign({}, styled('dropdown__item-content'), { children: children }))] })));
-}