no-frills-ui 0.0.14-alpha.4 → 0.0.14-alpha.6

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

@@ -1,51 +1,135 @@
-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 { Close, Info, ReportProblem, ErrorOutline, CheckCircle } from '../../icons';
-import { ActionButton } from '../Button';
-import { Container, Notice, Title, IconContainer, FillParent, Body, CloseButton, Footer, } from './style';
-import { NOTIFICATION_TYPE } from './types';
+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 = 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)=>{
             // 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),
-                    }, () => {
+                        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) {
@@ -54,69 +138,77 @@ 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,
-                    ],
+                        {
+                            ...notice,
+                            id
+                        },
+                        ...this.state.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);
                 }
                 // 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)=>()=>{
+                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);
+                }
+            };
     }
 }
-export default NotificationManager;
-//# sourceMappingURL=NotificationManager.js.map
+
+export { NotificationManager as default };

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

@@ -1,3 +1,2 @@
 export { default as Notification } from './Notification';
 export { NOTIFICATION_POSITION, NOTIFICATION_TYPE } from './types';
-//# sourceMappingURL=index.d.ts.map

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

@@ -42,5 +42,8 @@ export declare const Footer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const VisuallyHidden: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export {};
-//# sourceMappingURL=style.d.ts.map