@laser-ui/components 0.0.1

package/menu/types.js

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

package/menu/utils.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { MenuItem } from './types';
+export declare function checkEnableItem<ID extends React.Key, T extends MenuItem<ID>>(item: T): boolean;
+export declare function getSameLevelEnableItems<ID extends React.Key, T extends MenuItem<ID>>(arr: T[]): T[];

package/menu/utils.js

@@ -0,0 +1,18 @@
+export function checkEnableItem(item) {
+    return (item.type === 'item' || item.type === 'sub') && !item.disabled;
+}
+export function getSameLevelEnableItems(arr) {
+    const items = [];
+    const reduceArr = (arr) => {
+        for (const item of arr) {
+            if (item.type === 'group' && item.children) {
+                reduceArr(item.children);
+            }
+            else if (checkEnableItem(item)) {
+                items.push(item);
+            }
+        }
+    };
+    reduceArr(arr);
+    return items;
+}

package/menu/vars.d.ts

@@ -0,0 +1,28 @@
+export declare const CLASSES: {
+    menu: string;
+    'menu--horizontal': string;
+    menu__item: string;
+    'menu__item--item': string;
+    'menu__item--sub': string;
+    'menu__item--horizontal': string;
+    'menu__item--icon': string;
+    'menu__item.is-active': string;
+    'menu__item.is-expand': string;
+    'menu__item.is-disabled': string;
+    'menu__item-icon': string;
+    'menu__item-content': string;
+    'menu__group-list': string;
+    'menu__group-title': string;
+    'menu__sub-list': string;
+    'menu__sub-arrow': string;
+    'menu__sub-arrow--horizontal': string;
+    'menu__sub-arrow.is-expand': string;
+    menu__indicator: string;
+    'menu__indicator--first': string;
+    'menu__indicator--last': string;
+    'menu__indicator-track': string;
+    'menu__indicator-track--hidden': string;
+    'menu__indicator-thumb': string;
+    menu__empty: string;
+    'menu-popup': string;
+};

package/menu/vars.js

@@ -0,0 +1,28 @@
+export const CLASSES = {
+    menu: '^menu',
+    'menu--horizontal': '^menu--horizontal',
+    menu__item: '^menu__item',
+    'menu__item--item': '^menu__item--item',
+    'menu__item--sub': '^menu__item--sub',
+    'menu__item--horizontal': '^menu__item--horizontal',
+    'menu__item--icon': '^menu__item--icon',
+    'menu__item.is-active': 'is-active',
+    'menu__item.is-expand': 'is-expand',
+    'menu__item.is-disabled': 'is-disabled',
+    'menu__item-icon': '^menu__item-icon',
+    'menu__item-content': '^menu__item-content',
+    'menu__group-list': '^menu__group-list',
+    'menu__group-title': '^menu__group-title',
+    'menu__sub-list': '^menu__sub-list',
+    'menu__sub-arrow': '^menu__sub-arrow',
+    'menu__sub-arrow--horizontal': '^menu__sub-arrow--horizontal',
+    'menu__sub-arrow.is-expand': 'is-expand',
+    menu__indicator: '^menu__indicator',
+    'menu__indicator--first': '^menu__indicator--first',
+    'menu__indicator--last': '^menu__indicator--last',
+    'menu__indicator-track': '^menu__indicator-track',
+    'menu__indicator-track--hidden': '^menu__indicator-track--hidden',
+    'menu__indicator-thumb': '^menu__indicator-thumb',
+    menu__empty: '^menu__empty',
+    'menu-popup': '^menu-popup',
+};

package/modal/Modal.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { ModalProps } from './types';
+import { ModalAlert } from './ModalAlert';
+import { ModalFooter } from './ModalFooter';
+import { ModalHeader } from './ModalHeader';
+export declare const Modal: {
+    (props: ModalProps): JSX.Element | null;
+    Header: typeof ModalHeader;
+    Footer: typeof ModalFooter;
+    Alert: typeof ModalAlert;
+};

package/modal/Modal.js

@@ -0,0 +1,127 @@
+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 { ModalAlert } from './ModalAlert';
+import { ModalFooter } from './ModalFooter';
+import { ModalHeader } from './ModalHeader';
+import { CLASSES } from './vars';
+import { useComponentProps, useLockScroll, useMaxIndex, useNamespace, useStyled } from '../hooks';
+import { Mask } from '../internal/mask';
+import { Portal } from '../internal/portal';
+import { Transition } from '../internal/transition';
+import { ROOT_DATA } from '../root/vars';
+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 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 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) {
+                el = document.createElement('div');
+                el.id = `${namespace}-modal-root`;
+                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;
+                }
+                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})`;
+                }
+            }, afterEnter: () => {
+                afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
+                dataRef.current.prevActiveEl = document.activeElement;
+                if (modalRef.current) {
+                    modalRef.current.focus({ preventScroll: true });
+                }
+            }, afterLeave: () => {
+                afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(false);
+                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_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) {
+                                    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: () => {
+                                            onClose === null || onClose === void 0 ? void 0 : onClose();
+                                        },
+                                    })] }))] })));
+            } }) }));
+};
+Modal.Header = ModalHeader;
+Modal.Footer = ModalFooter;
+Modal.Alert = ModalAlert;

package/modal/ModalAlert.d.ts

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

package/modal/ModalAlert.js

@@ -0,0 +1,19 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { checkNodeExist } from '@laser-ui/utils';
+import { ReactComponent as CheckCircleOutlined } from '@material-design-icons/svg/outlined/check_circle.svg';
+import { ReactComponent as HighlightOffOutlined } from '@material-design-icons/svg/outlined/highlight_off.svg';
+import { ReactComponent as InfoOutlined } from '@material-design-icons/svg/outlined/info.svg';
+import { ReactComponent as WarningAmberOutlined } from '@material-design-icons/svg/outlined/warning_amber.svg';
+import { CLASSES } from './vars';
+import { useComponentProps, useStyled } from '../hooks';
+import { Icon } from '../icon';
+import { mergeCS } from '../utils';
+export function ModalAlert(props) {
+    const _a = useComponentProps('ModalAlert', props), { styleOverrides, styleProvider, children, type, title, icon } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "children", "type", "title", "icon"]);
+    const styled = useStyled(CLASSES, { modal: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.modal }, styleOverrides);
+    return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('modal__alert', `modal__alert--${type}`), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { children: [_jsx("div", Object.assign({}, styled('modal__alert-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('modal__alert-content'), { children: [checkNodeExist(title) && _jsx("div", Object.assign({}, styled('modal__alert-title'), { children: title })), checkNodeExist(children) && _jsx("div", Object.assign({}, styled('modal__alert-message'), { children: children }))] }))] })));
+}

package/modal/ModalFooter.d.ts

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

package/modal/ModalFooter.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 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 styled = useStyled(CLASSES, { modal: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.modal }, 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('modal__footer', `modal__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/modal/ModalHeader.d.ts

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

package/modal/ModalHeader.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 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 styled = useStyled(CLASSES, { modal: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.modal }, 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('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) => {
+                    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/modal/index.d.ts

@@ -0,0 +1,2 @@
+export type { ModalProps, ModalHeaderProps, ModalFooterProps, ModalAlertProps } from './types';
+export { Modal } from './Modal';

package/modal/index.js

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

package/modal/types.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { ButtonProps } from '../button';
+import type { BaseProps } from '../types';
+export {};
+export interface ModalProps extends BaseProps<'modal', typeof CLASSES>, React.HTMLAttributes<HTMLDivElement> {
+    visible: boolean;
+    header?: React.ReactElement | string;
+    footer?: React.ReactElement;
+    alert?: React.ReactElement;
+    width?: number | string;
+    top?: number | string;
+    mask?: boolean;
+    maskClosable?: boolean;
+    escClosable?: boolean;
+    skipFirstTransition?: boolean;
+    destroyAfterClose?: boolean;
+    zIndex?: number | string;
+    onClose?: () => void;
+    afterVisibleChange?: (visible: boolean) => void;
+}
+export interface ModalHeaderProps extends BaseProps<'modal', typeof CLASSES>, React.HTMLAttributes<HTMLDivElement> {
+    actions?: 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[];
+    cancelProps?: ButtonProps;
+    okProps?: ButtonProps;
+    onCancelClick?: () => any | Promise<any>;
+    onOkClick?: () => any | Promise<any>;
+}
+export interface ModalAlertProps extends BaseProps<'modal', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    type: 'success' | 'warning' | 'error' | 'info';
+    title?: React.ReactNode;
+    icon?: React.ReactNode;
+}

package/modal/types.js

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

package/modal/vars.d.ts

@@ -0,0 +1,23 @@
+export declare const CLASSES: {
+    modal: string;
+    'modal--center': string;
+    'modal--alert': string;
+    modal__content: string;
+    modal__header: string;
+    'modal__header-title': string;
+    'modal__header-actions': string;
+    modal__body: string;
+    modal__footer: string;
+    'modal__footer--left': string;
+    'modal__footer--center': string;
+    'modal__footer--right': string;
+    modal__alert: string;
+    'modal__alert--success': string;
+    'modal__alert--warning': string;
+    'modal__alert--error': string;
+    'modal__alert--info': string;
+    'modal__alert-icon': string;
+    'modal__alert-content': string;
+    'modal__alert-title': string;
+    'modal__alert-message': string;
+};

package/modal/vars.js

@@ -0,0 +1,23 @@
+export const CLASSES = {
+    modal: '^modal',
+    'modal--center': '^modal--center',
+    'modal--alert': '^modal--alert',
+    modal__content: '^modal__content',
+    modal__header: '^modal__header',
+    'modal__header-title': '^modal__header-title',
+    'modal__header-actions': '^modal__header-actions',
+    modal__body: '^modal__body',
+    modal__footer: '^modal__footer',
+    'modal__footer--left': '^modal__footer--left',
+    'modal__footer--center': '^modal__footer--center',
+    'modal__footer--right': '^modal__footer--right',
+    modal__alert: '^modal__alert',
+    'modal__alert--success': '^modal__alert--success',
+    'modal__alert--warning': '^modal__alert--warning',
+    'modal__alert--error': '^modal__alert--error',
+    'modal__alert--info': '^modal__alert--info',
+    'modal__alert-icon': '^modal__alert-icon',
+    'modal__alert-content': '^modal__alert-content',
+    'modal__alert-title': '^modal__alert-title',
+    'modal__alert-message': '^modal__alert-message',
+};

package/notification/Notification.d.ts

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

package/notification/Notification.js

@@ -0,0 +1,129 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAsync, useMount } from '@laser-ui/hooks';
+import { checkNodeExist } from '@laser-ui/utils';
+import { ReactComponent as CheckCircleOutlined } from '@material-design-icons/svg/outlined/check_circle.svg';
+import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
+import { ReactComponent as HighlightOffOutlined } from '@material-design-icons/svg/outlined/highlight_off.svg';
+import { ReactComponent as InfoOutlined } from '@material-design-icons/svg/outlined/info.svg';
+import { ReactComponent as WarningAmberOutlined } from '@material-design-icons/svg/outlined/warning_amber.svg';
+import { isUndefined } from 'lodash';
+import { useId, useRef } from 'react';
+import { CLASSES, TTANSITION_DURING } from './vars';
+import { useComponentProps, useNamespace, useStyled, useTranslation } from '../hooks';
+import { Icon } from '../icon';
+import { Portal } from '../internal/portal';
+import { Transition } from '../internal/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 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({});
+    const uniqueId = useId();
+    const titleId = `${namespace}-notification-title-${uniqueId}`;
+    const descriptionId = `${namespace}-notification-content-${uniqueId}`;
+    useMount(() => {
+        if (duration > 0) {
+            dataRef.current.clearTid = async.setTimeout(() => {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }, duration * 1000);
+        }
+    });
+    return (_jsx(Portal, { selector: () => {
+            const id = placement === 'left-top'
+                ? `${namespace}-notification-lt-root`
+                : placement === 'right-top'
+                    ? `${namespace}-notification-rt-root`
+                    : placement === 'left-bottom'
+                        ? `${namespace}-notification-lb-root`
+                        : `${namespace}-notification-rb-root`;
+            let root = document.getElementById(`${namespace}-notification-root`);
+            if (!root) {
+                root = document.createElement('div');
+                root.id = `${namespace}-notification-root`;
+                document.body.appendChild(root);
+            }
+            let el = document.getElementById(id);
+            if (!el) {
+                el = document.createElement('div');
+                el.id = id;
+                root.appendChild(el);
+            }
+            return el;
+        }, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING, skipFirstTransition: skipFirstTransition, destroyWhenLeaved: destroyAfterClose, afterEnter: () => {
+                afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
+            }, afterLeave: () => {
+                afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(false);
+            }, children: (state) => {
+                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(() => {
+                                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 })))] }))] })));
+            } }) }));
+}

package/notification/index.d.ts

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

package/notification/index.js

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

package/notification/types.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { BaseProps } from '../types';
+export {};
+export interface NotificationProps extends BaseProps<'notification', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    visible: boolean;
+    title: React.ReactNode;
+    type?: 'success' | 'warning' | 'error' | 'info';
+    placement?: 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom';
+    duration?: number;
+    icon?: React.ReactNode;
+    closable?: boolean;
+    escClosable?: boolean;
+    skipFirstTransition?: boolean;
+    destroyAfterClose?: boolean;
+    onClose?: () => void;
+    afterVisibleChange?: (visible: boolean) => void;
+}

package/notification/types.js

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

package/notification/vars.d.ts

@@ -0,0 +1,17 @@
+export declare const CLASSES: {
+    notification: string;
+    'notification--success': string;
+    'notification--warning': string;
+    'notification--error': string;
+    'notification--info': string;
+    notification__icon: string;
+    notification__content: string;
+    notification__header: string;
+    notification__title: string;
+    notification__close: string;
+    notification__description: string;
+};
+export declare const TTANSITION_DURING: {
+    enter: number;
+    leave: number;
+};