@laser-ui/components 1.6.0 → 2.0.0

package/menu/internal/MenuSub.js

@@ -2,24 +2,22 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEventCallback } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
 import { isUndefined } from 'lodash';
-import { cloneElement, forwardRef, useImperativeHandle, useRef } from 'react';
-import { useJSS, useMaxIndex, useTranslation } from '../../hooks';
+import { useImperativeHandle, useRef } from 'react';
+import { useMaxIndex, useTranslation } from '../../hooks';
 import { Popup } from '../../internal/popup';
 import { Portal } from '../../internal/portal';
-import { CollapseTransition, Transition } from '../../internal/transition';
+import { CollapseTransition, Transition } from '../../transition';
 import { getHorizontalSidePosition, getVerticalSidePosition, mergeCS } from '../../utils';
 import { TTANSITION_DURING_BASE, TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../../vars';
-export const MenuSub = forwardRef((props, ref) => {
-    const { children, namespace, styled, id, level, space, step, icon, list, popupState, trigger, posinset, mode, inNav, active, includeActive, expand, empty, focus, disabled, onVisibleChange, onClick, } = props;
-    const sheet = useJSS();
+export function MenuSub(props) {
+    const { ref, children, namespace, styled, id, level, space, step, icon, list, popupState, trigger, posinset, mode, inNav, active, includeActive, expand, empty, focus, disabled, onVisibleChange, onClick, } = props;
     const triggerRef = useRef(null);
     const popupRef = useRef(null);
-    const dataRef = useRef({});
+    const nodeSaved = useRef(null);
     const { t } = useTranslation();
     const visible = !isUndefined(popupState);
     const inHorizontalNav = mode === 'horizontal' && inNav;
     const iconMode = mode === 'icon' && inNav;
-    const transformOrigin = useRef();
     const updatePosition = useEventCallback(() => {
         if (!(disabled || mode === 'vertical') && visible && popupRef.current && triggerRef.current) {
             const height = popupRef.current.offsetHeight;
@@ -38,16 +36,10 @@ export const MenuSub = forwardRef((props, ref) => {
                     gap: inNav ? 10 : 14,
                     inWindow: WINDOW_SPACE,
                 });
-            transformOrigin.current = position.transformOrigin;
-            if (sheet.classes.position) {
-                popupRef.current.classList.toggle(sheet.classes.position, false);
-            }
-            sheet.replaceRule('position', {
-                top: position.top,
-                left: position.left,
-                width: inHorizontalNav ? width : undefined,
-            });
-            popupRef.current.classList.toggle(sheet.classes.position, true);
+            popupRef.current.style.setProperty(`--popup-down-transform-origin`, position.transformOrigin);
+            popupRef.current.style.top = position.top + 'px';
+            popupRef.current.style.left = position.left + 'px';
+            popupRef.current.style.width = inHorizontalNav ? width + 'px' : '';
         }
     });
     const maxZIndex = useMaxIndex(visible);
@@ -57,13 +49,19 @@ export const MenuSub = forwardRef((props, ref) => {
                     triggerRef,
                     popupRef,
                     scroll: false,
-                }, onVisibleChange: onVisibleChange, children: ({ renderTrigger, renderPopup }) => (_jsxs(_Fragment, { children: [renderTrigger(_jsxs("li", Object.assign({}, mergeCS(styled('menu__item', 'menu__item--sub', {
+                }, onVisibleChange: onVisibleChange, children: (popupProps) => (_jsxs(_Fragment, { children: [_jsxs("li", Object.assign({}, mergeCS(styled('menu__item', 'menu__item--sub', {
                             'menu__item--horizontal': inHorizontalNav,
                             'menu__item--icon': iconMode,
                             'menu__item.is-active': active,
                             'menu__item.is-expand': mode === 'vertical' ? expand && includeActive : visible,
                             'menu__item.is-disabled': disabled,
-                        }), { style: { paddingLeft: space + level * step } }), { ref: triggerRef, id: id, role: "menuitem", "aria-haspopup": true, "aria-expanded": mode === 'vertical' ? expand : visible, "aria-disabled": disabled, onClick: (e) => {
+                        }), { style: { paddingLeft: space + level * step } }), { ref: (instance) => {
+                                triggerRef.current = instance;
+                                return () => {
+                                    triggerRef.current = null;
+                                };
+                            }, id: id, role: "menuitem", "aria-haspopup": true, "aria-expanded": mode === 'vertical' ? expand : visible, "aria-disabled": disabled }, popupProps.trigger, { onClick: (e) => {
+                                popupProps.trigger.onClick(e);
                                 onClick(e);
                             }, children: [focus && _jsx("div", { className: `${namespace}-focus-outline` }), _jsxs("div", Object.assign({}, styled('menu__indicator', {
                                     'menu__indicator--first': posinset[0] === 0 && posinset[1] > 1,
@@ -71,7 +69,7 @@ export const MenuSub = forwardRef((props, ref) => {
                                 }), { children: [_jsx("div", Object.assign({}, styled('menu__indicator-track', { 'menu__indicator-track--hidden': level === 0 }))), _jsx("div", Object.assign({}, styled('menu__indicator-thumb')))] })), checkNodeExist(icon) && _jsx("div", Object.assign({}, styled('menu__item-icon'), { children: icon })), _jsx("div", Object.assign({}, styled('menu__item-content'), { children: children })), !inHorizontalNav && (_jsxs("div", Object.assign({}, styled('menu__sub-arrow', {
                                     'menu__sub-arrow--horizontal': mode !== 'vertical' && !inHorizontalNav,
                                     'menu__sub-arrow.is-expand': mode === 'vertical' && expand,
-                                }), { "aria-hidden": true, children: [_jsx("div", {}), _jsx("div", {})] })))] }))), mode !== 'vertical' && (_jsx(Portal, { selector: () => {
+                                }), { "aria-hidden": true, children: [_jsx("div", {}), _jsx("div", {})] })))] })), mode !== 'vertical' && (_jsx(Portal, { selector: () => {
                                 let el = document.getElementById(`${namespace}-menu-root`);
                                 if (!el) {
                                     el = document.createElement('div');
@@ -79,60 +77,35 @@ export const MenuSub = forwardRef((props, ref) => {
                                     document.body.appendChild(el);
                                 }
                                 return el;
-                            }, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_POPUP, afterRender: updatePosition, children: (state) => {
-                                    let transitionStyle = {};
-                                    switch (state) {
-                                        case 'enter':
-                                            transitionStyle = { transform: inHorizontalNav ? 'scaleY(0.7)' : 'scale(0)', opacity: 0 };
-                                            break;
-                                        case 'entering':
-                                            transitionStyle = {
-                                                transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-out`).join(', '),
-                                                transformOrigin: transformOrigin.current,
-                                            };
-                                            break;
-                                        case 'leaving':
-                                            transitionStyle = {
-                                                transform: inHorizontalNav ? 'scaleY(0.7)' : 'scale(0)',
-                                                opacity: 0,
-                                                transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-in`).join(', '),
-                                                transformOrigin: transformOrigin.current,
-                                            };
-                                            break;
-                                        case 'leaved':
-                                            transitionStyle = { display: 'none' };
-                                            break;
-                                        default:
-                                            break;
-                                    }
-                                    return renderPopup(_jsx("div", Object.assign({}, mergeCS(styled('menu-popup'), {
-                                        style: Object.assign({ minWidth: inHorizontalNav ? undefined : 160, zIndex: `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})` }, transitionStyle),
-                                    }), { ref: popupRef, children: _jsx("ul", Object.assign({}, styled('menu__sub-list'), { role: "menu", "aria-labelledby": id, children: empty ? (_jsx("div", Object.assign({}, mergeCS(styled('menu__empty'), { style: { paddingLeft: space + level * step } }), { children: t('No data') }))) : (list) })) })));
-                                } }) }))] })) }), _jsx(CollapseTransition, { originalSize: {
-                    height: 'auto',
-                }, collapsedSize: {
-                    height: 0,
-                }, enter: mode === 'vertical' ? expand : inNav ? false : (prev) => prev, defaultEnter: expand, 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, state) => {
+                            }, children: _jsx(Transition, { enter: visible, name: `${namespace}-popup-down`, duration: TTANSITION_DURING_POPUP, onSkipEnter: updatePosition, onBeforeEnter: updatePosition, children: (transitionRef, leaved) => (_jsx("div", Object.assign({}, mergeCS(styled('menu-popup'), {
+                                    style: Object.assign(Object.assign({ zIndex: `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})` }, (inHorizontalNav ? undefined : { '--popup-down-scale': 0.01, minWidth: 160 })), (leaved ? { display: 'none' } : undefined)),
+                                }), { ref: (instance) => {
+                                        popupRef.current = instance;
+                                        transitionRef(instance);
+                                        return () => {
+                                            popupRef.current = null;
+                                            transitionRef(null);
+                                        };
+                                    } }, popupProps.popup, { children: _jsx("ul", Object.assign({}, styled('menu__sub-list'), { role: "menu", "aria-labelledby": id, children: empty ? (_jsx("div", Object.assign({}, mergeCS(styled('menu__empty'), { style: { paddingLeft: space + level * step } }), { children: t('No data') }))) : (list) })) }))) }) }))] })) }), _jsx(CollapseTransition, { height: 0, enter: mode === 'vertical' ? expand : false, duration: TTANSITION_DURING_BASE, children: (transitionRef, leaved) => {
                     if (mode !== 'vertical') {
-                        if (inNav && state !== 'leaved' && dataRef.current.nodeCache) {
-                            return cloneElement(dataRef.current.nodeCache, {
-                                style: Object.assign(Object.assign({}, dataRef.current.nodeCache.props.style), collapseStyle),
-                            });
+                        if (inNav && !leaved && nodeSaved.current) {
+                            return nodeSaved.current;
                         }
                         return null;
                     }
-                    const node = (_jsx("ul", Object.assign({}, mergeCS(styled('menu__sub-list'), { style: collapseStyle }), { ref: listRef, role: "menu", "aria-labelledby": id, children: empty ? (_jsx("div", Object.assign({}, mergeCS(styled('menu__empty'), { style: { paddingLeft: space + (level + 1) * step } }), { children: t('No data') }))) : (list) })));
+                    const node = (_jsx("ul", Object.assign({}, mergeCS(styled('menu__sub-list'), {
+                        style: Object.assign({}, (leaved ? { display: 'none' } : undefined)),
+                    }), { ref: (instance) => {
+                            if (mode === 'vertical' || inNav) {
+                                transitionRef(instance);
+                                return () => {
+                                    transitionRef(null);
+                                };
+                            }
+                        }, role: "menu", "aria-labelledby": id, children: empty ? (_jsx("div", Object.assign({}, mergeCS(styled('menu__empty'), { style: { paddingLeft: space + (level + 1) * step } }), { children: t('No data') }))) : (list) })));
                     if (mode === 'vertical' && inNav) {
-                        dataRef.current.nodeCache = node;
+                        nodeSaved.current = node;
                     }
                     return node;
                 } })] }));
-});
+}

package/menu/types.d.ts

@@ -15,6 +15,7 @@ export interface MenuItem<ID extends React.Key> {
     children?: MenuItem<ID>[];
 }
 export interface MenuProps<ID extends React.Key, T extends MenuItem<ID>> extends BaseProps<'menu' | 'menu-popup', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+    ref?: React.Ref<MenuRef>;
     list: T[];
     mode?: MenuMode;
     width?: string | number;

package/modal/Modal.d.ts

@@ -4,7 +4,7 @@ import { ModalAlert } from './ModalAlert';
 import { ModalFooter } from './ModalFooter';
 import { ModalHeader } from './ModalHeader';
 export declare const Modal: {
-    (props: ModalProps): JSX.Element | null;
+    (props: ModalProps): React.ReactElement | null;
     Header: typeof ModalHeader;
     Footer: typeof ModalFooter;
     Alert: typeof ModalAlert;

package/modal/Modal.js

@@ -1,44 +1,32 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isNumber, isString, isUndefined } from 'lodash';
-import { cloneElement, useId, useRef } from 'react';
+import { useId, useRef } from 'react';
 import { ModalAlert } from './ModalAlert';
 import { ModalFooter } from './ModalFooter';
 import { ModalHeader } from './ModalHeader';
-import { CLASSES } from './vars';
+import { CLASSES, ModalContext } 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 { ROOT_DATA } from '../root/vars';
+import { Transition } from '../transition';
 import { handleModalKeyDown, mergeCS } from '../utils';
 import { TTANSITION_DURING_BASE } from '../vars';
 export const Modal = (props) => {
-    const _a = useComponentProps('Modal', props), { children, styleOverrides, styleProvider, visible, header: headerProp, footer, alert, width = 520, top: topProp = 100, mask = true, maskClosable = true, escClosable = true, skipFirstTransition = true, destroyAfterClose = true, zIndex: zIndexProp, onClose, afterVisibleChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "visible", "header", "footer", "alert", "width", "top", "mask", "maskClosable", "escClosable", "skipFirstTransition", "destroyAfterClose", "zIndex", "onClose", "afterVisibleChange"]);
+    const _a = useComponentProps('Modal', props), { children, styleOverrides, styleProvider, visible, header: headerProp, footer, alert, width = 520, top: topProp = 100, mask = true, maskClosable = true, escClosable = true, skipFirstTransition = true, destroyAfterClose = false, lazyLoading = true, zIndex: zIndexProp, onClose, afterVisibleChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "visible", "header", "footer", "alert", "width", "top", "mask", "maskClosable", "escClosable", "skipFirstTransition", "destroyAfterClose", "lazyLoading", "zIndex", "onClose", "afterVisibleChange"]);
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { modal: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.modal }, styleOverrides);
     const modalRef = useRef(null);
     const modalContentRef = useRef(null);
-    const dataRef = useRef({
-        prevActiveEl: null,
-    });
+    const prevActiveEl = useRef(null);
     const uniqueId = useId();
     const titleId = `${namespace}-modal-title-${uniqueId}`;
     const bodyId = `${namespace}-modal-content-${uniqueId}`;
     const maxZIndex = useMaxIndex(visible);
     const zIndex = !isUndefined(zIndexProp) ? zIndexProp : `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
     useLockScroll(visible);
-    const headerNode = (() => {
-        if (headerProp) {
-            const node = isString(headerProp) ? _jsx(ModalHeader, { children: headerProp }) : headerProp;
-            return cloneElement(node, {
-                _id: titleId,
-                _onClose: () => {
-                    onClose === null || onClose === void 0 ? void 0 : onClose();
-                },
-            });
-        }
-    })();
     return (_jsx(Portal, { selector: () => {
             let el = document.getElementById(`${namespace}-modal-root`);
             if (!el) {
@@ -47,79 +35,88 @@ export const Modal = (props) => {
                 document.body.appendChild(el);
             }
             return el;
-        }, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_BASE, skipFirstTransition: skipFirstTransition, destroyWhenLeaved: destroyAfterClose, afterRender: () => {
-                if (isUndefined(ROOT_DATA.clickEvent) || performance.now() - ROOT_DATA.clickEvent.time > 100) {
-                    dataRef.current.transformOrigin = undefined;
+        }, children: _jsx(Transition, { enter: visible, name: `${namespace}-modal`, duration: TTANSITION_DURING_BASE, skipFirstTransition: skipFirstTransition, onSkipEnter: (el) => {
+                if (el) {
+                    if (isUndefined(ROOT_DATA.clickEvent) || performance.now() - ROOT_DATA.clickEvent.time > 100) {
+                        el.style.setProperty(`--modal-transform-origin`, 'unset');
+                    }
+                    else if (modalContentRef.current) {
+                        const left = `${(ROOT_DATA.windowSize.width - modalContentRef.current.offsetWidth) / 2}px`;
+                        const top = topProp === 'center'
+                            ? `${(ROOT_DATA.windowSize.height - modalContentRef.current.offsetHeight) / 2}px`
+                            : `${topProp}${isNumber(topProp) ? 'px' : ''}`;
+                        el.style.setProperty(`--modal-transform-origin`, `calc(${ROOT_DATA.clickEvent.x}px - ${left}) calc(${ROOT_DATA.clickEvent.y}px - ${top})`);
+                    }
                 }
-                else if (modalContentRef.current) {
-                    const left = `${(ROOT_DATA.windowSize.width - modalContentRef.current.offsetWidth) / 2}px`;
-                    const top = topProp === 'center'
-                        ? `${(ROOT_DATA.windowSize.height - modalContentRef.current.offsetHeight) / 2}px`
-                        : `${topProp}${isNumber(topProp) ? 'px' : ''}`;
-                    dataRef.current.transformOrigin = `calc(${ROOT_DATA.clickEvent.x}px - ${left}) calc(${ROOT_DATA.clickEvent.y}px - ${top})`;
+            }, onBeforeEnter: (el) => {
+                if (el) {
+                    if (isUndefined(ROOT_DATA.clickEvent) || performance.now() - ROOT_DATA.clickEvent.time > 100) {
+                        el.style.setProperty(`--modal-transform-origin`, 'unset');
+                    }
+                    else if (modalContentRef.current) {
+                        const left = `${(ROOT_DATA.windowSize.width - modalContentRef.current.offsetWidth) / 2}px`;
+                        const top = topProp === 'center'
+                            ? `${(ROOT_DATA.windowSize.height - modalContentRef.current.offsetHeight) / 2}px`
+                            : `${topProp}${isNumber(topProp) ? 'px' : ''}`;
+                        el.style.setProperty(`--modal-transform-origin`, `calc(${ROOT_DATA.clickEvent.x}px - ${left}) calc(${ROOT_DATA.clickEvent.y}px - ${top})`);
+                    }
                 }
-            }, afterEnter: () => {
+            }, onAfterEnter: () => {
                 afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
-                dataRef.current.prevActiveEl = document.activeElement;
+                prevActiveEl.current = document.activeElement;
                 if (modalRef.current) {
                     modalRef.current.focus({ preventScroll: true });
                 }
-            }, afterLeave: () => {
+            }, 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;
-                let transitionStyle = {};
-                switch (state) {
-                    case 'enter':
-                        transitionStyle = { transform: 'scale(0.3)', opacity: 0 };
-                        break;
-                    case 'entering':
-                        transitionStyle = {
-                            transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`).join(', '),
-                            transformOrigin: dataRef.current.transformOrigin,
-                        };
-                        break;
-                    case 'leaving':
-                        transitionStyle = {
-                            transform: 'scale(0.3)',
-                            opacity: 0,
-                            transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`).join(', '),
-                            transformOrigin: dataRef.current.transformOrigin,
-                        };
-                        break;
-                    default:
-                        break;
-                }
-                return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('modal', {
-                    'modal--center': topProp === 'center',
-                    'modal--alert': alert,
-                }), {
-                    className: restProps.className,
-                    style: Object.assign(Object.assign({}, restProps.style), { display: state === 'leaved' ? 'none' : undefined, zIndex }),
-                }), { ref: modalRef, 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(ModalContext, { value: {
+                            id: titleId,
+                            onClose: () => {
+                                onClose === null || onClose === void 0 ? void 0 : onClose();
+                            },
+                        }, children: _jsxs("div", Object.assign({}, restProps, mergeCS(styled('modal', {
+                            'modal--center': topProp === 'center',
+                            'modal--alert': alert,
+                        }), {
+                            className: restProps.className,
+                            style: Object.assign(Object.assign(Object.assign({}, restProps.style), { zIndex }), (leaved ? { display: 'none' } : undefined)),
+                        }), { ref: (instance) => {
+                                modalRef.current = instance;
+                                return () => {
+                                    modalRef.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('modal__content'), {
-                            style: Object.assign({ width, top: topProp === 'center' ? undefined : topProp, maxHeight: topProp === 'center' ? undefined : `calc(100% - ${topProp}${isNumber(topProp) ? 'px' : ''} - 20px)` }, transitionStyle),
-                        }), { ref: modalContentRef, children: [headerNode, _jsx("div", Object.assign({}, styled('modal__body'), { id: bodyId, children: alert !== null && alert !== void 0 ? alert : 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('modal__content'), {
+                                    style: {
+                                        width,
+                                        top: topProp === 'center' ? undefined : topProp,
+                                        maxHeight: topProp === 'center' ? undefined : `calc(100% - ${topProp}${isNumber(topProp) ? 'px' : ''} - 20px)`,
+                                    },
+                                }), { ref: (instance) => {
+                                        modalContentRef.current = instance;
+                                        transitionRef(instance);
+                                        return () => {
+                                            modalContentRef.current = null;
+                                            transitionRef(null);
+                                        };
+                                    }, children: [isString(headerProp) ? _jsx(ModalHeader, { children: headerProp }) : headerProp, _jsx("div", Object.assign({}, styled('modal__body'), { id: bodyId, children: alert !== null && alert !== void 0 ? alert : children })), footer] }))] })) })) }));
             } }) }));
 };
 Modal.Header = ModalHeader;

package/modal/ModalAlert.d.ts

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

package/modal/ModalFooter.d.ts

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

package/modal/ModalFooter.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, ModalContext } from './vars';
 import { Button } from '../button';
 import { useComponentProps, useControlled, useStyled, useTranslation } from '../hooks';
 import { mergeCS } from '../utils';
 export function ModalFooter(props) {
-    const _a = useComponentProps('ModalFooter', 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('ModalFooter', 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, { modal: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.modal }, styleOverrides);
     const { t } = useTranslation();
+    const modalContext = use(ModalContext);
     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 ModalFooter(props) {
                 shouldClose.then((val) => {
                     changeCancelLoading(false);
                     if (val !== false) {
-                        _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+                        modalContext === null || modalContext === void 0 ? void 0 : modalContext.onClose();
                     }
                 });
             }
             else if (shouldClose !== false) {
-                _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+                modalContext === null || modalContext === void 0 ? void 0 : modalContext.onClose();
             }
         } });
     const okProps = Object.assign(Object.assign({}, okPropsProp), { loading: okLoading, onClick: () => {
@@ -33,19 +35,20 @@ export function ModalFooter(props) {
                 shouldClose.then((val) => {
                     changeOkLoading(false);
                     if (val !== false) {
-                        _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+                        modalContext === null || modalContext === void 0 ? void 0 : modalContext.onClose();
                     }
                 });
             }
             else if (shouldClose !== false) {
-                _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+                modalContext === null || modalContext === void 0 ? void 0 : modalContext.onClose();
             }
         } });
     return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('modal__footer', `modal__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/modal/ModalHeader.d.ts

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

package/modal/ModalHeader.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, ModalContext } from './vars';
 import { Button } from '../button';
 import { useComponentProps, useControlled, useStyled, useTranslation } from '../hooks';
 import { Icon } from '../icon';
 import { mergeCS } from '../utils';
 export function ModalHeader(props) {
-    const _a = useComponentProps('ModalHeader', 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('ModalHeader', props), { styleOverrides, styleProvider, children, actions = ['close'], closeProps: closePropsProp, onCloseClick } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "children", "actions", "closeProps", "onCloseClick"]);
     const styled = useStyled(CLASSES, { modal: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.modal }, styleOverrides);
     const { t } = useTranslation();
+    const modalContext = use(ModalContext);
     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 ModalHeader(props) {
                 shouldClose.then((val) => {
                     changeCloseLoading(false);
                     if (val !== false) {
-                        _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+                        modalContext === null || modalContext === void 0 ? void 0 : modalContext.onClose();
                     }
                 });
             }
             else if (shouldClose !== false) {
-                _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+                modalContext === null || modalContext === void 0 ? void 0 : modalContext.onClose();
             }
         } });
     return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('modal__header'), {
         className: restProps.className,
         style: restProps.style,
-    }), { children: [_jsx("div", Object.assign({}, styled('modal__header-title'), { id: _id, children: children })), _jsx("div", Object.assign({}, styled('modal__header-actions'), { children: Children.map(actions, (action) => {
+    }), { children: [_jsx("div", Object.assign({}, styled('modal__header-title'), { id: modalContext === null || modalContext === void 0 ? void 0 : modalContext.id, children: children })), _jsx("div", Object.assign({}, styled('modal__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/modal/types.d.ts

@@ -15,18 +15,25 @@ export interface ModalProps extends BaseProps<'modal', typeof CLASSES>, React.HT
     escClosable?: boolean;
     skipFirstTransition?: boolean;
     destroyAfterClose?: boolean;
+    lazyLoading?: boolean;
     zIndex?: number | string;
     onClose?: () => void;
     afterVisibleChange?: (visible: boolean) => void;
 }
 export interface ModalHeaderProps extends BaseProps<'modal', 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 ModalFooterProps extends BaseProps<'modal', 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/modal/vars.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const CLASSES: {
     modal: string;
     'modal--center': string;
@@ -21,3 +22,7 @@ export declare const CLASSES: {
     'modal__alert-title': string;
     'modal__alert-message': string;
 };
+export declare const ModalContext: import("react").Context<{
+    id: string;
+    onClose: () => void;
+} | undefined>;

package/modal/vars.js

@@ -1,3 +1,4 @@
+import { createContext } from 'react';
 export const CLASSES = {
     modal: '^modal',
     'modal--center': '^modal--center',
@@ -21,3 +22,4 @@ export const CLASSES = {
     'modal__alert-title': '^modal__alert-title',
     'modal__alert-message': '^modal__alert-message',
 };
+export const ModalContext = createContext(undefined);

package/notification/Notification.d.ts

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