@laser-ui/components 1.6.0 → 2.0.0

package/date-picker/internal/DatePickerPanel.js

@@ -4,12 +4,12 @@ import KeyboardArrowLeftOutlined from '@material-design-icons/svg/outlined/keybo
 import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
 import KeyboardDoubleArrowLeftOutlined from '@material-design-icons/svg/outlined/keyboard_double_arrow_left.svg?react';
 import KeyboardDoubleArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_double_arrow_right.svg?react';
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { useImperativeHandle, useRef, useState } from 'react';
 import dayjs from '../../dayjs';
 import { useTranslation } from '../../hooks';
 import { Icon } from '../../icon';
-export const DatePickerPanel = forwardRef((props, ref) => {
-    const { styled, currentSelected: currentSelectedProp, anotherSelected: anotherSelectedProp, config, range, onDateChange } = props;
+export function DatePickerPanel(props) {
+    const { ref, styled, currentSelected: currentSelectedProp, anotherSelected: anotherSelectedProp, config, range, onDateChange } = props;
     const dataRef = useRef({});
     const { t, lang } = useTranslation();
     const async = useAsync();
@@ -101,4 +101,4 @@ export const DatePickerPanel = forwardRef((props, ref) => {
                                         'date-picker__cell--today': !isCurrentSelected && !isAnotherSelected && day.isSame(dayjs(), 'date'),
                                     }), { children: day.get('date') })) }, index2));
                             }) }, index1))) })] }))] })));
-});
+}

package/date-picker/types.d.ts

@@ -2,12 +2,13 @@
 import type { CLASSES } from './vars';
 import type { FormControlProvider } from '../form/types';
 import type { TimePickerProps } from '../time-picker';
-import type { BaseProps, CloneHTMLElement, Size } from '../types';
+import type { BaseProps, Size } from '../types';
 export {};
 export interface DatePickerRef {
     updatePosition: () => void;
 }
 export interface DatePickerProps extends BaseProps<'date-picker' | 'time-picker' | 'date-picker-popup', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'placeholder'> {
+    ref?: React.Ref<DatePickerRef>;
     formControl?: FormControlProvider;
     model?: Date | [Date, Date] | null;
     defaultModel?: Date | [Date, Date] | null;
@@ -28,8 +29,7 @@ export interface DatePickerProps extends BaseProps<'date-picker' | 'time-picker'
     };
     showTime?: boolean | Pick<TimePickerProps, 'config'>;
     escClosable?: boolean;
-    inputRef?: [React.ForwardedRef<HTMLInputElement>?, React.ForwardedRef<HTMLInputElement>?];
-    inputRender?: [CloneHTMLElement?, CloneHTMLElement?];
+    inputProps?: [React.ComponentPropsWithRef<'input'>?, React.ComponentPropsWithRef<'input'>?];
     onModelChange?: (date: any) => void;
     onVisibleChange?: (visible: boolean) => void;
     onClear?: () => void;

package/dialog-service.d.ts

@@ -1,9 +1,13 @@
 /// <reference types="react" />
-export interface DialogInstance<P extends object> {
+export declare class DialogInstance<P extends object> {
     key: string | number;
-    node: React.FunctionComponentElement<P>;
-    close: () => void;
-    rerender: (props: P) => void;
+    private type;
+    private props;
+    private service;
+    get node(): React.ReactElement<P>;
+    constructor(key: string | number, type: React.FC<P>, props: any, service: DialogService);
+    rerender(props: Partial<P>): void;
+    close(): void;
 }
 export declare class DialogService {
     private _key;
@@ -11,7 +15,6 @@ export declare class DialogService {
     private _emitChange;
     constructor(emitChange: (dialogs: DialogInstance<any>[]) => void);
     open<P extends object>(type: React.FC<P>, props: Omit<P, 'visible'>, key?: string | number): DialogInstance<P>;
-    close(key: string | number): void;
-    rerender(key: string | number, props: any): void;
+    emitChange(key: string | number): void;
     closeAll(animation?: boolean): void;
 }

package/dialog-service.js

@@ -1,4 +1,44 @@
-import { cloneElement, createElement } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export class DialogInstance {
+    get node() {
+        const Type = this.type;
+        return _jsx(Type, Object.assign({}, this.props), this.key);
+    }
+    constructor(key, type, props, service) {
+        Object.defineProperty(this, "key", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: key
+        });
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: type
+        });
+        Object.defineProperty(this, "props", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: props
+        });
+        Object.defineProperty(this, "service", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: service
+        });
+    }
+    rerender(props) {
+        Object.assign(this.props, props);
+        this.service.emitChange(this.key);
+    }
+    close() {
+        this.props.visible = false;
+        this.service.emitChange(this.key);
+    }
+}
 export class DialogService {
     constructor(emitChange) {
         Object.defineProperty(this, "_key", {
@@ -27,8 +67,12 @@ export class DialogService {
         const dialogKey = key !== null && key !== void 0 ? key : `l_#${++this._key}`;
         const dialogProps = Object.assign(Object.assign({}, props), { visible: true, skipFirstTransition: false, onClose: () => {
                 var _a, _b;
-                this.close(dialogKey);
                 (_b = (_a = props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+                const index = this._dialogs.findIndex((dialog) => dialog.key === dialogKey);
+                if (index !== -1) {
+                    const instance = this._dialogs[index];
+                    instance.close();
+                }
             }, afterVisibleChange: (visible) => {
                 var _a, _b;
                 (_b = (_a = props).afterVisibleChange) === null || _b === void 0 ? void 0 : _b.call(_a, visible);
@@ -40,46 +84,26 @@ export class DialogService {
                     }
                 }
             } });
-        const node = createElement(type, Object.assign({ key: dialogKey }, dialogProps));
-        const instance = {
-            key: dialogKey,
-            node,
-            close: () => {
-                this.close(dialogKey);
-            },
-            rerender: (props) => {
-                this.rerender(dialogKey, props);
-            },
-        };
+        const instance = new DialogInstance(dialogKey, type, dialogProps, this);
         this._dialogs.push(instance);
         this._emitChange();
         return instance;
     }
-    close(key) {
+    emitChange(key) {
         const index = this._dialogs.findIndex((dialog) => dialog.key === key);
         if (index !== -1) {
-            const instance = this._dialogs[index];
-            instance.node = cloneElement(instance.node, { visible: false });
-            this._emitChange();
-        }
-    }
-    rerender(key, props) {
-        const index = this._dialogs.findIndex((dialog) => dialog.key === key);
-        if (index !== -1) {
-            const instance = this._dialogs[index];
-            instance.node = cloneElement(instance.node, props);
             this._emitChange();
         }
     }
     closeAll(animation = true) {
         if (animation) {
             this._dialogs.forEach((dialog) => {
-                dialog.node = cloneElement(dialog.node, { visible: false });
+                dialog.close();
             });
         }
         else {
             this._dialogs = [];
+            this._emitChange();
         }
-        this._emitChange();
     }
 }

package/drawer/Drawer.d.ts

@@ -3,7 +3,7 @@ import type { DrawerProps } from './types';
 import { DrawerFooter } from './DrawerFooter';
 import { DrawerHeader } from './DrawerHeader';
 export declare const Drawer: {
-    (props: DrawerProps): JSX.Element | null;
+    (props: DrawerProps): React.ReactElement | null;
     Header: typeof DrawerHeader;
     Footer: typeof DrawerFooter;
 };

package/drawer/Drawer.js

@@ -1,51 +1,32 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isString, isUndefined } from 'lodash';
-import { cloneElement, useCallback, useContext, useEffect, useId, useRef } from 'react';
+import { use, useId, useRef, useState } from 'react';
 import { DrawerFooter } from './DrawerFooter';
 import { DrawerHeader } from './DrawerHeader';
 import { CLASSES, DrawerContext } from './vars';
 import { useComponentProps, useLockScroll, useMaxIndex, useNamespace, useStyled } from '../hooks';
-import { Mask } from '../internal/mask';
+import { LazyLoading } from '../internal/lazy-loading';
 import { Portal } from '../internal/portal';
-import { Transition } from '../internal/transition';
+import { Mask } from '../mask';
+import { Transition } from '../transition';
 import { handleModalKeyDown, mergeCS } from '../utils';
 import { TTANSITION_DURING_BASE } from '../vars';
 export const Drawer = (props) => {
-    const _a = useComponentProps('Drawer', props), { children, styleOverrides, styleProvider, visible, header: headerProp, footer, placement = 'right', width = 400, height = 280, mask = true, maskClosable = true, escClosable = true, container, skipFirstTransition = true, destroyAfterClose = true, zIndex: zIndexProp, onClose, afterVisibleChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "visible", "header", "footer", "placement", "width", "height", "mask", "maskClosable", "escClosable", "container", "skipFirstTransition", "destroyAfterClose", "zIndex", "onClose", "afterVisibleChange"]);
+    const _a = useComponentProps('Drawer', props), { children, styleOverrides, styleProvider, visible, header: headerProp, footer, placement = 'right', width = 400, height = 280, mask = true, maskClosable = true, escClosable = true, container, skipFirstTransition = true, destroyAfterClose = false, lazyLoading = true, zIndex: zIndexProp, onClose, afterVisibleChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "visible", "header", "footer", "placement", "width", "height", "mask", "maskClosable", "escClosable", "container", "skipFirstTransition", "destroyAfterClose", "lazyLoading", "zIndex", "onClose", "afterVisibleChange"]);
     const isFixed = isUndefined(container);
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { drawer: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.drawer }, styleOverrides);
     const drawerRef = useRef(null);
     const drawerContentRef = useRef(null);
-    const dataRef = useRef({
-        prevActiveEl: null,
-    });
+    const prevActiveEl = useRef(null);
     const uniqueId = useId();
     const titleId = `${namespace}-drawer-title-${uniqueId}`;
     const bodyId = `${namespace}-drawer-content-${uniqueId}`;
-    const drawerContext = useContext(DrawerContext);
-    const drawerContextValue = useCallback((offsets) => {
-        const offset = offsets[placement].reduce((sum, v) => Math.min((v / 3) * 2, 200) + sum, 0);
-        if (drawerRef.current) {
-            drawerRef.current.style.transform =
-                placement === 'top'
-                    ? `translateY(${offset}px)`
-                    : placement === 'right'
-                        ? `translateX(-${offset}px)`
-                        : placement === 'bottom'
-                            ? `translateY(-${offset}px)`
-                            : `translateX(${offset}px)`;
-        }
-        if (drawerContentRef.current) {
-            drawerContext(Object.assign(Object.assign({}, offsets), { [placement]: [
-                    placement === 'top' || placement === 'bottom' ? drawerContentRef.current.offsetHeight : drawerContentRef.current.offsetWidth,
-                ].concat(offsets[placement]) }));
-        }
-    }, [drawerContext, placement]);
+    const drawerContext = use(DrawerContext);
     const handleVisibleChange = (visible) => {
         if (drawerContentRef.current) {
-            drawerContext(Object.assign({ top: [], right: [], bottom: [], left: [] }, {
+            drawerContext === null || drawerContext === void 0 ? void 0 : drawerContext.onVisibleChange(Object.assign({ top: [], right: [], bottom: [], left: [] }, {
                 [placement]: visible
                     ? [
                         placement === 'top' || placement === 'bottom'
@@ -56,12 +37,7 @@ export const Drawer = (props) => {
             }));
         }
     };
-    useEffect(() => {
-        if (!visible) {
-            handleVisibleChange(false);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [visible]);
+    const [offset, setOffset] = useState(0);
     const maxZIndex = useMaxIndex(visible);
     const zIndex = !isUndefined(zIndexProp)
         ? zIndexProp
@@ -69,37 +45,6 @@ export const Drawer = (props) => {
             ? `var(--${namespace}-zindex-absolute)`
             : `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
     useLockScroll(isFixed && visible);
-    const transitionStyles = (() => {
-        const transform = placement === 'top'
-            ? 'translate(0, -100%)'
-            : placement === 'right'
-                ? 'translate(100%, 0)'
-                : placement === 'bottom'
-                    ? 'translate(0, 100%)'
-                    : 'translate(-100%, 0)';
-        return {
-            enter: { transform },
-            entering: {
-                transition: ['transform'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`).join(', '),
-            },
-            leaving: {
-                transform,
-                transition: ['transform'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`).join(', '),
-            },
-            leaved: { transform },
-        };
-    })();
-    const headerNode = (() => {
-        if (headerProp) {
-            const node = isString(headerProp) ? _jsx(DrawerHeader, { children: headerProp }) : headerProp;
-            return cloneElement(node, {
-                _id: titleId,
-                _onClose: () => {
-                    onClose === null || onClose === void 0 ? void 0 : onClose();
-                },
-            });
-        }
-    })();
     return (_jsx(Portal, { selector: isUndefined(container)
             ? () => {
                 let el = document.getElementById(`${namespace}-drawer-root`);
@@ -110,45 +55,91 @@ export const Drawer = (props) => {
                 }
                 return el;
             }
-            : container, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_BASE, skipFirstTransition: skipFirstTransition, destroyWhenLeaved: destroyAfterClose, afterRender: () => {
+            : container, children: _jsx(Transition, { enter: visible, name: `${namespace}-drawer`, duration: TTANSITION_DURING_BASE, skipFirstTransition: skipFirstTransition, onSkipEnter: () => {
+                handleVisibleChange(true);
+            }, onBeforeEnter: () => {
                 handleVisibleChange(true);
-            }, afterEnter: () => {
+            }, onAfterEnter: () => {
                 afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
-                dataRef.current.prevActiveEl = document.activeElement;
+                prevActiveEl.current = document.activeElement;
                 if (drawerRef.current) {
                     drawerRef.current.focus({ preventScroll: true });
                 }
-            }, afterLeave: () => {
+            }, onSkipLeave: () => {
+                handleVisibleChange(false);
+            }, onBeforeLeave: () => {
+                handleVisibleChange(false);
+            }, onAfterLeave: () => {
                 afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(false);
-                if (dataRef.current.prevActiveEl) {
-                    dataRef.current.prevActiveEl.focus({ preventScroll: true });
+                if (prevActiveEl.current) {
+                    prevActiveEl.current.focus({ preventScroll: true });
                 }
-            }, children: (state) => {
+            }, children: (transitionRef, leaved) => {
                 var _a;
-                return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('drawer', `drawer--${placement}`), {
-                    className: restProps.className,
-                    style: Object.assign(Object.assign({}, restProps.style), { display: state === 'leaved' ? 'none' : undefined, position: isFixed ? undefined : 'absolute', zIndex }),
-                }), { ref: drawerRef, tabIndex: (_a = restProps.tabIndex) !== null && _a !== void 0 ? _a : -1, role: "dialog", "aria-modal": true, "aria-labelledby": headerNode ? titleId : undefined, "aria-describedby": bodyId, onKeyDown: (e) => {
-                        var _a;
-                        (_a = restProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
-                        if (visible && escClosable && e.code === 'Escape') {
-                            e.stopPropagation();
-                            e.preventDefault();
-                            onClose === null || onClose === void 0 ? void 0 : onClose();
-                        }
-                        handleModalKeyDown(e);
-                    }, children: [mask && (_jsx(Mask, { visible: visible, onClose: () => {
-                                if (maskClosable) {
+                return (_jsx(LazyLoading, { hidden: leaved, disabled: !lazyLoading, children: leaved && destroyAfterClose ? null : (_jsx(DrawerContext, { value: {
+                            id: titleId,
+                            onClose: () => {
+                                onClose === null || onClose === void 0 ? void 0 : onClose();
+                            },
+                            onVisibleChange: (offsets) => {
+                                const offset = offsets[placement].reduce((sum, v) => Math.min((v / 3) * 2, 200) + sum, 0);
+                                setOffset(offset);
+                                if (drawerContentRef.current) {
+                                    drawerContext === null || drawerContext === void 0 ? void 0 : drawerContext.onVisibleChange(Object.assign(Object.assign({}, offsets), { [placement]: [
+                                            placement === 'top' || placement === 'bottom'
+                                                ? drawerContentRef.current.offsetHeight
+                                                : drawerContentRef.current.offsetWidth,
+                                        ].concat(offsets[placement]) }));
+                                }
+                            },
+                        }, children: _jsxs("div", Object.assign({}, restProps, mergeCS(styled('drawer', `drawer--${placement}`), {
+                            className: restProps.className,
+                            style: Object.assign(Object.assign(Object.assign(Object.assign({}, restProps.style), {
+                                '--drawer-transform': placement === 'top'
+                                    ? 'translate(0, -100%)'
+                                    : placement === 'right'
+                                        ? 'translate(100%, 0)'
+                                        : placement === 'bottom'
+                                            ? 'translate(0, 100%)'
+                                            : 'translate(-100%, 0)',
+                            }), { position: isFixed ? undefined : 'absolute', zIndex, transform: placement === 'top'
+                                    ? `translateY(${offset}px)`
+                                    : placement === 'right'
+                                        ? `translateX(-${offset}px)`
+                                        : placement === 'bottom'
+                                            ? `translateY(-${offset}px)`
+                                            : `translateX(${offset}px)` }), (leaved ? { display: 'none' } : undefined)),
+                        }), { ref: (instance) => {
+                                drawerRef.current = instance;
+                                return () => {
+                                    drawerRef.current = null;
+                                };
+                            }, tabIndex: (_a = restProps.tabIndex) !== null && _a !== void 0 ? _a : -1, role: "dialog", "aria-modal": true, "aria-labelledby": headerProp ? titleId : undefined, "aria-describedby": bodyId, onKeyDown: (e) => {
+                                var _a;
+                                (_a = restProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                                if (visible && escClosable && e.code === 'Escape') {
+                                    e.stopPropagation();
+                                    e.preventDefault();
                                     onClose === null || onClose === void 0 ? void 0 : onClose();
                                 }
-                            } })), _jsxs("div", Object.assign({}, mergeCS(styled('drawer__content'), {
-                            style: Object.assign({ width: placement === 'left' || placement === 'right' ? width : undefined, height: placement === 'bottom' || placement === 'top' ? height : undefined }, transitionStyles[state]),
-                        }), { ref: drawerContentRef, children: [headerNode, _jsx("div", Object.assign({}, styled('drawer__body'), { id: bodyId, children: _jsx(DrawerContext.Provider, { value: drawerContextValue, children: children }) })), footer &&
-                                    cloneElement(footer, {
-                                        _onClose: () => {
+                                handleModalKeyDown(e);
+                            }, children: [mask && (_jsx(Mask, { visible: visible, onClose: () => {
+                                        if (maskClosable) {
                                             onClose === null || onClose === void 0 ? void 0 : onClose();
-                                        },
-                                    })] }))] })));
+                                        }
+                                    } })), _jsxs("div", Object.assign({}, mergeCS(styled('drawer__content'), {
+                                    style: {
+                                        width: placement === 'left' || placement === 'right' ? width : undefined,
+                                        height: placement === 'bottom' || placement === 'top' ? height : undefined,
+                                    },
+                                }), { ref: (instance) => {
+                                        drawerContentRef.current = instance;
+                                        transitionRef(instance);
+                                        return () => {
+                                            drawerContentRef.current = null;
+                                            transitionRef(null);
+                                        };
+                                    }, children: [isString(headerProp) ? _jsx(DrawerHeader, { children: headerProp }) : headerProp, _jsx("div", Object.assign({}, styled('drawer__body'), { id: bodyId, children: children })), footer] }))] })) })) }));
             } }) }));
 };
 Drawer.Header = DrawerHeader;

package/drawer/DrawerFooter.d.ts

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

package/drawer/DrawerFooter.js

@@ -1,14 +1,16 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Children } from 'react';
-import { CLASSES } from './vars';
+import { has } from 'lodash';
+import { Fragment, use } from 'react';
+import { CLASSES, DrawerContext } from './vars';
 import { Button } from '../button';
 import { useComponentProps, useControlled, useStyled, useTranslation } from '../hooks';
 import { mergeCS } from '../utils';
 export function DrawerFooter(props) {
-    const _a = useComponentProps('DrawerFooter', props), { styleOverrides, styleProvider, align = 'right', actions = ['cancel', 'ok'], cancelProps: cancelPropsProp, okProps: okPropsProp, onCancelClick, onOkClick, _onClose } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "align", "actions", "cancelProps", "okProps", "onCancelClick", "onOkClick", "_onClose"]);
+    const _a = useComponentProps('DrawerFooter', props), { styleOverrides, styleProvider, align = 'right', actions = ['cancel', 'ok'], cancelProps: cancelPropsProp, okProps: okPropsProp, onCancelClick, onOkClick } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "align", "actions", "cancelProps", "okProps", "onCancelClick", "onOkClick"]);
     const styled = useStyled(CLASSES, { drawer: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.drawer }, styleOverrides);
     const { t } = useTranslation();
+    const drawerContext = use(DrawerContext);
     const [cancelLoading, changeCancelLoading] = useControlled(false, cancelPropsProp === null || cancelPropsProp === void 0 ? void 0 : cancelPropsProp.loading);
     const [okLoading, changeOkLoading] = useControlled(false, okPropsProp === null || okPropsProp === void 0 ? void 0 : okPropsProp.loading);
     const cancelProps = Object.assign(Object.assign({}, cancelPropsProp), { loading: cancelLoading, onClick: () => {
@@ -18,12 +20,12 @@ export function DrawerFooter(props) {
                 shouldClose.then((val) => {
                     changeCancelLoading(false);
                     if (val !== false) {
-                        _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+                        drawerContext === null || drawerContext === void 0 ? void 0 : drawerContext.onClose();
                     }
                 });
             }
             else if (shouldClose !== false) {
-                _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+                drawerContext === null || drawerContext === void 0 ? void 0 : drawerContext.onClose();
             }
         } });
     const okProps = Object.assign(Object.assign({}, okPropsProp), { loading: okLoading, onClick: () => {
@@ -33,19 +35,20 @@ export function DrawerFooter(props) {
                 shouldClose.then((val) => {
                     changeOkLoading(false);
                     if (val !== false) {
-                        _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+                        drawerContext === null || drawerContext === void 0 ? void 0 : drawerContext.onClose();
                     }
                 });
             }
             else if (shouldClose !== false) {
-                _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+                drawerContext === null || drawerContext === void 0 ? void 0 : drawerContext.onClose();
             }
         } });
     return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('drawer__footer', `drawer__footer--${align}`), {
         className: restProps.className,
         style: restProps.style,
-    }), { children: Children.map(actions, (action) => {
+    }), { children: actions.map((node, index) => {
             var _a, _b, _c;
-            return action === 'cancel' ? (_jsx(Button, Object.assign({}, cancelProps, { pattern: (_a = cancelProps.pattern) !== null && _a !== void 0 ? _a : 'secondary', children: (_b = cancelProps.children) !== null && _b !== void 0 ? _b : t('Footer', 'Cancel') }))) : action === 'ok' ? (_jsx(Button, Object.assign({}, okProps, { children: (_c = okProps.children) !== null && _c !== void 0 ? _c : t('Footer', 'OK') }))) : (action);
+            const { id, action } = (has(node, ['id', 'action']) ? node : { id: index, action: node });
+            return (_jsx(Fragment, { children: action === 'cancel' ? (_jsx(Button, Object.assign({}, cancelProps, { pattern: (_a = cancelProps.pattern) !== null && _a !== void 0 ? _a : 'secondary', children: (_b = cancelProps.children) !== null && _b !== void 0 ? _b : t('Footer', 'Cancel') }))) : action === 'ok' ? (_jsx(Button, Object.assign({}, okProps, { children: (_c = okProps.children) !== null && _c !== void 0 ? _c : t('Footer', 'OK') }))) : (action) }, id));
         }) })));
 }

package/drawer/DrawerHeader.d.ts

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

package/drawer/DrawerHeader.js

@@ -1,16 +1,18 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
-import { Children } from 'react';
-import { CLASSES } from './vars';
+import { has } from 'lodash';
+import { Fragment, use } from 'react';
+import { CLASSES, DrawerContext } from './vars';
 import { Button } from '../button';
 import { useComponentProps, useControlled, useStyled, useTranslation } from '../hooks';
 import { Icon } from '../icon';
 import { mergeCS } from '../utils';
 export function DrawerHeader(props) {
-    const _a = useComponentProps('DrawerHeader', props), { styleOverrides, styleProvider, children, actions = ['close'], closeProps: closePropsProp, onCloseClick, _id, _onClose } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "children", "actions", "closeProps", "onCloseClick", "_id", "_onClose"]);
+    const _a = useComponentProps('DrawerHeader', props), { styleOverrides, styleProvider, children, actions = ['close'], closeProps: closePropsProp, onCloseClick } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "children", "actions", "closeProps", "onCloseClick"]);
     const styled = useStyled(CLASSES, { drawer: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.drawer }, styleOverrides);
     const { t } = useTranslation();
+    const drawerContext = use(DrawerContext);
     const [closeLoading, changeCloseLoading] = useControlled(false, closePropsProp === null || closePropsProp === void 0 ? void 0 : closePropsProp.loading);
     const closeProps = Object.assign(Object.assign({}, closePropsProp), { loading: closeLoading, onClick: () => {
             const shouldClose = onCloseClick === null || onCloseClick === void 0 ? void 0 : onCloseClick();
@@ -19,19 +21,20 @@ export function DrawerHeader(props) {
                 shouldClose.then((val) => {
                     changeCloseLoading(false);
                     if (val !== false) {
-                        _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+                        drawerContext === null || drawerContext === void 0 ? void 0 : drawerContext.onClose();
                     }
                 });
             }
             else if (shouldClose !== false) {
-                _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+                drawerContext === null || drawerContext === void 0 ? void 0 : drawerContext.onClose();
             }
         } });
     return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('drawer__header'), {
         className: restProps.className,
         style: restProps.style,
-    }), { children: [_jsx("div", Object.assign({}, styled('drawer__header-title'), { id: _id, children: children })), _jsx("div", Object.assign({}, styled('drawer__header-actions'), { children: Children.map(actions, (action) => {
+    }), { children: [_jsx("div", Object.assign({}, styled('drawer__header-title'), { id: drawerContext === null || drawerContext === void 0 ? void 0 : drawerContext.id, children: children })), _jsx("div", Object.assign({}, styled('drawer__header-actions'), { children: actions.map((node, index) => {
                     var _a, _b, _c;
-                    return action === 'close' ? (_jsx(Button, Object.assign({}, closeProps, { "aria-label": (_a = closeProps['aria-label']) !== null && _a !== void 0 ? _a : t('Close'), pattern: (_b = closeProps.pattern) !== null && _b !== void 0 ? _b : 'text', icon: (_c = closeProps.icon) !== null && _c !== void 0 ? _c : (_jsx(Icon, { children: _jsx(CloseOutlined, {}) })) }))) : (action);
+                    const { id, action } = (has(node, ['id', 'action']) ? node : { id: index, action: node });
+                    return (_jsx(Fragment, { children: action === 'close' ? (_jsx(Button, Object.assign({}, closeProps, { "aria-label": (_a = closeProps['aria-label']) !== null && _a !== void 0 ? _a : t('Close'), pattern: (_b = closeProps.pattern) !== null && _b !== void 0 ? _b : 'text', icon: (_c = closeProps.icon) !== null && _c !== void 0 ? _c : (_jsx(Icon, { children: _jsx(CloseOutlined, {}) })) }))) : (action) }, id));
                 }) }))] })));
 }

package/drawer/types.d.ts

@@ -17,18 +17,25 @@ export interface DrawerProps extends BaseProps<'drawer', typeof CLASSES>, React.
     container?: RefExtra;
     skipFirstTransition?: boolean;
     destroyAfterClose?: boolean;
+    lazyLoading?: boolean;
     zIndex?: number | string;
     onClose?: () => void;
     afterVisibleChange?: (visible: boolean) => void;
 }
 export interface DrawerHeaderProps extends BaseProps<'drawer', typeof CLASSES>, React.HTMLAttributes<HTMLDivElement> {
-    actions?: React.ReactNode[];
+    actions?: (React.ReactNode | {
+        id: React.Key;
+        action: React.ReactNode;
+    })[];
     closeProps?: ButtonProps;
     onCloseClick?: () => any | Promise<any>;
 }
 export interface DrawerFooterProps extends BaseProps<'drawer', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
     align?: 'left' | 'center' | 'right';
-    actions?: React.ReactNode[];
+    actions?: (React.ReactNode | {
+        id: React.Key;
+        action: React.ReactNode;
+    })[];
     cancelProps?: ButtonProps;
     okProps?: ButtonProps;
     onCancelClick?: () => any | Promise<any>;

package/drawer/vars.d.ts

@@ -16,4 +16,8 @@ export declare const CLASSES: {
     'drawer__footer--center': string;
     'drawer__footer--right': string;
 };
-export declare const DrawerContext: import("react").Context<(offsets: Offsets) => void>;
+export declare const DrawerContext: import("react").Context<{
+    id: string;
+    onClose: () => void;
+    onVisibleChange: (offsets: Offsets) => void;
+} | undefined>;

package/drawer/vars.js

@@ -15,4 +15,4 @@ export const CLASSES = {
     'drawer__footer--center': '^drawer__footer--center',
     'drawer__footer--right': '^drawer__footer--right',
 };
-export const DrawerContext = createContext(() => { });
+export const DrawerContext = createContext(undefined);

package/dropdown/Dropdown.d.ts

@@ -1,5 +1,3 @@
 /// <reference types="react" />
-import type { DropdownItem, DropdownProps, DropdownRef } from './types';
-declare function DropdownFC<ID extends React.Key, T extends DropdownItem<ID>>(props: DropdownProps<ID, T>, ref: React.ForwardedRef<DropdownRef>): JSX.Element | null;
-export declare const Dropdown: <ID extends React.Key, T extends DropdownItem<ID>>(props: DropdownProps<ID, T> & React.RefAttributes<DropdownRef>) => ReturnType<typeof DropdownFC>;
-export {};
+import type { DropdownItem, DropdownProps } from './types';
+export declare function Dropdown<ID extends React.Key, T extends DropdownItem<ID>>(props: DropdownProps<ID, T>): React.ReactElement | null;