no-frills-ui 0.0.14-alpha.1 → 0.0.14-alpha.11

package/lib-esm/components/Notification/Notification.js

@@ -1,111 +1,104 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import React, { createRef } from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';
-import NotificationManager from './NotificationManager';
-import { NOTIFICATION_POSITION, NOTIFICATION_TYPE } from './types';
-/** This component is only used for storybook documentation */
-export class StoryProps extends React.Component {
-    render() {
-        return null;
-    }
-}
-StoryProps.propTypes = {
-    /** Title of the notification */
-    title: PropTypes.string.isRequired,
-    /** Body of the notification */
-    description: PropTypes.string.isRequired,
-    /** Id for the notification, helps in de-duplication. */
-    id: PropTypes.string,
-    /** Duration for the notification in milliseconds */
-    duration: PropTypes.number,
-    /** Creates sticky notification */
-    sticky: PropTypes.bool,
-    /** Type of notification */
-    type: PropTypes.oneOf([
-        NOTIFICATION_TYPE.INFO,
-        NOTIFICATION_TYPE.SUCCESS,
-        NOTIFICATION_TYPE.WARNING,
-        NOTIFICATION_TYPE.DANGER,
-    ]),
-    /** Action button text */
-    buttonText: PropTypes.string,
-    /** Action button click callback */
-    buttonClick: PropTypes.func,
-    /** Notification close callback. */
-    onClose: PropTypes.func,
-};
-StoryProps.defaultProps = {
-    duration: 5000,
-    sticky: false,
-    type: NOTIFICATION_TYPE.INFO,
-};
-/** Maps notification position to layer position */
-const positionMap = {
+import { jsx } from '@emotion/react/jsx-runtime';
+import { flushSync } from 'react-dom';
+import { createRoot } from 'react-dom/client';
+import LayerManager, { LAYER_POSITION } from '../../shared/LayerManager.js';
+import NotificationManager from './NotificationManager.js';
+import { NOTIFICATION_POSITION } from './types.js';
+
+/** Maps notification position to layer position */ const positionMap = {
     [NOTIFICATION_POSITION.TOP_LEFT]: LAYER_POSITION.TOP_LEFT,
     [NOTIFICATION_POSITION.TOP_RIGHT]: LAYER_POSITION.TOP_RIGHT,
     [NOTIFICATION_POSITION.BOTTOM_LEFT]: LAYER_POSITION.BOTTOM_LEFT,
-    [NOTIFICATION_POSITION.BOTTOM_RIGHT]: LAYER_POSITION.BOTTOM_RIGHT,
+    [NOTIFICATION_POSITION.BOTTOM_RIGHT]: LAYER_POSITION.BOTTOM_RIGHT
 };
-/** Notification class */
-class Notification {
-    constructor() {
-        /** Helps in maintaining single instance for different positions. */
-        this.containers = new Map();
+/** Notification class */ class Notification {
+    constructor(){
+        /** Helps in maintaining single instance for different positions. */ this.containers = new Map();
         /**
-         * Adds a notification
-         *
-         * @param position
-         * @param options
-         */
-        this.add = (position, options) => {
-            let notification;
+     * Adds a notification
+     *
+     * @param position - The position where the notification should appear
+     * @param options - Configuration options for the notification
+     * @returns The notification ID or a promise that resolves to the notification ID
+     */ this.add = (position, options, ariaLabel = 'Notifications')=>{
             if (!this.containers.has(position)) {
-                const div = document === null || document === void 0 ? void 0 : document.createElement('div');
-                const ref = createRef();
+                /** Callback ref to capture the NotificationManager instance when it mounts */ const refCallback = (instance)=>{
+                    if (instance) {
+                        const container = this.containers.get(position);
+                        if (container) {
+                            container.manager = instance;
+                        }
+                    }
+                };
                 const [Component] = LayerManager.renderLayer({
                     closeOnEsc: false,
                     closeOnOverlayClick: false,
                     position: positionMap[position],
                     alwaysOnTop: true,
-                    component: (_jsx(NotificationManager, { ref: ref, position: position, onEmpty: () => this.destroy(position) }))
+                    component: /*#__PURE__*/ jsx(NotificationManager, {
+                        ref: refCallback,
+                        position: position,
+                        onEmpty: ()=>this.destroy(position),
+                        ariaLabel: ariaLabel
+                    })
                 });
+                // Create a div to mount the Component
+                const div = document.createElement('div');
+                document.body.appendChild(div);
+                const root = createRoot(div);
                 this.containers.set(position, {
-                    ref,
-                    element: div,
+                    manager: null,
+                    root,
+                    div
+                });
+                // Render the Component which will trigger the LayerManager's useEffect
+                flushSync(()=>{
+                    root.render(/*#__PURE__*/ jsx(Component, {}));
                 });
-                ReactDOM.render(_jsx(Component, {}), div);
-                notification = ref;
             }
-            else {
-                notification = this.containers.get(position).ref;
+            const container = this.containers.get(position);
+            if (container && container.manager) {
+                return container.manager.add(options);
             }
-            return notification.current.add(options);
+            // If manager is not ready yet, wait a bit and retry
+            return new Promise((resolve)=>{
+                setTimeout(()=>{
+                    const container = this.containers.get(position);
+                    if (container && container.manager) {
+                        resolve(container.manager.add(options));
+                    }
+                }, 10);
+            });
         };
         /**
-         * Removes a notification
-         *
-         * @param position
-         * @param id
-         */
-        this.remove = (position, id) => {
-            if (this.containers.has(position)) {
-                this.containers.get(position).ref.current.remove(id);
+     * Removes a notification
+     *
+     * @param position - The position of the notification container
+     * @param id - The unique ID of the notification to remove
+     */ this.remove = (position, id)=>{
+            const container = this.containers.get(position);
+            if (container && container.manager) {
+                container.manager.remove(id);
             }
         };
         /**
-         * Destroys entire stack of notifications.
-         *
-         * @param position
-         */
-        this.destroy = (position) => {
-            const notification = this.containers.get(position);
-            ReactDOM.unmountComponentAtNode(notification.element);
-            this.containers.delete(position);
+     * Destroys entire stack of notifications at a position.
+     * Unmounts the React root and cleans up DOM elements.
+     *
+     * @param position - The position of the notification container to destroy
+     */ this.destroy = (position)=>{
+            const container = this.containers.get(position);
+            if (container) {
+                container.root.unmount();
+                if (document.body.contains(container.div)) {
+                    document.body.removeChild(container.div);
+                }
+                this.containers.delete(position);
+            }
         };
     }
 }
-/** Export a singleton instance */
-export default new Notification();
-//# sourceMappingURL=Notification.js.map
+/** Export a singleton instance */ var Notification_default = new Notification();
+
+export { Notification_default as default };
+//# sourceMappingURL=Notification.js.map

package/lib-esm/components/Notification/Notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../../src/components/Notification/Notification.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Notification.js","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { type RefCallback } from 'react';\nimport { flushSync } from 'react-dom';\nimport { createRoot, type Root } from 'react-dom/client';\nimport LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';\nimport NotificationManager from './NotificationManager';\nimport { NOTIFICATION_POSITION, NOTIFICATION_TYPE, NotificationOptions } from './types';\n\ntype NotificationProps = {\n    /** Title of the notification */\n    title: string;\n    /** Body of the notification */\n    description: string;\n    /** Id for the notification, helps in de-duplication. */\n    id?: string;\n    /**\n     * Duration for the notification in milliseconds\n     * @default 5000\n     */\n    duration?: number;\n    /**\n     * Creates sticky notification\n     * @default false\n     */\n    sticky?: boolean;\n    /**\n     * Type of notification\n     * @default NOTIFICATION_TYPE.INFO\n     */\n    type?: NOTIFICATION_TYPE;\n    /** Action button text */\n    buttonText?: string;\n    /** Action button click callback */\n    buttonClick?: () => void;\n    /** Notification close callback. */\n    onClose?: () => void;\n    /** Aria label for the close button on the notification. Defaults to \"Close notification\" */\n    closeButtonAriaLabel?: string;\n};\n\n/**\n * This dummy component is used to extract props for documentation in Storybook.\n * @param props\n * @returns\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function StoryProps(props: NotificationProps) {\n    return null;\n}\n\n/** Maps notification position to layer position */\nconst positionMap = {\n    [NOTIFICATION_POSITION.TOP_LEFT]: LAYER_POSITION.TOP_LEFT,\n    [NOTIFICATION_POSITION.TOP_RIGHT]: LAYER_POSITION.TOP_RIGHT,\n    [NOTIFICATION_POSITION.BOTTOM_LEFT]: LAYER_POSITION.BOTTOM_LEFT,\n    [NOTIFICATION_POSITION.BOTTOM_RIGHT]: LAYER_POSITION.BOTTOM_RIGHT,\n};\n\n/** Notification class */\nclass Notification {\n    /** Helps in maintaining single instance for different positions. */\n    private containers: Map<\n        NOTIFICATION_POSITION,\n        {\n            manager: NotificationManager | null;\n            root: Root;\n            div: HTMLDivElement;\n        }\n    > = new Map();\n\n    /**\n     * Adds a notification\n     *\n     * @param position - The position where the notification should appear\n     * @param options - Configuration options for the notification\n     * @returns The notification ID or a promise that resolves to the notification ID\n     */\n    public add = (\n        position: NOTIFICATION_POSITION,\n        options: NotificationOptions,\n        ariaLabel: string = 'Notifications',\n    ) => {\n        if (!this.containers.has(position)) {\n            /** Callback ref to capture the NotificationManager instance when it mounts */\n            const refCallback: RefCallback<NotificationManager> = (instance) => {\n                if (instance) {\n                    const container = this.containers.get(position);\n                    if (container) {\n                        container.manager = instance;\n                    }\n                }\n            };\n\n            const [Component] = LayerManager.renderLayer({\n                closeOnEsc: false,\n                closeOnOverlayClick: false,\n                position: positionMap[position],\n                alwaysOnTop: true,\n                component: (\n                    <NotificationManager\n                        ref={refCallback}\n                        position={position}\n                        onEmpty={() => this.destroy(position)}\n                        ariaLabel={ariaLabel}\n                    />\n                ),\n            });\n\n            // Create a div to mount the Component\n            const div = document.createElement('div');\n            document.body.appendChild(div);\n            const root = createRoot(div);\n\n            this.containers.set(position, {\n                manager: null,\n                root,\n                div,\n            });\n\n            // Render the Component which will trigger the LayerManager's useEffect\n            flushSync(() => {\n                root.render(<Component />);\n            });\n        }\n\n        const container = this.containers.get(position);\n        if (container && container.manager) {\n            return container.manager.add(options);\n        }\n\n        // If manager is not ready yet, wait a bit and retry\n        return new Promise<string>((resolve) => {\n            setTimeout(() => {\n                const container = this.containers.get(position);\n                if (container && container.manager) {\n                    resolve(container.manager.add(options));\n                }\n            }, 10);\n        });\n    };\n\n    /**\n     * Removes a notification\n     *\n     * @param position - The position of the notification container\n     * @param id - The unique ID of the notification to remove\n     */\n    public remove = (position: NOTIFICATION_POSITION, id: string) => {\n        const container = this.containers.get(position);\n        if (container && container.manager) {\n            container.manager.remove(id);\n        }\n    };\n\n    /**\n     * Destroys entire stack of notifications at a position.\n     * Unmounts the React root and cleans up DOM elements.\n     *\n     * @param position - The position of the notification container to destroy\n     */\n    public destroy = (position: NOTIFICATION_POSITION) => {\n        const container = this.containers.get(position);\n        if (container) {\n            container.root.unmount();\n            if (document.body.contains(container.div)) {\n                document.body.removeChild(container.div);\n            }\n            this.containers.delete(position);\n        }\n    };\n}\n\n/** Export a singleton instance */\nexport default new Notification();\n"],"names":["positionMap","NOTIFICATION_POSITION","TOP_LEFT","LAYER_POSITION","TOP_RIGHT","BOTTOM_LEFT","BOTTOM_RIGHT","Notification","containers","Map","add","position","options","ariaLabel","has","refCallback","instance","container","get","manager","Component","LayerManager","renderLayer","closeOnEsc","closeOnOverlayClick","alwaysOnTop","component","_jsx","NotificationManager","ref","onEmpty","destroy","div","document","createElement","body","appendChild","root","createRoot","set","flushSync","render","Promise","resolve","setTimeout","remove","id","unmount","contains","removeChild","delete"],"mappings":"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"}

package/lib-esm/components/Notification/NotificationManager.d.ts

@@ -3,6 +3,7 @@ import { NOTIFICATION_POSITION, NotificationOptions } from './types';
 interface NotificationManagerProps {
     position: NOTIFICATION_POSITION;
     onEmpty: () => void;
+    ariaLabel?: string;
 }
 interface NoticeProp extends NotificationOptions {
     leaving?: boolean;
@@ -17,36 +18,49 @@ declare class NotificationManager extends React.Component<NotificationManagerPro
     state: NotificationManagerState;
     private timeouts;
     private set;
+    private politeRegionRef;
+    private assertiveRegionRef;
     /**
      * Removes a notification from stack if the notification with the given id is found.
      *
      * @param id
      */
-    remove: (id: string) => void;
+    remove: (id?: string) => void;
     /**
      * Adds a notification to stack.
      *
      * @param notice
      */
-    add: (notice: NotificationOptions) => string;
+    add: (notice: NotificationOptions) => Promise<string>;
+    /**
+     * Update live region content with clear-then-set pattern for reliable VoiceOver announcements.
+     *
+     * @param content - The text content to announce
+     * @param isAssertive - Whether to use assertive (alert) or polite (log) live region
+     */
+    private updateLiveRegion;
     /**
      * Handler for close button click.
      *
      * @param id
      */
-    closeClickHandler: (id: string) => () => void;
+    closeClickHandler: (id?: string) => () => void;
     /**
      * Pause notification when user is hovering over it.
      *
      * @param id
      */
-    pause: (id: string) => () => void;
+    pause: (id?: string) => () => void;
     /**
      * Restart the removal of notification.
      *
      * @param id
      */
-    resume: (id: string) => () => void;
+    resume: (id?: string) => () => void;
+    /**
+     * Clean up all pending timeouts when component unmounts
+     */
+    componentWillUnmount(): void;
     render(): import("@emotion/react/jsx-runtime").JSX.Element;
 }
 export default NotificationManager;

package/lib-esm/components/Notification/NotificationManager.js

@@ -1,52 +1,137 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 import React from 'react';
-import { NOTIFICATION_TYPE } from './types';
-import { Close, Info, ReportProblem, ErrorOutline, CheckCircle } from '../../icons';
-import { Container, Notice, Title, IconContainer, FillParent, Body, CloseButton, Footer } from './style';
-import { ActionButton } from '../Button';
-const DEFAULT_DURATION = 5000;
+import { Container, VisuallyHidden, Notice, IconContainer, FillParent, Title, Body, Footer, CloseButton } from './style.js';
+import { NOTIFICATION_TYPE } from './types.js';
+import CheckCircle from '../../icons/Info.js';
+import CheckCircle$1 from '../../icons/CheckCircle.js';
+import CheckCircle$2 from '../../icons/ReportProblem.js';
+import CheckCircle$3 from '../../icons/ErrorOutline.js';
+import ActionButton from '../Button/ActionButton.js';
+import Close from '../../icons/Close.js';
+
+const DEFAULT_DURATION$1 = 5000;
 /**
  * Notification Manager class
- */
-class NotificationManager extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            notices: [],
-        };
-        // bookkeeping for timeouts
+ */ class NotificationManager extends React.Component {
+    /**
+     * Clean up all pending timeouts when component unmounts
+     */ componentWillUnmount() {
+        // Clear all pending timeouts
+        Object.keys(this.timeouts).forEach((id)=>{
+            clearTimeout(this.timeouts[id]);
+        });
         this.timeouts = {};
-        // Set of notification ids
-        this.set = new Set();
-        /**
-         * Removes a notification from stack if the notification with the given id is found.
-         *
-         * @param id
-         */
-        this.remove = (id) => {
+        this.set.clear();
+    }
+    render() {
+        return /*#__PURE__*/ jsxs(Container, {
+            position: this.props.position,
+            children: [
+                /*#__PURE__*/ jsx(VisuallyHidden, {
+                    ref: this.politeRegionRef,
+                    role: "log",
+                    "aria-live": "polite",
+                    "aria-atomic": "false",
+                    "aria-relevant": "additions text"
+                }),
+                /*#__PURE__*/ jsx(VisuallyHidden, {
+                    ref: this.assertiveRegionRef,
+                    role: "alert",
+                    "aria-live": "assertive",
+                    "aria-atomic": "true"
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    role: "list",
+                    "aria-label": this.props.ariaLabel,
+                    children: this.state.notices.map((notice)=>{
+                        const { id, title, description, leaving, type = NOTIFICATION_TYPE.INFO, buttonText, buttonClick, closeButtonAriaLabel } = notice;
+                        return /*#__PURE__*/ jsxs(Notice, {
+                            ...notice,
+                            position: this.props.position,
+                            className: leaving ? 'leave' : '',
+                            onMouseEnter: this.pause(id),
+                            onMouseLeave: this.resume(id),
+                            role: "listitem",
+                            children: [
+                                /*#__PURE__*/ jsxs(IconContainer, {
+                                    type: type,
+                                    "aria-hidden": "true",
+                                    children: [
+                                        type === NOTIFICATION_TYPE.INFO && /*#__PURE__*/ jsx(CheckCircle, {}),
+                                        type === NOTIFICATION_TYPE.SUCCESS && /*#__PURE__*/ jsx(CheckCircle$1, {}),
+                                        type === NOTIFICATION_TYPE.WARNING && /*#__PURE__*/ jsx(CheckCircle$2, {}),
+                                        type === NOTIFICATION_TYPE.DANGER && /*#__PURE__*/ jsx(CheckCircle$3, {})
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs(FillParent, {
+                                    children: [
+                                        /*#__PURE__*/ jsx(Title, {
+                                            type: type,
+                                            children: title
+                                        }),
+                                        /*#__PURE__*/ jsx(Body, {
+                                            children: description
+                                        }),
+                                        buttonText && /*#__PURE__*/ jsx(Footer, {
+                                            children: /*#__PURE__*/ jsx(ActionButton, {
+                                                onClick: ()=>{
+                                                    buttonClick?.();
+                                                },
+                                                children: buttonText
+                                            })
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx(CloseButton, {
+                                    onClick: this.closeClickHandler(id),
+                                    "aria-label": closeButtonAriaLabel || 'Close notification',
+                                    tabIndex: 0,
+                                    children: /*#__PURE__*/ jsx(Close, {})
+                                })
+                            ]
+                        }, id);
+                    })
+                })
+            ]
+        });
+    }
+    constructor(...args){
+        super(...args), this.state = {
+            notices: []
+        }, // bookkeeping for timeouts
+        this.timeouts = {}, // Set of notification ids
+        this.set = new Set(), // Refs for live regions to ensure they exist before updates
+        this.politeRegionRef = /*#__PURE__*/ React.createRef(), this.assertiveRegionRef = /*#__PURE__*/ React.createRef(), /**
+     * Removes a notification from stack if the notification with the given id is found.
+     *
+     * @param id
+     */ this.remove = (id)=>{
+            if (!id) return;
             // Trigger leaving animation.
             this.setState({
-                notices: this.state.notices.map(notice => (Object.assign(Object.assign({}, notice), { leaving: notice.id === id ? true : notice.leaving })))
+                notices: this.state.notices.map((notice)=>({
+                        ...notice,
+                        leaving: notice.id === id ? true : notice.leaving
+                    }))
             });
             this.set.delete(id);
             // Remove notification on animation completion.
-            setTimeout(() => {
-                const notice = this.state.notices.find(notice => notice.id === id);
+            setTimeout(()=>{
+                const notice = this.state.notices.find((notice)=>notice.id === id);
                 if (notice) {
                     // call close callback, ignore any errors in callback.
                     if (notice.onClose) {
                         try {
                             notice.onClose();
-                        }
-                        catch (e) {
+                        } catch (e) {
                             console.warn('Error in notification close callback', e.message);
                         }
                     }
                     // Remove the notification
                     this.setState({
-                        notices: this.state.notices.filter(notice => notice.id !== id),
-                    }, () => {
-                        // Check if the stack is empty and then call the 
+                        notices: this.state.notices.filter((notice)=>notice.id !== id)
+                    }, ()=>{
+                        // Check if the stack is empty and then call the
                         // empty callback function.
                         if (this.state.notices.length === 0) {
                             this.props.onEmpty();
@@ -54,67 +139,80 @@ class NotificationManager extends React.Component {
                     });
                 }
             }, 550);
-        };
-        /**
-         * Adds a notification to stack.
-         *
-         * @param notice
-         */
-        this.add = (notice) => {
+        }, /**
+     * Adds a notification to stack.
+     *
+     * @param notice
+     */ this.add = async (notice)=>{
             // Generate unique id if not provided.
-            const id = notice.id || (Math.random() * Math.pow(10, 7)).toFixed(0);
+            const id = notice.id || (Math.random() * 10 ** 7).toFixed(0);
             // De-dupe on id
             if (!this.set.has(id)) {
+                const type = notice.type || NOTIFICATION_TYPE.INFO;
+                const isUrgent = type === NOTIFICATION_TYPE.WARNING || type === NOTIFICATION_TYPE.DANGER;
                 // Add notice to the top of stack.
-                this.setState({
-                    notices: [
-                        Object.assign(Object.assign({}, notice), { id }),
-                        ...this.state.notices,
-                    ],
+                this.setState((prevState)=>({
+                        notices: [
+                            {
+                                ...notice,
+                                id
+                            },
+                            ...prevState.notices
+                        ]
+                    }), ()=>{
+                    // Update live region after state update
+                    const announcement = `${notice.title} ${notice.description}`;
+                    this.updateLiveRegion(announcement, isUrgent);
                 });
                 // set timeout for closing the notification.
                 if (!notice.sticky) {
-                    this.timeouts[id] = setTimeout(() => this.remove(id), notice.duration || DEFAULT_DURATION);
+                    this.timeouts[id] = setTimeout(()=>this.remove(id), notice.duration || DEFAULT_DURATION$1);
                 }
                 // Add id to the set.
                 this.set.add(id);
             }
             return id;
-        };
-        /**
-         * Handler for close button click.
-         *
-         * @param id
-         */
-        this.closeClickHandler = (id) => () => {
-            this.remove(id);
-        };
-        /**
-         * Pause notification when user is hovering over it.
-         *
-         * @param id
-         */
-        this.pause = (id) => () => {
-            clearTimeout(this.timeouts[id]);
-        };
-        /**
-         * Restart the removal of notification.
-         *
-         * @param id
-         */
-        this.resume = (id) => () => {
-            const notice = this.state.notices.find(notice => notice.id === id);
-            if (!notice.sticky) {
-                this.timeouts[id] = setTimeout(() => this.remove(id), DEFAULT_DURATION);
+        }, /**
+     * Update live region content with clear-then-set pattern for reliable VoiceOver announcements.
+     *
+     * @param content - The text content to announce
+     * @param isAssertive - Whether to use assertive (alert) or polite (log) live region
+     */ this.updateLiveRegion = (content, isAssertive)=>{
+            const region = isAssertive ? this.assertiveRegionRef.current : this.politeRegionRef.current;
+            if (region) {
+                // Add content after delay
+                setTimeout(()=>{
+                    if (region) {
+                        region.textContent = content;
+                    }
+                }, 150);
             }
-        };
-    }
-    render() {
-        return (_jsx(Container, { position: this.props.position, children: this.state.notices.map(notice => {
-                const { id, title, description, leaving, type = NOTIFICATION_TYPE.INFO, buttonText, buttonClick, } = notice;
-                return (_jsxs(Notice, Object.assign({}, notice, { position: this.props.position, className: leaving ? 'leave' : '', onMouseEnter: this.pause(id), onMouseLeave: this.resume(id), children: [_jsxs(IconContainer, { type: type, children: [type === NOTIFICATION_TYPE.INFO && _jsx(Info, {}), type === NOTIFICATION_TYPE.SUCCESS && _jsx(CheckCircle, {}), type === NOTIFICATION_TYPE.WARNING && _jsx(ReportProblem, {}), type === NOTIFICATION_TYPE.DANGER && _jsx(ErrorOutline, {})] }), _jsxs(FillParent, { children: [_jsxs(Title, { type: type, children: [_jsx(FillParent, { children: title }), _jsx(CloseButton, { onClick: this.closeClickHandler(id), children: _jsx(Close, {}) })] }), _jsx(Body, { children: description }), buttonText && (_jsx(Footer, { children: _jsx(ActionButton, { onClick: () => { buttonClick === null || buttonClick === void 0 ? void 0 : buttonClick(); }, children: buttonText }) }))] })] }), id));
-            }) }));
+        }, /**
+     * Handler for close button click.
+     *
+     * @param id
+     */ this.closeClickHandler = (id)=>()=>{
+                this.remove(id);
+            }, /**
+     * Pause notification when user is hovering over it.
+     *
+     * @param id
+     */ this.pause = (id)=>()=>{
+                if (id && this.timeouts[id]) {
+                    clearTimeout(this.timeouts[id]);
+                }
+            }, /**
+     * Restart the removal of notification.
+     *
+     * @param id
+     */ this.resume = (id)=>()=>{
+                const notice = this.state.notices.find((notice)=>notice.id === id);
+                if (!notice?.sticky && id && !this.timeouts[id]) {
+                    this.timeouts[id] = setTimeout(()=>this.remove(id), DEFAULT_DURATION$1);
+                }
+            };
     }
 }
-export default NotificationManager;
-//# sourceMappingURL=NotificationManager.js.map
+
+export { NotificationManager as default };
+//# sourceMappingURL=NotificationManager.js.map