@laser-ui/components 0.0.1

package/cascader/Cascader.js

@@ -0,0 +1,487 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEvent, useEventCallback, useForkRef, useResize } from '@laser-ui/hooks';
+import { findNested } from '@laser-ui/utils';
+import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
+import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
+import { ReactComponent as KeyboardArrowDownOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg';
+import { ReactComponent as SearchOutlined } from '@material-design-icons/svg/outlined/search.svg';
+import { isNull, isUndefined } from 'lodash';
+import { createElement, forwardRef, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { CascaderPanel } from './internal/CascaderPanel';
+import { CascaderSearchPanel } from './internal/CascaderSearchPanel';
+import { CLASSES } from './vars';
+import { Dropdown } from '../dropdown';
+import { useComponentProps, useControlled, useDesign, useFocusVisible, useLayout, useListenGlobalScrolling, 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 { 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, 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", "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 { t } = useTranslation();
+    const uniqueId = useId();
+    const listId = `${namespace}-cascader-list-${uniqueId}`;
+    const getItemId = (val) => `${namespace}-cascader-item-${val}-${uniqueId}`;
+    const { pageScrollRef, contentResizeRef } = useLayout();
+    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 [nodes, nodesMap] = useMemo(() => {
+        const nodes = list.map((item) => multiple
+            ? new MultipleTreeNode(item, (origin) => origin.value, {
+                disabled: item.disabled,
+            })
+            : new SingleTreeNode(item, (origin) => origin.value, {
+                disabled: item.disabled,
+            }));
+        const nodesMap = new Map();
+        const reduceArr = (arr) => {
+            for (const item of arr) {
+                nodesMap.set(item.id, item);
+                if (item.children) {
+                    reduceArr(item.children);
+                }
+            }
+        };
+        reduceArr(nodes);
+        return [nodes, nodesMap];
+    }, [list, multiple]);
+    const [visible, changeVisible] = useControlled(defaultVisible !== null && defaultVisible !== void 0 ? defaultVisible : false, visibleProp, onVisibleChange);
+    const [searchValue, changeSearchValue] = useControlled(defaultSearchValue !== null && defaultSearchValue !== void 0 ? defaultSearchValue : '', searchValueProp, onSearch);
+    const [_selected, changeSelected] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : (multiple ? [] : null), model, (value) => {
+        if (onModelChange) {
+            if (multiple) {
+                onModelChange(value, value.map((v) => nodesMap.get(v).origin));
+            }
+            else {
+                onModelChange(value, isNull(value) ? null : nodesMap.get(value).origin);
+            }
+        }
+    }, undefined, formControl === null || formControl === void 0 ? void 0 : formControl.control);
+    const selected = useMemo(() => (multiple ? new Set(_selected) : _selected), [_selected, multiple]);
+    const changeSelectedByClickWithoutSearch = (node) => {
+        if (multiple) {
+            const checkeds = node.changeStatus(node.checked ? 'UNCHECKED' : 'CHECKED', selected);
+            changeSelected(Array.from(checkeds.keys()));
+        }
+        else {
+            if (node.isLeaf || !onlyLeafSelectable) {
+                changeSelected(node.id);
+            }
+            if (node.isLeaf) {
+                changeVisible(false);
+            }
+        }
+    };
+    const changeSelectedByClickWithSearch = (item) => {
+        if (multiple) {
+            const checkeds = item[TREE_NODE_KEY].changeStatus(item[TREE_NODE_KEY].checked ? 'UNCHECKED' : 'CHECKED', selected);
+            changeSelected(Array.from(checkeds.keys()));
+        }
+        else {
+            changeSelected(item[TREE_NODE_KEY].id);
+            changeVisible(false);
+        }
+    };
+    nodesMap.forEach((node) => {
+        node.updateStatus(selected);
+    });
+    const { size, disabled } = useScopedProps({ size: sizeProp, disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
+    const hasSearch = searchValue.length > 0;
+    const hasSelected = multiple ? selected.size > 0 : !isNull(selected);
+    const searchList = (() => {
+        if (!hasSearch) {
+            return [];
+        }
+        const filterFn = isUndefined(customSearch === null || customSearch === void 0 ? void 0 : customSearch.filter)
+            ? (item) => item.label.includes(searchValue)
+            : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                (item) => customSearch.filter(searchValue, item);
+        const sortFn = customSearch === null || customSearch === void 0 ? void 0 : customSearch.sort;
+        const searchList = [];
+        const reduceNodes = (nodes) => {
+            nodes.forEach((node) => {
+                if ((!multiple && !onlyLeafSelectable) || node.isLeaf) {
+                    if (filterFn(node.origin)) {
+                        searchList.push({
+                            label: getTreeNodeLabel(node),
+                            value: node.id,
+                            disabled: node.disabled,
+                            [TREE_NODE_KEY]: node,
+                        });
+                    }
+                }
+                if (node.children) {
+                    reduceNodes(node.children);
+                }
+            });
+        };
+        reduceNodes(nodes);
+        if (sortFn) {
+            searchList.sort((a, b) => sortFn(a[TREE_NODE_KEY].origin, b[TREE_NODE_KEY].origin));
+        }
+        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 [_itemFocusedWithoutSearch, setItemFocusedWithoutSearch] = useState();
+    const changeItemFocusedWithoutSearch = (node) => {
+        if (!dataRef.current.itemFocused.has(node.id)) {
+            dataRef.current.itemFocused.add(node.id);
+            onFirstFocus === null || onFirstFocus === void 0 ? void 0 : onFirstFocus(node.id, node.origin);
+        }
+        setItemFocusedWithoutSearch(node);
+    };
+    const itemFocusedWithoutSearch = (() => {
+        if (_itemFocusedWithoutSearch) {
+            const node = nodesMap.get(_itemFocusedWithoutSearch.id);
+            if (node && node.enabled) {
+                return node;
+            }
+        }
+        if (hasSelected) {
+            return findNested(nodes, (node) => node.enabled && node.checked);
+        }
+    })();
+    const [_itemFocusedWithSearch, setItemFocusedWithSearch] = useState();
+    const changeItemFocusedWithSearch = (item) => {
+        if (!dataRef.current.itemFocused.has(item.value)) {
+            dataRef.current.itemFocused.add(item.value);
+            onFirstFocus === null || onFirstFocus === void 0 ? void 0 : onFirstFocus(item.value, item[TREE_NODE_KEY].origin);
+        }
+        setItemFocusedWithSearch(item);
+    };
+    const itemFocusedWithSearch = (() => {
+        if (_itemFocusedWithSearch &&
+            findNested(searchList, (item) => item[TREE_NODE_KEY].enabled && item.value === _itemFocusedWithSearch.value)) {
+            return _itemFocusedWithSearch;
+        }
+        if (hasSearch) {
+            return findNested(searchList, (item) => item[TREE_NODE_KEY].enabled);
+        }
+    })();
+    const maxZIndex = useMaxIndex(visible);
+    const zIndex = `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
+    const [transformOrigin, setTransformOrigin] = useState();
+    const [popupPositionStyle, setPopupPositionStyle] = useState({
+        top: '-200vh',
+        left: '-200vw',
+    });
+    const updatePosition = useEventCallback(() => {
+        if (visible && boxRef.current && popupRef.current) {
+            const height = popupRef.current.offsetHeight;
+            const maxWidth = ROOT_DATA.windowSize.width - WINDOW_SPACE * 2;
+            const width = Math.min(popupRef.current.scrollWidth, maxWidth);
+            const position = getVerticalSidePosition(boxRef.current, { width, height }, {
+                placement: 'bottom-left',
+                inWindow: WINDOW_SPACE,
+            });
+            setTransformOrigin(position.transformOrigin);
+            setPopupPositionStyle({
+                top: position.top,
+                left: position.left,
+                maxWidth,
+            });
+        }
+    });
+    const listenGlobalScrolling = useListenGlobalScrolling(updatePosition, !visible);
+    useEvent(pageScrollRef, 'scroll', updatePosition, { passive: true }, !visible || listenGlobalScrolling);
+    useResize(boxRef, updatePosition, undefined, !visible);
+    useResize(popupRef, updatePosition, undefined, !visible);
+    useResize(contentResizeRef, updatePosition, undefined, !visible);
+    useImperativeHandle(ref, () => ({
+        updatePosition,
+    }), [updatePosition]);
+    const preventBlur = (e) => {
+        if (document.activeElement === inputRef.current && e.target !== inputRef.current && e.button === 0) {
+            e.preventDefault();
+        }
+    };
+    const scrollCallback = useRef();
+    const inputable = searchable && visible;
+    const clearable = clearableProp && hasSelected && !visible && !loading && !disabled;
+    const inputNode = focusVisibleWrapper(createElement(searchable ? 'input' : '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;
+                        }
+                    }
+                }
+            }
+        }, onChange: (e) => {
+            if (searchable) {
+                changeSearchValue(e.currentTarget.value);
+            }
+        } }), searchable
+        ? {
+            type: 'text',
+            value: searchValue,
+            autoComplete: 'off',
+            disabled,
+        }
+        : {})));
+    const [selectedNode, suffixNode, selectedLabel] = (() => {
+        let selectedNode = null;
+        let suffixNode = null;
+        let selectedLabel;
+        if (multiple) {
+            const selectedNodes = [];
+            for (const v of _selected) {
+                const node = nodesMap.get(v);
+                if (node) {
+                    selectedNodes.push(node);
+                }
+            }
+            suffixNode = (_jsx(Dropdown, { list: selectedNodes.map((node) => {
+                    const { value: itemValue, disabled: itemDisabled } = node.origin;
+                    const title = customSelected ? customSelected(node.origin) : getTreeNodeLabel(node);
+                    return {
+                        id: itemValue,
+                        title,
+                        type: 'item',
+                        disabled: itemDisabled,
+                        node,
+                    };
+                }), onClick: (id, item) => {
+                    const checkeds = item.node.changeStatus('UNCHECKED', selected);
+                    changeSelected(Array.from(checkeds.keys()));
+                    return false;
+                }, children: _jsx(Tag, { tabIndex: -1, size: size, children: selected.size }) }));
+            selectedNode = selectedNodes.map((node) => (_jsxs(Tag, { size: size, children: [customSelected ? customSelected(node.origin) : node.origin.label, !(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);
+                            changeSelected(Array.from(checkeds.keys()));
+                        }, children: _jsx(Icon, { children: _jsx(CloseOutlined, {}) }) })))] }, node.id)));
+        }
+        else {
+            if (!isNull(selected)) {
+                const node = nodesMap.get(selected);
+                if (node) {
+                    selectedLabel = getTreeNodeLabel(node);
+                    selectedNode = customSelected ? customSelected(node.origin) : selectedLabel;
+                }
+            }
+        }
+        return [selectedNode, suffixNode, selectedLabel];
+    })();
+    const designProps = useDesign({ compose: { disabled }, form: formControl });
+    return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({}, restProps, mergeCS(styled('cascader', `cascader--${size}`, {
+                'cascader.is-expanded': visible,
+                'cascader.is-disabled': disabled,
+            }), {
+                className: restProps.className,
+                style: restProps.style,
+            }), designProps, { ref: boxRef, onMouseDown: (e) => {
+                    var _a;
+                    (_a = restProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                    preventBlur(e);
+                }, onMouseUp: (e) => {
+                    var _a;
+                    (_a = restProps.onMouseUp) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                    preventBlur(e);
+                }, onClick: (e) => {
+                    var _a, _b;
+                    (_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 &&
+                                (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) => {
+                            e.stopPropagation();
+                            onClear === null || onClear === void 0 ? void 0 : onClear();
+                            if (multiple) {
+                                changeSelected([]);
+                            }
+                            else {
+                                changeSelected(null);
+                            }
+                        }, children: _jsx(Icon, { children: _jsx(CancelFilled, {}) }) }))), _jsx("div", Object.assign({}, mergeCS(styled('cascader__icon'), {
+                        style: { visibility: clearable ? 'hidden' : undefined },
+                    }), { children: _jsx(Icon, { children: loading ? _jsx(CircularProgress, {}) : inputable ? _jsx(SearchOutlined, {}) : _jsx(KeyboardArrowDownOutlined, Object.assign({}, styled('cascader__arrow'))) }) }))] })), _jsx(Portal, { selector: () => {
+                    let el = document.getElementById(`${namespace}-cascader-root`);
+                    if (!el) {
+                        el = document.createElement('div');
+                        el.id = `${namespace}-cascader-root`;
+                        document.body.appendChild(el);
+                    }
+                    return el;
+                }, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_POPUP, afterRender: () => {
+                        var _a;
+                        updatePosition();
+                        (_a = scrollCallback.current) === null || _a === void 0 ? void 0 : _a.call(scrollCallback);
+                        scrollCallback.current = undefined;
+                    }, afterEnter: () => {
+                        afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
+                    }, afterLeave: () => {
+                        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,
+                                };
+                                break;
+                            case 'leaving':
+                                transitionStyle = {
+                                    transform: 'scaleY(0.7)',
+                                    opacity: 0,
+                                    transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-in`).join(', '),
+                                    transformOrigin,
+                                };
+                                break;
+                            case 'leaved':
+                                transitionStyle = { display: 'none' };
+                                break;
+                            default:
+                                break;
+                        }
+                        return (_jsxs("div", Object.assign({}, mergeCS(styled('cascader-popup'), {
+                            style: Object.assign(Object.assign({ zIndex }, popupPositionStyle), transitionStyle),
+                        }), { ref: popupRef, onMouseDown: (e) => {
+                                preventBlur(e);
+                            }, onMouseUp: (e) => {
+                                preventBlur(e);
+                            }, 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 }))] })));
+                    } }) })] }));
+}
+export const Cascader = forwardRef(CascaderFC);

package/cascader/index.d.ts

@@ -0,0 +1,2 @@
+export type { CascaderRef, CascaderProps } from './types';
+export { Cascader } from './Cascader';

package/cascader/index.js

@@ -0,0 +1 @@
+export { Cascader } from './Cascader';

package/cascader/internal/CascaderPanel.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { Styled } from '../../hooks/useStyled';
+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>> {
+    namespace: string;
+    styled: Styled<typeof CLASSES>;
+    id: string | undefined;
+    list: AbstractTreeNode<V, T>[];
+    customItem: ((item: T) => React.ReactNode) | undefined;
+    itemId: (value: V) => string;
+    itemSelected: AbstractTreeNode<V, T> | undefined;
+    itemFocused: AbstractTreeNode<V, T> | undefined;
+    multiple: boolean;
+    virtual: boolean | number;
+    focusVisible: boolean;
+    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 {};

package/cascader/internal/CascaderPanel.js

@@ -0,0 +1,135 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEventCallback } from '@laser-ui/hooks';
+import { scrollIntoViewIfNeeded } from '@laser-ui/utils';
+import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
+import { isNumber, isUndefined } from 'lodash';
+import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import { Checkbox } from '../../checkbox';
+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;
+    const listRef = useRef(null);
+    const vsRef = useRef(null);
+    const focusRef = useRef(null);
+    const isFocused = itemFocused && list.findIndex((node) => node.id === itemFocused.id) !== -1;
+    const nodeFocused = (() => {
+        if (itemFocused) {
+            for (const node of list) {
+                if (itemFocused.id === node.id) {
+                    return node;
+                }
+                let n = itemFocused;
+                while (n.parent) {
+                    n = n.parent;
+                    if (n.id === node.id) {
+                        return node;
+                    }
+                }
+            }
+        }
+    })();
+    const handleKeyDown = useEventCallback((code) => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (listRef.current) {
+            let item;
+            if (_root && isUndefined(itemFocused)) {
+                switch (code) {
+                    case 'first':
+                    case 'next':
+                        item = (_a = vsRef.current) === null || _a === void 0 ? void 0 : _a.scrollToStart(listRef.current);
+                        break;
+                    case 'last':
+                    case 'prev':
+                        item = (_b = vsRef.current) === null || _b === void 0 ? void 0 : _b.scrollToEnd(listRef.current);
+                        break;
+                    default:
+                        break;
+                }
+            }
+            else if (isFocused) {
+                switch (code) {
+                    case 'next':
+                        item = (_c = vsRef.current) === null || _c === void 0 ? void 0 : _c.scrollToStep(listRef.current, 1);
+                        break;
+                    case 'prev':
+                        item = (_d = vsRef.current) === null || _d === void 0 ? void 0 : _d.scrollToStep(listRef.current, -1);
+                        break;
+                    case 'first':
+                        item = (_e = vsRef.current) === null || _e === void 0 ? void 0 : _e.scrollToStart(listRef.current);
+                        break;
+                    case 'last':
+                        item = (_f = vsRef.current) === null || _f === void 0 ? void 0 : _f.scrollToEnd(listRef.current);
+                        break;
+                    case 'prev-level':
+                        if (nodeFocused && nodeFocused.parent) {
+                            item = nodeFocused.parent;
+                        }
+                        break;
+                    case 'next-level':
+                        if (nodeFocused && nodeFocused.children) {
+                            for (const node of nodeFocused.children) {
+                                if (node.enabled) {
+                                    item = node;
+                                    break;
+                                }
+                            }
+                        }
+                        break;
+                    default:
+                        if (code instanceof HTMLElement && listRef.current) {
+                            scrollIntoViewIfNeeded(code, listRef.current);
+                        }
+                        break;
+                }
+            }
+            else {
+                item = (_g = focusRef.current) === null || _g === void 0 ? void 0 : _g.call(focusRef, code);
+            }
+            return item;
+        }
+    });
+    useImperativeHandle(ref, () => handleKeyDown, [handleKeyDown]);
+    const vsProps = useMemo(() => ({
+        list,
+        itemKey: (item) => item.id,
+        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) => {
+                    let isSelectedAncestry = false;
+                    if (item.children && itemSelected) {
+                        let node = itemSelected;
+                        while (node.parent) {
+                            node = node.parent;
+                            if (node.id === item.id) {
+                                isSelectedAncestry = true;
+                                break;
+                            }
+                        }
+                    }
+                    return (_createElement("li", Object.assign({}, styled('cascader__option', {
+                        'cascader__option.is-focused': item.id === (nodeFocused === null || nodeFocused === void 0 ? void 0 : nodeFocused.id),
+                        'cascader__option.is-selected': !multiple && item.checked,
+                        'cascader__option.is-disabled': item.disabled,
+                    }), props, { key: item.id, id: itemId(item.id), title: item.origin.label, role: "option", "aria-selected": item.checked, "aria-disabled": item.disabled, onClick: () => {
+                            onFocus(item);
+                            if (!(multiple && !item.isLeaf)) {
+                                onClick(item);
+                            }
+                        } }),
+                        focusVisible && (itemFocused === null || itemFocused === void 0 ? void 0 : itemFocused.id) === item.id && _jsx("div", { className: `${namespace}-focus-outline` }),
+                        isSelectedAncestry && _jsx("div", Object.assign({}, styled('cascader__option-dot'))),
+                        multiple && (_jsx("div", Object.assign({}, styled('cascader__option-prefix'), { children: _jsx(Checkbox, { model: item.checked, disabled: item.disabled, indeterminate: item.indeterminate, onClick: (e) => {
+                                    e.stopPropagation();
+                                    onFocus(item);
+                                    onClick(item);
+                                } }) }))),
+                        _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 })))] }));
+}
+export const CascaderPanel = forwardRef(CascaderPanelFC);