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

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

@@ -1,133 +1,224 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import ReactDOM from 'react-dom';
+import { jsx, Fragment, jsxs } from '@emotion/react/jsx-runtime';
+import { createRoot } from 'react-dom/client';
 import styled from '@emotion/styled';
-import { Card } from '../Card';
-import LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';
-import constants from '../../shared/constants';
-export var TOAST_TYPE;
-(function (TOAST_TYPE) {
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
+import LayerManager, { LAYER_POSITION } from '../../shared/LayerManager.js';
+import Card from '../Card/Card.js';
+
+var TOAST_TYPE = /*#__PURE__*/ function(TOAST_TYPE) {
     TOAST_TYPE["NORMAL"] = "NORMAL";
     TOAST_TYPE["INFO"] = "INFO";
     TOAST_TYPE["SUCCESS"] = "SUCCESS";
     TOAST_TYPE["WARNING"] = "WARNING";
     TOAST_TYPE["DANGER"] = "DANGER";
-})(TOAST_TYPE || (TOAST_TYPE = {}));
-const getBackgroundColor = (type) => {
-    switch (type) {
-        case TOAST_TYPE.INFO:
-            return `var(--info, ${constants.INFO})`;
-        case TOAST_TYPE.SUCCESS:
-            return `var(--success, ${constants.SUCCESS})`;
-        case TOAST_TYPE.WARNING:
-            return `var(--warning, ${constants.WARNING})`;
-        case TOAST_TYPE.DANGER:
-            return `var(--error, ${constants.ERROR})`;
-        case TOAST_TYPE.NORMAL:
-            return `var(--toast, ${constants.TOAST})`;
+    return TOAST_TYPE;
+}({});
+const getBackgroundColor = (type)=>{
+    switch(type){
+        case "INFO":
+            return getThemeValue(THEME_NAME.INFO);
+        case "SUCCESS":
+            return getThemeValue(THEME_NAME.SUCCESS);
+        case "WARNING":
+            return getThemeValue(THEME_NAME.WARNING);
+        case "DANGER":
+            return getThemeValue(THEME_NAME.ERROR);
+        case "NORMAL":
+            return getThemeValue(THEME_NAME.TOAST);
     }
 };
-const ToastContainer = styled(Card) `
-    box-sizing: border-box;
-    border-radius: 3px;
-    padding: 12px;
-    background-color: ${props => getBackgroundColor(props.type)};
-    color: #fff;
-    margin: 20px;
-    font-size: 14px;
-    line-height: 20px;
-    transform: translateY(100%);
-    transition: transform .3s ease;
-    width: 344px;
-    display: flex;
-    align-items: center;
-
-    & svg {
-        width: 20px;
-        height: 20px;
-        fill: currentColor;
-    }
-
-    @media (max-width: 480px) {
-        & {
-            margin: 0;
-            width: 100vw;
-            border-radius: 0;
-        }
-    }
-
-    .nf-layer-enter & {
-        transform: translateY(0%);
-    }
-`;
-const TextContainer = styled.div `
-    flex: 1;
-`;
-const CloseContainer = styled.button `
-    background-color: transparent;
-    color: var(--primary, ${constants.PRIMARY_LIGHT});
-    padding: 6px 10px;
-    border: none;
-    border-radius: 3px;
-    text-transform: uppercase;
-    cursor: pointer;
-
-    &:focus {
-        background-color: rgba(255, 255, 255, 0.1);
-    }
-`;
+const ToastContainer = /*#__PURE__*/ styled(Card, {
+    target: "e1bc14ug0",
+    label: "ToastContainer"
+})("box-sizing:border-box;border-radius:3px;padding:12px;background-color:", (props)=>getBackgroundColor(props.type), ";color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";margin:20px;font-size:14px;line-height:20px;transform:translateY(100%);transition:transform 0.3s ease;width:344px;display:flex;align-items:center;position:relative;& svg{width:20px;height:20px;fill:currentColor;}@media (max-width:480px){&{margin:0;width:100vw;border-radius:0;}}.nf-layer-enter &{transform:translateY(0%);}");
+const TextContainer = /*#__PURE__*/ styled("div", {
+    target: "e1bc14ug1",
+    label: "TextContainer"
+})("flex:1;");
+const CloseContainer = /*#__PURE__*/ styled("button", {
+    target: "e1bc14ug2",
+    label: "CloseContainer"
+})("background-color:transparent;color:", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";padding:6px 10px;border:none;border-radius:3px;text-transform:uppercase;cursor:pointer;&:focus{background-color:rgba(255,255,255,0.1);}");
 const DEFAULT_DURATION = 2000;
+const createAriaLiveRegion = (id, ariaLive)=>{
+    const region = document.createElement('div');
+    region.id = id;
+    region.style.position = 'absolute';
+    region.style.width = '1px';
+    region.style.height = '1px';
+    region.style.padding = '0';
+    region.style.margin = '-1px';
+    region.style.overflow = 'hidden';
+    region.style.clip = 'rect(0, 0, 0, 0)';
+    region.style.whiteSpace = 'nowrap';
+    region.style.borderWidth = '0';
+    region.setAttribute('role', ariaLive === 'assertive' ? 'alert' : 'log');
+    region.setAttribute('aria-live', ariaLive);
+    region.setAttribute('aria-atomic', 'true');
+    return region;
+};
 class Toast {
-    constructor() {
-        this.remove = () => {
-            if (this.toast) {
-                this.toast[1]();
-                clearTimeout(this.timeout);
-                this.timeout = null;
-            }
-            this.toast = null;
-            setTimeout(() => {
-                if (!this.toast) {
-                    ReactDOM.unmountComponentAtNode(this.element);
-                }
-            }, 300);
-        };
-        /**
-         * Pause toast when user is hovering over it.
-         *
-         * @param id
-         */
-        this.pause = () => {
-            clearTimeout(this.timeout);
-        };
-        /**
-         * Restart the removal of toast.
-         *
-         * @param id
-         */
-        this.resume = (options) => () => {
-            this.timeout = setTimeout(() => {
-                this.remove();
-            }, options.duration || DEFAULT_DURATION);
-        };
-        this.element = document === null || document === void 0 ? void 0 : document.createElement('div');
-    }
     add(options) {
-        const { text, buttonText, buttonClick, duration, type = TOAST_TYPE.NORMAL } = options;
+        if (!this.element) return;
+        const { text, buttonText, buttonClick, duration, type = "NORMAL" } = options;
+        this.currentOptions = options;
+        this.isPaused = false;
         this.remove();
+        // Determine if this is an assertive message (warning/danger)
+        const isAssertive = type === "WARNING" || type === "DANGER";
+        // Announce to screen readers
+        const announcement = buttonText ? `${text} ${buttonText} button available` : text;
+        this.updateLiveRegion(announcement, isAssertive);
         this.toast = LayerManager.renderLayer({
             exitDelay: 300,
             closeOnEsc: false,
             closeOnOverlayClick: false,
             alwaysOnTop: true,
             position: LAYER_POSITION.BOTTOM_LEFT,
-            component: (_jsxs(ToastContainer, Object.assign({}, options, { type: type, elevated: true, onMouseEnter: this.pause, onMouseLeave: this.resume(options), children: [_jsx(TextContainer, { children: text }), buttonText && (_jsx(CloseContainer, { onClick: buttonClick, type: 'button', children: buttonText }))] })))
+            component: /*#__PURE__*/ jsx(Fragment, {
+                children: /*#__PURE__*/ jsxs(ToastContainer, {
+                    ...options,
+                    type: type,
+                    elevated: true,
+                    onMouseEnter: this.pause,
+                    onMouseLeave: this.resume(options),
+                    "aria-hidden": "true",
+                    children: [
+                        /*#__PURE__*/ jsx(TextContainer, {
+                            children: text
+                        }),
+                        buttonText && /*#__PURE__*/ jsx(CloseContainer, {
+                            onClick: buttonClick,
+                            type: "button",
+                            "aria-label": `${buttonText} - Press Space to pause auto-dismiss, Escape to close`,
+                            children: buttonText
+                        })
+                    ]
+                })
+            })
         });
         const Component = this.toast[0];
-        ReactDOM.render(_jsx(Component, {}), this.element);
-        this.timeout = setTimeout(() => {
+        this.root = createRoot(this.element);
+        this.root.render(/*#__PURE__*/ jsx(Component, {}));
+        this.timeout = setTimeout(()=>{
             this.remove();
         }, duration || DEFAULT_DURATION);
     }
+    constructor(){
+        this.isPaused = false;
+        this.currentOptions = null;
+        /**
+     * Clean up event listeners and DOM elements
+     * Call this when the app is tearing down (useful for tests)
+     */ this.destroy = ()=>{
+            if (typeof document !== 'undefined') {
+                document.removeEventListener('keydown', this.handleKeyDown);
+            }
+            this.remove();
+            if (this.ariaLiveContainer && document.body.contains(this.ariaLiveContainer)) {
+                document.body.removeChild(this.ariaLiveContainer);
+            }
+            this.politeRegion = undefined;
+            this.assertiveRegion = undefined;
+            this.ariaLiveContainer = undefined;
+        };
+        /**
+     * Set up keyboard listener for dismissing toast with Escape key
+     */ this.setupKeyboardListeners = ()=>{
+            if (typeof document !== 'undefined') {
+                document.addEventListener('keydown', this.handleKeyDown);
+            }
+        };
+        /**
+     * Handle keyboard events for toast interaction
+     */ this.handleKeyDown = (event)=>{
+            if (!this.toast) return;
+            // Escape key dismisses the toast
+            if (event.key === 'Escape') {
+                this.remove();
+            } else if (event.key === ' ' && this.currentOptions) {
+                event.preventDefault();
+                if (this.isPaused) {
+                    this.resumeTimeout();
+                } else {
+                    this.pauseTimeout();
+                }
+            }
+        };
+        /**
+     * Update the appropriate live region with toast content
+     */ this.updateLiveRegion = (content, isAssertive)=>{
+            const region = isAssertive ? this.assertiveRegion : this.politeRegion;
+            if (region) {
+                region.textContent = '';
+                // Add content after delay
+                setTimeout(()=>{
+                    if (region) {
+                        region.textContent = content;
+                    }
+                }, 200);
+            }
+        };
+        this.remove = ()=>{
+            if (this.toast) {
+                this.toast[1]();
+                if (this.timeout) {
+                    clearTimeout(this.timeout);
+                    this.timeout = undefined;
+                }
+            }
+            this.toast = undefined;
+            this.currentOptions = null;
+            this.isPaused = false;
+            setTimeout(()=>{
+                if (!this.toast && this.root) {
+                    this.root.unmount();
+                    this.root = undefined;
+                }
+            }, 300);
+        };
+        /**
+     * Pause toast auto-dismiss
+     */ this.pauseTimeout = ()=>{
+            if (this.timeout) {
+                clearTimeout(this.timeout);
+                this.isPaused = true;
+            }
+        };
+        /**
+     * Resume toast auto-dismiss
+     */ this.resumeTimeout = ()=>{
+            if (this.currentOptions && this.isPaused) {
+                this.timeout = setTimeout(()=>{
+                    this.remove();
+                }, this.currentOptions.duration || DEFAULT_DURATION);
+                this.isPaused = false;
+            }
+        };
+        /**
+     * Pause toast when user is hovering over it.
+     */ this.pause = ()=>{
+            this.pauseTimeout();
+        };
+        /**
+     * Restart the removal of toast.
+     */ this.resume = (options)=>()=>{
+                this.currentOptions = options;
+                this.resumeTimeout();
+            };
+        if (typeof document === 'undefined') return;
+        this.element = document?.createElement('div');
+        this.ariaLiveContainer = document?.createElement('div');
+        this.ariaLiveContainer.id = 'nf-toast-container';
+        document.body.appendChild(this.ariaLiveContainer);
+        this.politeRegion = createAriaLiveRegion('nf-toast-polite-region', 'polite');
+        this.assertiveRegion = createAriaLiveRegion('nf-toast-assertive-region', 'assertive');
+        this.ariaLiveContainer.appendChild(this.politeRegion);
+        this.ariaLiveContainer.appendChild(this.assertiveRegion);
+        this.setupKeyboardListeners();
+    }
 }
-export default new Toast();
-//# sourceMappingURL=Toast.js.map
+var Toast_default = new Toast();
+
+export { TOAST_TYPE, Toast_default as default };
+//# sourceMappingURL=Toast.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Toast.js","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { createRoot, type Root } from 'react-dom/client';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';\nimport { Card } from '../Card';\n\nexport interface ToastOptions {\n    text: string;\n    buttonText?: string;\n    buttonClick?: () => void;\n    duration?: number;\n    type?: TOAST_TYPE;\n}\n\nexport enum TOAST_TYPE {\n    NORMAL = 'NORMAL',\n    INFO = 'INFO',\n    SUCCESS = 'SUCCESS',\n    WARNING = 'WARNING',\n    DANGER = 'DANGER',\n}\n\nconst getBackgroundColor = (type: TOAST_TYPE) => {\n    switch (type) {\n        case TOAST_TYPE.INFO:\n            return getThemeValue(THEME_NAME.INFO);\n        case TOAST_TYPE.SUCCESS:\n            return getThemeValue(THEME_NAME.SUCCESS);\n        case TOAST_TYPE.WARNING:\n            return getThemeValue(THEME_NAME.WARNING);\n        case TOAST_TYPE.DANGER:\n            return getThemeValue(THEME_NAME.ERROR);\n        case TOAST_TYPE.NORMAL:\n            return getThemeValue(THEME_NAME.TOAST);\n    }\n};\n\nconst ToastContainer = styled(Card)<{ type: TOAST_TYPE }>`\n    box-sizing: border-box;\n    border-radius: 3px;\n    padding: 12px;\n    background-color: ${(props) => getBackgroundColor(props.type)};\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n    margin: 20px;\n    font-size: 14px;\n    line-height: 20px;\n    transform: translateY(100%);\n    transition: transform 0.3s ease;\n    width: 344px;\n    display: flex;\n    align-items: center;\n    position: relative;\n\n    & svg {\n        width: 20px;\n        height: 20px;\n        fill: currentColor;\n    }\n\n    @media (max-width: 480px) {\n        & {\n            margin: 0;\n            width: 100vw;\n            border-radius: 0;\n        }\n    }\n\n    .nf-layer-enter & {\n        transform: translateY(0%);\n    }\n`;\n\nconst TextContainer = styled.div`\n    flex: 1;\n`;\n\nconst CloseContainer = styled.button`\n    background-color: transparent;\n    color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    padding: 6px 10px;\n    border: none;\n    border-radius: 3px;\n    text-transform: uppercase;\n    cursor: pointer;\n\n    &:focus {\n        background-color: rgba(255, 255, 255, 0.1);\n    }\n`;\n\nconst DEFAULT_DURATION = 2000;\n\nconst createAriaLiveRegion = (id: string, ariaLive: 'polite' | 'assertive') => {\n    const region = document.createElement('div');\n    region.id = id;\n    region.style.position = 'absolute';\n    region.style.width = '1px';\n    region.style.height = '1px';\n    region.style.padding = '0';\n    region.style.margin = '-1px';\n    region.style.overflow = 'hidden';\n    region.style.clip = 'rect(0, 0, 0, 0)';\n    region.style.whiteSpace = 'nowrap';\n    region.style.borderWidth = '0';\n    region.setAttribute('role', ariaLive === 'assertive' ? 'alert' : 'log');\n    region.setAttribute('aria-live', ariaLive);\n    region.setAttribute('aria-atomic', 'true');\n    return region;\n};\n\nclass Toast {\n    private element?: HTMLDivElement;\n    private ariaLiveContainer?: HTMLDivElement;\n    private toast?: ReturnType<typeof LayerManager.renderLayer>;\n    private timeout?: NodeJS.Timeout;\n    private root?: Root;\n    private politeRegion?: HTMLDivElement;\n    private assertiveRegion?: HTMLDivElement;\n    private isPaused: boolean = false;\n    private currentOptions: ToastOptions | null = null;\n\n    constructor() {\n        if (typeof document === 'undefined') return;\n\n        this.element = document?.createElement('div');\n        this.ariaLiveContainer = document?.createElement('div');\n        this.ariaLiveContainer.id = 'nf-toast-container';\n        document.body.appendChild(this.ariaLiveContainer);\n\n        this.politeRegion = createAriaLiveRegion('nf-toast-polite-region', 'polite');\n        this.assertiveRegion = createAriaLiveRegion('nf-toast-assertive-region', 'assertive');\n        this.ariaLiveContainer.appendChild(this.politeRegion);\n        this.ariaLiveContainer.appendChild(this.assertiveRegion);\n\n        this.setupKeyboardListeners();\n    }\n\n    /**\n     * Clean up event listeners and DOM elements\n     * Call this when the app is tearing down (useful for tests)\n     */\n    public destroy = () => {\n        if (typeof document !== 'undefined') {\n            document.removeEventListener('keydown', this.handleKeyDown);\n        }\n        this.remove();\n        if (this.ariaLiveContainer && document.body.contains(this.ariaLiveContainer)) {\n            document.body.removeChild(this.ariaLiveContainer);\n        }\n        this.politeRegion = undefined;\n        this.assertiveRegion = undefined;\n        this.ariaLiveContainer = undefined;\n    };\n\n    /**\n     * Set up keyboard listener for dismissing toast with Escape key\n     */\n    private setupKeyboardListeners = () => {\n        if (typeof document !== 'undefined') {\n            document.addEventListener('keydown', this.handleKeyDown);\n        }\n    };\n\n    /**\n     * Handle keyboard events for toast interaction\n     */\n    private handleKeyDown = (event: KeyboardEvent) => {\n        if (!this.toast) return;\n\n        // Escape key dismisses the toast\n        if (event.key === 'Escape') {\n            this.remove();\n        }\n        // Space key pauses/resumes auto-dismiss\n        else if (event.key === ' ' && this.currentOptions) {\n            event.preventDefault();\n            if (this.isPaused) {\n                this.resumeTimeout();\n            } else {\n                this.pauseTimeout();\n            }\n        }\n    };\n\n    /**\n     * Update the appropriate live region with toast content\n     */\n    private updateLiveRegion = (content: string, isAssertive: boolean) => {\n        const region = isAssertive ? this.assertiveRegion : this.politeRegion;\n\n        if (region) {\n            region.textContent = '';\n            // Add content after delay\n            setTimeout(() => {\n                if (region) {\n                    region.textContent = content;\n                }\n            }, 200);\n        }\n    };\n\n    public remove = () => {\n        if (this.toast) {\n            this.toast[1]();\n            if (this.timeout) {\n                clearTimeout(this.timeout);\n                this.timeout = undefined;\n            }\n        }\n        this.toast = undefined;\n        this.currentOptions = null;\n        this.isPaused = false;\n\n        setTimeout(() => {\n            if (!this.toast && this.root) {\n                this.root.unmount();\n                this.root = undefined;\n            }\n        }, 300);\n    };\n\n    /**\n     * Pause toast auto-dismiss\n     */\n    private pauseTimeout = () => {\n        if (this.timeout) {\n            clearTimeout(this.timeout);\n            this.isPaused = true;\n        }\n    };\n\n    /**\n     * Resume toast auto-dismiss\n     */\n    private resumeTimeout = () => {\n        if (this.currentOptions && this.isPaused) {\n            this.timeout = setTimeout(() => {\n                this.remove();\n            }, this.currentOptions.duration || DEFAULT_DURATION);\n            this.isPaused = false;\n        }\n    };\n\n    /**\n     * Pause toast when user is hovering over it.\n     */\n    public pause = () => {\n        this.pauseTimeout();\n    };\n\n    /**\n     * Restart the removal of toast.\n     */\n    public resume = (options: ToastOptions) => () => {\n        this.currentOptions = options;\n        this.resumeTimeout();\n    };\n\n    public add(options: ToastOptions) {\n        if (!this.element) return;\n\n        const { text, buttonText, buttonClick, duration, type = TOAST_TYPE.NORMAL } = options;\n        this.currentOptions = options;\n        this.isPaused = false;\n        this.remove();\n\n        // Determine if this is an assertive message (warning/danger)\n        const isAssertive = type === TOAST_TYPE.WARNING || type === TOAST_TYPE.DANGER;\n\n        // Announce to screen readers\n        const announcement = buttonText ? `${text} ${buttonText} button available` : text;\n        this.updateLiveRegion(announcement, isAssertive);\n\n        this.toast = LayerManager.renderLayer({\n            exitDelay: 300,\n            closeOnEsc: false,\n            closeOnOverlayClick: false,\n            alwaysOnTop: true,\n            position: LAYER_POSITION.BOTTOM_LEFT,\n            component: (\n                <>\n                    {/* Visual toast (hidden from screen readers) */}\n                    <ToastContainer\n                        {...options}\n                        type={type}\n                        elevated\n                        onMouseEnter={this.pause}\n                        onMouseLeave={this.resume(options)}\n                        aria-hidden=\"true\"\n                    >\n                        <TextContainer>{text}</TextContainer>\n                        {buttonText && (\n                            <CloseContainer\n                                onClick={buttonClick}\n                                type=\"button\"\n                                aria-label={`${buttonText} - Press Space to pause auto-dismiss, Escape to close`}\n                            >\n                                {buttonText}\n                            </CloseContainer>\n                        )}\n                    </ToastContainer>\n                </>\n            ),\n        });\n        const Component = this.toast[0];\n        this.root = createRoot(this.element);\n        this.root.render(<Component />);\n\n        this.timeout = setTimeout(() => {\n            this.remove();\n        }, duration || DEFAULT_DURATION);\n    }\n}\n\nexport default new Toast();\n"],"names":["TOAST_TYPE","getBackgroundColor","type","getThemeValue","THEME_NAME","INFO","SUCCESS","WARNING","ERROR","TOAST","ToastContainer","styled","Card","props","TEXT_COLOR_LIGHT","TextContainer","CloseContainer","PRIMARY_LIGHT","DEFAULT_DURATION","createAriaLiveRegion","id","ariaLive","region","document","createElement","style","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth","setAttribute","Toast","add","options","element","text","buttonText","buttonClick","duration","currentOptions","isPaused","remove","isAssertive","announcement","updateLiveRegion","toast","LayerManager","renderLayer","exitDelay","closeOnEsc","closeOnOverlayClick","alwaysOnTop","LAYER_POSITION","BOTTOM_LEFT","component","_jsx","_Fragment","_jsxs","elevated","onMouseEnter","pause","onMouseLeave","resume","aria-hidden","onClick","aria-label","Component","root","createRoot","render","timeout","setTimeout","destroy","removeEventListener","handleKeyDown","ariaLiveContainer","body","contains","removeChild","politeRegion","undefined","assertiveRegion","setupKeyboardListeners","addEventListener","event","key","preventDefault","resumeTimeout","pauseTimeout","content","textContent","clearTimeout","unmount","appendChild"],"mappings":"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"}

package/lib-esm/components/Toast/ToastStory.d.ts

@@ -1,27 +1,24 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import { TOAST_TYPE } from './Toast';
-type ToastOptions = PropTypes.InferProps<typeof ToastStory.propTypes>;
+type ToastOptions = {
+    /** Text of the toast */
+    text: string;
+    /** Id for the notification, helps in de-duplication. */
+    id?: string;
+    /**
+     * Duration for the toast in milliseconds
+     * @default 2000
+     */
+    duration?: number;
+    /**
+     * Type of toast
+     * @default TOAST_TYPE.NORMAL
+     */
+    type?: TOAST_TYPE;
+    /** Action button text */
+    buttonText?: string;
+    /** Action button click callback */
+    buttonClick?: () => void;
+};
 /** This component is only used for storybook documentation */
-export default class ToastStory extends React.Component<ToastOptions> {
-    static propTypes: {
-        /** Text of the toast */
-        text: PropTypes.Validator<string>;
-        /** Id for the notification, helps in de-duplication. */
-        id: PropTypes.Requireable<string>;
-        /** Duration for the toast in milliseconds */
-        duration: PropTypes.Requireable<number>;
-        /** Type of toast */
-        type: PropTypes.Requireable<TOAST_TYPE>;
-        /** Action button text */
-        buttonText: PropTypes.Requireable<string>;
-        /** Action button click callback */
-        buttonClick: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static defaultProps: {
-        duration: number;
-        type: TOAST_TYPE;
-    };
-    render(): React.ReactNode;
-}
+export default function ToastStory(props: ToastOptions): null;
 export {};

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

@@ -1,22 +1,19 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 export declare enum TOOLTIP_POSITION {
     TOP = "TOP",
     BOTTOM = "BOTTOM",
     LEFT = "LEFT",
     RIGHT = "RIGHT"
 }
-declare function Tooltip(props: React.PropsWithChildren<TooltipProps>): import("@emotion/react/jsx-runtime").JSX.Element;
-declare namespace Tooltip {
-    var propTypes: {
-        /** Text to show in the tooltip */
-        tooltipText: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-        /** Position of the tooltip */
-        position: PropTypes.Requireable<TOOLTIP_POSITION>;
-    };
-    var defaultProps: {
-        position: TOOLTIP_POSITION;
-    };
-}
+declare const Tooltip: React.ForwardRefExoticComponent<{
+    /** Text to show in the tooltip */
+    tooltipText: string | React.ReactNode;
+    /**
+     * Position of the tooltip
+     * @default TOOLTIP_POSITION.BOTTOM
+     */
+    position?: TOOLTIP_POSITION;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export default Tooltip;
-type TooltipProps = PropTypes.InferProps<typeof Tooltip.propTypes>;

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

@@ -1,95 +1,80 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import PropTypes from 'prop-types';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import React, { useId } from 'react';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
-export var TOOLTIP_POSITION;
-(function (TOOLTIP_POSITION) {
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
+
+var TOOLTIP_POSITION = /*#__PURE__*/ function(TOOLTIP_POSITION) {
     TOOLTIP_POSITION["TOP"] = "TOP";
     TOOLTIP_POSITION["BOTTOM"] = "BOTTOM";
     TOOLTIP_POSITION["LEFT"] = "LEFT";
     TOOLTIP_POSITION["RIGHT"] = "RIGHT";
-})(TOOLTIP_POSITION || (TOOLTIP_POSITION = {}));
-;
+    return TOOLTIP_POSITION;
+}({});
 const positionStyle = {
-    [TOOLTIP_POSITION.LEFT]: `
+    ["LEFT"]: `
         left: 0;
         transform: translateX(-50%) scale(0);
     `,
-    [TOOLTIP_POSITION.RIGHT]: `
+    ["RIGHT"]: `
         right: 0;
         transform: translateX(50%) scale(0);
     `,
-    [TOOLTIP_POSITION.TOP]: `
+    ["TOP"]: `
         top: 0;
         transform: translateY(-10px) scale(0);
     `,
-    [TOOLTIP_POSITION.BOTTOM]: `
+    ["BOTTOM"]: `
         bottom: 0;
         transform: translateY(10px) scale(0);
-    `,
+    `
 };
 const positionHoverStyle = {
-    [TOOLTIP_POSITION.LEFT]: `
+    ["LEFT"]: `
         transform: translateX(-100%) scale(1);
     `,
-    [TOOLTIP_POSITION.RIGHT]: `
+    ["RIGHT"]: `
         transform: translateX(100%) scale(1);
     `,
-    [TOOLTIP_POSITION.TOP]: `
+    ["TOP"]: `
         transform: translateY(-25px) scale(1);
     `,
-    [TOOLTIP_POSITION.BOTTOM]: `
+    ["BOTTOM"]: `
         transform: translateY(25px) scale(1);
-    `,
+    `
 };
-const TooltipDiv = styled.div `
-    position: absolute;
-    background-color: var(--tooltip-color, ${constants.TOOLTIP_COLOR});
-    padding: 5px;
-    color: #fff;
-    border-radius: 3px;
-    transition: transform .3s ease;
-    font-size: 12px;
-    z-index: 1;
-    ${props => positionStyle[props.position]}
-`;
-const TooltipContainer = styled.div `
-    position: relative;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-
-    &:hover ${TooltipDiv} {
-        ${props => positionHoverStyle[props.position]}
-    }
-`;
-export default function Tooltip(props) {
-    const { children, position } = props, rest = __rest(props, ["children", "position"]);
-    return (_jsxs(TooltipContainer, Object.assign({ position: position }, rest, { children: [children, _jsx(TooltipDiv, { position: position, children: rest.tooltipText })] })));
+const TooltipDiv = /*#__PURE__*/ styled("div", {
+    target: "ebjobmh0",
+    label: "TooltipDiv"
+})("position:absolute;background-color:", getThemeValue(THEME_NAME.TOOLTIP_COLOR), ";padding:5px;color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";border-radius:3px;transition:transform 0.3s ease;font-size:12px;z-index:1;", (props)=>positionStyle[props.position]);
+const TooltipContainer = /*#__PURE__*/ styled("div", {
+    target: "ebjobmh1",
+    label: "TooltipContainer"
+})("position:relative;display:inline-flex;justify-content:center;align-items:center;&:hover ", TooltipDiv, ",&:focus-within ", TooltipDiv, "{", (props)=>positionHoverStyle[props.position], "}");
+function TooltipComponent(props, ref) {
+    const { children, position = "BOTTOM", ...rest } = props;
+    const tooltipId = useId();
+    // Clone the child to inject aria-describedby and tabIndex if possible
+    const trigger = /*#__PURE__*/ React.isValidElement(children) ? /*#__PURE__*/ React.cloneElement(children, {
+        'aria-describedby': tooltipId,
+        tabIndex: children.props && typeof children.props.tabIndex !== 'undefined' ? children.props.tabIndex : 0
+    }) : children;
+    return /*#__PURE__*/ jsxs(TooltipContainer, {
+        ...rest,
+        ref: ref,
+        position: position,
+        children: [
+            trigger,
+            /*#__PURE__*/ jsx(TooltipDiv, {
+                id: tooltipId,
+                "aria-hidden": "true",
+                role: "tooltip",
+                position: position,
+                children: rest.tooltipText
+            })
+        ]
+    });
 }
-Tooltip.propTypes = {
-    /** Text to show in the tooltip */
-    tooltipText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-    /** Position of the tooltip */
-    position: PropTypes.oneOf([
-        TOOLTIP_POSITION.TOP,
-        TOOLTIP_POSITION.LEFT,
-        TOOLTIP_POSITION.RIGHT,
-        TOOLTIP_POSITION.BOTTOM
-    ]),
-};
-Tooltip.defaultProps = {
-    position: TOOLTIP_POSITION.BOTTOM
-};
-//# sourceMappingURL=Tooltip.js.map
+const Tooltip = /*#__PURE__*/ React.forwardRef(TooltipComponent);
+
+export { TOOLTIP_POSITION, Tooltip as default };
+//# sourceMappingURL=Tooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,MAAM,CAAN,IAAY,gBAKX;AALD,WAAY,gBAAgB;IACxB,+BAAW,CAAA;IACX,qCAAiB,CAAA;IACjB,iCAAa,CAAA;IACb,mCAAe,CAAA;AACnB,CAAC,EALW,gBAAgB,KAAhB,gBAAgB,QAK3B;AAAA,CAAC;AAEF,MAAM,aAAa,GAAG;IAClB,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE;;;KAGxB;IACD,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE;;;KAGzB;IACD,CAAC,gBAAgB,CAAC,GAAG,CAAC,EAAE;;;KAGvB;IACD,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAAE;;;KAG1B;CACJ,CAAC;AAEF,MAAM,kBAAkB,GAAG;IACvB,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE;;KAExB;IACD,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE;;KAEzB;IACD,CAAC,gBAAgB,CAAC,GAAG,CAAC,EAAE;;KAEvB;IACD,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAAE;;KAE1B;CACJ,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAgC;;6CAEhB,SAAS,CAAC,aAAa;;;;;;;MAO9D,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC;CAC3C,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAgC;;;;;;cAMrD,UAAU;UACd,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC;;CAEpD,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAA4C;IACxE,MAAM,EAAE,QAAQ,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAvC,wBAA+B,CAAQ,CAAC;IAE9C,OAAO,CACH,MAAC,gBAAgB,kBAAC,QAAQ,EAAE,QAAQ,IAAM,IAAI,eACzC,QAAQ,EACT,KAAC,UAAU,IAAC,QAAQ,EAAE,QAAQ,YAAG,IAAI,CAAC,WAAW,GAAc,KAChD,CACtB,CAAC;AACN,CAAC;AAID,OAAO,CAAC,SAAS,GAAG;IAChB,kCAAkC;IAClC,WAAW,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU;IAC/E,8BAA8B;IAC9B,QAAQ,EAAE,SAAS,CAAC,KAAK,CAAC;QACtB,gBAAgB,CAAC,GAAG;QACpB,gBAAgB,CAAC,IAAI;QACrB,gBAAgB,CAAC,KAAK;QACtB,gBAAgB,CAAC,MAAM;KAC1B,CAAC;CACL,CAAA;AAED,OAAO,CAAC,YAAY,GAAG;IACnB,QAAQ,EAAE,gBAAgB,CAAC,MAAM;CACpC,CAAA"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nexport enum TOOLTIP_POSITION {\n    TOP = 'TOP',\n    BOTTOM = 'BOTTOM',\n    LEFT = 'LEFT',\n    RIGHT = 'RIGHT',\n}\n\nconst positionStyle = {\n    [TOOLTIP_POSITION.LEFT]: `\n        left: 0;\n        transform: translateX(-50%) scale(0);\n    `,\n    [TOOLTIP_POSITION.RIGHT]: `\n        right: 0;\n        transform: translateX(50%) scale(0);\n    `,\n    [TOOLTIP_POSITION.TOP]: `\n        top: 0;\n        transform: translateY(-10px) scale(0);\n    `,\n    [TOOLTIP_POSITION.BOTTOM]: `\n        bottom: 0;\n        transform: translateY(10px) scale(0);\n    `,\n};\n\nconst positionHoverStyle = {\n    [TOOLTIP_POSITION.LEFT]: `\n        transform: translateX(-100%) scale(1);\n    `,\n    [TOOLTIP_POSITION.RIGHT]: `\n        transform: translateX(100%) scale(1);\n    `,\n    [TOOLTIP_POSITION.TOP]: `\n        transform: translateY(-25px) scale(1);\n    `,\n    [TOOLTIP_POSITION.BOTTOM]: `\n        transform: translateY(25px) scale(1);\n    `,\n};\n\nconst TooltipDiv = styled.div<{ position: TOOLTIP_POSITION }>`\n    position: absolute;\n    background-color: ${getThemeValue(THEME_NAME.TOOLTIP_COLOR)};\n    padding: 5px;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n    border-radius: 3px;\n    transition: transform 0.3s ease;\n    font-size: 12px;\n    z-index: 1;\n    ${(props) => positionStyle[props.position]}\n`;\n\nconst TooltipContainer = styled.div<{ position: TOOLTIP_POSITION }>`\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n\n    &:hover ${TooltipDiv}, &:focus-within ${TooltipDiv} {\n        ${(props) => positionHoverStyle[props.position]}\n    }\n`;\n\ntype TooltipProps = React.PropsWithChildren<{\n    /** Text to show in the tooltip */\n    tooltipText: string | React.ReactNode;\n    /**\n     * Position of the tooltip\n     * @default TOOLTIP_POSITION.BOTTOM\n     */\n    position?: TOOLTIP_POSITION;\n}> &\n    React.HTMLAttributes<HTMLDivElement>;\n\nfunction TooltipComponent(props: TooltipProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, position = TOOLTIP_POSITION.BOTTOM, ...rest } = props;\n    const tooltipId = useId();\n\n    // Clone the child to inject aria-describedby and tabIndex if possible\n    const trigger = React.isValidElement(children)\n        ? React.cloneElement(children as React.ReactElement, {\n              'aria-describedby': tooltipId,\n              tabIndex:\n                  children.props && typeof children.props.tabIndex !== 'undefined'\n                      ? children.props.tabIndex\n                      : 0,\n          })\n        : children;\n\n    return (\n        <TooltipContainer {...rest} ref={ref} position={position}>\n            {trigger}\n            <TooltipDiv id={tooltipId} aria-hidden=\"true\" role=\"tooltip\" position={position}>\n                {rest.tooltipText as React.ReactNode}\n            </TooltipDiv>\n        </TooltipContainer>\n    );\n}\n\nconst Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(TooltipComponent);\nexport default Tooltip;\n"],"names":["TOOLTIP_POSITION","positionStyle","positionHoverStyle","TooltipDiv","styled","getThemeValue","THEME_NAME","TOOLTIP_COLOR","TEXT_COLOR_LIGHT","props","position","TooltipContainer","TooltipComponent","ref","children","rest","tooltipId","useId","trigger","React","isValidElement","cloneElement","tabIndex","_jsxs","_jsx","id","aria-hidden","role","tooltipText","Tooltip","forwardRef"],"mappings":";;;;;AAIO,IAAA,gBAAKA,iBAAAA,SAAAA,gBAAAA,EAAAA;;;;;AAAAA,IAAAA,OAAAA,gBAAAA;AAKX,CAAA,CAAA,EAAA;AAED,MAAMC,aAAAA,GAAgB;AAClB,IAAA,CAAA,MAAA,GAAyB;;;IAGzB,CAAC;AACD,IAAA,CAAA,OAAA,GAA0B;;;IAG1B,CAAC;AACD,IAAA,CAAA,KAAA,GAAwB;;;IAGxB,CAAC;AACD,IAAA,CAAA,QAAA,GAA2B;;;IAG3B;AACJ,CAAA;AAEA,MAAMC,kBAAAA,GAAqB;AACvB,IAAA,CAAA,MAAA,GAAyB;;IAEzB,CAAC;AACD,IAAA,CAAA,OAAA,GAA0B;;IAE1B,CAAC;AACD,IAAA,CAAA,KAAA,GAAwB;;IAExB,CAAC;AACD,IAAA,CAAA,QAAA,GAA2B;;IAE3B;AACJ,CAAA;AAEA,MAAMC,UAAAA,iBAAaC,MAAAA,CAAAA,KAAAA,EAAAA;;;AAEKC,CAAAA,CAAAA,CAAAA,qCAAAA,EAAAA,aAAAA,CAAcC,UAAAA,CAAWC,aAAa,CAAA,EAAA,qBAAA,EAEjDF,aAAAA,CAAcC,UAAAA,CAAWE,gBAAgB,CAAA,EAAA,6EAAA,EAKhD,CAACC,KAAAA,GAAUR,aAAa,CAACQ,KAAAA,CAAMC,QAAQ,CAAC,CAAA;AAG9C,MAAMC,gBAAAA,iBAAmBP,MAAAA,CAAAA,KAAAA,EAAAA;;;AAMXD,CAAAA,CAAAA,CAAAA,0FAAAA,EAAAA,UAAAA,EAAAA,kBAAAA,EAA8BA,iBAClC,CAACM,KAAAA,GAAUP,kBAAkB,CAACO,KAAAA,CAAMC,QAAQ,CAAC,EAAA,GAAA,CAAA;AAevD,SAASE,gBAAAA,CAAiBH,KAAmB,EAAEI,GAA8B,EAAA;AACzE,IAAA,MAAM,EAAEC,QAAQ,EAAEJ,mBAAkC,EAAE,GAAGK,MAAM,GAAGN,KAAAA;AAClE,IAAA,MAAMO,SAAAA,GAAYC,KAAAA,EAAAA;;IAGlB,MAAMC,OAAAA,iBAAUC,MAAMC,cAAc,CAACN,0BAC/BK,KAAAA,CAAME,YAAY,CAACP,QAAAA,EAAgC;QAC/C,kBAAA,EAAoBE,SAAAA;AACpBM,QAAAA,QAAAA,EACIR,QAAAA,CAASL,KAAK,IAAI,OAAOK,SAASL,KAAK,CAACa,QAAQ,KAAK,WAAA,GAC/CR,QAAAA,CAASL,KAAK,CAACa,QAAQ,GACvB;KACd,CAAA,GACAR,QAAAA;AAEN,IAAA,qBACIS,IAAA,CAACZ,gBAAAA,EAAAA;AAAkB,QAAA,GAAGI,IAAI;QAAEF,GAAAA,EAAKA,GAAAA;QAAKH,QAAAA,EAAUA,QAAAA;;AAC3CQ,YAAAA,OAAAA;0BACDM,GAAA,CAACrB,UAAAA,EAAAA;gBAAWsB,EAAAA,EAAIT,SAAAA;gBAAWU,aAAAA,EAAY,MAAA;gBAAOC,IAAAA,EAAK,SAAA;gBAAUjB,QAAAA,EAAUA,QAAAA;AAClEK,gBAAAA,QAAAA,EAAAA,IAAAA,CAAKa;;;;AAItB;AAEA,MAAMC,OAAAA,iBAAUV,KAAAA,CAAMW,UAAU,CAA+BlB,gBAAAA;;;;"}