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

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationManager.js","sourceRoot":"","sources":["../../../src/components/Notification/NotificationManager.tsx"],"names":[],"mappings":"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","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} 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}\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    /**\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 = (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            // Add notice to the top of stack.\n            this.setState({\n                notices: [\n                    {\n                        ...notice,\n                        id,\n                    },\n                    ...this.state.notices,\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     * 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    render() {\n        return (\n            <Container position={this.props.position}>\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                    } = notice;\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                        >\n                            <IconContainer type={type}>\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}>\n                                    <FillParent>{title}</FillParent>\n                                    <CloseButton onClick={this.closeClickHandler(id)}>\n                                        <Close />\n                                    </CloseButton>\n                                </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                        </Notice>\n                    );\n                })}\n            </Container>\n        );\n    }\n}\n\nexport default NotificationManager;\n"]}
+{"version":3,"file":"NotificationManager.js","sourceRoot":"","sources":["../../../src/components/Notification/NotificationManager.tsx"],"names":[],"mappings":"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","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    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"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/style.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AA6DxF,UAAU,UAAW,SAAQ,mBAAmB;IAC5C,QAAQ,EAAE,qBAAqB,CAAC;CACnC;AAED,eAAO,MAAM,SAAS;;SAlDd,MAAK,WAAU;;cAkDyB,qBAAqB;yGAOpE,CAAC;AAEF,eAAO,MAAM,MAAM;;SA3DX,MAAK,WAAU;;;uBAsItB,CAAC;AAEF,eAAO,MAAM,KAAK;;SAxIV,MAAK,WAAU;;UAwIiB,iBAAiB;yGAMxD,CAAC;AAEF,eAAO,MAAM,UAAU;;SAhJf,MAAK,WAAU;yGAkJtB,CAAC;AAEF,eAAO,MAAM,WAAW;;SApJhB,MAAK,WAAU;qHA8JtB,CAAC;AAEF,eAAO,MAAM,IAAI;;SAhKT,MAAK,WAAU;yGAmKtB,CAAC;AAEF,eAAO,MAAM,aAAa;;SArKlB,MAAK,WAAU;;UAqKyB,iBAAiB;yGAGhE,CAAC;AAEF,eAAO,MAAM,MAAM;;SA1KX,MAAK,WAAU;yGA8KtB,CAAC"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/style.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AA6DxF,UAAU,UAAW,SAAQ,mBAAmB;IAC5C,QAAQ,EAAE,qBAAqB,CAAC;CACnC;AAED,eAAO,MAAM,SAAS;;SAnDQ,MAAO,WAClC;;cAkD6C,qBAAqB;yGAOpE,CAAC;AAEF,eAAO,MAAM,MAAM;;SA5DW,MAAO,WAClC;;;uBAuIF,CAAC;AAEF,eAAO,MAAM,KAAK;;SA1IY,MAAO,WAClC;;UAyIqC,iBAAiB;yGAMxD,CAAC;AAEF,eAAO,MAAM,UAAU;;SAlJO,MAAO,WAClC;yGAmJF,CAAC;AAEF,eAAO,MAAM,WAAW;;SAtJM,MAAO,WAClC;qHAkKF,CAAC;AAEF,eAAO,MAAM,IAAI;;SArKa,MAAO,WAClC;yGAuKF,CAAC;AAEF,eAAO,MAAM,aAAa;;SA1KI,MAAO,WAClC;;UAyK6C,iBAAiB;yGAGhE,CAAC;AAEF,eAAO,MAAM,MAAM;;SA/KW,MAAO,WAClC;yGAkLF,CAAC;AAEF,eAAO,MAAM,cAAc;;SArLG,MAAO,WAClC;2GA8LF,CAAC"}

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

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
+import { getThemeValue, THEME_NAME } from '../../shared/constants';
 import { Card } from '../Card';
 import { NOTIFICATION_POSITION, NOTIFICATION_TYPE } from './types';
 const getEntryAnimation = (position) => {
@@ -23,37 +23,37 @@ const getExitAnimation = (position) => {
 const getBorderColor = (type) => {
     switch (type) {
         case NOTIFICATION_TYPE.SUCCESS:
-            return `var(--success-light, ${constants.SUCCESS_LIGHT})`;
+            return getThemeValue(THEME_NAME.SUCCESS_LIGHT);
         case NOTIFICATION_TYPE.DANGER:
-            return `var(--error-light, ${constants.ERROR_LIGHT})`;
+            return getThemeValue(THEME_NAME.ERROR_LIGHT);
         case NOTIFICATION_TYPE.WARNING:
-            return `var(--warning-light, ${constants.WARNING_LIGHT})`;
+            return getThemeValue(THEME_NAME.WARNING_LIGHT);
         default:
-            return `var(--info-light, ${constants.INFO_LIGHT})`;
+            return getThemeValue(THEME_NAME.INFO_LIGHT);
     }
 };
 const getTitleColor = (type) => {
     switch (type) {
         case NOTIFICATION_TYPE.SUCCESS:
-            return `var(--success, ${constants.SUCCESS})`;
+            return getThemeValue(THEME_NAME.SUCCESS);
         case NOTIFICATION_TYPE.DANGER:
-            return `var(--error, ${constants.ERROR})`;
+            return getThemeValue(THEME_NAME.ERROR);
         case NOTIFICATION_TYPE.WARNING:
-            return `var(--warning, ${constants.WARNING})`;
+            return getThemeValue(THEME_NAME.WARNING);
         case NOTIFICATION_TYPE.INFO:
-            return `var(--info, ${constants.INFO})`;
+            return getThemeValue(THEME_NAME.INFO);
     }
 };
 const getTypeStyle = (type) => {
     switch (type) {
         case NOTIFICATION_TYPE.INFO:
-            return `color:  var(--info, ${constants.INFO})`;
+            return `color: ${getThemeValue(THEME_NAME.INFO)}`;
         case NOTIFICATION_TYPE.SUCCESS:
-            return `color: var(--success, ${constants.SUCCESS})`;
+            return `color: ${getThemeValue(THEME_NAME.SUCCESS)}`;
         case NOTIFICATION_TYPE.DANGER:
-            return `color: var(--error, ${constants.ERROR})`;
+            return `color: ${getThemeValue(THEME_NAME.ERROR)}`;
         case NOTIFICATION_TYPE.WARNING:
-            return `color: var(--warning, ${constants.WARNING})`;
+            return `color: ${getThemeValue(THEME_NAME.WARNING)}`;
     }
 };
 export const Container = styled.div `
@@ -64,6 +64,7 @@ export const Container = styled.div `
     : 'column-reverse'};
 `;
 export const Notice = styled(Card) `
+    position: relative;
     border-radius: 3px;
     border-left: 4px solid ${(props) => getBorderColor(props.type)};
     width: 300px;
@@ -150,13 +151,16 @@ export const FillParent = styled.div `
     flex: 1;
 `;
 export const CloseButton = styled.button `
+    position: absolute;
     background-color: transparent;
     border: none;
-    padding: none;
+    padding: 0;
+    top: 4px;
+    right: 4px;
     cursor: pointer;
 
     &:focus {
-        box-shadow: 0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT});
+        box-shadow: 0 0 0 3px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
         border-radius: 3px;
     }
 `;
@@ -173,4 +177,15 @@ export const Footer = styled.div `
     justify-content: flex-end;
     padding: 0 5px;
 `;
+export const VisuallyHidden = styled.span `
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+`;
 //# sourceMappingURL=style.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/components/Notification/style.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAuB,MAAM,SAAS,CAAC;AAExF,MAAM,iBAAiB,GAAG,CAAC,QAA+B,EAAE,EAAE;IAC1D,QAAQ,QAAQ,EAAE,CAAC;QACf,KAAK,qBAAqB,CAAC,QAAQ,CAAC;QACpC,KAAK,qBAAqB,CAAC,WAAW;YAClC,OAAO,SAAS,CAAC;QACrB;YACI,OAAO,UAAU,CAAC;IAC1B,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,QAA+B,EAAE,EAAE;IACzD,QAAQ,QAAQ,EAAE,CAAC;QACf,KAAK,qBAAqB,CAAC,QAAQ,CAAC;QACpC,KAAK,qBAAqB,CAAC,WAAW;YAClC,OAAO,UAAU,CAAC;QACtB;YACI,OAAO,WAAW,CAAC;IAC3B,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,IAAuB,EAAE,EAAE;IAC/C,QAAQ,IAAI,EAAE,CAAC;QACX,KAAK,iBAAiB,CAAC,OAAO;YAC1B,OAAO,wBAAwB,SAAS,CAAC,aAAa,GAAG,CAAC;QAC9D,KAAK,iBAAiB,CAAC,MAAM;YACzB,OAAO,sBAAsB,SAAS,CAAC,WAAW,GAAG,CAAC;QAC1D,KAAK,iBAAiB,CAAC,OAAO;YAC1B,OAAO,wBAAwB,SAAS,CAAC,aAAa,GAAG,CAAC;QAC9D;YACI,OAAO,qBAAqB,SAAS,CAAC,UAAU,GAAG,CAAC;IAC5D,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,IAAuB,EAAE,EAAE;IAC9C,QAAQ,IAAI,EAAE,CAAC;QACX,KAAK,iBAAiB,CAAC,OAAO;YAC1B,OAAO,kBAAkB,SAAS,CAAC,OAAO,GAAG,CAAC;QAClD,KAAK,iBAAiB,CAAC,MAAM;YACzB,OAAO,gBAAgB,SAAS,CAAC,KAAK,GAAG,CAAC;QAC9C,KAAK,iBAAiB,CAAC,OAAO;YAC1B,OAAO,kBAAkB,SAAS,CAAC,OAAO,GAAG,CAAC;QAClD,KAAK,iBAAiB,CAAC,IAAI;YACvB,OAAO,eAAe,SAAS,CAAC,IAAI,GAAG,CAAC;IAChD,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,IAAuB,EAAE,EAAE;IAC7C,QAAQ,IAAI,EAAE,CAAC;QACX,KAAK,iBAAiB,CAAC,IAAI;YACvB,OAAO,uBAAuB,SAAS,CAAC,IAAI,GAAG,CAAC;QACpD,KAAK,iBAAiB,CAAC,OAAO;YAC1B,OAAO,yBAAyB,SAAS,CAAC,OAAO,GAAG,CAAC;QACzD,KAAK,iBAAiB,CAAC,MAAM;YACzB,OAAO,uBAAuB,SAAS,CAAC,KAAK,GAAG,CAAC;QACrD,KAAK,iBAAiB,CAAC,OAAO;YAC1B,OAAO,yBAAyB,SAAS,CAAC,OAAO,GAAG,CAAC;IAC7D,CAAC;AACL,CAAC,CAAC;AAMF,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAqC;;sBAElD,CAAC,KAAK,EAAE,EAAE,CACxB,KAAK,CAAC,QAAQ,KAAK,qBAAqB,CAAC,QAAQ;IACjD,KAAK,CAAC,QAAQ,KAAK,qBAAqB,CAAC,SAAS;IAC9C,CAAC,CAAC,QAAQ;IACV,CAAC,CAAC,gBAAgB;CAC7B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,CAAY;;6BAEjB,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC;;;;;iBAKjD,CAAC,KAAK,EAAE,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,QAAQ,CAAC;;;;;;;;;;qBAUxC,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0D/D,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAA6B;;;aAG/C,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC;;;CAGhD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;+CAOO,SAAS,CAAC,aAAa;;;CAGrE,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG7B,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAA6B;;MAE9D,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC;CACxC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI/B,CAAC","sourcesContent":["import styled from '@emotion/styled';\nimport constants 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 `var(--success-light, ${constants.SUCCESS_LIGHT})`;\n        case NOTIFICATION_TYPE.DANGER:\n            return `var(--error-light, ${constants.ERROR_LIGHT})`;\n        case NOTIFICATION_TYPE.WARNING:\n            return `var(--warning-light, ${constants.WARNING_LIGHT})`;\n        default:\n            return `var(--info-light, ${constants.INFO_LIGHT})`;\n    }\n};\n\nconst getTitleColor = (type: NOTIFICATION_TYPE) => {\n    switch (type) {\n        case NOTIFICATION_TYPE.SUCCESS:\n            return `var(--success, ${constants.SUCCESS})`;\n        case NOTIFICATION_TYPE.DANGER:\n            return `var(--error, ${constants.ERROR})`;\n        case NOTIFICATION_TYPE.WARNING:\n            return `var(--warning, ${constants.WARNING})`;\n        case NOTIFICATION_TYPE.INFO:\n            return `var(--info, ${constants.INFO})`;\n    }\n};\n\nconst getTypeStyle = (type: NOTIFICATION_TYPE) => {\n    switch (type) {\n        case NOTIFICATION_TYPE.INFO:\n            return `color:  var(--info, ${constants.INFO})`;\n        case NOTIFICATION_TYPE.SUCCESS:\n            return `color: var(--success, ${constants.SUCCESS})`;\n        case NOTIFICATION_TYPE.DANGER:\n            return `color: var(--error, ${constants.ERROR})`;\n        case NOTIFICATION_TYPE.WARNING:\n            return `color: var(--warning, ${constants.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    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    background-color: transparent;\n    border: none;\n    padding: none;\n    cursor: pointer;\n\n    &:focus {\n        box-shadow: 0 0 0 3px var(--primary, ${constants.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"]}
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/components/Notification/style.ts"],"names":[],"mappings":"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","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\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"]}

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

@@ -31,5 +31,7 @@ export interface NotificationOptions {
     buttonClick?: () => void;
     /** Notification close callback. */
     onClose?: () => void;
+    /** aria label for the close button on the notification */
+    closeButtonAriaLabel?: string;
 }
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/types.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,oBAAY,qBAAqB;IAC7B,QAAQ,aAAa;IACrB,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;CAChC;AAED,4BAA4B;AAC5B,oBAAY,iBAAiB;IACzB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,OAAO,YAAY;CACtB;AAED,MAAM,WAAW,mBAAmB;IAChC,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/types.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,oBAAY,qBAAqB;IAC7B,QAAQ,aAAa;IACrB,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;CAChC;AAED,4BAA4B;AAC5B,oBAAY,iBAAiB;IACzB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,OAAO,YAAY;CACtB;AAED,MAAM,WAAW,mBAAmB;IAChC,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,0DAA0D;IAC1D,oBAAoB,CAAC,EAAE,MAAM,CAAC;CACjC"}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/Notification/types.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,MAAM,CAAN,IAAY,qBAKX;AALD,WAAY,qBAAqB;IAC7B,8CAAqB,CAAA;IACrB,gDAAuB,CAAA;IACvB,oDAA2B,CAAA;IAC3B,sDAA6B,CAAA;AACjC,CAAC,EALW,qBAAqB,KAArB,qBAAqB,QAKhC;AAED,4BAA4B;AAC5B,MAAM,CAAN,IAAY,iBAKX;AALD,WAAY,iBAAiB;IACzB,kCAAa,CAAA;IACb,wCAAmB,CAAA;IACnB,sCAAiB,CAAA;IACjB,wCAAmB,CAAA;AACvB,CAAC,EALW,iBAAiB,KAAjB,iBAAiB,QAK5B","sourcesContent":["/** Position for Notification */\nexport enum NOTIFICATION_POSITION {\n    TOP_LEFT = 'TOP_LEFT',\n    TOP_RIGHT = 'TOP_RIGHT',\n    BOTTOM_LEFT = 'BOTTOM_LEFT',\n    BOTTOM_RIGHT = 'BOTTOM_RIGHT',\n}\n\n/** Type of Notifications */\nexport enum NOTIFICATION_TYPE {\n    INFO = 'INFO',\n    SUCCESS = 'SUCCESS',\n    DANGER = 'DANGER',\n    WARNING = 'WARNING',\n}\n\nexport interface NotificationOptions {\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    /** Duration for the notification in milliseconds */\n    duration?: number;\n    /** Creates sticky notification */\n    sticky?: boolean;\n    /** Type of notification */\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}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/Notification/types.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,MAAM,CAAN,IAAY,qBAKX;AALD,WAAY,qBAAqB;IAC7B,8CAAqB,CAAA;IACrB,gDAAuB,CAAA;IACvB,oDAA2B,CAAA;IAC3B,sDAA6B,CAAA;AACjC,CAAC,EALW,qBAAqB,KAArB,qBAAqB,QAKhC;AAED,4BAA4B;AAC5B,MAAM,CAAN,IAAY,iBAKX;AALD,WAAY,iBAAiB;IACzB,kCAAa,CAAA;IACb,wCAAmB,CAAA;IACnB,sCAAiB,CAAA;IACjB,wCAAmB,CAAA;AACvB,CAAC,EALW,iBAAiB,KAAjB,iBAAiB,QAK5B","sourcesContent":["/** Position for Notification */\nexport enum NOTIFICATION_POSITION {\n    TOP_LEFT = 'TOP_LEFT',\n    TOP_RIGHT = 'TOP_RIGHT',\n    BOTTOM_LEFT = 'BOTTOM_LEFT',\n    BOTTOM_RIGHT = 'BOTTOM_RIGHT',\n}\n\n/** Type of Notifications */\nexport enum NOTIFICATION_TYPE {\n    INFO = 'INFO',\n    SUCCESS = 'SUCCESS',\n    DANGER = 'DANGER',\n    WARNING = 'WARNING',\n}\n\nexport interface NotificationOptions {\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    /** Duration for the notification in milliseconds */\n    duration?: number;\n    /** Creates sticky notification */\n    sticky?: boolean;\n    /** Type of notification */\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 */\n    closeButtonAriaLabel?: string;\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,oBAAY,gBAAgB;IACxB,QAAQ,aAAa;IACrB,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;CAChC;AAgFD,iBAAwB,OAAO,CAC3B,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,UAAU,CAAC,OAAO,OAAO,CAAC,SAAS,CAAC,CAAC,oDA0IjF;kBA3IuB,OAAO;;QA8I3B,wBAAwB;;QAExB,qCAAqC;;QAErC,oDAAoD;;QAOpD,qDAAqD;;QAErD,6BAA6B;;;;;;;;eA3JT,OAAO"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAC/E,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,oBAAY,gBAAgB;IACxB,QAAQ,aAAa;IACrB,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;CAChC;AAgFD,iBAAwB,OAAO,CAC3B,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,UAAU,CAAC,OAAO,OAAO,CAAC,SAAS,CAAC,CAAC,oDA8JjF;kBA/JuB,OAAO;;QAkK3B,wBAAwB;;QAExB,qCAAqC;;QAErC,oDAAoD;;QAOpD,qDAAqD;;QAErD,6BAA6B;;;;;;;;eA/KT,OAAO"}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { Card } from '../Card';
@@ -85,6 +85,9 @@ export default function Popover(props) {
     const [translate, setTranslate] = useState({ x: 0, y: 0 });
     const popperRef = useRef();
     const containerRef = useRef();
+    const triggerRef = useRef(null);
+    const popperId = useId();
+    const triggerId = useId();
     const close = useCallback(() => {
         setClosing(true);
         setTimeout(() => {
@@ -94,6 +97,12 @@ export default function Popover(props) {
                 props.onClose();
             }
             setClosing(false);
+            // Restore focus to the trigger element after animation completes
+            setTimeout(() => {
+                if (triggerRef.current) {
+                    triggerRef.current.focus();
+                }
+            }, 50);
         }, 280);
     }, [props]);
     const keyupEventHandler = useCallback((e) => {
@@ -182,7 +191,13 @@ export default function Popover(props) {
             popperRef.current.focus();
         }
     }, [open, props.position]);
-    return (_jsxs(PopoverDiv, { ref: containerRef, children: [_jsx(props.element, {}), open && (_jsx(Popper, { elevated: true, tabIndex: 0, position: props.position, translateX: translate.x, translateY: translate.y, className: closing && 'closing', ref: popperRef, onClick: (e) => {
+    return (_jsxs(PopoverDiv, { ref: containerRef, children: [React.createElement(props.element, {
+                ref: triggerRef,
+                id: triggerId,
+                'aria-expanded': open,
+                'aria-haspopup': 'dialog',
+                'aria-controls': popperId,
+            }), open && (_jsx(Popper, { elevated: true, tabIndex: 0, role: "dialog", "aria-labelledby": triggerId, id: popperId, position: props.position, translateX: translate.x, translateY: translate.y, className: closing && 'closing', ref: popperRef, onClick: (e) => {
                     e.stopPropagation();
                     e.nativeEvent.stopImmediatePropagation();
                 }, children: props.children }))] }));

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,CAAN,IAAY,gBAKX;AALD,WAAY,gBAAgB;IACxB,yCAAqB,CAAA;IACrB,2CAAuB,CAAA;IACvB,+CAA2B,CAAA;IAC3B,iDAA6B,CAAA;AACjC,CAAC,EALW,gBAAgB,KAAhB,gBAAgB,QAK3B;AAOD,MAAM,WAAW,GAAG;IAChB,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE;;;KAG5B;IACD,CAAC,gBAAgB,CAAC,SAAS,CAAC,EAAE;;;KAG7B;IACD,CAAC,gBAAgB,CAAC,YAAY,CAAC,EAAE;;;KAGhC;IACD,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAAE;;;KAG/B;CACJ,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG5B,CAAC;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,CAAwE;;;;;;;;2BAQxE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU;MAClF,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC3C,CAAC;AAEF,MAAM,SAAS,GAAG;IACd,GAAG,EAAE,EAAE;CACV,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,CAC3B,KAA8E;IAE9E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAY,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IACtE,MAAM,SAAS,GAAG,MAAM,EAAkB,CAAC;IAC3C,MAAM,YAAY,GAAG,MAAM,EAAkB,CAAC;IAE9C,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;QAC3B,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,UAAU,CAAC,GAAG,EAAE;YACZ,OAAO,CAAC,KAAK,CAAC,CAAC;YACf,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;YAC7B,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;gBAChB,KAAK,CAAC,OAAO,EAAE,CAAC;YACpB,CAAC;YACD,UAAU,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC,EAAE,GAAG,CAAC,CAAC;IACZ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,iBAAiB,GAAG,WAAW,CACjC,CAAC,CAAgB,EAAE,EAAE;QACjB,IAAI,KAAK,CAAC,UAAU,IAAI,CAAC,CAAC,OAAO,KAAK,SAAS,CAAC,GAAG,EAAE,CAAC;YAClD,KAAK,EAAE,CAAC;QACZ,CAAC;IACL,CAAC,EACD,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAC5B,CAAC;IAEF,MAAM,mBAAmB,GAAG,WAAW,CACnC,CAAC,CAAa,EAAE,EAAE;QACd,IAAI,YAAY,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAAE,CAAC;YAC3E,KAAK,EAAE,CAAC;QACZ,CAAC;IACL,CAAC,EACD,CAAC,KAAK,CAAC,CACV,CAAC;IAEF;;OAEG;IACH,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;QAEtD,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;YACzD,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;QAC/D,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,mBAAmB,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEpD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;YACb,OAAO,CAAC,IAAI,CAAC,CAAC;YACd,qEAAqE;YACrE,qBAAqB,CAAC,GAAG,EAAE;gBACvB,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;YAC5D,CAAC,CAAC,CAAC;QACP,CAAC;aAAM,CAAC;YACJ,IAAI,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,CAAC;YACZ,CAAC;QACL,CAAC;QAED,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;QAC/D,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,mBAAmB,EAAE,KAAK,CAAC,CAAC,CAAC;IAEnD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,IAAI,EAAE,CAAC;YACP,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;YACvE,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC,YAAY,CAAC;YAC9C,MAAM,aAAa,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC;YAC3D,MAAM,cAAc,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC;YAC7D,MAAM,WAAW,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;YAEnC,IAAI,KAAK,CAAC,QAAQ,KAAK,gBAAgB,CAAC,WAAW,EAAE,CAAC;gBAClD,0CAA0C;gBAC1C,IAAI,cAAc,GAAG,GAAG,GAAG,MAAM,GAAG,CAAC,EAAE,CAAC;oBACpC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,cAAc,GAAG,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;gBACvE,CAAC;gBACD,IAAI,aAAa,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC;oBAC5B,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;gBAC/D,CAAC;YACL,CAAC;iBAAM,IAAI,KAAK,CAAC,QAAQ,IAAI,gBAAgB,CAAC,YAAY,EAAE,CAAC;gBACzD,yCAAyC;gBACzC,IAAI,cAAc,GAAG,GAAG,GAAG,MAAM,GAAG,CAAC,EAAE,CAAC;oBACpC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,cAAc,GAAG,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;gBACvE,CAAC;gBACD,IAAI,IAAI,GAAG,CAAC,EAAE,CAAC;oBACX,WAAW,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBACvC,CAAC;YACL,CAAC;iBAAM,IAAI,KAAK,CAAC,QAAQ,KAAK,gBAAgB,CAAC,QAAQ,EAAE,CAAC;gBACtD,uCAAuC;gBACvC,IAAI,GAAG,GAAG,MAAM,GAAG,CAAC,EAAE,CAAC;oBACnB,WAAW,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;gBAC/C,CAAC;gBACD,IAAI,aAAa,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC;oBAC5B,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;gBAC/D,CAAC;YACL,CAAC;iBAAM,CAAC;gBACJ,sCAAsC;gBACtC,IAAI,GAAG,GAAG,MAAM,GAAG,CAAC,EAAE,CAAC;oBACnB,WAAW,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;gBAC/C,CAAC;gBACD,IAAI,IAAI,GAAG,CAAC,EAAE,CAAC;oBACX,WAAW,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBACvC,CAAC;YACL,CAAC;YACD,yEAAyE;YACzE,0BAA0B;YAC1B,YAAY,CAAC,WAAW,CAAC,CAAC;YAC1B,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QAC9B,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE3B,OAAO,CACH,MAAC,UAAU,IAAC,GAAG,EAAE,YAAY,aACzB,KAAC,KAAK,CAAC,OAAO,KAAG,EAChB,IAAI,IAAI,CACL,KAAC,MAAM,IACH,QAAQ,QACR,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,UAAU,EAAE,SAAS,CAAC,CAAC,EACvB,UAAU,EAAE,SAAS,CAAC,CAAC,EACvB,SAAS,EAAE,OAAO,IAAI,SAAS,EAC/B,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACX,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,CAAC,CAAC,WAAW,CAAC,wBAAwB,EAAE,CAAC;gBAC7C,CAAC,YAEA,KAAK,CAAC,QAAQ,GACV,CACZ,IACQ,CAChB,CAAC;AACN,CAAC;AAED,OAAO,CAAC,SAAS,GAAG;IAChB,wBAAwB;IACxB,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IAC/B,qCAAqC;IACrC,OAAO,EAAE,SAAS,CAAC,IAAI;IACvB,oDAAoD;IACpD,QAAQ,EAAE,SAAS,CAAC,KAAK,CAAC;QACtB,gBAAgB,CAAC,QAAQ;QACzB,gBAAgB,CAAC,SAAS;QAC1B,gBAAgB,CAAC,WAAW;QAC5B,gBAAgB,CAAC,YAAY;KAChC,CAAC;IACF,qDAAqD;IACrD,UAAU,EAAE,SAAS,CAAC,IAAI;IAC1B,6BAA6B;IAC7B,OAAO,EAAE,SAAS,CAAC,IAAI;CAC1B,CAAC;AAEF,OAAO,CAAC,YAAY,GAAG;IACnB,UAAU,EAAE,IAAI;IAChB,QAAQ,EAAE,gBAAgB,CAAC,WAAW;CACzC,CAAC","sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { Card } from '../Card';\n\nexport enum POPOVER_POSITION {\n    TOP_LEFT = 'TOP_LEFT',\n    TOP_RIGHT = 'TOP_RIGHT',\n    BOTTOM_LEFT = 'BOTTOM_LEFT',\n    BOTTOM_RIGHT = 'BOTTOM_RIGHT',\n}\n\ninterface translate {\n    x: number;\n    y: number;\n}\n\nconst positionMap = {\n    [POPOVER_POSITION.TOP_LEFT]: `\n        bottom: calc(100% - 10px);\n        left: 0;\n    `,\n    [POPOVER_POSITION.TOP_RIGHT]: `\n        bottom: calc(100% - 10px);\n        right: 0;\n    `,\n    [POPOVER_POSITION.BOTTOM_RIGHT]: `\n        top: calc(100% - 10px);\n        right: 0;\n    `,\n    [POPOVER_POSITION.BOTTOM_LEFT]: `\n        top: calc(100% - 10px);\n        left: 0;\n    `,\n};\n\nconst PopoverDiv = styled.div`\n    position: relative;\n    display: inline-flex;\n`;\n\nconst Popper = styled(Card)<{ position: POPOVER_POSITION; translateX: number; translateY: number }>`\n    position: absolute;\n    width: 100%;\n    min-width: 200px;\n    overflow: auto;\n    animation: enter 0.3s linear;\n    border-radius: 3px;\n    z-index: 1;\n    transform: translate(${(props) => props.translateX}px, ${(props) => props.translateY}px);\n    ${(props) => positionMap[props.position]}\n\n    &.closing {\n        /* max-height: 0px;\n        opacity: 0;\n        overflow: hidden; */\n        animation: exit 0.3s linear;\n    }\n\n    @keyframes enter {\n        from {\n            max-height: 0px;\n            opacity: 1;\n            overflow: hidden;\n        }\n        to {\n            max-height: 300px;\n            opacity: 1;\n            overflow: hidden;\n        }\n    }\n\n    @keyframes exit {\n        to {\n            max-height: 0px;\n            opacity: 1;\n            overflow: hidden;\n        }\n        from {\n            max-height: 300px;\n            opacity: 1;\n            overflow: hidden;\n        }\n    }\n`;\n\nconst KEY_CODES = {\n    ESC: 27,\n};\n\nexport default function Popover(\n    props: React.PropsWithChildren<PropTypes.InferProps<typeof Popover.propTypes>>,\n) {\n    const [open, setOpen] = useState(props.open);\n    const [closing, setClosing] = useState(false);\n    const [translate, setTranslate] = useState<translate>({ x: 0, y: 0 });\n    const popperRef = useRef<HTMLDivElement>();\n    const containerRef = useRef<HTMLDivElement>();\n\n    const close = useCallback(() => {\n        setClosing(true);\n        setTimeout(() => {\n            setOpen(false);\n            setTranslate({ x: 0, y: 0 });\n            if (props.onClose) {\n                props.onClose();\n            }\n            setClosing(false);\n        }, 280);\n    }, [props]);\n\n    const keyupEventHandler = useCallback(\n        (e: KeyboardEvent) => {\n            if (props.closeOnEsc && e.keyCode === KEY_CODES.ESC) {\n                close();\n            }\n        },\n        [close, props.closeOnEsc],\n    );\n\n    const clickOutsideHandler = useCallback(\n        (e: MouseEvent) => {\n            if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n                close();\n            }\n        },\n        [close],\n    );\n\n    /**\n     * Get called on popover mount.\n     */\n    useEffect(() => {\n        document.addEventListener('keyup', keyupEventHandler);\n\n        return () => {\n            document.removeEventListener('keyup', keyupEventHandler);\n            document.removeEventListener('click', clickOutsideHandler);\n        };\n    }, [clickOutsideHandler, close, keyupEventHandler]);\n\n    useEffect(() => {\n        if (props.open) {\n            setOpen(true);\n            // Use requestAnimationFrame to add listener after current event loop\n            requestAnimationFrame(() => {\n                document.addEventListener('click', clickOutsideHandler);\n            });\n        } else {\n            if (open) {\n                close();\n            }\n        }\n\n        return () => {\n            document.removeEventListener('click', clickOutsideHandler);\n        };\n    }, [props.open, open, clickOutsideHandler, close]);\n\n    useEffect(() => {\n        if (open) {\n            const { top, left, right } = popperRef.current.getBoundingClientRect();\n            const height = popperRef.current.scrollHeight;\n            const viewportWidth = document.documentElement.clientWidth;\n            const viewportHeight = document.documentElement.clientHeight;\n            const translation = { x: 0, y: 0 };\n\n            if (props.position === POPOVER_POSITION.BOTTOM_LEFT) {\n                // overflow can happen at bottom and right\n                if (viewportHeight - top - height < 0) {\n                    translation.y = -1 * (Math.abs(viewportHeight - top - height) + 5);\n                }\n                if (viewportWidth - right < 0) {\n                    translation.x = -1 * (Math.abs(viewportWidth - right) + 5);\n                }\n            } else if (props.position == POPOVER_POSITION.BOTTOM_RIGHT) {\n                // overflow can happen at bottom and left\n                if (viewportHeight - top - height < 0) {\n                    translation.y = -1 * (Math.abs(viewportHeight - top - height) + 5);\n                }\n                if (left < 0) {\n                    translation.x = Math.abs(left) + 5;\n                }\n            } else if (props.position === POPOVER_POSITION.TOP_LEFT) {\n                // overflow can happen at top and right\n                if (top - height < 0) {\n                    translation.y = Math.abs(top - height) + 5;\n                }\n                if (viewportWidth - right < 0) {\n                    translation.x = -1 * (Math.abs(viewportWidth - right) + 5);\n                }\n            } else {\n                // overflow can happen at top and left\n                if (top - height < 0) {\n                    translation.y = Math.abs(top - height) + 5;\n                }\n                if (left < 0) {\n                    translation.x = Math.abs(left) + 5;\n                }\n            }\n            // Note it can still overflow, but in that case fitting popper inside the\n            // window is not possible.\n            setTranslate(translation);\n            popperRef.current.focus();\n        }\n    }, [open, props.position]);\n\n    return (\n        <PopoverDiv ref={containerRef}>\n            <props.element />\n            {open && (\n                <Popper\n                    elevated\n                    tabIndex={0}\n                    position={props.position}\n                    translateX={translate.x}\n                    translateY={translate.y}\n                    className={closing && 'closing'}\n                    ref={popperRef}\n                    onClick={(e) => {\n                        e.stopPropagation();\n                        e.nativeEvent.stopImmediatePropagation();\n                    }}\n                >\n                    {props.children}\n                </Popper>\n            )}\n        </PopoverDiv>\n    );\n}\n\nPopover.propTypes = {\n    /** Opens the popover */\n    open: PropTypes.bool.isRequired,\n    /** Anchor element for the popover */\n    element: PropTypes.func,\n    /** Position of the popover around anchor element */\n    position: PropTypes.oneOf([\n        POPOVER_POSITION.TOP_LEFT,\n        POPOVER_POSITION.TOP_RIGHT,\n        POPOVER_POSITION.BOTTOM_LEFT,\n        POPOVER_POSITION.BOTTOM_RIGHT,\n    ]),\n    /** If the popover should close on `esc` key press */\n    closeOnEsc: PropTypes.bool,\n    /** Popover close callback */\n    onClose: PropTypes.func,\n};\n\nPopover.defaultProps = {\n    closeOnEsc: true,\n    position: POPOVER_POSITION.BOTTOM_LEFT,\n};\n"]}
+{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,CAAN,IAAY,gBAKX;AALD,WAAY,gBAAgB;IACxB,yCAAqB,CAAA;IACrB,2CAAuB,CAAA;IACvB,+CAA2B,CAAA;IAC3B,iDAA6B,CAAA;AACjC,CAAC,EALW,gBAAgB,KAAhB,gBAAgB,QAK3B;AAOD,MAAM,WAAW,GAAG;IAChB,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE;;;KAG5B;IACD,CAAC,gBAAgB,CAAC,SAAS,CAAC,EAAE;;;KAG7B;IACD,CAAC,gBAAgB,CAAC,YAAY,CAAC,EAAE;;;KAGhC;IACD,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAAE;;;KAG/B;CACJ,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG5B,CAAC;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,CAAwE;;;;;;;;2BAQxE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU;MAClF,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC3C,CAAC;AAEF,MAAM,SAAS,GAAG;IACd,GAAG,EAAE,EAAE;CACV,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,CAC3B,KAA8E;IAE9E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAY,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IACtE,MAAM,SAAS,GAAG,MAAM,EAAkB,CAAC;IAC3C,MAAM,YAAY,GAAG,MAAM,EAAkB,CAAC;IAC9C,MAAM,UAAU,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,KAAK,EAAE,CAAC;IACzB,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAE1B,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;QAC3B,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,UAAU,CAAC,GAAG,EAAE;YACZ,OAAO,CAAC,KAAK,CAAC,CAAC;YACf,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;YAE7B,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;gBAChB,KAAK,CAAC,OAAO,EAAE,CAAC;YACpB,CAAC;YACD,UAAU,CAAC,KAAK,CAAC,CAAC;YAElB,iEAAiE;YACjE,UAAU,CAAC,GAAG,EAAE;gBACZ,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;oBACrB,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBAC/B,CAAC;YACL,CAAC,EAAE,EAAE,CAAC,CAAC;QACX,CAAC,EAAE,GAAG,CAAC,CAAC;IACZ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,iBAAiB,GAAG,WAAW,CACjC,CAAC,CAAgB,EAAE,EAAE;QACjB,IAAI,KAAK,CAAC,UAAU,IAAI,CAAC,CAAC,OAAO,KAAK,SAAS,CAAC,GAAG,EAAE,CAAC;YAClD,KAAK,EAAE,CAAC;QACZ,CAAC;IACL,CAAC,EACD,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAC5B,CAAC;IAEF,MAAM,mBAAmB,GAAG,WAAW,CACnC,CAAC,CAAa,EAAE,EAAE;QACd,IAAI,YAAY,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAAE,CAAC;YAC3E,KAAK,EAAE,CAAC;QACZ,CAAC;IACL,CAAC,EACD,CAAC,KAAK,CAAC,CACV,CAAC;IAEF;;OAEG;IACH,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;QAEtD,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;YACzD,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;QAC/D,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,mBAAmB,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEpD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;YACb,OAAO,CAAC,IAAI,CAAC,CAAC;YACd,qEAAqE;YACrE,qBAAqB,CAAC,GAAG,EAAE;gBACvB,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;YAC5D,CAAC,CAAC,CAAC;QACP,CAAC;aAAM,CAAC;YACJ,IAAI,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,CAAC;YACZ,CAAC;QACL,CAAC;QAED,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;QAC/D,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,mBAAmB,EAAE,KAAK,CAAC,CAAC,CAAC;IAEnD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,IAAI,EAAE,CAAC;YACP,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;YACvE,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC,YAAY,CAAC;YAC9C,MAAM,aAAa,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC;YAC3D,MAAM,cAAc,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC;YAC7D,MAAM,WAAW,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;YAEnC,IAAI,KAAK,CAAC,QAAQ,KAAK,gBAAgB,CAAC,WAAW,EAAE,CAAC;gBAClD,0CAA0C;gBAC1C,IAAI,cAAc,GAAG,GAAG,GAAG,MAAM,GAAG,CAAC,EAAE,CAAC;oBACpC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,cAAc,GAAG,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;gBACvE,CAAC;gBACD,IAAI,aAAa,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC;oBAC5B,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;gBAC/D,CAAC;YACL,CAAC;iBAAM,IAAI,KAAK,CAAC,QAAQ,IAAI,gBAAgB,CAAC,YAAY,EAAE,CAAC;gBACzD,yCAAyC;gBACzC,IAAI,cAAc,GAAG,GAAG,GAAG,MAAM,GAAG,CAAC,EAAE,CAAC;oBACpC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,cAAc,GAAG,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;gBACvE,CAAC;gBACD,IAAI,IAAI,GAAG,CAAC,EAAE,CAAC;oBACX,WAAW,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBACvC,CAAC;YACL,CAAC;iBAAM,IAAI,KAAK,CAAC,QAAQ,KAAK,gBAAgB,CAAC,QAAQ,EAAE,CAAC;gBACtD,uCAAuC;gBACvC,IAAI,GAAG,GAAG,MAAM,GAAG,CAAC,EAAE,CAAC;oBACnB,WAAW,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;gBAC/C,CAAC;gBACD,IAAI,aAAa,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC;oBAC5B,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;gBAC/D,CAAC;YACL,CAAC;iBAAM,CAAC;gBACJ,sCAAsC;gBACtC,IAAI,GAAG,GAAG,MAAM,GAAG,CAAC,EAAE,CAAC;oBACnB,WAAW,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;gBAC/C,CAAC;gBACD,IAAI,IAAI,GAAG,CAAC,EAAE,CAAC;oBACX,WAAW,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBACvC,CAAC;YACL,CAAC;YACD,yEAAyE;YACzE,0BAA0B;YAC1B,YAAY,CAAC,WAAW,CAAC,CAAC;YAC1B,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QAC9B,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE3B,OAAO,CACH,MAAC,UAAU,IAAC,GAAG,EAAE,YAAY,aACxB,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,EAAE;gBAChC,GAAG,EAAE,UAAU;gBACf,EAAE,EAAE,SAAS;gBACb,eAAe,EAAE,IAAI;gBACrB,eAAe,EAAE,QAAQ;gBACzB,eAAe,EAAE,QAAQ;aAC5B,CAAC,EACD,IAAI,IAAI,CACL,KAAC,MAAM,IACH,QAAQ,QACR,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,qBACI,SAAS,EAC1B,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,UAAU,EAAE,SAAS,CAAC,CAAC,EACvB,UAAU,EAAE,SAAS,CAAC,CAAC,EACvB,SAAS,EAAE,OAAO,IAAI,SAAS,EAC/B,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACX,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,CAAC,CAAC,WAAW,CAAC,wBAAwB,EAAE,CAAC;gBAC7C,CAAC,YAEA,KAAK,CAAC,QAAQ,GACV,CACZ,IACQ,CAChB,CAAC;AACN,CAAC;AAED,OAAO,CAAC,SAAS,GAAG;IAChB,wBAAwB;IACxB,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IAC/B,qCAAqC;IACrC,OAAO,EAAE,SAAS,CAAC,IAAI;IACvB,oDAAoD;IACpD,QAAQ,EAAE,SAAS,CAAC,KAAK,CAAC;QACtB,gBAAgB,CAAC,QAAQ;QACzB,gBAAgB,CAAC,SAAS;QAC1B,gBAAgB,CAAC,WAAW;QAC5B,gBAAgB,CAAC,YAAY;KAChC,CAAC;IACF,qDAAqD;IACrD,UAAU,EAAE,SAAS,CAAC,IAAI;IAC1B,6BAA6B;IAC7B,OAAO,EAAE,SAAS,CAAC,IAAI;CAC1B,CAAC;AAEF,OAAO,CAAC,YAAY,GAAG;IACnB,UAAU,EAAE,IAAI;IAChB,QAAQ,EAAE,gBAAgB,CAAC,WAAW;CACzC,CAAC","sourcesContent":["import React, { useCallback, useEffect, useId, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { Card } from '../Card';\n\nexport enum POPOVER_POSITION {\n    TOP_LEFT = 'TOP_LEFT',\n    TOP_RIGHT = 'TOP_RIGHT',\n    BOTTOM_LEFT = 'BOTTOM_LEFT',\n    BOTTOM_RIGHT = 'BOTTOM_RIGHT',\n}\n\ninterface translate {\n    x: number;\n    y: number;\n}\n\nconst positionMap = {\n    [POPOVER_POSITION.TOP_LEFT]: `\n        bottom: calc(100% - 10px);\n        left: 0;\n    `,\n    [POPOVER_POSITION.TOP_RIGHT]: `\n        bottom: calc(100% - 10px);\n        right: 0;\n    `,\n    [POPOVER_POSITION.BOTTOM_RIGHT]: `\n        top: calc(100% - 10px);\n        right: 0;\n    `,\n    [POPOVER_POSITION.BOTTOM_LEFT]: `\n        top: calc(100% - 10px);\n        left: 0;\n    `,\n};\n\nconst PopoverDiv = styled.div`\n    position: relative;\n    display: inline-flex;\n`;\n\nconst Popper = styled(Card)<{ position: POPOVER_POSITION; translateX: number; translateY: number }>`\n    position: absolute;\n    width: 100%;\n    min-width: 200px;\n    overflow: auto;\n    animation: enter 0.3s linear;\n    border-radius: 3px;\n    z-index: 1;\n    transform: translate(${(props) => props.translateX}px, ${(props) => props.translateY}px);\n    ${(props) => positionMap[props.position]}\n\n    &.closing {\n        /* max-height: 0px;\n        opacity: 0;\n        overflow: hidden; */\n        animation: exit 0.3s linear;\n    }\n\n    @keyframes enter {\n        from {\n            max-height: 0px;\n            opacity: 1;\n            overflow: hidden;\n        }\n        to {\n            max-height: 300px;\n            opacity: 1;\n            overflow: hidden;\n        }\n    }\n\n    @keyframes exit {\n        to {\n            max-height: 0px;\n            opacity: 1;\n            overflow: hidden;\n        }\n        from {\n            max-height: 300px;\n            opacity: 1;\n            overflow: hidden;\n        }\n    }\n`;\n\nconst KEY_CODES = {\n    ESC: 27,\n};\n\nexport default function Popover(\n    props: React.PropsWithChildren<PropTypes.InferProps<typeof Popover.propTypes>>,\n) {\n    const [open, setOpen] = useState(props.open);\n    const [closing, setClosing] = useState(false);\n    const [translate, setTranslate] = useState<translate>({ x: 0, y: 0 });\n    const popperRef = useRef<HTMLDivElement>();\n    const containerRef = useRef<HTMLDivElement>();\n    const triggerRef = useRef<HTMLElement | null>(null);\n    const popperId = useId();\n    const triggerId = useId();\n\n    const close = useCallback(() => {\n        setClosing(true);\n        setTimeout(() => {\n            setOpen(false);\n            setTranslate({ x: 0, y: 0 });\n\n            if (props.onClose) {\n                props.onClose();\n            }\n            setClosing(false);\n\n            // Restore focus to the trigger element after animation completes\n            setTimeout(() => {\n                if (triggerRef.current) {\n                    triggerRef.current.focus();\n                }\n            }, 50);\n        }, 280);\n    }, [props]);\n\n    const keyupEventHandler = useCallback(\n        (e: KeyboardEvent) => {\n            if (props.closeOnEsc && e.keyCode === KEY_CODES.ESC) {\n                close();\n            }\n        },\n        [close, props.closeOnEsc],\n    );\n\n    const clickOutsideHandler = useCallback(\n        (e: MouseEvent) => {\n            if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n                close();\n            }\n        },\n        [close],\n    );\n\n    /**\n     * Get called on popover mount.\n     */\n    useEffect(() => {\n        document.addEventListener('keyup', keyupEventHandler);\n\n        return () => {\n            document.removeEventListener('keyup', keyupEventHandler);\n            document.removeEventListener('click', clickOutsideHandler);\n        };\n    }, [clickOutsideHandler, close, keyupEventHandler]);\n\n    useEffect(() => {\n        if (props.open) {\n            setOpen(true);\n            // Use requestAnimationFrame to add listener after current event loop\n            requestAnimationFrame(() => {\n                document.addEventListener('click', clickOutsideHandler);\n            });\n        } else {\n            if (open) {\n                close();\n            }\n        }\n\n        return () => {\n            document.removeEventListener('click', clickOutsideHandler);\n        };\n    }, [props.open, open, clickOutsideHandler, close]);\n\n    useEffect(() => {\n        if (open) {\n            const { top, left, right } = popperRef.current.getBoundingClientRect();\n            const height = popperRef.current.scrollHeight;\n            const viewportWidth = document.documentElement.clientWidth;\n            const viewportHeight = document.documentElement.clientHeight;\n            const translation = { x: 0, y: 0 };\n\n            if (props.position === POPOVER_POSITION.BOTTOM_LEFT) {\n                // overflow can happen at bottom and right\n                if (viewportHeight - top - height < 0) {\n                    translation.y = -1 * (Math.abs(viewportHeight - top - height) + 5);\n                }\n                if (viewportWidth - right < 0) {\n                    translation.x = -1 * (Math.abs(viewportWidth - right) + 5);\n                }\n            } else if (props.position == POPOVER_POSITION.BOTTOM_RIGHT) {\n                // overflow can happen at bottom and left\n                if (viewportHeight - top - height < 0) {\n                    translation.y = -1 * (Math.abs(viewportHeight - top - height) + 5);\n                }\n                if (left < 0) {\n                    translation.x = Math.abs(left) + 5;\n                }\n            } else if (props.position === POPOVER_POSITION.TOP_LEFT) {\n                // overflow can happen at top and right\n                if (top - height < 0) {\n                    translation.y = Math.abs(top - height) + 5;\n                }\n                if (viewportWidth - right < 0) {\n                    translation.x = -1 * (Math.abs(viewportWidth - right) + 5);\n                }\n            } else {\n                // overflow can happen at top and left\n                if (top - height < 0) {\n                    translation.y = Math.abs(top - height) + 5;\n                }\n                if (left < 0) {\n                    translation.x = Math.abs(left) + 5;\n                }\n            }\n            // Note it can still overflow, but in that case fitting popper inside the\n            // window is not possible.\n            setTranslate(translation);\n            popperRef.current.focus();\n        }\n    }, [open, props.position]);\n\n    return (\n        <PopoverDiv ref={containerRef}>\n            {React.createElement(props.element, {\n                ref: triggerRef,\n                id: triggerId,\n                'aria-expanded': open,\n                'aria-haspopup': 'dialog',\n                'aria-controls': popperId,\n            })}\n            {open && (\n                <Popper\n                    elevated\n                    tabIndex={0}\n                    role=\"dialog\"\n                    aria-labelledby={triggerId}\n                    id={popperId}\n                    position={props.position}\n                    translateX={translate.x}\n                    translateY={translate.y}\n                    className={closing && 'closing'}\n                    ref={popperRef}\n                    onClick={(e) => {\n                        e.stopPropagation();\n                        e.nativeEvent.stopImmediatePropagation();\n                    }}\n                >\n                    {props.children}\n                </Popper>\n            )}\n        </PopoverDiv>\n    );\n}\n\nPopover.propTypes = {\n    /** Opens the popover */\n    open: PropTypes.bool.isRequired,\n    /** Anchor element for the popover */\n    element: PropTypes.func,\n    /** Position of the popover around anchor element */\n    position: PropTypes.oneOf([\n        POPOVER_POSITION.TOP_LEFT,\n        POPOVER_POSITION.TOP_RIGHT,\n        POPOVER_POSITION.BOTTOM_LEFT,\n        POPOVER_POSITION.BOTTOM_RIGHT,\n    ]),\n    /** If the popover should close on `esc` key press */\n    closeOnEsc: PropTypes.bool,\n    /** Popover close callback */\n    onClose: PropTypes.func,\n};\n\nPopover.defaultProps = {\n    closeOnEsc: true,\n    position: POPOVER_POSITION.BOTTOM_LEFT,\n};\n"]}

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

@@ -4,9 +4,12 @@ declare namespace Spinner {
     var propTypes: {
         /** Spinner's size */
         size: PropTypes.Requireable<number>;
+        /** Accessible label for screen readers */
+        label: PropTypes.Requireable<string>;
     };
     var defaultProps: {
         size: number;
+        label: string;
     };
 }
 type SpinnerProp = PropTypes.InferProps<typeof Spinner.propTypes>;

package/lib-esm/components/Spinner/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAuBnC,iBAAS,OAAO,CAAC,KAAK,EAAE,WAAW,oDAElC;kBAFQ,OAAO;;QAOZ,qBAAqB;;;;;;;AAHzB,KAAK,WAAW,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,OAAO,CAAC,SAAS,CAAC,CAAC;AAWlE,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAuBnC,iBAAS,OAAO,CAAC,KAAK,EAAE,WAAW,oDAWlC;kBAXQ,OAAO;;QAgBZ,qBAAqB;;QAErB,0CAA0C;;;;;;;;AAL9C,KAAK,WAAW,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,OAAO,CAAC,SAAS,CAAC,CAAC;AAclE,eAAe,OAAO,CAAC"}

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

@@ -1,10 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
+import { getThemeValue, THEME_NAME } from '../../shared/constants';
 const SpinnerDiv = styled.div `
-    border: 4px solid var(--primary, ${constants.PRIMARY});
-    border-top: 4px solid var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
+    border: 4px solid ${getThemeValue(THEME_NAME.PRIMARY)};
+    border-top: 4px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
     border-radius: 50%;
     width: ${(props) => props.size}px;
     height: ${(props) => props.size}px;
@@ -21,14 +32,18 @@ const SpinnerDiv = styled.div `
     }
 `;
 function Spinner(props) {
-    return _jsx(SpinnerDiv, Object.assign({}, props));
+    const { label } = props, rest = __rest(props, ["label"]);
+    return (_jsx(SpinnerDiv, Object.assign({}, rest, { role: "status", "aria-label": label, "aria-live": "polite", "aria-busy": "true" })));
 }
 Spinner.propTypes = {
     /** Spinner's size */
     size: PropTypes.number,
+    /** Accessible label for screen readers */
+    label: PropTypes.string,
 };
 Spinner.defaultProps = {
     size: 30,
+    label: 'Loading',
 };
 export default Spinner;
 //# sourceMappingURL=Spinner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAa;uCACH,SAAS,CAAC,OAAO;sDACF,SAAS,CAAC,kBAAkB;;aAErE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI;cACpB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI;;;;;;;;;;;;CAYlC,CAAC;AAEF,SAAS,OAAO,CAAC,KAAkB;IAC/B,OAAO,KAAC,UAAU,oBAAK,KAAK,EAAI,CAAC;AACrC,CAAC;AAID,OAAO,CAAC,SAAS,GAAG;IAChB,qBAAqB;IACrB,IAAI,EAAE,SAAS,CAAC,MAAM;CACzB,CAAC;AAEF,OAAO,CAAC,YAAY,GAAG;IACnB,IAAI,EAAE,EAAE;CACX,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport constants from '../../shared/constants';\n\nconst SpinnerDiv = styled.div<SpinnerProp>`\n    border: 4px solid var(--primary, ${constants.PRIMARY});\n    border-top: 4px solid var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});\n    border-radius: 50%;\n    width: ${(props) => props.size}px;\n    height: ${(props) => props.size}px;\n    margin: 0 auto;\n    animation: spin 1s linear infinite;\n\n    @keyframes spin {\n        0% {\n            transform: rotate(0deg);\n        }\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n`;\n\nfunction Spinner(props: SpinnerProp) {\n    return <SpinnerDiv {...props} />;\n}\n\ntype SpinnerProp = PropTypes.InferProps<typeof Spinner.propTypes>;\n\nSpinner.propTypes = {\n    /** Spinner's size */\n    size: PropTypes.number,\n};\n\nSpinner.defaultProps = {\n    size: 30,\n};\n\nexport default Spinner;\n"]}
+{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEnE,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAa;wBAClB,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC;4BAC7B,aAAa,CAAC,UAAU,CAAC,kBAAkB,CAAC;;aAE3D,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI;cACpB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI;;;;;;;;;;;;CAYlC,CAAC;AAEF,SAAS,OAAO,CAAC,KAAkB;IAC/B,MAAM,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA1B,SAAkB,CAAQ,CAAC;IACjC,OAAO,CACH,KAAC,UAAU,oBACH,IAAI,IACR,IAAI,EAAC,QAAQ,gBACD,KAAK,eACP,QAAQ,eACR,MAAM,IAClB,CACL,CAAC;AACN,CAAC;AAID,OAAO,CAAC,SAAS,GAAG;IAChB,qBAAqB;IACrB,IAAI,EAAE,SAAS,CAAC,MAAM;IACtB,0CAA0C;IAC1C,KAAK,EAAE,SAAS,CAAC,MAAM;CAC1B,CAAC;AAEF,OAAO,CAAC,YAAY,GAAG;IACnB,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,SAAS;CACnB,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst SpinnerDiv = styled.div<SpinnerProp>`\n    border: 4px solid ${getThemeValue(THEME_NAME.PRIMARY)};\n    border-top: 4px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n    border-radius: 50%;\n    width: ${(props) => props.size}px;\n    height: ${(props) => props.size}px;\n    margin: 0 auto;\n    animation: spin 1s linear infinite;\n\n    @keyframes spin {\n        0% {\n            transform: rotate(0deg);\n        }\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n`;\n\nfunction Spinner(props: SpinnerProp) {\n    const { label, ...rest } = props;\n    return (\n        <SpinnerDiv\n            {...rest}\n            role=\"status\"\n            aria-label={label}\n            aria-live=\"polite\"\n            aria-busy=\"true\"\n        />\n    );\n}\n\ntype SpinnerProp = PropTypes.InferProps<typeof Spinner.propTypes>;\n\nSpinner.propTypes = {\n    /** Spinner's size */\n    size: PropTypes.number,\n    /** Accessible label for screen readers */\n    label: PropTypes.string,\n};\n\nSpinner.defaultProps = {\n    size: 30,\n    label: 'Loading',\n};\n\nexport default Spinner;\n"]}

package/lib-esm/components/Stepper/Stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,iBAAiB,EAA4B,MAAM,OAAO,CAAC;AAC9E,OAAO,SAAS,MAAM,YAAY,CAAC;AAMnC,KAAK,YAAY,GAAG,iBAAiB,CAAC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC,CAAC;AAkFH,iBAAwB,OAAO,CAAC,KAAK,EAAE,YAAY,oDA6DlD;kBA7DuB,OAAO;;QAgE3B,qCAAqC;;QAErC,kDAAkD;;;;;;;eAlE9B,OAAO"}
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,iBAAiB,EAA4B,MAAM,OAAO,CAAC;AAC9E,OAAO,SAAS,MAAM,YAAY,CAAC;AAMnC,KAAK,YAAY,GAAG,iBAAiB,CAAC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC,CAAC;AAmFH,iBAAwB,OAAO,CAAC,KAAK,EAAE,YAAY,oDAiFlD;kBAjFuB,OAAO;;QAoF3B,qCAAqC;;QAErC,kDAAkD;;;;;;;eAtF9B,OAAO"}

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

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Children, useState, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
+import { getThemeValue, THEME_NAME } from '../../shared/constants';
 import { Ellipsis } from '../../shared/styles';
 import { Badge, BADGE_TYPE } from '../Badge';
 const Container = styled.div `
@@ -15,7 +15,7 @@ const Header = styled.div `
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    border-bottom: 1px solid var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
+    border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
 
     @media (min-width: 601px) {
         &::before {
@@ -24,7 +24,7 @@ const Header = styled.div `
             left: 0;
             right: 0;
             height: 2px;
-            background-color: var(--light-grey, ${constants.LIGHT_GREY});
+            background-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};
             content: ' ';
             z-index: 0;
         }
@@ -40,21 +40,22 @@ const HeaderButton = styled.button `
     font-size: 16px;
     cursor: pointer;
     background-color: ${(props) => props.active
-    ? `var(--border-light-color, ${constants.BORDER_LIGHT_COLOR})`
-    : `var(--background, ${constants.BACKGROUND})`};
+    ? getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)
+    : getThemeValue(THEME_NAME.BACKGROUND)};
     font-weight: ${(props) => (props.active ? 'bold' : 'normal')};
     overflow: hidden;
     display: flex;
     align-items: center;
+    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};
 
     &:disabled {
         cursor: not-allowed;
-        background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
+        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};
     }
 
     &:enabled:hover,
     &:focus {
-        background-color: var(--primary-light, ${constants.PRIMARY_LIGHTER});
+        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHTER)};
     }
 
     @media (max-width: 600px) {
@@ -84,9 +85,13 @@ export default function Stepper(props) {
     const [active, setActive] = useState(props.active);
     const { children, onStepClick } = props;
     const childrenArray = Children.toArray(children);
+    const stepRefs = [];
     const stepClickHandler = (index) => () => {
+        var _a;
         setActive(index);
         onStepClick === null || onStepClick === void 0 ? void 0 : onStepClick(index);
+        // Move focus to the active step
+        (_a = stepRefs[index]) === null || _a === void 0 ? void 0 : _a.focus();
     };
     const getBadgeType = (index, completed, disabled) => {
         if (disabled) {
@@ -100,10 +105,24 @@ export default function Stepper(props) {
         }
         return BADGE_TYPE.DISABLED;
     };
-    return (_jsxs(Container, { children: [_jsxs(Header, { children: [Children.map(children, (child, index) => {
+    // Keyboard navigation for step buttons
+    const onStepKeyDown = (index) => (e) => {
+        var _a, _b;
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            const next = (index + 1) % childrenArray.length;
+            (_a = stepRefs[next]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            const prev = (index - 1 + childrenArray.length) % childrenArray.length;
+            (_b = stepRefs[prev]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
+    return (_jsxs(Container, { children: [_jsxs(Header, { role: "tablist", "aria-label": "Stepper Steps", children: [Children.map(children, (child, index) => {
                         if (!isValidElement(child))
                             return null;
-                        return (_jsx(_Fragment, { children: _jsxs(HeaderButton, { active: index === active, type: "button", disabled: child.props.disabled, onClick: stepClickHandler(index), children: [_jsx(Badge, { inline: true, type: getBadgeType(index, child.props.completed, child.props.disabled) }), _jsx(Ellipsis, { children: child.props.name })] }) }));
+                        return (_jsxs(HeaderButton, { ref: (el) => (stepRefs[index] = el), active: index === active, type: "button", role: "tab", "aria-selected": index === active, "aria-disabled": !!child.props.disabled, tabIndex: index === active ? 0 : -1, disabled: child.props.disabled, onClick: stepClickHandler(index), onKeyDown: onStepKeyDown(index), children: [_jsx(Badge, { inline: true, type: getBadgeType(index, child.props.completed, child.props.disabled) }), _jsx(Ellipsis, { children: child.props.name })] }));
                     }), _jsxs(MobileHeader, { children: [_jsx("span", { children: isValidElement(childrenArray[active])
                                     ? childrenArray[active].props.name
                                     : '' }), _jsxs(Badge, { inline: true, type: BADGE_TYPE.PRIMARY, children: [active + 1, " of ", Children.count(children)] })] })] }), childrenArray[active]] }));