@laser-ui/components 0.0.1

package/dropdown/Dropdown.js

@@ -0,0 +1,376 @@
+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 { isFunction, isNull, isNumber, isUndefined, nth } from 'lodash';
+import { Fragment, cloneElement, forwardRef, 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 { CLASSES } from './vars';
+import { useComponentProps, useControlled, useFocusVisible, useMaxIndex, useNamespace, useNestedPopup, useStyled, useTranslation, } from '../hooks';
+import { Popup } from '../internal/popup';
+import { Portal } from '../internal/portal';
+import { Transition } from '../internal/transition';
+import { Separator } from '../separator';
+import { getVerticalSidePosition, mergeCS } from '../utils';
+import { TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../vars';
+function DropdownFC(props, ref) {
+    var _a;
+    const _b = useComponentProps('Dropdown', props), { children, styleOverrides, styleProvider, list, visible: visibleProp, defaultVisible, trigger = 'hover', placement: placementProp = 'bottom-right', placementFixed = false, arrow = false, escClosable = true, zIndex: zIndexProp, onVisibleChange, afterVisibleChange, onClick } = _b, restProps = __rest(_b, ["children", "styleOverrides", "styleProvider", "list", "visible", "defaultVisible", "trigger", "placement", "placementFixed", "arrow", "escClosable", "zIndex", "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}`;
+    let triggerId;
+    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 dataRef = useRef({
+        updatePosition: new Map(),
+    });
+    const [focusVisible, focusVisibleWrapper] = useFocusVisible((code) => code.startsWith('Arrow') || ['Home', 'End', 'Enter', 'Space'].includes(code));
+    const [visible, changeVisible] = useControlled(defaultVisible !== null && defaultVisible !== void 0 ? defaultVisible : false, visibleProp, onVisibleChange);
+    const { popupIdsRef, setPopupIds, addPopupId, removePopupId } = useNestedPopup();
+    if (!visible) {
+        popupIdsRef.current = [];
+    }
+    const popupIds = popupIdsRef.current;
+    const [focusIds, setFocusIds] = useState([]);
+    const focusId = (() => {
+        var _a;
+        let id;
+        for (const [index, focusId] of focusIds.entries()) {
+            id = focusId;
+            if (((_a = nth(popupIds, index)) === null || _a === void 0 ? void 0 : _a.id) !== focusId) {
+                break;
+            }
+        }
+        return id;
+    })();
+    const focusFirst = () => {
+        const ids = [];
+        const reduceArr = (arr) => {
+            for (const item of arr) {
+                if (ids.length === 1) {
+                    break;
+                }
+                if (item.type === 'group' && item.children) {
+                    reduceArr(item.children);
+                }
+                else if (checkEnableItem(item)) {
+                    ids.push(item.id);
+                }
+            }
+        };
+        reduceArr(list);
+        setFocusIds(ids);
+    };
+    const focusLast = () => {
+        const ids = [];
+        const reduceArr = (arr) => {
+            for (let index = arr.length - 1; index >= 0; index--) {
+                if (ids.length === 1) {
+                    break;
+                }
+                const item = arr[index];
+                if (item.type === 'group' && item.children) {
+                    reduceArr(item.children);
+                }
+                else if (checkEnableItem(item)) {
+                    ids.push(item.id);
+                }
+            }
+        };
+        reduceArr(list);
+        setFocusIds(ids);
+    };
+    const maxZIndex = useMaxIndex(visible);
+    const zIndex = !isUndefined(zIndexProp) ? zIndexProp : `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
+    const [transformOrigin, setTransformOrigin] = useState();
+    const [popupPositionStyle, setPopupPositionStyle] = useState({
+        top: '-200vh',
+        left: '-200vw',
+    });
+    const [placement, setPlacement] = useState(placementProp);
+    const updatePosition = useEventCallback(() => {
+        if (visible && triggerRef.current && popupRef.current) {
+            const [width, height] = [popupRef.current.offsetWidth, popupRef.current.offsetHeight];
+            const position = getVerticalSidePosition(triggerRef.current, { width, height }, {
+                placement: placementProp,
+                placementFixed,
+                inWindow: WINDOW_SPACE,
+            });
+            setTransformOrigin(position.transformOrigin);
+            setPopupPositionStyle({
+                top: position.top,
+                left: position.left,
+            });
+            setPlacement(position.placement);
+        }
+    });
+    const preventBlur = (e) => {
+        if (e.button === 0) {
+            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: (fn) => {
+                            if (isNull(fn)) {
+                                dataRef.current.updatePosition.delete(itemId);
+                            }
+                            else {
+                                dataRef.current.updatePosition.set(itemId, fn);
+                            }
+                        }, namespace: namespace, styled: styled, dropdownRef: dropdownRef, 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, []);
+    })();
+    useImperativeHandle(ref, () => ({
+        updatePosition: () => {
+            updatePosition();
+            for (const fn of dataRef.current.updatePosition.values()) {
+                fn();
+            }
+        },
+    }), [updatePosition]);
+    return (_jsx(Popup, { visible: visible, trigger: trigger, updatePosition: {
+            fn: updatePosition,
+            triggerRef,
+            popupRef,
+            containerRefs: [],
+        }, onVisibleChange: changeVisible, children: ({ renderTrigger, renderPopup }) => {
+            const render = (el) => {
+                var _a, _b;
+                triggerId = (_a = el.props.id) !== null && _a !== void 0 ? _a : `${namespace}-dropdown-trigger-${uniqueId}`;
+                return renderTrigger(focusVisibleWrapper(cloneElement(el, {
+                    id: triggerId,
+                    tabIndex: (_b = el.props.tabIndex) !== null && _b !== void 0 ? _b : 0,
+                    'aria-haspopup': 'menu',
+                    'aria-expanded': visible,
+                    'aria-controls': id,
+                    onFocus: (e) => {
+                        var _a, _b;
+                        (_b = (_a = el.props).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                        focusFirst();
+                    },
+                    onBlur: (e) => {
+                        var _a, _b;
+                        (_b = (_a = el.props).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                        changeVisible(false);
+                    },
+                    onKeyDown: (e) => {
+                        var _a, _b;
+                        (_b = (_a = el.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                        if (visible) {
+                            if (escClosable && e.code === 'Escape') {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                changeVisible(false);
+                            }
+                            else {
+                                handleKeyDown === null || handleKeyDown === void 0 ? void 0 : handleKeyDown(e);
+                            }
+                        }
+                        else {
+                            switch (e.code) {
+                                case 'Enter':
+                                case 'Space':
+                                case 'ArrowDown':
+                                    e.preventDefault();
+                                    focusFirst();
+                                    changeVisible(true);
+                                    break;
+                                case 'ArrowUp':
+                                    e.preventDefault();
+                                    focusLast();
+                                    changeVisible(true);
+                                    break;
+                                default:
+                                    break;
+                            }
+                        }
+                    },
+                })));
+            };
+            return (_jsxs(_Fragment, { children: [isFunction(children) ? children(render) : render(children), _jsx(Portal, { selector: () => {
+                            let el = document.getElementById(`${namespace}-dropdown-root`);
+                            if (!el) {
+                                el = document.createElement('div');
+                                el.id = `${namespace}-dropdown-root`;
+                                document.body.appendChild(el);
+                            }
+                            return el;
+                        }, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_POPUP, afterRender: updatePosition, 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 (_jsx("div", Object.assign({}, restProps, mergeCS(styled('dropdown', `dropdown--${placement}`), {
+                                    className: restProps.className,
+                                    style: restProps.style,
+                                }), { ref: dropdownRef, 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);
+                                    }, children: renderPopup(_jsxs("div", Object.assign({}, mergeCS(styled('dropdown-popup'), {
+                                        style: Object.assign(Object.assign({ zIndex }, popupPositionStyle), transitionStyle),
+                                    }), { ref: popupRef, children: [_jsx("ul", Object.assign({}, styled('dropdown__list'), { ref: ulRef, 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 })), arrow && _jsx("div", Object.assign({}, styled('dropdown__arrow')))] }))) })));
+                            } }) })] }));
+        } }));
+}
+export const Dropdown = forwardRef(DropdownFC);

package/dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export type { DropdownRef, DropdownProps } from './types';
+export { Dropdown } from './Dropdown';

package/dropdown/index.js

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

package/dropdown/internal/DropdownGroup.d.ts

@@ -0,0 +1,13 @@
+/// <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): JSX.Element | null;
+export {};

package/dropdown/internal/DropdownGroup.js

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,16 @@
+/// <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): JSX.Element | null;
+export {};

package/dropdown/internal/DropdownItem.js

@@ -0,0 +1,9 @@
+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 }))] })));
+}

package/dropdown/internal/DropdownSub.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import type { Styled } from '../../hooks/useStyled';
+import type { CLASSES } from '../vars';
+interface DropdownSubProps {
+    children: React.ReactNode;
+    dropdownRef: React.RefObject<HTMLDivElement>;
+    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;
+    onVisibleChange: (visible: boolean) => void;
+}
+export declare const DropdownSub: import("react").ForwardRefExoticComponent<DropdownSubProps & import("react").RefAttributes<() => void>>;
+export {};

package/dropdown/internal/DropdownSub.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEventCallback } from '@laser-ui/hooks';
+import { checkNodeExist } from '@laser-ui/utils';
+import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
+import { isUndefined } from 'lodash';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { useTranslation } from '../../hooks';
+import { Icon } from '../../icon';
+import { Popup } from '../../internal/popup';
+import { Portal } from '../../internal/portal';
+import { Transition } from '../../internal/transition';
+import { getHorizontalSidePosition, mergeCS } from '../../utils';
+import { TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../../vars';
+export const DropdownSub = forwardRef((props, ref) => {
+    const { children, namespace, styled, dropdownRef, id, level, icon, list, popupState, trigger, empty, focus, disabled, zIndex, onVisibleChange, } = props;
+    const triggerRef = useRef(null);
+    const popupRef = useRef(null);
+    const { t } = useTranslation();
+    const visible = !isUndefined(popupState);
+    const [transformOrigin, setTransformOrigin] = useState();
+    const [popupPositionStyle, setPopupPositionStyle] = useState({
+        top: '-200vh',
+        left: '-200vw',
+    });
+    const updatePosition = useEventCallback(() => {
+        if (visible && popupRef.current && triggerRef.current) {
+            const [width, height] = [popupRef.current.offsetWidth, popupRef.current.offsetHeight];
+            const { top, left, transformOrigin } = getHorizontalSidePosition(triggerRef.current, { width, height }, {
+                placement: 'right',
+                inWindow: WINDOW_SPACE,
+            });
+            setPopupPositionStyle({
+                top,
+                left,
+            });
+            setTransformOrigin(transformOrigin);
+        }
+    });
+    useImperativeHandle(ref, () => updatePosition, [updatePosition]);
+    return (_jsx(Popup, { visible: popupState !== null && popupState !== void 0 ? popupState : false, trigger: trigger, disabled: disabled, updatePosition: {
+            fn: updatePosition,
+            triggerRef,
+            popupRef,
+            containerRefs: [],
+        }, onVisibleChange: onVisibleChange, children: ({ renderTrigger, renderPopup }) => (_jsxs(_Fragment, { children: [renderTrigger(_jsxs("li", Object.assign({}, mergeCS(styled('dropdown__item', 'dropdown__item--sub', {
+                    'dropdown__item.is-expand': visible,
+                    'dropdown__item.is-disabled': disabled,
+                }), { style: { paddingLeft: 12 + level * 16 } }), { ref: triggerRef, id: id, role: "menuitem", "aria-haspopup": true, "aria-expanded": visible, "aria-disabled": disabled, 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 })), _jsx("div", Object.assign({}, styled('dropdown__sub-arrow'), { children: _jsx(Icon, { children: _jsx(KeyboardArrowRightOutlined, {}) }) }))] }))), _jsx(Portal, { selector: () => dropdownRef.current, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_POPUP, afterRender: updatePosition, children: (state) => {
+                            let transitionStyle = {};
+                            switch (state) {
+                                case 'enter':
+                                    transitionStyle = { transform: 'scale(0)', 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: 'scale(0)',
+                                        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 renderPopup(_jsx("div", Object.assign({}, mergeCS(styled('dropdown-popup'), {
+                                style: Object.assign(Object.assign({ zIndex }, popupPositionStyle), transitionStyle),
+                            }), { ref: popupRef, 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) })) })));
+                        } }) })] })) }));
+});

package/dropdown/types.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { BaseProps, CloneHTMLElement, VerticalSidePlacement } from '../types';
+export {};
+export interface DropdownRef {
+    updatePosition: () => void;
+}
+export interface DropdownItem<ID extends React.Key> {
+    id: ID;
+    title: React.ReactNode;
+    type: 'item' | 'group' | 'sub';
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    separator?: boolean;
+    children?: DropdownItem<ID>[];
+}
+export interface DropdownProps<ID extends React.Key, T extends DropdownItem<ID>> extends BaseProps<'dropdown' | 'dropdown-popup', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onClick'> {
+    children: React.ReactElement | ((render: CloneHTMLElement) => React.ReactNode);
+    list: T[];
+    visible?: boolean;
+    defaultVisible?: boolean;
+    trigger?: 'hover' | 'click';
+    placement?: VerticalSidePlacement;
+    placementFixed?: boolean;
+    arrow?: boolean;
+    escClosable?: boolean;
+    zIndex?: number | string;
+    onVisibleChange?: (visible: boolean) => void;
+    afterVisibleChange?: (visible: boolean) => void;
+    onClick?: (id: ID, origin: T) => void | false;
+}

package/dropdown/types.js

@@ -0,0 +1 @@
+export {};

package/dropdown/utils.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { DropdownItem } from './types';
+export declare function checkEnableItem<ID extends React.Key, T extends DropdownItem<ID>>(item: T): boolean;
+export declare function getSameLevelEnableItems<ID extends React.Key, T extends DropdownItem<ID>>(arr: T[]): T[];

package/dropdown/utils.js

@@ -0,0 +1,18 @@
+export function checkEnableItem(item) {
+    return (item.type === 'item' || item.type === 'sub') && !item.disabled;
+}
+export function getSameLevelEnableItems(arr) {
+    const items = [];
+    const reduceArr = (arr) => {
+        for (const item of arr) {
+            if (item.type === 'group' && item.children) {
+                reduceArr(item.children);
+            }
+            else if (checkEnableItem(item)) {
+                items.push(item);
+            }
+        }
+    };
+    reduceArr(arr);
+    return items;
+}

package/dropdown/vars.d.ts

@@ -0,0 +1,23 @@
+export declare const CLASSES: {
+    dropdown: string;
+    'dropdown--top': string;
+    'dropdown--top-left': string;
+    'dropdown--top-right': string;
+    'dropdown--bottom': string;
+    'dropdown--bottom-left': string;
+    'dropdown--bottom-right': string;
+    dropdown__item: string;
+    'dropdown__item--item': string;
+    'dropdown__item--sub': string;
+    'dropdown__item.is-expand': string;
+    'dropdown__item.is-disabled': string;
+    'dropdown__item-icon': string;
+    'dropdown__item-content': string;
+    'dropdown__group-list': string;
+    'dropdown__group-title': string;
+    'dropdown__sub-arrow': string;
+    dropdown__list: string;
+    dropdown__empty: string;
+    dropdown__arrow: string;
+    'dropdown-popup': string;
+};

package/dropdown/vars.js

@@ -0,0 +1,23 @@
+export const CLASSES = {
+    dropdown: '^dropdown',
+    'dropdown--top': '^dropdown--top',
+    'dropdown--top-left': '^dropdown--top-left',
+    'dropdown--top-right': '^dropdown--top-right',
+    'dropdown--bottom': '^dropdown--bottom',
+    'dropdown--bottom-left': '^dropdown--bottom-left',
+    'dropdown--bottom-right': '^dropdown--bottom-right',
+    dropdown__item: '^dropdown__item',
+    'dropdown__item--item': '^dropdown__item--item',
+    'dropdown__item--sub': '^dropdown__item--sub',
+    'dropdown__item.is-expand': 'is-expand',
+    'dropdown__item.is-disabled': 'is-disabled',
+    'dropdown__item-icon': '^dropdown__item-icon',
+    'dropdown__item-content': '^dropdown__item-content',
+    'dropdown__group-list': '^dropdown__group-list',
+    'dropdown__group-title': '^dropdown__group-title',
+    'dropdown__sub-arrow': '^dropdown__sub-arrow',
+    dropdown__list: '^dropdown__list',
+    dropdown__empty: '^dropdown__empty',
+    dropdown__arrow: '^dropdown__arrow',
+    'dropdown-popup': '^dropdown-popup',
+};