@laser-ui/components 1.6.0 → 2.0.0

package/notification/Notification.js

@@ -12,23 +12,25 @@ import { useId, useRef } from 'react';
 import { CLASSES, TTANSITION_DURING } from './vars';
 import { useComponentProps, useNamespace, useStyled, useTranslation } from '../hooks';
 import { Icon } from '../icon';
+import { LazyLoading } from '../internal/lazy-loading';
 import { Portal } from '../internal/portal';
-import { Transition } from '../internal/transition';
+import { CollapseTransition } from '../transition';
 import { mergeCS } from '../utils';
 export function Notification(props) {
-    const _a = useComponentProps('Notification', props), { children, styleOverrides, styleProvider, visible, title, type, placement = 'right-top', duration = 9.6, icon, closable = true, escClosable = true, skipFirstTransition = true, destroyAfterClose = true, onClose, afterVisibleChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "visible", "title", "type", "placement", "duration", "icon", "closable", "escClosable", "skipFirstTransition", "destroyAfterClose", "onClose", "afterVisibleChange"]);
+    const _a = useComponentProps('Notification', props), { children, styleOverrides, styleProvider, visible, title, type, placement = 'right-top', duration = 9.6, icon, closable = true, escClosable = true, skipFirstTransition = true, destroyAfterClose = false, lazyLoading = true, onClose, afterVisibleChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "visible", "title", "type", "placement", "duration", "icon", "closable", "escClosable", "skipFirstTransition", "destroyAfterClose", "lazyLoading", "onClose", "afterVisibleChange"]);
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { notification: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.notification }, styleOverrides);
     const { t } = useTranslation();
     const async = useAsync();
     const notificationRef = useRef(null);
-    const dataRef = useRef({});
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const clearTid = useRef(() => { });
     const uniqueId = useId();
     const titleId = `${namespace}-notification-title-${uniqueId}`;
     const descriptionId = `${namespace}-notification-content-${uniqueId}`;
     useMount(() => {
         if (duration > 0) {
-            dataRef.current.clearTid = async.setTimeout(() => {
+            clearTid.current = async.setTimeout(() => {
                 onClose === null || onClose === void 0 ? void 0 : onClose();
             }, duration * 1000);
         }
@@ -54,76 +56,47 @@ export function Notification(props) {
                 root.appendChild(el);
             }
             return el;
-        }, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING, skipFirstTransition: skipFirstTransition, destroyWhenLeaved: destroyAfterClose, afterEnter: () => {
+        }, children: _jsx(CollapseTransition, { height: 0, enter: visible, name: `${namespace}-notification`, duration: TTANSITION_DURING, skipFirstTransition: skipFirstTransition, onAfterEnter: () => {
                 afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
-            }, afterLeave: () => {
+            }, onAfterLeave: () => {
                 afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(false);
-            }, children: (state) => {
+            }, children: (transitionRef, leaved) => {
                 var _a, _b;
-                let transitionStyle = {};
-                switch (state) {
-                    case 'enter':
-                        transitionStyle = {
-                            transform: placement === 'left-top' || placement === 'left-bottom' ? 'translate(-100%, 0)' : 'translate(100%, 0)',
-                        };
-                        break;
-                    case 'entering':
-                        transitionStyle = {
-                            transition: ['transform'].map((attr) => `${attr} ${TTANSITION_DURING.enter}ms ease-out`).join(', '),
-                        };
-                        break;
-                    case 'leave':
-                        if (notificationRef.current) {
-                            const height = notificationRef.current.offsetHeight;
-                            transitionStyle = { height, overflow: 'hidden' };
-                        }
-                        break;
-                    case 'leaving':
-                        transitionStyle = {
-                            height: 0,
-                            overflow: 'hidden',
-                            paddingTop: 0,
-                            paddingBottom: 0,
-                            marginTop: 0,
-                            marginBottom: 0,
-                            opacity: 0,
-                            transition: ['height', 'padding', 'margin', 'opacity']
-                                .map((attr) => `${attr} ${TTANSITION_DURING.leave}ms ease-in`)
-                                .join(', '),
-                        };
-                        break;
-                    case 'leaved':
-                        transitionStyle = { display: 'none' };
-                        break;
-                    default:
-                        break;
-                }
-                return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('notification', {
-                    [`notification--${type}`]: type,
-                }), {
-                    className: restProps.className,
-                    style: Object.assign(Object.assign({}, restProps.style), transitionStyle),
-                }), { ref: notificationRef, tabIndex: (_a = restProps.tabIndex) !== null && _a !== void 0 ? _a : -1, role: (_b = restProps.role) !== null && _b !== void 0 ? _b : 'alert', "aria-labelledby": titleId, "aria-describedby": descriptionId, onMouseEnter: (e) => {
-                        var _a, _b, _c;
-                        (_a = restProps.onMouseEnter) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
-                        (_c = (_b = dataRef.current).clearTid) === null || _c === void 0 ? void 0 : _c.call(_b);
-                    }, onMouseLeave: (e) => {
-                        var _a;
-                        (_a = restProps.onMouseLeave) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
-                        if (duration > 0) {
-                            dataRef.current.clearTid = async.setTimeout(() => {
+                return (_jsx(LazyLoading, { hidden: leaved, disabled: !lazyLoading, children: leaved && destroyAfterClose ? null : (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('notification', {
+                        [`notification--${type}`]: type,
+                    }), {
+                        className: restProps.className,
+                        style: Object.assign(Object.assign(Object.assign({}, restProps.style), {
+                            '--notification-transform': placement === 'left-top' || placement === 'left-bottom' ? 'translate(-100%, 0)' : 'translate(100%, 0)',
+                        }), (leaved ? { display: 'none' } : undefined)),
+                    }), { ref: (instance) => {
+                            notificationRef.current = instance;
+                            transitionRef(instance);
+                            return () => {
+                                notificationRef.current = null;
+                                transitionRef(null);
+                            };
+                        }, tabIndex: (_a = restProps.tabIndex) !== null && _a !== void 0 ? _a : -1, role: (_b = restProps.role) !== null && _b !== void 0 ? _b : 'alert', "aria-labelledby": titleId, "aria-describedby": descriptionId, onMouseEnter: (e) => {
+                            var _a;
+                            (_a = restProps.onMouseEnter) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                            clearTid.current();
+                        }, onMouseLeave: (e) => {
+                            var _a;
+                            (_a = restProps.onMouseLeave) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                            if (duration > 0) {
+                                clearTid.current = async.setTimeout(() => {
+                                    onClose === null || onClose === void 0 ? void 0 : onClose();
+                                }, duration * 1000);
+                            }
+                        }, 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();
+                                clearTid.current();
                                 onClose === null || onClose === void 0 ? void 0 : onClose();
-                            }, duration * 1000);
-                        }
-                    }, onKeyDown: (e) => {
-                        var _a, _b, _c;
-                        (_a = restProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
-                        if (visible && escClosable && e.code === 'Escape') {
-                            e.stopPropagation();
-                            e.preventDefault();
-                            (_c = (_b = dataRef.current).clearTid) === null || _c === void 0 ? void 0 : _c.call(_b);
-                            onClose === null || onClose === void 0 ? void 0 : onClose();
-                        }
-                    }, children: [icon !== false && (!isUndefined(type) || checkNodeExist(icon)) && (_jsx("div", Object.assign({}, styled('notification__icon'), { children: checkNodeExist(icon) ? (icon) : (_jsx(Icon, { children: type === 'success' ? (_jsx(CheckCircleOutlined, {})) : type === 'warning' ? (_jsx(WarningAmberOutlined, {})) : type === 'error' ? (_jsx(HighlightOffOutlined, {})) : (_jsx(InfoOutlined, {})) })) }))), _jsxs("div", Object.assign({}, styled('notification__content'), { children: [_jsxs("div", Object.assign({}, styled('notification__header'), { children: [_jsx("div", Object.assign({}, styled('notification__title'), { id: titleId, children: title })), closable && (_jsx("button", Object.assign({}, styled('notification__close'), { "aria-label": t('Close'), onClick: onClose, children: _jsx(Icon, { children: _jsx(CloseOutlined, {}) }) })))] })), checkNodeExist(children) && (_jsx("div", Object.assign({}, styled('notification__description'), { id: descriptionId, children: children })))] }))] })));
+                            }
+                        }, children: [icon !== false && (!isUndefined(type) || checkNodeExist(icon)) && (_jsx("div", Object.assign({}, styled('notification__icon'), { children: checkNodeExist(icon) ? (icon) : (_jsx(Icon, { children: type === 'success' ? (_jsx(CheckCircleOutlined, {})) : type === 'warning' ? (_jsx(WarningAmberOutlined, {})) : type === 'error' ? (_jsx(HighlightOffOutlined, {})) : (_jsx(InfoOutlined, {})) })) }))), _jsxs("div", Object.assign({}, styled('notification__content'), { children: [_jsxs("div", Object.assign({}, styled('notification__header'), { children: [_jsx("div", Object.assign({}, styled('notification__title'), { id: titleId, children: title })), closable && (_jsx("button", Object.assign({}, styled('notification__close'), { "aria-label": t('Close'), onClick: onClose, children: _jsx(Icon, { children: _jsx(CloseOutlined, {}) }) })))] })), checkNodeExist(children) && (_jsx("div", Object.assign({}, styled('notification__description'), { id: descriptionId, children: children })))] }))] }))) }));
             } }) }));
 }

package/notification/types.d.ts

@@ -13,6 +13,7 @@ export interface NotificationProps extends BaseProps<'notification', typeof CLAS
     escClosable?: boolean;
     skipFirstTransition?: boolean;
     destroyAfterClose?: boolean;
+    lazyLoading?: boolean;
     onClose?: () => void;
     afterVisibleChange?: (visible: boolean) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laser-ui/components",
-  "version": "1.6.0",
+  "version": "2.0.0",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -40,5 +40,5 @@
     "access": "public",
     "directory": "../../dist/libs/components"
   },
-  "gitHead": "d370cebd8849f88aec086791221e6d08fbe27192"
+  "gitHead": "abfcf4f3c2ed5f3046a50f8baa372ce9f7fa26b3"
 }

package/pagination/Pagination.d.ts

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

package/pagination/Pagination.js

@@ -6,7 +6,7 @@ import KeyboardDoubleArrowLeftOutlined from '@material-design-icons/svg/outlined
 import KeyboardDoubleArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_double_arrow_right.svg?react';
 import MoreHorizOutlined from '@material-design-icons/svg/outlined/more_horiz.svg?react';
 import { isNull, isNumber } from 'lodash';
-import { Fragment, cloneElement, useRef, useState } from 'react';
+import { Fragment, useRef, useState } from 'react';
 import { buttonProps } from './utils';
 import { CLASSES } from './vars';
 import { useComponentProps, useControlled, useStyled, useTranslation } from '../hooks';
@@ -44,7 +44,12 @@ export function Pagination(props) {
     }), {
         className: restProps.className,
         style: restProps.style,
-    }), { ref: navRef, role: "navigation", "aria-label": (_a = restProps['aria-label']) !== null && _a !== void 0 ? _a : 'Pagination Navigation', children: _jsx("div", Object.assign({}, styled('pagination__row'), { children: compose.map((item, index) => {
+    }), { ref: (instance) => {
+            navRef.current = instance;
+            return () => {
+                navRef.current = null;
+            };
+        }, role: "navigation", "aria-label": (_a = restProps['aria-label']) !== null && _a !== void 0 ? _a : 'Pagination Navigation', children: _jsx("div", Object.assign({}, styled('pagination__row'), { children: compose.map((item, index) => {
                 const gap = index === compose.length - 1 ? undefined : mini ? 2 : 6;
                 if (item === 'total') {
                     const totalNode = (() => {
@@ -165,10 +170,8 @@ export function Pagination(props) {
                 }
                 if (item === 'jump') {
                     const jumpNode = (() => {
-                        const jumpInput = (_jsx(Input.Number, { style: { width: mini ? 48 : 72 }, model: jumpValue, max: lastPage, min: 1, step: 1, size: mini ? 'small' : undefined, numberButton: !mini, inputRender: (el) => cloneElement(el, {
+                        const jumpInput = (_jsx(Input.Number, { style: { width: mini ? 48 : 72 }, model: jumpValue, max: lastPage, min: 1, step: 1, size: mini ? 'small' : undefined, numberButton: !mini, inputProps: {
                                 onKeyDown: (e) => {
-                                    var _a, _b;
-                                    (_b = (_a = el.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                                     if (e.code === 'Enter') {
                                         e.preventDefault();
                                         if (isNumber(jumpValue)) {
@@ -176,7 +179,7 @@ export function Pagination(props) {
                                         }
                                     }
                                 },
-                            }), onModelChange: setJumpValue }));
+                            }, onModelChange: setJumpValue }));
                         if (customRender && customRender.jump) {
                             return customRender.jump(jumpInput);
                         }

package/popover/Popover.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import type { PopoverProps, PopoverRef } from './types';
+import type { PopoverProps } from './types';
 import { PopoverFooter } from './PopoverFooter';
 import { PopoverHeader } from './PopoverHeader';
 export declare const Popover: {
-    (props: PopoverProps & React.RefAttributes<PopoverRef>): JSX.Element | null;
+    (props: PopoverProps): React.ReactElement | null;
     Header: typeof PopoverHeader;
     Footer: typeof PopoverFooter;
 };

package/popover/Popover.js

@@ -1,36 +1,33 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEventCallback, useRefExtra } from '@laser-ui/hooks';
-import { isFunction, isString, isUndefined } from 'lodash';
-import { cloneElement, forwardRef, useId, useImperativeHandle, useRef } from 'react';
+import { isString, isUndefined } from 'lodash';
+import { useId, useImperativeHandle, useRef } from 'react';
 import { PopoverFooter } from './PopoverFooter';
 import { PopoverHeader } from './PopoverHeader';
-import { CLASSES, TTANSITION_DURING } from './vars';
-import { useComponentProps, useControlled, useJSS, useLockScroll, useMaxIndex, useNamespace, useStyled } from '../hooks';
+import { CLASSES, PopoverContext, TTANSITION_DURING } from './vars';
+import { useComponentProps, useControlled, useLockScroll, useMaxIndex, useNamespace, useStyled } from '../hooks';
+import { LazyLoading } from '../internal/lazy-loading';
 import { Popup } from '../internal/popup';
 import { Portal } from '../internal/portal';
-import { Transition } from '../internal/transition';
+import { Transition } from '../transition';
 import { getPopupPosition, handleModalKeyDown, mergeCS } from '../utils';
-function PopoverFC(props, ref) {
-    const _a = useComponentProps('Popover', props), { children, styleOverrides, styleProvider, content, header: headerProp, footer, visible: visibleProp, defaultVisible, trigger: triggerProp = 'hover', placement: placementProp = 'top', placementFixed = false, arrow = true, escClosable = true, gap = 10, inWindow = false, mouseEnterDelay = 150, mouseLeaveDelay = 200, modal = false, skipFirstTransition = true, destroyAfterClose = true, zIndex: zIndexProp, onVisibleChange, afterVisibleChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "content", "header", "footer", "visible", "defaultVisible", "trigger", "placement", "placementFixed", "arrow", "escClosable", "gap", "inWindow", "mouseEnterDelay", "mouseLeaveDelay", "modal", "skipFirstTransition", "destroyAfterClose", "zIndex", "onVisibleChange", "afterVisibleChange"]);
+export const Popover = (props) => {
+    const _a = useComponentProps('Popover', props), { ref, children, styleOverrides, styleProvider, content, header: headerProp, footer, visible: visibleProp, defaultVisible, trigger: triggerProp = 'hover', placement: placementProp = 'top', placementFixed = false, arrow = true, escClosable = true, gap = 10, inWindow = false, mouseEnterDelay = 150, mouseLeaveDelay = 200, modal = false, skipFirstTransition = true, destroyAfterClose = false, lazyLoading = true, zIndex: zIndexProp, onVisibleChange, afterVisibleChange } = _a, restProps = __rest(_a, ["ref", "children", "styleOverrides", "styleProvider", "content", "header", "footer", "visible", "defaultVisible", "trigger", "placement", "placementFixed", "arrow", "escClosable", "gap", "inWindow", "mouseEnterDelay", "mouseLeaveDelay", "modal", "skipFirstTransition", "destroyAfterClose", "lazyLoading", "zIndex", "onVisibleChange", "afterVisibleChange"]);
     const trigger = modal ? 'click' : triggerProp;
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { popover: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.popover }, styleOverrides);
-    const sheet = useJSS();
     const uniqueId = useId();
-    let triggerId;
+    const triggerId = `${namespace}-popover-trigger-${uniqueId}`;
     const titleId = `${namespace}-popover-title-${uniqueId}`;
     const bodyId = `${namespace}-popover-content-${uniqueId}`;
     const triggerRef = useRefExtra(() => document.getElementById(triggerId));
     const popoverRef = useRef(null);
     const popupRef = useRef(null);
-    const dataRef = useRef({
-        prevActiveEl: null,
-    });
+    const prevActiveEl = useRef(null);
     const [visible, changeVisible] = useControlled(defaultVisible !== null && defaultVisible !== void 0 ? defaultVisible : false, visibleProp, onVisibleChange);
     const maxZIndex = useMaxIndex(visible);
     const zIndex = !isUndefined(zIndexProp) ? zIndexProp : `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
-    const transformOrigin = useRef();
     const placement = useRef(placementProp);
     const updatePosition = useEventCallback(() => {
         if (visible && triggerRef.current && popoverRef.current && popupRef.current) {
@@ -41,48 +38,23 @@ function PopoverFC(props, ref) {
                 gap,
                 inWindow,
             });
-            transformOrigin.current = position.transformOrigin;
             popoverRef.current.classList.toggle(`${namespace}-popover--${placement.current}`, false);
             placement.current = position.placement;
             popoverRef.current.classList.toggle(`${namespace}-popover--${placement.current}`, true);
-            if (sheet.classes.position) {
-                popupRef.current.classList.toggle(sheet.classes.position, false);
-            }
-            sheet.replaceRule('position', {
-                top: position.top,
-                left: position.left,
-            });
-            popupRef.current.classList.toggle(sheet.classes.position, true);
+            popupRef.current.style.setProperty(`--popup-transform-origin`, position.transformOrigin);
+            popupRef.current.style.top = position.top + 'px';
+            popupRef.current.style.left = position.left + 'px';
         }
     });
     useLockScroll(modal && visible);
     useImperativeHandle(ref, () => ({
         updatePosition,
     }), [updatePosition]);
-    const headerNode = (() => {
-        if (headerProp) {
-            const node = isString(headerProp) ? _jsx(PopoverHeader, { children: headerProp }) : headerProp;
-            return cloneElement(node, {
-                _id: titleId,
-                _onClose: () => {
-                    changeVisible(false);
-                },
-            });
-        }
-    })();
     return (_jsx(Popup, { visible: visible, trigger: trigger, mouseEnterDelay: mouseEnterDelay, mouseLeaveDelay: mouseLeaveDelay, updatePosition: {
             fn: updatePosition,
             triggerRef,
             popupRef,
-        }, onVisibleChange: changeVisible, children: ({ renderTrigger, renderPopup }) => {
-            const render = (el) => {
-                var _a;
-                triggerId = (_a = el.props.id) !== null && _a !== void 0 ? _a : `${namespace}-popover-trigger-${uniqueId}`;
-                return renderTrigger(cloneElement(el, {
-                    id: triggerId,
-                    onKeyDown: (e) => {
-                        var _a, _b;
-                        (_b = (_a = el.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+        }, onVisibleChange: changeVisible, children: (popupProps) => (_jsxs(_Fragment, { children: [children(Object.assign(Object.assign({ id: triggerId }, popupProps.trigger), { onKeyDown: (e) => {
                         if (visible) {
                             if (escClosable && e.code === 'Escape') {
                                 e.stopPropagation();
@@ -90,85 +62,77 @@ function PopoverFC(props, ref) {
                                 changeVisible(false);
                             }
                         }
-                    },
-                }));
-            };
-            return (_jsxs(_Fragment, { children: [isFunction(children) ? children(render) : render(children), _jsx(Portal, { selector: () => {
-                            let el = document.getElementById(`${namespace}-popover-root`);
-                            if (!el) {
-                                el = document.createElement('div');
-                                el.id = `${namespace}-popover-root`;
-                                document.body.appendChild(el);
+                    } })), _jsx(Portal, { selector: () => {
+                        let el = document.getElementById(`${namespace}-popover-root`);
+                        if (!el) {
+                            el = document.createElement('div');
+                            el.id = `${namespace}-popover-root`;
+                            document.body.appendChild(el);
+                        }
+                        return el;
+                    }, children: _jsx(Transition, { enter: visible, name: `${namespace}-popup`, duration: TTANSITION_DURING, skipFirstTransition: skipFirstTransition, onSkipEnter: updatePosition, onBeforeEnter: (el) => {
+                            updatePosition();
+                            if (el) {
+                                el.style.setProperty(`--popup-duration`, TTANSITION_DURING.enter + 'ms');
                             }
-                            return el;
-                        }, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING, skipFirstTransition: skipFirstTransition, destroyWhenLeaved: destroyAfterClose, afterRender: updatePosition, afterEnter: () => {
-                                afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
-                                if (modal) {
-                                    dataRef.current.prevActiveEl = document.activeElement;
-                                    if (popoverRef.current) {
-                                        popoverRef.current.focus({ preventScroll: true });
-                                    }
+                        }, onAfterEnter: () => {
+                            afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
+                            if (modal) {
+                                prevActiveEl.current = document.activeElement;
+                                if (popoverRef.current) {
+                                    popoverRef.current.focus({ preventScroll: true });
                                 }
-                            }, afterLeave: () => {
-                                afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(false);
-                                if (modal) {
-                                    if (dataRef.current.prevActiveEl) {
-                                        dataRef.current.prevActiveEl.focus({ preventScroll: true });
-                                    }
-                                }
-                            }, children: (state) => {
-                                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.enter}ms ease-out`).join(', '),
-                                            transformOrigin: transformOrigin.current,
-                                        };
-                                        break;
-                                    case 'leaving':
-                                        transitionStyle = {
-                                            transform: 'scale(0.3)',
-                                            opacity: 0,
-                                            transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING.leave}ms ease-in`).join(', '),
-                                            transformOrigin: transformOrigin.current,
-                                        };
-                                        break;
-                                    default:
-                                        break;
+                            }
+                        }, onBeforeLeave: (el) => {
+                            if (el) {
+                                el.style.setProperty(`--popup-duration`, TTANSITION_DURING.leave + 'ms');
+                            }
+                        }, onAfterLeave: () => {
+                            afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(false);
+                            if (modal) {
+                                if (prevActiveEl.current) {
+                                    prevActiveEl.current.focus({ preventScroll: true });
                                 }
-                                return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('popover'), {
-                                    className: restProps.className,
-                                    style: Object.assign(Object.assign({}, restProps.style), { zIndex, display: state === 'leaved' ? 'none' : undefined }),
-                                }), { ref: popoverRef, tabIndex: -1, role: ((_a = restProps.role) !== null && _a !== void 0 ? _a : modal) ? 'alertdialog' : 'dialog', "aria-modal": modal, "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) {
-                                            if (escClosable && e.code === 'Escape') {
-                                                e.stopPropagation();
-                                                e.preventDefault();
-                                                changeVisible(false);
+                            }
+                        }, children: (transitionRef, leaved) => {
+                            var _a;
+                            return (_jsx(LazyLoading, { hidden: leaved, disabled: !lazyLoading, children: leaved && destroyAfterClose ? null : (_jsx(PopoverContext, { value: {
+                                        id: titleId,
+                                        onClose: () => {
+                                            changeVisible(false);
+                                        },
+                                    }, children: _jsxs("div", Object.assign({}, restProps, mergeCS(styled('popover'), {
+                                        className: restProps.className,
+                                        style: Object.assign(Object.assign(Object.assign(Object.assign({}, restProps.style), { '--popup-scale': 0.3 }), { zIndex }), (leaved ? { display: 'none' } : undefined)),
+                                    }), { ref: (instance) => {
+                                            popoverRef.current = instance;
+                                            return () => {
+                                                popoverRef.current = null;
+                                            };
+                                        }, tabIndex: -1, role: ((_a = restProps.role) !== null && _a !== void 0 ? _a : modal) ? 'alertdialog' : 'dialog', "aria-modal": modal, "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) {
+                                                if (escClosable && e.code === 'Escape') {
+                                                    e.stopPropagation();
+                                                    e.preventDefault();
+                                                    changeVisible(false);
+                                                }
+                                            }
+                                            if (modal) {
+                                                handleModalKeyDown(e);
                                             }
-                                        }
-                                        if (modal) {
-                                            handleModalKeyDown(e);
-                                        }
-                                    }, children: [modal && (_jsx("div", Object.assign({}, styled('popover__mask'), { onClick: () => {
-                                                changeVisible(false);
-                                            } }))), renderPopup(_jsxs("div", Object.assign({ ref: popupRef }, mergeCS(styled('popover__content'), {
-                                            style: transitionStyle,
-                                        }), { children: [arrow && _jsx("div", Object.assign({}, styled('popover__arrow'))), headerNode, _jsx("div", Object.assign({}, styled('popover__body'), { id: bodyId, children: content })), footer &&
-                                                    cloneElement(footer, {
-                                                        _onClose: () => {
-                                                            changeVisible(false);
-                                                        },
-                                                    })] })))] })));
-                            } }) })] }));
-        } }));
-}
-export const Popover = forwardRef(PopoverFC);
+                                        }, children: [modal && (_jsx("div", Object.assign({}, styled('popover__mask'), { onClick: () => {
+                                                    changeVisible(false);
+                                                } }))), _jsxs("div", Object.assign({}, styled('popover__content'), { ref: (instance) => {
+                                                    popupRef.current = instance;
+                                                    transitionRef(instance);
+                                                    return () => {
+                                                        popupRef.current = null;
+                                                        transitionRef(null);
+                                                    };
+                                                } }, popupProps.popup, { children: [arrow && _jsx("div", Object.assign({}, styled('popover__arrow'))), isString(headerProp) ? _jsx(PopoverHeader, { children: headerProp }) : headerProp, _jsx("div", Object.assign({}, styled('popover__body'), { id: bodyId, children: content })), footer] }))] })) })) }));
+                        } }) })] })) }));
+};
 Popover.Header = PopoverHeader;
 Popover.Footer = PopoverFooter;

package/popover/PopoverFooter.d.ts

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

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

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