no-frills-ui 0.0.14-alpha.8 → 0.0.14-rc.0

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

@@ -25,7 +25,7 @@ declare class NotificationManager extends React.Component<NotificationManagerPro
      *
      * @param id
      */
-    remove: (id: string) => void;
+    remove: (id?: string) => void;
     /**
      * Adds a notification to stack.
      *
@@ -44,19 +44,19 @@ declare class NotificationManager extends React.Component<NotificationManagerPro
      *
      * @param id
      */
-    closeClickHandler: (id: string) => () => void;
+    closeClickHandler: (id?: string) => () => void;
     /**
      * Pause notification when user is hovering over it.
      *
      * @param id
      */
-    pause: (id: string) => () => void;
+    pause: (id?: string) => () => void;
     /**
      * Restart the removal of notification.
      *
      * @param id
      */
-    resume: (id: string) => () => void;
+    resume: (id?: string) => () => void;
     /**
      * Clean up all pending timeouts when component unmounts
      */

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

@@ -9,7 +9,7 @@ import CheckCircle$3 from '../../icons/ErrorOutline.js';
 import ActionButton from '../Button/ActionButton.js';
 import Close from '../../icons/Close.js';
 
-const DEFAULT_DURATION = 5000;
+const DEFAULT_DURATION$1 = 5000;
 /**
  * Notification Manager class
  */ class NotificationManager extends React.Component {
@@ -106,6 +106,7 @@ const DEFAULT_DURATION = 5000;
      *
      * @param id
      */ this.remove = (id)=>{
+            if (!id) return;
             // Trigger leaving animation.
             this.setState({
                 notices: this.state.notices.map((notice)=>({
@@ -150,22 +151,22 @@ const DEFAULT_DURATION = 5000;
                 const type = notice.type || NOTIFICATION_TYPE.INFO;
                 const isUrgent = type === NOTIFICATION_TYPE.WARNING || type === NOTIFICATION_TYPE.DANGER;
                 // Add notice to the top of stack.
-                this.setState({
-                    notices: [
-                        {
-                            ...notice,
-                            id
-                        },
-                        ...this.state.notices
-                    ]
-                }, ()=>{
+                this.setState((prevState)=>({
+                        notices: [
+                            {
+                                ...notice,
+                                id
+                            },
+                            ...prevState.notices
+                        ]
+                    }), ()=>{
                     // Update live region after state update
                     const announcement = `${notice.title} ${notice.description}`;
                     this.updateLiveRegion(announcement, isUrgent);
                 });
                 // set timeout for closing the notification.
                 if (!notice.sticky) {
-                    this.timeouts[id] = setTimeout(()=>this.remove(id), notice.duration || DEFAULT_DURATION);
+                    this.timeouts[id] = setTimeout(()=>this.remove(id), notice.duration || DEFAULT_DURATION$1);
                 }
                 // Add id to the set.
                 this.set.add(id);
@@ -197,15 +198,18 @@ const DEFAULT_DURATION = 5000;
      *
      * @param id
      */ this.pause = (id)=>()=>{
-                clearTimeout(this.timeouts[id]);
+                if (id && this.timeouts[id]) {
+                    clearTimeout(this.timeouts[id]);
+                    delete this.timeouts[id];
+                }
             }, /**
      * Restart the removal of notification.
      *
      * @param id
      */ this.resume = (id)=>()=>{
                 const notice = this.state.notices.find((notice)=>notice.id === id);
-                if (!notice.sticky) {
-                    this.timeouts[id] = setTimeout(()=>this.remove(id), DEFAULT_DURATION);
+                if (!notice?.sticky && id && !this.timeouts[id]) {
+                    this.timeouts[id] = setTimeout(()=>this.remove(id), DEFAULT_DURATION$1);
                 }
             };
     }

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        // 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) {\n                        console.warn('Error in notification close callback', e.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                {\n                    notices: [\n                        {\n                            ...notice,\n                            id,\n                        },\n                        ...this.state.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        clearTimeout(this.timeouts[id]);\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) {\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","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/Notification/style.d.ts

@@ -9,9 +9,8 @@ export declare const Container: import("@emotion/styled").StyledComponent<{
     position: NOTIFICATION_POSITION;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Notice: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & import("../Card/Card").CardExtraProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    elevated?: boolean;
+} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 } & NoticeProp, {}, {}>;
 export declare const Title: import("@emotion/styled").StyledComponent<{

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

@@ -57,42 +57,42 @@ const getTypeStyle = (type)=>{
             return `color: ${getThemeValue(THEME_NAME.WARNING)}`;
     }
 };
-const Container = /*#__PURE__*/ styled("div", {
-    target: "e1cfscy10",
+const Container$2 = /*#__PURE__*/ styled("div", {
+    target: "e10n1sw0",
     label: "Container"
 })("display:flex;flex-direction:", (props)=>props.position === NOTIFICATION_POSITION.TOP_LEFT || props.position === NOTIFICATION_POSITION.TOP_RIGHT ? 'column' : 'column-reverse', ";");
 const Notice = /*#__PURE__*/ styled(Card, {
-    target: "e1cfscy11",
+    target: "e10n1sw1",
     label: "Notice"
 })("position:relative;border-radius:3px;border-left:4px solid ", (props)=>getBorderColor(props.type), ";width:300px;display:flex;padding:0 5px 5px 0;overflow:hidden;animation:", (props)=>getEntryAnimation(props.position), " 0.6s ease;& svg{fill:currentColor;vertical-align:middle;width:20px;height:20px;}&.leave{animation:", (props)=>getExitAnimation(props.position), " 0.6s;}@keyframes in-right{from{transform:translateX(100%);max-height:0;opacity:0;}to{transform:translateX(0%);max-height:150px;opacity:1;}}@keyframes out-right{to{transform:translateX(100%);max-height:0;opacity:0;}from{transform:translateX(0%);max-height:100px;opacity:1;}}@keyframes in-left{from{transform:translateX(-100%);max-height:0;opacity:0;}to{transform:translateX(0%);max-height:150px;opacity:1;}}@keyframes out-left{to{transform:translateX(-100%);max-height:0;opacity:0;}from{transform:translateX(0%);max-height:100px;opacity:1;}}");
 const Title = /*#__PURE__*/ styled("div", {
-    target: "e1cfscy12",
+    target: "e10n1sw2",
     label: "Title"
 })("padding:5px 0;font-size:14px;color:", (props)=>getTitleColor(props.type), ";display:flex;align-items:center;");
 const FillParent = /*#__PURE__*/ styled("div", {
-    target: "e1cfscy13",
+    target: "e10n1sw3",
     label: "FillParent"
 })("flex:1;");
 const CloseButton = /*#__PURE__*/ styled("button", {
-    target: "e1cfscy14",
+    target: "e10n1sw4",
     label: "CloseButton"
 })("position:absolute;background-color:transparent;border:none;padding:0;top:4px;right:4px;cursor:pointer;color:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";&:focus{box-shadow:0 0 0 3px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";border-radius:3px;}");
 const Body = /*#__PURE__*/ styled("div", {
-    target: "e1cfscy15",
+    target: "e10n1sw5",
     label: "Body"
 })("padding:5px 5px 5px 0;font-size:14px;");
 const IconContainer = /*#__PURE__*/ styled("div", {
-    target: "e1cfscy16",
+    target: "e10n1sw6",
     label: "IconContainer"
 })("padding:6px 10px;", (props)=>getTypeStyle(props.type), ";");
 const Footer = /*#__PURE__*/ styled("div", {
-    target: "e1cfscy17",
+    target: "e10n1sw7",
     label: "Footer"
 })("display:flex;justify-content:flex-end;padding:0 5px;");
 const VisuallyHidden = /*#__PURE__*/ styled("span", {
-    target: "e1cfscy18",
+    target: "e10n1sw8",
     label: "VisuallyHidden"
 })("position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;");
 
-export { Body, CloseButton, Container, FillParent, Footer, IconContainer, Notice, Title, VisuallyHidden };
+export { Body, CloseButton, Container$2 as Container, FillParent, Footer, IconContainer, Notice, Title, VisuallyHidden };
 //# sourceMappingURL=style.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/Notification/style.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport { Card } from '../Card';\nimport { NOTIFICATION_POSITION, NOTIFICATION_TYPE, NotificationOptions } from './types';\n\nconst getEntryAnimation = (position: NOTIFICATION_POSITION) => {\n    switch (position) {\n        case NOTIFICATION_POSITION.TOP_LEFT:\n        case NOTIFICATION_POSITION.BOTTOM_LEFT:\n            return 'in-left';\n        default:\n            return 'in-right';\n    }\n};\n\nconst getExitAnimation = (position: NOTIFICATION_POSITION) => {\n    switch (position) {\n        case NOTIFICATION_POSITION.TOP_LEFT:\n        case NOTIFICATION_POSITION.BOTTOM_LEFT:\n            return 'out-left';\n        default:\n            return 'out-right';\n    }\n};\n\nconst getBorderColor = (type: NOTIFICATION_TYPE) => {\n    switch (type) {\n        case NOTIFICATION_TYPE.SUCCESS:\n            return getThemeValue(THEME_NAME.SUCCESS_LIGHT);\n        case NOTIFICATION_TYPE.DANGER:\n            return getThemeValue(THEME_NAME.ERROR_LIGHT);\n        case NOTIFICATION_TYPE.WARNING:\n            return getThemeValue(THEME_NAME.WARNING_LIGHT);\n        default:\n            return getThemeValue(THEME_NAME.INFO_LIGHT);\n    }\n};\n\nconst getTitleColor = (type: NOTIFICATION_TYPE) => {\n    switch (type) {\n        case NOTIFICATION_TYPE.SUCCESS:\n            return getThemeValue(THEME_NAME.SUCCESS);\n        case NOTIFICATION_TYPE.DANGER:\n            return getThemeValue(THEME_NAME.ERROR);\n        case NOTIFICATION_TYPE.WARNING:\n            return getThemeValue(THEME_NAME.WARNING);\n        case NOTIFICATION_TYPE.INFO:\n            return getThemeValue(THEME_NAME.INFO);\n    }\n};\n\nconst getTypeStyle = (type: NOTIFICATION_TYPE) => {\n    switch (type) {\n        case NOTIFICATION_TYPE.INFO:\n            return `color: ${getThemeValue(THEME_NAME.INFO)}`;\n        case NOTIFICATION_TYPE.SUCCESS:\n            return `color: ${getThemeValue(THEME_NAME.SUCCESS)}`;\n        case NOTIFICATION_TYPE.DANGER:\n            return `color: ${getThemeValue(THEME_NAME.ERROR)}`;\n        case NOTIFICATION_TYPE.WARNING:\n            return `color: ${getThemeValue(THEME_NAME.WARNING)}`;\n    }\n};\n\ninterface NoticeProp extends NotificationOptions {\n    position: NOTIFICATION_POSITION;\n}\n\nexport const Container = styled.div<{ position: NOTIFICATION_POSITION }>`\n    display: flex;\n    flex-direction: ${(props) =>\n        props.position === NOTIFICATION_POSITION.TOP_LEFT ||\n        props.position === NOTIFICATION_POSITION.TOP_RIGHT\n            ? 'column'\n            : 'column-reverse'};\n`;\n\nexport const Notice = styled(Card)<NoticeProp>`\n    position: relative;\n    border-radius: 3px;\n    border-left: 4px solid ${(props) => getBorderColor(props.type)};\n    width: 300px;\n    display: flex;\n    padding: 0 5px 5px 0;\n    overflow: hidden;\n    animation: ${(props) => getEntryAnimation(props.position)} 0.6s ease;\n\n    & svg {\n        fill: currentColor;\n        vertical-align: middle;\n        width: 20px;\n        height: 20px;\n    }\n\n    &.leave {\n        animation: ${(props) => getExitAnimation(props.position)} 0.6s;\n    }\n\n    @keyframes in-right {\n        from {\n            transform: translateX(100%);\n            max-height: 0;\n            opacity: 0;\n        }\n\n        to {\n            transform: translateX(0%);\n            max-height: 150px;\n            opacity: 1;\n        }\n    }\n\n    @keyframes out-right {\n        to {\n            transform: translateX(100%);\n            max-height: 0;\n            opacity: 0;\n        }\n\n        from {\n            transform: translateX(0%);\n            max-height: 100px;\n            opacity: 1;\n        }\n    }\n\n    @keyframes in-left {\n        from {\n            transform: translateX(-100%);\n            max-height: 0;\n            opacity: 0;\n        }\n\n        to {\n            transform: translateX(0%);\n            max-height: 150px;\n            opacity: 1;\n        }\n    }\n\n    @keyframes out-left {\n        to {\n            transform: translateX(-100%);\n            max-height: 0;\n            opacity: 0;\n        }\n\n        from {\n            transform: translateX(0%);\n            max-height: 100px;\n            opacity: 1;\n        }\n    }\n`;\n\nexport const Title = styled.div<{ type: NOTIFICATION_TYPE }>`\n    padding: 5px 0;\n    font-size: 14px;\n    color: ${(props) => getTitleColor(props.type)};\n    display: flex;\n    align-items: center;\n`;\n\nexport const FillParent = styled.div`\n    flex: 1;\n`;\n\nexport const CloseButton = styled.button`\n    position: absolute;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    top: 4px;\n    right: 4px;\n    cursor: pointer;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n\n    &:focus {\n        box-shadow: 0 0 0 3px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n        border-radius: 3px;\n    }\n`;\n\nexport const Body = styled.div`\n    padding: 5px 5px 5px 0;\n    font-size: 14px;\n`;\n\nexport const IconContainer = styled.div<{ type: NOTIFICATION_TYPE }>`\n    padding: 6px 10px;\n    ${(props) => getTypeStyle(props.type)};\n`;\n\nexport const Footer = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    padding: 0 5px;\n`;\n\nexport const VisuallyHidden = styled.span`\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n`;\n"],"names":["getEntryAnimation","position","NOTIFICATION_POSITION","TOP_LEFT","BOTTOM_LEFT","getExitAnimation","getBorderColor","type","NOTIFICATION_TYPE","SUCCESS","getThemeValue","THEME_NAME","SUCCESS_LIGHT","DANGER","ERROR_LIGHT","WARNING","WARNING_LIGHT","INFO_LIGHT","getTitleColor","ERROR","INFO","getTypeStyle","Container","styled","props","TOP_RIGHT","Notice","Card","Title","FillParent","CloseButton","TEXT_COLOR_DARK","PRIMARY_LIGHT","Body","IconContainer","Footer","VisuallyHidden"],"mappings":"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"}
+{"version":3,"file":"style.js","sources":["../../../src/components/Notification/style.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport { Card } from '../Card';\nimport { NOTIFICATION_POSITION, NOTIFICATION_TYPE, NotificationOptions } from './types';\n\nconst getEntryAnimation = (position: NOTIFICATION_POSITION) => {\n    switch (position) {\n        case NOTIFICATION_POSITION.TOP_LEFT:\n        case NOTIFICATION_POSITION.BOTTOM_LEFT:\n            return 'in-left';\n        default:\n            return 'in-right';\n    }\n};\n\nconst getExitAnimation = (position: NOTIFICATION_POSITION) => {\n    switch (position) {\n        case NOTIFICATION_POSITION.TOP_LEFT:\n        case NOTIFICATION_POSITION.BOTTOM_LEFT:\n            return 'out-left';\n        default:\n            return 'out-right';\n    }\n};\n\nconst getBorderColor = (type?: NOTIFICATION_TYPE) => {\n    switch (type) {\n        case NOTIFICATION_TYPE.SUCCESS:\n            return getThemeValue(THEME_NAME.SUCCESS_LIGHT);\n        case NOTIFICATION_TYPE.DANGER:\n            return getThemeValue(THEME_NAME.ERROR_LIGHT);\n        case NOTIFICATION_TYPE.WARNING:\n            return getThemeValue(THEME_NAME.WARNING_LIGHT);\n        default:\n            return getThemeValue(THEME_NAME.INFO_LIGHT);\n    }\n};\n\nconst getTitleColor = (type: NOTIFICATION_TYPE) => {\n    switch (type) {\n        case NOTIFICATION_TYPE.SUCCESS:\n            return getThemeValue(THEME_NAME.SUCCESS);\n        case NOTIFICATION_TYPE.DANGER:\n            return getThemeValue(THEME_NAME.ERROR);\n        case NOTIFICATION_TYPE.WARNING:\n            return getThemeValue(THEME_NAME.WARNING);\n        case NOTIFICATION_TYPE.INFO:\n            return getThemeValue(THEME_NAME.INFO);\n    }\n};\n\nconst getTypeStyle = (type: NOTIFICATION_TYPE) => {\n    switch (type) {\n        case NOTIFICATION_TYPE.INFO:\n            return `color: ${getThemeValue(THEME_NAME.INFO)}`;\n        case NOTIFICATION_TYPE.SUCCESS:\n            return `color: ${getThemeValue(THEME_NAME.SUCCESS)}`;\n        case NOTIFICATION_TYPE.DANGER:\n            return `color: ${getThemeValue(THEME_NAME.ERROR)}`;\n        case NOTIFICATION_TYPE.WARNING:\n            return `color: ${getThemeValue(THEME_NAME.WARNING)}`;\n    }\n};\n\ninterface NoticeProp extends NotificationOptions {\n    position: NOTIFICATION_POSITION;\n}\n\nexport const Container = styled.div<{ position: NOTIFICATION_POSITION }>`\n    display: flex;\n    flex-direction: ${(props) =>\n        props.position === NOTIFICATION_POSITION.TOP_LEFT ||\n        props.position === NOTIFICATION_POSITION.TOP_RIGHT\n            ? 'column'\n            : 'column-reverse'};\n`;\n\nexport const Notice = styled(Card)<NoticeProp>`\n    position: relative;\n    border-radius: 3px;\n    border-left: 4px solid ${(props) => getBorderColor(props.type)};\n    width: 300px;\n    display: flex;\n    padding: 0 5px 5px 0;\n    overflow: hidden;\n    animation: ${(props) => getEntryAnimation(props.position)} 0.6s ease;\n\n    & svg {\n        fill: currentColor;\n        vertical-align: middle;\n        width: 20px;\n        height: 20px;\n    }\n\n    &.leave {\n        animation: ${(props) => getExitAnimation(props.position)} 0.6s;\n    }\n\n    @keyframes in-right {\n        from {\n            transform: translateX(100%);\n            max-height: 0;\n            opacity: 0;\n        }\n\n        to {\n            transform: translateX(0%);\n            max-height: 150px;\n            opacity: 1;\n        }\n    }\n\n    @keyframes out-right {\n        to {\n            transform: translateX(100%);\n            max-height: 0;\n            opacity: 0;\n        }\n\n        from {\n            transform: translateX(0%);\n            max-height: 100px;\n            opacity: 1;\n        }\n    }\n\n    @keyframes in-left {\n        from {\n            transform: translateX(-100%);\n            max-height: 0;\n            opacity: 0;\n        }\n\n        to {\n            transform: translateX(0%);\n            max-height: 150px;\n            opacity: 1;\n        }\n    }\n\n    @keyframes out-left {\n        to {\n            transform: translateX(-100%);\n            max-height: 0;\n            opacity: 0;\n        }\n\n        from {\n            transform: translateX(0%);\n            max-height: 100px;\n            opacity: 1;\n        }\n    }\n`;\n\nexport const Title = styled.div<{ type: NOTIFICATION_TYPE }>`\n    padding: 5px 0;\n    font-size: 14px;\n    color: ${(props) => getTitleColor(props.type)};\n    display: flex;\n    align-items: center;\n`;\n\nexport const FillParent = styled.div`\n    flex: 1;\n`;\n\nexport const CloseButton = styled.button`\n    position: absolute;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    top: 4px;\n    right: 4px;\n    cursor: pointer;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n\n    &:focus {\n        box-shadow: 0 0 0 3px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n        border-radius: 3px;\n    }\n`;\n\nexport const Body = styled.div`\n    padding: 5px 5px 5px 0;\n    font-size: 14px;\n`;\n\nexport const IconContainer = styled.div<{ type: NOTIFICATION_TYPE }>`\n    padding: 6px 10px;\n    ${(props) => getTypeStyle(props.type)};\n`;\n\nexport const Footer = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    padding: 0 5px;\n`;\n\nexport const VisuallyHidden = styled.span`\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n`;\n"],"names":["getEntryAnimation","position","NOTIFICATION_POSITION","TOP_LEFT","BOTTOM_LEFT","getExitAnimation","getBorderColor","type","NOTIFICATION_TYPE","SUCCESS","getThemeValue","THEME_NAME","SUCCESS_LIGHT","DANGER","ERROR_LIGHT","WARNING","WARNING_LIGHT","INFO_LIGHT","getTitleColor","ERROR","INFO","getTypeStyle","Container","styled","props","TOP_RIGHT","Notice","Card","Title","FillParent","CloseButton","TEXT_COLOR_DARK","PRIMARY_LIGHT","Body","IconContainer","Footer","VisuallyHidden"],"mappings":"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"}

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

@@ -1,28 +1,29 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 export declare enum POPOVER_POSITION {
     TOP_LEFT = "TOP_LEFT",
     TOP_RIGHT = "TOP_RIGHT",
     BOTTOM_LEFT = "BOTTOM_LEFT",
     BOTTOM_RIGHT = "BOTTOM_RIGHT"
 }
-declare function Popover(props: React.PropsWithChildren<PropTypes.InferProps<typeof Popover.propTypes>>): import("@emotion/react/jsx-runtime").JSX.Element;
-declare namespace Popover {
-    var propTypes: {
-        /** Opens the popover */
-        open: PropTypes.Validator<boolean>;
-        /** Anchor element for the popover */
-        element: PropTypes.Requireable<(...args: any[]) => any>;
-        /** Position of the popover around anchor element */
-        position: PropTypes.Requireable<POPOVER_POSITION>;
-        /** If the popover should close on `esc` key press */
-        closeOnEsc: PropTypes.Requireable<boolean>;
-        /** Popover close callback */
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    var defaultProps: {
-        closeOnEsc: boolean;
-        position: POPOVER_POSITION;
-    };
-}
+type PopoverProps = {
+    /** Opens the popover */
+    open: boolean;
+    /** Anchor element for the popover */
+    element: React.ElementType;
+    /**
+     * Position of the popover around anchor element
+     * @default POPOVER_POSITION.BOTTOM_LEFT
+     */
+    position?: POPOVER_POSITION;
+    /**
+     * If the popover should close on `esc` key press
+     * @default true
+     */
+    closeOnEsc?: boolean;
+    /** Popover close callback */
+    onClose?: () => void;
+};
+declare const Popover: React.ForwardRefExoticComponent<PopoverProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Popover;

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

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 import React, { useState, useRef, useId, useCallback, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import Card from '../Card/Card.js';
 
@@ -11,7 +10,7 @@ var POPOVER_POSITION = /*#__PURE__*/ function(POPOVER_POSITION) {
     POPOVER_POSITION["BOTTOM_RIGHT"] = "BOTTOM_RIGHT";
     return POPOVER_POSITION;
 }({});
-const positionMap = {
+const positionMap$2 = {
     ["TOP_LEFT"]: `
         bottom: calc(100% - 10px);
         left: 0;
@@ -30,25 +29,30 @@ const positionMap = {
     `
 };
 const PopoverDiv = /*#__PURE__*/ styled("div", {
-    target: "e1oy1jnn0",
+    target: "ejcb1ps0",
     label: "PopoverDiv"
 })("position:relative;display:inline-flex;");
 const Popper = /*#__PURE__*/ styled(Card, {
-    target: "e1oy1jnn1",
+    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[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;}}");
+})("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 Popover(props) {
-    const [open, setOpen] = useState(props.open);
+/**
+ * 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);
     const [translate, setTranslate] = useState({
         x: 0,
         y: 0
     });
-    const popperRef = useRef();
-    const containerRef = useRef();
+    const popperRef = useRef(null);
+    const containerRef = useRef(null);
     const triggerRef = useRef(null);
     const closeTimeoutRef = useRef(null);
     const focusTimeoutRef = useRef(null);
@@ -69,8 +73,8 @@ function Popover(props) {
                 x: 0,
                 y: 0
             });
-            if (props.onClose) {
-                props.onClose();
+            if (onClose) {
+                onClose();
             }
             setClosing(false);
             // Restore focus to the trigger element after animation completes
@@ -83,15 +87,15 @@ function Popover(props) {
             closeTimeoutRef.current = null;
         }, 280);
     }, [
-        props
+        onClose
     ]);
     const keyupEventHandler = useCallback((e)=>{
-        if (props.closeOnEsc && e.keyCode === KEY_CODES.ESC) {
+        if (closeOnEsc && e.keyCode === KEY_CODES.ESC) {
             close();
         }
     }, [
         close,
-        props.closeOnEsc
+        closeOnEsc
     ]);
     const clickOutsideHandler = useCallback((e)=>{
         if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -111,7 +115,7 @@ function Popover(props) {
         keyupEventHandler
     ]);
     useEffect(()=>{
-        if (props.open) {
+        if (propsOpen) {
             setOpen(true);
             // Use requestAnimationFrame to add listener after current event loop
             const rafId = requestAnimationFrame(()=>{
@@ -127,22 +131,22 @@ function Popover(props) {
             }
         }
     }, [
-        props.open,
+        propsOpen,
         open,
         clickOutsideHandler,
         close
     ]);
     useEffect(()=>{
         if (open) {
-            const { top, left, right } = popperRef.current.getBoundingClientRect();
-            const height = popperRef.current.scrollHeight;
+            const { top = 0, left = 0, right = 0 } = popperRef.current?.getBoundingClientRect() ?? {};
+            const height = popperRef.current?.scrollHeight ?? 0;
             const viewportWidth = document.documentElement.clientWidth;
             const viewportHeight = document.documentElement.clientHeight;
             const translation = {
                 x: 0,
                 y: 0
             };
-            if (props.position === "BOTTOM_LEFT") {
+            if (position === "BOTTOM_LEFT") {
                 // overflow can happen at bottom and right
                 if (viewportHeight - top - height < 0) {
                     translation.y = -1 * (Math.abs(viewportHeight - top - height) + 5);
@@ -150,7 +154,7 @@ function Popover(props) {
                 if (viewportWidth - right < 0) {
                     translation.x = -1 * (Math.abs(viewportWidth - right) + 5);
                 }
-            } else if (props.position == "BOTTOM_RIGHT") {
+            } else if (position == "BOTTOM_RIGHT") {
                 // overflow can happen at bottom and left
                 if (viewportHeight - top - height < 0) {
                     translation.y = -1 * (Math.abs(viewportHeight - top - height) + 5);
@@ -158,7 +162,7 @@ function Popover(props) {
                 if (left < 0) {
                     translation.x = Math.abs(left) + 5;
                 }
-            } else if (props.position === "TOP_LEFT") {
+            } else if (position === "TOP_LEFT") {
                 // overflow can happen at top and right
                 if (top - height < 0) {
                     translation.y = Math.abs(top - height) + 5;
@@ -178,11 +182,11 @@ function Popover(props) {
             // Note it can still overflow, but in that case fitting popper inside the
             // window is not possible.
             setTranslate(translation);
-            popperRef.current.focus();
+            popperRef.current?.focus();
         }
     }, [
         open,
-        props.position
+        position
     ]);
     /**
      * Cleanup timeouts on unmount
@@ -196,10 +200,19 @@ function Popover(props) {
             }
         };
     }, []);
+    const forwardRef = (node)=>{
+        containerRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        } else if (ref) {
+            ref.current = node;
+        }
+    };
     return /*#__PURE__*/ jsxs(PopoverDiv, {
-        ref: containerRef,
+        ref: forwardRef,
+        ...rest,
         children: [
-            /*#__PURE__*/ React.createElement(props.element, {
+            /*#__PURE__*/ React.createElement(element, {
                 ref: triggerRef,
                 id: triggerId,
                 'aria-expanded': open,
@@ -212,36 +225,21 @@ function Popover(props) {
                 role: "dialog",
                 "aria-labelledby": triggerId,
                 id: popperId,
-                position: props.position,
+                position: position,
                 translateX: translate.x,
                 translateY: translate.y,
-                className: closing && 'closing',
+                className: closing ? 'closing' : '',
                 ref: popperRef,
                 onClick: (e)=>{
                     e.stopPropagation();
                     e.nativeEvent.stopImmediatePropagation();
                 },
-                children: props.children
+                children: children
             })
         ]
     });
 }
-Popover.propTypes = {
-    /** Opens the popover */ open: PropTypes.bool.isRequired,
-    /** Anchor element for the popover */ element: PropTypes.func,
-    /** Position of the popover around anchor element */ position: PropTypes.oneOf([
-        "TOP_LEFT",
-        "TOP_RIGHT",
-        "BOTTOM_LEFT",
-        "BOTTOM_RIGHT"
-    ]),
-    /** If the popover should close on `esc` key press */ closeOnEsc: PropTypes.bool,
-    /** Popover close callback */ onClose: PropTypes.func
-};
-Popover.defaultProps = {
-    closeOnEsc: true,
-    position: "BOTTOM_LEFT"
-};
+const Popover = /*#__PURE__*/ React.forwardRef(PopoverComponent);
 
 export { POPOVER_POSITION, Popover as default };
 //# sourceMappingURL=Popover.js.map