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

package/lib-esm/components/Input/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../../../src/components/Input/Toggle.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst Switch = styled.label`\n    position: relative;\n    display: inline-flex;\n    margin: 5px 0;\n`;\n\nconst Input = styled.input`\n    position: absolute;\n    width: 0;\n    height: 0;\n    appearance: none;\n    margin: 0;\n\n    & + span {\n        position: relative;\n        cursor: pointer;\n        width: 30px;\n        height: 18px;\n        background-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};\n        transition: 0.4s;\n        border-radius: 10px;\n        padding: 0 3px;\n        margin: 0 10px 0 5px;\n    }\n    & + span:before {\n        position: absolute;\n        content: '';\n        height: 14px;\n        width: 14px;\n        left: 1px;\n        top: 1px;\n        border: 1px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n        border-radius: 50%;\n        background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n        transition: 0.4s;\n    }\n\n    /* checked */\n    &:checked + span {\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:checked + span:before {\n        transform: translateX(18px);\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /* focus */\n    &:enabled:focus + span:before {\n        box-shadow: 0 0 0 3px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /* hover */\n    &:enabled:hover ~ span {\n        cursor: pointer;\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /* disabled */\n    &:disabled ~ span {\n        color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n    }\n\n    &:disabled + span {\n        background-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};\n        cursor: not-allowed;\n    }\n\n    &:disabled + span:before {\n        background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n    }\n`;\n\ntype ToggleProps = {\n    /** Label for the field */\n    label?: string;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nfunction ToggleComponent(props: ToggleProps, ref: React.Ref<HTMLInputElement>) {\n    return (\n        <Switch>\n            <Input\n                {...props}\n                ref={ref}\n                type=\"checkbox\"\n                role=\"switch\"\n                aria-checked={props.checked}\n            />\n            <span></span>\n            <span>{props.label}</span>\n        </Switch>\n    );\n}\n\nconst Toggle = React.forwardRef(ToggleComponent);\nexport default Toggle;\n"],"names":["Switch","styled","Input","getThemeValue","THEME_NAME","LIGHT_GREY","DISABLED_BORDER","BACKGROUND","PRIMARY_LIGHT","PRIMARY","BORDER_LIGHT_COLOR","ToggleComponent","props","ref","_jsxs","_jsx","type","role","aria-checked","checked","span","label","Toggle","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,MAAAA,iBAASC,MAAAA,CAAAA,OAAAA,EAAAA;;;;AAMf,MAAMC,OAAAA,iBAAQD,MAAAA,CAAAA,OAAAA,EAAAA;;;qJAYcE,aAAAA,CAAcC,UAAAA,CAAWC,UAAU,CAAA,EAAA,+KAAA,EAanCF,aAAAA,CAAcC,WAAWE,eAAe,CAAA,EAAA,sCAAA,EAExCH,cAAcC,UAAAA,CAAWG,UAAU,2DAMnCJ,aAAAA,CAAcC,UAAAA,CAAWI,aAAa,CAAA,EAAA,oEAAA,EAK1CL,aAAAA,CAAcC,WAAWK,OAAO,CAAA,EAAA,uDAAA,EAKxBN,cAAcC,UAAAA,CAAWI,aAAa,qBAC9CL,aAAAA,CAAcC,UAAAA,CAAWK,OAAO,CAAA,EAAA,gDAAA,EAMvCN,aAAAA,CAAcC,WAAWK,OAAO,CAAA,EAAA,4BAAA,EAKhCN,cAAcC,UAAAA,CAAWE,eAAe,4CAI7BH,aAAAA,CAAcC,UAAAA,CAAWC,UAAU,CAAA,EAAA,iEAAA,EAKnCF,aAAAA,CAAcC,WAAWM,kBAAkB,CAAA,EAAA,gBAAA,EAC/CP,aAAAA,CAAcC,UAAAA,CAAWE,eAAe,CAAA,EAAA,IAAA,CAAA;AAShE,SAASK,eAAAA,CAAgBC,KAAkB,EAAEC,GAAgC,EAAA;AACzE,IAAA,qBACIC,IAAA,CAACd,MAAAA,EAAAA;;0BACGe,GAAA,CAACb,OAAAA,EAAAA;AACI,gBAAA,GAAGU,KAAK;gBACTC,GAAAA,EAAKA,GAAAA;gBACLG,IAAAA,EAAK,UAAA;gBACLC,IAAAA,EAAK,QAAA;AACLC,gBAAAA,cAAAA,EAAcN,MAAMO;;0BAExBJ,GAAA,CAACK,MAAAA,EAAAA,EAAAA,CAAAA;0BACDL,GAAA,CAACK,MAAAA,EAAAA;AAAMR,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMS;;;;AAGzB;AAEA,MAAMC,MAAAA,iBAASC,KAAAA,CAAMC,UAAU,CAACb,eAAAA;;;;"}
+{"version":3,"file":"Toggle.js","sources":["../../../src/components/Input/Toggle.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst Switch = styled.label`\n    position: relative;\n    display: inline-flex;\n    margin: 5px 0;\n`;\n\nconst Input = styled.input`\n    position: absolute;\n    width: 0;\n    height: 0;\n    appearance: none;\n    margin: 0;\n\n    & + span {\n        position: relative;\n        cursor: pointer;\n        width: 30px;\n        height: 18px;\n        background-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};\n        transition: 0.4s;\n        border-radius: 10px;\n        padding: 0 3px;\n        margin: 0 10px 0 5px;\n    }\n    & + span:before {\n        position: absolute;\n        content: '';\n        height: 14px;\n        width: 14px;\n        left: 1px;\n        top: 1px;\n        border: 1px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n        border-radius: 50%;\n        background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n        transition: 0.4s;\n    }\n\n    /* checked */\n    &:checked + span {\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:checked + span:before {\n        transform: translateX(18px);\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /* focus */\n    &:enabled:focus + span:before {\n        box-shadow: 0 0 0 3px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /* hover */\n    &:enabled:hover ~ span {\n        cursor: pointer;\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /* disabled */\n    &:disabled ~ span {\n        color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n    }\n\n    &:disabled + span {\n        background-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};\n        cursor: not-allowed;\n    }\n\n    &:disabled + span:before {\n        background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n    }\n`;\n\ntype ToggleProps = {\n    /** Label for the field */\n    label?: string;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\n/**\n * Toggle Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLInputElement\n */\nfunction ToggleComponent(props: ToggleProps, ref: React.Ref<HTMLInputElement>) {\n    return (\n        <Switch>\n            <Input\n                {...props}\n                ref={ref}\n                type=\"checkbox\"\n                role=\"switch\"\n                aria-checked={props.checked}\n            />\n            <span></span>\n            <span>{props.label}</span>\n        </Switch>\n    );\n}\n\nconst Toggle = React.forwardRef(ToggleComponent);\nexport default Toggle;\n"],"names":["Switch","styled","Input","getThemeValue","THEME_NAME","LIGHT_GREY","DISABLED_BORDER","BACKGROUND","PRIMARY_LIGHT","PRIMARY","BORDER_LIGHT_COLOR","ToggleComponent","props","ref","_jsxs","_jsx","type","role","aria-checked","checked","span","label","Toggle","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,MAAAA,iBAASC,MAAAA,CAAAA,OAAAA,EAAAA;;;;AAMf,MAAMC,OAAAA,iBAAQD,MAAAA,CAAAA,OAAAA,EAAAA;;;qJAYcE,aAAAA,CAAcC,UAAAA,CAAWC,UAAU,CAAA,EAAA,+KAAA,EAanCF,aAAAA,CAAcC,WAAWE,eAAe,CAAA,EAAA,sCAAA,EAExCH,cAAcC,UAAAA,CAAWG,UAAU,2DAMnCJ,aAAAA,CAAcC,UAAAA,CAAWI,aAAa,CAAA,EAAA,oEAAA,EAK1CL,aAAAA,CAAcC,WAAWK,OAAO,CAAA,EAAA,uDAAA,EAKxBN,cAAcC,UAAAA,CAAWI,aAAa,qBAC9CL,aAAAA,CAAcC,UAAAA,CAAWK,OAAO,CAAA,EAAA,gDAAA,EAMvCN,aAAAA,CAAcC,WAAWK,OAAO,CAAA,EAAA,4BAAA,EAKhCN,cAAcC,UAAAA,CAAWE,eAAe,4CAI7BH,aAAAA,CAAcC,UAAAA,CAAWC,UAAU,CAAA,EAAA,iEAAA,EAKnCF,aAAAA,CAAcC,WAAWM,kBAAkB,CAAA,EAAA,gBAAA,EAC/CP,aAAAA,CAAcC,UAAAA,CAAWE,eAAe,CAAA,EAAA,IAAA,CAAA;AAShE;;;;AAIC,IACD,SAASK,eAAAA,CAAgBC,KAAkB,EAAEC,GAAgC,EAAA;AACzE,IAAA,qBACIC,IAAA,CAACd,MAAAA,EAAAA;;0BACGe,GAAA,CAACb,OAAAA,EAAAA;AACI,gBAAA,GAAGU,KAAK;gBACTC,GAAAA,EAAKA,GAAAA;gBACLG,IAAAA,EAAK,UAAA;gBACLC,IAAAA,EAAK,QAAA;AACLC,gBAAAA,cAAAA,EAAcN,MAAMO;;0BAExBJ,GAAA,CAACK,MAAAA,EAAAA,EAAAA,CAAAA;0BACDL,GAAA,CAACK,MAAAA,EAAAA;AAAMR,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMS;;;;AAGzB;AAEA,MAAMC,MAAAA,iBAASC,KAAAA,CAAMC,UAAU,CAACb,eAAAA;;;;"}

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

@@ -5,7 +5,7 @@ import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 import MenuContext from './MenuContext.js';
 
 const MenuContainer = /*#__PURE__*/ styled("div", {
-    target: "e1nm0ogj0",
+    target: "e1qc23xy0",
     label: "MenuContainer"
 })("flex:1;display:flex;flex-direction:column;& div:last-child{border-bottom:none;}&:focus-within{box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}");
 /**
@@ -15,6 +15,11 @@ const MenuContainer = /*#__PURE__*/ styled("div", {
  * @template T - The type of value(s) in the menu.
  * @param props - The menu properties.
  * @param ref - The ref forwarded to the menu container.
+ */ /**
+ * Menu Component
+ * @template T - The type of value(s) in the menu.
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
  */ function MenuInner(props, ref) {
     const { multiSelect = false, onChange, value: propValue, children, ...rest } = props;
     // State holds either a single T or an array of T when multiSelect

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import React, { useState, ForwardedRef } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport MenuContext from './MenuContext';\n/**\n * Props for the Menu component.\n * @template T - The type of value(s) in the menu.\n */\ntype MenuProps<T> = {\n    /** Multiple Menu Items can be selected */\n    multiSelect?: boolean;\n    /** Value(s) selected */\n    value?: T | T[];\n    /** Callback when the selected value changes */\n    onChange?: (value: T | T[]) => void;\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nconst MenuContainer = styled.div`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n\n    & div:last-child {\n        border-bottom: none;\n    }\n\n    &:focus-within {\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n`;\n\n/**\n * Menu component that allows selection of items from a list.\n * Supports single and multi-select modes and keyboard navigation.\n *\n * @template T - The type of value(s) in the menu.\n * @param props - The menu properties.\n * @param ref - The ref forwarded to the menu container.\n */\nfunction MenuInner<T>(props: MenuProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n    const { multiSelect = false, onChange, value: propValue, children, ...rest } = props;\n    // State holds either a single T or an array of T when multiSelect\n    const [value, setValue] = useState<unknown | undefined>(propValue);\n\n    /**\n     * Updates the selected value(s).\n     * Handles both single and multi-select logic.\n     *\n     * @param {T} val - The value to select or deselect.\n     */\n    const updateValue = (val: unknown) => {\n        let newVal: unknown;\n        if (multiSelect) {\n            if (Array.isArray(value)) {\n                if (value.includes(val as unknown as T)) {\n                    newVal = (value as T[]).filter((item) => item !== val);\n                } else {\n                    newVal = [...(value as T[]), val];\n                }\n            } else {\n                newVal = [val];\n            }\n        } else {\n            newVal = val;\n        }\n\n        setValue(newVal as T | T[]);\n        onChange?.(newVal as T | T[]);\n    };\n\n    /**\n     * Handles keyboard navigation within the menu.\n     * Supports Arrow keys for navigation, and Enter/Space for selection.\n     *\n     * @param {React.KeyboardEvent} e - The keyboard event.\n     */\n    const handleKeyDown = (e: React.KeyboardEvent) => {\n        const target = e.target as HTMLElement;\n        const container = e.currentTarget as HTMLElement;\n        const items = Array.from(container.querySelectorAll('[role=\"option\"]')) as HTMLElement[];\n        const currentIndex = items.indexOf(target as HTMLElement);\n\n        let nextIndex;\n\n        switch (e.key) {\n            case 'ArrowDown':\n                e.preventDefault();\n                nextIndex = currentIndex + 1;\n                if (nextIndex >= items.length) nextIndex = 0;\n                items[nextIndex]?.focus();\n                break;\n            case 'ArrowUp':\n                e.preventDefault();\n                nextIndex = currentIndex - 1;\n                if (nextIndex < 0) nextIndex = items.length - 1;\n                items[nextIndex]?.focus();\n                break;\n            case 'Home':\n                e.preventDefault();\n                items[0]?.focus();\n                break;\n            case 'End':\n                e.preventDefault();\n                items[items.length - 1]?.focus();\n                break;\n            case 'Enter':\n            case ' ': // Space\n                e.preventDefault();\n                target.click();\n                break;\n            default:\n                break;\n        }\n    };\n\n    /**\n     * Handles focus events on the menu container.\n     * Delegates focus to the first item if the container itself receives focus.\n     *\n     * @param {React.FocusEvent} e - The focus event.\n     */\n    const focusHandler = (e: React.FocusEvent) => {\n        // Prevent trap: If focus came from inside (Shift+Tab), do NOT auto-focus again.\n        // This allows focus to land on the container, and the next Shift+Tab will exit.\n        if (e.currentTarget.contains(e.relatedTarget as Node)) {\n            return;\n        }\n\n        // Only if focus is actually on the container (e.g. tabbing into it)\n        // and not bubbling up from a child\n        if (e.target === e.currentTarget) {\n            // Prevent the container from holding focus; delegate to first item\n            const firstItem = e.currentTarget.querySelector('[role=\"option\"]') as HTMLElement;\n            firstItem?.focus();\n        }\n    };\n\n    return (\n        // @ts-expect-error Generic context typing\n        <MenuContext.Provider value={{ value: value, multiSelect: !!multiSelect, updateValue }}>\n            <MenuContainer\n                {...rest}\n                ref={ref}\n                role=\"listbox\"\n                aria-multiselectable={multiSelect}\n                tabIndex={0}\n                onKeyDown={handleKeyDown}\n                onFocus={focusHandler}\n            >\n                {children}\n            </MenuContainer>\n        </MenuContext.Provider>\n    );\n}\n\nconst Menu = React.forwardRef(MenuInner) as <T>(\n    props: MenuProps<T> & React.RefAttributes<HTMLDivElement>,\n) => React.ReactElement;\n\nexport default Menu;\n"],"names":["MenuContainer","styled","getThemeValue","THEME_NAME","PRIMARY_LIGHT","MenuInner","props","ref","multiSelect","onChange","value","propValue","children","rest","setValue","useState","updateValue","val","newVal","Array","isArray","includes","filter","item","handleKeyDown","e","target","container","currentTarget","items","from","querySelectorAll","currentIndex","indexOf","nextIndex","key","preventDefault","length","focus","click","focusHandler","contains","relatedTarget","firstItem","querySelector","_jsx","MenuContext","Provider","role","aria-multiselectable","tabIndex","onKeyDown","onFocus","Menu","React","forwardRef"],"mappings":"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"}
+{"version":3,"file":"Menu.js","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import React, { useState, ForwardedRef } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport MenuContext from './MenuContext';\n/**\n * Props for the Menu component.\n * @template T - The type of value(s) in the menu.\n */\ntype MenuProps<T> = {\n    /** Multiple Menu Items can be selected */\n    multiSelect?: boolean;\n    /** Value(s) selected */\n    value?: T | T[];\n    /** Callback when the selected value changes */\n    onChange?: (value: T | T[]) => void;\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nconst MenuContainer = styled.div`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n\n    & div:last-child {\n        border-bottom: none;\n    }\n\n    &:focus-within {\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n`;\n\n/**\n * Menu component that allows selection of items from a list.\n * Supports single and multi-select modes and keyboard navigation.\n *\n * @template T - The type of value(s) in the menu.\n * @param props - The menu properties.\n * @param ref - The ref forwarded to the menu container.\n */\n/**\n * Menu Component\n * @template T - The type of value(s) in the menu.\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\n */\nfunction MenuInner<T>(props: MenuProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n    const { multiSelect = false, onChange, value: propValue, children, ...rest } = props;\n    // State holds either a single T or an array of T when multiSelect\n    const [value, setValue] = useState<unknown | undefined>(propValue);\n\n    /**\n     * Updates the selected value(s).\n     * Handles both single and multi-select logic.\n     *\n     * @param {T} val - The value to select or deselect.\n     */\n    const updateValue = (val: unknown) => {\n        let newVal: unknown;\n        if (multiSelect) {\n            if (Array.isArray(value)) {\n                if (value.includes(val as unknown as T)) {\n                    newVal = (value as T[]).filter((item) => item !== val);\n                } else {\n                    newVal = [...(value as T[]), val];\n                }\n            } else {\n                newVal = [val];\n            }\n        } else {\n            newVal = val;\n        }\n\n        setValue(newVal as T | T[]);\n        onChange?.(newVal as T | T[]);\n    };\n\n    /**\n     * Handles keyboard navigation within the menu.\n     * Supports Arrow keys for navigation, and Enter/Space for selection.\n     *\n     * @param {React.KeyboardEvent} e - The keyboard event.\n     */\n    const handleKeyDown = (e: React.KeyboardEvent) => {\n        const target = e.target as HTMLElement;\n        const container = e.currentTarget as HTMLElement;\n        const items = Array.from(container.querySelectorAll('[role=\"option\"]')) as HTMLElement[];\n        const currentIndex = items.indexOf(target as HTMLElement);\n\n        let nextIndex;\n\n        switch (e.key) {\n            case 'ArrowDown':\n                e.preventDefault();\n                nextIndex = currentIndex + 1;\n                if (nextIndex >= items.length) nextIndex = 0;\n                items[nextIndex]?.focus();\n                break;\n            case 'ArrowUp':\n                e.preventDefault();\n                nextIndex = currentIndex - 1;\n                if (nextIndex < 0) nextIndex = items.length - 1;\n                items[nextIndex]?.focus();\n                break;\n            case 'Home':\n                e.preventDefault();\n                items[0]?.focus();\n                break;\n            case 'End':\n                e.preventDefault();\n                items[items.length - 1]?.focus();\n                break;\n            case 'Enter':\n            case ' ': // Space\n                e.preventDefault();\n                target.click();\n                break;\n            default:\n                break;\n        }\n    };\n\n    /**\n     * Handles focus events on the menu container.\n     * Delegates focus to the first item if the container itself receives focus.\n     *\n     * @param {React.FocusEvent} e - The focus event.\n     */\n    const focusHandler = (e: React.FocusEvent) => {\n        // Prevent trap: If focus came from inside (Shift+Tab), do NOT auto-focus again.\n        // This allows focus to land on the container, and the next Shift+Tab will exit.\n        if (e.currentTarget.contains(e.relatedTarget as Node)) {\n            return;\n        }\n\n        // Only if focus is actually on the container (e.g. tabbing into it)\n        // and not bubbling up from a child\n        if (e.target === e.currentTarget) {\n            // Prevent the container from holding focus; delegate to first item\n            const firstItem = e.currentTarget.querySelector('[role=\"option\"]') as HTMLElement;\n            firstItem?.focus();\n        }\n    };\n\n    return (\n        // @ts-expect-error Generic context typing\n        <MenuContext.Provider value={{ value: value, multiSelect: !!multiSelect, updateValue }}>\n            <MenuContainer\n                {...rest}\n                ref={ref}\n                role=\"listbox\"\n                aria-multiselectable={multiSelect}\n                tabIndex={0}\n                onKeyDown={handleKeyDown}\n                onFocus={focusHandler}\n            >\n                {children}\n            </MenuContainer>\n        </MenuContext.Provider>\n    );\n}\n\nconst Menu = React.forwardRef(MenuInner) as <T>(\n    props: MenuProps<T> & React.RefAttributes<HTMLDivElement>,\n) => React.ReactElement;\n\nexport default Menu;\n"],"names":["MenuContainer","styled","getThemeValue","THEME_NAME","PRIMARY_LIGHT","MenuInner","props","ref","multiSelect","onChange","value","propValue","children","rest","setValue","useState","updateValue","val","newVal","Array","isArray","includes","filter","item","handleKeyDown","e","target","container","currentTarget","items","from","querySelectorAll","currentIndex","indexOf","nextIndex","key","preventDefault","length","focus","click","focusHandler","contains","relatedTarget","firstItem","querySelector","_jsx","MenuContext","Provider","role","aria-multiselectable","tabIndex","onKeyDown","onFocus","Menu","React","forwardRef"],"mappings":"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"}

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

@@ -3,6 +3,12 @@ type MenuItemProps<T> = {
     /** Value of the element */
     value: T;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'>;
+/**
+ * MenuItem Component
+ * @template T - The type of value in the menu item.
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLButtonElement
+ */
 declare const MenuItemInner: <T>(props: MenuItemProps<T>, ref: React.Ref<HTMLButtonElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
 declare const MenuItem: <T>(props: MenuItemProps<T> & {
     ref?: React.Ref<HTMLButtonElement>;

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

@@ -6,10 +6,15 @@ import Checkbox from '../Input/Checkbox.js';
 import MenuContext from './MenuContext.js';
 
 const Container$4 = /*#__PURE__*/ styled("button", {
-    target: "eum9bel0",
+    target: "ebwocs30",
     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;}");
-const MenuItemInner = (props, ref)=>{
+/**
+ * MenuItem Component
+ * @template T - The type of value in the menu item.
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLButtonElement
+ */ const MenuItemInner = (props, ref)=>{
     const context = useContext(MenuContext);
     if (!context) {
         throw new Error('`MenuItem` must be used within a `Menu` provider');

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sources":["../../../src/components/Menu/MenuItem.tsx"],"sourcesContent":["import React, { SyntheticEvent, useContext } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport Checkbox from '../Input/Checkbox';\nimport MenuContext, { MenuContextType } from './MenuContext';\n\ntype MenuItemProps<T> = {\n    /** Value of the element */\n    value: T;\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'>;\n\nconst Container = styled.button<{ selected: boolean; multiselect?: boolean }>`\n    font-weight: ${(props) => (props.selected ? 'bold' : 'normal')};\n    padding: 8px;\n    border: none;\n    border-left: 4px solid\n        ${(props) =>\n            props.selected && !props.multiselect\n                ? getThemeValue(THEME_NAME.TEXT_COLOR_DARK)\n                : 'transparent'};\n    background-color: transparent;\n    font-size: 16px;\n    border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n    min-height: 41px;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    position: relative;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n\n    &:hover,\n    &:focus,\n    &:focus-within {\n        background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n    }\n\n    & > label {\n        margin: 0 4px 0 0;\n    }\n`;\n\nconst MenuItemInner = <T,>(props: MenuItemProps<T>, ref: React.Ref<HTMLButtonElement>) => {\n    const context = useContext(MenuContext) as MenuContextType<T> | undefined;\n    if (!context) {\n        throw new Error('`MenuItem` must be used within a `Menu` provider');\n    }\n    const { value, children, ...rest } = props;\n    const clickHandler = (e: SyntheticEvent) => {\n        e.stopPropagation();\n        context.updateValue(value as T);\n    };\n\n    let selected = false;\n    if (context.multiSelect) {\n        const arr = context.value as unknown as T[] | undefined;\n        selected = Array.isArray(arr) && arr.includes(value as unknown as T);\n    } else {\n        selected = (context.value as unknown as T) === value;\n    }\n\n    return (\n        <Container\n            {...rest}\n            ref={ref}\n            type=\"button\"\n            role=\"option\"\n            aria-selected={selected}\n            selected={selected}\n            onClick={clickHandler}\n            multiselect={context.multiSelect ? true : undefined}\n        >\n            {context.multiSelect && (\n                <Checkbox\n                    checked={selected}\n                    readOnly\n                    tabIndex={-1}\n                    onClick={(e) => e.stopPropagation()}\n                />\n            )}\n            {children}\n        </Container>\n    );\n};\n\nconst MenuItem = React.forwardRef(MenuItemInner) as <T>(\n    props: MenuItemProps<T> & { ref?: React.Ref<HTMLButtonElement> },\n) => ReturnType<typeof MenuItemInner>;\nexport default MenuItem;\n"],"names":["Container","styled","props","selected","multiselect","getThemeValue","THEME_NAME","TEXT_COLOR_DARK","BORDER_LIGHT_COLOR","MenuItemInner","ref","context","useContext","MenuContext","Error","value","children","rest","clickHandler","e","stopPropagation","updateValue","multiSelect","arr","Array","isArray","includes","_jsxs","type","role","aria-selected","onClick","undefined","_jsx","Checkbox","checked","readOnly","tabIndex","MenuItem","React","forwardRef"],"mappings":";;;;;;;AAWA,MAAMA,WAAAA,iBAAYC,MAAAA,CAAAA,QAAAA,EAAAA;;;AACC,CAAA,CAAA,CAAA,cAAA,EAAA,CAACC,KAAAA,GAAWA,KAAAA,CAAMC,QAAQ,GAAG,MAAA,GAAS,QAAA,EAAA,0DAAA,EAI/C,CAACD,KAAAA,GACCA,KAAAA,CAAMC,QAAQ,IAAI,CAACD,MAAME,WAAW,GAC9BC,aAAAA,CAAcC,UAAAA,CAAWC,eAAe,CAAA,GACxC,aAAA,EAAA,uEAAA,EAGaF,aAAAA,CAAcC,UAAAA,CAAWE,kBAAkB,CAAA,EAAA,0FAAA,EAM7DH,aAAAA,CAAcC,UAAAA,CAAWC,eAAe,CAAA,EAAA,mDAAA,EAKzBF,aAAAA,CAAcC,WAAWE,kBAAkB,CAAA,EAAA,gCAAA,CAAA;AAQvE,MAAMC,aAAAA,GAAgB,CAAKP,KAAAA,EAAyBQ,GAAAA,GAAAA;AAChD,IAAA,MAAMC,UAAUC,UAAAA,CAAWC,WAAAA,CAAAA;AAC3B,IAAA,IAAI,CAACF,OAAAA,EAAS;AACV,QAAA,MAAM,IAAIG,KAAAA,CAAM,kDAAA,CAAA;AACpB,IAAA;AACA,IAAA,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGf,KAAAA;AACrC,IAAA,MAAMgB,eAAe,CAACC,CAAAA,GAAAA;AAClBA,QAAAA,CAAAA,CAAEC,eAAe,EAAA;AACjBT,QAAAA,OAAAA,CAAQU,WAAW,CAACN,KAAAA,CAAAA;AACxB,IAAA,CAAA;AAEA,IAAA,IAAIZ,QAAAA,GAAW,KAAA;IACf,IAAIQ,OAAAA,CAAQW,WAAW,EAAE;QACrB,MAAMC,GAAAA,GAAMZ,QAAQI,KAAK;AACzBZ,QAAAA,QAAAA,GAAWqB,MAAMC,OAAO,CAACF,GAAAA,CAAAA,IAAQA,GAAAA,CAAIG,QAAQ,CAACX,KAAAA,CAAAA;IAClD,CAAA,MAAO;QACHZ,QAAAA,GAAYQ,OAAAA,CAAQI,KAAK,KAAsBA,KAAAA;AACnD,IAAA;AAEA,IAAA,qBACIY,IAAA,CAAC3B,WAAAA,EAAAA;AACI,QAAA,GAAGiB,IAAI;QACRP,GAAAA,EAAKA,GAAAA;QACLkB,IAAAA,EAAK,QAAA;QACLC,IAAAA,EAAK,QAAA;QACLC,eAAAA,EAAe3B,QAAAA;QACfA,QAAAA,EAAUA,QAAAA;QACV4B,OAAAA,EAASb,YAAAA;QACTd,WAAAA,EAAaO,OAAAA,CAAQW,WAAW,GAAG,IAAA,GAAOU,SAAAA;;YAEzCrB,OAAAA,CAAQW,WAAW,kBAChBW,GAAA,CAACC,QAAAA,EAAAA;gBACGC,OAAAA,EAAShC,QAAAA;gBACTiC,QAAQ,EAAA,IAAA;AACRC,gBAAAA,QAAAA,EAAU,EAAC;gBACXN,OAAAA,EAAS,CAACZ,CAAAA,GAAMA,CAAAA,CAAEC,eAAe;;AAGxCJ,YAAAA;;;AAGb,CAAA;AAEA,MAAMsB,QAAAA,iBAAWC,KAAAA,CAAMC,UAAU,CAAC/B,aAAAA;;;;"}
+{"version":3,"file":"MenuItem.js","sources":["../../../src/components/Menu/MenuItem.tsx"],"sourcesContent":["import React, { SyntheticEvent, useContext } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport Checkbox from '../Input/Checkbox';\nimport MenuContext, { MenuContextType } from './MenuContext';\n\ntype MenuItemProps<T> = {\n    /** Value of the element */\n    value: T;\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'>;\n\nconst Container = styled.button<{ selected: boolean; multiselect?: boolean }>`\n    font-weight: ${(props) => (props.selected ? 'bold' : 'normal')};\n    padding: 8px;\n    border: none;\n    border-left: 4px solid\n        ${(props) =>\n            props.selected && !props.multiselect\n                ? getThemeValue(THEME_NAME.TEXT_COLOR_DARK)\n                : 'transparent'};\n    background-color: transparent;\n    font-size: 16px;\n    border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n    min-height: 41px;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    position: relative;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n\n    &:hover,\n    &:focus,\n    &:focus-within {\n        background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n    }\n\n    & > label {\n        margin: 0 4px 0 0;\n    }\n`;\n\n/**\n * MenuItem Component\n * @template T - The type of value in the menu item.\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLButtonElement\n */\nconst MenuItemInner = <T,>(props: MenuItemProps<T>, ref: React.Ref<HTMLButtonElement>) => {\n    const context = useContext(MenuContext) as MenuContextType<T> | undefined;\n    if (!context) {\n        throw new Error('`MenuItem` must be used within a `Menu` provider');\n    }\n    const { value, children, ...rest } = props;\n    const clickHandler = (e: SyntheticEvent) => {\n        e.stopPropagation();\n        context.updateValue(value as T);\n    };\n\n    let selected = false;\n    if (context.multiSelect) {\n        const arr = context.value as unknown as T[] | undefined;\n        selected = Array.isArray(arr) && arr.includes(value as unknown as T);\n    } else {\n        selected = (context.value as unknown as T) === value;\n    }\n\n    return (\n        <Container\n            {...rest}\n            ref={ref}\n            type=\"button\"\n            role=\"option\"\n            aria-selected={selected}\n            selected={selected}\n            onClick={clickHandler}\n            multiselect={context.multiSelect ? true : undefined}\n        >\n            {context.multiSelect && (\n                <Checkbox\n                    checked={selected}\n                    readOnly\n                    tabIndex={-1}\n                    onClick={(e) => e.stopPropagation()}\n                />\n            )}\n            {children}\n        </Container>\n    );\n};\n\nconst MenuItem = React.forwardRef(MenuItemInner) as <T>(\n    props: MenuItemProps<T> & { ref?: React.Ref<HTMLButtonElement> },\n) => ReturnType<typeof MenuItemInner>;\nexport default MenuItem;\n"],"names":["Container","styled","props","selected","multiselect","getThemeValue","THEME_NAME","TEXT_COLOR_DARK","BORDER_LIGHT_COLOR","MenuItemInner","ref","context","useContext","MenuContext","Error","value","children","rest","clickHandler","e","stopPropagation","updateValue","multiSelect","arr","Array","isArray","includes","_jsxs","type","role","aria-selected","onClick","undefined","_jsx","Checkbox","checked","readOnly","tabIndex","MenuItem","React","forwardRef"],"mappings":";;;;;;;AAWA,MAAMA,WAAAA,iBAAYC,MAAAA,CAAAA,QAAAA,EAAAA;;;AACC,CAAA,CAAA,CAAA,cAAA,EAAA,CAACC,KAAAA,GAAWA,KAAAA,CAAMC,QAAQ,GAAG,MAAA,GAAS,QAAA,EAAA,0DAAA,EAI/C,CAACD,KAAAA,GACCA,KAAAA,CAAMC,QAAQ,IAAI,CAACD,MAAME,WAAW,GAC9BC,aAAAA,CAAcC,UAAAA,CAAWC,eAAe,CAAA,GACxC,aAAA,EAAA,uEAAA,EAGaF,aAAAA,CAAcC,UAAAA,CAAWE,kBAAkB,CAAA,EAAA,0FAAA,EAM7DH,aAAAA,CAAcC,UAAAA,CAAWC,eAAe,CAAA,EAAA,mDAAA,EAKzBF,aAAAA,CAAcC,WAAWE,kBAAkB,CAAA,EAAA,gCAAA,CAAA;AAQvE;;;;;IAMA,MAAMC,aAAAA,GAAgB,CAAKP,KAAAA,EAAyBQ,GAAAA,GAAAA;AAChD,IAAA,MAAMC,UAAUC,UAAAA,CAAWC,WAAAA,CAAAA;AAC3B,IAAA,IAAI,CAACF,OAAAA,EAAS;AACV,QAAA,MAAM,IAAIG,KAAAA,CAAM,kDAAA,CAAA;AACpB,IAAA;AACA,IAAA,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGf,KAAAA;AACrC,IAAA,MAAMgB,eAAe,CAACC,CAAAA,GAAAA;AAClBA,QAAAA,CAAAA,CAAEC,eAAe,EAAA;AACjBT,QAAAA,OAAAA,CAAQU,WAAW,CAACN,KAAAA,CAAAA;AACxB,IAAA,CAAA;AAEA,IAAA,IAAIZ,QAAAA,GAAW,KAAA;IACf,IAAIQ,OAAAA,CAAQW,WAAW,EAAE;QACrB,MAAMC,GAAAA,GAAMZ,QAAQI,KAAK;AACzBZ,QAAAA,QAAAA,GAAWqB,MAAMC,OAAO,CAACF,GAAAA,CAAAA,IAAQA,GAAAA,CAAIG,QAAQ,CAACX,KAAAA,CAAAA;IAClD,CAAA,MAAO;QACHZ,QAAAA,GAAYQ,OAAAA,CAAQI,KAAK,KAAsBA,KAAAA;AACnD,IAAA;AAEA,IAAA,qBACIY,IAAA,CAAC3B,WAAAA,EAAAA;AACI,QAAA,GAAGiB,IAAI;QACRP,GAAAA,EAAKA,GAAAA;QACLkB,IAAAA,EAAK,QAAA;QACLC,IAAAA,EAAK,QAAA;QACLC,eAAAA,EAAe3B,QAAAA;QACfA,QAAAA,EAAUA,QAAAA;QACV4B,OAAAA,EAASb,YAAAA;QACTd,WAAAA,EAAaO,OAAAA,CAAQW,WAAW,GAAG,IAAA,GAAOU,SAAAA;;YAEzCrB,OAAAA,CAAQW,WAAW,kBAChBW,GAAA,CAACC,QAAAA,EAAAA;gBACGC,OAAAA,EAAShC,QAAAA;gBACTiC,QAAQ,EAAA,IAAA;AACRC,gBAAAA,QAAAA,EAAU,EAAC;gBACXN,OAAAA,EAAS,CAACZ,CAAAA,GAAMA,CAAAA,CAAEC,eAAe;;AAGxCJ,YAAAA;;;AAGb,CAAA;AAEA,MAAMsB,QAAAA,iBAAWC,KAAAA,CAAMC,UAAU,CAAC/B,aAAAA;;;;"}

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

@@ -9,7 +9,7 @@ type ModalProps = {
     closeOnOverlayClick?: boolean;
     /** Call back function called when the modal closes. */
     onClose?: () => void;
-    /** Ref forwarded to the modal container */
+    /** Ref forwarded to the underlying HTMLDivElement of the modal container */
     forwardRef?: React.Ref<HTMLDivElement>;
 } & React.HTMLAttributes<HTMLDivElement>;
 interface ModalState {
@@ -63,6 +63,10 @@ export default class Modal extends React.Component<React.PropsWithChildren<Modal
      * Lifecycle method to save the currently focused element when the modal mounts while open.
      */
     componentDidMount(): void;
+    /**
+     * Handles opening the modal by creating the layer.
+     */
+    private handleOpen;
     /**
      * Lifecycle method to restore focus when the modal unmounts.
      */
@@ -85,7 +89,7 @@ export default class Modal extends React.Component<React.PropsWithChildren<Modal
      * Lifecycle method to handle Modal updates.
      * Manages opening/closing logic via LayerManager and focus preservation.
      */
-    getSnapshotBeforeUpdate(prevProps: ModalProps): void;
+    getSnapshotBeforeUpdate(prevProps: ModalProps): null;
     /**
      * Renders the Modal component via the LayerManager portal.
      */

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

@@ -19,6 +19,8 @@ class Modal extends React.Component {
      */ componentDidMount() {
         if (this.props.open) {
             this.lastFocusedElement = document.activeElement;
+            // Handle initial open state
+            this.handleOpen();
         }
     }
     /**
@@ -38,7 +40,7 @@ class Modal extends React.Component {
      * 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;
+        const { open } = this.props;
         if (prevProps.open && !open) {
             this.closeCallback?.();
             this.restoreFocus();
@@ -46,28 +48,9 @@ class Modal extends React.Component {
         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();
+            this.handleOpen();
         }
+        return null;
     }
     /**
      * Renders the Modal component via the LayerManager portal.
@@ -119,6 +102,31 @@ class Modal extends React.Component {
                 }
             }
         }, /**
+     * Handles opening the modal by creating the layer.
+     */ this.handleOpen = ()=>{
+            const { closeOnEsc, closeOnOverlayClick, children, ...rest } = this.props;
+            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();
+        }, /**
      * Restores focus to the element that was focused before the modal opened.
      */ this.restoreFocus = ()=>{
             if (this.lastFocusedElement) {

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

@@ -1 +1 @@
-{"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            (this.props.forwardRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\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","root","firstChild","firstElementChild","getAttribute","setAttribute","defaultProps"],"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 underlying HTMLDivElement of 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            // Handle initial open state\n            this.handleOpen();\n        }\n    }\n\n    /**\n     * Handles opening the modal by creating the layer.\n     */\n    private handleOpen = () => {\n        const { closeOnEsc, closeOnOverlayClick, children, ...rest } = this.props;\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     * 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            (this.props.forwardRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\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 } = 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            this.handleOpen();\n        }\n\n        return null;\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","handleOpen","componentWillUnmount","restoreFocus","closeCallback","undefined","layer","getSnapshotBeforeUpdate","prevProps","render","state","_jsx","onClose","setState","modalRef","createRef","getFocusableElements","current","Array","from","querySelectorAll","handleKeyDown","e","key","focusableElements","length","firstElement","lastElement","shiftKey","focus","preventDefault","closeOnEsc","closeOnOverlayClick","children","rest","LayerManager","renderLayer","overlay","exitDelay","position","LAYER_POSITION","DIALOG","component","ModalContainer","ref","setModalRef","role","aria-modal","tabIndex","onKeyDown","onClick","stopPropagation","elevated","forceUpdate","elementToBeFocused","setTimeout","body","contains","node","setInitialFocus","forwardRef","root","firstChild","firstElementChild","getAttribute","setAttribute","defaultProps"],"mappings":"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"}

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

@@ -40,6 +40,8 @@ export declare function StoryProps(props: NotificationProps): null;
 declare class Notification {
     /** Helps in maintaining single instance for different positions. */
     private containers;
+    /** Pending add requests waiting for manager to mount */
+    private pending;
     /**
      * Adds a notification
      *

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

@@ -14,6 +14,7 @@ import { NOTIFICATION_POSITION } from './types.js';
 /** Notification class */ class Notification {
     constructor(){
         /** Helps in maintaining single instance for different positions. */ this.containers = new Map();
+        /** Pending add requests waiting for manager to mount */ this.pending = new Map();
         /**
      * Adds a notification
      *
@@ -28,6 +29,12 @@ import { NOTIFICATION_POSITION } from './types.js';
                         if (container) {
                             container.manager = instance;
                         }
+                        // Process pending requests
+                        const queue = this.pending.get(position);
+                        if (queue) {
+                            queue.forEach((cb)=>cb(instance));
+                            this.pending.delete(position);
+                        }
                     }
                 };
                 const [Component] = LayerManager.renderLayer({
@@ -60,14 +67,13 @@ import { NOTIFICATION_POSITION } from './types.js';
             if (container && container.manager) {
                 return container.manager.add(options);
             }
-            // If manager is not ready yet, wait a bit and retry
+            // If manager is not ready yet, add to pending queue
             return new Promise((resolve)=>{
-                setTimeout(()=>{
-                    const container = this.containers.get(position);
-                    if (container && container.manager) {
-                        resolve(container.manager.add(options));
-                    }
-                }, 10);
+                const queue = this.pending.get(position) || [];
+                queue.push((manager)=>{
+                    resolve(manager.add(options));
+                });
+                this.pending.set(position, queue);
             });
         };
         /**

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

@@ -1 +1 @@
-{"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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"}
+{"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    /** Pending add requests waiting for manager to mount */\n    private pending: Map<NOTIFICATION_POSITION, Array<(manager: NotificationManager) => void>> =\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                    // Process pending requests\n                    const queue = this.pending.get(position);\n                    if (queue) {\n                        queue.forEach((cb) => cb(instance));\n                        this.pending.delete(position);\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, add to pending queue\n        return new Promise<string>((resolve) => {\n            const queue = this.pending.get(position) || [];\n            queue.push((manager) => {\n                resolve(manager.add(options));\n            });\n            this.pending.set(position, queue);\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","pending","add","position","options","ariaLabel","has","refCallback","instance","container","get","manager","queue","forEach","cb","delete","Component","LayerManager","renderLayer","closeOnEsc","closeOnOverlayClick","alwaysOnTop","component","_jsx","NotificationManager","ref","onEmpty","destroy","div","document","createElement","body","appendChild","root","createRoot","set","flushSync","render","Promise","resolve","push","remove","id","unmount","contains","removeChild"],"mappings":"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"}

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

@@ -200,6 +200,7 @@ const DEFAULT_DURATION$1 = 5000;
      */ this.pause = (id)=>()=>{
                 if (id && this.timeouts[id]) {
                     clearTimeout(this.timeouts[id]);
+                    delete this.timeouts[id];
                 }
             }, /**
      * Restart the removal of notification.

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationManager.js","sources":["../../../src/components/Notification/NotificationManager.tsx"],"sourcesContent":["import React from 'react';\nimport { Close, Info, ReportProblem, ErrorOutline, CheckCircle } from '../../icons';\nimport { ActionButton } from '../Button';\nimport {\n    Container,\n    Notice,\n    Title,\n    IconContainer,\n    FillParent,\n    Body,\n    CloseButton,\n    Footer,\n    VisuallyHidden,\n} from './style';\nimport { NOTIFICATION_POSITION, NOTIFICATION_TYPE, NotificationOptions } from './types';\n\ninterface NotificationManagerProps {\n    // Notification Position\n    position: NOTIFICATION_POSITION;\n    // Callback for when stack is emptied\n    onEmpty: () => void;\n    // Aria label for the notification list\n    ariaLabel?: string;\n}\n\n// Notice prop\ninterface NoticeProp extends NotificationOptions {\n    leaving?: boolean;\n}\n\n// Manager state\ninterface NotificationManagerState {\n    notices: NoticeProp[];\n}\n\ntype timeouts = {\n    [id: string]: NodeJS.Timeout;\n};\n\nconst DEFAULT_DURATION = 5000;\n\n/**\n * Notification Manager class\n */\nclass NotificationManager extends React.Component<\n    NotificationManagerProps,\n    NotificationManagerState\n> {\n    state: NotificationManagerState = {\n        notices: [],\n    };\n\n    // bookkeeping for timeouts\n    private timeouts: timeouts = {};\n\n    // Set of notification ids\n    private set = new Set<string>();\n\n    // Refs for live regions to ensure they exist before updates\n    private politeRegionRef = React.createRef<HTMLDivElement>();\n    private assertiveRegionRef = React.createRef<HTMLDivElement>();\n\n    /**\n     * Removes a notification from stack if the notification with the given id is found.\n     *\n     * @param id\n     */\n    public remove = (id?: string) => {\n        if (!id) return;\n\n        // Trigger leaving animation.\n        this.setState({\n            notices: this.state.notices.map((notice) => ({\n                ...notice,\n                leaving: notice.id === id ? true : notice.leaving,\n            })),\n        });\n        this.set.delete(id);\n\n        // Remove notification on animation completion.\n        setTimeout(() => {\n            const notice = this.state.notices.find((notice) => notice.id === id);\n            if (notice) {\n                // call close callback, ignore any errors in callback.\n                if (notice.onClose) {\n                    try {\n                        notice.onClose();\n                    } catch (e: unknown) {\n                        console.warn('Error in notification close callback', (e as Error).message);\n                    }\n                }\n\n                // Remove the notification\n                this.setState(\n                    {\n                        notices: this.state.notices.filter((notice) => notice.id !== id),\n                    },\n                    () => {\n                        // Check if the stack is empty and then call the\n                        // empty callback function.\n                        if (this.state.notices.length === 0) {\n                            this.props.onEmpty();\n                        }\n                    },\n                );\n            }\n        }, 550);\n    };\n\n    /**\n     * Adds a notification to stack.\n     *\n     * @param notice\n     */\n    public add = async (notice: NotificationOptions) => {\n        // Generate unique id if not provided.\n        const id = notice.id || (Math.random() * 10 ** 7).toFixed(0);\n\n        // De-dupe on id\n        if (!this.set.has(id)) {\n            const type = notice.type || NOTIFICATION_TYPE.INFO;\n            const isUrgent =\n                type === NOTIFICATION_TYPE.WARNING || type === NOTIFICATION_TYPE.DANGER;\n\n            // Add notice to the top of stack.\n            this.setState(\n                (prevState) => ({\n                    notices: [\n                        {\n                            ...notice,\n                            id,\n                        },\n                        ...prevState.notices,\n                    ],\n                }),\n                () => {\n                    // Update live region after state update\n                    const announcement = `${notice.title} ${notice.description}`;\n                    this.updateLiveRegion(announcement, isUrgent);\n                },\n            );\n\n            // set timeout for closing the notification.\n            if (!notice.sticky) {\n                this.timeouts[id] = setTimeout(\n                    () => this.remove(id),\n                    notice.duration || DEFAULT_DURATION,\n                );\n            }\n\n            // Add id to the set.\n            this.set.add(id);\n        }\n\n        return id;\n    };\n\n    /**\n     * Update live region content with clear-then-set pattern for reliable VoiceOver announcements.\n     *\n     * @param content - The text content to announce\n     * @param isAssertive - Whether to use assertive (alert) or polite (log) live region\n     */\n    private updateLiveRegion = (content: string, isAssertive: boolean) => {\n        const region = isAssertive ? this.assertiveRegionRef.current : this.politeRegionRef.current;\n\n        if (region) {\n            // Add content after delay\n            setTimeout(() => {\n                if (region) {\n                    region.textContent = content;\n                }\n            }, 150);\n        }\n    };\n\n    /**\n     * Handler for close button click.\n     *\n     * @param id\n     */\n    public closeClickHandler = (id?: string) => () => {\n        this.remove(id);\n    };\n\n    /**\n     * Pause notification when user is hovering over it.\n     *\n     * @param id\n     */\n    public pause = (id?: string) => () => {\n        if (id && this.timeouts[id]) {\n            clearTimeout(this.timeouts[id]);\n        }\n    };\n\n    /**\n     * Restart the removal of notification.\n     *\n     * @param id\n     */\n    public resume = (id?: string) => () => {\n        const notice = this.state.notices.find((notice) => notice.id === id);\n        if (!notice?.sticky && id && !this.timeouts[id]) {\n            this.timeouts[id] = setTimeout(() => this.remove(id), DEFAULT_DURATION);\n        }\n    };\n\n    /**\n     * Clean up all pending timeouts when component unmounts\n     */\n    componentWillUnmount() {\n        // Clear all pending timeouts\n        Object.keys(this.timeouts).forEach((id) => {\n            clearTimeout(this.timeouts[id]);\n        });\n        this.timeouts = {};\n        this.set.clear();\n    }\n\n    render() {\n        return (\n            <Container position={this.props.position}>\n                {/* Polite live region - uses role=\"log\" for better VoiceOver compatibility */}\n                <VisuallyHidden\n                    ref={this.politeRegionRef}\n                    role=\"log\"\n                    aria-live=\"polite\"\n                    aria-atomic=\"false\"\n                    aria-relevant=\"additions text\"\n                />\n\n                {/* Assertive live region - pre-rendered and persistent */}\n                <VisuallyHidden\n                    ref={this.assertiveRegionRef}\n                    role=\"alert\"\n                    aria-live=\"assertive\"\n                    aria-atomic=\"true\"\n                />\n\n                {/* Visual notifications with list semantics */}\n                <div role=\"list\" aria-label={this.props.ariaLabel}>\n                    {this.state.notices.map((notice) => {\n                        const {\n                            id,\n                            title,\n                            description,\n                            leaving,\n                            type = NOTIFICATION_TYPE.INFO,\n                            buttonText,\n                            buttonClick,\n                            closeButtonAriaLabel,\n                        } = notice;\n\n                        return (\n                            <Notice\n                                key={id}\n                                {...notice}\n                                position={this.props.position}\n                                className={leaving ? 'leave' : ''}\n                                onMouseEnter={this.pause(id)}\n                                onMouseLeave={this.resume(id)}\n                                role=\"listitem\"\n                            >\n                                <IconContainer type={type} aria-hidden=\"true\">\n                                    {type === NOTIFICATION_TYPE.INFO && <Info />}\n                                    {type === NOTIFICATION_TYPE.SUCCESS && <CheckCircle />}\n                                    {type === NOTIFICATION_TYPE.WARNING && <ReportProblem />}\n                                    {type === NOTIFICATION_TYPE.DANGER && <ErrorOutline />}\n                                </IconContainer>\n                                <FillParent>\n                                    <Title type={type}>{title}</Title>\n                                    <Body>{description}</Body>\n                                    {buttonText && (\n                                        <Footer>\n                                            <ActionButton\n                                                onClick={() => {\n                                                    buttonClick?.();\n                                                }}\n                                            >\n                                                {buttonText}\n                                            </ActionButton>\n                                        </Footer>\n                                    )}\n                                </FillParent>\n                                <CloseButton\n                                    onClick={this.closeClickHandler(id)}\n                                    aria-label={closeButtonAriaLabel || 'Close notification'}\n                                    tabIndex={0}\n                                >\n                                    <Close />\n                                </CloseButton>\n                            </Notice>\n                        );\n                    })}\n                </div>\n            </Container>\n        );\n    }\n}\n\nexport default NotificationManager;\n"],"names":["DEFAULT_DURATION","NotificationManager","React","Component","componentWillUnmount","Object","keys","timeouts","forEach","id","clearTimeout","set","clear","render","_jsxs","Container","position","props","_jsx","VisuallyHidden","ref","politeRegionRef","role","aria-live","aria-atomic","aria-relevant","assertiveRegionRef","div","aria-label","ariaLabel","state","notices","map","notice","title","description","leaving","type","NOTIFICATION_TYPE","INFO","buttonText","buttonClick","closeButtonAriaLabel","Notice","className","onMouseEnter","pause","onMouseLeave","resume","IconContainer","aria-hidden","Info","SUCCESS","CheckCircle","WARNING","ReportProblem","DANGER","ErrorOutline","FillParent","Title","Body","Footer","ActionButton","onClick","CloseButton","closeClickHandler","tabIndex","Close","Set","createRef","remove","setState","delete","setTimeout","find","onClose","e","console","warn","message","filter","length","onEmpty","add","Math","random","toFixed","has","isUrgent","prevState","announcement","updateLiveRegion","sticky","duration","content","isAssertive","region","current","textContent"],"mappings":"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"}
+{"version":3,"file":"NotificationManager.js","sources":["../../../src/components/Notification/NotificationManager.tsx"],"sourcesContent":["import React from 'react';\nimport { Close, Info, ReportProblem, ErrorOutline, CheckCircle } from '../../icons';\nimport { ActionButton } from '../Button';\nimport {\n    Container,\n    Notice,\n    Title,\n    IconContainer,\n    FillParent,\n    Body,\n    CloseButton,\n    Footer,\n    VisuallyHidden,\n} from './style';\nimport { NOTIFICATION_POSITION, NOTIFICATION_TYPE, NotificationOptions } from './types';\n\ninterface NotificationManagerProps {\n    // Notification Position\n    position: NOTIFICATION_POSITION;\n    // Callback for when stack is emptied\n    onEmpty: () => void;\n    // Aria label for the notification list\n    ariaLabel?: string;\n}\n\n// Notice prop\ninterface NoticeProp extends NotificationOptions {\n    leaving?: boolean;\n}\n\n// Manager state\ninterface NotificationManagerState {\n    notices: NoticeProp[];\n}\n\ntype timeouts = {\n    [id: string]: NodeJS.Timeout;\n};\n\nconst DEFAULT_DURATION = 5000;\n\n/**\n * Notification Manager class\n */\nclass NotificationManager extends React.Component<\n    NotificationManagerProps,\n    NotificationManagerState\n> {\n    state: NotificationManagerState = {\n        notices: [],\n    };\n\n    // bookkeeping for timeouts\n    private timeouts: timeouts = {};\n\n    // Set of notification ids\n    private set = new Set<string>();\n\n    // Refs for live regions to ensure they exist before updates\n    private politeRegionRef = React.createRef<HTMLDivElement>();\n    private assertiveRegionRef = React.createRef<HTMLDivElement>();\n\n    /**\n     * Removes a notification from stack if the notification with the given id is found.\n     *\n     * @param id\n     */\n    public remove = (id?: string) => {\n        if (!id) return;\n\n        // Trigger leaving animation.\n        this.setState({\n            notices: this.state.notices.map((notice) => ({\n                ...notice,\n                leaving: notice.id === id ? true : notice.leaving,\n            })),\n        });\n        this.set.delete(id);\n\n        // Remove notification on animation completion.\n        setTimeout(() => {\n            const notice = this.state.notices.find((notice) => notice.id === id);\n            if (notice) {\n                // call close callback, ignore any errors in callback.\n                if (notice.onClose) {\n                    try {\n                        notice.onClose();\n                    } catch (e: unknown) {\n                        console.warn('Error in notification close callback', (e as Error).message);\n                    }\n                }\n\n                // Remove the notification\n                this.setState(\n                    {\n                        notices: this.state.notices.filter((notice) => notice.id !== id),\n                    },\n                    () => {\n                        // Check if the stack is empty and then call the\n                        // empty callback function.\n                        if (this.state.notices.length === 0) {\n                            this.props.onEmpty();\n                        }\n                    },\n                );\n            }\n        }, 550);\n    };\n\n    /**\n     * Adds a notification to stack.\n     *\n     * @param notice\n     */\n    public add = async (notice: NotificationOptions) => {\n        // Generate unique id if not provided.\n        const id = notice.id || (Math.random() * 10 ** 7).toFixed(0);\n\n        // De-dupe on id\n        if (!this.set.has(id)) {\n            const type = notice.type || NOTIFICATION_TYPE.INFO;\n            const isUrgent =\n                type === NOTIFICATION_TYPE.WARNING || type === NOTIFICATION_TYPE.DANGER;\n\n            // Add notice to the top of stack.\n            this.setState(\n                (prevState) => ({\n                    notices: [\n                        {\n                            ...notice,\n                            id,\n                        },\n                        ...prevState.notices,\n                    ],\n                }),\n                () => {\n                    // Update live region after state update\n                    const announcement = `${notice.title} ${notice.description}`;\n                    this.updateLiveRegion(announcement, isUrgent);\n                },\n            );\n\n            // set timeout for closing the notification.\n            if (!notice.sticky) {\n                this.timeouts[id] = setTimeout(\n                    () => this.remove(id),\n                    notice.duration || DEFAULT_DURATION,\n                );\n            }\n\n            // Add id to the set.\n            this.set.add(id);\n        }\n\n        return id;\n    };\n\n    /**\n     * Update live region content with clear-then-set pattern for reliable VoiceOver announcements.\n     *\n     * @param content - The text content to announce\n     * @param isAssertive - Whether to use assertive (alert) or polite (log) live region\n     */\n    private updateLiveRegion = (content: string, isAssertive: boolean) => {\n        const region = isAssertive ? this.assertiveRegionRef.current : this.politeRegionRef.current;\n\n        if (region) {\n            // Add content after delay\n            setTimeout(() => {\n                if (region) {\n                    region.textContent = content;\n                }\n            }, 150);\n        }\n    };\n\n    /**\n     * Handler for close button click.\n     *\n     * @param id\n     */\n    public closeClickHandler = (id?: string) => () => {\n        this.remove(id);\n    };\n\n    /**\n     * Pause notification when user is hovering over it.\n     *\n     * @param id\n     */\n    public pause = (id?: string) => () => {\n        if (id && this.timeouts[id]) {\n            clearTimeout(this.timeouts[id]);\n            delete this.timeouts[id];\n        }\n    };\n\n    /**\n     * Restart the removal of notification.\n     *\n     * @param id\n     */\n    public resume = (id?: string) => () => {\n        const notice = this.state.notices.find((notice) => notice.id === id);\n        if (!notice?.sticky && id && !this.timeouts[id]) {\n            this.timeouts[id] = setTimeout(() => this.remove(id), DEFAULT_DURATION);\n        }\n    };\n\n    /**\n     * Clean up all pending timeouts when component unmounts\n     */\n    componentWillUnmount() {\n        // Clear all pending timeouts\n        Object.keys(this.timeouts).forEach((id) => {\n            clearTimeout(this.timeouts[id]);\n        });\n        this.timeouts = {};\n        this.set.clear();\n    }\n\n    render() {\n        return (\n            <Container position={this.props.position}>\n                {/* Polite live region - uses role=\"log\" for better VoiceOver compatibility */}\n                <VisuallyHidden\n                    ref={this.politeRegionRef}\n                    role=\"log\"\n                    aria-live=\"polite\"\n                    aria-atomic=\"false\"\n                    aria-relevant=\"additions text\"\n                />\n\n                {/* Assertive live region - pre-rendered and persistent */}\n                <VisuallyHidden\n                    ref={this.assertiveRegionRef}\n                    role=\"alert\"\n                    aria-live=\"assertive\"\n                    aria-atomic=\"true\"\n                />\n\n                {/* Visual notifications with list semantics */}\n                <div role=\"list\" aria-label={this.props.ariaLabel}>\n                    {this.state.notices.map((notice) => {\n                        const {\n                            id,\n                            title,\n                            description,\n                            leaving,\n                            type = NOTIFICATION_TYPE.INFO,\n                            buttonText,\n                            buttonClick,\n                            closeButtonAriaLabel,\n                        } = notice;\n\n                        return (\n                            <Notice\n                                key={id}\n                                {...notice}\n                                position={this.props.position}\n                                className={leaving ? 'leave' : ''}\n                                onMouseEnter={this.pause(id)}\n                                onMouseLeave={this.resume(id)}\n                                role=\"listitem\"\n                            >\n                                <IconContainer type={type} aria-hidden=\"true\">\n                                    {type === NOTIFICATION_TYPE.INFO && <Info />}\n                                    {type === NOTIFICATION_TYPE.SUCCESS && <CheckCircle />}\n                                    {type === NOTIFICATION_TYPE.WARNING && <ReportProblem />}\n                                    {type === NOTIFICATION_TYPE.DANGER && <ErrorOutline />}\n                                </IconContainer>\n                                <FillParent>\n                                    <Title type={type}>{title}</Title>\n                                    <Body>{description}</Body>\n                                    {buttonText && (\n                                        <Footer>\n                                            <ActionButton\n                                                onClick={() => {\n                                                    buttonClick?.();\n                                                }}\n                                            >\n                                                {buttonText}\n                                            </ActionButton>\n                                        </Footer>\n                                    )}\n                                </FillParent>\n                                <CloseButton\n                                    onClick={this.closeClickHandler(id)}\n                                    aria-label={closeButtonAriaLabel || 'Close notification'}\n                                    tabIndex={0}\n                                >\n                                    <Close />\n                                </CloseButton>\n                            </Notice>\n                        );\n                    })}\n                </div>\n            </Container>\n        );\n    }\n}\n\nexport default NotificationManager;\n"],"names":["DEFAULT_DURATION","NotificationManager","React","Component","componentWillUnmount","Object","keys","timeouts","forEach","id","clearTimeout","set","clear","render","_jsxs","Container","position","props","_jsx","VisuallyHidden","ref","politeRegionRef","role","aria-live","aria-atomic","aria-relevant","assertiveRegionRef","div","aria-label","ariaLabel","state","notices","map","notice","title","description","leaving","type","NOTIFICATION_TYPE","INFO","buttonText","buttonClick","closeButtonAriaLabel","Notice","className","onMouseEnter","pause","onMouseLeave","resume","IconContainer","aria-hidden","Info","SUCCESS","CheckCircle","WARNING","ReportProblem","DANGER","ErrorOutline","FillParent","Title","Body","Footer","ActionButton","onClick","CloseButton","closeClickHandler","tabIndex","Close","Set","createRef","remove","setState","delete","setTimeout","find","onClose","e","console","warn","message","filter","length","onEmpty","add","Math","random","toFixed","has","isUrgent","prevState","announcement","updateLiveRegion","sticky","duration","content","isAssertive","region","current","textContent"],"mappings":"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"}

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

@@ -1,2 +1,3 @@
 export { default as Notification } from './Notification';
 export { NOTIFICATION_POSITION, NOTIFICATION_TYPE } from './types';
+export type { NotificationOptions } from './types';

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

@@ -29,17 +29,21 @@ const positionMap$2 = {
     `
 };
 const PopoverDiv = /*#__PURE__*/ styled("div", {
-    target: "egy90l40",
+    target: "ejcb1ps0",
     label: "PopoverDiv"
 })("position:relative;display:inline-flex;");
 const Popper = /*#__PURE__*/ styled(Card, {
-    target: "egy90l41",
+    target: "ejcb1ps1",
     label: "Popper"
 })("position:absolute;width:100%;min-width:200px;overflow:auto;animation:enter 0.3s linear;border-radius:3px;z-index:1;transform:translate(", (props)=>props.translateX, "px,", (props)=>props.translateY, "px);", (props)=>positionMap$2[props.position], "    &.closing{animation:exit 0.3s linear;}@keyframes enter{from{max-height:0px;opacity:1;overflow:hidden;}to{max-height:300px;opacity:1;overflow:hidden;}}@keyframes exit{to{max-height:0px;opacity:1;overflow:hidden;}from{max-height:300px;opacity:1;overflow:hidden;}}");
 const KEY_CODES = {
     ESC: 27
 };
-function PopoverComponent(props, ref) {
+/**
+ * Popover Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
+ */ function PopoverComponent(props, ref) {
     const { open: propsOpen, element, position = "BOTTOM_LEFT", closeOnEsc = true, onClose, children, ...rest } = props;
     const [open, setOpen] = useState(propsOpen);
     const [closing, setClosing] = useState(false);