@laser-ui/components 1.6.0 → 2.0.0

package/cascader/Cascader.js

@@ -1,36 +1,35 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEventCallback, useForkRef, useResize } from '@laser-ui/hooks';
-import { findNested } from '@laser-ui/utils';
+import { useEventCallback, useResize } from '@laser-ui/hooks';
+import { findNested, setRef } 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';
 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, isUndefined } from 'lodash';
-import { createElement, forwardRef, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { CascaderPanel } from './internal/CascaderPanel';
 import { CascaderSearchPanel } from './internal/CascaderSearchPanel';
 import { CLASSES } from './vars';
 import { BaseInput } from '../base-input';
+import { CircularProgress } from '../circular-progress';
 import { Dropdown } from '../dropdown';
-import { useComponentProps, useContainerScrolling, useControlled, useDesign, useFocusVisible, useJSS, useLayout, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
+import { useComponentProps, useContainerScrolling, useControlled, useDesign, useFocusVisible, useLayout, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
 import { Icon } from '../icon';
-import { CircularProgress } from '../internal/circular-progress';
 import { Portal } from '../internal/portal';
-import { Transition } from '../internal/transition';
 import { ROOT_DATA } from '../root/vars';
 import { Tag } from '../tag';
+import { Transition } from '../transition';
 import { MultipleTreeNode } from '../tree/node/multiple-node';
 import { SingleTreeNode } from '../tree/node/single-node';
 import { getTreeNodeLabel } from '../tree/utils';
 import { TREE_NODE_KEY } from '../tree/vars';
 import { getVerticalSidePosition, isPrintableCharacter, mergeCS } from '../utils';
 import { TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../vars';
-function CascaderFC(props, ref) {
-    const _a = useComponentProps('Cascader', props), { styleOverrides, styleProvider, formControl, list, model, defaultModel, visible: visibleProp, defaultVisible, placeholder, multiple = false, searchable = false, searchValue: searchValueProp, defaultSearchValue, onlyLeafSelectable = true, clearable: clearableProp = false, loading = false, size: sizeProp, disabled: disabledProp = false, virtual = false, escClosable = true, customItem, customSelected, customSearch, inputRef: inputRefProp, inputRender, popupRender, onModelChange, onVisibleChange, onSearch, onClear, onFirstFocus, afterVisibleChange } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "formControl", "list", "model", "defaultModel", "visible", "defaultVisible", "placeholder", "multiple", "searchable", "searchValue", "defaultSearchValue", "onlyLeafSelectable", "clearable", "loading", "size", "disabled", "virtual", "escClosable", "customItem", "customSelected", "customSearch", "inputRef", "inputRender", "popupRender", "onModelChange", "onVisibleChange", "onSearch", "onClear", "onFirstFocus", "afterVisibleChange"]);
+export function Cascader(props) {
+    const _a = useComponentProps('Cascader', props), { ref, styleOverrides, styleProvider, formControl, list, model, defaultModel, visible: visibleProp, defaultVisible, placeholder, multiple = false, searchable = false, searchValue: searchValueProp, defaultSearchValue, onlyLeafSelectable = true, clearable: clearableProp = false, loading = false, size: sizeProp, disabled: disabledProp = false, virtual = false, escClosable = true, customItem, customSelected, customSearch, inputProps, popupRender, onModelChange, onVisibleChange, onSearch, onClear, onFirstFocus, afterVisibleChange } = _a, restProps = __rest(_a, ["ref", "styleOverrides", "styleProvider", "formControl", "list", "model", "defaultModel", "visible", "defaultVisible", "placeholder", "multiple", "searchable", "searchValue", "defaultSearchValue", "onlyLeafSelectable", "clearable", "loading", "size", "disabled", "virtual", "escClosable", "customItem", "customSelected", "customSearch", "inputProps", "popupRender", "onModelChange", "onVisibleChange", "onSearch", "onClear", "onFirstFocus", "afterVisibleChange"]);
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { cascader: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.cascader, 'cascader-popup': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['cascader-popup'] }, styleOverrides);
-    const sheet = useJSS();
     const { t } = useTranslation();
     const uniqueId = useId();
     const listId = `${namespace}-cascader-list-${uniqueId}`;
@@ -39,11 +38,8 @@ function CascaderFC(props, ref) {
     const boxRef = useRef(null);
     const popupRef = useRef(null);
     const inputRef = useRef(null);
-    const combineInputRef = useForkRef(inputRef, inputRefProp);
     const focusRef = useRef(null);
-    const dataRef = useRef({
-        itemFocused: new Set(),
-    });
+    const itemFocused = useRef(new Set());
     const [nodes, nodesMap] = useMemo(() => {
         const nodes = list.map((item) => multiple
             ? new MultipleTreeNode(item, (origin) => origin.value, {
@@ -141,11 +137,11 @@ function CascaderFC(props, ref) {
         return searchList;
     })();
     const isEmpty = hasSearch ? searchList.length === 0 : nodes.length === 0;
-    const [focusVisible, focusVisibleWrapper] = useFocusVisible((code) => code.startsWith('Arrow') || ['Home', 'End', 'Enter', 'Space'].includes(code));
+    const [focusVisible, focusVisibleProps] = useFocusVisible((code) => code.startsWith('Arrow') || ['Home', 'End', 'Enter', 'Space'].includes(code));
     const [_itemFocusedWithoutSearch, setItemFocusedWithoutSearch] = useState();
     const changeItemFocusedWithoutSearch = (node) => {
-        if (!dataRef.current.itemFocused.has(node.id)) {
-            dataRef.current.itemFocused.add(node.id);
+        if (!itemFocused.current.has(node.id)) {
+            itemFocused.current.add(node.id);
             onFirstFocus === null || onFirstFocus === void 0 ? void 0 : onFirstFocus(node.id, node.origin);
         }
         setItemFocusedWithoutSearch(node);
@@ -163,8 +159,8 @@ function CascaderFC(props, ref) {
     })();
     const [_itemFocusedWithSearch, setItemFocusedWithSearch] = useState();
     const changeItemFocusedWithSearch = (item) => {
-        if (!dataRef.current.itemFocused.has(item.value)) {
-            dataRef.current.itemFocused.add(item.value);
+        if (!itemFocused.current.has(item.value)) {
+            itemFocused.current.add(item.value);
             onFirstFocus === null || onFirstFocus === void 0 ? void 0 : onFirstFocus(item.value, item[TREE_NODE_KEY].origin);
         }
         setItemFocusedWithSearch(item);
@@ -180,7 +176,6 @@ function CascaderFC(props, ref) {
     })();
     const maxZIndex = useMaxIndex(visible);
     const zIndex = `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
-    const transformOrigin = useRef();
     const updatePosition = useEventCallback(() => {
         if (visible && boxRef.current && popupRef.current) {
             const height = popupRef.current.offsetHeight;
@@ -190,16 +185,10 @@ function CascaderFC(props, ref) {
                 placement: 'bottom-left',
                 inWindow: WINDOW_SPACE,
             });
-            transformOrigin.current = position.transformOrigin;
-            if (sheet.classes.position) {
-                popupRef.current.classList.toggle(sheet.classes.position, false);
-            }
-            sheet.replaceRule('position', {
-                top: position.top,
-                left: position.left,
-                maxWidth,
-            });
-            popupRef.current.classList.toggle(sheet.classes.position, true);
+            popupRef.current.style.setProperty(`--popup-down-transform-origin`, position.transformOrigin);
+            popupRef.current.style.top = position.top + 'px';
+            popupRef.current.style.left = position.left + 'px';
+            popupRef.current.style.maxWidth = maxWidth + 'px';
         }
     });
     useContainerScrolling(boxRef, updatePosition, !visible);
@@ -214,141 +203,9 @@ function CascaderFC(props, ref) {
             e.preventDefault();
         }
     };
-    const scrollCallback = useRef();
+    const scrollCallback = useRef(() => { });
     const inputable = searchable && visible;
     const clearable = clearableProp && hasSelected && !visible && !loading && !disabled;
-    const inputNode = focusVisibleWrapper(createElement(searchable ? BaseInput : 'div', Object.assign(Object.assign(Object.assign(Object.assign({}, mergeCS(styled('cascader__search'), {
-        style: {
-            opacity: inputable ? undefined : 0,
-            zIndex: inputable ? undefined : -1,
-        },
-    })), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria), { ref: combineInputRef, tabIndex: disabled ? -1 : 0, role: 'combobox', 'aria-haspopup': 'listbox', 'aria-expanded': visible, 'aria-controls': listId, onBlur: () => {
-            changeVisible(false);
-        }, onKeyDown: (e) => {
-            if (e.code === 'Escape') {
-                if (visible && escClosable) {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    changeVisible(false);
-                }
-            }
-            else {
-                const focusItem = (code) => {
-                    if (focusRef.current) {
-                        const item = focusRef.current(code);
-                        if (item) {
-                            hasSearch ? changeItemFocusedWithSearch(item) : changeItemFocusedWithoutSearch(item);
-                            if (virtual === false && !code.includes('level')) {
-                                scrollCallback.current = () => {
-                                    const el = document.getElementById(getItemId(hasSearch ? item.value : item.id));
-                                    if (el) {
-                                        focusRef.current(el);
-                                    }
-                                };
-                                if (visible) {
-                                    scrollCallback.current();
-                                    scrollCallback.current = undefined;
-                                }
-                            }
-                        }
-                    }
-                };
-                if (visible) {
-                    switch (e.code) {
-                        case 'ArrowUp': {
-                            e.preventDefault();
-                            focusItem('prev');
-                            break;
-                        }
-                        case 'ArrowDown': {
-                            e.preventDefault();
-                            focusItem('next');
-                            break;
-                        }
-                        case 'ArrowLeft': {
-                            if (!hasSearch) {
-                                e.preventDefault();
-                                focusItem('prev-level');
-                            }
-                            break;
-                        }
-                        case 'ArrowRight': {
-                            if (!hasSearch) {
-                                e.preventDefault();
-                                focusItem('next-level');
-                            }
-                            break;
-                        }
-                        case 'Home': {
-                            e.preventDefault();
-                            focusItem('first');
-                            break;
-                        }
-                        case 'End': {
-                            e.preventDefault();
-                            focusItem('last');
-                            break;
-                        }
-                        default: {
-                            if (e.code === 'Enter' || (e.code === 'Space' && !searchable)) {
-                                e.preventDefault();
-                                if (hasSearch) {
-                                    if (itemFocusedWithSearch) {
-                                        changeSelectedByClickWithSearch(itemFocusedWithSearch);
-                                    }
-                                }
-                                else {
-                                    if (itemFocusedWithoutSearch) {
-                                        changeSelectedByClickWithoutSearch(itemFocusedWithoutSearch);
-                                    }
-                                }
-                            }
-                            break;
-                        }
-                    }
-                }
-                else if (!(searchable && ['Home', 'End', 'Enter', 'Space'].includes(e.code))) {
-                    switch (e.code) {
-                        case 'End':
-                        case 'ArrowUp': {
-                            e.preventDefault();
-                            changeVisible(true);
-                            focusItem('last');
-                            break;
-                        }
-                        case 'Home':
-                        case 'ArrowDown': {
-                            e.preventDefault();
-                            changeVisible(true);
-                            focusItem('first');
-                            break;
-                        }
-                        case 'Enter':
-                        case 'Space': {
-                            e.preventDefault();
-                            changeVisible(true);
-                            break;
-                        }
-                        default: {
-                            if (isPrintableCharacter(e.key)) {
-                                changeVisible(true);
-                            }
-                            break;
-                        }
-                    }
-                }
-            }
-        } }), searchable
-        ? {
-            type: 'text',
-            value: searchValue,
-            autoComplete: 'off',
-            disabled,
-            onValueChange: (val) => {
-                changeSearchValue(val);
-            },
-        }
-        : {})));
     const [selectedNode, suffixNode, selectedLabel] = (() => {
         let selectedNode = null;
         let suffixNode = null;
@@ -372,7 +229,7 @@ function CascaderFC(props, ref) {
                         draft.splice(draft.findIndex((v) => v === id), 1);
                     });
                     return false;
-                }, children: _jsx(Tag, { tabIndex: -1, size: size, children: selected.size }) }));
+                }, children: (dropdownProps) => (_jsx(Tag, Object.assign({}, dropdownProps, { tabIndex: -1, size: size, children: selected.size }))) }));
             selectedNode = selectedNodes.map(({ value, label, node }) => (_jsxs(Tag, { size: size, children: [label, !((node === null || node === void 0 ? void 0 : node.disabled) || disabled) && (_jsx("div", Object.assign({}, styled('cascader__close'), { role: "button", "aria-label": t('Close'), onClick: (e) => {
                             e.stopPropagation();
                             const checkeds = node.changeStatus('UNCHECKED', selected);
@@ -398,7 +255,12 @@ function CascaderFC(props, ref) {
             }), {
                 className: restProps.className,
                 style: restProps.style,
-            }), designProps, { ref: boxRef, onMouseDown: (e) => {
+            }), designProps, { ref: (instance) => {
+                    boxRef.current = instance;
+                    return () => {
+                        boxRef.current = null;
+                    };
+                }, onMouseDown: (e) => {
                     var _a;
                     (_a = restProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
                     preventBlur(e);
@@ -411,7 +273,158 @@ function CascaderFC(props, ref) {
                     (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
                     (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true });
                     changeVisible((draft) => (searchable ? true : !draft));
-                }, children: [_jsxs("div", Object.assign({}, styled('cascader__container'), { title: selectedLabel, children: [inputRender ? inputRender(inputNode) : inputNode, !inputable &&
+                }, children: [_jsxs("div", Object.assign({}, styled('cascader__container'), { title: selectedLabel, children: [(() => {
+                                const nodeProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, inputProps), mergeCS(styled('cascader__search'), {
+                                    style: {
+                                        opacity: inputable ? undefined : 0,
+                                        zIndex: inputable ? undefined : -1,
+                                    },
+                                })), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria), { ref: (instance) => {
+                                        inputRef.current = instance;
+                                        const ret = setRef(inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref, instance);
+                                        return () => {
+                                            inputRef.current = null;
+                                            ret();
+                                        };
+                                    }, tabIndex: disabled ? -1 : 0, role: 'combobox', 'aria-haspopup': 'listbox', 'aria-expanded': visible, 'aria-controls': listId, onFocus: (e) => {
+                                        var _a;
+                                        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+                                        focusVisibleProps.onFocus(e);
+                                    }, onBlur: (e) => {
+                                        var _a;
+                                        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+                                        focusVisibleProps.onBlur(e);
+                                        changeVisible(false);
+                                    }, onKeyDown: (e) => {
+                                        var _a;
+                                        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+                                        focusVisibleProps.onKeyDown(e);
+                                        if (e.code === 'Escape') {
+                                            if (visible && escClosable) {
+                                                e.stopPropagation();
+                                                e.preventDefault();
+                                                changeVisible(false);
+                                            }
+                                        }
+                                        else {
+                                            const focusItem = (code) => {
+                                                if (focusRef.current) {
+                                                    const item = focusRef.current(code);
+                                                    if (item) {
+                                                        hasSearch ? changeItemFocusedWithSearch(item) : changeItemFocusedWithoutSearch(item);
+                                                        if (virtual === false && !code.includes('level')) {
+                                                            scrollCallback.current = () => {
+                                                                scrollCallback.current = () => { };
+                                                                const el = document.getElementById(getItemId(hasSearch ? item.value : item.id));
+                                                                if (el) {
+                                                                    focusRef.current(el);
+                                                                }
+                                                            };
+                                                            if (visible) {
+                                                                scrollCallback.current();
+                                                            }
+                                                        }
+                                                    }
+                                                }
+                                            };
+                                            if (visible) {
+                                                switch (e.code) {
+                                                    case 'ArrowUp': {
+                                                        e.preventDefault();
+                                                        focusItem('prev');
+                                                        break;
+                                                    }
+                                                    case 'ArrowDown': {
+                                                        e.preventDefault();
+                                                        focusItem('next');
+                                                        break;
+                                                    }
+                                                    case 'ArrowLeft': {
+                                                        if (!hasSearch) {
+                                                            e.preventDefault();
+                                                            focusItem('prev-level');
+                                                        }
+                                                        break;
+                                                    }
+                                                    case 'ArrowRight': {
+                                                        if (!hasSearch) {
+                                                            e.preventDefault();
+                                                            focusItem('next-level');
+                                                        }
+                                                        break;
+                                                    }
+                                                    case 'Home': {
+                                                        e.preventDefault();
+                                                        focusItem('first');
+                                                        break;
+                                                    }
+                                                    case 'End': {
+                                                        e.preventDefault();
+                                                        focusItem('last');
+                                                        break;
+                                                    }
+                                                    default: {
+                                                        if (e.code === 'Enter' || (e.code === 'Space' && !searchable)) {
+                                                            e.preventDefault();
+                                                            if (hasSearch) {
+                                                                if (itemFocusedWithSearch) {
+                                                                    changeSelectedByClickWithSearch(itemFocusedWithSearch);
+                                                                }
+                                                            }
+                                                            else {
+                                                                if (itemFocusedWithoutSearch) {
+                                                                    changeSelectedByClickWithoutSearch(itemFocusedWithoutSearch);
+                                                                }
+                                                            }
+                                                        }
+                                                        break;
+                                                    }
+                                                }
+                                            }
+                                            else if (!(searchable && ['Home', 'End', 'Enter', 'Space'].includes(e.code))) {
+                                                switch (e.code) {
+                                                    case 'End':
+                                                    case 'ArrowUp': {
+                                                        e.preventDefault();
+                                                        changeVisible(true);
+                                                        focusItem('last');
+                                                        break;
+                                                    }
+                                                    case 'Home':
+                                                    case 'ArrowDown': {
+                                                        e.preventDefault();
+                                                        changeVisible(true);
+                                                        focusItem('first');
+                                                        break;
+                                                    }
+                                                    case 'Enter':
+                                                    case 'Space': {
+                                                        e.preventDefault();
+                                                        changeVisible(true);
+                                                        break;
+                                                    }
+                                                    default: {
+                                                        if (isPrintableCharacter(e.key)) {
+                                                            changeVisible(true);
+                                                        }
+                                                        break;
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    } }), searchable
+                                    ? {
+                                        type: 'text',
+                                        value: searchValue,
+                                        autoComplete: 'off',
+                                        disabled,
+                                        onValueChange: (val) => {
+                                            changeSearchValue(val);
+                                        },
+                                    }
+                                    : {});
+                                return searchable ? _jsx(BaseInput, Object.assign({}, nodeProps)) : _jsx("div", Object.assign({}, nodeProps));
+                            })(), !inputable &&
                                 (hasSelected ? (_jsx("div", Object.assign({}, styled('cascader__content'), { children: selectedNode }))) : placeholder ? (_jsx("div", Object.assign({}, styled('cascader__placeholder-wrapper'), { children: _jsx("div", Object.assign({}, styled('cascader__placeholder'), { children: placeholder })) }))) : null)] })), multiple && (_jsx("div", Object.assign({}, styled('cascader__multiple-count'), { onClick: (e) => {
                             e.stopPropagation();
                         }, children: suffixNode }))), clearable && (_jsx("div", Object.assign({}, styled('cascader__clear'), { role: "button", "aria-label": t('Clear'), onClick: (e) => {
@@ -433,56 +446,46 @@ function CascaderFC(props, ref) {
                         document.body.appendChild(el);
                     }
                     return el;
-                }, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_POPUP, afterRender: () => {
-                        var _a;
+                }, children: _jsx(Transition, { enter: visible, name: `${namespace}-popup-down`, duration: TTANSITION_DURING_POPUP, onSkipEnter: () => {
+                        updatePosition();
+                        scrollCallback.current();
+                    }, onBeforeEnter: () => {
                         updatePosition();
-                        (_a = scrollCallback.current) === null || _a === void 0 ? void 0 : _a.call(scrollCallback);
-                        scrollCallback.current = undefined;
-                    }, afterEnter: () => {
+                        scrollCallback.current();
+                    }, onAfterEnter: () => {
                         afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
-                    }, afterLeave: () => {
+                    }, onAfterLeave: () => {
                         afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(false);
-                    }, children: (state) => {
-                        let transitionStyle = {};
-                        switch (state) {
-                            case 'enter':
-                                transitionStyle = { transform: 'scaleY(0.7)', opacity: 0 };
-                                break;
-                            case 'entering':
-                                transitionStyle = {
-                                    transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-out`).join(', '),
-                                    transformOrigin: transformOrigin.current,
-                                };
-                                break;
-                            case 'leaving':
-                                transitionStyle = {
-                                    transform: 'scaleY(0.7)',
-                                    opacity: 0,
-                                    transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-in`).join(', '),
-                                    transformOrigin: transformOrigin.current,
-                                };
-                                break;
-                            case 'leaved':
-                                transitionStyle = { display: 'none' };
-                                break;
-                            default:
-                                break;
-                        }
-                        return (_jsx("div", Object.assign({}, mergeCS(styled('cascader-popup'), {
-                            style: Object.assign({ zIndex }, transitionStyle),
-                        }), { ref: popupRef, onMouseDown: (e) => {
-                                preventBlur(e);
-                            }, onMouseUp: (e) => {
-                                preventBlur(e);
-                            }, children: (() => {
-                                const el = (_jsxs("div", Object.assign({}, styled('cascader-popup__content'), { children: [loading && (_jsx("div", Object.assign({}, styled('cascader-popup__loading', {
-                                            'cascader-popup__loading--empty': isEmpty,
-                                        }), { children: _jsx(Icon, { children: _jsx(CircularProgress, {}) }) }))), loading && isEmpty ? null : hasSearch ? (_jsx(CascaderSearchPanel, { ref: focusRef, namespace: namespace, styled: styled, id: listId, list: searchList, customItem: customItem, itemId: getItemId, itemFocused: itemFocusedWithSearch, multiple: multiple, onlyLeafSelectable: onlyLeafSelectable, virtual: virtual, focusVisible: focusVisible, onClick: (item) => {
-                                                changeItemFocusedWithSearch(item);
-                                                changeSelectedByClickWithSearch(item);
-                                            } })) : (_jsx(CascaderPanel, { ref: focusRef, namespace: namespace, styled: styled, id: listId, list: nodes, customItem: customItem, itemId: getItemId, itemSelected: !multiple && hasSelected ? nodesMap.get(selected) : undefined, itemFocused: itemFocusedWithoutSearch, multiple: multiple, virtual: virtual, focusVisible: focusVisible, onFocus: changeItemFocusedWithoutSearch, onClick: changeSelectedByClickWithoutSearch }))] })));
-                                return popupRender ? popupRender(el) : el;
-                            })() })));
-                    } }) })] }));
+                    }, children: (transitionRef, leaved) => (_jsx("div", Object.assign({}, mergeCS(styled('cascader-popup'), {
+                        style: Object.assign({ zIndex }, (leaved ? { display: 'none' } : undefined)),
+                    }), { ref: (instance) => {
+                            popupRef.current = instance;
+                            transitionRef(instance);
+                            return () => {
+                                popupRef.current = null;
+                                transitionRef(null);
+                            };
+                        }, onMouseDown: (e) => {
+                            preventBlur(e);
+                        }, onMouseUp: (e) => {
+                            preventBlur(e);
+                        }, children: (() => {
+                            const el = (_jsxs("div", Object.assign({}, styled('cascader-popup__content'), { children: [loading && (_jsx("div", Object.assign({}, styled('cascader-popup__loading', {
+                                        'cascader-popup__loading--empty': isEmpty,
+                                    }), { children: _jsx(Icon, { children: _jsx(CircularProgress, {}) }) }))), loading && isEmpty ? null : hasSearch ? (_jsx(CascaderSearchPanel, { ref: (instance) => {
+                                            focusRef.current = instance;
+                                            return () => {
+                                                focusRef.current = null;
+                                            };
+                                        }, namespace: namespace, styled: styled, id: listId, list: searchList, customItem: customItem, itemId: getItemId, itemFocused: itemFocusedWithSearch, multiple: multiple, onlyLeafSelectable: onlyLeafSelectable, virtual: virtual, focusVisible: focusVisible, onClick: (item) => {
+                                            changeItemFocusedWithSearch(item);
+                                            changeSelectedByClickWithSearch(item);
+                                        } })) : (_jsx(CascaderPanel, { ref: (instance) => {
+                                            focusRef.current = instance;
+                                            return () => {
+                                                focusRef.current = null;
+                                            };
+                                        }, namespace: namespace, styled: styled, id: listId, list: nodes, customItem: customItem, itemId: getItemId, itemSelected: !multiple && hasSelected ? nodesMap.get(selected) : undefined, itemFocused: itemFocusedWithoutSearch, multiple: multiple, virtual: virtual, focusVisible: focusVisible, onFocus: changeItemFocusedWithoutSearch, onClick: changeSelectedByClickWithoutSearch }))] })));
+                            return popupRender ? popupRender(el) : el;
+                        })() }))) }) })] }));
 }
-export const Cascader = forwardRef(CascaderFC);

package/cascader/internal/CascaderPanel.d.ts

@@ -4,6 +4,7 @@ import type { AbstractTreeNode } from '../../tree/node/abstract-node';
 import type { CascaderItem } from '../types';
 import type { CLASSES } from '../vars';
 interface CascaderPanelProps<V extends React.Key, T extends CascaderItem<V>> {
+    ref?: React.Ref<(code: any) => AbstractTreeNode<V, T> | undefined>;
     namespace: string;
     styled: Styled<typeof CLASSES>;
     id: string | undefined;
@@ -18,6 +19,5 @@ interface CascaderPanelProps<V extends React.Key, T extends CascaderItem<V>> {
     onFocus: (item: AbstractTreeNode<V, T>) => void;
     onClick: (item: AbstractTreeNode<V, T>) => void;
 }
-declare function CascaderPanelFC<V extends React.Key, T extends CascaderItem<V>>(props: CascaderPanelProps<V, T>, ref: React.ForwardedRef<any>): JSX.Element | null;
-export declare const CascaderPanel: <V extends React.Key, T extends CascaderItem<V>>(props: CascaderPanelProps<V, T> & React.RefAttributes<any>) => ReturnType<typeof CascaderPanelFC>;
+export declare function CascaderPanel<V extends React.Key, T extends CascaderItem<V>>(props: CascaderPanelProps<V, T>): React.ReactElement | null;
 export {};

package/cascader/internal/CascaderPanel.js

@@ -4,14 +4,14 @@ import { useEventCallback } from '@laser-ui/hooks';
 import { scrollIntoViewIfNeeded } from '@laser-ui/utils';
 import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
 import { isNumber, isUndefined } from 'lodash';
-import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import { useImperativeHandle, useMemo, useRef } from 'react';
 import { Checkbox } from '../../checkbox';
+import { CircularProgress } from '../../circular-progress';
 import { Empty } from '../../empty';
 import { Icon } from '../../icon';
-import { CircularProgress } from '../../internal/circular-progress';
 import { VirtualScroll } from '../../virtual-scroll';
-function CascaderPanelFC(props, ref) {
-    const { namespace, styled, id, list, customItem, itemId, itemSelected, itemFocused, multiple, virtual, focusVisible, onFocus, onClick, _root = true, } = props;
+export function CascaderPanel(props) {
+    const { ref, namespace, styled, id, list, customItem, itemId, itemSelected, itemFocused, multiple, virtual, focusVisible, onFocus, onClick, _root = true, } = props;
     const listRef = useRef(null);
     const vsRef = useRef(null);
     const focusRef = useRef(null);
@@ -99,7 +99,12 @@ function CascaderPanelFC(props, ref) {
         itemSize: isNumber(virtual) ? virtual : 32,
         itemFocusable: (item) => item.enabled,
     }), [list, virtual]);
-    return (_jsxs(_Fragment, { children: [_jsx(VirtualScroll, Object.assign({}, vsProps, { ref: vsRef, enable: virtual !== false, listSize: 264, listPadding: 4, itemRender: (item, index, props) => {
+    return (_jsxs(_Fragment, { children: [_jsx(VirtualScroll, Object.assign({}, vsProps, { ref: (instance) => {
+                    vsRef.current = instance;
+                    return () => {
+                        vsRef.current = null;
+                    };
+                }, enable: virtual !== false, listSize: 264, listPadding: 4, itemRender: (item, index, props) => {
                     let isSelectedAncestry = false;
                     if (item.children && itemSelected) {
                         let node = itemSelected;
@@ -130,6 +135,15 @@ function CascaderPanelFC(props, ref) {
                                 } }) }))),
                         _jsx("div", Object.assign({}, styled('cascader__option-content'), { children: customItem ? customItem(item.origin) : item.origin.label })),
                         !item.isLeaf && (_jsx("div", Object.assign({}, styled('cascader__option-icon'), { children: _jsx(Icon, { children: item.origin.loading ? _jsx(CircularProgress, {}) : _jsx(KeyboardArrowRightOutlined, {}) }) })))));
-                }, itemFocused: nodeFocused === null || nodeFocused === void 0 ? void 0 : nodeFocused.id, placeholder: "li", children: (vsList, onScroll) => (_jsx("ul", Object.assign({}, styled('cascader__list', 'cascader__list--inline'), { ref: listRef, id: id, tabIndex: -1, role: "listbox", "aria-multiselectable": multiple, "aria-activedescendant": _root && !isUndefined(itemFocused) ? itemId(itemFocused.id) : undefined, onScroll: onScroll, children: list.length === 0 ? _jsx(Empty, { style: { padding: '12px 28px' }, image: Empty.SIMPLE_IMG }) : vsList }))) })), nodeFocused && !nodeFocused.origin.loading && nodeFocused.children && (_jsx(CascaderPanel, Object.assign({}, props, { _root: false, ref: focusRef, id: undefined, list: nodeFocused.children })))] }));
+                }, itemFocused: nodeFocused === null || nodeFocused === void 0 ? void 0 : nodeFocused.id, placeholder: "li", children: (vsList, onScroll) => (_jsx("ul", Object.assign({}, styled('cascader__list', 'cascader__list--inline'), { ref: (instance) => {
+                        listRef.current = instance;
+                        return () => {
+                            listRef.current = null;
+                        };
+                    }, id: id, tabIndex: -1, role: "listbox", "aria-multiselectable": multiple, "aria-activedescendant": _root && !isUndefined(itemFocused) ? itemId(itemFocused.id) : undefined, onScroll: onScroll, children: list.length === 0 ? _jsx(Empty, { style: { padding: '12px 28px' }, image: Empty.SIMPLE_IMG }) : vsList }))) })), nodeFocused && !nodeFocused.origin.loading && nodeFocused.children && (_jsx(CascaderPanel, Object.assign({}, props, { _root: false, ref: (instance) => {
+                    focusRef.current = instance;
+                    return () => {
+                        focusRef.current = null;
+                    };
+                }, id: undefined, list: nodeFocused.children })))] }));
 }
-export const CascaderPanel = forwardRef(CascaderPanelFC);

package/cascader/internal/CascaderSearchPanel.d.ts

@@ -4,6 +4,7 @@ import type { Styled } from '../../hooks/useStyled';
 import type { CascaderItem } from '../types';
 import type { CLASSES } from '../vars';
 interface CascaderSearchPanelProps<V extends React.Key, T extends CascaderItem<V>> {
+    ref?: React.Ref<(code: any) => CascaderSearchPanelItem<V, T> | undefined>;
     namespace: string;
     styled: Styled<typeof CLASSES>;
     id: string;
@@ -17,6 +18,5 @@ interface CascaderSearchPanelProps<V extends React.Key, T extends CascaderItem<V
     focusVisible: boolean;
     onClick: (item: CascaderSearchPanelItem<V, T>) => void;
 }
-declare function CascaderSearchPanelFC<V extends React.Key, T extends CascaderItem<V>>(props: CascaderSearchPanelProps<V, T>, ref: React.ForwardedRef<any>): JSX.Element | null;
-export declare const CascaderSearchPanel: <V extends React.Key, T extends CascaderItem<V>>(props: CascaderSearchPanelProps<V, T> & React.RefAttributes<any>) => ReturnType<typeof CascaderSearchPanelFC>;
+export declare function CascaderSearchPanel<V extends React.Key, T extends CascaderItem<V>>(props: CascaderSearchPanelProps<V, T>): React.ReactElement | null;
 export {};