no-frills-ui 0.0.14-alpha.5 → 0.0.14-alpha.7

package/lib-esm/components/Menu/MenuItem.js

@@ -1,57 +1,42 @@
-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, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 import React, { useContext } from 'react';
 import styled from '@emotion/styled';
-import { getThemeValue, THEME_NAME } from '../../shared/constants';
-import Checkbox from '../Input/Checkbox';
-import MenuContext from './MenuContext';
-const Container = styled.button `
-    font-weight: ${(props) => (props.selected ? 'bold' : 'normal')};
-    padding: 8px 6px;
-    border: none;
-    background-color: transparent;
-    font-size: 16px;
-    border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
-    min-height: 41px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    position: relative;
-    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};
-
-    &:hover,
-    &:focus,
-    &:focus-within {
-        background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
-    }
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
+import Checkbox from '../Input/Checkbox.js';
+import MenuContext from './MenuContext.js';
 
-    & > label {
-        margin: 0 4px 0 0;
-    }
-`;
-const MenuItemInner = (props, ref) => {
-    var _a, _b;
+const Container = /*#__PURE__*/ styled("button", {
+    target: "ea4jlaf0",
+    label: "Container"
+})("font-weight:", (props)=>props.selected ? 'bold' : 'normal', ";padding:8px;border:none;border-left:4px solid\n        ", (props)=>props.selected && !props.multiselect ? getThemeValue(THEME_NAME.TEXT_COLOR_DARK) : 'transparent', ";background-color:transparent;font-size:16px;border-bottom:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";min-height:41px;display:flex;align-items:center;cursor:pointer;position:relative;color:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";&:hover,&:focus,&:focus-within{background-color:", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";}& > label{margin:0 4px 0 0;}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbm8tZnJpbGxzLXVpL25vLWZyaWxscy11aS9zcmMvY29tcG9uZW50cy9NZW51L01lbnVJdGVtLnRzeCIsInNvdXJjZXMiOlsiL2hvbWUvcnVubmVyL3dvcmsvbm8tZnJpbGxzLXVpL25vLWZyaWxscy11aS9zcmMvY29tcG9uZW50cy9NZW51L01lbnVJdGVtLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgU3ludGhldGljRXZlbnQsIHVzZUNvbnRleHQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBnZXRUaGVtZVZhbHVlLCBUSEVNRV9OQU1FIH0gZnJvbSAnLi4vLi4vc2hhcmVkL2NvbnN0YW50cyc7XG5pbXBvcnQgQ2hlY2tib3ggZnJvbSAnLi4vSW5wdXQvQ2hlY2tib3gnO1xuaW1wb3J0IE1lbnVDb250ZXh0LCB7IE1lbnVDb250ZXh0VHlwZSB9IGZyb20gJy4vTWVudUNvbnRleHQnO1xuXG5pbnRlcmZhY2UgTWVudUl0ZW1Qcm9wczxUPiB7XG4gICAgLyoqIFZhbHVlIG9mIHRoZSBlbGVtZW50ICovXG4gICAgdmFsdWU6IFQ7XG59XG5cbmNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5idXR0b248eyBzZWxlY3RlZDogYm9vbGVhbjsgbXVsdGlzZWxlY3Q/OiBib29sZWFuIH0+YFxuICAgIGZvbnQtd2VpZ2h0OiAkeyhwcm9wcykgPT4gKHByb3BzLnNlbGVjdGVkID8gJ2JvbGQnIDogJ25vcm1hbCcpfTtcbiAgICBwYWRkaW5nOiA4cHg7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJvcmRlci1sZWZ0OiA0cHggc29saWRcbiAgICAgICAgJHsocHJvcHMpID0+XG4gICAgICAgICAgICBwcm9wcy5zZWxlY3RlZCAmJiAhcHJvcHMubXVsdGlzZWxlY3RcbiAgICAgICAgICAgICAgICA/IGdldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5URVhUX0NPTE9SX0RBUkspXG4gICAgICAgICAgICAgICAgOiAndHJhbnNwYXJlbnQnfTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICBmb250LXNpemU6IDE2cHg7XG4gICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLkJPUkRFUl9MSUdIVF9DT0xPUil9O1xuICAgIG1pbi1oZWlnaHQ6IDQxcHg7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlRFWFRfQ09MT1JfREFSSyl9O1xuXG4gICAgJjpob3ZlcixcbiAgICAmOmZvY3VzLFxuICAgICY6Zm9jdXMtd2l0aGluIHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuQk9SREVSX0xJR0hUX0NPTE9SKX07XG4gICAgfVxuXG4gICAgJiA+IGxhYmVsIHtcbiAgICAgICAgbWFyZ2luOiAwIDRweCAwIDA7XG4gICAgfVxuYDtcblxuY29uc3QgTWVudUl0ZW1Jbm5lciA9IDxULD4oXG4gICAgcHJvcHM6IE1lbnVJdGVtUHJvcHM8VD4gJiBSZWFjdC5Qcm9wc1dpdGhDaGlsZHJlbixcbiAgICByZWY6IFJlYWN0LlJlZjxIVE1MQnV0dG9uRWxlbWVudD4sXG4pID0+IHtcbiAgICBjb25zdCBjb250ZXh0ID0gdXNlQ29udGV4dChNZW51Q29udGV4dCkgYXMgTWVudUNvbnRleHRUeXBlPFQ+O1xuICAgIGNvbnN0IHsgdmFsdWUsIGNoaWxkcmVuLCAuLi5yZXN0IH0gPSBwcm9wcztcbiAgICBjb25zdCBjbGlja0hhbmRsZXIgPSAoZTogU3ludGhldGljRXZlbnQpID0+IHtcbiAgICAgICAgZS5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICAgICAgY29udGV4dC51cGRhdGVWYWx1ZSh2YWx1ZSBhcyBUICYgVFtdKTtcbiAgICB9O1xuXG4gICAgY29uc3Qgc2VsZWN0ZWQgPSBjb250ZXh0Lm11bHRpU2VsZWN0XG4gICAgICAgID8gY29udGV4dC52YWx1ZT8uaW5jbHVkZXM/Lih2YWx1ZSlcbiAgICAgICAgOiBjb250ZXh0LnZhbHVlID09PSB2YWx1ZTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDxDb250YWluZXJcbiAgICAgICAgICAgIHsuLi5yZXN0fVxuICAgICAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgIHJvbGU9XCJvcHRpb25cIlxuICAgICAgICAgICAgYXJpYS1zZWxlY3RlZD17c2VsZWN0ZWR9XG4gICAgICAgICAgICBzZWxlY3RlZD17c2VsZWN0ZWR9XG4gICAgICAgICAgICBvbkNsaWNrPXtjbGlja0hhbmRsZXJ9XG4gICAgICAgICAgICBtdWx0aXNlbGVjdD17Y29udGV4dC5tdWx0aVNlbGVjdCA/IHRydWUgOiB1bmRlZmluZWR9XG4gICAgICAgID5cbiAgICAgICAgICAgIHtjb250ZXh0Lm11bHRpU2VsZWN0ICYmIChcbiAgICAgICAgICAgICAgICA8Q2hlY2tib3hcbiAgICAgICAgICAgICAgICAgICAgY2hlY2tlZD17c2VsZWN0ZWR9XG4gICAgICAgICAgICAgICAgICAgIHJlYWRPbmx5XG4gICAgICAgICAgICAgICAgICAgIHRhYkluZGV4PXstMX1cbiAgICAgICAgICAgICAgICAgICAgb25DbGljaz17KGUpID0+IGUuc3RvcFByb3BhZ2F0aW9uKCl9XG4gICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICl9XG4gICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIDwvQ29udGFpbmVyPlxuICAgICk7XG59O1xuXG5jb25zdCBNZW51SXRlbSA9IFJlYWN0LmZvcndhcmRSZWYoTWVudUl0ZW1Jbm5lcikgYXMgPFQ+KFxuICAgIHByb3BzOiBNZW51SXRlbVByb3BzPFQ+ICYgUmVhY3QuUHJvcHNXaXRoQ2hpbGRyZW4gJiB7IHJlZj86IFJlYWN0LlJlZjxIVE1MQnV0dG9uRWxlbWVudD4gfSxcbikgPT4gUmV0dXJuVHlwZTx0eXBlb2YgTWVudUl0ZW1Jbm5lcj47XG5cbmV4cG9ydCBkZWZhdWx0IE1lbnVJdGVtO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVdrQiJ9 */");
+const MenuItemInner = (props, ref)=>{
     const context = useContext(MenuContext);
-    const { value, children } = props, rest = __rest(props, ["value", "children"]);
-    const clickHandler = (e) => {
+    const { value, children, ...rest } = props;
+    const clickHandler = (e)=>{
         e.stopPropagation();
         context.updateValue(value);
     };
-    const selected = context.multiSelect
-        ? (_b = (_a = context.value) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, value)
-        : context.value === value;
-    return (_jsxs(Container, Object.assign({}, rest, { ref: ref, type: "button", role: "option", "aria-selected": selected, selected: selected, onClick: clickHandler, children: [context.multiSelect && (_jsx(Checkbox, { checked: selected, readOnly: true, tabIndex: -1, onClick: (e) => e.stopPropagation() })), children] })));
+    const selected = context.multiSelect ? context.value?.includes?.(value) : context.value === value;
+    return /*#__PURE__*/ jsxs(Container, {
+        ...rest,
+        ref: ref,
+        type: "button",
+        role: "option",
+        "aria-selected": selected,
+        selected: selected,
+        onClick: clickHandler,
+        multiselect: context.multiSelect ? true : undefined,
+        children: [
+            context.multiSelect && /*#__PURE__*/ jsx(Checkbox, {
+                checked: selected,
+                readOnly: true,
+                tabIndex: -1,
+                onClick: (e)=>e.stopPropagation()
+            }),
+            children
+        ]
+    });
 };
-const MenuItem = React.forwardRef(MenuItemInner);
-export default MenuItem;
-//# sourceMappingURL=MenuItem.js.map
+const MenuItem = /*#__PURE__*/ React.forwardRef(MenuItemInner);
+
+export { MenuItem as default };

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

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

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

@@ -101,4 +101,3 @@ export default class Modal extends React.Component<React.PropsWithChildren<Modal
      */
     render(): import("@emotion/react/jsx-runtime").JSX.Element;
 }
-//# sourceMappingURL=Modal.d.ts.map

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

@@ -1,81 +1,116 @@
-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';
+
 const modalPropTypes = {
-    /** 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,
+    /** 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 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.
- */
 class Modal extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            open: false,
-        };
-        /**
-         * Internal close handler.
-         * Restores focus and calls the external onClose callback.
-         */
-        this.onClose = () => {
-            var _a, _b;
+    /**
+     * Syncs state with props.
+     */ static getDerivedStateFromProps(props) {
+        if (props.open) {
+            return {
+                open: true
+            };
+        }
+        return null;
+    }
+    /**
+     * 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 = null;
+        }
+        this.layer = null;
+    }
+    /**
+     * 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.restoreFocus();
+        }
+        if (!prevProps.open && open) {
+            // Save current focus
+            this.lastFocusedElement = document.activeElement;
+            this.layer = LayerManager.renderLayer({
+                overlay: true,
+                exitDelay: 300,
+                position: LAYER_POSITION.DIALOG,
+                closeCallback: this.onClose,
+                closeOnEsc: closeOnEsc,
+                closeOnOverlayClick: closeOnOverlayClick,
+                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();
+        }
+    }
+    /**
+     * Renders the Modal component via the LayerManager portal.
+     */ render() {
+        if (this.state.open && this.layer) {
+            const [Component] = this.layer;
+            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,
+                open: false
             });
-            (_b = (_a = this.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this.props.onClose?.();
             this.closeCallback = null;
             this.layer = null;
-        };
-        this.lastFocusedElement = null;
-        this.modalRef = React.createRef();
-        /**
-         * Retrieves all focusable elements within the modal.
-         */
-        this.getFocusableElements = () => {
-            if (!this.modalRef.current)
-                return [];
+        }, 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) => {
+        }, /**
+     * 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;
+                if (focusableElements.length === 0) return;
                 const firstElement = focusableElements[0];
                 const lastElement = focusableElements[focusableElements.length - 1];
                 if (e.shiftKey) {
@@ -83,47 +118,40 @@ class Modal extends React.Component {
                         lastElement.focus();
                         e.preventDefault();
                     }
-                }
-                else {
+                } else {
                     if (document.activeElement === lastElement) {
                         firstElement.focus();
                         e.preventDefault();
                     }
                 }
             }
-        };
-        /**
-         * Restores focus to the element that was focused before the modal opened.
-         */
-        this.restoreFocus = () => {
+        }, /**
+     * 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(() => {
+                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) => {
+        }, /**
+     * 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);
             }
-        };
-        /**
-         * 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) => {
+        }, /**
+     * 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) {
@@ -138,82 +166,17 @@ class Modal extends React.Component {
             const focusableElements = this.getFocusableElements();
             if (focusableElements.length > 0) {
                 focusableElements[0].focus();
-            }
-            else {
+            } else {
                 // Fallback to container
                 root.focus();
             }
         };
     }
-    /**
-     * Syncs state with props.
-     */
-    static getDerivedStateFromProps(props) {
-        if (props.open) {
-            return {
-                open: true,
-            };
-        }
-        return null;
-    }
-    /**
-     * 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();
-        }
-    }
-    /**
-     * Lifecycle method to handle Modal updates.
-     * Manages opening/closing logic via LayerManager and focus preservation.
-     */
-    getSnapshotBeforeUpdate(prevProps) {
-        var _a;
-        const _b = this.props, { open, closeOnEsc, closeOnOverlayClick, children } = _b, rest = __rest(_b, ["open", "closeOnEsc", "closeOnOverlayClick", "children"]);
-        if (prevProps.open && !open) {
-            (_a = this.closeCallback) === null || _a === void 0 ? void 0 : _a.call(this);
-            this.restoreFocus();
-        }
-        if (!prevProps.open && open) {
-            // Save current focus
-            this.lastFocusedElement = document.activeElement;
-            this.layer = LayerManager.renderLayer({
-                overlay: true,
-                exitDelay: 300,
-                position: LAYER_POSITION.DIALOG,
-                closeCallback: this.onClose,
-                closeOnEsc: closeOnEsc,
-                closeOnOverlayClick: closeOnOverlayClick,
-                component: (_jsx(ModalContainer, Object.assign({}, 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();
-        }
-    }
-    /**
-     * Renders the Modal component via the LayerManager portal.
-     */
-    render() {
-        if (this.state.open && this.layer) {
-            const [Component] = this.layer;
-            return _jsx(Component, {});
-        }
-        return null;
-    }
 }
 Modal.propTypes = modalPropTypes;
 Modal.defaultProps = {
     closeOnEsc: true,
-    closeOnOverlayClick: true,
+    closeOnOverlayClick: true
 };
-export default Modal;
-//# sourceMappingURL=Modal.js.map
+
+export { Modal as default };

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

@@ -1,2 +1 @@
 export { default as Modal, ModalHeader, ModalBody, ModalFooter } from './Modal';
-//# sourceMappingURL=index.d.ts.map

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

@@ -63,4 +63,3 @@ declare class Notification {
 /** Export a singleton instance */
 declare const _default: Notification;
 export default _default;
-//# sourceMappingURL=Notification.d.ts.map

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

@@ -1,72 +1,57 @@
-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 { flushSync } from 'react-dom';
 import { createRoot } from 'react-dom/client';
-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 {
+import LayerManager, { LAYER_POSITION } from '../../shared/LayerManager.js';
+import NotificationManager from './NotificationManager.js';
+import { NOTIFICATION_POSITION, NOTIFICATION_TYPE } from './types.js';
+
+/** This component is only used for storybook documentation */ 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([
+    /** 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,
+        NOTIFICATION_TYPE.DANGER
     ]),
-    /** Action button text */
-    buttonText: PropTypes.string,
-    /** Action button click callback */
-    buttonClick: PropTypes.func,
-    /** Notification close callback. */
-    onClose: PropTypes.func,
-    /** Aria label for the close button on the notification. Defaults to "Close notification" */
-    closeButtonAriaLabel: PropTypes.string,
+    /** Action button text */ buttonText: PropTypes.string,
+    /** Action button click callback */ buttonClick: PropTypes.func,
+    /** Notification close callback. */ onClose: PropTypes.func,
+    /** Aria label for the close button on the notification. Defaults to "Close notification" */ closeButtonAriaLabel: PropTypes.string
 };
 StoryProps.defaultProps = {
     duration: 5000,
     sticky: false,
-    type: NOTIFICATION_TYPE.INFO,
+    type: NOTIFICATION_TYPE.INFO
 };
-/** Maps notification position to layer position */
-const positionMap = {
+/** 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 - 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') => {
+     * 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)) {
-                /** Callback ref to capture the NotificationManager instance when it mounts */
-                const refCallback = (instance) => {
+                /** Callback ref to capture the NotificationManager instance when it mounts */ const refCallback = (instance)=>{
                     if (instance) {
                         const container = this.containers.get(position);
                         if (container) {
@@ -79,7 +64,12 @@ class Notification {
                     closeOnOverlayClick: false,
                     position: positionMap[position],
                     alwaysOnTop: true,
-                    component: (_jsx(NotificationManager, { ref: refCallback, position: position, onEmpty: () => this.destroy(position), ariaLabel: ariaLabel })),
+                    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');
@@ -88,11 +78,11 @@ class Notification {
                 this.containers.set(position, {
                     manager: null,
                     root,
-                    div,
+                    div
                 });
                 // Render the Component which will trigger the LayerManager's useEffect
-                flushSync(() => {
-                    root.render(_jsx(Component, {}));
+                flushSync(()=>{
+                    root.render(/*#__PURE__*/ jsx(Component, {}));
                 });
             }
             const container = this.containers.get(position);
@@ -100,8 +90,8 @@ class Notification {
                 return container.manager.add(options);
             }
             // If manager is not ready yet, wait a bit and retry
-            return new Promise((resolve) => {
-                setTimeout(() => {
+            return new Promise((resolve)=>{
+                setTimeout(()=>{
                     const container = this.containers.get(position);
                     if (container && container.manager) {
                         resolve(container.manager.add(options));
@@ -110,24 +100,22 @@ class Notification {
             });
         };
         /**
-         * 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) => {
+     * 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 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) => {
+     * 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();
@@ -139,6 +127,6 @@ class Notification {
         };
     }
 }
-/** Export a singleton instance */
-export default new Notification();
-//# sourceMappingURL=Notification.js.map
+/** Export a singleton instance */ var Notification$1 = new Notification();
+
+export { StoryProps, Notification$1 as default };

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

@@ -57,7 +57,10 @@ declare class NotificationManager extends React.Component<NotificationManagerPro
      * @param id
      */
     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;
-//# sourceMappingURL=NotificationManager.d.ts.map