@laser-ui/components 1.6.0 → 2.0.0

package/upload/UploadPictureList.js

@@ -1,62 +1,67 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useImmer } from '@laser-ui/hooks';
 import InsertDriveFileTwoTone from '@material-design-icons/svg/two-tone/insert_drive_file.svg?react';
-import { isNumber, isUndefined } from 'lodash';
-import { Children, cloneElement, useContext } from 'react';
+import { has, isNumber, isUndefined } from 'lodash';
+import { Fragment, use, useRef } from 'react';
 import { UploadAction } from './UploadAction';
-import { PICTURE_LIST_CLASSES, UploadContext } from './vars';
-import { useComponentProps, useNextTick, useStyled } from '../hooks';
+import { useNextTick } from './hooks';
+import { PICTURE_LIST_CLASSES, UploadActionContext, UploadContext } from './vars';
+import { CircularProgress } from '../circular-progress';
+import { useComponentProps, useStyled } from '../hooks';
 import { Icon } from '../icon';
-import { CircularProgress } from '../internal/circular-progress';
-import { CollapseTransition } from '../internal/transition';
 import { Progress } from '../progress';
+import { CollapseTransition } from '../transition';
 import { mergeCS } from '../utils';
 import { TTANSITION_DURING_BASE } from '../vars';
 export function UploadPictureList(props) {
-    const _a = useComponentProps('UploadPictureList', props), { styleOverrides, styleProvider, actions, defaultActions } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "actions", "defaultActions"]);
+    var _a, _b;
+    const _c = useComponentProps('UploadPictureList', props), { styleOverrides, styleProvider, actions, defaultActions } = _c, restProps = __rest(_c, ["styleOverrides", "styleProvider", "actions", "defaultActions"]);
     const styled = useStyled(PICTURE_LIST_CLASSES, { 'upload-picture-list': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['upload-picture-list'] }, styleOverrides);
-    const { files, onRemove } = useContext(UploadContext);
+    const { files: currentFiles, onRemove } = use(UploadContext);
+    const files = useRef(currentFiles);
+    {
+        const newFiles = currentFiles.map((file) => Object.assign({}, file));
+        let index = -1;
+        for (const file of files.current) {
+            index += 1;
+            if (file.__removing) {
+                if (((_a = files.current[index - 1]) === null || _a === void 0 ? void 0 : _a.uid) === ((_b = newFiles[index - 1]) === null || _b === void 0 ? void 0 : _b.uid)) {
+                    newFiles.splice(index, 0, file);
+                }
+            }
+        }
+        files.current = newFiles;
+    }
     const nextTick = useNextTick();
-    const [removeUIDs, setRemoveUIDs] = useImmer([]);
     return (_jsx("ul", Object.assign({}, restProps, mergeCS(styled('upload-picture-list'), {
         className: restProps.className,
         style: restProps.style,
-    }), { children: files.map((file, index) => (_jsx(CollapseTransition, { originalSize: {
-                height: 'auto',
-            }, collapsedSize: {
-                height: 0,
-            }, enter: !removeUIDs.includes(file.uid), 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' },
-            }, skipFirstTransition: nextTick.current ? false : true, afterLeave: () => {
-                setRemoveUIDs((draft) => {
-                    draft.splice(draft.findIndex((uid) => uid === file.uid), 1);
-                });
-                onRemove(file);
-            }, children: (collapseRef, collapseStyle) => (_jsxs("li", Object.assign({}, mergeCS(styled('upload-picture-list__item', {
-                [`upload-picture-list__item--${file.state}`]: file.state,
-            }), {
-                style: collapseStyle,
-            }), { ref: collapseRef, children: [_jsx("div", Object.assign({}, styled('upload-picture-list__thumbnail'), { children: file.state === 'progress' ? (_jsx(Icon, { size: 28, children: _jsx(CircularProgress, {}) })) : file.thumbUrl ? (_jsx("img", Object.assign({}, styled('upload-picture-list__thumbnail-img'), { src: file.thumbUrl, alt: file.name }))) : (_jsx(Icon, { size: 28, theme: file.state === 'error' ? 'danger' : 'primary', children: _jsx(InsertDriveFileTwoTone, {}) })) })), _jsx("a", Object.assign({}, styled('upload-picture-list__link', {
-                        'upload-picture-list__link.is-active': file.state === 'load' && !isUndefined(file.url),
-                    }), { href: file.url, target: "_blank", rel: "noreferrer", title: file.name, onClick: (e) => {
-                            if (defaultActions && defaultActions.preview) {
-                                e.preventDefault();
-                                defaultActions.preview(file);
-                            }
-                        }, children: file.name })), _jsx("div", Object.assign({}, styled('upload-picture-list__actions'), { children: Children.map(actions ? actions(file, index) : [_jsx(UploadAction, { preset: "remove" })], (action) => cloneElement(action, {
-                            _file: file,
-                            _defaultActions: defaultActions,
-                            _onRemove: () => {
-                                setRemoveUIDs((draft) => {
-                                    draft.push(file.uid);
-                                });
-                            },
-                        })) })), _jsx("div", Object.assign({}, styled('upload-picture-list__progress-wrapper'), { children: isNumber(file.percent) && _jsx(Progress, { percent: file.percent, label: false, lineWidth: 2 }) }))] }))) }, file.uid))) })));
+    }), { children: _jsx("div", Object.assign({}, styled('upload-picture-list__row'), { children: files.current.map((file, index) => (_jsx(CollapseTransition, { height: 0, enter: !file.__removing, duration: TTANSITION_DURING_BASE, skipFirstTransition: nextTick.current ? false : true, onAfterLeave: () => {
+                    const index = files.current.findIndex((f) => f.uid === file.uid);
+                    if (index !== -1) {
+                        files.current.splice(index, 1);
+                    }
+                }, children: (transitionRef, leaved) => leaved ? null : (_jsx("div", { ref: (instance) => {
+                        transitionRef(instance);
+                        return () => {
+                            transitionRef(null);
+                        };
+                    }, children: _jsxs("li", Object.assign({}, styled('upload-picture-list__item', { [`upload-picture-list__item--${file.state}`]: file.state }), { children: [_jsx("div", Object.assign({}, styled('upload-picture-list__thumbnail'), { children: file.state === 'progress' ? (_jsx(Icon, { size: 28, children: _jsx(CircularProgress, {}) })) : file.thumbUrl ? (_jsx("img", Object.assign({}, styled('upload-picture-list__thumbnail-img'), { src: file.thumbUrl, alt: file.name }))) : (_jsx(Icon, { size: 28, theme: file.state === 'error' ? 'danger' : 'primary', children: _jsx(InsertDriveFileTwoTone, {}) })) })), _jsx("a", Object.assign({}, styled('upload-picture-list__link', {
+                                'upload-picture-list__link.is-active': file.state === 'load' && !isUndefined(file.url),
+                            }), { href: file.url, target: "_blank", rel: "noreferrer", title: file.name, onClick: (e) => {
+                                    if (defaultActions && defaultActions.preview) {
+                                        e.preventDefault();
+                                        defaultActions.preview(file);
+                                    }
+                                }, children: file.name })), _jsx("div", Object.assign({}, styled('upload-picture-list__actions'), { children: _jsx(UploadActionContext, { value: {
+                                        file,
+                                        defaultActions,
+                                        onRemove: () => {
+                                            file.__removing = true;
+                                            onRemove(file);
+                                        },
+                                    }, children: (actions ? actions(file, index) : [_jsx(UploadAction, { preset: "remove" })]).map((node, index) => {
+                                        const { id, action } = (has(node, ['id', 'action']) ? node : { id: index, action: node });
+                                        return _jsx(Fragment, { children: action }, id);
+                                    }) }) })), _jsx("div", Object.assign({}, styled('upload-picture-list__progress-wrapper'), { children: isNumber(file.percent) && _jsx(Progress, { percent: file.percent, label: false, lineWidth: 2 }) }))] })) })) }, file.uid))) })) })));
 }

package/upload/UploadPreviewAction.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { UploadPreviewActionProps } from './types';
-export declare const UploadPreviewAction: import("react").ForwardRefExoticComponent<UploadPreviewActionProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare function UploadPreviewAction(props: UploadPreviewActionProps): React.ReactElement | null;

package/upload/UploadPreviewAction.js

@@ -2,31 +2,32 @@ import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import VisibilityOutlinedIcon from '@material-design-icons/svg/outlined/visibility.svg?react';
 import { isUndefined } from 'lodash';
-import { forwardRef } from 'react';
-import { ACTION_CLASSES } from './vars';
+import { use } from 'react';
+import { ACTION_CLASSES, UploadActionContext } from './vars';
 import { useComponentProps, useStyled, useTranslation } from '../hooks';
 import { Icon } from '../icon';
 import { mergeCS } from '../utils';
-export const UploadPreviewAction = forwardRef((props, ref) => {
+export function UploadPreviewAction(props) {
     var _a, _b;
-    const _c = useComponentProps('UploadPreviewAction', props), { styleOverrides, styleProvider, children, disabled = false, _file, _defaultActions, _light, 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    _onRemove } = _c, restProps = __rest(_c, ["styleOverrides", "styleProvider", "children", "disabled", "_file", "_defaultActions", "_light", "_onRemove"]);
+    const _c = useComponentProps('UploadPreviewAction', props), { ref, styleOverrides, styleProvider, children, disabled = false } = _c, restProps = __rest(_c, ["ref", "styleOverrides", "styleProvider", "children", "disabled"]);
     const styled = useStyled(ACTION_CLASSES, { 'upload-action': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['upload-action'] }, styleOverrides);
     const { t } = useTranslation();
+    const uploadActionContext = use(UploadActionContext);
     return (_jsx("a", Object.assign({}, restProps, mergeCS(styled('upload-action', 'upload-action--preview', {
-        'upload-action.is-disabled': disabled || isUndefined(_file.url),
-        'upload-action--light': _light,
+        'upload-action.is-disabled': disabled || isUndefined(uploadActionContext === null || uploadActionContext === void 0 ? void 0 : uploadActionContext.file.url),
+        'upload-action--light': uploadActionContext === null || uploadActionContext === void 0 ? void 0 : uploadActionContext.light,
     }), {
         className: restProps.className,
         style: restProps.style,
-    }), { ref: ref, href: _file.url, target: (_a = restProps['target']) !== null && _a !== void 0 ? _a : '_blank', title: (_b = restProps.title) !== null && _b !== void 0 ? _b : t('Upload', 'Preview file'), onClick: (e) => {
-            var _a;
+    }), { ref: ref, href: uploadActionContext === null || uploadActionContext === void 0 ? void 0 : uploadActionContext.file.url, target: (_a = restProps['target']) !== null && _a !== void 0 ? _a : '_blank', title: (_b = restProps.title) !== null && _b !== void 0 ? _b : t('Upload', 'Preview file'), onClick: (e) => {
+            var _a, _b;
             (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
             e.stopPropagation();
-            if (_defaultActions === null || _defaultActions === void 0 ? void 0 : _defaultActions.preview) {
-                e.preventDefault();
-                _defaultActions.preview(_file);
+            if (uploadActionContext) {
+                if ((_b = uploadActionContext.defaultActions) === null || _b === void 0 ? void 0 : _b.preview) {
+                    e.preventDefault();
+                    uploadActionContext.defaultActions.preview(uploadActionContext.file);
+                }
             }
         }, children: children !== null && children !== void 0 ? children : (_jsx(Icon, { children: _jsx(VisibilityOutlinedIcon, {}) })) })));
-});
+}

package/upload/hooks.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function useNextTick(): import("react").RefObject<boolean>;

package/upload/types.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { ACTION_CLASSES, BUTTON_CLASSES, CLASSES, LIST_CLASSES, PICTURE_CLASSES, PICTURE_LIST_CLASSES } from './vars';
 import type { FormControlProvider } from '../form/types';
-import type { BaseProps, CloneHTMLElement } from '../types';
+import type { BaseProps } from '../types';
 export {};
 export type UploadFileState = 'load' | 'error' | 'progress' | null;
 export interface UploadFile {
@@ -15,7 +15,13 @@ export interface UploadFile {
     response?: any;
 }
 export interface UploadProps extends BaseProps<'upload' | 'upload-list', typeof CLASSES>, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'children' | 'list'> {
-    children: React.ReactElement | ((render: CloneHTMLElement) => JSX.Element | null);
+    ref?: React.Ref<HTMLInputElement>;
+    children: (props: {
+        onClick: React.MouseEventHandler<HTMLElement>;
+        onDragEnter?: React.DragEventHandler<HTMLElement>;
+        onDragOver?: React.DragEventHandler<HTMLElement>;
+        onDrop?: React.DragEventHandler<HTMLElement>;
+    }) => React.ReactNode;
     formControl?: FormControlProvider;
     model?: UploadFile[];
     defaultModel?: UploadFile[];
@@ -40,8 +46,12 @@ export interface UploadProps extends BaseProps<'upload' | 'upload-list', typeof
     onRemove?: (file: UploadFile) => void;
 }
 export interface UploadButtonProps extends BaseProps<'upload-button', typeof BUTTON_CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    ref?: React.Ref<HTMLDivElement>;
     file?: UploadFile;
-    actions?: React.ReactNode[];
+    actions?: (React.ReactNode | {
+        id: React.Key;
+        action: React.ReactNode;
+    })[];
     defaultActions?: {
         preview?: (file: UploadFile) => void;
         download?: (file: UploadFile) => void;
@@ -49,28 +59,39 @@ export interface UploadButtonProps extends BaseProps<'upload-button', typeof BUT
     onRemove?: () => void;
 }
 export interface UploadActionProps extends BaseProps<'upload-action', typeof ACTION_CLASSES>, React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
     preset?: 'download' | 'remove';
     disabled?: boolean;
 }
 export interface UploadPreviewActionProps extends BaseProps<'upload-action', typeof ACTION_CLASSES>, React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    ref?: React.Ref<HTMLAnchorElement>;
     disabled?: boolean;
 }
 export interface UploadListProps extends BaseProps<'upload-list', typeof LIST_CLASSES>, Omit<React.HTMLAttributes<HTMLUListElement>, 'children'> {
-    actions?: (file: UploadFile, index: number) => React.ReactNode[];
+    actions?: (file: UploadFile, index: number) => (React.ReactNode | {
+        id: React.Key;
+        action: React.ReactNode;
+    })[];
     defaultActions?: {
         preview?: (file: UploadFile) => void;
         download?: (file: UploadFile) => void;
     };
 }
 export interface UploadPictureProps extends BaseProps<'upload-picture', typeof PICTURE_CLASSES>, React.HTMLAttributes<HTMLUListElement> {
-    actions?: (file: UploadFile, index: number) => React.ReactNode[];
+    actions?: (file: UploadFile, index: number) => (React.ReactNode | {
+        id: React.Key;
+        action: React.ReactNode;
+    })[];
     defaultActions?: {
         preview?: (file: UploadFile) => void;
         download?: (file: UploadFile) => void;
     };
 }
 export interface UploadPictureListProps extends BaseProps<'upload-picture-list', typeof PICTURE_LIST_CLASSES>, Omit<React.HTMLAttributes<HTMLUListElement>, 'children'> {
-    actions?: (file: UploadFile, index: number) => React.ReactNode[];
+    actions?: (file: UploadFile, index: number) => (React.ReactNode | {
+        id: React.Key;
+        action: React.ReactNode;
+    })[];
     defaultActions?: {
         preview?: (file: UploadFile) => void;
         download?: (file: UploadFile) => void;

package/upload/vars.d.ts

@@ -23,6 +23,7 @@ export declare const ACTION_CLASSES: {
 };
 export declare const LIST_CLASSES: {
     'upload-list': string;
+    'upload-list__row': string;
     'upload-list__item': string;
     'upload-list__item--load': string;
     'upload-list__item--error': string;
@@ -48,6 +49,7 @@ export declare const PICTURE_CLASSES: {
 };
 export declare const PICTURE_LIST_CLASSES: {
     'upload-picture-list': string;
+    'upload-picture-list__row': string;
     'upload-picture-list__item': string;
     'upload-picture-list__item--load': string;
     'upload-picture-list__item--error': string;
@@ -63,3 +65,12 @@ export declare const UploadContext: import("react").Context<{
     files: UploadFile[];
     onRemove: (file: UploadFile) => void;
 }>;
+export declare const UploadActionContext: import("react").Context<{
+    file: UploadFile;
+    defaultActions?: {
+        preview?: ((file: UploadFile) => void) | undefined;
+        download?: ((file: UploadFile) => void) | undefined;
+    } | undefined;
+    light?: boolean | undefined;
+    onRemove?: (() => void) | undefined;
+} | undefined>;

package/upload/vars.js

@@ -22,6 +22,7 @@ export const ACTION_CLASSES = {
 };
 export const LIST_CLASSES = {
     'upload-list': '^upload-list',
+    'upload-list__row': '^upload-list__row',
     'upload-list__item': '^upload-list__item',
     'upload-list__item--load': '^upload-list__item--load',
     'upload-list__item--error': '^upload-list__item--error',
@@ -47,6 +48,7 @@ export const PICTURE_CLASSES = {
 };
 export const PICTURE_LIST_CLASSES = {
     'upload-picture-list': '^upload-picture-list',
+    'upload-picture-list__row': '^upload-picture-list__row',
     'upload-picture-list__item': '^upload-picture-list__item',
     'upload-picture-list__item--load': '^upload-picture-list__item--load',
     'upload-picture-list__item--error': '^upload-picture-list__item--error',
@@ -63,3 +65,4 @@ export const UploadContext = createContext({
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onRemove: () => { },
 });
+export const UploadActionContext = createContext(undefined);

package/virtual-scroll/VirtualScroll.d.ts

@@ -1,5 +1,3 @@
 /// <reference types="react" />
-import type { VirtualScrollProps, VirtualScrollRef } from './types';
-declare function VirtualScrollFC<T>(props: VirtualScrollProps<T>, ref: React.ForwardedRef<VirtualScrollRef<T>>): JSX.Element | null;
-export declare const VirtualScroll: <T>(props: VirtualScrollProps<T> & React.RefAttributes<VirtualScrollRef<T>>) => ReturnType<typeof VirtualScrollFC>;
-export {};
+import type { VirtualScrollProps } from './types';
+export declare function VirtualScroll<T>(props: VirtualScrollProps<T>): React.ReactElement | null;

package/virtual-scroll/VirtualScroll.js

@@ -2,15 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEventCallback } from '@laser-ui/hooks';
 import { checkScrollEnd } from '@laser-ui/utils';
 import { isBoolean, isNumber, isUndefined, nth } from 'lodash';
-import { Fragment, createElement, forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Fragment, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { EMPTY } from './vars';
 import { useComponentProps } from '../hooks';
-function VirtualScrollFC(props, ref) {
-    const { children, enable = true, list, listSize, listPadding: listPaddingProp, itemKey, itemRender, itemSize: itemSizeProp, itemEmptySize: itemEmptySizeProp = 0, itemNested, itemEmptyRender, itemExpand, itemFocusable: itemFocusableProp = true, itemFocused, itemInAriaSetsize: itemInAriaSetsizeProp = true, placeholder, horizontal = false, onScrollEnd, } = useComponentProps('VirtualScroll', props);
+export function VirtualScroll(props) {
+    const { ref, children, enable = true, list, listSize, listPadding: listPaddingProp, itemKey, itemRender, itemSize: itemSizeProp, itemEmptySize: itemEmptySizeProp = 0, itemNested, itemEmptyRender, itemExpand, itemFocusable: itemFocusableProp = true, itemFocused, itemInAriaSetsize: itemInAriaSetsizeProp = true, placeholder: Placeholder, horizontal = false, onScrollEnd, } = useComponentProps('VirtualScroll', props);
     const listPadding = isNumber(listPaddingProp) ? [listPaddingProp, listPaddingProp] : listPaddingProp;
-    const dataRef = useRef({
-        listCache: new Map(),
-    });
+    const listSaved = useRef(new Map());
     const [_scrollPosition, setScrollPosition] = useState(0);
     const itemSize = useMemo(() => (isNumber(itemSizeProp) ? () => itemSizeProp : itemSizeProp), [itemSizeProp]);
     const itemEmptySize = useMemo(() => (isNumber(itemEmptySizeProp) ? () => itemEmptySizeProp : itemEmptySizeProp), [itemEmptySizeProp]);
@@ -139,10 +137,10 @@ function VirtualScrollFC(props, ref) {
                                 childrenList = getList(nestedData.length === 0 ? [EMPTY] : nestedData, ancestry.concat([item]));
                             }
                             else {
-                                childrenList = (_a = dataRef.current.listCache.get(key)) !== null && _a !== void 0 ? _a : [];
+                                childrenList = (_a = listSaved.current.get(key)) !== null && _a !== void 0 ? _a : [];
                                 if (expand) {
                                     childrenList = getList(nestedData.length === 0 ? [EMPTY] : nestedData, ancestry.concat([item]));
-                                    dataRef.current.listCache.set(key, childrenList);
+                                    listSaved.current.set(key, childrenList);
                                 }
                             }
                             list.push(itemRender(item, index, {
@@ -188,30 +186,25 @@ function VirtualScrollFC(props, ref) {
                     }
                 }
                 if (fillSize[0] > 0) {
-                    list.unshift(createElement(placeholder, {
-                        key: '$$fill-size-0',
-                        style: {
+                    list.unshift(_jsx(Placeholder, { style: {
                             display: horizontal ? 'inline-block' : 'block',
                             overflow: 'hidden',
                             width: horizontal ? fillSize[0] : 0,
                             height: horizontal ? 0 : fillSize[0],
                             flexShrink: 0,
                         },
-                        'aria-hidden': true,
-                    }));
+                        'aria-hidden': true }, "$$fill-size-0"));
                 }
+                _jsx("div", {});
                 if (fillSize[1] > 0) {
-                    list.push(createElement(placeholder, {
-                        key: '$$fill-size-1',
-                        style: {
+                    list.push(_jsx(Placeholder, { style: {
                             display: horizontal ? 'inline-block' : 'block',
                             overflow: 'hidden',
                             width: horizontal ? fillSize[1] : 0,
                             height: horizontal ? 0 : fillSize[1],
                             flexShrink: 0,
                         },
-                        'aria-hidden': true,
-                    }));
+                        'aria-hidden': true }, "$$fill-size-1"));
                 }
                 return list;
             };
@@ -248,10 +241,10 @@ function VirtualScrollFC(props, ref) {
                             childrenList = getList(nestedData.length === 0 ? [EMPTY] : nestedData, ancestry.concat([item]));
                         }
                         else {
-                            childrenList = (_a = dataRef.current.listCache.get(key)) !== null && _a !== void 0 ? _a : [];
+                            childrenList = (_a = listSaved.current.get(key)) !== null && _a !== void 0 ? _a : [];
                             if (expand) {
                                 childrenList = getList(nestedData.length === 0 ? [EMPTY] : nestedData, ancestry.concat([item]));
-                                dataRef.current.listCache.set(key, childrenList);
+                                listSaved.current.set(key, childrenList);
                             }
                         }
                         list.push(itemRender(item, index, {
@@ -427,4 +420,3 @@ function VirtualScrollFC(props, ref) {
         }
     });
 }
-export const VirtualScroll = forwardRef(VirtualScrollFC);

package/virtual-scroll/types.d.ts

@@ -9,7 +9,8 @@ export interface VirtualScrollRef<T> {
     scrollToEnd: (el: HTMLElement) => T | undefined;
 }
 export interface VirtualScrollProps<T> {
-    children: (vsList: React.ReactNode, onScroll: React.UIEventHandler<HTMLElement>) => JSX.Element | null;
+    ref?: React.Ref<VirtualScrollRef<T>>;
+    children: (vsList: React.ReactNode, onScroll: React.UIEventHandler<HTMLElement>) => React.ReactElement | null;
     enable?: boolean;
     list: T[];
     listSize: number;

package/wave/Wave.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { WaveProps } from './types';
+export declare function Wave(props: WaveProps): React.ReactElement | null;

package/{internal/wave → wave}/Wave.js

@@ -1,12 +1,12 @@
 import { __rest } from "tslib";
 import { createElement as _createElement } from "react";
 import { useEventCallback } from '@laser-ui/hooks';
-import { forwardRef, useImperativeHandle, useState } from 'react';
+import { useImperativeHandle, useState } from 'react';
 import { CLASSES } from './vars';
-import { useNamespace, useStyled } from '../../hooks';
-import { mergeCS } from '../../utils';
-export const Wave = forwardRef((props, ref) => {
-    const { color } = props, restProps = __rest(props, ["color"]);
+import { useNamespace, useStyled } from '../hooks';
+import { mergeCS } from '../utils';
+export function Wave(props) {
+    const { ref, color } = props, restProps = __rest(props, ["ref", "color"]);
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { wave: undefined });
     const [node, setNode] = useState(null);
@@ -22,4 +22,4 @@ export const Wave = forwardRef((props, ref) => {
     });
     useImperativeHandle(ref, () => wave, [wave]);
     return node;
-});
+}

package/{internal/wave → wave}/types.d.ts

@@ -2,5 +2,6 @@
 export {};
 export type WaveRef = () => void;
 export interface WaveProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    ref?: React.Ref<WaveRef>;
     color: string;
 }

package/wave/types.js

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

package/hooks/useJSS.d.ts

@@ -1 +0,0 @@
-export declare function useJSS<T extends string | number | symbol>(): import("jss").StyleSheet<T>;

package/hooks/useJSS.js

@@ -1,15 +0,0 @@
-import { create } from 'jss';
-import preset from 'jss-preset-default';
-import { useEffect, useMemo } from 'react';
-const jss = create();
-jss.setup(preset());
-export function useJSS() {
-    const sheet = useMemo(() => jss.createStyleSheet({}), []);
-    useEffect(() => {
-        sheet.attach();
-        return () => {
-            sheet.detach();
-        };
-    }, [sheet]);
-    return sheet;
-}

package/hooks/useNextTick.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function useNextTick(): import("react").MutableRefObject<boolean>;

package/internal/mask/Mask.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { MaskProps } from './types';
-export declare function Mask(props: MaskProps): JSX.Element | null;

package/internal/mask/Mask.js

@@ -1,36 +0,0 @@
-import { __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { CLASSES } from './vars';
-import { useStyled } from '../../hooks';
-import { mergeCS } from '../../utils';
-import { TTANSITION_DURING_FAST } from '../../vars';
-import { Transition } from '../transition';
-export function Mask(props) {
-    const { visible, onClose, afterVisibleChange } = props, restProps = __rest(props, ["visible", "onClose", "afterVisibleChange"]);
-    const styled = useStyled(CLASSES, { mask: undefined });
-    const transitionStyles = {
-        enter: { opacity: 0 },
-        entering: {
-            transition: ['opacity'].map((attr) => `${attr} ${TTANSITION_DURING_FAST}ms linear`).join(', '),
-        },
-        leaving: {
-            opacity: 0,
-            transition: ['opacity'].map((attr) => `${attr} ${TTANSITION_DURING_FAST}ms linear`).join(', '),
-        },
-        leaved: { display: 'none' },
-    };
-    return (_jsx(Transition, { enter: visible, during: TTANSITION_DURING_FAST, 
-        // TODO: Should it be controllable?
-        skipFirstTransition: false, afterEnter: () => {
-            afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
-        }, afterLeave: () => {
-            afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(false);
-        }, children: (state) => (_jsx("div", Object.assign({}, restProps, mergeCS(styled('mask'), {
-            className: restProps.className,
-            style: Object.assign(Object.assign({}, restProps.style), transitionStyles[state]),
-        }), { onClick: (e) => {
-                var _a;
-                (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
-                onClose === null || onClose === void 0 ? void 0 : onClose();
-            } }))) }));
-}

package/internal/transition/CollapseTransition.js

@@ -1,101 +0,0 @@
-import { __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { isNumber, isUndefined } from 'lodash';
-import { useRef } from 'react';
-import { Transition } from './Transition';
-export function CollapseTransition(props) {
-    const { children, originalSize: originalSizeProp, collapsedSize, styles } = props, restProps = __rest(props, ["children", "originalSize", "collapsedSize", "styles"]);
-    const dataRef = useRef({
-        width: 0,
-        height: 0,
-    });
-    const elRef = useRef(null);
-    const isHorizontal = !isUndefined(originalSizeProp.width);
-    const getSizeStyle = (val) => (isUndefined(val) ? '' : isNumber(val) ? `${val}px` : val);
-    return (_jsx(Transition, Object.assign({}, restProps, { afterRender: () => {
-            var _a, _b, _c, _d, _e;
-            (_a = restProps.afterRender) === null || _a === void 0 ? void 0 : _a.call(restProps);
-            if (elRef.current) {
-                if (originalSizeProp.width === 'auto') {
-                    const cssText = elRef.current.style.cssText;
-                    elRef.current.style.width = 'auto';
-                    elRef.current.style.paddingLeft = getSizeStyle((_b = originalSizeProp.padding) === null || _b === void 0 ? void 0 : _b[3]);
-                    elRef.current.style.paddingRight = getSizeStyle((_c = originalSizeProp.padding) === null || _c === void 0 ? void 0 : _c[1]);
-                    dataRef.current.width = elRef.current.offsetWidth;
-                    elRef.current.style.cssText = cssText;
-                    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                    elRef.current.offsetTop;
-                }
-                else if (originalSizeProp.height === 'auto') {
-                    const cssText = elRef.current.style.cssText;
-                    elRef.current.style.height = 'auto';
-                    elRef.current.style.paddingTop = getSizeStyle((_d = originalSizeProp.padding) === null || _d === void 0 ? void 0 : _d[0]);
-                    elRef.current.style.paddingBottom = getSizeStyle((_e = originalSizeProp.padding) === null || _e === void 0 ? void 0 : _e[2]);
-                    dataRef.current.height = elRef.current.offsetHeight;
-                    elRef.current.style.cssText = cssText;
-                    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                    elRef.current.offsetTop;
-                }
-            }
-        }, children: (state) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-            const transitionStyle = Object.assign({}, styles[state]);
-            const originalSize = {
-                [isHorizontal ? 'width' : 'height']: isHorizontal
-                    ? originalSizeProp.width === 'auto'
-                        ? dataRef.current.width
-                        : originalSizeProp.width
-                    : originalSizeProp.height === 'auto'
-                        ? dataRef.current.height
-                        : originalSizeProp.height,
-            };
-            if (!isUndefined(originalSizeProp.padding)) {
-                originalSize.padding = originalSizeProp.padding.map((p) => getSizeStyle(p)).join(' ');
-            }
-            const collapsedStyle = Object.assign({
-                [isHorizontal ? 'width' : 'height']: collapsedSize[isHorizontal ? 'width' : 'height'],
-                overflow: 'hidden',
-            }, isHorizontal
-                ? {
-                    paddingLeft: (_b = (_a = collapsedSize.padding) === null || _a === void 0 ? void 0 : _a[3]) !== null && _b !== void 0 ? _b : 0,
-                    paddingRight: (_d = (_c = collapsedSize.padding) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : 0,
-                    marginLeft: (_f = (_e = collapsedSize.margin) === null || _e === void 0 ? void 0 : _e[3]) !== null && _f !== void 0 ? _f : 0,
-                    marginRight: (_h = (_g = collapsedSize.margin) === null || _g === void 0 ? void 0 : _g[1]) !== null && _h !== void 0 ? _h : 0,
-                }
-                : {
-                    paddingTop: (_k = (_j = collapsedSize.padding) === null || _j === void 0 ? void 0 : _j[0]) !== null && _k !== void 0 ? _k : 0,
-                    paddingBottom: (_m = (_l = collapsedSize.padding) === null || _l === void 0 ? void 0 : _l[2]) !== null && _m !== void 0 ? _m : 0,
-                    marginTop: (_p = (_o = collapsedSize.margin) === null || _o === void 0 ? void 0 : _o[0]) !== null && _p !== void 0 ? _p : 0,
-                    marginBottom: (_r = (_q = collapsedSize.margin) === null || _q === void 0 ? void 0 : _q[2]) !== null && _r !== void 0 ? _r : 0,
-                });
-            switch (state) {
-                case 'enter':
-                    Object.assign(transitionStyle, collapsedStyle);
-                    break;
-                case 'entering':
-                    Object.assign(transitionStyle, originalSize, {
-                        overflow: 'hidden',
-                    });
-                    break;
-                case 'leave':
-                    if (elRef.current) {
-                        originalSize[isHorizontal ? 'width' : 'height'] = elRef.current[isHorizontal ? 'offsetWidth' : 'offsetHeight'];
-                    }
-                    Object.assign(transitionStyle, originalSize, {
-                        overflow: 'hidden',
-                    });
-                    break;
-                case 'leaving':
-                    Object.assign(transitionStyle, collapsedStyle);
-                    break;
-                case 'leaved':
-                    Object.assign(transitionStyle, collapsedStyle, {
-                        overflow: 'hidden',
-                    });
-                    break;
-                default:
-                    break;
-            }
-            return children(elRef, transitionStyle, state);
-        } })));
-}