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

package/lib-esm/components/Modal/Modal.d.ts

@@ -1,34 +1,93 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 export { Header as ModalHeader, Body as ModalBody, Footer as ModalFooter, } from '../../shared/styles';
-type ModalProps = PropTypes.InferProps<typeof Modal.propTypes>;
+type ModalProps = {
+    /** Opens the modal */
+    open: boolean;
+    /** Closes the modal on esc */
+    closeOnEsc?: boolean;
+    /** Closes the modal on overlay click */
+    closeOnOverlayClick?: boolean;
+    /** Call back function called when the modal closes. */
+    onClose?: () => void;
+    /** Ref forwarded to the modal container */
+    forwardRef?: React.Ref<HTMLDivElement>;
+} & React.HTMLAttributes<HTMLDivElement>;
 interface ModalState {
     open: boolean;
 }
+/**
+ * Modal component
+ *
+ * A dialog window that sits on top of the main application content.
+ * It disrupts the user's workflow to demand attention for a critical task or decision.
+ *
+ * Accessibility:
+ * - Implements ARIA `role="dialog"` and `aria-modal="true"`.
+ * - Traps focus effectively within the modal while open.
+ * - Restores focus to the triggering element upon closure.
+ * - Supports closing via ESC key and overlay click.
+ */
 export default class Modal extends React.Component<React.PropsWithChildren<ModalProps>, ModalState> {
     state: {
         open: boolean;
     };
-    static propTypes: {
-        /** Opens the modal */
-        open: PropTypes.Validator<boolean>;
-        /** Closes the modal on esc */
-        closeOnEsc: PropTypes.Requireable<boolean>;
-        /** Closes the modal on overlay click */
-        closeOnOverlayClick: PropTypes.Requireable<boolean>;
-        /** Call back function called when the modal closes. */
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-    };
     static defaultProps: {
         closeOnEsc: boolean;
         closeOnOverlayClick: boolean;
     };
+    /**
+     * Syncs state with props.
+     */
     static getDerivedStateFromProps(props: ModalProps): {
         open: boolean;
-    };
-    private layer;
-    private closeCallback;
+    } | null;
+    private layer?;
+    private closeCallback?;
+    /**
+     * Internal close handler.
+     * Restores focus and calls the external onClose callback.
+     */
     private onClose;
+    private lastFocusedElement;
+    private modalRef;
+    /**
+     * Retrieves all focusable elements within the modal.
+     */
+    private getFocusableElements;
+    /**
+     * Handles keydown events to implement the focus trap.
+     * Traps Tab and Shift+Tab within the modal.
+     */
+    private handleKeyDown;
+    /**
+     * Lifecycle method to save the currently focused element when the modal mounts while open.
+     */
+    componentDidMount(): void;
+    /**
+     * Lifecycle method to restore focus when the modal unmounts.
+     */
+    componentWillUnmount(): void;
+    /**
+     * Restores focus to the element that was focused before the modal opened.
+     */
+    private restoreFocus;
+    /**
+     * Callback ref to capture the Modal DOM element.
+     * Triggers initial focus setting when the element mounts.
+     */
+    private setModalRef;
+    /**
+     * Sets initial focus within the modal.
+     * Tries to focus the header (first child) first, then the first interactive element, or falls back to the container.
+     */
+    private setInitialFocus;
+    /**
+     * Lifecycle method to handle Modal updates.
+     * Manages opening/closing logic via LayerManager and focus preservation.
+     */
     getSnapshotBeforeUpdate(prevProps: ModalProps): void;
-    render(): import("@emotion/react/jsx-runtime").JSX.Element;
+    /**
+     * Renders the Modal component via the LayerManager portal.
+     */
+    render(): import("@emotion/react/jsx-runtime").JSX.Element | null;
 }

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

@@ -1,49 +1,51 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from '@emotion/react/jsx-runtime';
 import React from 'react';
-import PropTypes from 'prop-types';
-import LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';
-export { Header as ModalHeader, Body as ModalBody, Footer as ModalFooter, } from '../../shared/styles';
-import { DialogContainer as ModalContainer } from '../Dialog/Dialog';
+import LayerManager, { LAYER_POSITION } from '../../shared/LayerManager.js';
+import { DialogContainer } from '../Dialog/Dialog.js';
+
 class Modal extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            open: false,
-        };
-        this.onClose = () => {
-            this.setState({
-                open: false,
-            });
-            this.props.onClose && this.props.onClose();
-            this.closeCallback = null;
-            this.layer = null;
-        };
-    }
-    static getDerivedStateFromProps(props) {
+    /**
+     * Syncs state with props.
+     */ static getDerivedStateFromProps(props) {
         if (props.open) {
             return {
-                open: true,
+                open: true
             };
         }
         return null;
     }
-    getSnapshotBeforeUpdate(prevProps) {
-        const _a = this.props, { open, closeOnEsc, closeOnOverlayClick, children } = _a, rest = __rest(_a, ["open", "closeOnEsc", "closeOnOverlayClick", "children"]);
+    /**
+     * Lifecycle method to save the currently focused element when the modal mounts while open.
+     */ componentDidMount() {
+        if (this.props.open) {
+            this.lastFocusedElement = document.activeElement;
+        }
+    }
+    /**
+     * Lifecycle method to restore focus when the modal unmounts.
+     */ componentWillUnmount() {
+        if (this.props.open) {
+            this.restoreFocus();
+        }
+        // Clean up layer references
+        if (this.closeCallback) {
+            this.closeCallback();
+            this.closeCallback = undefined;
+        }
+        this.layer = undefined;
+    }
+    /**
+     * Lifecycle method to handle Modal updates.
+     * Manages opening/closing logic via LayerManager and focus preservation.
+     */ getSnapshotBeforeUpdate(prevProps) {
+        const { open, closeOnEsc, closeOnOverlayClick, children, ...rest } = this.props;
         if (prevProps.open && !open) {
-            this.closeCallback && this.closeCallback();
+            this.closeCallback?.();
+            this.restoreFocus();
         }
         if (!prevProps.open && open) {
+            // Save current focus
+            this.lastFocusedElement = document.activeElement;
             this.layer = LayerManager.renderLayer({
                 overlay: true,
                 exitDelay: 300,
@@ -51,33 +53,130 @@ class Modal extends React.Component {
                 closeCallback: this.onClose,
                 closeOnEsc: closeOnEsc,
                 closeOnOverlayClick: closeOnOverlayClick,
-                component: (_jsx(ModalContainer, Object.assign({}, rest, { onClick: e => e.stopPropagation(), elevated: true, children: children })))
+                component: /*#__PURE__*/ jsx(DialogContainer, {
+                    ...rest,
+                    ref: this.setModalRef,
+                    role: "dialog",
+                    "aria-modal": "true",
+                    tabIndex: -1,
+                    onKeyDown: this.handleKeyDown,
+                    onClick: (e)=>e.stopPropagation(),
+                    elevated: true,
+                    children: children
+                })
             });
             this.closeCallback = this.layer[1];
             this.forceUpdate();
         }
     }
-    render() {
+    /**
+     * Renders the Modal component via the LayerManager portal.
+     */ render() {
         if (this.state.open && this.layer) {
             const [Component] = this.layer;
-            return _jsx(Component, {});
+            return /*#__PURE__*/ jsx(Component, {});
         }
         return null;
     }
+    constructor(...args){
+        super(...args), this.state = {
+            open: false
+        }, /**
+     * Internal close handler.
+     * Restores focus and calls the external onClose callback.
+     */ this.onClose = ()=>{
+            this.restoreFocus();
+            this.setState({
+                open: false
+            });
+            this.props.onClose?.();
+            this.closeCallback = undefined;
+            this.layer = undefined;
+        }, this.lastFocusedElement = null, this.modalRef = /*#__PURE__*/ React.createRef(), /**
+     * Retrieves all focusable elements within the modal.
+     */ this.getFocusableElements = ()=>{
+            if (!this.modalRef.current) return [];
+            return Array.from(this.modalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'));
+        }, /**
+     * Handles keydown events to implement the focus trap.
+     * Traps Tab and Shift+Tab within the modal.
+     */ this.handleKeyDown = (e)=>{
+            if (e.key === 'Tab') {
+                const focusableElements = this.getFocusableElements();
+                if (focusableElements.length === 0) return;
+                const firstElement = focusableElements[0];
+                const lastElement = focusableElements[focusableElements.length - 1];
+                if (e.shiftKey) {
+                    if (document.activeElement === firstElement) {
+                        lastElement.focus();
+                        e.preventDefault();
+                    }
+                } else {
+                    if (document.activeElement === lastElement) {
+                        firstElement.focus();
+                        e.preventDefault();
+                    }
+                }
+            }
+        }, /**
+     * Restores focus to the element that was focused before the modal opened.
+     */ this.restoreFocus = ()=>{
+            if (this.lastFocusedElement) {
+                // Check if the element is still in the document
+                const elementToBeFocused = this.lastFocusedElement;
+                this.lastFocusedElement = null;
+                setTimeout(()=>{
+                    if (document.body.contains(elementToBeFocused)) {
+                        elementToBeFocused.focus();
+                    }
+                }, 100);
+            }
+        }, /**
+     * Callback ref to capture the Modal DOM element.
+     * Triggers initial focus setting when the element mounts.
+     */ this.setModalRef = (node)=>{
+            // Update ref
+            this.modalRef.current = node;
+            if (node) {
+                // Set initial focus when the node is mounted
+                this.setInitialFocus(node);
+            }
+            if (this.props.forwardRef) {
+                try {
+                    this.props.forwardRef.current = node;
+                } catch (e) {
+                    console.warn(e);
+                }
+            }
+        }, /**
+     * Sets initial focus within the modal.
+     * Tries to focus the header (first child) first, then the first interactive element, or falls back to the container.
+     */ this.setInitialFocus = (root)=>{
+            // Try to find the header (assumed to be the first child)
+            const firstChild = root.firstElementChild;
+            if (firstChild) {
+                // Ensure it's focusable
+                if (firstChild.getAttribute('tabindex') === null) {
+                    firstChild.setAttribute('tabindex', '-1');
+                }
+                firstChild.focus();
+                return;
+            }
+            // Fallback to focusable elements
+            const focusableElements = this.getFocusableElements();
+            if (focusableElements.length > 0) {
+                focusableElements[0].focus();
+            } else {
+                // Fallback to container
+                root.focus();
+            }
+        };
+    }
 }
-Modal.propTypes = {
-    /** Opens the modal */
-    open: PropTypes.bool.isRequired,
-    /** Closes the modal on esc */
-    closeOnEsc: PropTypes.bool,
-    /** Closes the modal on overlay click */
-    closeOnOverlayClick: PropTypes.bool,
-    /** Call back function called when the modal closes. */
-    onClose: PropTypes.func,
-};
 Modal.defaultProps = {
     closeOnEsc: true,
-    closeOnOverlayClick: true,
+    closeOnOverlayClick: true
 };
-export default Modal;
-//# sourceMappingURL=Modal.js.map
+
+export { Modal as default };
+//# sourceMappingURL=Modal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React from 'react';\nimport LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';\nexport {\n    Header as ModalHeader,\n    Body as ModalBody,\n    Footer as ModalFooter,\n} from '../../shared/styles';\nimport { DialogContainer as ModalContainer } from '../Dialog/Dialog';\n\ntype ModalProps = {\n    /** Opens the modal */\n    open: boolean;\n    /** Closes the modal on esc */\n    closeOnEsc?: boolean;\n    /** Closes the modal on overlay click */\n    closeOnOverlayClick?: boolean;\n    /** Call back function called when the modal closes. */\n    onClose?: () => void;\n    /** Ref forwarded to the modal container */\n    forwardRef?: React.Ref<HTMLDivElement>;\n} & React.HTMLAttributes<HTMLDivElement>;\n\ninterface ModalState {\n    open: boolean;\n}\n\n/**\n * Modal component\n *\n * A dialog window that sits on top of the main application content.\n * It disrupts the user's workflow to demand attention for a critical task or decision.\n *\n * Accessibility:\n * - Implements ARIA `role=\"dialog\"` and `aria-modal=\"true\"`.\n * - Traps focus effectively within the modal while open.\n * - Restores focus to the triggering element upon closure.\n * - Supports closing via ESC key and overlay click.\n */\nexport default class Modal extends React.Component<\n    React.PropsWithChildren<ModalProps>,\n    ModalState\n> {\n    state = {\n        open: false,\n    };\n\n    static defaultProps = {\n        closeOnEsc: true,\n        closeOnOverlayClick: true,\n    };\n\n    /**\n     * Syncs state with props.\n     */\n    static getDerivedStateFromProps(props: ModalProps) {\n        if (props.open) {\n            return {\n                open: true,\n            };\n        }\n        return null;\n    }\n\n    private layer?: ReturnType<typeof LayerManager.renderLayer>;\n\n    private closeCallback?: (resp?: unknown) => void;\n\n    /**\n     * Internal close handler.\n     * Restores focus and calls the external onClose callback.\n     */\n    private onClose = () => {\n        this.restoreFocus();\n        this.setState({\n            open: false,\n        });\n        this.props.onClose?.();\n        this.closeCallback = undefined;\n        this.layer = undefined;\n    };\n\n    private lastFocusedElement: HTMLElement | null = null;\n    private modalRef = React.createRef<HTMLDivElement>();\n\n    /**\n     * Retrieves all focusable elements within the modal.\n     */\n    private getFocusableElements = (): HTMLElement[] => {\n        if (!this.modalRef.current) return [];\n        return Array.from(\n            this.modalRef.current.querySelectorAll(\n                'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n            ),\n        ) as HTMLElement[];\n    };\n\n    /**\n     * Handles keydown events to implement the focus trap.\n     * Traps Tab and Shift+Tab within the modal.\n     */\n    private handleKeyDown = (e: React.KeyboardEvent) => {\n        if (e.key === 'Tab') {\n            const focusableElements = this.getFocusableElements();\n            if (focusableElements.length === 0) return;\n\n            const firstElement = focusableElements[0];\n            const lastElement = focusableElements[focusableElements.length - 1];\n\n            if (e.shiftKey) {\n                if (document.activeElement === firstElement) {\n                    lastElement.focus();\n                    e.preventDefault();\n                }\n            } else {\n                if (document.activeElement === lastElement) {\n                    firstElement.focus();\n                    e.preventDefault();\n                }\n            }\n        }\n    };\n\n    /**\n     * Lifecycle method to save the currently focused element when the modal mounts while open.\n     */\n    componentDidMount() {\n        if (this.props.open) {\n            this.lastFocusedElement = document.activeElement as HTMLElement;\n        }\n    }\n\n    /**\n     * Lifecycle method to restore focus when the modal unmounts.\n     */\n    componentWillUnmount() {\n        if (this.props.open) {\n            this.restoreFocus();\n        }\n        // Clean up layer references\n        if (this.closeCallback) {\n            this.closeCallback();\n            this.closeCallback = undefined;\n        }\n        this.layer = undefined;\n    }\n\n    /**\n     * Restores focus to the element that was focused before the modal opened.\n     */\n    private restoreFocus = () => {\n        if (this.lastFocusedElement) {\n            // Check if the element is still in the document\n            const elementToBeFocused = this.lastFocusedElement;\n            this.lastFocusedElement = null;\n            setTimeout(() => {\n                if (document.body.contains(elementToBeFocused)) {\n                    elementToBeFocused.focus();\n                }\n            }, 100);\n        }\n    };\n\n    /**\n     * Callback ref to capture the Modal DOM element.\n     * Triggers initial focus setting when the element mounts.\n     */\n    private setModalRef = (node: HTMLDivElement | null) => {\n        // Update ref\n        (this.modalRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n\n        if (node) {\n            // Set initial focus when the node is mounted\n            this.setInitialFocus(node);\n        }\n\n        if (this.props.forwardRef) {\n            try {\n                (this.props.forwardRef as React.MutableRefObject<HTMLDivElement | null>).current =\n                    node;\n            } catch (e) {\n                console.warn(e);\n            }\n        }\n    };\n\n    /**\n     * Sets initial focus within the modal.\n     * Tries to focus the header (first child) first, then the first interactive element, or falls back to the container.\n     */\n    private setInitialFocus = (root: HTMLElement) => {\n        // Try to find the header (assumed to be the first child)\n        const firstChild = root.firstElementChild as HTMLElement;\n        if (firstChild) {\n            // Ensure it's focusable\n            if (firstChild.getAttribute('tabindex') === null) {\n                firstChild.setAttribute('tabindex', '-1');\n            }\n            firstChild.focus();\n            return;\n        }\n\n        // Fallback to focusable elements\n        const focusableElements = this.getFocusableElements();\n        if (focusableElements.length > 0) {\n            focusableElements[0].focus();\n        } else {\n            // Fallback to container\n            root.focus();\n        }\n    };\n\n    /**\n     * Lifecycle method to handle Modal updates.\n     * Manages opening/closing logic via LayerManager and focus preservation.\n     */\n    getSnapshotBeforeUpdate(prevProps: ModalProps) {\n        const { open, closeOnEsc, closeOnOverlayClick, children, ...rest } = this.props;\n\n        if (prevProps.open && !open) {\n            this.closeCallback?.();\n            this.restoreFocus();\n        }\n\n        if (!prevProps.open && open) {\n            // Save current focus\n            this.lastFocusedElement = document.activeElement as HTMLElement;\n\n            this.layer = LayerManager.renderLayer({\n                overlay: true,\n                exitDelay: 300,\n                position: LAYER_POSITION.DIALOG,\n                closeCallback: this.onClose,\n                closeOnEsc: closeOnEsc,\n                closeOnOverlayClick: closeOnOverlayClick,\n                component: (\n                    <ModalContainer\n                        {...rest}\n                        ref={this.setModalRef}\n                        role=\"dialog\"\n                        aria-modal=\"true\"\n                        tabIndex={-1}\n                        onKeyDown={this.handleKeyDown}\n                        onClick={(e) => e.stopPropagation()}\n                        elevated\n                    >\n                        {children}\n                    </ModalContainer>\n                ),\n            });\n            this.closeCallback = this.layer[1];\n            this.forceUpdate();\n        }\n    }\n\n    /**\n     * Renders the Modal component via the LayerManager portal.\n     */\n    render() {\n        if (this.state.open && this.layer) {\n            const [Component] = this.layer;\n            return <Component />;\n        }\n\n        return null;\n    }\n}\n"],"names":["Modal","React","Component","getDerivedStateFromProps","props","open","componentDidMount","lastFocusedElement","document","activeElement","componentWillUnmount","restoreFocus","closeCallback","undefined","layer","getSnapshotBeforeUpdate","prevProps","closeOnEsc","closeOnOverlayClick","children","rest","LayerManager","renderLayer","overlay","exitDelay","position","LAYER_POSITION","DIALOG","onClose","component","_jsx","ModalContainer","ref","setModalRef","role","aria-modal","tabIndex","onKeyDown","handleKeyDown","onClick","e","stopPropagation","elevated","forceUpdate","render","state","setState","modalRef","createRef","getFocusableElements","current","Array","from","querySelectorAll","key","focusableElements","length","firstElement","lastElement","shiftKey","focus","preventDefault","elementToBeFocused","setTimeout","body","contains","node","setInitialFocus","forwardRef","console","warn","root","firstChild","firstElementChild","getAttribute","setAttribute","defaultProps"],"mappings":"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"}

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

@@ -1,36 +1,41 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import { NOTIFICATION_POSITION, NOTIFICATION_TYPE, NotificationOptions } from './types';
-type NotificationProps = PropTypes.InferProps<typeof StoryProps.propTypes>;
-/** This component is only used for storybook documentation */
-export declare class StoryProps extends React.Component<NotificationProps> {
-    static propTypes: {
-        /** Title of the notification */
-        title: PropTypes.Validator<string>;
-        /** Body of the notification */
-        description: PropTypes.Validator<string>;
-        /** Id for the notification, helps in de-duplication. */
-        id: PropTypes.Requireable<string>;
-        /** Duration for the notification in milliseconds */
-        duration: PropTypes.Requireable<number>;
-        /** Creates sticky notification */
-        sticky: PropTypes.Requireable<boolean>;
-        /** Type of notification */
-        type: PropTypes.Requireable<NOTIFICATION_TYPE>;
-        /** Action button text */
-        buttonText: PropTypes.Requireable<string>;
-        /** Action button click callback */
-        buttonClick: PropTypes.Requireable<(...args: any[]) => any>;
-        /** Notification close callback. */
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static defaultProps: {
-        duration: number;
-        sticky: boolean;
-        type: NOTIFICATION_TYPE;
-    };
-    render(): React.ReactNode;
-}
+type NotificationProps = {
+    /** Title of the notification */
+    title: string;
+    /** Body of the notification */
+    description: string;
+    /** Id for the notification, helps in de-duplication. */
+    id?: string;
+    /**
+     * Duration for the notification in milliseconds
+     * @default 5000
+     */
+    duration?: number;
+    /**
+     * Creates sticky notification
+     * @default false
+     */
+    sticky?: boolean;
+    /**
+     * Type of notification
+     * @default NOTIFICATION_TYPE.INFO
+     */
+    type?: NOTIFICATION_TYPE;
+    /** Action button text */
+    buttonText?: string;
+    /** Action button click callback */
+    buttonClick?: () => void;
+    /** Notification close callback. */
+    onClose?: () => void;
+    /** Aria label for the close button on the notification. Defaults to "Close notification" */
+    closeButtonAriaLabel?: string;
+};
+/**
+ * This dummy component is used to extract props for documentation in Storybook.
+ * @param props
+ * @returns
+ */
+export declare function StoryProps(props: NotificationProps): null;
 /** Notification class */
 declare class Notification {
     /** Helps in maintaining single instance for different positions. */
@@ -38,21 +43,23 @@ declare class Notification {
     /**
      * Adds a notification
      *
-     * @param position
-     * @param options
+     * @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
      */
-    add: (position: NOTIFICATION_POSITION, options: NotificationOptions) => string;
+    add: (position: NOTIFICATION_POSITION, options: NotificationOptions, ariaLabel?: string) => Promise<string>;
     /**
      * Removes a notification
      *
-     * @param position
-     * @param id
+     * @param position - The position of the notification container
+     * @param id - The unique ID of the notification to remove
      */
     remove: (position: NOTIFICATION_POSITION, id: string) => void;
     /**
-     * Destroys entire stack of notifications.
+     * Destroys entire stack of notifications at a position.
+     * Unmounts the React root and cleans up DOM elements.
      *
-     * @param position
+     * @param position - The position of the notification container to destroy
      */
     destroy: (position: NOTIFICATION_POSITION) => void;
 }