@lumx/react 3.20.1-alpha.20 → 3.20.1-alpha.22

package/src/components/navigation/Navigation.tsx

@@ -0,0 +1,79 @@
+import classNames from 'classnames';
+
+import { HasAriaLabelOrLabelledBy, HasClassName, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { Orientation, Theme } from '@lumx/react';
+import { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
+import { NavigationSection } from './NavigationSection';
+import { NavigationItem } from './NavigationItem';
+import { NavigationContext } from './context';
+
+export type NavigationProps = React.ComponentProps<'nav'> &
+    HasClassName &
+    HasTheme & {
+        /** Content of the navigation. These components should be of type NavigationItem to be rendered */
+        children?: React.ReactNode;
+        orientation?: Orientation;
+    } & HasAriaLabelOrLabelledBy;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Navigation';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props
+ */
+const DEFAULT_PROPS = {
+    orientation: Orientation.vertical,
+};
+
+type SubComponents = {
+    Section: typeof NavigationSection;
+    Item: typeof NavigationItem;
+};
+
+export const Navigation = forwardRef<NavigationProps, HTMLElement, SubComponents>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const {
+        children,
+        className,
+        theme = defaultTheme,
+        orientation = DEFAULT_PROPS.orientation,
+        ...forwardedProps
+    } = props;
+    return (
+        <ThemeProvider value={theme}>
+            <nav
+                className={classNames(
+                    className,
+                    handleBasicClasses({
+                        prefix: CLASSNAME,
+                        theme,
+                        orientation,
+                    }),
+                )}
+                ref={ref}
+                {...forwardedProps}
+            >
+                <NavigationContext.Provider value={{ orientation }}>
+                    <ul className={`${CLASSNAME}__list`}>{children}</ul>
+                </NavigationContext.Provider>
+            </nav>
+        </ThemeProvider>
+    );
+});
+Navigation.displayName = COMPONENT_NAME;
+Navigation.className = CLASSNAME;
+Navigation.defaultProps = DEFAULT_PROPS;
+
+// Sub components
+Navigation.Section = NavigationSection;
+Navigation.Item = NavigationItem;

package/src/components/navigation/NavigationItem.test.tsx

@@ -0,0 +1,35 @@
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render } from '@testing-library/react';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
+import { NavigationItem, NavigationItemProps } from './NavigationItem';
+
+const CLASSNAME = NavigationItem.className as string;
+
+type SetupProps = Partial<NavigationItemProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+
+const setup = (propsOverride: SetupProps = {}) => {
+    const props = { ...propsOverride };
+    const { container } = render(<NavigationItem label="A link" href="" {...props} />);
+
+    return {
+        container,
+        element: getByClassName(container, CLASSNAME),
+        link: getByClassName(container, `${CLASSNAME}__link`),
+        props,
+    };
+};
+
+describe(`<${NavigationItem.displayName}>`, () => {
+    it('should render default', () => {
+        const { element } = setup();
+        expect(element).toBeInTheDocument();
+        expect(element).toHaveClass(CLASSNAME);
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'element', forwardAttributes: 'link' });
+});

package/src/components/navigation/NavigationItem.tsx

@@ -0,0 +1,82 @@
+import { ElementType, ReactNode } from 'react';
+import { Icon, Placement, Size, Tooltip, Text } from '@lumx/react';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { ComponentRef, HasClassName, HasPolymorphicAs, HasRequiredLinkHref, HasTheme } from '@lumx/react/utils/type';
+import classNames from 'classnames';
+import { forwardRefPolymorphic } from '@lumx/react/utils/react/forwardRefPolymorphic';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';
+import { RawClickable } from '@lumx/react/utils/react/RawClickable';
+
+type BaseNavigationItemProps = {
+    /** Icon (SVG path). */
+    icon?: string;
+    /** Label content. */
+    label: ReactNode;
+    /** Mark as the current page link */
+    isCurrentPage?: boolean;
+};
+
+/**
+ * Navigation item props
+ */
+export type NavigationItemProps<E extends ElementType = 'a'> = HasPolymorphicAs<E> &
+    HasTheme &
+    HasClassName &
+    BaseNavigationItemProps &
+    HasRequiredLinkHref<E>;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'NavigationItem';
+
+/**
+ * Component default class name and class prefix.
+ */
+export const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+export const NavigationItem = Object.assign(
+    forwardRefPolymorphic(<E extends ElementType = 'a'>(props: NavigationItemProps<E>, ref: ComponentRef<E>) => {
+        const { className, icon, label, isCurrentPage, as: Element = 'a', ...forwardedProps } = props;
+        const theme = useTheme();
+        const { tooltipLabel, labelRef } = useOverflowTooltipLabel(label);
+
+        return (
+            <li
+                className={classNames(
+                    className,
+                    handleBasicClasses({
+                        prefix: CLASSNAME,
+                        theme,
+                    }),
+                )}
+            >
+                <Tooltip label={tooltipLabel} placement={Placement.TOP}>
+                    <RawClickable
+                        as={Element}
+                        className={handleBasicClasses({
+                            prefix: `${CLASSNAME}__link`,
+                            isSelected: isCurrentPage,
+                        })}
+                        ref={ref as React.Ref<any>}
+                        aria-current={isCurrentPage ? 'page' : undefined}
+                        {...forwardedProps}
+                    >
+                        {icon ? (
+                            <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} theme={theme} />
+                        ) : null}
+
+                        <Text as="span" truncate className={`${CLASSNAME}__label`} ref={labelRef}>
+                            {label}
+                        </Text>
+                    </RawClickable>
+                </Tooltip>
+            </li>
+        );
+    }),
+    {
+        displayName: COMPONENT_NAME,
+        className: CLASSNAME,
+    },
+);

package/src/components/navigation/NavigationSection.test.tsx

@@ -0,0 +1,137 @@
+import { commonTestsSuiteRTL, RenderWrapper } from '@lumx/react/testing/utils';
+import { render, screen } from '@testing-library/react';
+import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import userEvent from '@testing-library/user-event';
+import { Orientation } from '@lumx/core/js/constants';
+
+import { NavigationItem } from './NavigationItem';
+import { NavigationSection, NavigationSectionProps } from './NavigationSection';
+import { NavigationContext } from './context';
+
+const CLASSNAME = NavigationSection.className as string;
+
+type SetupProps = Partial<NavigationSectionProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+
+const setup = (
+    propsOverride: SetupProps = {},
+    { orientation = Orientation.vertical, wrapper }: { orientation?: Orientation; wrapper?: RenderWrapper } = {},
+) => {
+    const props = { label: 'Section 1', ...propsOverride };
+    const { container } = render(
+        <NavigationContext.Provider value={{ orientation }}>
+            <NavigationSection {...props}>
+                <NavigationItem label="A content" href="" />
+                <NavigationItem label="A link" href="" />
+                <NavigationItem label="A community" href="" />
+            </NavigationSection>
+        </NavigationContext.Provider>,
+        { wrapper },
+    );
+
+    const query = {
+        button: () => screen.getByRole('button', { name: props.label as string }),
+        content: () => queryByClassName(container, `${CLASSNAME}__drawer`),
+        popover: () => queryByClassName(container, `${CLASSNAME}__drawer--popover`),
+    };
+    return {
+        container,
+        element: getByClassName(container, CLASSNAME),
+        button: query.button(),
+        query,
+        props,
+    };
+};
+
+describe(`<${NavigationSection.displayName}>`, () => {
+    it('should render default', () => {
+        const { element } = setup();
+        expect(element).toBeInTheDocument();
+        expect(element).toHaveClass(CLASSNAME);
+    });
+
+    it('should be closed by default in vertical mode', () => {
+        const { element, query } = setup();
+        expect(element).toBeInTheDocument();
+        expect(element).toHaveClass(CLASSNAME);
+        // Section is visible
+        expect(query.button()).toBeInTheDocument();
+        expect(query.button()).toHaveAttribute('aria-expanded', 'false');
+        // Content is not visible
+        expect(query.content()).not.toBeInTheDocument();
+    });
+
+    it('should be closed by default in horizontal mode', () => {
+        const { element, query } = setup({}, { orientation: Orientation.horizontal });
+        expect(element).toBeInTheDocument();
+        expect(element).toHaveClass(CLASSNAME);
+        // Section is visible
+        expect(query.button()).toBeInTheDocument();
+        expect(query.button()).toHaveAttribute('aria-expanded', 'false');
+        // Content is not visible
+        expect(query.popover()).not.toBeInTheDocument();
+    });
+
+    it('should toggle on click in vertical mode', async () => {
+        const { query } = setup();
+        // Content is not visible
+        expect(query.content()).not.toBeInTheDocument();
+        // click to open
+        await userEvent.click(query.button() as any);
+        expect(query.button()).toBeInTheDocument();
+        expect(query.button()).toHaveAttribute('aria-expanded', 'true');
+        expect(query.button()).toHaveAttribute('aria-controls');
+        expect(query.content()).toBeInTheDocument();
+        expect(query.button().getAttribute('aria-controls')).toBe(query.content()?.getAttribute('id'));
+        // click to close
+        await userEvent.click(query.button() as any);
+        expect(query.button()).toBeInTheDocument();
+        expect(query.button()).toHaveAttribute('aria-expanded', 'false');
+        expect(query.content()).not.toBeInTheDocument();
+    });
+
+    it('should be in a popover and toggle on click in horizontal mode', async () => {
+        const { query } = setup({}, { orientation: Orientation.horizontal });
+        // Content is not visible
+        expect(query.popover()).not.toBeInTheDocument();
+        // click to open
+        await userEvent.click(query.button() as any);
+        expect(query.button()).toBeInTheDocument();
+        expect(query.button()).toHaveAttribute('aria-expanded', 'true');
+        expect(query.button()).toHaveAttribute('aria-controls');
+        expect(query.popover()).toBeInTheDocument();
+        expect(query.button().getAttribute('aria-controls')).toBe(query.popover()?.getAttribute('id'));
+        // click to close
+        await userEvent.click(query.button() as any);
+        expect(query.button()).toBeInTheDocument();
+        expect(query.button()).toHaveAttribute('aria-expanded', 'false');
+        expect(query.popover()).not.toBeInTheDocument();
+    });
+
+    it('should also toggle on click away in horizontal mode', async () => {
+        const { query } = setup({}, { orientation: Orientation.horizontal });
+        // Content is not visible
+        expect(query.popover()).not.toBeInTheDocument();
+        // click to open
+        await userEvent.click(query.button() as any);
+        expect(query.popover()).toBeInTheDocument();
+        // click away to close
+        await userEvent.click(document.body);
+        expect(query.popover()).not.toBeInTheDocument();
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'element',
+        forwardAttributes: 'button',
+        applyTheme: {
+            affects: [{ element: 'element' }],
+            viaProp: false,
+            viaContext: true,
+        },
+    });
+});

package/src/components/navigation/NavigationSection.tsx

@@ -0,0 +1,108 @@
+import { useRef, useState, useContext } from 'react';
+
+import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
+import { Icon, Size, Text, Orientation, Popover, Placement, Theme } from '@lumx/react';
+import classNames from 'classnames';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { HasClassName } from '@lumx/react/utils/type';
+import { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { useId } from '@lumx/react/hooks/useId';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
+import { RawClickable } from '@lumx/react/utils/react/RawClickable';
+import { CLASSNAME as ITEM_CLASSNAME } from './NavigationItem';
+import { NavigationContext } from './context';
+
+export interface NavigationSectionProps extends React.ComponentPropsWithoutRef<'button'>, HasClassName {
+    /** Items inside the section */
+    children: React.ReactNode;
+    /** Icon (SVG path). */
+    icon?: string;
+    /** Label content. */
+    label: string | React.ReactNode;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'NavigationSection';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+export const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElement>((props, ref) => {
+    const { children, className, label, icon, ...forwardedProps } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const sectionId = useId();
+    const { orientation } = useContext(NavigationContext) || {};
+    const theme = useTheme();
+    const isDropdown = orientation === Orientation.horizontal;
+    return (
+        <li
+            className={classNames(
+                className,
+                CLASSNAME,
+                ITEM_CLASSNAME,
+                handleBasicClasses({
+                    prefix: ITEM_CLASSNAME,
+                    theme,
+                }),
+            )}
+            ref={ref}
+        >
+            <RawClickable<'button'>
+                as="button"
+                {...forwardedProps}
+                aria-controls={sectionId}
+                aria-expanded={isOpen}
+                className={classNames(`${ITEM_CLASSNAME}__link`)}
+                ref={buttonRef}
+                onClick={(event) => {
+                    setIsOpen(!isOpen);
+                    event.stopPropagation();
+                }}
+            >
+                {icon ? <Icon className={`${ITEM_CLASSNAME}__icon`} icon={icon} size={Size.xs} /> : null}
+
+                <Text as="span" truncate className={`${ITEM_CLASSNAME}__label`} ref={ref}>
+                    {label}
+                </Text>
+                <Icon
+                    className={classNames(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME}__chevron`)}
+                    icon={isOpen ? mdiChevronUp : mdiChevronDown}
+                />
+            </RawClickable>
+            {isOpen &&
+                (isDropdown ? (
+                    <Popover
+                        anchorRef={buttonRef}
+                        isOpen={isOpen}
+                        placement={Placement.BOTTOM_START}
+                        usePortal={false}
+                        closeOnClickAway
+                        closeOnEscape
+                        onClick={() => setIsOpen(false)}
+                        onClose={() => setIsOpen(false)}
+                        zIndex={996}
+                    >
+                        <ThemeProvider value={Theme.light}>
+                            <ul className={`${CLASSNAME}__drawer--popover`} id={sectionId}>
+                                <NavigationContext.Provider value={{ orientation: Orientation.vertical }}>
+                                    {children}
+                                </NavigationContext.Provider>
+                            </ul>
+                        </ThemeProvider>
+                    </Popover>
+                ) : (
+                    <ul className={`${CLASSNAME}__drawer`} id={sectionId}>
+                        {children}
+                    </ul>
+                ))}
+        </li>
+    );
+});
+NavigationSection.displayName = COMPONENT_NAME;
+NavigationSection.className = CLASSNAME;

package/src/components/navigation/context.tsx

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+import { Orientation } from '@lumx/core/js/constants';
+
+export const NavigationContext = createContext<{ orientation?: Orientation } | undefined>({
+    orientation: Orientation.vertical,
+});

package/src/components/navigation/index.ts

@@ -0,0 +1 @@
+export * from './Navigation';

package/src/components/notification/Notification.test.tsx

@@ -0,0 +1,94 @@
+import { Kind } from '@lumx/react';
+import { render, within, screen } from '@testing-library/react';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import userEvent from '@testing-library/user-event';
+
+import { Notification, NotificationProps } from './Notification';
+
+const CLASSNAME = Notification.className as string;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (props: Partial<NotificationProps> = {}) => {
+    render(<Notification isOpen type={Kind.info} {...props} />);
+    const notification = queryByClassName(document.body, CLASSNAME);
+
+    const icon = notification && queryByClassName(notification, `${CLASSNAME}__icon`);
+    const action = notification && queryByClassName(notification, `${CLASSNAME}__action`);
+    const actionButton = action && within(action).queryByRole('button');
+
+    return { action, actionButton, icon, notification, props };
+};
+
+describe(`<${Notification.displayName}>`, () => {
+    it('should not render without type', () => {
+        const { notification } = setup({ type: undefined });
+        expect(notification).not.toBeInTheDocument();
+    });
+
+    it('should not render when closed', () => {
+        const { notification } = setup({ isOpen: false });
+        expect(notification).not.toBeInTheDocument();
+    });
+
+    it('should render content', () => {
+        const content = 'Content';
+        const { notification, icon } = setup({ content });
+        expect(notification).toBeInTheDocument();
+        expect(notification).toHaveTextContent(content);
+        expect(icon).toBeInTheDocument();
+    });
+
+    it('should render content & action', async () => {
+        const onClick = vi.fn();
+        const onActionClick = vi.fn();
+        const content = 'Content';
+        const actionLabel = 'actionLabel';
+        const { notification, action, actionButton } = setup({ content, actionLabel, onClick, onActionClick });
+
+        expect(notification).toBeInTheDocument();
+        expect(notification).toHaveTextContent(content);
+
+        expect(action).toBeInTheDocument();
+        expect(actionButton).toBeInTheDocument();
+        expect(actionButton).toHaveTextContent(actionLabel);
+
+        // Click action button
+        await userEvent.click(actionButton as any);
+        expect(onActionClick).toHaveBeenCalled();
+        expect(onClick).not.toHaveBeenCalled();
+
+        // Click notification
+        await userEvent.click(notification as any);
+        expect(onClick).toHaveBeenCalled();
+    });
+
+    it('should render outside a portal', () => {
+        const parentId = '123';
+        render(
+            <div data-testid={parentId}>
+                <Notification isOpen type="info" usePortal={false} />
+            </div>,
+        );
+        const parent = screen.getByTestId(parentId);
+        const notification = queryByClassName(parent, CLASSNAME);
+        expect(notification).toBeInTheDocument();
+    });
+
+    it('should forward styles', () => {
+        const { notification } = setup({ style: { color: 'red' } });
+
+        expect(notification).toBeInTheDocument();
+        expect(notification).toHaveStyle('color: rgb(255, 0, 0)');
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'notification',
+        forwardAttributes: 'notification',
+        forwardRef: 'notification',
+    });
+});

package/src/components/notification/Notification.tsx

@@ -0,0 +1,138 @@
+import { useRef } from 'react';
+
+import classNames from 'classnames';
+import isFunction from 'lodash/isFunction';
+
+import { Button, Emphasis, Icon, Kind, Size, Theme } from '@lumx/react';
+import { DOCUMENT, NOTIFICATION_TRANSITION_DURATION } from '@lumx/react/constants';
+import { NOTIFICATION_CONFIGURATION } from '@lumx/react/components/notification/constants';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
+import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
+import { Portal } from '@lumx/react/utils';
+
+/**
+ * Defines the props of the component.
+ */
+export interface NotificationProps extends GenericProps, HasTheme {
+    /** Action button label. */
+    actionLabel?: string;
+    /** Content. */
+    content?: React.ReactNode;
+    /** Whether the component is open or not. */
+    isOpen?: boolean;
+    /** Notification type. */
+    type?: Kind;
+    /** Z-axis position. */
+    zIndex?: number;
+    /** On action button click callback. */
+    onActionClick?(): void;
+    /** On click callback. */
+    onClick?(): void;
+    /** Whether the notification should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
+    usePortal?: boolean;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Notification';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<NotificationProps> = {
+    zIndex: 9999,
+    usePortal: true,
+};
+
+/* eslint-disable react-hooks/rules-of-hooks, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
+/**
+ * Notification component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Notification = forwardRef<NotificationProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const {
+        actionLabel,
+        className,
+        content,
+        isOpen,
+        onActionClick,
+        onClick,
+        theme = defaultTheme,
+        type,
+        zIndex = DEFAULT_PROPS.zIndex,
+        usePortal = DEFAULT_PROPS.usePortal,
+        style,
+        ...forwardedProps
+    } = props;
+    if (!DOCUMENT) {
+        // Can't render in SSR.
+        return null;
+    }
+    const { color, icon } = NOTIFICATION_CONFIGURATION[type as Kind] || {};
+    const rootRef = useRef<HTMLDivElement>(null);
+    const isVisible = useTransitionVisibility(rootRef, !!isOpen, NOTIFICATION_TRANSITION_DURATION);
+    const hasAction: boolean = Boolean(onActionClick) && Boolean(actionLabel);
+
+    const handleCallback = (evt: React.MouseEvent) => {
+        if (isFunction(onActionClick)) {
+            onActionClick();
+        }
+        evt.stopPropagation();
+    };
+
+    if (!type || !isVisible) {
+        return null;
+    }
+
+    return (
+        <Portal enabled={usePortal}>
+            {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
+            <div
+                ref={mergeRefs(ref, rootRef)}
+                role="alert"
+                {...forwardedProps}
+                className={classNames(
+                    className,
+                    handleBasicClasses({
+                        color,
+                        hasAction,
+                        isHidden: !isOpen,
+                        prefix: CLASSNAME,
+                    }),
+                )}
+                onClick={onClick}
+                style={{ ...style, zIndex }}
+            >
+                <div className={`${CLASSNAME}__icon`}>
+                    <Icon icon={icon} size={Size.s} />
+                </div>
+                <div className={`${CLASSNAME}__content`}>{content}</div>
+                {hasAction && (
+                    <div className={`${CLASSNAME}__action`}>
+                        <Button emphasis={Emphasis.medium} theme={theme} onClick={handleCallback}>
+                            <span>{actionLabel}</span>
+                        </Button>
+                    </div>
+                )}
+            </div>
+        </Portal>
+    );
+});
+Notification.displayName = COMPONENT_NAME;
+Notification.className = CLASSNAME;
+Notification.defaultProps = DEFAULT_PROPS;