@laser-ui/components 1.6.1 → 2.0.0

package/transition/Transition.js

@@ -0,0 +1,148 @@
+import { useAsync, useForceUpdate, useIsomorphicLayoutEffect, useUnmount } from '@laser-ui/hooks';
+import { isNumber, isUndefined } from 'lodash';
+import { useRef } from 'react';
+import { flushSync } from 'react-dom';
+const CLASSES = ['enter-from', 'enter-active', 'enter-to', 'leave-from', 'leave-active', 'leave-to'];
+export function Transition(props) {
+    const { children, enter, name, duration, skipFirstTransition = true, onSkipEnter, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onSkipLeave, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled, } = props;
+    const forceUpdate = useForceUpdate();
+    const async = useAsync();
+    const el = useRef(null);
+    const entering = useRef(false);
+    const leaving = useRef(false);
+    const skipTransition = useRef(skipFirstTransition);
+    const prevEnter = useRef(enter);
+    const leaved = useRef(skipFirstTransition ? !enter : false);
+    if (enter) {
+        leaved.current = false;
+    }
+    const resetClasses = useRef(() => { });
+    const clearTransitionEnd = useRef(() => { });
+    useIsomorphicLayoutEffect(() => {
+        if (enter !== prevEnter.current) {
+            skipTransition.current = false;
+        }
+        prevEnter.current = enter;
+        if (!skipTransition.current) {
+            if (entering.current) {
+                entering.current = false;
+                onEnterCancelled === null || onEnterCancelled === void 0 ? void 0 : onEnterCancelled(el.current);
+            }
+            if (leaving.current) {
+                leaving.current = false;
+                onLeaveCancelled === null || onLeaveCancelled === void 0 ? void 0 : onLeaveCancelled(el.current);
+            }
+            resetClasses.current();
+            resetClasses.current = () => {
+                if (el.current && name) {
+                    for (const className of CLASSES) {
+                        el.current.classList.toggle(`${name}-${className}`, false);
+                    }
+                }
+            };
+            const addClasses = (classes) => {
+                if (el.current && name) {
+                    for (const className of classes) {
+                        el.current.classList.toggle(`${name}-${className}`, true);
+                    }
+                }
+            };
+            const removeClasses = (classes) => {
+                if (el.current && name) {
+                    for (const className of classes) {
+                        el.current.classList.toggle(`${name}-${className}`, false);
+                    }
+                }
+            };
+            if (enter) {
+                entering.current = true;
+                onBeforeEnter === null || onBeforeEnter === void 0 ? void 0 : onBeforeEnter(el.current);
+                addClasses(['enter-from', 'enter-active']);
+                async.setAfterPainted(() => {
+                    removeClasses(['enter-from', 'enter-active']);
+                    onEnter === null || onEnter === void 0 ? void 0 : onEnter(el.current);
+                    addClasses(['enter-active', 'enter-to']);
+                    const handleAfterEnter = () => {
+                        entering.current = false;
+                        clearTransitionEnd.current();
+                        removeClasses(['enter-active', 'enter-to']);
+                        onAfterEnter === null || onAfterEnter === void 0 ? void 0 : onAfterEnter(el.current);
+                    };
+                    if (isUndefined(duration)) {
+                        if (el.current) {
+                            el.current.addEventListener('transitionend', handleAfterEnter);
+                            clearTransitionEnd.current = () => {
+                                if (el.current) {
+                                    el.current.removeEventListener('transitionend', handleAfterEnter);
+                                }
+                            };
+                        }
+                    }
+                    else {
+                        const tid = setTimeout(handleAfterEnter, isNumber(duration) ? duration : duration.enter);
+                        clearTransitionEnd.current = () => {
+                            clearTimeout(tid);
+                        };
+                    }
+                });
+            }
+            else {
+                leaving.current = true;
+                onBeforeLeave === null || onBeforeLeave === void 0 ? void 0 : onBeforeLeave(el.current);
+                addClasses(['leave-from', 'leave-active']);
+                async.setAfterPainted(() => {
+                    removeClasses(['leave-from', 'leave-active']);
+                    onLeave === null || onLeave === void 0 ? void 0 : onLeave(el.current);
+                    addClasses(['leave-active', 'leave-to']);
+                    const handleAfterLeave = () => {
+                        leaving.current = false;
+                        clearTransitionEnd.current();
+                        removeClasses(['leave-active', 'leave-to']);
+                        onAfterLeave === null || onAfterLeave === void 0 ? void 0 : onAfterLeave(el.current);
+                        leaved.current = true;
+                        flushSync(() => {
+                            forceUpdate();
+                        });
+                    };
+                    if (isUndefined(duration)) {
+                        if (el.current) {
+                            el.current.addEventListener('transitionend', handleAfterLeave);
+                            clearTransitionEnd.current = () => {
+                                if (el.current) {
+                                    el.current.removeEventListener('transitionend', handleAfterLeave);
+                                }
+                            };
+                        }
+                    }
+                    else {
+                        const tid = setTimeout(handleAfterLeave, isNumber(duration) ? duration : duration.leave);
+                        clearTransitionEnd.current = () => {
+                            clearTimeout(tid);
+                        };
+                    }
+                });
+            }
+        }
+        else {
+            if (enter) {
+                onSkipEnter === null || onSkipEnter === void 0 ? void 0 : onSkipEnter(el.current);
+            }
+            else {
+                onSkipLeave === null || onSkipLeave === void 0 ? void 0 : onSkipLeave(el.current);
+            }
+        }
+        return () => {
+            async.clearAll();
+            clearTransitionEnd.current();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [enter]);
+    useUnmount(() => {
+        async.clearAll();
+        clearTransitionEnd.current();
+        resetClasses.current();
+    });
+    return children((instance) => {
+        el.current = instance;
+    }, leaved.current);
+}

package/transition/types.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export {};
+export interface TransitionProps {
+    children: (ref: React.RefCallback<HTMLElement | null>, leaved: boolean) => React.ReactElement | null;
+    enter: boolean;
+    name?: string;
+    duration?: number | {
+        enter: number;
+        leave: number;
+    };
+    skipFirstTransition?: boolean | {
+        enter: boolean;
+        leave: boolean;
+    };
+    onSkipEnter?: (el: HTMLElement | null) => void;
+    onBeforeEnter?: (el: HTMLElement | null) => void;
+    onEnter?: (el: HTMLElement | null) => void;
+    onAfterEnter?: (el: HTMLElement | null) => void;
+    onEnterCancelled?: (el: HTMLElement | null) => void;
+    onSkipLeave?: (el: HTMLElement | null) => void;
+    onBeforeLeave?: (el: HTMLElement | null) => void;
+    onLeave?: (el: HTMLElement | null) => void;
+    onAfterLeave?: (el: HTMLElement | null) => void;
+    onLeaveCancelled?: (el: HTMLElement | null) => void;
+}
+export interface CollapseTransitionProps extends TransitionProps {
+    width?: number;
+    height?: number;
+}

package/tree/Tree.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { TreeItem, TreeProps } from './types';
-export declare function Tree<V extends React.Key, T extends TreeItem<V>>(props: TreeProps<V, T>): JSX.Element | null;
+export declare function Tree<V extends React.Key, T extends TreeItem<V>>(props: TreeProps<V, T>): React.ReactElement | null;

package/tree/Tree.js

@@ -14,9 +14,7 @@ export function Tree(props) {
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { tree: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.tree }, styleOverrides);
     const focusRef = useRef(null);
-    const dataRef = useRef({
-        expands: new Set(),
-    });
+    const expandSaved = useRef(new Set());
     const uniqueId = useId();
     const getItemId = (val) => `${namespace}-tree-item-${val}-${uniqueId}`;
     const [nodes, nodesMap] = useMemo(() => {
@@ -61,7 +59,7 @@ export function Tree(props) {
     const expands = useMemo(() => new Set(_expands), [_expands]);
     const { disabled } = useScopedProps({ disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
     const hasSelected = multiple ? selected.size > 0 : !isNull(selected);
-    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 [_focused, setFocused] = useState();
     const focused = (() => {
         let node;
@@ -88,8 +86,8 @@ export function Tree(props) {
                 });
             }
             else {
-                if (!dataRef.current.expands.has(node.id)) {
-                    dataRef.current.expands.add(node.id);
+                if (!expandSaved.current.has(node.id)) {
+                    expandSaved.current.add(node.id);
                     onFirstExpand === null || onFirstExpand === void 0 ? void 0 : onFirstExpand(node.id, node.origin);
                 }
                 changeExpands((draft) => {
@@ -109,9 +107,23 @@ export function Tree(props) {
             }
         }
     };
-    return focusVisibleWrapper(_jsx(TreePanel, Object.assign({}, restProps, { ref: focusRef, tabIndex: (_a = restProps.tabIndex) !== null && _a !== void 0 ? _a : (disabled ? -1 : 0), onKeyDown: (e) => {
+    return (_jsx(TreePanel, Object.assign({}, restProps, { ref: (instance) => {
+            focusRef.current = instance;
+            return () => {
+                focusRef.current = null;
+            };
+        }, tabIndex: (_a = restProps.tabIndex) !== null && _a !== void 0 ? _a : (disabled ? -1 : 0), onFocus: (e) => {
+            var _a;
+            (_a = restProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            focusVisibleProps.onFocus(e);
+        }, onBlur: (e) => {
+            var _a;
+            (_a = restProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            focusVisibleProps.onBlur(e);
+        }, onKeyDown: (e) => {
             var _a;
             (_a = restProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            focusVisibleProps.onKeyDown(e);
             const focusItem = (code) => {
                 if (focusRef.current) {
                     const item = focusRef.current(code);

package/tree/internal/TreePanel.d.ts

@@ -4,6 +4,7 @@ import type { AbstractTreeNode } from '../node/abstract-node';
 import type { TreeItem } from '../types';
 import type { CLASSES } from '../vars';
 interface TreePanelProps<V extends React.Key, T extends TreeItem<V>> extends Omit<React.HTMLAttributes<HTMLUListElement>, 'children'> {
+    ref?: React.Ref<(code: any) => AbstractTreeNode<V, T> | undefined>;
     namespace: string;
     styled: Styled<typeof CLASSES>;
     list: AbstractTreeNode<V, T>[];
@@ -27,6 +28,5 @@ interface TreePanelProps<V extends React.Key, T extends TreeItem<V>> extends Omi
     onNodeClick: (node: AbstractTreeNode<V, T>) => void;
     onScrollBottom: (() => void) | undefined;
 }
-declare function TreePanelFC<V extends React.Key, T extends TreeItem<V>>(props: TreePanelProps<V, T>, ref: React.ForwardedRef<any>): JSX.Element | null;
-export declare const TreePanel: <V extends React.Key, T extends TreeItem<V>>(props: TreePanelProps<V, T> & React.RefAttributes<any>) => ReturnType<typeof TreePanelFC>;
+export declare function TreePanel<V extends React.Key, T extends TreeItem<V>>(props: TreePanelProps<V, T>): React.ReactElement | null;
 export {};

package/tree/internal/TreePanel.js

@@ -7,19 +7,19 @@ import AddBoxOutlined from '@material-design-icons/svg/outlined/add_box.svg?reac
 import ArrowRightOutlined from '@material-design-icons/svg/outlined/arrow_right.svg?react';
 import IndeterminateCheckBoxOutlined from '@material-design-icons/svg/outlined/indeterminate_check_box.svg?react';
 import { isUndefined } from 'lodash';
-import { cloneElement, 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 { useTranslation } from '../../hooks';
 import { Icon } from '../../icon';
-import { CircularProgress } from '../../internal/circular-progress';
-import { CollapseTransition } from '../../internal/transition';
+import { CollapseTransition } from '../../transition';
 import { mergeCS } from '../../utils';
 import { TTANSITION_DURING_BASE } from '../../vars';
 import { VirtualScroll } from '../../virtual-scroll';
-function TreePanelFC(props, ref) {
+export function TreePanel(props) {
     var _a, _b;
-    const { namespace, styled, list, itemId, itemSelected, itemFocused, expands, customItem, showLine, multiple, onlyLeafSelectable, disabled, virtual, focusVisible, onNodeFocus, onNodeExpand, onNodeClick, onScrollBottom } = props, restProps = __rest(props, ["namespace", "styled", "list", "itemId", "itemSelected", "itemFocused", "expands", "customItem", "showLine", "multiple", "onlyLeafSelectable", "disabled", "virtual", "focusVisible", "onNodeFocus", "onNodeExpand", "onNodeClick", "onScrollBottom"]);
+    const { ref, namespace, styled, list, itemId, itemSelected, itemFocused, expands, customItem, showLine, multiple, onlyLeafSelectable, disabled, virtual, focusVisible, onNodeFocus, onNodeExpand, onNodeClick, onScrollBottom } = props, restProps = __rest(props, ["ref", "namespace", "styled", "list", "itemId", "itemSelected", "itemFocused", "expands", "customItem", "showLine", "multiple", "onlyLeafSelectable", "disabled", "virtual", "focusVisible", "onNodeFocus", "onNodeExpand", "onNodeClick", "onScrollBottom"]);
     const { t } = useTranslation();
     const listRef = useRef(null);
     const vsRef = useRef(null);
@@ -83,7 +83,12 @@ function TreePanelFC(props, ref) {
             itemExpand: (item) => (item.children ? expands.has(item.id) : undefined),
         });
     }, [expands, list, virtual]);
-    return (_jsx(VirtualScroll, Object.assign({}, vsProps, { ref: vsRef, enable: !isUndefined(virtual), listSize: (_a = virtual === null || virtual === void 0 ? void 0 : virtual.listSize) !== null && _a !== void 0 ? _a : 0, listPadding: (_b = virtual === null || virtual === void 0 ? void 0 : virtual.listPadding) !== null && _b !== void 0 ? _b : 0, itemRender: (item, index, props, ancestry, children) => {
+    return (_jsx(VirtualScroll, Object.assign({}, vsProps, { ref: (instance) => {
+            vsRef.current = instance;
+            return () => {
+                vsRef.current = null;
+            };
+        }, enable: !isUndefined(virtual), listSize: (_a = virtual === null || virtual === void 0 ? void 0 : virtual.listSize) !== null && _a !== void 0 ? _a : 0, listPadding: (_b = virtual === null || virtual === void 0 ? void 0 : virtual.listPadding) !== null && _b !== void 0 ? _b : 0, itemRender: (item, index, props, ancestry, children) => {
             if (item.children) {
                 const isExpand = expands.has(item.id);
                 let isSelectedAncestry = false;
@@ -119,26 +124,21 @@ function TreePanelFC(props, ref) {
                                     onNodeExpand(item);
                                 }, children: _jsx(Icon, { children: item.origin.loading ? (_jsx(CircularProgress, {})) : showLine ? (isExpand ? (_jsx(IndeterminateCheckBoxOutlined, {})) : (_jsx(AddBoxOutlined, {}))) : (_jsx(ArrowRightOutlined, Object.assign({}, styled('tree__option-arrow', {
                                         'tree__option-arrow.is-expand': isExpand,
-                                    })))) }) })), multiple && (_jsx("div", Object.assign({}, styled('tree__option-checkbox'), { children: _jsx(Checkbox, { model: item.checked, disabled: item.disabled, indeterminate: item.indeterminate, inputRender: (el) => cloneElement(el, { tabIndex: -1 }), onClick: (e) => {
+                                    })))) }) })), multiple && (_jsx("div", Object.assign({}, styled('tree__option-checkbox'), { children: _jsx(Checkbox, { model: item.checked, disabled: item.disabled, indeterminate: item.indeterminate, inputProps: { tabIndex: -1 }, onClick: (e) => {
                                         e.stopPropagation();
                                         onNodeFocus(item);
                                         onNodeClick(item);
                                     } }) }))), _jsx("div", Object.assign({}, styled('tree__option-content'), { children: customItem ? customItem(item.origin) : item.origin.label }))] })),
-                    !item.origin.loading && (_jsx(CollapseTransition, { originalSize: {
-                            height: 'auto',
-                        }, collapsedSize: {
-                            height: 0,
-                        }, enter: isExpand, during: TTANSITION_DURING_BASE, styles: {
-                            entering: {
-                                transition: ['height', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`).join(', '),
-                            },
-                            leaving: {
-                                transition: ['height', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`).join(', '),
-                            },
-                            leaved: { display: 'none' },
-                        }, children: (listRef, collapseStyle) => (_jsx("ul", Object.assign({}, mergeCS(styled('tree__group'), {
-                            style: collapseStyle,
-                        }), { ref: listRef, role: "group", "aria-labelledby": itemId(item.id), children: children }))) }))));
+                    !item.origin.loading && (_jsx(CollapseTransition, { height: 0, enter: isExpand, duration: TTANSITION_DURING_BASE, children: (transitionRef, leaved) => (_jsx("ul", Object.assign({}, mergeCS(styled('tree__group'), {
+                            style: Object.assign({}, (leaved ? { display: 'none' } : undefined)),
+                        }), { ref: (instance) => {
+                                listRef.current = instance;
+                                transitionRef(instance);
+                                return () => {
+                                    listRef.current = null;
+                                    transitionRef(null);
+                                };
+                            }, role: "group", "aria-labelledby": itemId(item.id), children: children }))) }))));
             }
             return (_createElement("li", Object.assign({}, styled('tree__option', {
                 'tree__option.is-selected': !multiple && item.checked,
@@ -150,18 +150,24 @@ function TreePanelFC(props, ref) {
                     onNodeClick(item);
                 } }),
                 focusVisible && (itemFocused === null || itemFocused === void 0 ? void 0 : itemFocused.id) === item.id && _jsx("div", { className: `${namespace}-focus-outline` }),
-                multiple && (_jsx("div", Object.assign({}, styled('tree__option-checkbox'), { children: _jsx(Checkbox, { model: item.checked, disabled: item.disabled, indeterminate: item.indeterminate, inputRender: (el) => cloneElement(el, { tabIndex: -1 }), onClick: (e) => {
+                multiple && (_jsx("div", Object.assign({}, styled('tree__option-checkbox'), { children: _jsx(Checkbox, { model: item.checked, disabled: item.disabled, indeterminate: item.indeterminate, inputProps: { tabIndex: -1 }, onClick: (e) => {
                             e.stopPropagation();
                             onNodeFocus(item);
                             onNodeClick(item);
                         } }) }))),
                 _jsx("div", Object.assign({}, styled('tree__option-content'), { children: customItem ? customItem(item.origin) : item.origin.label }))));
-        }, itemFocused: itemFocused === null || itemFocused === void 0 ? void 0 : itemFocused.id, itemEmptyRender: () => (_jsx("li", Object.assign({}, styled('tree__empty'), { children: _jsx("div", Object.assign({}, styled('tree__option-content'), { children: t('No data') })) }))), itemInAriaSetsize: (item) => !item.children, placeholder: "li", onScrollEnd: onScrollBottom, children: (vsList, onScroll) => (_jsx("ul", Object.assign({}, restProps, mergeCS(styled('tree', {
+        }, itemFocused: itemFocused === null || itemFocused === void 0 ? void 0 : itemFocused.id, itemEmptyRender: () => (_jsx("li", Object.assign({}, styled('tree__empty'), { children: _jsx("div", Object.assign({}, styled('tree__option-content'), { children: t('No data') })) }))), itemInAriaSetsize: (item) => !item.children, placeholder: "li", onScrollEnd: onScrollBottom, children: (vsList, onScroll) => (
+        // eslint-disable-next-line jsx-a11y/aria-activedescendant-has-tabindex
+        _jsx("ul", Object.assign({}, restProps, mergeCS(styled('tree', {
             'tree.is-disabled': disabled,
             'tree--line': showLine,
         }), {
             className: restProps.className,
             style: restProps.style,
-        }), { ref: listRef, role: "tree", "aria-multiselectable": multiple, "aria-activedescendant": isUndefined(itemFocused) ? undefined : itemId(itemFocused.id), onScroll: onScroll, children: list.length === 0 ? _jsx(Empty, { style: { padding: '12px 28px' }, image: Empty.SIMPLE_IMG }) : vsList }))) })));
+        }), { ref: (instance) => {
+                listRef.current = instance;
+                return () => {
+                    listRef.current = null;
+                };
+            }, role: "tree", "aria-multiselectable": multiple, "aria-activedescendant": isUndefined(itemFocused) ? undefined : itemId(itemFocused.id), onScroll: onScroll, children: list.length === 0 ? _jsx(Empty, { style: { padding: '12px 28px' }, image: Empty.SIMPLE_IMG }) : vsList }))) })));
 }
-export const TreePanel = forwardRef(TreePanelFC);

package/tree-select/TreeSelect.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="react" />
-import type { TreeSelectProps, TreeSelectRef } from './types';
+import type { TreeSelectProps } from './types';
 import type { TreeItem } from '../tree/types';
-declare function TreeSelectFC<V extends React.Key, T extends TreeItem<V>>(props: TreeSelectProps<V, T>, ref: React.ForwardedRef<TreeSelectRef>): JSX.Element | null;
-export declare const TreeSelect: <ID extends React.Key, T extends TreeItem<ID>>(props: TreeSelectProps<ID, T> & React.RefAttributes<TreeSelectRef>) => ReturnType<typeof TreeSelectFC>;
-export {};
+export declare function TreeSelect<V extends React.Key, T extends TreeItem<V>>(props: TreeSelectProps<V, T>): React.ReactElement | null;