@laser-ui/components 0.0.1

package/notification/vars.js

@@ -0,0 +1,14 @@
+export const CLASSES = {
+    notification: '^notification',
+    'notification--success': '^notification--success',
+    'notification--warning': '^notification--warning',
+    'notification--error': '^notification--error',
+    'notification--info': '^notification--info',
+    notification__icon: '^notification__icon',
+    notification__content: '^notification__content',
+    notification__header: '^notification__header',
+    notification__title: '^notification__title',
+    notification__close: '^notification__close',
+    notification__description: '^notification__description',
+};
+export const TTANSITION_DURING = { enter: 133, leave: 166 };

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@laser-ui/components",
+  "version": "0.0.1",
+  "description": "React components.",
+  "keywords": [
+    "ui",
+    "laser-ui",
+    "component",
+    "components",
+    "react",
+    "react-component"
+  ],
+  "homepage": "https://github.com/laser-ui/laser-ui",
+  "bugs": {
+    "url": "https://github.com/laser-ui/laser-ui/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/laser-ui/laser-ui.git"
+  },
+  "license": "MIT",
+  "author": "Xie Jay <xiejay97@gmail.com>",
+  "sideEffects": false,
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@laser-ui/hooks": "0.0.1",
+    "@laser-ui/utils": "0.0.1",
+    "@material-design-icons/svg": "^0.14.9",
+    "lodash": "^4.17.21",
+    "rcl-store": "^2.1.0",
+    "rxjs": "^7.8.1"
+  },
+  "peerDependencies": {
+    "dayjs": "^1.11.0",
+    "immer": ">=2.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "directory": "../../dist/libs/components"
+  },
+  "gitHead": "d08f89d34ac56ff632db700f52c06931337c9ce8",
+  "module": "./src/index.js",
+  "type": "module"
+}

package/pagination/Pagination.d.ts

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

package/pagination/Pagination.js

@@ -0,0 +1,191 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ReactComponent as KeyboardArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg';
+import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
+import { ReactComponent as KeyboardDoubleArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_double_arrow_left.svg';
+import { ReactComponent as KeyboardDoubleArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_double_arrow_right.svg';
+import { ReactComponent as MoreHorizOutlined } from '@material-design-icons/svg/outlined/more_horiz.svg';
+import { isNull, isNumber } from 'lodash';
+import { Fragment, cloneElement, useRef, useState } from 'react';
+import { buttonProps } from './utils';
+import { CLASSES } from './vars';
+import { useComponentProps, useControlled, useStyled, useTranslation } from '../hooks';
+import { Icon } from '../icon';
+import { Input } from '../input';
+import { Select } from '../select';
+import { mergeCS } from '../utils';
+export function Pagination(props) {
+    var _a;
+    const _b = useComponentProps('Pagination', props), { styleOverrides, styleProvider, total, active: activeProp, defaultActive, pageSize: pageSizeProp, defaultPageSize, pageSizeList = [10, 20, 50, 100], compose = ['pages'], customRender, mini = false, onChange } = _b, restProps = __rest(_b, ["styleOverrides", "styleProvider", "total", "active", "defaultActive", "pageSize", "defaultPageSize", "pageSizeList", "compose", "customRender", "mini", "onChange"]);
+    const styled = useStyled(CLASSES, { pagination: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.pagination }, styleOverrides);
+    const { t } = useTranslation();
+    const navRef = useRef(null);
+    const [active, _changeActive] = useControlled(defaultActive !== null && defaultActive !== void 0 ? defaultActive : 1, activeProp);
+    const changeActive = (val) => {
+        const newActive = Math.max(Math.min(val, lastPage), 1);
+        _changeActive(newActive);
+        if (!Object.is(newActive, active)) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(newActive, pageSize);
+        }
+    };
+    const [pageSize, _changePageSize] = useControlled(defaultPageSize !== null && defaultPageSize !== void 0 ? defaultPageSize : pageSizeList[0], pageSizeProp);
+    const changePageSize = (val) => {
+        _changePageSize(val);
+        const lastPage = Math.max(Math.ceil(total / val), 1);
+        const newActive = Math.max(Math.min(active, lastPage), 1);
+        if (!Object.is(newActive, active) || !Object.is(val, pageSize)) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(newActive, val);
+        }
+    };
+    const [jumpValue, setJumpValue] = useState(null);
+    const lastPage = Math.max(Math.ceil(total / pageSize), 1);
+    return (_jsx("nav", Object.assign({}, restProps, mergeCS(styled('pagination', {
+        'pagination--mini': mini,
+    }), {
+        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) => {
+                const gap = index === compose.length - 1 ? undefined : mini ? 2 : 6;
+                if (item === 'total') {
+                    const totalNode = (() => {
+                        const range = [Math.min((active - 1) * pageSize + 1, total), Math.min(active * pageSize, total)];
+                        if (customRender && customRender.total) {
+                            return customRender.total(range);
+                        }
+                        else {
+                            return `${t('Pagination', 'Total')} ${total} ${t('Pagination', 'items')}`;
+                        }
+                    })();
+                    return (_jsx("div", { children: _jsx("div", { style: { paddingRight: gap }, children: totalNode }) }, "total"));
+                }
+                if (item === 'pages') {
+                    const [prevNode, pageNode, nextNode] = [
+                        _jsx("li", Object.assign({}, styled('pagination__button', {
+                            'pagination__button.is-disabled': active === 1,
+                            'pagination__button--border': !(customRender && customRender.prev),
+                        }), buttonProps(() => {
+                            changeActive(active - 1);
+                        }, active === 1), { title: t('Pagination', 'Previous page'), children: customRender && customRender.prev ? (customRender.prev) : (_jsx(Icon, { children: _jsx(KeyboardArrowLeftOutlined, {}) })) })),
+                        (page) => {
+                            if (customRender && customRender.page) {
+                                return customRender.page(page);
+                            }
+                            else {
+                                return _jsx("div", { children: page });
+                            }
+                        },
+                        _jsx("li", Object.assign({}, styled('pagination__button', {
+                            'pagination__button.is-disabled': active === lastPage,
+                            'pagination__button--border': !(customRender && customRender.next),
+                        }), buttonProps(() => {
+                            changeActive(active + 1);
+                        }, active === lastPage), { title: t('Pagination', 'Next page'), children: customRender && customRender.next ? (customRender.next) : (_jsx(Icon, { children: _jsx(KeyboardArrowRightOutlined, {}) })) })),
+                    ];
+                    let pages = [];
+                    if (lastPage <= 7) {
+                        pages = Array.from({ length: lastPage }).map((_, index) => index + 1);
+                    }
+                    else {
+                        for (let n = -3; n <= 3; n++) {
+                            pages.push(active + n);
+                        }
+                        if (pages[0] < 1) {
+                            pages = pages.map((n) => n + (1 - pages[0]));
+                        }
+                        if (pages[6] > lastPage) {
+                            pages = pages.map((n) => n - (pages[6] - lastPage));
+                        }
+                        if (pages[0] > 1) {
+                            pages[0] = 1;
+                            pages[1] = 'prev5';
+                        }
+                        if (pages[6] < lastPage) {
+                            pages[6] = lastPage;
+                            pages[5] = 'next5';
+                        }
+                    }
+                    return (_jsxs(Fragment, { children: [_jsx("div", { children: prevNode }), pages.map((n) => {
+                                if (n === 'prev5') {
+                                    return (_jsx("div", { children: _jsxs("li", Object.assign({}, styled('pagination__button', 'pagination__button--jump5'), buttonProps(() => {
+                                            changeActive(active - 5);
+                                        }), { title: t('Pagination', '5 pages forward'), children: [_jsx(Icon, Object.assign({}, styled('pagination__jump5-icon'), { children: _jsx(KeyboardDoubleArrowLeftOutlined, {}) })), _jsx("div", Object.assign({}, styled('pagination__ellipsis'), { children: _jsx(Icon, { children: _jsx(MoreHorizOutlined, {}) }) }))] })) }, "prev5"));
+                                }
+                                else if (n === 'next5') {
+                                    return (_jsx("div", { children: _jsxs("li", Object.assign({}, styled('pagination__button', 'pagination__button--jump5'), buttonProps(() => {
+                                            changeActive(active + 5);
+                                        }), { title: t('Pagination', '5 pages backward'), children: [_jsx(Icon, Object.assign({}, styled('pagination__jump5-icon'), { children: _jsx(KeyboardDoubleArrowRightOutlined, {}) })), _jsx("div", Object.assign({}, styled('pagination__ellipsis'), { children: _jsx(Icon, { children: _jsx(MoreHorizOutlined, {}) }) }))] })) }, "next5"));
+                                }
+                                else {
+                                    return (_jsx("div", { children: _jsx("li", Object.assign({}, styled('pagination__button', 'pagination__button--border', 'pagination__button--number', {
+                                            'pagination__button.is-active': active === n,
+                                        }), { tabIndex: 0, "data-number": n, onClick: () => {
+                                                changeActive(n);
+                                            }, onKeyDown: (e) => {
+                                                const focusN = (num) => {
+                                                    if (navRef.current) {
+                                                        const activeEl = navRef.current.querySelector(`li[data-number="${num}"]`);
+                                                        activeEl === null || activeEl === void 0 ? void 0 : activeEl.focus({ preventScroll: true });
+                                                    }
+                                                    changeActive(num);
+                                                };
+                                                switch (e.code) {
+                                                    case 'ArrowLeft':
+                                                        e.preventDefault();
+                                                        focusN(n - 1);
+                                                        break;
+                                                    case 'ArrowRight':
+                                                        e.preventDefault();
+                                                        focusN(n + 1);
+                                                        break;
+                                                    case 'Home':
+                                                        e.preventDefault();
+                                                        focusN(1);
+                                                        break;
+                                                    case 'End':
+                                                        e.preventDefault();
+                                                        focusN(lastPage);
+                                                        break;
+                                                    default:
+                                                        break;
+                                                }
+                                            }, children: pageNode(n) })) }, n));
+                                }
+                            }), _jsx("div", { children: _jsx("div", { style: { paddingRight: gap }, children: nextNode }) })] }, "pages"));
+                }
+                if (item === 'page-size') {
+                    const list = pageSizeList.map((size) => ({
+                        label: size.toString(),
+                        value: size,
+                    }));
+                    return (_jsx("div", { children: _jsx("div", { style: { paddingRight: gap }, children: _jsx(Select, { list: list, model: pageSize, size: mini ? 'small' : undefined, customItem: (item) => (customRender && customRender.pageSize ? customRender.pageSize(item.value) : item.label), customSelected: (select) => `${select.label}${t('Pagination', ' / Page')}`, onModelChange: (value) => {
+                                    if (!isNull(value)) {
+                                        changePageSize(value);
+                                    }
+                                } }) }) }, "page-size"));
+                }
+                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, {
+                                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)) {
+                                            changeActive(jumpValue);
+                                        }
+                                    }
+                                },
+                            }), onModelChange: setJumpValue }));
+                        if (customRender && customRender.jump) {
+                            return customRender.jump(jumpInput);
+                        }
+                        else {
+                            return (_jsxs("div", Object.assign({}, styled('pagination__jump'), { children: [_jsx("span", { children: t('Pagination', 'Go') }), jumpInput, _jsx("span", { children: t('Pagination', 'Page') })] })));
+                        }
+                    })();
+                    return (_jsx("div", { children: _jsx("div", { style: { paddingRight: gap }, children: jumpNode }) }, "jump"));
+                }
+                return null;
+            }) })) })));
+}

package/pagination/index.d.ts

@@ -0,0 +1,2 @@
+export type { PaginationProps } from './types';
+export { Pagination } from './Pagination';

package/pagination/index.js

@@ -0,0 +1 @@
+export { Pagination } from './Pagination';

package/pagination/types.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { BaseProps } from '../types';
+export {};
+export interface PaginationProps extends BaseProps<'pagination', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'onChange'> {
+    total: number;
+    active?: number;
+    defaultActive?: number;
+    pageSize?: number;
+    defaultPageSize?: number;
+    pageSizeList?: number[];
+    compose?: ('total' | 'pages' | 'page-size' | 'jump')[];
+    customRender?: {
+        total?: (range: [number, number]) => React.ReactNode;
+        prev?: React.ReactNode;
+        page?: (page: number) => React.ReactNode;
+        next?: React.ReactNode;
+        pageSize?: (pageSize: number) => React.ReactNode;
+        jump?: (input: React.ReactNode) => React.ReactNode;
+    };
+    mini?: boolean;
+    onChange?: (page: number, pageSize: number) => void;
+}

package/pagination/types.js

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

package/pagination/utils.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function buttonProps(handleClick: () => void, disabled?: boolean): import("react").HTMLAttributes<HTMLElement>;

package/pagination/utils.js

@@ -0,0 +1,14 @@
+export function buttonProps(handleClick, disabled = false) {
+    return {
+        tabIndex: disabled ? -1 : 0,
+        role: 'button',
+        'aria-disabled': disabled,
+        onKeyDown: (e) => {
+            if (e.code === 'Enter' || e.code === 'Space') {
+                e.preventDefault();
+                handleClick();
+            }
+        },
+        onClick: handleClick,
+    };
+}

package/pagination/vars.d.ts

@@ -0,0 +1,14 @@
+export declare const CLASSES: {
+    pagination: string;
+    'pagination--mini': string;
+    pagination__row: string;
+    pagination__jump: string;
+    pagination__button: string;
+    'pagination__button.is-active': string;
+    'pagination__button.is-disabled': string;
+    'pagination__button--border': string;
+    'pagination__button--number': string;
+    'pagination__button--jump5': string;
+    'pagination__jump5-icon': string;
+    pagination__ellipsis: string;
+};

package/pagination/vars.js

@@ -0,0 +1,14 @@
+export const CLASSES = {
+    pagination: '^pagination',
+    'pagination--mini': '^pagination--mini',
+    pagination__row: '^pagination__row',
+    pagination__jump: '^pagination__jump',
+    pagination__button: '^pagination__button',
+    'pagination__button.is-active': 'is-active',
+    'pagination__button.is-disabled': 'is-disabled',
+    'pagination__button--border': '^pagination__button--border',
+    'pagination__button--number': '^pagination__button--number',
+    'pagination__button--jump5': '^pagination__button--jump5',
+    'pagination__jump5-icon': '^pagination__jump5-icon',
+    pagination__ellipsis: '^pagination__ellipsis',
+};

package/popover/Popover.d.ts

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

package/popover/Popover.js

@@ -0,0 +1,173 @@
+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, useState } from 'react';
+import { PopoverFooter } from './PopoverFooter';
+import { PopoverHeader } from './PopoverHeader';
+import { CLASSES, TTANSITION_DURING } from './vars';
+import { useComponentProps, useControlled, useLockScroll, useMaxIndex, useNamespace, useStyled } from '../hooks';
+import { Popup } from '../internal/popup';
+import { Portal } from '../internal/portal';
+import { Transition } from '../internal/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, scrolling, 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", "scrolling", "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 uniqueId = useId();
+    let triggerId;
+    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 scrollingRef = useRefExtra(scrolling);
+    const dataRef = useRef({
+        prevActiveEl: 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 [popupPositionStyle, setPopupPositionStyle] = useState({
+        top: '-200vh',
+        left: '-200vw',
+    });
+    const [transformOrigin, setTransformOrigin] = useState();
+    const [placement, setPlacement] = useState(placementProp);
+    const updatePosition = useEventCallback(() => {
+        if (visible && triggerRef.current && popupRef.current) {
+            const position = getPopupPosition(triggerRef.current, { width: popupRef.current.offsetWidth, height: popupRef.current.offsetHeight }, {
+                placement: placementProp,
+                placementFallback: placement,
+                placementFixed,
+                gap,
+                inWindow,
+            });
+            setPopupPositionStyle({
+                top: position.top,
+                left: position.left,
+            });
+            setTransformOrigin(position.transformOrigin);
+            setPlacement(position.placement);
+        }
+    });
+    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,
+            containerRefs: [scrollingRef],
+        }, 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);
+                        if (visible) {
+                            if (escClosable && e.code === 'Escape') {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                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);
+                            }
+                            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 });
+                                    }
+                                }
+                            }, 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,
+                                        };
+                                        break;
+                                    case 'leaving':
+                                        transitionStyle = {
+                                            transform: 'scale(0.3)',
+                                            opacity: 0,
+                                            transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING.leave}ms ease-in`).join(', '),
+                                            transformOrigin,
+                                        };
+                                        break;
+                                    default:
+                                        break;
+                                }
+                                return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('popover', `popover--${placement}`), {
+                                    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);
+                                            }
+                                        }
+                                        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: Object.assign(Object.assign({}, popupPositionStyle), 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);
+Popover.Header = PopoverHeader;
+Popover.Footer = PopoverFooter;

package/popover/PopoverFooter.d.ts

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

package/popover/PopoverFooter.js

@@ -0,0 +1,51 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children } from 'react';
+import { CLASSES } 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 styled = useStyled(CLASSES, { popover: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.popover }, styleOverrides);
+    const { t } = useTranslation();
+    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: () => {
+            const shouldClose = onCancelClick === null || onCancelClick === void 0 ? void 0 : onCancelClick();
+            if (shouldClose instanceof Promise) {
+                changeCancelLoading(true);
+                shouldClose.then((val) => {
+                    changeCancelLoading(false);
+                    if (val !== false) {
+                        _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+                    }
+                });
+            }
+            else if (shouldClose !== false) {
+                _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+            }
+        } });
+    const okProps = Object.assign(Object.assign({}, okPropsProp), { loading: okLoading, onClick: () => {
+            const shouldClose = onOkClick === null || onOkClick === void 0 ? void 0 : onOkClick();
+            if (shouldClose instanceof Promise) {
+                changeOkLoading(true);
+                shouldClose.then((val) => {
+                    changeOkLoading(false);
+                    if (val !== false) {
+                        _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+                    }
+                });
+            }
+            else if (shouldClose !== false) {
+                _onClose === null || _onClose === void 0 ? void 0 : _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) => {
+            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);
+        }) })));
+}

package/popover/PopoverHeader.d.ts

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

package/popover/PopoverHeader.js

@@ -0,0 +1,37 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
+import { Children } from 'react';
+import { CLASSES } from './vars';
+import { Button } from '../button';
+import { useComponentProps, useControlled, useStyled, useTranslation } from '../hooks';
+import { Icon } from '../icon';
+import { mergeCS } from '../utils';
+export function PopoverHeader(props) {
+    const _a = useComponentProps('PopoverHeader', props), { styleOverrides, styleProvider, children, actions = [], closeProps: closePropsProp, onCloseClick, _id, _onClose } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "children", "actions", "closeProps", "onCloseClick", "_id", "_onClose"]);
+    const styled = useStyled(CLASSES, { popover: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.popover }, styleOverrides);
+    const { t } = useTranslation();
+    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();
+            if (shouldClose instanceof Promise) {
+                changeCloseLoading(true);
+                shouldClose.then((val) => {
+                    changeCloseLoading(false);
+                    if (val !== false) {
+                        _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+                    }
+                });
+            }
+            else if (shouldClose !== false) {
+                _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+            }
+        } });
+    return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('popover__header'), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { children: [_jsx("div", Object.assign({}, styled('popover__header-title'), { id: _id, children: children })), _jsx("div", Object.assign({}, styled('popover__header-actions'), { children: Children.map(actions, (action) => {
+                    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);
+                }) }))] })));
+}

package/popover/index.d.ts

@@ -0,0 +1,2 @@
+export type { PopoverRef, PopoverProps, PopoverHeaderProps, PopoverFooterProps } from './types';
+export { Popover } from './Popover';

package/popover/index.js

@@ -0,0 +1 @@
+export { Popover } from './Popover';